@charset "UTF-8";
#fv .slider{aspect-ratio:7 / 10; background:#000;}
#fv .slider img{display:block;}
#fv .slick-slide{aspect-ratio:7 / 10; display:flex; justify-content:center; align-items:center; overflow:hidden;}
/* SLIDE */
.slider{z-index:1;}

.slider {opacity: 0; visibility: hidden; transition: opacity .3s ease;}
.slider.slick-initialized {opacity: 1; visibility: visible;}

.slider img{width:100vw; max-width:100vw;}
.slick-dots{bottom:-20px;}
.slick-dots li {margin: 0 4px; width: 30px; height: 4px;}
.slick-dots li button:before {content:''; width: 30px; height:4px; background: #96acd2; opacity: 1;}
.slick-dots li.slick-active button:before{background: #2e59a6;}
#fv .slick-dotted.slick-slider{margin:0;}
.slide_target {pointer-events: none;}
@media only screen and (min-width:740px) {
#fv .slider{aspect-ratio:16 / 9; background:#000;}
#fv .slick-slide{aspect-ratio:16 / 9;}
}

#newsbox{background:#efefef; padding:30px 0;}
#newsbox .box{max-width:1100px; margin:0 auto;}
#news{position:relative; padding:0 20px 20px 20px; text-align:left;}
#news h3{line-height: 1.2;}
#news .btn3 a{margin:20px 0 0 0;}
#news ul{margin:10px 0 0 4px;}
#news li{margin-bottom:8px;}
#news .date{display:inline-block; font-family: "Ubuntu", sans-serif; font-style: normal; font-size: 1.3rem; font-weight:400;}
#news .cat{display:inline-block; margin-left:10px; vertical-align:middle; font-family: "Ubuntu", sans-serif; font-style: normal; font-size: 1.1rem; font-weight:400; color:#fff; background:#2e59a6; padding:1px 0; width:110px; min-width:110px; height:20px; line-height:20px;text-align:center; border-radius:50px;}
#news ul li a{display:block; text-decoration:underline;}
#news .no-link{display:block;}

#fvmovie{padding:16px 20px;}
@media only screen and (min-width:740px) {
#newsbox .box{display:flex; gap:30px; justify-content:space-between; align-items:start; padding:0 20px;}
#newsbox .box #news{width:calc(65% - 15px);}
#newsbox .box #fvmovie{width:calc(45% - 15px);}
#news{padding:0;}
#news ul{margin-left:4px;}
#news ul li{display:flex; gap:10px; align-items:baseline;}
#news ul li a{line-height:1.6;}
#news ul li .date{width:60px;}
#fvmovie{padding:20px 0;}
}
@media only screen and (min-width:1200px) {
#newsbox .box{padding:0;}
}

#special{padding:50px 0 50px;}
#special h3{margin:16px 0;}
#special .specialbox ul{max-width:90%; margin:0 auto;}
#special .specialbox ul li{display:flex; align-items:center; justify-content: center; 
flex-flow:column; margin-bottom:10px; padding:15px 10px; background:url(../lib/bg-rainbow.jpg) center center no-repeat; background-size:cover; border-radius:20px; min-height:160px; color:#fff; font-weight:800; font-size:1.8rem;}
#special .btn2{margin-top:20px;}
#special .btn2 a{display:flex; font-size:1.9rem; gap:4px; align-items:center; width:70vw;}
#special .btn2 a img{width:90px; height:auto;}
@media only screen and (min-width:740px) {
#special h3{margin:0 0 16px;}
#special .specialbox ul{display:flex; gap:18px; max-width:1100px; margin:0 auto 30px; padding:0 20px;}
#special .specialbox ul li{font-size:2.2rem; flex:1; margin-bottom:16px;}
#special .btn2 a img{width:108px; height:auto;}
}


#recommend{background:#2e59a6; padding:30px 0 50px; background-size:cover;}
#recommend .box{position:relative; background:#f7f8f8; border-radius:20px; padding:20px 0;}
#recommend h3{text-align:left; padding-left:10px;}
#recommend .reconum{position:absolute; right:10px; top:20px; color:#2e59a6; background:url(../lib/bg-rainbow.jpg) center center no-repeat; background-size:cover; font-weight:500;}
#recommend .reconum:before{content:"";position:absolute; top:0; left:0; background:url(../lib/bg-rainbow2.jpg) center center no-repeat; background-size:cover; height:8px; width:100%;}
#recommend .reconum:after{content:"";position:absolute; bottom:0; left:0; background:url(../lib/bg-rainbow2.jpg) center center no-repeat; background-size:cover; height:8px; width:100%;}
#recommend .reconum .recbg{background: rgba(255,255,255,0.8); padding:16px 10px;}
#recommend .reconum strong{margin-right:4px; font-size:1.5em; font-weight:700; font-family: "Ubuntu", sans-serif;}
#recommend .catbox{display:flex; justify-content:space-between; background:#2e59a6; margin-top:20px; padding:8px 10px;}
#recommend .catbox .btn3 a{margin:0; background:#fff;}
#recommend .recoset{margin:20px 0 20px 0; width:100%; max-width:1200px; overflow:hidden;}
#recommend h4{color:#fff; font-size:1.9rem;}
#recommend .itembox {padding: 5px 10px; text-align: left; border-radius: 12px; overflow: hidden; width: 100%; max-width: 300px;}
#recommend .thumb {width: 100%; aspect-ratio: 16 / 9; overflow: hidden;}
#recommend .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
#recommend .itemtitle { font-weight: bold; font-size: 1.7rem; font-weight:800; margin-top: 8px; color: #2e59a6;}
#recommend .itemtitle.rank{display:flex; gap:4px; justify-content:flex-start; align-items:flex-start;}
#recommend .itemtitle.rank p{flex:1;}
#recommend .itemtitle.rank:before{content:""; width:24px; height:24px;}
#recommend .itemtitle.rank001:before{background:url(../lib/rank1.png) center center no-repeat;  background-size:cover;}
#recommend .itemtitle.rank002:before{background:url(../lib/rank2.png) center center no-repeat;  background-size:cover;}
#recommend .itemtitle.rank003:before{background:url(../lib/rank3.png) center center no-repeat;  background-size:cover;}
#recommend .itemtitle.rank004:before{background:url(../lib/rank4.png) center center no-repeat;  background-size:cover;}
#recommend .itemtitle.rank005:before{background:url(../lib/rank5.png) center center no-repeat;  background-size:cover;}
#recommend p {font-size: 1.5rem; padding:0 8px 0 0; line-break:strict; text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict;}
#recommend .slick-slide { margin: 0; padding:0 10px;}
#recommend .slick-list {overflow: hidden;}
#recommend .slick-track {display: flex; align-items: stretch;}
@media only screen and (min-width:740px) {
#recommend .box{max-width:1200px; margin:0 auto; padding: 20px;}
#recommend h3{text-align:center; padding:0;}
#recommend .reconum{right:20px; top:30px;}
#recommend .reconum .recbg{padding:16px 20px;}
}


#watching{position:relative; padding:20px; text-align:center;}
#watching .h3jp{text-align:center;}
#watching .watchtitle{position:relative; padding-bottom:10px; margin-bottom:50px; color:#fff; font-size:2.0rem; font-weight:700; font-family: "Ubuntu", sans-serif;}
#watching .watchtitle:after{content:""; position:absolute; bottom:0; left:0; right:0; margin:0 auto; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff;}
/* #watching h3{margin:-20px auto 0; width:85%; max-width:330px;} */
#watching #amazon{background:#2e59a6; padding:20px; padding:20px; margin-bottom:20px; border-radius:25px;}
#watching #lemiro{background:#ed6b03; padding:20px; padding:20px; margin-bottom:20px; border-radius:25px;}
#watching ul{margin-top:0px;}
#watching ul li{position:relative; margin-top:55px; margin-bottom:20px; padding:15px 10px; background:#fff; border-radius:10px; font-weight:500; min-height:110px;}
#watching #amazon ul li{color:#2e59a6;}
#watching #lemiro ul li{color:#ed6b03;}
#watching ul li .step{display:block; margin:-50px auto 10px; width:70px; height:70px; position:relative;}
#watching .btn2 a,#watching .btn a{max-width:260px; text-align:left; padding-left:20px;}
@media only screen and (min-width:740px) {
#watching{padding:50px 20px;}
#watching .box{max-width:1100px; margin:0 auto; display:flex; gap:20px;}
#watching #amazon,#watching #lemiro{width:calc(100% / 2);}
/* #watching h3{margin:-20px auto 10px; width:85%; max-width:400px;} */
#watching ul{}
#watching ul li{flex:1; display:flex; flex-direction:column; justify-content:space-between;}
#watching ul li .step{margin:-50px auto 0;}
#watching ul li .btn2{margin-top:auto;}
#watching ul li .watchbox {flex: 1; display: flex; flex-direction: column; justify-content: center;}
}

#alltitles{position:relative; padding:20px 0 40px; background:#efefef;}
#alltitles .kana{max-width:90%; margin:8px auto;}
#alltitles .kana ul{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap;}
#alltitles .kana ul li{width:calc(100% / 6 - 8px);}
#alltitles .kana ul li a{display:block; border:1px solid #2e59a6; color:#2e59a6; font-size:1.7rem; border-radius:50px; line-height:1; padding:2px 0 4px; background:#fff;}
#alltitles .titlelists{display:flex; justify-content:flex-start; gap:8px; flex-wrap:wrap; width:100%; margin-top:16px; padding:0 10px;}
#alltitles .titlelists .itembox{width:calc(100% / 2 - 4px);}
#alltitles .thumb {width: 100%; aspect-ratio: 16 / 9; overflow: hidden;}
#alltitles .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
#alltitles .itemtitle {font-weight: bold; font-size: 1.4rem; font-weight:800; margin-top: 3px; color: #2e59a6; text-align:left;}
#alltitles .end-message{width:100%; text-align:center; margin:2em 0; font-weight:700; color:#555;}
#alltitles .btn4{position:relative;}
#alltitles .btn4 button{-webkit-appearance: none; appearance: none; background: none; border: none; border-radius: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; text-align: inherit; cursor: pointer; ackground:#fff; position:relative; display:block; width:40vw; max-width:200px; height:30px; line-height:27px; margin:30px auto 0; padding-left:20px; font-weight:400; border:1px solid #000; font-size:13px; font-size:1.3rem; border-radius:50px; text-decoration: none; color:#000; text-align:left;}
#alltitles .btn4 button:after{position:absolute; top:20%; right:10px; content:""; width:15px; height:15px; background:url(../lib/icon-arrow2.webp) center center no-repeat; background-size:cover; transform: translateY(0%) rotate(90deg);}
#alltitles .btn4 button:hover{background:rgba(239, 239, 239, 0.6);}
#alltitles .btn4 button.loadmore-btn.reset-mode{background:#eee; transition:all .3s; width:40vw; background: #ccc;}

@media only screen and (min-width:740px) {
#alltitles .kana ul li{width:calc(100% / 11 - 8px); max-width:auto;}
#alltitles .titlelists{gap:16px;}
#alltitles .titlelists .itembox{width:calc(100% / 4 - 12px);}
}
@media only screen and (min-width:1140px) {
#alltitles .titlelists{padding:0;}
}