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

/*z-index*/
#bg                              {z-index:1;}
#main,#main::before,#main::after {z-index:1;}
#main > #main-inner              {z-index:2;}
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-in-out;}
a:hover img{opacity:.7;}
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:600; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

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

/*
================================================================================================================
メイン
================================================================================================================
*/
#main{position:relative; background:#6dd0ea;}
#main img{width:100%;}

#main-inner{position:relative; width:100%; max-width:1200px; margin:0 auto; overflow:hidden;}

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

#main-inner{box-shadow:0 0 10px #253161;}

/*
=========================
メインビジュアル
=========================
*/
#top{position:relative;}
#top > ul{position:relative;}
#top > ul li:not(:nth-child(1)){display:none;}
@media screen and (max-width:800px){
#top > ul li:nth-child(1){display:none;}
#top > ul li:not(:nth-child(1)){display:block;}
#top > ul li:nth-child(3){background:#c4e0f4; text-align:center; margin:0 auto;}
#top > ul li:nth-child(3) img{max-width:720px;}}

/*
=========================
入れ子
=========================
*/
#section{position:relative; font-family:"Zen Maru Gothic", sans-serif; font-size:18px; font-weight:700; overflow:hidden;}
#section::before,
#section::after{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
#section::before{/*
top:calc(50% - 300%);
left:calc(50% - 300%);
width:600%;
height:600%;*/
background-image:url(../img/common/bg01.png);
background-position:top left;
background-repeat:repeat;/*
transform:rotate(-10deg);
filter:blur(0px);*/}
#section::after{
background-image:url(../img/common/bg02.png);
background-position:top right;
background-repeat:repeat-x;}
@media screen and (max-width:800px){#section::before{background-size:5% auto;}}

#section > *{position:relative; width:100%; margin:0 auto; z-index:3;}
#section > .inner{max-width:980px; padding:40px 20px;}
@media screen and (max-width:640px){#section > .inner{padding:20px 10px;}}

/*
=========================
フッター
=========================
*/
#section > #footer{background:rgba(255,255,255,.8); padding:20px;}
#section > #footer > .inner{display:flex; max-width:800px; flex-wrap:wrap; justify-content:center; align-items:center; margin:0 auto;}
#section > #footer > .inner > a{display:block; width:25%; margin:5px 0;}
@media screen and (max-width:640px){#section > #footer > .inner > a{width:calc(100% / 3);}}
@media screen and (max-width:480px){#section > #footer > .inner > a{width:50%;}}

/*
================================================================================================================
共通
================================================================================================================
*/

.text{color:#322d72; background:#fff; font-size:24px; line-height:2rem; text-align:center; border-radius:20px; padding:30px;}
@media screen and (max-width:980px){.text{font-size:18px; line-height:1.5rem;}}
@media screen and (max-width:640px){.text{font-size:16px; padding:20px;}}

/*
=========================
日付
=========================
*/
#date{font-size:30px; text-align:center; line-height:2rem; letter-spacing:1px; margin:40px auto;}
#date p{position:relative; width:calc(100% - 40px); color:#3c427e; background:#ff9320; border-radius:30px; padding:5px; margin:0 auto; z-index:4;}
#date ul{position:relative; color:#fff; background:#3c427e; border-radius:20px; padding:45px 0 30px; margin-top:-15px; z-index:3;}
#date ul li{font-size:40px;}
#date ul li + li{margin-top:10px;}
#date ul li span{font-size:26px;}
#date ul li br{display:none;}
#date ul li::before{display:inline-block; background:#c3a37b; font-size:18px; border-radius:10px; padding:0 10px; margin-right:10px;}
#date ul li:nth-child(1)::before{content:"獲得期間";}
#date ul li:nth-child(2)::before{content:"CD応募期間";}
@media screen and (max-width:980px){
#date{font-size:26px;}
#date ul li{font-size:36px;}
#date ul li span{font-size:20px;}}
@media screen and (max-width:790px){
#date p{padding:0;}
#date ul{padding:35px 0 20px;}
#date ul li + li{margin-top:20px;}
#date ul li::before{display:block; width:100px; font-size:15px; padding:0; margin:0 auto 5px;}}
@media screen and (max-width:640px){
#date{font-size:20px;}
#date ul{padding:25px 0 10px;}
#date ul li{font-size:26px;}
#date ul li span{font-size:18px;}}
@media screen and (max-width:550px){#date ul li br{display:block;}}

/*
=========================
見出し
========================
*/
#main h2{
display:block;
width:calc(100% - 40px);
color:#3c427e;
background:#ff9320;
font-size:30px;
line-height:2rem;
letter-spacing:1px;
text-align:center;
border-radius:30px;
padding:10px 5px;
margin:40px auto 20px;}
@media screen and (max-width:980px){#main h2{font-size:26px; line-height:1.5rem;}}
@media screen and (max-width:640px){#main h2{width:100%; font-size:20px; padding:5px; margin:30px auto 10px;}}

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

/*リスト関連*/
ul.list{width:100%; text-align:left; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li + li{margin-top:5px;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}
ul.list > li > a{color:#ff6a7a; text-decoration:underline;}
ul.list > li > a:hover{text-decoration:none;}

ul.list.ast{font-family:'Noto Sans JP', sans-serif;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#000; border-radius:50%;}
ul.list.ast > li::before{content:"※";}
ul.list.sq > 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;}

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

ul.list.box{background:#181818; padding:20px; margin:20px auto;}

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

/*
================================================================================================================
汎用ボタン
================================================================================================================
*/
.btn-link{
cursor: pointer;
display:block;
width:100%;
max-width:480px;
color:#fff;
background:#f8ab4c;
font-size:clamp(1rem, 0.697rem + 1.52vw, 1.625rem);
text-align:center;
border-radius:10px;
border:4px solid #f88447;
box-shadow:0 5px 0 #f8c080;
padding:15px;
margin:20px auto 0;
transition:all .2s ease-in-out;}
.btn-link p{filter:drop-shadow(0 0 1px #f86429) drop-shadow(2px 2px 0 #f86429) drop-shadow(-2px -2px 0 #f86429) drop-shadow(2px -2px 0 #f86429) drop-shadow(-2px 2px 0 #f86429); transition:all .2s ease-in-out;}
.btn-link:hover{background:#ff6fb3; border:4px solid #f84747; box-shadow:0 0 0 #e7849e; transform:translateY(5px);}
.btn-link:hover p{filter:drop-shadow(0 0 1px #f82946) drop-shadow(2px 2px 0 #f82946) drop-shadow(-2px -2px 0 #f82946) drop-shadow(2px -2px 0 #f82946) drop-shadow(-2px 2px 0 #f82946);}
@media screen and (max-width:800px){.btn-link{padding:10px;}}

/*非アクティブ*/
.none-active{filter:brightness(60%) grayscale(100%); pointer-events:none;}

/*応募済*/
.done{background:#ff6fb3; border:4px solid #f84747; box-shadow:0 5px 0 #e7849e; pointer-events:none;}
.done p{filter:drop-shadow(0 0 1px #f82946) drop-shadow(2px 2px 0 #f82946) drop-shadow(-2px -2px 0 #f82946) drop-shadow(2px -2px 0 #f82946) drop-shadow(-2px 2px 0 #f82946);}

/*
================================================================================================================
ページ遷移アニメ
================================================================================================================
*/
.fade{
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:1s;}
.fade > .fade{animation-delay:2s;}

#fade{
animation-name:fadeIn;
animation-duration:.7s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:.5s;}

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