/* テーブルマークなるほどクイズ 210501 */

/* common setting */

/* 画像リンク */
#main a:hover img {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter:"alpha( opacity=70 )";
    transition:0.5;
    transition-duration:0.3s;
}

body {
    position:relative;
    overflow-x:hidden;
}

#navHeader {
    margin-bottom:0 !important;
    z-index:100;
}

/* common setting END */



/* PCレイアウト */
/*-------------------------------------------*/
#contents {
    overflow-x:hidden;
    position:relative;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:auto;
    background-image:url("../images/bg_2000.png");
    line-height:1.8;
    font-size:1.4em;
    color:#000000;
}
#contents img {
    max-width:100%;
    height:auto;
}

#contents *,
section * {box-sizing:border-box;}

.img_pc {}
.img_sp {display:none;}

br.pc {}
br.sp {display:none;}

section img {
    max-width:100%;
    height:auto;
}


/* main block */
.main_block {
    position:relative;
    margin:0 auto 40px;
}
.main_block .effect {
    position:absolute;
    top:-14%;
    left:0;
    right:0;
    width:1200px;
    margin:auto;
    z-index:0;
}
.main_block h1,
.main_block h2,
.main_block p.period {
    position:relative;
    z-index:1;
}

.main_block h1 {
    max-width:760px;
    margin:0 auto 1em;
}
.main_block p.period {
    max-width:600px;
    margin:0 auto 8%;
}
.main_block h2 {
    max-width:600px;
    margin:0 auto 1em;
}
.main_block p.quiz {
    margin:0 auto 1em;
    line-height:2.0;
    font-size:1.0em;
    font-weight:bold;
    font-family:inherit;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ ゴシック',sans-serif;
}
.main_block p.quiz2 {
    margin:0 auto 1em;
    line-height:2.5;
    font-size:1.4em;
    font-weight:bold;
    font-family:inherit;
}
.main_block .btn_hint {
    max-width:600px;
    margin:0 auto;
}

.main_block .illust1 {
    max-width:316px;
    margin:auto;
    transform:translateX(100%);
}



/* h2 */
.prize_block h2,
.period_block h2 {
    display:flex;
    align-items:center;
    width:90%;
    max-width:950px;
    margin:0 auto 1em;
}
.prize_block h2 img {width:114px;}
.period_block h2 img {width:412px;}

.prize_block h2:before,
.period_block h2:before,
.prize_block h2:after,
.period_block h2:after {
    flex-grow:1;
    height:1px;
    background-color:#80804d;
    content:"";
}
.prize_block h2:before,
.period_block h2:before {
    margin-right:1.5em;
}
.prize_block h2:after,
.period_block h2:after {
    margin-left:1.5em;
}


