@charset "UTF-8";

@keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}

body {
    animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
    font-size: 15px;
    line-height: 1.2;
    color: #000;
    box-sizing: border-box;
    background:url(../_img/bg_fix.jpg) center top;
    background-size:100% auto;
    background-attachment: fixed;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

#vote_aonohako {
    padding-bottom: 2rem;
}

img {
    max-width: 100%;
}

.pc {
    display: block;
}

.sp {
    display: none;
}
#gNavi{display:none;}
/*==================================
ナビ
===================================*/
nav {
    background: #fff;
}

/*==================================
ヘッダー
===================================*/
header {
width:1219px;height:867px;
margin: 0 auto 150px;
position: relative;
}





header div{position: absolute;}

header div#logo{z-index:2;right:0;top:10px;}
header div#day{z-index:2;left:0;bottom:30px;}
header div#title{z-index:2;right:0;bottom:0px;}
header div#chara{z-index:1;left:0;top:0px;}


#lower header{width:823px;height:252px;margin:0 auto;padding:0;}

header img {
    width: 100%;
}


/*==================================
基本フォーマット
===================================*/
section.whiteBlock{width:100%;margin:0 auto;background:#f3fbff;position: relative;}

section.whiteBlock:before{
content:"";display:block;
background: url('../_img/line_top.png') center top repeat-x;width:100%;height:133px;position: absolute;top:-70px; z-index:-1}

section.whiteBlock:after{
content:"";display:block;
background: url('../_img/line_bottom.png')center top repeat-x;width:100%;height:133px;position: absolute;bottom:-100px; z-index:-1}

.btn1{width:100%; margin:12px auto;background:#209cd8;color:#FFF; padding:6px 0;font-size:22px;text-align:center;display:block;font-weight:bold;letter-spacing: 0.2em;position:absolute;bottom:0;cursor: pointer !important;}
.btn1:hover{background:#145a7c;cursor: pointer !important;}

.btn{width:100%; margin:12px auto;background:#209cd8;color:#FFF; padding:10px 0;font-size:22px;text-align:center;display:block;font-weight:bold;letter-spacing: 0.2em;cursor: pointer !important;}
.btn:hover{background:#145a7c;cursor: pointer !important;}

.btn2{width:80%; margin:12px auto;background:#f482c6;color:#FFF; padding:10px 0;font-size:32px;text-align:center;display:block;font-weight:bold;letter-spacing: 0.2em;cursor: pointer !important;}
.btn2:hover{background:#145a7c;cursor: pointer !important;}

.f_btn {
    margin: 60px auto;
    font-size: 33px;color:#FFF;font-weight:bold;letter-spacing: 0.1em;
    background: #f482c6;
    padding: 1rem;
    width: 400px;
    display: block;
    box-sizing: border-box;
}
.top_btn {
    margin: 60px auto 0;
    font-size: 22px;color:#FFF;font-weight:bold;letter-spacing: 0.1em;
    background: #209cd8;
    padding: 1rem;
    width: 400px;
    display: block;
    box-sizing: border-box;text-align: center;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

/*==================================
リード漫画
===================================*/
section#lead h2{text-align:center;}
section#lead #manga{width:831px; margin:0 auto;}

/*==================================
ダウンロード予告
===================================*/
section#download_yokoku{width:801px;margin:0 auto;position: relative;z-index:-1;padding:150px 0 0px;}

/*==================================
キャラクター選択
===================================*/
section#chara_select h2{width:762px;margin:0 auto;}
section#chara_select ul#charas{width:1200px;margin:0 auto;display:flex; flex-wrap: wrap;}
section#chara_select ul#charas li{width:19%;margin:2% 0.5%;position: relative;padding-bottom:65px}
.dropShadow{
    -webkit-filter: drop-shadow(0px 3px 5px rgba(94,165,203,.5));
    filter: drop-shadow(0px 0px 5px rgba(94,165,203,.5));}

dd span{display:block;text-align:center;margin:12px 0;font-size:21px;letter-spacing: 0.1em;color:#209cd8;font-weight:bold;}



/*==================================
プレゼント
===================================*/
section#present {
width:800px;margin:0 auto; padding:20px;border-radius: 20px;
background:url("../_img/bg_present.jpg") center top no-repeat #f3fbff; box-sizing: border-box;
}
section#present strong{display: block;font-weight:bold; text-align:center !important;font-size:24px;margin-top:30px;}

section#present ul#stampList{width:700px;margin:0 auto;display:flex; flex-wrap: wrap;padding-top:490px;}
section#present ul#stampList li{width:23%;margin: 1%;}

/*==================================
ダウンロード
===================================*/
#donwload{width:717px;margin:0px auto 30px}
#donwload #dllBtn a.true{width:717px; height:77px;background:URL("../_img/btn_dll_on.png");
    display: block!important;
}
#donwload #dllBtn a{display:none; font-size:0;}
#donwload #dllBtn{width:717px; height:77px;margin-top:20px; background:URL("../_img/btn_dll_off.png")}
    
/*==================================
その他情報部分
===================================*/
section#info{padding-top:150px;}
section#info dl{width:800px; margin: 30px auto;background:#f3fbff;padding:20px;box-sizing: border-box; font-size:18px;}
section#info dl dt{width:27%; float:left;}
section#info dl dd{margin-left:30%}
section#info dl dd .midashi{color:#209cd8;font-size:32px;font-weight:bold;margin-bottom:0.5em;}


/*==================================
サンクス画面、投票確認画面
===================================*/
section#thanks,section#voteCheck {width:800px;margin:0 auto; padding:0 0 40px;background:#f3fbff; box-sizing: border-box;}
section#thanks h2{width:456px;margin:0px auto 20px;}
section#voteCheck h2{width:596px;margin:0px auto 20px;}

section#thanks #select_pict,section#voteCheck #select_pict{width:400px; margin:0 auto;}

section#thanks #select_pict img,section#voteCheck #select_pict img{border:1px solid #CCC;}
#name_obi{width:100%;background:#FFFF00;text-align:center;padding:6px 0;font-size:40px;color:#008aca;font-weight:bold;margin:20px 0;letter-spacing: 0.1em}

section#thanks #spgazou_info{width:800px;height:auto;background:url(../_img/spgazou_img.jpg) no-repeat;position: relative;padding-top:485px;}
section#thanks #spgazou_info .btn1{width:80%;position:static;margin:0 auto;padding:12px 0;}

#download_spgazou{display:none;width:90%;padding:20px; margin:50px auto; border:1px solid #FFF;text-align:center;border-radius: 10px;
background-image: linear-gradient(150deg, rgba(181, 236, 239, 1) 10%, rgba(209, 206, 237, 1) 50%, rgba(249, 233, 244, 1));}
#download_spgazou p.settei{text-align:left;margin:12px 0;}
#download_spgazou p.settei span{font-weight:bold;font-size:19px;}
#download_spgazou p.sns_txt{text-align:center;font-size:20px;color:#0099cc;font-weight:bold;}

/*==================================
フッター
===================================*/
footer{font-size:12px;text-align:center;padding:0px 0 10px;}

/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after, ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}



@media screen and (min-width:769px) and ( max-width:1199px) {

    header,section#chara_select ul#charas {
        width:100%;
        }

        header div#day {
            z-index:2;left:0;bottom:-10%;}
        

}