@charset "UTF-8";

/* ===================================

   NA games request campaign 2015
 
=================================== */
html {
font-size: 75%; /* 12px設定 */
-webkit-text-size-adjust: 100%;
}
@media all and (-webkit-min-device-pixel-ratio: 1) {
font-size: 75%; /* 12px設定 */
-webkit-text-size-adjust: 100%;
 body{ font-size:12px; font-size:1.2rem; /* 12px設定 */
       letter-spacing: -0.001em; /* Safariでの9px-10px-11px対応 */ }
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
font-size: 87.5%; /* 14px設定 */
-webkit-text-size-adjust: 100%;
 body{ font-size:14px; font-size:1.4rem; /* 14px設定 */
       letter-spacing: -0.001em; /* Safariでの9px-10px-11px対応 */ }
}
body{  
        margin: 0;  
        padding: 40px 0 0 0;
        font-family:"Hiragino Kaku Gothic ProN" , "游ゴシック" , YuGothic, Meiryo, sans-serif;
        font-size:12px; font-size:1.2rem; /* 12px設定 */
        font-weight:normal;
        letter-spacing: -0.001em; /* Safariでの9px-10px-11px対応 */
        line-height:1;
        color:#333;
    }  
    * html body{
        overflow: hidden;
    }   
    div#headerArea {  
    position: fixed !important; /* ヘッダー固定 */
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom:2px solid #FFDE00;
    background: rgba(0,0,0,1);
    color:#FFF;
    }  
    div#footerArea {
        position: relative !important; /* フッター固定 */
        //position: absolute;
        //z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        height:50px;
        text-align:center;
        color: #fff;
        border-top:2px solid #FFDE00;
        background: rgba(0,0,0,1);
    }  
    * html div#contentsArea{
        height: 100%;
        overflow: auto;
}

body > div { font-size:10px; font-size:1rem; /* 10px設定 */ }

a img { border: none;}

div , p ,form , article, aside, figure, figcaption, details, footer, header, hgroup, nav, section, summary { display:block;line-height:1.4;}

a img { border: none;}

h1 , h2 , h3 , h4 , h5 { font-weight:normal;text-indent:0;}

ul li { list-style-position:outside;}

/*  clear  ----------------------------------------------- */

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

.clearfix { display: inline-block; zoom: 1;} 

/* Hides from IE Mac  -------------------------------------- */
* html .clearfix { height: 1%;}
.clearfix { display:block;}
/*  ----------------------------------------------- End Hack */ 

/* link  ----------------------------------------------- */

