/* ==================================================================
CSS information
style info :「ピックアップ情報」用
================================================================== */


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



/* --------------------------------------------------------
#headerBlock
-------------------------------------------------------- */
#headerBlock { padding-top: 0px; position:relative; }
#headerBlock #pagettl-wrap { border-top: 1px solid #000; border-bottom: 1px solid #000; position: relative;}
#headerBlock #logo-sp { width: 58.75%; height: auto; text-align: center; margin: 0 auto 20px; padding-top: 4%;}
#headerBlock #pagettl { width: 100%; height: auto; text-align: center; margin: 0 auto;}
#logo-30th { position: absolute; top: -260%; right: 2%; width: 18%; max-width: 138px; }

@media screen and (min-width: 641px) {
#headerBlock { padding-top: 60px; }
#headerBlock #pagettl-wrap { width: 100%; background: url(../_img/ttl_bg_r.png) center top repeat-x; }
#headerBlock #pagettl-wrap .inner { width: 100%; background: url(../_img/ttl_bg.png) center top no-repeat; position: relative; overflow: visible;}
#headerBlock #pagettl-wrap .inner .inner-in { width: 100%; max-width: 980px; margin: 0 auto; position: relative;}
#headerBlock #pagettl { margin: 0 auto 0; width: 38.77552%; max-width: 380px;}


#logo-dqh2 { position: absolute; top: -70%; left: 52px; width: 27.55103%; max-width: 270px;}
#logo-30th { position: absolute; top: -70%; right: 30px; width: 14.08164%; max-width: 138px;}
}
@media screen and (min-width: 641px) and (max-width: 980px) {
#headerBlock { padding-top: 6.1224%; }
#headerBlock #pagettl-wrap .inner { background-size: cover; }
}


/* --------------------------------------------------------
#subnavi
-------------------------------------------------------- */
#subnavi { padding: 4.6875% 4.6875% 0.6875%;}
#subnavi ul { letter-spacing: -.45em; font-size: 12px; vertical-align: top;}
#subnavi li { letter-spacing: normal; vertical-align: top; display: inline-block; width: 47.75862%; margin-bottom: 4%;}
#subnavi li a:hover , #subnavi li.current a { background-position: center bottom;}
@media screen and (max-width: 640px) {
#subnavi li:nth-child(odd) { margin-right: 4%;}
#subnavi li a { display: block; background: url(../_img/btn_bg_sp.png) center top; background-size: 100%;}
}
@media screen and (min-width: 641px) {
#subnavi { width: 100%; padding: 10px 4.08163% 13px; text-align: center; border-bottom: 1px solid #336cc2;}
#subnavi li { display: inline-block; width: 22.333334%; max-width: 201px; margin-bottom: 0;}
#subnavi li { margin-right: 3.555%;}
#subnavi li:last-child { margin-right: 0;}
#subnavi li a { display: block; background: url(../_img/btn_bg_pc.png) center top; background-size: cover;}
#subnavi li img { position:}
}
@media screen and (min-width: 641px) and (max-width: 980px) {
#subnavi { width: 100%; max-width: 980px; margin: 0 auto; }
}


/* ----------------------------------------------------------------------------------------------------------------
.contents-block
---------------------------------------------------------------------------------------------------------------- */
.contents-block { position: relative; padding: 0 3.125%; background: #000 url(../_img/contents_bg_sp.jpg) center top no-repeat;}
@media screen and (min-width: 641px) {
.contents-block { position: relative; padding: 0; background: #000 url(../_img/contents_bg_pc.jpg) center top no-repeat; background-size: 100%; border-top: 1px solid #000;}
}

#category_info { padding: 4.6875%; text-align: center;}
#category_info > div { display: none;}
#category_info .current { display: block;}
@media screen and (min-width: 641px) {
#category_info { padding: 1.5% 0 0; }
}


#pickup-block { padding: 0 7.8125% 7.8125%;}
#pickup-block li { display: block; margin-bottom: 4%; position: relative;}
#pickup-block li img { position: relative;}
@media screen and (min-width: 641px) {
#pickup-block { width: 100%; max-width: 904px; padding: 10px 0% 4%; margin: 0 auto; }
#pickup-block ul { letter-spacing: -.45em; font-size: 12px; vertical-align: top; text-align: left;}
#pickup-block li { letter-spacing: normal; vertical-align: top; display: inline-block; width: 47.78762%; max-width: 432px; margin: 0 1.1% 3%;}
#pickup-block li > img { display: block; border: 1px solid #000;}
#pickup-block li a { display: block; border: 1px solid #000;}
#pickup-block li a:hover { display: block; border: 1px solid #edc647;}
#pickup-block li { color:#FFF;}
}

@media screen and (min-width: 641px) {
#bnr_official { width: 100%;}
#bnr_official img { width: 100%; height: auto;}
}



/* --------------------------------------------------------
#bnr-block
-------------------------------------------------------- */
#bnr-block-wrap { border-top: 2px solid #103862; width: 100%; padding: 23px 3.90625% 25px;
background: #021637;
background: -moz-linear-gradient(top,  #021637 0%, #000e25 100%);
background: -webkit-linear-gradient(top,  #021637 0%,#000e25 100%);
background: linear-gradient(to bottom,  #021637 0%,#000e25 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#021637', endColorstr='#000e25',GradientType=0 );
}
#bnr-block { position: relative; width: 81.3559%; margin: 0 auto;}
@media screen and (max-width: 640px) {

#bnr-block #bnr-slider li img { width: 100%; height: auto;}
#bnr-block #bnr-block-control { position: absolute; top:0; width: 100%;}
#bnr-block .btn_prev,
#bnr-block .btn_next { position: absolute; top: 0px; width: 10%; height: 100%;}
#bnr-block .btn_prev { left: -10%;}
#bnr-block .btn_next { right: -10%;}
#bnr-block .btn_prev a,
#bnr-block .btn_next a { display: block; width: 100%; height: 100%; }
#bnr-block .btn_prev a { background: url(../../_img/index_v2/btn_prev.png) no-repeat center left;}
#bnr-block .btn_next a { background: url(../../_img/index_v2/btn_next.png) no-repeat center right;}
#bnr-block .btn_prev a.disabled,
#bnr-block .btn_next a.disabled { opacity: 0.5;}
}

@media screen and (min-width: 641px) {
#bnr-block-wrap { border-top: 1px solid #103862; padding: 18px 0 35px;}
#bnr-block { width: 100%; max-width: 980px; }
#bnr-slider { letter-spacing: -.45em; font-size: 12px; vertical-align: top; text-align: center;}
#bnr-slider li { display: inline-block; letter-spacing: normal; vertical-align: top; width: 30.6123%; max-width: 300px; margin: 0 1.0204%;}
#bnr-block .btn_prev,
#bnr-block .btn_next { display: none;}
}