/* ----------------------------------------------------------*/
#top_header{
    width:100%;
    position:relative;


}

#top_header img.top_ban{
    width:61%;
}
#top_header img.hero_point{
    width:39%;
}
#top_header img.tab{
    display:none;
}


#top_header img.help{
    position:absolute;
    left:92.5%;
    top:10%;
    margin:0 auto 0 auto;
    width:4%;
}
.hero_pt{
    position:absolute;
    margin:0 auto 0 auto;
    top:40%;
    text-align:right;
    width:100%;
    left:-4%;
}
.hero_pt img{
    width:5%;
}
#top_header .help{
    cursor:pointer;
}

#hp_hint-modal{
  letter-spacing:0.1em;
  line-height:1.5;
  text-align:justify;

  padding:5px;

}
#hp_hint-modal div{
    width:100%;
    text-align:center;
    margin-bottom:15px;

}
#hp_hint-modal div img{
    width:100%;
    margin:15px auto;
}


#hp_hint-modal span.title{
    font-weight:bold;
    font-size:large;
}


@media screen and (min-width : 768px) {

  #top_header{
        float:left;

  }
    #top_header img.top_ban{
        margin:10px 10px 0px 10px  ;
        width:25%;
    }
    #top_header img.hero_point{
        width:21%;
        float:right;
        margin:15px 10px 0px 10px;

    }
    #top_header img.tab{
        display:inline;
    }
    #top_header img.sp{
        display:none;
    }
    #top_header img.help{
        left:94%;
        top:8px;
        margin:15px auto 0px auto;
        width:20px;
    }
    .hero_pt{
        top:53%;
    }
    .hero_pt img{
        width:2.5%;
    }
    #hp_hint-modal div img{
        width:85%;
    }
}
/* ----------------------------------------------------------*/
/* 今日の検定 */
#quiz{
  width:100%;
  margin:10px auto 15px 0;
    padding:0;
    border:0;
    outline:0;

}

#quiz table .td-left span{
  background-color:#cc0033;
  color:#fff;
  padding:3px 5px ;
  border-radius: 3px;
  margin: 3px;
  letter-spacing: 0;
  white-space: nowrap;
  font-size:x-small;
}


#quiz table {
  width:100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color:#fff;


}
#quiz table td.td-right {
  text-align:left;
}
#quiz table .td-right {
  font-weight:bold;
}

#quiz table .td-right span{
  white-space: nowrap;
  padding: 3px 0px 3px 0px;
  font-size:x-small;
}

#marquee{
  overflow:hidden;
}
#marquee div{

  background-color:#fff;
  text-align:center;
  display:inline-block;
  white-space:nowrap;

  -moz-animation-duration: 15s;
  -moz-animation-name: marquee;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  -webkit-animation-duration: 15s;
  -webkit-animation-name: marquee;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -ms-animation-duration: 15s;
  -ms-animation-name: marquee;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  -o-animation-duration: 15s;
  -o-animation-name: marquee;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
@-webkit-keyframes marquee {
  from {margin-left: 100%; width: 100%; }
  to { margin-left: -100%; width: 100%; }
}
@-moz-keyframes marquee {
  from {margin-left: 100%; width: 100%; }
  to { margin-left: -100%; width: 100%; }
}
@-ms-keyframes marquee {
  from {margin-left: 100%; width: 100%; }
  to { margin-left: -100%; width: 100%; }
}
@-o-keyframes marquee {
  from {margin-left: 100%; width: 100%; }
  to { margin-left: -100%; width: 100%; }
}

@media screen and (min-width : 320px) {

  #quiz table .td-left span{
    font-size:xx-small;
  }
  #quiz table .td-center div{
    font-size:small;
  }
  #quiz table .td-right span{
    font-size:xx-small;
  }
}
@media screen and (min-width : 768px) {
  #quiz table .td-left span{
    font-size:medium;
  }
  #quiz table .td-center div{
    font-size:medium;
  }
  #quiz table .td-right span{
    font-size:medium;
  }

}