a { color: #ec0000; outline: none; text-decoration:none; }
a:hover{ text-decoration:underline; }

div#headerArea a , div#footerArea a { color:#FFF;}

/* float  ----------------------------------------------- */

.fl { float:left;}
.fr { float:right;}

/* font -----------------------------------------------
8px = 0.8rem 9px = 0.9rem 10px = 1rem 11px = 1.1rem
12px = 1.2rem 14px = 1.4rem 16px = 1.6rem 18px = 1.8rem
20px = 2rem 22px = 2.2 rem
------------------------------------------------------ */
.fs8 { font-size:8px; font-size:0.8rem;}
.fs9 { font-size:9px; font-size:0.9rem;}
.fs10 { font-size:10px; font-size:1rem;}
.fs11 { font-size:11px; font-size:1.1rem;}
.fs12 { font-size:12px; font-size:1.2rem;}
.fs14 { font-size:14px; font-size:1.4rem;}
.fs16 { font-size:16px; font-size:1.6rem;}
.fs18 { font-size:18px; font-size:1.8rem;}
.fs20 { font-size:20px; font-size:2rem;}
.fs22 { font-size:22px; font-size:2.2rem;}
.fs24 { font-size:24px; font-size:2.4rem;}
.fs28 { font-size:28px; font-size:2.8rem;}


/* align  ----------------------------------------------- */

.left { text-align:left;}
.center { text-align:center;}
.right { text-align:right;}

.top { vertical-align:top;}
.middle { vertical-align:middle;}
.bottom { vertical-align:bottom;}

/* color  ----------------------------------------------- */

.white { color:#FFF;}
.black { color:#000;}
.gray { color:#555;}
.pGray { color:#777;}
.dBlue { color:#2c5b95;}
.pBlue { color:#83a3ca;}
.dRed { color:#e20000;}
.red { color:#ff0000;}
.orange { color:#ff7e00;}
.dOrange { color:#f59000;}
.green { color:#a2d114;}

/* bgcolor  ----------------------------------------------- */

.bgBlack { background-color:#000;}
.bgGray { background-color:#f4f4f4;}
.bgWhite { background-color:#FFF;}
.bgBlue { background-color:#def6ff;}
.bgYellow { background-color:#ffffe6;}

/* margin  ----------------------------------------------- */

.mg0 { margin:0;}
.mva { margin:0 auto;}
.mha { margin:auto 0;}

.mha15 { margin:15px auto;}

.mg5 { margin:5px !important;}
.mg10 { margin:10px !important;}
.mg15 { margin:15px !important;}
.mg20 { margin:20px !important;}

.mgL5 { margin-left:5px !important;}
.mgL10 { margin-left:10px !important;}
.mgL15 { margin-left:15px !important;}
.mgL20 { margin-left:20px !important;}
.mgL40 { margin-left:40px !important;}

.mgR5 { margin-right:5px !important;}
.mgR8 { margin-right:8px !important;}
.mgR10 { margin-right:10px !important;}
.mgR15 { margin-right:15px !important;}
.mgR20 { margin-right:20px !important;}

.mgT5 { margin-top:5px !important;}
.mgT10 { margin-top:10px !important;}
.mgT12 { margin-top:15px !important;}
.mgT15 { margin-top:15px !important;}
.mgT20 { margin-top:20px !important;}
.mgT30 { margin-top:30px !important;}
.mgT40 { margin-top:40px !important;}

.mgTun2 { margin-top:-2px !important;}
.mgTun5 { margin-top:-5px !important;}
.mgTun10 { margin-top:-10px !important;}

.mgB5 { margin-bottom:5px !important;}
.mgB8 { margin-bottom:8px !important;}
.mgB10 { margin-bottom:10px !important;}
.mgB15 { margin-bottom:15px !important;}
.mgB20 { margin-bottom:20px !important;}
.mgB30 { margin-bottom:30px !important;}
.mgB40 { margin-bottom:40px !important;}

/* padding  ----------------------------------------------- */

.psa { padding:0 auto;}
.pha { padding:auto 0;}

.pd5 { padding:5px !important;}
.pd10 { padding:10px !important;}
.pd15 { padding:15px !important;}
.pd20 { padding:20px !important;}

.pdL5 { padding-left:5px !important;}
.pdL10 { padding-left:10px !important;}
.pdL15 { padding-left:15px !important;}
.pdL20 { padding-left:20px !important;}

.pdR5 { padding-right:5px !important;}
.pdR10 { padding-right:10px !important;}
.pdR15 { padding-right:15px !important;}
.pdR20 { padding-right:20px !important;}

.pdT3 { padding-top:3px !important;}
.pdT5 { padding-top:5px !important;}
.pdT10 { padding-top:10px !important;}
.pdT15 { padding-top:15px !important;}
.pdT20 { padding-top:20px !important;}
.pdT35 { padding-top:35px !important;}
.pdT40 { padding-top:40px !important;}

.pdB5 { padding-bottom:5px !important;}
.pdB10 { padding-bottom:10px !important;}
.pdB15 { padding-bottom:15px !important;}
.pdB20 { padding-bottom:20px !important;}
.pdB40 { padding-bottom:40px !important;}

/* box  ----------------------------------------------- */

.boxAuto { width:auto !important;}
.box100per { width:100% !important;}
.box90per { width:90% !important;}
.box42per { width:42% !important;}
.box48per { width:48% !important;}
.box30per { width:30% !important;}
.box100 { width:100px !important;}

.boxCenter {
	display: -webkit-box; /* 横並びの高さ揃え */
	-webkit-box-pack: center; /* センター揃え */
}

/* form  ----------------------------------------------- */

input, select , textarea {
padding:7px;
background-color:#FFF;
font-size:14px; font-size:1.4rem;
border:1px solid #CCC;
border-radius: 6px;        /* CSS3 */  
-webkit-border-radius: 6px;    /* Safari,Google Chrome */  
-moz-border-radius: 6px;   /* Firefox */
-ms-border-radius: 6px;   /* Internet Explorer */
-o-border-radius: 6px;   /* Opera */
}

textarea {
width:auto;
min-width:300px;
}

input a:link { text-decoration:none !important;}

/* header  ----------------------------------------------- */

div#headerArea .logo {
width:143px;
height:23px;
background-image: url("../images/logo.png");
background-position:top left;
background-repeat: no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#headerArea .logo {
background-image: url("../images/logo@2x.png");
background-size: 143px 23px;
background-repeat: no-repeat;
}}

div#headerArea .logo h2 { display:none;}

div#headerArea .camTitle h1 { display:none;}

div#headerArea ul li{
list-style-type:none;
list-style-position:outside;
text-wrap:normal;
word-break:break-all;
word-wrap : break-word;
}

/* contents  ----------------------------------------------- */

audio { font-size:10px;font-size:1rem !important; }

.blk { display:block}

.noDisp { display:none;}

.oHidden { overflow: hidden;}

.noBorder { border:none !important;}

.bold { font-weight:bold;}
.normal { font-weight:normal;}

div#contentsArea {
width:100%;
max-width:100%;
font-size:14px; font-size:1.4rem;
background-image:url("../images/bg_image.png");
background-position:bottom left;
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment:fixed;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea {
background-image:url("../images/bg_image@2x.png");
background-position:bottom left;
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment:fixed;
}}

div#contentsArea .grayLine {
background-color:#000;
background-image:url("../images/history/box_bg.png");
background-position:top left;
background-repeat: repeat;
border:5px solid #DDD !important;
border-radius: 5px;        /* CSS3 */  
-webkit-border-radius: 5px;    /* Safari,Google Chrome */  
-moz-border-radius: 5px;   /* Firefox */
-ms-border-radius: 5px;   /* Internet Explorer */
-o-border-radius: 5px;   /* Opera */
color:#FFF;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .grayLine {
background-image:url("../images/history/box_bg@2x.png");
background-position:top left;
background-repeat: repeat;
}}

div#contentsArea .attnText {
color:#ff7f7f;
}

div#contentsArea .regBtn {
padding: 15px 40px;
font-size:22px;
background-color: #ef6427;
color: #fff;
font-weight:bold;
border-style: none!important;
}

div#contentsArea .returnBtn {
padding: 15px 40px;
font-size:22px;
background-color: #a9a9a9;
color: #fff;
font-weight:bold;
border-style: none!important;
}
div#contentsArea .title {
padding:2px 0 1px 13px;
background-image:url("../images/side_line.png");
background-position:top left;
background-repeat: no-repeat;
color:#2c5b95;
font-weight:900;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .title {
background-image:url("../images/side_line@2x.png");
background-position:top left;
background-size: 6px 200px;
background-repeat: no-repeat;
}}

div#contentsArea .article {
margin:0 auto;
padding:0;
width:90%;
min-width:300px;
max-width:750px !important;
}

.fb_iframe_widget > span {
  vertical-align: bottom !important;
}


div#contentsArea .mainImage {
margin:0 auto;
padding:0 auto;
width:320px;
height:261px;
background-image:url("../images/main_image.png");
background-position:top left;
background-size: 320px 261px;
background-repeat:no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .mainImage {
background-image:url("../images/main_image@2x.png");
background-position:top left;
background-size: 320px 261px;
background-repeat: no-repeat;
}}

div#contentsArea .mainImage .onText {
position: relative;
top: 210px;
left: 0;
width:auto;
height:auto;
}

div#contentsArea .mainImage2 {
margin:0 auto;
padding:0 auto;
width:320px;
height:261px;
background-image:url("../images/main_image2.png");
background-position:top left;
background-size: 320px 261px;
background-repeat:no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .mainImage2 {
background-image:url("../images/main_image2@2x.png");
background-position:top left;
background-size: 320px 261px;
background-repeat: no-repeat;
}}

div#contentsArea .mainImage3 {
margin:0 auto;
padding:0 auto;
width:320px;
height:237px;
background-image:url("../images/main_image3.png");
background-position:top left;
background-size: 320px 237px;
background-repeat:no-repeat;
}

div#contentsArea .mainImage5 {
margin:0 auto;
padding:0 auto;
width:320px;
height:303px;
background-image:url("../images/main_image5.png");
background-position:top left;
background-size: 320px 303px;
background-repeat:no-repeat;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .mainImage2 {
background-image:url("../images/main_image3@2x.png");
background-position:top left;
background-size: 320px 237px;
background-repeat: no-repeat;
}}


div#contentsArea .information ,
div#contentsArea .history ,
div#contentsArea .presents ,
div#contentsArea .formBox {
width:100%;
border-bottom:3px solid #FFDE00;
}

