/* mainArea ============================== */ #mainArea{width:980px; height:690px; margin:0 auto; /*box-shadow:0 0 24px rgba(126,29,63,0.2);*/ position:relative;} #mainArea .main1{background: url(../img/main.jpg) no-repeat 0 0; width:100%; height:100%; position:absolute; top:0; left:0; animation: fadein 2.5s ease 0s 1 normal; -webkit-animation: fadein 2.5s ease 0s 1 normal;} #mainArea .main2{background: url(../img/copy01.png) no-repeat 0 0; position:absolute; top:271px; left:490px; width:35px; height:109px; opacity: 0; -webkit-animation: fadein 1.5s ease 1s 1 forwards; animation: fadein 1.5s ease 1s 1 forwards;} #mainArea .main3{background: url(../img/copy02.png) no-repeat 0 0; position:absolute; top:280px; left:455px; width:35px; height:137px; opacity: 0; -webkit-animation: fadein 2.5s ease 1.5s 1 forwards; animation: fadein 2.5s ease 1.5s 1 forwards;} #mainArea .main4{background: url(../img/logo.png?200722) no-repeat right bottom; position:absolute; bottom:31px; left:0px; width:980px; height:248px; opacity: 0; -webkit-animation: fadein 2.5s ease 2s 1 forwards; animation: fadein 2.5s ease 2s 1 forwards;} #mainArea .main5{position:absolute; bottom:15px; right:15px; opacity: 0; -webkit-animation: fadein 2.5s ease 2s 1 forwards; animation: fadein 2.5s ease 2s 1 forwards;} #mainArea .main1 img, #mainArea .main2 img, #mainArea .main3 img, #mainArea .main4 img, #mainArea .main4 img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @keyframes fadein { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadein { 0% {opacity:0;} 100% {opacity:1;} } @media all and (max-width: 767px) { #mainArea{width:100%; height:0; padding:70.4% 0 0; background-size:cover; margin:0 auto 0px;} #mainArea .main1{background-size:cover;} #mainArea .main2{width:3.5%; height:0; padding:13% 0 0; top:39.27%; left:49.5%; background-size:cover; /*display: none;*/ } #mainArea .main3{width:3.5%; height:0; padding:16% 0 0; top:40.57%; left:45.92%; background-size:cover; /*display: none;*/} #mainArea .main4{width:100%; height:0; padding:25% 0 0; bottom:3.26%; left:0%; background-size:cover;} #mainArea .main5{ display: none;} } #topContents {} /* storyArea ============================== */ #storyArea { background-image: url(../img/top/bg_story.jpg); box-shadow: 0px 2px 4px rgba(0,0,0,0.1) inset; } #storyArea #story { padding: 30px 0; display:flex;} #storyArea #story #topTrailer { background-color: #fff; width:596px; display: inline-block; vertical-align: top; padding: 9px 0 17px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; } #storyArea #story #topTrailer h2{background: url(../img/top/h2_trailer.png) no-repeat center top; width:100%; height:79px; margin: 0 auto; text-indent:-9999px;} #storyArea #story #topTrailer #trailer {background: url(../img/top/bg_trailer.png) no-repeat center top; width:530px; padding: 16px; margin: 0 auto;} #storyArea #story #topTrailer #trailer div {width:530px; height:298px;} #storyArea #story #topTrailer #trailer iframe {width:100%; height:298px;} #storyArea #story #topTrailer div#ph_main span { display: block; position: relative; background-size: 100%; } @media all and (min-width: 768px) { #storyArea #story #topTrailer div#ph_main, #storyArea #story #topTrailer div#ph_main span { width: 530px; height: 298px; background-size: cover; background-repeat: no-repeat; background-position: center center; } } #storyArea #story #topStory { background-color: #fff; width:364px; display: inline-block; vertical-align: top; position: relative; margin: 0 0 25px auto; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; } #storyArea #story #topStory h2{background: url(../img/top/h2_story.png) no-repeat center 20px #fdf5d4; width:100%; height:90px; margin: 0 auto; text-indent:-9999px; border-top-left-radius: 25px; border-top-right-radius: 25px; -webkit-border-top-left-radius: 25px; -webkit-border-top-right-radius: 25px; -moz-border-radius-topleft: 25px; -moz-border-radius-topright: 25px; } #storyArea #story #topStory .epnum { background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; width:61px; height: 61px; text-indent: -9999px; margin: 10px 10px 0 10px;} .story1 .epnum {background-image: url(../img/story/ep01.png);} .story2 .epnum {background-image: url(../img/story/ep02.png);} .story3 .epnum {background-image: url(../img/story/ep03.png);} .story4 .epnum {background-image: url(../img/story/ep04.png);} .story5 .epnum {background-image: url(../img/story/ep05.png);} .story6 .epnum {background-image: url(../img/story/ep06.png);} .story7 .epnum {background-image: url(../img/story/ep07.png);} .story8 .epnum {background-image: url(../img/story/ep08.png);} .story9 .epnum {background-image: url(../img/story/ep09.png);} .story10 .epnum {background-image: url(../img/story/ep10.png);} #storyArea #story #topStory .oadate { vertical-align: middle; display: inline-block; color: #8d380f; font-size: 1.5em;} #storyArea #story #topStory .box p.txt { padding: 10px 25px 30px;} #storyArea #story #topStory p.btn a { display: block; border-radius: 25px; background-color: #5bc5de; background-repeat: no-repeat; background-position: center center; background-image: url(../img/top/btn_detail.png); background-size: contain; width: 220px; height: 50px; text-indent: -9999px; position: absolute; bottom:-25px; left:50%; margin-left: -110px; } #storyArea #story #topStory p.btn a:hover {background-color: #89d5e7;} #topBnrArea a:hover{opacity: 0.85;} @media all and (min-width: 768px) { #topBnrArea { padding:20px 0 0px; margin: 0 auto; width: 980px; letter-spacing: -.4em; text-align: center;} .bnrPreview01, .bnrPreview02{ display: inline-block;} .bnrPreview02 { margin-right: 16px;} .bnrPreview01 a, .bnrPreview02 a { background-repeat: no-repeat; background-position: center center; background-size: contain; width: 480px; height: 150px; text-indent: -9999px; display: block; } .bnrPreview01 a {background-image: url(../img/top/bnr_preview_01.png); box-shadow: 4px 4px #079c58;} .bnrPreview02 a {background-image: url(../img/top/bnr_preview_02.png); box-shadow: 4px 4px #ae6fd3;} } @media all and (max-width: 767px) { #storyArea #story { padding: 15px 10px; display: block;} #storyArea #story #topTrailer { width:100%; display: block; margin-bottom: 15px;} #storyArea #story #topStory { width:100%; display: block; margin-bottom: 20px;} #storyArea #story #topStory .box p.txt { padding: 10px 25px 30px;} #storyArea #story #topTrailer h2{background: url(../img/top/sp_h2_trailer.png) no-repeat center center; height: 70px;} #storyArea #story #topTrailer #trailer {} /*#storyArea #story #topTrailer #trailer div {width:90%; height: auto; margin: 0 auto;}*/ #storyArea #story #topTrailer #trailer {width:100%; height:auto; margin:.2em auto 0; box-shadow:none; background-image: url(../img/top/bg_trailer.png); background-repeat: no-repeat; background-position: center top; background-size:100% auto; width:95%; padding: 2.55% 0 ;} #storyArea #story #topTrailer #trailer div {width:95%; margin: 0 auto; position:relative; padding:53% 0 0; height:0; overflow: hidden;} #storyArea #story #topTrailer iframe,.emb iframe{ position:absolute; top: 0; left:0; width:100% !important; height: 100% !important;} #storyArea #story #topTrailer div#ph_main {width:95%; margin: 0 auto; position:relative; height:auto; overflow: hidden; padding: 0 0 0;} #storyArea #story #topTrailer div#ph_main span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #storyArea #story #topTrailer div#ph_main span { height: 0; padding:56.25% 0 0; position: relative; } #topBnrArea { padding: 1em 1em 0.5em;} .bnrPreview01 a, .bnrPreview02 a { background-repeat: no-repeat; background-position: center center; background-size: contain; width: 100%; height: 0; padding-top: 31.25%; text-indent: -9999px; display: block; margin: 0 auto; } .bnrPreview01 a {background-image: url(../img/top/bnr_preview_01.png); box-shadow: 4px 4px #079c58;} .bnrPreview02 a {background-image: url(../img/top/bnr_preview_02.png); box-shadow: 4px 4px #ae6fd3; margin-bottom: 10px;} } /* whatsnewArea ============================== */ #whatsnewArea { background-image: url(../img/top/bg_topics.jpg); } #whatsnew { padding: 30px 0;} #whatsnewArea #whatsnew h2{background: url(../img/top/h2_topics.png) no-repeat center top; width:363px; height:84px; margin: 0 auto; text-indent:-9999px;} .swiper-container { width: 100%; margin: 0 auto; } .swiper-wrapper {padding-inline-start: 35px; } .swiper-slide { background: #fff; margin: 0; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-border-bottom-right-radius: 25px; -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomright: 25px; -moz-border-radius-bottomleft: 25px; } .swiper-button-next, .swiper-button-prev { color: #5bc5de!important;} .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: -5px!important;} :root { --swiper-theme-color: #5bc5de!important; } #whatsnewArea #whatsnew ul li a { width: 100%;} #whatsnewArea #whatsnew ul li { margin: 0 5px;} #whatsnewArea #whatsnew ul li p { padding: 10px; font-size: 0.9em; line-height: 1.5em; min-height: 3em;} #whatsnewArea #whatsnew ul li span.thum { width: 100%; height: 0; padding-top: 66.666%; display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center center; vertical-align: top; margin: 0 0 0 0; position: relative; } #whatsnew ul#topicslist li span.thum img { width: 100%; height: 124px; } #whatsnewArea #whatsnew ul li span.ymd { color: #d84f8f; position: absolute; bottom: 10px; right: 10px; font-size:0.9em; font-weight: bold; } #tpcs a:hover{opacity: 0.85;} @media all and (min-width: 768px) { /*#tpcs {height: 200px; border: solid 1px #f00; padding: 0; }*/ .swiper-slide{} #tpcs p { height: 80px;} } @media all and (max-width: 767px) { #whatsnewArea #whatsnew h2{ width: 330px; height: 70px; background-size: contain;} #whatsnewArea #whatsnew ul li p {min-height: 5.5em;} } /* spcntArea ============================== */ #spcntArea { background-image: url(../img/top/bg_spcnt.jpg); } #spcntArea #spcnt:after { content: ""; display: block; clear: both; } #spcnt p.bnrReport a span.phReport { } @media all and (min-width: 768px) { #spcntArea {padding: 13px 0;} #spcntArea #spcnt { text-align: center; letter-spacing: -.4em;} #spcntArea #spcnt p { display: inline-block; margin: 13px; letter-spacing: 0em; vertical-align: top;} #spcntArea #spcnt p a, #spcnt p.bnrBraveEnd span {width:464px; height: 166px; display: block; white-space: nowrap; text-indent: -9999px; overflow: hidden; background-size: 100%; background-position: center; background-repeat: no-repeat; } #spcnt p.bnrChart a { background-image: url(../img/top/bnr_chart.png); } #spcnt p.bnrReport a { background-image: url(../img/top/bnr_report.png); position: relative; } #spcnt p.bnrOmikuji a { background-image: url(../img/top/bnr_omikuji.png); } #spcnt p.bnrInterview a { background-image: url(../img/top/bnr_interview09.png); } #spcnt p.bnrBrave a { background-image: url(../img/top/bnr_brave2.png); } #spcnt p.bnrQuiz a { background-image: url(../img/top/bnr_quiz.png); } #spcnt p.bnrGallery a { background-image: url(../img/top/bnr_gallery.png); position: relative; } #spcnt p.bnrMovie a { background-image: url(../img/top/bnr_movie.png); } #spcnt p.bnrBraveEnd { background-image: url(../img/top/bnr_brave_end.png); } #spcnt p a:hover{opacity: 0.85;} #spcnt p.bnrReport a span.date {display: block; text-indent:0; position: absolute; top:90px; left: 0; width:215px; text-align: center; color: #d84f8f; font-size:0.9em; font-weight: bold;} #spcnt p.bnrReport a span.phReport, #spcnt p.bnrGallery a span.phGallery { position: absolute; top:0; left:217px; width:240px; height: 160px; -webkit-border-top-right-radius: 12px; -webkit-border-bottom-right-radius: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; background-size: 100%; background-position: center; background-repeat: no-repeat; } } @media all and (max-width: 767px) { #spcntArea #spcnt { width: 100%; padding: 2% 0; text-align: center; letter-spacing: -.4em;} #spcntArea #spcnt p { display: inline-block; letter-spacing: 0em; margin:1.8%; width:46.37%; vertical-align: top; /*height: 0px; padding-top:50.74%;*/} #spcntArea #spcnt p a, #spcnt p.bnrBraveEnd span {width:100%; height: 0px; padding-top:106.77%; display: block; white-space: nowrap; text-indent: -9999px; overflow: hidden; background-size: 100%; background-position: center; background-repeat: no-repeat; } #spcnt p.bnrChart a { background-image: url(../img/top/sp_bnr_chart.png); } #spcnt p.bnrReport a { background-image: url(../img/top/sp_bnr_report.png); position: relative; } #spcnt p.bnrOmikuji a { background-image: url(../img/top/sp_bnr_omikuji.png); } #spcnt p.bnrInterview a { background-image: url(../img/top/sp_bnr_interview09.png); } #spcnt p.bnrBrave a { background-image: url(../img/top/sp_bnr_brave2.png); } #spcnt p.bnrQuiz a { background-image: url(../img/top/sp_bnr_quiz.png); } #spcnt p.bnrGallery a { background-image: url(../img/top/sp_bnr_gallery.png); position: relative; } #spcnt p.bnrMovie a { background-image: url(../img/top/sp_bnr_movie.png); } #spcnt p.bnrBraveEnd span { background-image: url(../img/top/sp_bnr_brave_end.png); } #spcnt p.bnrReport a span.date {display: block; text-indent:0; position: absolute; top:25%; left: 0; width:100%; text-align: center; color: #d84f8f; font-size:0.9em; font-weight: bold;} #spcnt p.bnrReport a span.phReport, #spcnt p.bnrGallery a span.phGallery { position: absolute; top:42%; left:0px; width:97.39%; height:0; padding-top: 60%; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; background-size: 100%; background-position: center; background-repeat: no-repeat; } } /* bannerArea ============================== */ #bannerArea li a, #bnArea li a, #goodsArea p a, #linkArea .paraviDrama a, #snsArea li a, #bnArea li span.end { display: block; overflow: hidden; white-space: nowrap; text-indent:-9999px; background-position: center; background-repeat: no-repeat; box-sizing: border-box; background-size: 100%; } #linkArea li a:hover{opacity: 0.85;} #linkArea .paraviDrama a { background-image: url(../img/top/bn_paravidrama.jpg); } #linkArea li.paravi a { background-image: url(../img/top/bn_paravi.png); } #linkArea li.tbsfree a { background-image: url(../img/top/bn_tbsfree.png); } #linkArea li.tbsfree span.end { background-image: url(../img/top/bn_tbsfree_end.png); } #linkArea li.extra a { background-image: url(../img/top/bn_extra.png); } #linkArea li.extra span.end { background-image: url(../img/top/bn_extra_end.png); } #linkArea li.goods01 a { background-image: url(../img/top/bn_goods01.jpg?0217); } #linkArea li.goods02 a { background-image: url(../img/top/bn_goods02_3.jpg); } #linkArea li.goods03 a { background-image: url(../img/top/bn_goods03.jpg?0512); } @media all and (min-width: 768px) { #bannerArea, #snsArea, #ftBanner { width:300px; display: inline-block; vertical-align: top; margin: 0 10px; } #linkArea { padding-top: 30px;} #bnArea {} #bannerArea li a, #bnArea li a, #goodsArea p a, #linkArea .paraviDrama a, #bnArea li span.end { display: block; overflow: hidden; white-space: nowrap; text-indent:-9999px; background-position: center; background-repeat: no-repeat; box-sizing: border-box; background-size: 100%; margin: 0 0 20px; } #bnArea ul { letter-spacing: -.4em; text-align: center;} #bnArea li { display: inline-block; margin: 0 12px; } #bannerArea li a, #bnArea li a, #bnArea li span.end { width: 300px; height: 120px; } #linkArea li.goods01 a, #linkArea li.goods02 a { width: 300px; height: 160px; } #linkArea li.goods03 a { width: 360px; height: 160px; } #linkArea .paraviDrama a { width: 512px; height: 114px; margin: 0 auto 20px; } #snsArea li.instagram a { width: 300px; height: 120px; margin-bottom: 20px; } #snsArea li.line a { width: 300px; height: 155px; } #snsArea li.instagram a { background-image: url(../img/top/bn_instagram.png); } #snsArea li.line a { background-image: url(../img/top/bn_line.png); } } @media all and (max-width: 767px) { #linkArea { padding-top: 10px; padding-bottom: 10px;} #bannerArea, #goodsArea { width:100%; margin: 0; } #bannerArea ul {} #bannerArea ul:after, #goodsArea:after { content: ""; display: block; clear: both; } #bnArea { padding-bottom: 20px;} #bnArea ul { letter-spacing: -.4em; text-align: center;} #bnArea li{ width:45.65%; height: auto; margin:1.5% 2.17%; padding: 0; display: inline-block; } #bannerArea li a, #bnArea li a, #bnArea li span.end { width: 100%; height: 0; padding-top: 40%; } #linkArea li.goods01 a, #linkArea li.goods02 a { padding-top: 53.333%; } #linkArea li.goods03 { width:70%;} #linkArea li.goods03 a { padding-top: 44.444%; } #linkArea .paraviDrama {margin:1.5% 2.17%;} #linkArea .paraviDrama a { width: 100%; height:0; background-size: contain; padding-top: 22.265%; } #snsArea {letter-spacing: -.4em; width: 300px; margin: 20px auto;} #snsArea li {margin:2.17%; display: inline-block;width:45.65%; height: auto; margin:1.5% 2.17%;} #snsArea li a {width: 100%; height:0; background-size: contain;} #snsArea li a { padding-top: 100%; } #snsArea li.instagram a { background-image: url(../img/top/sp_bn_instagram.png); } #snsArea li.line a { background-image: url(../img/top/sp_bn_line.png); } #bannerArea li a, #goodsArea p a { width:45.65%; height: 0; padding-top: 18.35%; /*2つ以上の時margin:2.17%; float: left;*/margin:2.17% auto; } #ftBanner { width: 100%; margin: 0 auto;} #ftBanner p { width: 300px; margin: 0 auto;} } /* twitterArea ============================== */ #twitterArea { background-color: #fdeef5; padding: 4px; width:292px; display: inline-block; vertical-align: top; margin: 0 10px; position: relative; } #twitterArea #twitter{ background-color: #fdeef5; border: solid 2px #d84f8f; padding: 2px; } .tlBox { border: dotted 2px #d84f8f; } #twitterArea #twitter h2 a{background: url(../img/top/h2_twitter.png) no-repeat center 8px; width:104px; height:40px; margin: 0 auto; text-indent:-9999px; display: block;} #twTL .tline { padding: 15px; margin: 0 auto; } #twTL .tline iframe { background-color: hsla(0, 0%, 100%, 0.9); } #twitterArea .gaibu {position: absolute; bottom:-22px; font-size: 0.8em;} @media all and (min-width: 768px) { #twTL .tline { position: relative; z-index: 1; } } @media all and (max-width: 767px) { #twTL .tline iframe { width: calc(100vw - 15px) !important; height: 325px !important; } #twitterArea { margin: 0 auto 35px; display: block; /*width:90%;*/} } /* sns btn ============================== */ .sns{ text-align: center;} .sns a,#snsarea #sns a,#container #sns a{display:inline-block; background-color:#d84f8f; width:60px; height:60px; text-align:center; position:relative; margin:0 .1em 0; border-radius:50%; transition:0.5s;} .sns a:hover,#snsarea #sns a:hover,#container #sns a:hover{opacity:0.7;} .sns img,#snsarea #sns img,#container #sns img{position:absolute; width:50%; margin:auto; top:0; bottom:0; right:0; left:0;} .sns img.ic_line,#snsarea #sns img.ic_line,#container #sns img.ic_line{width:60% !important;} @media all and (min-width: 768px) { #bannerArea .sns { padding-bottom: 18px;} } @media all and (max-width: 767px) { #bannerArea .sns { padding: 10px 0;} } p.copyright { margin-top: -50px; } /* modal customize ============================== */ .md-close a span { background-image:url(/um/img/btn_modal.svg); background-color:#5bc5de; } .md-inner { box-shadow: 8px 8px #237d93; } @media all and (max-width: 767px) { .md-inner { box-shadow: 4px 4px #237d93; } }