/* ----------------------------------------------------------*/
#top_info{
}
#top_info img{
  width:100%;
}
#top_info_atsume{
    width:100%;
    text-align:center;
}
#top_info_atsume img{
    width:99%;
}
@media screen and (min-width : 768px) {
    #top_info_atsume{
        float:left;
        width:55%;
        text-align:center;
  }
    #top_info_atsume img{
        width:98%;
    }
}
#top_info_etc{
   width:100%;
}
#top_info_etc img{
    width:49%;
    padding:0px 1px;
}

#top_info .ios{
  width:100%;
    text-align:center;

}
#top_info .ios img{
    width:95%;
}
.info_l{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and (min-width : 768px) {
    #top_info_etc{
        float:left;
        width:45%;
        text-align:center;

    }
    #top_info_etc img{
        width:168px;
        height:115px;
        line-height:115px;
        padding:0px 2px;

    }
    #top_info .ios {
        margin-top:10px;
    }
    #top_info .ios img{
        width:75%;
    }

}
/* ----------------------------------------------------------*/
#pickup{
    width:100%;
    margin:15px 0px;
}
#pickup img#pickup_ban{
    width:100%;
    margin-bottom:10px;
}
@media screen and (min-width : 768px) {
    #pickup{

    }

}
/* ----------------------------------------------------------*/
#pickup .list,
#pickup .list2
{
    border:#ccc 1px solid ;
    border-radius:3px;
    margin:3px;
    padding:5px;
    vertical-align: top;
    overflow: auto;


    letter-spacing:0.1em;
    line-height:1.1;

}
#pickup .list hr{
    margin:0px;
    padding:0px;
}
#pickup  .list img{
    width:100px;
    float: left;
    margin-right:10px;
}

#pickup .list2 img{
    width:100px;
    float: right;
    margin-left:10px;
}
#pickup .list .btn,
#pickup .list2 .btn{
    background: #c40002;
    color: #fff;

    border: 1px solid #a70006;
    padding: 5px 10px;
  display:inline-block;
  margin-top:3px;
  border-radius:3px;
    letter-spacing :2px;
    font-weight:bold;
    border-radius:3px;
    min-width:50%;

}
@media screen and (min-width : 768px) {
    #pickup .list,
    #pickup .list2{
        width:30%;
        float:left;
        min-height:275px;
        position:relative;
        text-align:center;

    }
    #pickup  .list img,
    #pickup  .list2 img
    {
        float: none;
        width:55%;
        padding:10px;
    }
    #pickup .list .btn,
    #pickup .list2 .btn{
        width:85%;
        position:absolute;
        bottom:2%;
        margin:0 auto;
        left:0px;
        right:0px;

    }


}


/* ----------------------------------------------------------*/
#info{
    width:100%;
    float:left;
    overflow: auto;
    text-align:center;
    margin:15px 0px;
}
#info img#info_ban{
   width:100%;
    margin-bottom:10px;
}
@media screen and (min-width : 768px) {
    #info{
        clear:both;
        float:left;
        width:100%;
    }
}
/* ----------------------------------------------------------*/
#info .list
{
    text-align:left;
    border:#ccc 1px solid ;
    border-radius:3px;
    margin:3px;
    padding:5px;
    vertical-align: top;
    font-size:small;
    background-image: url("../images/top_info_arrow.png");
    background-repeat:no-repeat;
    background-position:98% center;
    background-size:3%;
    letter-spacing :0.1em;
    line-height: 130%;
    position: relative;
}
#info table{
  width:100%;
  table-layout: fixed;
}
#info td{
  padding: 2px 3px;
}

@media screen and (min-width : 768px) {
  #info td{
    padding: 5px 10px;
  }

}

#info hr{
  height: 1px;
  background-color: #fff;
  border-top: 1px dotted #8c8b8b;

  width:85%;
  margin:2px auto;

}