div#contentsArea .tweetBox {
width:100%;
}

div#contentsArea .information .aboutTitle {
z-index: 1;
display: block;
position: relative;
top:-28px;
left:0;
margin:0 auto;
width:237px;
height:37px;
background-image:url("../images/about_title.png");
background-position:top left;
background-repeat:no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .information .aboutTitle {
background-image:url("../images/about_title@2x.png");
background-position:top left;
background-size: 237px 37px;
background-repeat: no-repeat;
}}


div#contentsArea .information .resultTitle {
z-index: 1;
display: block;
position: relative;
top:-28px;
left:0;
margin:0 auto;
width:237px;
height:37px;
background-image:url("../images/about_title2.png");
background-position:top left;
background-repeat:no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .information .aboutTitle {
background-image:url("../images/about_title2@2x.png");
background-position:top left;
background-size: 237px 37px;
background-repeat: no-repeat;
}}

div#contentsArea .information .rankingList {
width:90%;
margin:-25px auto 0 auto;
}

div#contentsArea .information .rankingList p {
margin:0 0 5px 0;
}

div#contentsArea .history .historyBox {
width:auto;
height:auto;
border-left:4px solid #2f8cce;
}

div#contentsArea .history .historyBoxNext {
width:auto;
height:auto;
background-image:url("../images/history/year_linenext_bg.png");
background-position:top left;
background-repeat:no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .history .historyBoxNext{
background-image:url("../images/history/year_linenext_bg@2x.png");
background-position:top left;
background-repeat:no-repeat;
}}

