/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{box-sizing:border-box;}

html{width:100%; height:100%; overflow-wrap:break-word;}
body{
min-width:320px !important;
background:#000 !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:700; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

/*
=========================
汎用
=========================
*/
/*デフォルトよりフォントを小さくしたい場合*/
.small{font-size:12px;}
@media screen and (max-width:480px){.small{font-size:11px;}}

/*リスト関連*/
ul.list{width:100%; margin:0 auto;}
ul.list + ul.list{margin-top:5px;}
ul.list > li{display:block; position:relative; padding-left:18px;}
ul.list > li + li{margin-top:3px;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}
ul.list > li > ul.list{margin:10px auto;}
ul.list > li > a{color:#e26086; transition:all .2s ease;}
ul.list > li > a:hover{color:#df0031; text-decoration:underline;}

/*リスト-ドット*/
ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#0c2d57; border-radius:50%;}

/*リスト-アスタリスク*/
ul.list.ast > li::before{content:"※";}

/*リスト-菱形*/
ul.list.dia > li::before{content:"◆";}

/*リスト-番号*/
ul.list.num > li:first-child::before{content:"1.";}
ul.list.num > li:nth-child(2)::before{content:"2.";}
ul.list.num > li:nth-child(3)::before{content:"3.";}
ul.list.num > li:nth-child(4)::before{content:"4.";}
ul.list.num > li:nth-child(5)::before{content:"5.";}
ul.list.num > li:nth-child(6)::before{content:"6.";}

/*リスト-フォントサイズ小*/
ul.list.ast.small > li{padding-left:14px;}

/*
================================================================================================================
ティザーサイト
================================================================================================================
*/
#wrap{position:relative; font-family:'Noto Sans JP', sans-serif;}

#teaser{
display:flex;
position:relative;
min-height:90vh;
background-image:url(../img/bg_top.png) , url(../img/bg_btm.png) , url(../img/bg.png);
background-repeat:no-repeat , no-repeat , repeat;
background-position:top right , bottom left , center;
align-items:center;
justify-content:center;}
@media screen and (max-width:1200px){#teaser{min-height:auto; background-size:35% auto , 35% auto , 8% auto; padding:20px 0;}}

#chara{
display:block;
aspect-ratio:18 / 17;
width:100%;
max-width:1800px;
background-image:url(../img/chara_1209.webp?v4);
background-repeat:no-repeat;
background-position:center;
background-size:100% auto;}
@media screen and (max-width:980px){#chara{aspect-ratio:1 / 1.13; background-size:120% auto;}}

#info{
position:relative;
width:100%;
padding:30px 20px;
background-image:url(../img/bg_info.jpg);
background-repeat:repeat;
background-position:center;
background-size:auto;}
@media screen and (max-width:480px){#info{background-size:100% auto; padding:20px 10px 50px;}}

#info img{width:100%;}

/*
=========================
動画
=========================
*/
ul#movie{
width:100%;
max-width:1300px;
display:flex;
justify-content:center;
align-items:center;
margin:0 auto;}
ul#movie li.radio{width:200px; text-align:center;}
ul#movie li.mov{width:calc(50% - 100px); max-width:480px; padding:10px;}
ul#movie li.mov .thum{position:relative; width:100%; aspect-ratio:16 / 9;}
ul#movie li.mov .thum iframe{
position:absolute;
width:100%;
height:100%;
border:6px solid #feff7e;
border-radius:10px;
box-shadow:-3px 4px 4px 1px #dbbe65;}
@media screen and (max-width:1280px){
ul#movie li.radio{width:20%;}
ul#movie li.mov{width:40%;}
ul#movie li.mov .thum iframe{border:4px solid #feff7e;}}
@media screen and (max-width:980px){
ul#movie li.radio{width:14%;}
ul#movie li.mov{width:43%;}}
@media screen and (max-width:800px){
ul#movie{flex-wrap:wrap; justify-content:flex-end;}
ul#movie li.radio{width:25%;}
ul#movie li.mov{width:75%;}}
@media screen and (max-width:480px){
ul#movie li{width:100% !important;}
ul#movie li.radio img{width:30%; max-width:100px;}
ul#movie li.mov iframe{border:2px solid #feff7e;}}

/*
=========================
コメント
=========================
*/
.box{
max-width:980px;
background-color:#fffded;
border-radius:0 20px 20px 20px;
border:6px solid #6165bc;
outline-offset:-13px;
outline:8px solid #ff6a7a;
box-shadow:0px 3px 2px 1px rgba(71,152,255,.4);
padding:0 0 20px;
margin:50px auto 0;}

.box#comment > div{color:#000319; letter-spacing:.5px;}
@media screen and (min-width:641px){.box#comment > div{line-height:1.8rem !important;}}

.box h2.title{
width:100%;
background:linear-gradient(0deg,rgba(255, 165, 168, 1) 0%, rgba(255, 165, 168, 1) 50%, rgba(255, 213, 82, 1) 50%, rgba(255, 213, 82, 1) 100%);
border-radius:0 20px 0 0;
padding:10px 0 10px 15px;
margin:6px 0 20px;}
.box h2.title img{width:60% !important; max-width:270px;}

.box > *:not(h2){display:block; margin:20px auto; line-height:1.5rem;}
.box > strong,.box > b{font-family:'M PLUS 1', sans-serif;}
.box > strong{
width:calc(100% - 40px);
color:#ff6a7a;
font-size:24px;
text-align:center;
border-bottom:4px solid #ffd552;
padding:0 0 10px;}
.box > div + strong::before{
display:block;
content:"";
width:100%;
height:20px;
background-image:url(../img/info_line.webp);
background-repeat:repeat-x;
background-position:center;
background-size:auto 100%;
margin:0 auto 40px;}
.box > div,.box > b{width:calc(100% - 80px); font-size:16px;}
.box > b{color:#fff; background:#6165bc; font-weight:400; padding:5px 20px; border-radius:10px; margin-bottom:10px !important;}
.box > b + div{margin-top:0 !important;}

@media screen and (max-width:640px){
.box{
border-radius:0 10px 10px 10px;
outline-offset:-10px;
outline:6px solid #ff6a7a;
padding:0;
margin:20px auto 0;}
.box h2.title{border-radius:0 10px 0 0; padding:5px 0 5px 10px; margin:4px 0 10px;}
.box > *:not(h2){width:calc(100% - 20px);}
.box > strong{font-size:18px; border-bottom:2px solid #ffd552;}
.box > div + strong::before{height:10px; margin:0 auto 20px;}
.box > div,.box > b{width:calc(100% - 40px); font-size:13px;}
.box > b{padding:3px 10px;}}

/*データ引継ぎ用 調整*/
/*@media screen and (min-width:641px){.box:not(#comment){padding:20px 0;}}*/

/*
================================================================================================================
ページトップボタン
================================================================================================================
*/
#page-top{
display:block;
bottom:0;
position:fixed;
z-index:2;
right:0;
width:100px;
height:100px;
cursor:pointer;
background-image:url(../img/pegetop.webp);
background-repeat:no-repeat;
background-size:100% auto;
background-position:center;}
@media screen and (max-width:480px){#page-top{width:70px; height:70px;}}