/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important;}
#container{background:#fff;}

/*z-index*/
#main,#main::before,#main::after {z-index:1;}
#main > #main-inner              {z-index:2;}
#main > #main-inner > #frame     {z-index:3;}

header#id_nav_menu_1              {z-index:9999 !important;}
footer                            {z-index:2 !important;}
#page-top,#page-top a             {z-index:10 !important;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
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;}
h1,h2,h3,h4,h5,h6{display:none;}
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;}

.no-show{display:none;}/*タブ切替*/

/*
================================================================================================================
テンプレート
================================================================================================================
*/
#main{position:relative; width:100%; height:100%;}
#main::before{
display:block;
content:"";
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background-image:url(../img/common/bg01.png);
background-position:center;
background-repeat:no-repeat;
background-size:cover;}
@media screen and (max-width:1100px){
#main::before{
background-image:url(../img/common/bg01.png);
background-position:center;
background-repeat:no-repeat;
background-size:cover;}}

#main-inner{position:relative; width:100%; max-width:1200px; margin:0 auto;}
@media screen and (min-width:1101px){#main-inner{display:flex;}}

#frame{
position:relative;
width:50%;
max-width:600px;
background-color:#fff;
margin-left:50%;}
@media screen and (max-width:1100px){#frame{width:100%; margin:0 auto;}}

#frame::before,
#frame::after{
display:block;
content:"";
position:absolute;
top:0;
width:60px;
height:100%;
pointer-events:none;
z-index:5;}
#frame::before{left:-60px; background:url(../img/common/bg_line.png),linear-gradient(-90deg, #fff0f0 0%, #fff0f0 25%, #ffe1e1 25%, #ffe1e1 100%); background-position:25% top, top center; background-repeat:no-repeat;}
#frame::after{right:-60px; background:url(../img/common/bg_line.png),linear-gradient(90deg, #fff0f0 0%, #fff0f0 25%, #ffe1e1 25%, #ffe1e1 100%); background-position:75% bottom, bottom center; background-repeat:no-repeat;}
@media screen and (max-width:500px){#frame > #inner::before,#frame > #inner::after{display:none;}}

#frame > #inner{position:relative; width:100%; height:100%; color:#6b6b6b; font-family:'Noto Sans JP', sans-serif; font-size:15px; font-weight:700;}
#frame > #inner > .inner{position:relative; width:100%; padding:20px;}
@media screen and (max-width:800px){#frame > #inner > .inner{font-size:13px; padding:10px;}}
@media screen and (max-width:480px){#frame > #inner > .inner{font-size:12px;}}

#frame img{display:block; width:100%; margin:0 auto;}
#frame select{display:block; width:100%; font-size:14px; border:1px solid #666; border-radius:5px; padding:5px; cursor:pointer; outline:0;}

/*
=========================
見出し
=========================
*/
#frame .title{
display:block;
width:100%;
/*padding:10px;*/
margin:0 auto;
}
#frame .title img{position:relative; z-index:5;}
@media screen and (max-width:480px){
/*#frame .title{background-size:auto 50%;}
#frame .title img{max-width:200px;}*/}

/*しましまタイトル*/
#frame h1.title{
position:relative;
}
#frame h1.title::after{
position:absolute; 
display:block; 
content:""; 
width:100%; 
height:58px; 
}
/*水色*/
#frame h1.title.music::after{
background-image:repeating-linear-gradient(-45deg, #e4f8ff, #e4f8ff 20px, transparent 20px, transparent 40px);
top:-3px;
}
/*緑*/
#frame h1.title.premium::after{
background-image:repeating-linear-gradient(-45deg, #e6ffe4, #e6ffe4 20px, transparent 20px, transparent 40px);
top:18px;
}
/*黄*/
#frame h1.title.special::after{
background-image:repeating-linear-gradient(-45deg, #fffee4, #fffee4 20px, transparent 20px, transparent 40px);
top:-3px;
}
/*ピンク*/
#frame h1.title.kuji::after{
background-image:repeating-linear-gradient(-45deg, #ffe4ed, #ffe4ed 20px, transparent 20px, transparent 40px);
top:18px;
}

