@charset "utf-8";

footer{background-color:#000;}

/*
=====================================================================
キャンペーン
=====================================================================
*/
#campaign{
width:100%;
color:#fff;
background-color:#000;
background-image:url(../img/campaign/bg02.jpg) , url(../img/campaign/bg01.jpg);
background-repeat:no-repeat , repeat-x;
background-position:top center , top;
font-size:15px;
text-align:center;
margin:0 auto;}

#campaign #top img{width:100%; max-width:980px;}
#campaign #top img#title{margin:20px auto;}

#campaign #top p a{display:inline-block; color:#fff; padding:3px; text-decoration:underline;}
#campaign #top p a:hover{color:#ffdd3a;}

#campaign #top p span{display:inline-block; font-size:22px; font-weight:bold; margin-top:10px;}

@media screen and (max-width:980px){
#campaign{background-size:100% , 100%;}
#campaign #top p {width:96%; margin:0 auto;}}

@media screen and (max-width:480px){
#campaign #top p{width:90%; font-size:13px; /*text-align:left;*/}
#campaign #top p span{font-size:18px;}}

/*
=====================================================================
キャンペーン ラインアップ
=====================================================================
*/
#line-up{position:relative; margin:50px auto;}
#line-up .inner{
display:flex;
width:100%;
max-width:980px;
justify-content:space-between;
align-items:center;
margin:0 auto;}

#line-up .inner .cat{
display:block;
width:30%;
color:#fff;
background-color:#000721;
background-image:url(../img/common/bg_lineup.png);
background-size:100%;
background-repeat:no-repeat;
background-position:top;
text-align:center;
border:solid 1px #5c5c5c;
padding:20px;}
#line-up .inner .cat p:nth-child(2){
font-size:23px;
letter-spacing:2px;
text-shadow:0 0 8px rgba(167,109,17,0.4),0 0 10px rgba(167,109,17,0.4),0 0 14px rgba(167,109,17,0.7),0 0 10px rgba(167,109,17,0.7);}
#line-up .inner .cat img{width:100%; max-width:400px; filter:drop-shadow(0px 0px 20px #0048ff);}
#line-up .inner .cat p:nth-child(2) span{display:block; font-size:12px;}
#line-up .inner .cat p:nth-child(3){display:flex; margin:10px auto 0;}
#line-up .inner .cat p:nth-child(3) a{
display:block;
width:49%;
color:#fff;
font-size:16px;
text-shadow:0px 2px 2px rgba(0,0,0,0.4),0px 2px 2px rgba(0,0,0,0.4);
border-radius:2px;
padding:10px;}
#line-up .inner .cat p:nth-child(3) a:first-child{
background:#ad0018;
background:-moz-linear-gradient(top, #ad0018 0%, #8e0011 100%);
background:-webkit-linear-gradient(top, #ad0018 0%,#8e0011 100%);
background:linear-gradient(to bottom, #ad0018 0%,#8e0011 100%);
margin-right:1%;}
#line-up .inner .cat p:nth-child(3) a:first-child:hover{background:#c40016;}
#line-up .inner .cat p:nth-child(3) a:last-child{
background:#0080fb;
background:-moz-linear-gradient(top, #0080fb 0%, #00399c 100%);
background:-webkit-linear-gradient(top, #0080fb 0%,#00399c 100%);
background:linear-gradient(to bottom, #0080fb 0%,#00399c 100%);
margin-left:1%;}
#line-up .inner .cat p:nth-child(3) a:last-child:hover{background:#007ef9;}

#line-up .inner .cat:hover{border:solid 1px #a3a3a3;}
#line-up .inner .cat:hover p:nth-child(2){text-shadow:0 0 8px rgba(167,109,17,0.7),0 0 10px rgba(167,109,17,0.7),0 0 14px rgba(167,109,17,1),0 0 10px rgba(167,109,17,1),0 0 20px rgba(167,109,17,1);}

@media screen and (max-width:980px){
#line-up .inner{width:96%;}}

@media screen and (max-width:800px){
#line-up .inner{flex-wrap:wrap; justify-content:space-around;}
#line-up .inner .cat{width:45%; margin-bottom:20px;}
#line-up .inner .cat:last-child{margin-bottom:0;}}

@media screen and (max-width:640px){
#line-up .inner{width:90%;}
#line-up .inner .cat{width:100%;}}

@media screen and (max-width:480px){
#line-up .inner{width:80%;}}

/*
=====================================================================
キャンペーン 注意書き
=====================================================================
*/
em{
display:block;
width:100%;
max-width:980px;
font-style:normal;
font-size:12px;
font-weight:bold;
text-align:left;
margin:0 auto 5px;}

#notice{
display:flex;
width:100%;
max-width:980px;
font-size:12px;
text-align:left;
margin:0 auto;}
#notice p{width:50%;}

@media screen and (max-width:980px){
em{width:96%;}
#notice{width:96%; margin:0 auto;}}

@media screen and (max-width:800px){
em,#notice{font-size:11px;}}

@media screen and (max-width:640px){
#notice{flex-wrap:wrap;}
#notice p{width:100%;}}

@media screen and (max-width:480px){
em,#notice{width:80%;}}