/* prize block */
.prize_block {
    background:#fffea7;
    background:-moz-linear-gradient(top, #ffffff 0%, #fffea7 100%);
    background:-webkit-linear-gradient(top, #ffffff 0%,#fffea7 100%);
    background:linear-gradient(to bottom, #ffffff 0%,#fffea7 100%);
}
.prize_block p {
    position:relative;
    margin:0 auto;
    padding-bottom:40px;
    font-size:1.8em;
    font-weight:bold;
}
.prize_block p span.box {
    display:inline-block;
    background-repeat:no-repeat;
    background-position:left center;
    background-image:url("../images/illust_box.png");
    background-size:120px;
    padding:50px 0 50px 160px;
}
.prize_block p span.amazon {
    display:inline-block;
    position:relative;
    text-align:center;
}
.prize_block p span.type {
    display:inline-block;
    position:absolute;
    top:2em;
    left:0;
    right:0;
    text-align:center;
    font-size:0.6em;
}
@media all and (-ms-high-contrast:none){
  .prize_block p ruby rt { transform:translateY(3em); } /* IE10- */
}

/* period block */
.period_block {
    background-color:#ffff88;
    padding:50px 0;
}
.period_block p {
    margin-bottom:1.5em;
    font-size:1.4em;
    font-weight:bold;
}
.period_block p strong {
    font-size:1.6em;
}
.period_block .btn_apply {
    width:90%;
    max-width:420px;
    background-color:#ff5500;
    margin:0 auto;
    padding:0 60px;
    border-radius:54px;
}
.period_block .btn_apply:hover {
    background-color:#ff8826;
}
.period_block .btn_apply img {
    margin:30px 0;
}



/* sns block */
.sns_block {
    background:#fffea7;
    background:-moz-linear-gradient(top, #fffea7 0%, #ffffff 80%);
    background:-webkit-linear-gradient(top, #fffea7 0%,#ffffff 80%);
    background:linear-gradient(to bottom, #fffea7 0%,#ffffff 80%);
    padding:50px 0;
}
.sns_block h2 {
    width:90%;
    max-width:420px;
    margin:0 auto 30px;
}
.sns_block ul {
    width:90%;
    max-width:420px;
    background-color:#ffffff;
    margin:0 auto 60px;
    padding:15px;
    border-radius:8px;
}
.sns_block ul li {
    display:inline-block;
    width:48px;
}
.sns_block ul li:nth-child(2) {
    margin:0 10%;
}

.sns_block  .illust2 {
    width:60%;
    max-width:320px;
    margin:0 auto;
}



/* 1200px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 1200px) {

.main_block .effect {
    top:-6%;
    width:100%;
}


}
/*-------------------------------------------*/
/* 1500px以下 END */


/* 949px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 949px) {

/* common setting */

img, object, embed, video {
    max-width:100%;
    height:auto;
}

#navHeader {
    height:20px;
}


/* common setting END */

#contents {
    background-size:contain;
    background-image:url("../images/bg_950.png");
}

.main_block .effect {
    top:0;
}

.prize_block p {
    font-size:1.6em;
}


}
/*-------------------------------------------*/
/* 949px以下 END */



/* 768px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 768px) {



.prize_block p {
    line-height:1.8;
}
.prize_block p b {
    display:block;
    margin-top:0.5em;
}


}
/*-------------------------------------------*/
/* 768px以下 END */



/* 750px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 750px) {

/* common setting */

#navHeader {
    height:auto;
}

.pagetop_sp {z-index:9999;}


/* common setting END */

.img_pc {display:none;}
.img_sp {display:block;}



#contents {
    background-image:url("../images/bg_750.png");
}


.main_block {
    padding-bottom:20%;
}
.main_block h1 {
    margin:0 auto 2em;
}
.main_block p.period {
    margin:0 auto 16%;
}
.main_block p.quiz {
    letter-spacing: -0.2em
    width:95%;
    margin:0 auto 1em;
}
.main_block .btn_hint {
    width:90%;
    margin:0 auto;
}
.main_block .illust1 {
    width:50%;
    margin-left:auto;
    transform:none;
}

.prize_block p span.box {
    background-position:center top;
    background-size:36%;
    padding:140px 0 5%;
}

.prize_block h2 img {width:19.06%;}
.period_block h2 img {width:45.2%;}
.prize_block h2:before,
.period_block h2:before {
    margin-right:0.5em;
}
.prize_block h2:after,
.period_block h2:after {
    margin-left:0.5em;
}

.prize_block p span {
    background-size:26%;
}
.prize_block p {
    font-size:1.6em;
}

.sns_block ul li {
    width:18%;
}


}
/*-------------------------------------------*/
/* 750px以下 END */




/* 640px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 640px) {


.main_block p.quiz {
    letter-spacing: -0.4em
    font-size:0.8em;
    width:96%;
}
.main_block p.quiz br.pc {
    display:none;
}

.prize_block p {
    font-size:1.4em;
}


.period_block p {
    font-size:1.2em;
}
.period_block p strong {
    font-size:1.4em;
}
.prize_block p span.box {
    padding:120px 0 5%;
}

.prize_block p span.amazon {
}
.prize_block p span.type {
}

}
/*-------------------------------------------*/
/* 640px以下 END */



/* 420px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 420px) {


.main_block {
    padding-bottom:0;
}

.main_block p.quiz {
    font-size:0.9em;
}

}
/*-------------------------------------------*/
/* 420px以下 END */



/* 375px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 375px) {


.prize_block p {
    font-size:1.2em;
}

.period_block p {
    font-size:1.2em;
}
.period_block p strong {
    font-size:1.2em;
}
.prize_block p span.box {
    padding:100px 0 5%;
}


}
/*-------------------------------------------*/
/* 375px以下 END */



/* 320px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 320px) {


.main_block p.quiz {
    font-size:1.0em;
}

.prize_block p {
    font-size:1.0em;
}
.prize_block p span.box {
    padding:90px 0 3%;
}

.period_block p {
    font-size:1.0em;
}

}
/*-------------------------------------------*/
/* 320px以下 END */