div#contentsArea .history .historyBox .yearBox {
width:7px;
height:auto;
}

div#contentsArea .history .historyBoxNext .yearBox {
padding-left:4px;
width:11px;
height:auto;
}

div#contentsArea .history .historyBox .item {
width:auto;
height:auto;
background-color:#333;
background-image:url("../images/history/box_bg.png");
background-position:top left;
background-repeat: repeat;
border:3px solid #f3e377 !important;
border-radius: 6px;        /* CSS3 */  
-webkit-border-radius: 6px;    /* Safari,Google Chrome */  
-moz-border-radius: 6px;   /* Firefox */
-ms-border-radius: 6px;   /* Internet Explorer */
-o-border-radius: 6px;   /* Opera */
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .history .historyBox .item {
background-color:#333;
background-image:url("../images/history/box_bg@2x.png");
background-position:top left;
background-repeat: repeat;
}}

div#contentsArea .history .historyBox .itemPkup {
width:auto;
height:auto;
background-color:#333;
background-image:url("../images/history/box_bg.png");
background-position:top left;
background-repeat: repeat;
border:3px solid #FFDE00 !important;
border-radius: 6px;        /* CSS3 */  
-webkit-border-radius: 6px;    /* Safari,Google Chrome */  
-moz-border-radius: 6px;   /* Firefox */
-ms-border-radius: 6px;   /* Internet Explorer */
-o-border-radius: 6px;   /* Opera */
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .history .historyBox .itemPkup {
background-color:#333;
background-image:url("../images/history/box_bg@2x.png");
background-position:top left;
background-repeat: repeat;
}}

div#contentsArea .history .historyBoxNext .itemNext {
width:auto;
height:auto;
background-color:#333;
background-image:url("../images/history/box_bg.png");
background-position:top left;
background-repeat: repeat;
border:3px solid #ff0000 !important;
border-radius: 6px;        /* CSS3 */  
-webkit-border-radius: 6px;    /* Safari,Google Chrome */  
-moz-border-radius: 6px;   /* Firefox */
-ms-border-radius: 6px;   /* Internet Explorer */
-o-border-radius: 6px;   /* Opera */
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .history .historyBox .itemNext {
background-color:#333;
background-image:url("../images/history/box_bg@2x.png");
background-position:top left;
background-repeat: repeat;
}}