@media screen and (max-width:480px){
#frame h1.title::after{height:38px;}
/*水色*/
#frame h1.title.music::after{top:0;}
/*緑*/
#frame h1.title.premium::after{top:18px;}
/*黄*/
#frame h1.title.special::after{top:0;}
/*ピンク*/
#frame h1.title.kuji::after{top:18px;}
}
@media screen and (max-width:375px){
/*水色*/
#frame h1.title.music::after{top:-3px;}
/*緑*/
#frame h1.title.premium::after{top:10px;}
/*黄*/
#frame h1.title.special::after{top:-3px;}
/*ピンク*/
#frame h1.title.kuji::after{top:10px;}
}

#frame h1.middle{
background-color:#e7e7e7;
background-image:none;
}
#frame h2.title{
width:80%;
max-width:400px;
background-color:#747474;
background-image:url(../img/common/bg_bar02.png);
padding:5px;}
#frame .box + .title{margin-top:50px;}

#frame h3.title{
position:relative;
/*background-color:#e16085;
background-image:none;*/
padding:0 10px;}
#frame h3.title img{
position:absolute;
width:100%; 
max-width:unset;
top:-15px;
left:0;
z-index:10;
}

#frame h4{display:block; color:#000; border-bottom:2px solid; padding:0 0 5px;}

/*
=========================
入れ子
=========================
*/
#frame .box{
display:block;
position:relative;
width:100%;
background-color:rgba(255,255,255,.8);
background-image:url(../img/common/bg_box01.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border:3px solid #979797;
border-radius:20px;
padding:20px;
margin:0 auto;}

#frame .box.top.padding{padding:20px 0;}

@media screen and (max-width:640px){#frame .box{border-radius:10px; padding:10px;}}

#frame .title + .box{margin-top:20px;}
#frame .box + .box{margin-top:30px;}
#frame .box > * + *{margin-top:20px;}
@media screen and (max-width:480px){
#frame .title + .box{margin-top:10px;}
#frame .box + .box{margin-top:20px;}
#frame .box > * + *{margin-top:10px;}}

#frame .box.blue{background-color:rgba(201,218,226,.8);}
#frame .box.gray{background-color:rgba(193,193,193,.8);}
#frame .box.top{
width:calc(100% - 20px);
/*border-top:none;*/
/*border-radius:0 0 20px 20px;*/
border-radius:20px;
/*box-shadow:0 10px 0 rgba(60,76,124,.2);*/
box-shadow:4px 4px 0 #000;
margin-top:0 !important;}

/*
=========================
調整
=========================
*/
#frame img.text{margin:20px auto;}
#frame div.text{background-color:rgba(255,255,255,.8); border-radius:10px; padding:10px; margin:10px auto;}

/*
=========================
テキスト/リスト
=========================
*/
#frame .red{color:#df0031;}
#frame .pink{color:#f5568d;}
#frame .violet{color:#7979f4;}
#frame .alert{
display:flex;
min-height:100px;
color:#fff;
background:rgba(102,102,102,.7);
text-align:center;
border-radius:10px;
padding:10px;
margin:20px auto;
justify-content:center;
align-items:center;}

.small{font-size:12px;}
@media screen and (max-width:480px){.small{font-size:11px;}}