#info .update_ymd{
  margin:auto;
  width:50px;
  height:50px;
  border-radius:5px;
  text-align:center;
  border:#444444 1.5px solid ;
  font-weight:bold;
  overflow:hidden;

}
#info .update_ymd .month{
  width:100%;
  text-align:center;
  color:#444444;
  padding-top:3px;
  font-size:8px;
  line-height:8px;
  vertical-align: bottom;
}
#info .update_ymd .day{
  width:100%;
  text-align:center;
  font-size:28px;
  line-height:28px;
  color:#444444;
    vertical-align: bottom;
}
#info .update_ymd .week{
  width:100%;
  text-align:center;
  vertical-align: top;
  font-size:10px;
  line-height:10px;
  color:#fff;
  padding:2px;
  background-color:#444444;
  vertical-align: top;

}
#info .tag{
  font-size:7pt;
  padding:3px 2px 3px 3px;
  font-weight:bold;
  vertical-align: text-bottom;

}
@media screen and (min-width : 768px) {
  #info .tag{
    font-size: medium;
    padding-right:10px;
  }
}
.tag-kabegami{
    border-left:solid 6px gold;

    color:gold;
}
.tag-zukan{

  border-left:solid 6px blue;
  color:blue;
}
.tag-quiz{
  border-left:solid 6px darkgreen;

  color:darkgreen;

}
.tag-stamp{
  border-left:solid 6px deeppink;

  color:deeppink;

}
.tag-game{
  border-left:solid 6px orangered;

  color:orangered;

}
.tag-news{
  border-left:solid 6px navy;

  color:navy;

}
.tag-special{
  border-left:solid 6px #800080;

  color:#800080;
}
.tag-oshirase{
  border-left:solid 6px #a70006;
  color:#a70006;
  font-weight:bold;
}
#info .btn{
    text-align:center;
    background-color: #00a0e9;
    color: #fff;

    padding: 15px 10px;
  display:inline-block;

  border-radius:3px;
  margin:3px auto;
  width:80%;
    font-size:medium;
    font-weight:bold;
    letter-spacing :10px;

}
/* ----------------------------------------------------------*/
#stamp{
    width:100%;
    text-align:center;
    margin:15px 0;
    overflow: auto;


}
#stamp img#stamp_ban{
   width:100%;
    margin-bottom:10px;
}
@media screen and (min-width : 768px) {
    #stamp{
        width:100%;
        float:left;
    }
}



#stamp .btn{
    text-align:center;
    background-color:#e4007f;
    color: #fff;

    padding: 15px 10px;
    display:inline-block;

    border-radius:3px;
    margin:3px auto;
    width:80%;
    font-size:medium;
    font-weight:bold;
    letter-spacing :10px;
    cursor:pointer;

}
#stamp_thums img{
    width:35%;
    margin:15px;
}
#stamp_thums img.img_r{
    display:none;
}
@media screen and (min-width : 768px) {
#stamp_thums img{
    width:20%;
    margin:15px;
}

    #stamp_thums img.img_r{
        display:inline;
    }
}



/* ----------------------------------------------------------*/
#app_push{
    width:100%;
    text-align:center;
    margin:10px 0px;

}
#app_push img{
    width:100%;
}
@media screen and (min-width : 768px) {
    #app_push{
        width:100%;
        float:left;
    }
    #app_push img{
        width:60%;
    }

}
/* ----------------------------------------------------------*/
#info-modal .heading{
  font-weight:bold;
  letter-spacing:0.1em;
  line-height:1.5;
  border-bottom:solid 2px #888;
}
#info-modal .text{
  line-height: 125%;
}
#info-modal .tag{
  vertical-align: middle;
  margin-bottom: 10px;
  padding-left:3px;
}

#info-modal .detail{
  margin:10px 0px;
}
#info-modal .detail .text{
  margin-left:10px;
}
#info-modal .tag  a{
  background-image: url("../images/top_info_arrow.png");
  background-repeat:no-repeat;
  background-position:left 55%;

  background-size:12%;

  font-size:small;
  font-weight:bold;
  color:#525252;
  padding-left:3%;
  margin-left:10px;

}
#info-modal .info_stamp_img{
  width:100%;
  text-align:center;
}
#info-modal .info_stamp_img img{
  max-width:30%;

}