div#contentsArea .history .historyBox .itemText ,
div#contentsArea .history .historyBoxNex .itemText {
width:auto;
white-space: pre-wrap !important;
white-space: pre-line !important;
border-radius: 3px;        /* CSS3 */  
-webkit-border-radius: 3px;    /* Safari,Google Chrome */  
-moz-border-radius: 3px;   /* Firefox */
-ms-border-radius: 3px;   /* Internet Explorer */
-o-border-radius: 3px;   /* Opera */
}

div#contentsArea .presents .catchTitle ,
div#contentsArea .presents .catchTitle2 {
width:auto;
height:auto;
}

div#contentsArea .presents .preName { line-height:1.2;}

div#contentsArea .presents .tag1 {
background-image:url("../images/present/present_tag1.png");
background-position:top left;
background-repeat: no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .presents .tag1 {
background-image:url("../images/present/present_tag1@2x.png");
background-position:top left;
background-size: 1200px 34px;
background-repeat: no-repeat;
}}

div#contentsArea .presents .tag2 {
background-image:url("../images/present/present_tag2.png");
background-position:top left;
background-repeat: no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .presents .tag2 {
background-image:url("../images/present/present_tag2@2x.png");
background-position:top left;
background-size: 1200px 34px;
background-repeat: no-repeat;
}}

div#contentsArea .presents .tag3 {
background-image:url("../images/present/present_tag3.png");
background-position:top left;
background-repeat: no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .presents .tag3 {
background-image:url("../images/present/present_tag3@2x.png");
background-position:top left;
background-size: 1200px 34px;
background-repeat: no-repeat;
}}

div#contentsArea .presents .item {
width:auto;
}

div#contentsArea .formTitle {
padding:2px 0 0 10px;
border-left:4px solid #ffe328;
color:#25b6d5;
}

div#contentsArea .formBox  ul li,
div#contentsArea .tweetBox ul li {
margin-left:-20px;
list-style-position:outside;
vertical-align:bottom;
}

div#contentsArea .formBox ul.titleName{
list-style-type:decimal;
vertical-align:bottom;
}


/* tweet  ----------------------------------------------- */

div#contentsArea .tweetBox .popBoxBeak {
background-image:url("../images/sns_pickup.png");
background-position: 25px bottom;
background-repeat: no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#contentsArea .tweetBox .popBoxBeak {
background-image:url("../images/sns_pickup@2x.png");
background-position: 25px bottom;
background-size: 20px 15px;
background-repeat: no-repeat;
}}

div#contentsArea .tweetBox .popBox {
border:3px solid #CCC;
background-color:#000;
border-radius: 6px;        /* CSS3 */  
-webkit-border-radius: 6px;    /* Safari,Google Chrome */  
-moz-border-radius: 6px;   /* Firefox */
-ms-border-radius: 6px;   /* Internet Explorer */
-o-border-radius: 6px;   /* Opera */
}


div#contentsArea .tweetBox .twCustom1 {
padding:0;
width:50px;
height:50px;
border:2px solid #ff7e00;
}


div#contentsArea .timeline {
width:100%;
min-width:300px;
max-width:520px;
}s


/* footer  ----------------------------------------------- */

div#footerArea .gototop {
position: absolute;
bottom: 50px;
left: 3%;
width:70px;
height:30px;
background-image:url("../images/pagetop_icon.png");
background-repeat: no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#footerArea .gototop {
background-image: url("../images/pagetop_icon@2x.png");
background-size: 70px 30px;
background-repeat: no-repeat;
}}

div#footerArea .charactor {
position: absolute;
bottom: 50px;
right: 2%;
width:174px;
height:117px;
background-image:url("../images/chara3.png");
background-repeat: no-repeat;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
div#footerArea .charactor {
background-image: url("../images/chara3@2x.png");
background-size: 174px 117px;
background-repeat: no-repeat;
}}

div#footerArea .footerLink { width:auto;padding:0 auto !important;}
div#footerArea .footerLink ul { list-style-type:none;}
div#footerArea .footerLink li {border-right:1px solid #666;}