.l-main {
  max-width: 1200px;
  padding: 0;
  width: calc(100% - 280px);
}
.search h2 {
padding: 10px 20px;
}
.search ul {
display: table;
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.search ul li {
display: table-row;
}
.search ul li > * {
display: table-cell;
padding: 10px;
border: 1px solid #ccc;
}
.search ul li:first-child {
background: #ddd;
}
.review-box h4 {font-size: 0.9rem;}
.review-box span ,
.review-box p {font-size: 0.8rem;}
.review-box a {
color: #78d337;
font-weight: 600;
font-size: 1rem;
width: 100%;
/* display: block; */
}
.review-box {
display: flex;
gap: 20px;
margin: 20px auto;
border: 1px solid #ddd;
padding: 10px;
}
.review-box .left_area .img_area {aspect-ratio: 3 / 4;max-width: 240px;width: 100%;/* position: relative; */min-width: 240px;display: flex;justify-content: center;align-items: center;/* height: 100%; */background: #3333330a;flex-direction: column;}
.review-box .right_area {
width: 100%;
}
/* .review-box .left_area .img_area:after {
content: "ÃƒÂ¤Ã‚Â¸Ã…Â ÃƒÂ¦Ã‹Å“Ã‚Â ÃƒÂ¤Ã‚Â¸Ã‚Â­";
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #ffcc4e;
padding: 10px 15px;
font-size: 1.1rem;
font-weight: 600;
} */
.review-box .left_area .img_area img {width: 100%;height: 100%;object-fit: contain;}
.title_area h3 {
font-size: 2rem;
/* padding-bottom: 15px; */
line-height: 1;
margin-bottom: 10px;
}
.review-box .left_area .amazon-source {
	display: flex;
	gap: 10px;
	margin: 10px auto;
}
.review-box .left_area .amazon-source .amazon-img {
	max-width: 15px;
}
.review-box .left_area .amazon-source .amazon-img img {
	width: 100%;
}

.radar-wrap {
max-width: 320px;
margin: 0 auto;
text-align: center;
}

.radar-wrap canvas {
width: 100%;
height: auto;
}

.radar-data {
display: none;
}
.right_area .title_area {
display: flex;
align-items: baseline;
/* gap: 20px; */
flex-direction: column;
}
.right_area .title_area a {font-size: 1.1rem;}
.right_area .title_area p {
font-size: 1rem;
}
.star {
display: flex;
gap: 10px;
align-items: flex-end;
}
.star img {
max-width: 120px;
}
.radar-wrap h4 {
text-align: left;
}
.cnt_txt_area a {color: #333;display: flex;justify-content: flex-end;gap: 5px;font-weight: 500;position: relative;right: 15px;font-size: 0.8rem;line-height: 1;align-items: center;}
.cnt_txt_area a::after {
  content: "";
  position: absolute;
  /* padding-left: 10px; */
  top: 50%;
  right: -15px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.people a {color: #fff;background: #7f7f7f;padding: 2px 10px;border-radius: 5px;font-weight: 500;display: block;text-wrap-mode: nowrap;font-size: 0.8rem;}
.review-box h4.term {
display: flex;
gap: 5px;
align-items: center;
flex-wrap: wrap;
}
.button_wrapper .button {
color: #333;
font-weight: 500;
margin: 20px auto;
}
.vod-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 auto;
border: none;
padding: 10px;
}
.vod-list li a {
display: flex;
align-items: center;
gap: 10px;
}
.vod-list li a img {
max-width: 40px;
}
.pagination {
display: flex;
justify-content: center;
gap: 5px;
padding: 20px 0;
}
.pagination span,
.pagination a {
min-width: 30px;
display: flex;
justify-content: center;
padding: 5px;
background: #ddd;
}
.pagination span.page-numbers.dots {
background: none;
}

.cinema-review-mini-list {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
}

.cinema-review-mini-list a {
	position: relative;
	font-weight: normal;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}

.cinema-review-mini-list a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
	display: block;
	margin-top: -1px;
}
.movie-review-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
}

.cinema-review-mini-item + .cinema-review-mini-item {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed #ddd;
}

.cinema-review-mini-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 13px;
}

.cinema-review-mini-score {
	font-weight: 700;
	color: #e5b200;
}

.cinema-review-mini-user {
	color: #666;
}

.cinema-review-mini-text {
	font-size: 14px;
	line-height: 1.8;
	margin: 0 0 10px;
}

.cinema-review-mini-link {
	font-size: 13px;
	font-weight: 700;
}

/* =========================================================
 ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ
========================================================= */

.cinema-layout{
  display:flex;
  gap:40px;
  align-items:flex-start;
}

.cinema-sidebar{
  width:280px;
  flex-shrink:0;
}

.cinema-list-main{
  flex:1;
  min-width:0;
}


/* =========================================================
 ã‚µã‚¤ãƒ‰ãƒãƒ¼æœ¬ä½“
========================================================= */

.cinema-sidebar-inner{
  position:sticky;
  top:100px;
}


/* =========================================================
 ã‚»ã‚¯ã‚·ãƒ§ãƒ³
========================================================= */

.cinema-side-section{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:18px;
  margin:0 0 20px;
}

.cinema-side-section h3{
  font-size:16px;
  font-weight:700;
  margin:0 0 14px;
  padding:0 0 10px;
  border-bottom:1px solid #eee;
  line-height:1.4;
}


/* =========================================================
 ãƒªã‚¹ãƒˆ
========================================================= */

.cinema-side-section ul{
  margin:0;
  padding:0;
  list-style:none;
}

.cinema-side-section li{
  margin:0;
  padding:0;
  border-bottom:1px solid #f3f3f3;
}

.cinema-side-section li:last-child{
  border-bottom:none;
}


/* =========================================================
 ãƒªãƒ³ã‚¯
========================================================= */

.cinema-side-section li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
  color:#222;
  padding:10px 0;
  transition:0.2s ease;
  font-size:14px;
  line-height:1.5;
}

