/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff; z-index:9999 !important;}
#wrapper{position:relative !important;}
#container{background:#fff;}
footer{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; font-family:'Noto Sans JP', sans-serif; font-size:16px; padding:50px 20px; z-index:3;}
#main img{width:100%;}
#main-inner{position:relative; width:100%; max-width:1200px; color:#fff; margin:0 auto; z-index:4;}
@media screen and (max-width:980px){#main{padding:80px 20px 20px;}}
@media screen and (max-width:800px){#main{font-size:15px;}}
@media screen and (max-width:640px){#main{font-size:14px; padding:80px 10px 20px;}}
@media screen and (max-width:480px){#main{font-size:13px;}}

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

/*
=========================
見出し
========================
*/
#main h2{
display:block;
background:linear-gradient(to bottom,  #f0f9ff 0%,#a1dbff 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-family:good-times, sans-serif;
font-size:40px;
font-weight:900;
line-height:2rem;
text-align:center;
margin:0 auto 40px;}
@media screen and (max-width:480px){#main h2{font-size:30px;}}

#main h3{
display:block;
background:#0070ff;
font-family:'M PLUS 1', sans-serif;
font-size:20px;
font-weight:800;
text-align:center;
clip-path:polygon(99% 0%, 100% 30%, 100% 100%, 1% 100%, 0% 70%, 0 0);
padding:5px;
margin:10px auto;}
@media screen and (max-width:480px){#main h3{font-size:16px; clip-path:polygon(96% 0%, 100% 30%, 100% 100%, 4% 100%, 0% 70%, 0 0);}}

/*
=========================
リスト
========================
*/
#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.dot > li,ul.ast > li,span.ast{position:relative; padding-left:16px;}
ul.num > li{position:relative; padding-left:22px;}

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

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

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:"⑤";}

@media screen and (max-width:640px){
ul.dot.small li,ul.ast.small li,span.ast.small{padding-left:14px;}
ul.num > li{padding-left:18px;}}/*
@media screen and (max-width:480px){
ul.dot.small li::before,ul.ast.small li::before,span.ast.small::before{top:-2px;}}*/

/*
========================
動画
========================
*/
#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;}

/*
========================
背景
========================
*/
#bg{position:fixed; top:0; left:0; width:100%; height:110vh; background:#000; margin:0 auto; z-index:2;}
#bg::before,
#bg::after{
display:block;
position:fixed;
content:"";
top:0;
left:0;
width:100%;
height:100%;
background-position:top 55% center;
background-repeat:no-repeat;
z-index:2;}
#bg::before{background-image:url(../img/common/bg.jpg); animation:10s fuwafuwa infinite;}
#bg::after{background-image:url(../img/common/bg_pat.webp); mix-blend-mode:screen;}
@media screen and (max-width:980px){#bg::before,#bg::after{background-size:1300px auto; background-position:top 105% center;}}
@media screen and (max-width:420px){#bg::before,#bg::after{background-size:1000px auto; background-position:top -200px center;}}

/*アニメーション*/
@keyframes fuwafuwa{
  0%, 100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-30px);
  }
}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.btn-back{
display:block;
position:relative;
width:100%;
max-width:400px;
color:#0070ff;
background:#fff;
font-size:18px;
font-family:'M PLUS 1', sans-serif;
text-decoration:none !important;
border:2px solid;
border-radius:30px;
padding:15px 45px 15px 20px;
margin:30px auto 0;
transition:.3s ease;
box-shadow:0 0 2px rgba(0,0,0,0);
cursor:pointer;}
.btn-back:hover{color:#fff; background:#0070ff; text-decoration:none !important; border:2px solid #0070ff; box-shadow:3px 3px 2px rgba(0,0,0,.2);}

.btn-back::before,
.btn-back::after{display:block; position:absolute; content:""; transition:.3s ease;}
.btn-back::before{
top:calc(50% - 12px);
right:18px;
width:0;
height:0;
border-style:solid;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
border-left:12px solid #fff;
border-right:0;
opacity:0;}
.btn-back:hover::before{right:14px; opacity:1;}
.btn-back::after{top:calc(50% - 8px); right:20px; width:16px; height:16px; border-top:2px solid; border-right:2px solid; transform:rotate(45deg);}
.btn-back:hover::after{right:17px; opacity:0;}

@media screen and (max-width:640px){.btn-back{font-size:16px;}}
@media screen and (max-width:480px){.btn-back{font-size:15px;}}
/*
================================================================================================================
ページ遷移アニメ
================================================================================================================
*/
.fade{
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:1s;}

@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}}