/* Highlight
=================================== */

.hl-box { margin-bottom:20px; }
.hl-box:last-child { margin-bottom:0; }
.hl-ttl1 { line-height:120%; background-color:#2a6001; margin-bottom:10px; padding:7px; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; font-style:normal; }
.hl-ttl2 { line-height:120%; padding-bottom:7px; margin-bottom:10px; border-bottom:#666 1px dotted; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; font-style:normal; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

.hl-box { margin-bottom:10px; }
.hl-box:last-child { margin-bottom:0; }
.hl-ttl1 { font-size:100%; margin-bottom:10px; padding:5px; }
.hl-ttl2 { font-size:100%; margin-bottom:10px; }

}


/* movie-list
----------------------------------- */

.movie-list { /* for space */ font-size:0; }
.movie-list li { display:inline-block; vertical-align:top; width:24.25%; margin-right:1%; /* for space */ font-size:1rem; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { .movie-list li:hover { opacity:0.7; text-decoration:none; } }
.movie-list li:nth-child(4n) { margin-right:0; }
.movie-list li dl { width:100%; }
.movie-list li dl dt { position: relative; width:100%; height:100%; padding-top:56.25%; background-color:#333; }
.movie-list li dl dt a { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background-size:cover; background-repeat:no-repeat; outline:none; }
.movie-list li dl dd { display:block;/* height:3.5rem;*/ padding-top:0.3rem; padding-bottom:1.0rem; font-size:0.9rem; line-height:1.2rem; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

.movie-list li,
.movie-list li:nth-child(4n) { width:32%; margin-right:2%; }
.movie-list li:nth-child(3n) { margin-right:0; }
.movie-list li dl dd { /*height:3.2rem;*/ font-size:0.8rem; line-height:1.1rem; }

}

@media all and (max-width: 500px) {

.movie-list li dl dd { padding-top:0.2rem; font-size:0.7rem; line-height:0.9rem; }

}


/* hl-bknm
----------------------------------- */

#hl-bknm-ttl { display:block; margin-bottom:10px; font-family:"Poppins", sans-serif; font-weight:normal; font-size:110%; }
#hl-bknm { margin-bottom:20px; }

#hl-bknm ul:after {content:"";clear:both;display:block;}
#hl-bknm ul li { float:left; width:32.5%; margin:0 1.25% 0 0; }
#hl-bknm ul li:last-child { margin:0 0 0 0; }
#hl-bknm ul li.coming { opacity:0.5; }
#hl-bknm ul li .btn { position:relative; width:100%; height:0; padding-top:21%; background-repeat:no-repeat; }
#hl-bknm ul li .btn .year { position:absolute; display:flex; justify-content:center; align-items:center; left:0; top:0; width:100%; height:100%; border-radius:10px; color:#fff; background-color:#2a6001; text-align:center; font-size:120%; line-height:120%; text-decoration:none; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; font-style:normal; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #hl-bknm ul li .btn .year:hover { opacity:0.7; text-decoration:none; } }
#hl-bknm ul li .btn .year::before { display:inline-block; position:absolute; top:50%; left:1.0em; margin:-1.2em 0 auto 0; content:"▶︎"; font-size:50%; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#hl-bknm ul li .btn { padding-top:30%; }
#hl-bknm ul li { font-size:3.0vw; }

}


/* hl-pagelink
----------------------------------- */

#hl-pagelink { padding:0 0 10px 0; text-align:center; /* for space */ font-size:0; }
#hl-pagelink li { display:inline-block; margin-right:1.0em; vertical-align:top; line-height:140%; font-weight:bold; /* for space */ font-size:0.9rem; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #hl-pagelink li:hover { opacity:0.7; text-decoration:none; } }
#hl-pagelink li:last-child { margin-right:0; }
#hl-pagelink li a::before { display:inline-block; vertical-align:bottom; margin:-0.15em 0.5em 0 0; content:"▼"; font-size:70%; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#hl-pagelink li { font-size:0.8rem; }

}