/*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/bg02.png) , url(../img/common/bg01.png);
background-position:center , center;
background-repeat:no-repeat , no-repeat;
background-size:cover , 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-image:url(../img/common/bg_main.png);
background-position:top;
background-repeat:repeat;
background-size:100% auto;
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%;
background-color:rgba(67,111,133,.4);
background-image:url(../img/common/bg_line.png);
background-repeat:no-repeat;
pointer-events:none;
z-index:2;}
#frame::before{left:-60px; background-position:top center;}
#frame::after{right:-60px; background-position:bottom center;}
@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%;
background-color:#010101;
background-image:url(../img/common/bg_bar01.png);
background-size:auto 70%;
background-position:left top;
background-repeat:no-repeat;
border-radius:10px;
padding:10px;
margin:0 auto;
box-shadow:0 0 10px rgba(190,182,200,.9) inset}
#frame .title img{max-width:280px;}
@media screen and (max-width:480px){
#frame .title{background-size:auto 50%;}
#frame .title img{max-width:200px;}}

#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{
background-color:#e16085;
background-image:none;
padding:0 10px;}
#frame h3.title img{width:70%; max-width:unset;}

#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) , url(../img/common/bg_box02.png);
background-size:60% auto , 60% auto;
background-position:left top , right bottom;
background-repeat:no-repeat , no-repeat;
border:3px solid #979797;
border-radius:20px;
padding:20px;
margin:0 auto;}
@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;
box-shadow:0 10px 0 rgba(60,76,124,.2);
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;}

/*
=========================
ボタン
=========================
*/
.btn-link{
display:block;
width:100%;
max-width:400px;
color:#fff;
background:linear-gradient(to right, #ffa5d6 0%,#9ce3ed 33%,#ffd86f 66%,#ffa5d6 100%);
border-radius:15px;
padding:2px;
margin:0 auto;
transition:all .2s ease;}
.btn-link:hover{filter:contrast(1.5);}

.btn-link p{
background:linear-gradient(to bottom, #e5778c 0%,#e5778c 45%,#df5a76 50%,#d03c5b 70%,#d03c5b 100%);
font-size:24px;
text-align:center;
text-shadow:2px 2px 1px #d03c5b;
border:3px solid #fff;
border-radius:12px;
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.back p{font-size:14px;}}

/*
================================================================================================================
HERDER/FOOTER
================================================================================================================
*/
.border{
width:100%;
color:#888;
background-color:#fff;
font-size:14px;
border-bottom:10px solid #dde6eb;
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 #dde6eb; 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:#dbedff;
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;}}