@charset "Shift-JIS";

/*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-color:#fff;}
header#id_nav_menu_1{z-index:9999 !important;}
footer{z-index:2 !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%; max-width:2000px; height:100%; margin:0 auto;}
body{
width:100%;
min-width:320px !important;
height:100%;
background-color:#fff;
margin:0;
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;}
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:bold; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}
tr,td,th{border-collapse:collapse;}

a img{transition:opacity .2s ease;}
a:hover img{opacity:.7;}

.no-show{display:none;}

/*
================================================================================================================
背景
================================================================================================================
*/
#main{
position:relative;
width:100%;
background-image:url(../img/common/page/top_effect.png) , url(../img/common/page/top.png) , url(../img/common/page/top_bg.png) , url(../img/common/page/top_grd.png),
                 url(../img/common/page/btm_effect.png) , url(../img/common/page/btm.png) , url(../img/common/page/btm_grd.jpg);
background-position:top center , top , top center , top , bottom center , bottom , bottom;
background-repeat:no-repeat , repeat-x , no-repeat , repeat-x , no-repeat , repeat-x , no-repeat;
font-size:14px;
z-index:1;}

@media screen and (min-width:981px){#main{min-height:calc(100vh - 177px);}}
@media screen and (max-width:980px){#main{min-height:calc(100vh - 225px);}}

@media screen and (max-width:800px){#main{font-size:13px;}}
@media screen and (max-width:480px){#main{font-size:12px;}}

#main > .inner{
position:relative;
width:96%;
max-width:1000px;
padding:170px 0 50px;
margin:0 auto;}
@media screen and (max-width:980px){#main > .inner{padding:120px 0 40px;}}

/*
================================================================================================================
共通ページ装飾
================================================================================================================
*/

/*
========================
フレーム
========================
*/
#main > .inner > .frame{
position:relative;
width:100%;
color:#fff;
background-image:url(../img/common/frame/01/01.png) , url(../img/common/frame/01/02.png),
                 url(../img/common/frame/01/bar02.png) , url(../img/common/frame/01/bar01.png) , url(../img/common/frame/01/bar01.png) ,
                 url(../img/common/frame/01/bg.png) , url(../img/common/frame/01/bg_grd.png);
background-repeat:no-repeat , no-repeat,
                  repeat-x , repeat-y , repeat-y,
                  repeat , repeat-y;
background-position:left bottom , right bottom,
                    bottom , left , right,
                    center , center;
padding:40px 20px 20px;
margin:0 auto;}
#main > .inner > .frame + .frame{margin:50px auto 0;}
@media screen and (max-width:480px){
#main > .inner > .frame{padding:40px 15px 20px;}
#main > .inner > .frame + .frame{margin:30px auto 0;}}

/*フレーム装飾*/
#main > .inner > .frame::before{
display:block;
content:"";
position:absolute;
top:3px;
left:0;
width:100%;
height:10px;
background:linear-gradient(to right, #98f4ff 10%,#1c3f4f 30%,#1c3f4f 70%,#ff63eb 90%);
z-index:1;}

#main > .inner > .frame > .frame-head{
display:block;
position:absolute;
top:-2px;
left:320px;
width:calc(100% - 640px);
height:22px;
background-image:url(../img/common/frame/01/head/bg.png);
background-repeat:repeat-x;
z-index:2;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{display:block; content:""; position:absolute; top:0; width:320px; height:22px; z-index:2;}
#main > .inner > .frame > .frame-head::before{background-image:url(../img/common/frame/01/head/left.png); left:-320px;}
#main > .inner > .frame > .frame-head::after{background-image:url(../img/common/frame/01/head/right.png); background-position:right; right:-320px;}

@media screen and (max-width:800px){
#main > .inner > .frame > .frame-head{width:calc(100% - 320px); left:160px;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{width:160px;}
#main > .inner > .frame > .frame-head::before{background-image:url(../img/common/frame/01/head/left_sp.png); left:-160px;}
#main > .inner > .frame > .frame-head::after{background-image:url(../img/common/frame/01/head/right_sp.png); right:-160px;}}
@media screen and (max-width:480px){
#main > .inner > .frame > .frame-head{width:calc(100% - 200px); left:100px;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{width:100px;}
#main > .inner > .frame > .frame-head::before{background-image:url(../img/common/frame/01/head/left_min.png); left:-100px;}
#main > .inner > .frame > .frame-head::after{background-image:url(../img/common/frame/01/head/right_min.png); right:-100px;}}

/*
========================
見出し-大
========================
*/
#main > .inner h1{
display:block;
position:relative;
width:100%;
height:60px;
color:#fff;
background-color:rgba(0,0,0,.5);
font-size:24px;
font-weight:700;
line-height:60px;
font-family:'M PLUS Rounded 1c', sans-serif;
text-shadow:0 0 4px rgba(28,188,255,.9) , 0 0 10px rgba(28,188,255,.9);
transform:rotate(0.05deg);
border-radius:50px;
margin:0 auto 30px;}
#main > .inner h1::before,
#main > .inner h1::after{display:block; content:""; position:absolute; left:80px; width:calc(100% - 160px); height:10px; background-image:url(../img/common/title/01/bar.png); z-index:1;}
#main > .inner h1::before{top:-7px;}
#main > .inner h1::after{bottom:-7px;}

#main > .inner h1 > span{display:block; position:relative; width:100%; padding:0 20px 0 70px;}
#main > .inner h1 > span::before,
#main > .inner h1 > span::after{display:block; content:""; position:absolute; top:-15px; width:90px; height:90px; z-index:2;}
#main > .inner h1 > span::before{background-image:url(../img/common/title/01/left.png); left:-5px;}
#main > .inner h1 > span::after{background-image:url(../img/common/title/01/right.png); right:-5px;}

@media screen and (max-width:800px){#main > .inner h1{font-size:20px;}}
@media screen and (max-width:640px){
#main > .inner h1{height:40px; font-size:18px; line-height:40px; margin:0 auto 20px;}
#main > .inner h1::before,
#main > .inner h1::after{left:50px; width:calc(100% - 100px);}
#main > .inner h1::before{top:-6px;}
#main > .inner h1::after{bottom:-6px;}
#main > .inner h1 > span{padding:0 20px 0 40px;}
#main > .inner h1 > span::before,#main > .inner h1 > span::after{top:-10px; width:60px; height:60px; background-size:100% auto;}}
@media screen and (max-width:480px){#main > .inner h1{font-size:16px;}}

/*
========================
見出し-小
========================
*/
#main > .inner h2{
display:block;
position:relative;
width:90%;
color:#fff;
background-color:rgba(0,0,0,.5);
font-size:16px;
font-family:'M PLUS Rounded 1c', sans-serif;
box-shadow:0 0 3px rgba(28,188,255,1) , 0 0 4px rgba(28,188,255,.9) , 0 0 20px rgba(28,188,255,.5);
transform:rotate(0.05deg);
padding:10px 20px;
margin:0 auto;}
@media screen and (max-width:640px){#main > .inner h2{font-size:14px; padding:5px 10px;}}
@media screen and (max-width:480px){#main > .inner h2{width:100%;}}

#main > .inner h2.orange{
background-color:rgba(0,0,0,0);
background-image:url(../img/common/frame/04/01.png) , url(../img/common/frame/04/02.png) , url(../img/common/frame/04/03.png) , url(../img/common/frame/04/04.png);
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
background-position:left top , right top , right bottom , left bottom;
box-shadow:none;
padding:5px;}
#main > .inner h2.orange > span{
display:block;
background-color:rgba(251,182,73,.3);
border:1px solid #fbb649;
box-shadow:inset 0 0 8px #fbb649;
padding:10px 20px;}
@media screen and (max-width:480px){#main > .inner h2.orange > span{padding:7px 10px;}}

/*
========================
テキスト
========================
*/
#main > .inner > .frame > .text{width:86%; margin:20px auto;}
#main > .inner > .frame > .text + .text{margin:0 auto 20px;}
@media screen and (max-width:480px){#main > .inner > .frame > .text{width:100%; margin:20px auto 0;}}

/*テキスト内見出し*/
#main > .inner > .frame > .text h3,
#main > .inner > .frame > .text h4,
#main > .inner > .frame > .text h5{font-size:16px; font-family:'M PLUS Rounded 1c', sans-serif; transform:rotate(0.05deg);}

#main > .inner > .frame > .text h3{
position:relative;
text-shadow:0 0 3px rgba(0,0,0,.6) , 1px 1px 0 rgba(0,0,0,.6) , 2px 2px 0 rgba(0,0,0,.6);
border-bottom:1px solid #1cbcff;
padding:3px 0 3px 20px;
margin:0 auto 20px;}
#main > .inner > .frame > .text h3::before{
display:block;
content:"";
position:absolute;
bottom:3px;
left:7px;
width:5px;
height:20px;
background-color:#1cbcff;
transform:skewX(-25deg);}

#main > .inner > .frame > .text h4{text-shadow:0 0 3px rgba(28,188,255,1) , 0 0 4px rgba(28,188,255,.9) , 0 0 20px rgba(28,188,255,.5); margin:10px auto 5px;}
#main > .inner > .frame > .text h5{position:relative; font-size:15px; padding-left:25px;}
#main > .inner > .frame > .text h5::before{
display:block;
content:"";
position:absolute;
top:8px;
left:0;
width:18px;
height:4px;
border-radius:2px;
background-color:#1cbcff;}
#main > .inner > .frame > .text h5 span{font-size:12px;}

@media screen and (max-width:640px){
#main > .inner > .frame > .text h3,
#main > .inner > .frame > .text h4{font-size:14px}
#main > .inner > .frame > .text h5{font-size:13px;}}

/*
========================
動画
========================
*/
#movie,
.movie{
position:relative;
width:100%;
margin:0 auto;}
#movie{max-width:1200px;}
.movie-inner{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;}
.movie-inner iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0 auto;
z-index:2;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.submit-btn,
.link-btn{
display:block;
position:relative;
width:100%;
max-width:200px;
height:33px;
color:#fff;
background-color:rgba(0,0,0,.4);
font-size:14px;
line-height:32px;
text-align:center;
padding:0 10px;
border:1px solid #fff;
transition:all .3s ease;}

.submit-btn{margin:0 auto;}

.link-btn{margin:0 0 0 auto;}
.link-btn::before,
.link-btn::after{display:block; content:""; position:absolute; transition:all .3s ease;}
.link-btn::before{width:16px; height:1px; background-color:#fff; top:16px; right:20px;}
.link-btn::after{width:7px; height:7px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); top:13px; right:19.5px;}

.submit-btn:hover,
.link-btn:hover{background-color:rgba(0,0,0,.6); text-shadow:0 0 3px #1cbcff , 0 0 5px #1cbcff; box-shadow:0 0 8px #1cbcff , inset 0 0 8px #1cbcff; cursor:pointer;}
.link-btn:hover::before{right:15px;}
.link-btn:hover::after{right:14.5px;}

.link-btn.close{margin:0 auto 20px; z-index:10;}
.link-btn.close::before,
.link-btn.close::after{top:15px; left:10px; width:20px; height:1px; background-color:#fff;}
.link-btn.close::before{transform:rotate(-45deg);}
.link-btn.close:hover::before,
.link-btn.close:hover::after{box-shadow:0 0 3px #1cbcff , 0 0 5px #1cbcff;}

/*
================================================================================================================
エラーページ
================================================================================================================
*/
#error .text{text-align:center; margin:40px auto 0 !important}
#error .link-btn{max-width:380px; margin:40px auto;}
@media screen and (max-width:480px){#error .text{text-align:left; padding:0 20px;}}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top,
#page-top a{width:98px; height:86px;}

#page-top{
position:fixed;
bottom:20px;
right:20px;
z-index:200;}
#page-top a{
display:block;
background-image:url(../img/common/page/top_off.png);
background-size:100% auto;
transition:.2s ease-in-out;}
#page-top a:hover{background-image:url(../img/common/page/top_on.png);}
@media screen and (max-width:640px){
#page-top,#page-top a{width:60px; height:52px;}
#page-top{bottom:10px; right:10px;}}