/*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-inner              {z-index:2;}

header#id_nav_menu_1              {z-index:9999 !important;}
footer                            {z-index:11 !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; margin:0 auto;}
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;}

.no-show{display:none;}
.red{color:#fb56a8;}
.blue{color:#8bacff;}

/*
=========================
セレクトフォーム
=========================
*/
#inner input,#inner select{
display:block;
position:relative;
width:100%;
color:#63289c;
background-color:#fff;
border:2px solid #c7a6e9;
border-radius:4px;
padding:5px;
-webkit-appearance:none;
appearance:none;}
#inner input:focus,#inner select:focus{outline:none;}
@media screen and (max-width:370px){#inner input,#inner select{font-size:10px;}}

#inner select{
background-image:url(../img/common/select.png);
background-repeat:no-repeat;
background-position:center right 10px;
background-size:12px auto;
padding-right:25px;
cursor:pointer;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main,#main > #main-inner,#main > #main-inner > #inner{display:block; position:relative; width:100%; height:100%;}
#main img{width:100%;}
#main::before{
display:block;
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../img/common/bg/base.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
pointer-events:none;}

@media screen and (min-width:1101px){
#main:not(.wide)::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:25px;
background-image:url(../img/common/menu/bg_top.png);
background-repeat:repeat-x;
background-size:auto 100%;
background-position:top;
z-index:9999;
filter:drop-shadow(0 2px 3px rgba(45,35,96,.2));
pointer-events:none;
transition:all .2s ease;}
#main:not(.wide).fix::after{position:fixed; top:0;}}

#main > *:not(#menu){max-width:480px; margin:0 auto;}
#main > *:not(#menu)::before,#main > *:not(#menu)::after{display:block; content:""; position:absolute; top:0; width:5px; height:100%; background:#2eaff0;}
#main > *:not(#menu)::before{left:-5px;}
#main > *:not(#menu)::after{right:-5px;}

#main.wide > *:not(#menu){max-width:980px; margin:0 auto;}