/*リスト関連*/
ul.list{width:100%; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#6b6b6b; border-radius:50%;}
ul.list.dot > li.red::before{background:#df0031;}
ul.list.ast > 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; font-weight:500;}

#frame .box > ul.list{font-weight:500;}
#frame .box > ul.list > li + li,
#frame .box > ul.list.small > li + li{margin-top:5px;}
#frame h4 + ul.list{margin-top:5px;}

ul.list.dot > li > a{color:#e26086; transition:all .2s ease;}
ul.list.dot > li > a:hover{color:#df0031; text-decoration:underline;}

/*
=========================
バナーエリア
=========================
*/
#bnr-space{border-top:solid 10px #1212; text-align:center; padding:10px;}
#bnr-space p{display:flex; justify-content:center; align-items:center; flex-wrap:wrap;}
#bnr-space p a{display:block; border:solid 1px #000; margin:5px; transition: all .2s ease;}
#bnr-space img{display:block; width:100%; max-width:185px;}
#bnr-space p a:hover{opacity:0.8;}
/*
=========================
ボタン
=========================
*/
.btn-link{
display:block;
width:100%;
max-width:400px;
color:#fff;
background-image:linear-gradient( to top, rgba(255,116,141,0.99608) 0%, rgb(255,183,211) 100%);
border-radius:15px;
border:solid 2px rgb(203, 52, 79);
padding:2px;
margin:0 auto;
transition:all .2s ease;
}
.btn-link:hover{background-image:linear-gradient( to top, rgba(253,144,163,10) 0%, rgb(252,210,227) 100%);}
.btn-link p{
font-size:24px;
text-shadow:0px 0px 4px rgba(0, 0, 0, 1);
text-align:center;
padding:10px 0;
}

@media screen and (max-width:800px){.btn-link p{font-size:20px;}}
@media screen and (max-width:640px){.btn-link p{font-size:18px;}}
@media screen and (max-width:480px){.btn-link p{font-size:16px; padding:5px 0;}}

.box + .btn-link{margin-top:20px;}
.btn-link + .btn-link{margin-top:10px;}

.btn-link.none{filter:grayscale(100%); pointer-events:none;}

/*戻るボタン*/
.btn-link.back{width:70%; max-width:300px;}
.btn-link.back:hover{filter:contrast(1.2);}
.btn-link.back p{background:linear-gradient(to bottom, #96cfed 0%,#96cfed 45%,#7ac3e6 50%,#68b6dd 70%,#68b6dd 100%); font-size:20px; text-shadow:2px 2px 1px #4b99c0;}
@media screen and (max-width:800px){.btn-link.back p{font-size:18px;}}
@media screen and (max-width:640px){.btn-link.back p{font-size:16px;}}
@media screen and (max-width:480px){.btn-link{width:280px;}.btn-link.back p{font-size:14px;}}
@media screen and (max-width:375px){.btn-link{width:240px;}}
/*
================================================================================================================
HERDER/FOOTER
================================================================================================================
*/
.border{
width:100%;
color:#888;
background-color:#fff;
font-size:14px;
border-bottom:10px solid #7f4141;
padding:10px 0 0;}
.border p{
display:flex;
position:relative;
width:100%;
height:50px;
align-items:center;
justify-content:center;}
/*
.border p::before{
display:block;
content:"";
position:absolute;
left:10px;
width:calc(100% - 20px);
height:2px;
background:#000;}
*/
@media screen and (max-width:480px){
.border{font-size:12px; border-bottom:5px solid #dde6eb;}
.border p{height:40px;}
.border p::before{width:calc(100% - 10px); left:5px;}}
/*
#header.border{padding:0 0 10px;}
#header.border p{
background-image:url(../img/common/line.png);
background-size:auto 36px;
background-position:left 10px center;
background-repeat:no-repeat;}
#header.border p::before{bottom:0;}
@media screen and (max-width:480px){
#header.border{padding:0 0 5px;}
#header.border p{background-size:auto 20px; background-position:left 5px center;}}
*/
#footer.border{border-top:10px solid #7f4141; padding:10px 0 0;}
#footer.border p{
background-image:url(../img/common/logo.png) /*, url(../img/common/line.png)*/;
background-size:auto 30px , auto 36px;
background-position:left 10px center , right 10px center;
background-repeat:no-repeat , no-repeat;}
#footer.border p::before{top:0;}
@media screen and (max-width:480px){
#footer.border{border-top:5px solid #dde6eb; padding:5px 0 0;}
#footer.border p{background-position:left 5px center , right 5px center; background-size:auto 20px , auto 20px;}}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:0;
right:10px;
visibility:hidden;
transition:all .4s ease;
opacity:0;}
#page-top a{
display:block;
position:relative;
width:60px;
height:60px;
background-color:#ffe1e1;
background-image:url(../img/common/menu_top.png);
background-size:70% auto;
background-position:center;
background-repeat:no-repeat;
border-radius:50%;
border:2px solid #888;
transition:opacity .4s ease;}
#page-top a:hover{opacity:.7;}
#page-top.scroll{bottom:10px; opacity:1; visibility:visible;}

@media screen and (max-width:1100px){#page-top a{width:50px; height:50px;}}