.cinema-side-section li a:hover{
  color:#7cc241;
  transform:translateX(3px);
}


/* =========================================================
 ä»¶æ•°
========================================================= */

.cinema-side-section li span{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:#f5f5f5;
  color:#666;
  font-size:12px;
  font-weight:700;
}


/* =========================================================
 ç¾åœ¨é¸æŠžä¸­
========================================================= */

.cinema-side-section li.is-current a,
.cinema-side-section li.current a{
  color:#7cc241;
  font-weight:700;
}

.cinema-side-section li.is-current span,
.cinema-side-section li.current span{
  background:#7cc241;
  color:#fff;
}


/* =========================================================
 ã‚¹ã‚¯ãƒ­ãƒ¼ãƒ«
========================================================= */

.cinema-sidebar{
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  padding-left: 15px;
}

.cinema-sidebar::-webkit-scrollbar{
  width:6px;
}

.cinema-sidebar::-webkit-scrollbar-thumb{
  background:#d8d8d8;
  border-radius:999px;
}

.cinema-sidebar::-webkit-scrollbar-track{
  background:transparent;
}

.cinema-side-section{
  border:1px solid #e5e5e5;
  border-radius:12px;
  background:#fff;
  margin:0 0 16px;
  overflow:hidden;
}
.cinema-freeword-search {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}
.keyword-box {
	border:1px solid #e5e5e5;
	/* margin:0 0 16px; */
	padding: 10px;
	border-radius:12px;
}
.cinema-freeword-search .search-btn {
	display: flex;
	justify-content: flex-end;
}
.cinema-freeword-search button {
	display: flex;
	justify-content: flex-end;
	padding: 5px 10px;
	background: #eee;
	margin-top: 10px;
}
.cinema-freeword-search button:hover {
	background: #dcdcdc;
}

/* =========================================================
 ãƒœã‚¿ãƒ³
========================================================= */

.cinema-side-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border:none;
  background:none;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  text-align:left;
}

.cinema-side-toggle::after{
  content:"+";
  font-size:18px;
  line-height:1;
  transition:0.2s ease;
}


/* é–‹ã„ã¦ã„ã‚‹çŠ¶æ…‹ */

.cinema-side-section.is-open
.cinema-side-toggle::after{
  transform:rotate(45deg);
}


/* =========================================================
 ä¸­èº«
========================================================= */

.cinema-side-content{
  display:none;
  padding:0 18px 16px;
}

.cinema-side-section.is-open
.cinema-side-content{
  display:block;
}


/* =========================================================
 ãƒªã‚¹ãƒˆ
========================================================= */

.cinema-side-content ul{
  margin:0;
  padding:0;
  list-style:none;
}

.cinema-side-content li{
  border-bottom:1px solid #f3f3f3;
}

.cinema-side-content li:last-child{
  border-bottom:none;
}

.cinema-side-content li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  color:#222;
  text-decoration:none;
  font-size:14px;
}

.cinema-side-content li a:hover{
  color:#7cc241;
}

.cinema-side-content li span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:22px;
  border-radius:999px;
  background:#f3f3f3;
  font-size:11px;
  font-weight:700;
  color:#666;
}


/* =========================================================
 SP
========================================================= */

@media screen and (max-width:1024px){

  .cinema-layout{
      display:block;
  }

  .cinema-sidebar{
      width: 90%;
      max-height:none;
      overflow:visible;
      margin:0 0 30px;
      padding:0;
      margin: auto;
      padding-bottom: 20px;
  }

  .cinema-sidebar-inner{
      position:static;
  }

  .cinema-side-section{
      margin:0 0 16px;
  }

}

/* =========================================================
   åˆ¶ä½œå¹´ã‚°ãƒ«ãƒ¼ãƒ—
========================================================= */

.cinema-year-group + .cinema-year-group{
  margin-top:24px;
}

.cinema-year-group-title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:#999;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* =========================================================
   decade
========================================================= */

.cinema-year-group + .cinema-year-group{
    margin-top:10px;
}


/* =========================================================
   toggle
========================================================= */

.cinema-year-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border:none;
    background:none;
    cursor:pointer;
    text-align:left;
    font-size:14px;
    font-weight:700;
    color:#666;
}

.cinema-year-toggle::after{
    content:"+";
    font-size:16px;
    transition:0.2s ease;
}

.cinema-year-toggle.is-open::after{
    transform:rotate(45deg);
}


/* =========================================================
   year list
========================================================= */

.cinema-year-list{
    display:none;
    padding:0 0 0 10px;
}

.cinema-year-list.is-open{
    display:block;
}


/* =========================================================
 SP ã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³é¢¨
========================================================= */

@media screen and (max-width:767px){

  .cinema-side-section{
      padding:14px;
      border-radius:10px;
  }

  .cinema-side-section h3{
      font-size:15px;
      margin:0 0 10px;
      padding:0 0 8px;
  }

  .cinema-side-section li a{
      padding:9px 0;
      font-size:13px;
  }

  .cinema-side-section li span{
      min-width:34px;
      height:22px;
      font-size:11px;
  }

}

@media screen and (max-width: 768px) {
  .review-box {
    padding: 20px;
    flex-direction: column;
  }
  .review-box .left_area .img_area {
    margin: auto;
  }
  .l-main {
    width: 90%;
    margin: auto;
  }
}