#main > #main-inner{
min-height:calc(100vh - 100px); 
font-size:15px; 
background:linear-gradient(to bottom, #ffffff 0%, #a2d6e9 100%);/*background-image:url(../img/common/bg/pat.png) , url(../img/common/bg/main.png); background-size:500px auto , 20px auto;*/ 
padding-bottom:20px;
}
@media screen and (max-width:1100px){#main > #main-inner{padding-top:70px;}}
@media screen and (max-width:480px){#main > #main-inner{font-size:13px;}}
@media screen and (max-width:420px){#main > #main-inner{font-size:12px;}}

/*
=========================
汎用ボックス
=========================
*/
.box{position:relative; width:calc(100% - 40px); color:#009b65; background:#fff; border:3px solid #4de7b2; border-radius:10px; padding:20px; margin:20px auto 0;}
.box + .box{margin-top:40px;}
.box::before,.box::after{display:block; content:""; position:absolute; top:-6px; width:34px; height:34px; background-size:100%; auto; background-repeat:no-repeat; background-position:center;}

@media screen and (max-width:480px){
.box{width:calc(100% - 20px); border:2px solid #4de7b2; padding:10px; margin:10px auto 0;}
.box::before,.box::after{top:-5px; width:24px; height:24px;}
.box::before{left:-5px;}
.box::after{right:-5px;}}

/*
=========================
ページ見出し画像
=========================
*/
#main > #main-inner > #inner{overflow:hidden;}
#main > #main-inner > #inner h1#title{padding:20px; margin:0 auto; filter:drop-shadow(0 5px 3px rgba(45,35,96,.2));}
#main > #main-inner > #inner h1#title img{width:70%; max-width:300px;}
@media screen and (min-width:1101px){#main > #main-inner > #inner h1#title{padding:45px 20px 20px;}}

/*
=========================
汎用見出し
=========================
*/
#inner h1,#inner h2,#inner h3{display:block; position:relative; color:#009b65; font-family:"M PLUS Rounded 1c", sans-serif; margin:0 auto;}
#inner h2,#inner h3{border:2px solid #4de7b2; border-radius:10px; transform:rotate(0.03deg);}

#inner h1{text-align:center;}
#inner h1:not(#title){font-size:30px; font-weight:800; margin:20px auto; transform:rotate(0.03deg) skew(-20deg);}

#inner h2{
/*
background-image:url(../img/common/icn/01.png) , url(../img/common/bg/grd.jpg);
background-size:auto 130% , 100% auto;
background-position:center right 10px , center;
background-repeat:no-repeat , no-repeat;
*/
background-color:#d1feff;
font-size:18px;
font-weight:800;
padding:10px;
margin:0 auto 20px;}
@media screen and (max-width:460px){#inner h2{font-size:16px; font-weight:700; padding:8px 10px;}}
@media screen and (max-width:370px){#inner h2{font-size:15px;}}

#inner h3{background:#fde1ac; font-weight:700; padding:5px 10px;}
#inner h3.toggle{cursor:pointer;}
#inner h3.toggle::before{
display:block;
content:"";
position:absolute;
right:10px;
top:calc(50% - 8px);
width:12px;
height:12px;
border-right:2px solid #b77fb5;
border-bottom:2px solid #b77fb5;
transform:rotate(45deg);
transition:all .2s ease;}
#inner h3.toggle.open::before{top:calc(50% - 3px); transform:rotate(-135deg);}
@media screen and (max-width:420px){#inner h3.toggle::before{top:calc(50% - 5px); width:8px; height:8px;}}

#inner h2,#inner h3{width:calc(100% - 40px);}
@media screen and (max-width:480px){#inner h2,#inner h3{width:calc(100% - 20px);}}

#inner .box > h2,#inner .box > h3{width:100%;}

/*
=========================
ボタン
=========================
*/
.btn-link{
display:block;
position:relative;
width:100%;
background-color:#ded1fd;
background-image:url(../img/common/btn/bg/02.png) , url(../img/common/btn/bg/01.png);
background-size:auto 16px, auto 40px;
background-repeat:repeat-x , repeat-x;
background-position:center , bottom center;
text-align:center;
border:2px solid #b77fb5;
border-radius:40px;
box-shadow:1px 1px 1px #fff inset,-1px -1px 1px #9369db inset;
padding:5px;
margin:15px auto;
transition:all .2s ease;}
.btn-link img{width:60% !important; max-width:220px;}
.btn-link::before{
display:block;
content:"";
position:absolute;
bottom:-10px;
left:20%;
width:20px;
height:30px;
background-image:url(../img/common/btn/bg/on.png);
background-size:100% auto;
background-repeat:no-repeat;
background-position:center;
opacity:0;
transition:all .2s ease;}
.btn-link:hover{filter:drop-shadow(3px 5px 1px rgba(45,35,96,.2));}
.btn-link:hover::before{opacity:1;}
@media screen and (max-width:440px){.btn-link::before{left:10%; width:16px; height:23px;}}

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

.btn-small{
display:block;
color:#fff;
background:#695ca7;
text-align:center;
font-family:"M PLUS Rounded 1c", sans-serif;
border-radius:20px;
padding:3px 5px;
margin:0 auto;
transform:rotate(0.03deg);
transition:all .2s ease;}
.btn-small:hover{background:#b77fb5;}

/*
=========================
リスト
=========================
*/
#main .small{font-size:12px;}
@media screen and (max-width:640px){#main .small{font-size:11px;}}
@media screen and (max-width:480px){#main .small{font-size:10px;}}

ul.num > li,
ul.dot > li,
ul.ast > li,
ul.star > li,
span.ast,span.star,div.star{display:block; position:relative; padding-left:16px;}

ul.num > li::before,
ul.dot > li::before,
ul.ast > li::before,
ul.star > li::before,
span.ast::before,
span.star::before,
div.star::before{display:block; position:absolute; top:0; left:0;}

ul.dot > li::before{content:"・";}
ul.ast > li::before,span.ast::before{content:"※";}
ul.star > li::before,span.star::before,div.star::before{content:"☆";}

ul.star > li + li,
div.star + div.star{margin-top:5px;}

ul.num > li:first-child::before{content:"①";}
ul.num > li:nth-child(2)::before{content:"②";}
ul.num > li:nth-child(3)::before{content:"③";}
ul.num > li:nth-child(4)::before{content:"④";}
ul.num > li:nth-child(5)::before{content:"⑤";}
ul.num > li:nth-child(6)::before{content:"⑥";}

.dashed{width:100%; height:1px; border-bottom:1px dashed #fbe0ff; margin:15px auto;}

/*
================================================================================================================
汎用サブメニュー
================================================================================================================
*/
#page-select{background-image:url(../img/common/bg/dot_off.png); border-bottom:2px solid #b77fb5;}
#page-select > div{display:flex; justify-content:space-between; flex-wrap:wrap; padding:0 10px 20px;}
#page-select > div > a{
display:block;
position:relative;
width:calc(50% - 5px);
color:#695ca7;
background:#f2c6dc;
font-family:"M PLUS Rounded 1c", sans-serif;
font-weight:700;
border:2px solid #b77fb5;
border-radius:5px;
padding:5px 10px;
transition:all .2s ease;
transform:rotate(0.03deg);}
#page-select > div > a:hover{background:#fdebff;}
#page-select > div > a + a{margin-top:10px;}
#page-select > div > a:nth-child(2){margin-top:0;}
#page-select > div > a::before{
display:block;
content:"";
position:absolute;
right:10px;
top:calc(50% - 6px);
width:12px;
height:12px;
border-right:2px solid #695ca7;
border-bottom:2px solid #695ca7;
transform:rotate(-45deg);}
#page-select > div.arrow > a::before{top:calc(50% - 8px); transform:rotate(45deg);}

#page-select > div > a.select{pointer-events:none; color:#fff; background:#ff748b; border:2px solid #ff748b;}
#page-select > div > a.select::before{border-right:2px solid #fff; border-bottom:2px solid #fff;}

@media screen and (max-width:440px){#page-select > div > a{font-size:11px;}}
@media screen and (max-width:420px){
#page-select > div{padding:0 5px 10px;}
#page-select > div > a{padding:5px;}
#page-select > div > a::before{top:calc(50% - 4px); right:5px; width:8px; height:8px;}
#page-select > div.arrow > a::before{top:calc(50% - 5px);}}

/*
================================================================================================================
FOOTER
================================================================================================================
*/
#footer{
position:relative;
height:50px;
background-color:#009b65;
/*background-image:url(../img/common/bg/footer.png);*/
background-size:auto 16px;
background-repeat:repeat-x;
background-position:bottom center;}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:-15px;
right:10px;
transition:all .4s ease;
visibility:hidden;
filter:drop-shadow(0 5px 2px rgba(45,35,96,.3));
opacity:0;}
#page-top a{display:block; position:relative; width:80px; height:86px; background:url(../img/common/menu/top.png); background-size:100% auto;}
#page-top:hover{opacity:.8;}

#page-top.scroll{bottom:10px; opacity:1; visibility:visible;}

@media screen and (max-width:480px){
#page-top{right:5px;}
#page-top a{width:60px; height:65px;}}

/*
================================================================================================================
ページャー
================================================================================================================
*/
.pager{
display:flex;
width:calc(100% - 20px);
font-family:"M PLUS Rounded 1c", sans-serif;
font-weight:700;
transform:rotate(0.03deg);
align-items:center;
justify-content:space-between;
margin:20px auto 0;}

.pager ul{display:flex; align-items:center;}
.pager ul li{
position:relative;
width:30px;
height:30px;
color:#c7a6e9;
background:#fff;
text-align:center;
line-height:28px;
border:2px solid #c7a6e9;
border-radius:5px;
transition:background .2s ease,color .2s ease;}
.pager ul li + li{margin-left:5px;}

.pager ul li.current,
.pager ul li:hover{color:#fff; background:#695ca7; border:2px solid #695ca7; cursor:pointer;}

/*ページ件数多いとき*/
.pager ul.num li{padding-left:0;}
.pager ul.num li:not(.max)::before{display:none;}
.pager ul.num li.max + li{margin-left:0;}
.pager ul.num li.max::before{position:absolute; content:"･･･" !important; color:#c7a6e9 !important; top:unset;}
.pager ul.num li.max:first-child{margin-right:25px;}
.pager ul.num li.max:first-child::before{right:-25px; left:unset;}
.pager ul.num li.max:last-child{margin-left:25px;}
.pager ul.num li.max:last-child::before{left:-25px;}

.pager ul.num li.none{width:0;}
.pager ul.num li.none.max:first-child{margin-right:0;}
.pager ul.num li.none.max:last-child{margin-left:0;}
.pager ul.num li.none + li.none,
.pager ul.num li.none + li:not(.none),
.pager ul.num li:not(.none) + li.none{margin-left:0;}

/*ページ送り*/
.pager ul.arrow li{width:24px; height:24px; border-radius:50%;}
.pager ul li.none{opacity:0; pointer-events:none;}
.pager ul.arrow li::before{
display:block;
content:"";
position:absolute;
top:6px;
width:8px;
height:8px;
border-top:2px solid #c7a6e9;
border-right:2px solid #c7a6e9;
transition:all .2s ease;}
.pager ul.arrow li:hover::before{border-color:#fff;}

.pager ul.arrow.back li::before{transform:rotate(-135deg);}
.pager ul.arrow.back li::before{left:8px;}
.pager ul.arrow.back li:hover::before{left:6px;}

.pager ul.arrow.next li::before{transform:rotate(45deg);}
.pager ul.arrow.next li::before{right:8px;}
.pager ul.arrow.next li:hover::before{right:6px;}

/*
================================================================================================================
エラー
================================================================================================================
*/
#error .box{width:calc(100% - 40px) !important; line-height:160%;}
@media screen and (max-width:480px){#error .box{width:calc(100% - 20px) !important;}}
#error strong{display:block; color:#fff; background:#fb56a8; font-weight:700; line-height:100%; text-align:center; transform:rotate(0.03deg); border-radius:5px; padding:10px 0; margin:0 auto 20px;}
#error .btn-small{margin:20px auto 0;}