/* =================================
about CSS
================================= */

@media all and (min-width: 768px) {
.time{width:760px;margin:0px auto;}
div.time h3{
   color: #d70a30;
    line-height: 1.35;
    text-shadow: 1px 1px 2px #bfbfbf;
    font-size:240%;
}

.kyokugen{float:left;margin-left:10px;width:300px;height:60px;background-image:url(../img/kyokugen2017.png);background-repeat:no-repeat;text-indent:-9999px;}
.card-01{margin:15px auto;width:670px;height:180px;background-image:url(../img/card-01.jpg);background-repeat:no-repeat;text-indent:-9999px;}
.card-02{margin:15px auto;width:670px;height:180px;background-image:url(../img/card-02.jpg);background-repeat:no-repeat;text-indent:-9999px;}
.card-03{margin:15px auto;width:670px;height:180px;background-image:url(../img/card-03.jpg);background-repeat:no-repeat;text-indent:-9999px;}
}

@media all and (max-width: 767px) {
    .time{width:760px;margin:0px auto 45px;}
div.time h3{
   color: #d70a30;
    line-height: 1.35;
    text-shadow: 1px 1px 2px #bfbfbf;
    font-size:190%;
}
.kyokugen{height:0px;padding-top:10%;background-image:url(../img/kyokugen2017.png);background-repeat:no-repeat;background-size: contain;text-indent:-9999px;}
.card-01{position:relative;padding-top:30%;height:0px;background-image:url(../img/card-01.jpg);background-repeat:no-repeat;background-size: contain;text-indent:-9999px;}
.card-02{position:relative;padding-top:30%;height:0px;background-image:url(../img/card-02.jpg);background-repeat:no-repeat;background-size: contain;text-indent:-9999px;}
.card-03{position:relative;padding-top:30%;height:0px;background-image:url(../img/card-03.jpg);background-repeat:no-repeat;background-size: contain;text-indent:-9999px;}
}


div.txt_area{
    padding: 0px 0 30px;
    margin: 0 0px 30px;
}

div.txt_area h2{
   color: #d70a30;
    line-height: 1.35;
     text-align: center;
    text-shadow: 1px 1px 2px #bfbfbf;
}

@media all and (min-width: 768px) {
div.txt_area h2{
    margin:10px 0px;
    font-size: 280%;
}
div.txt_area p{
    font-size: 93.8%;
      line-height: 2.5;
      margin-bottom:15px;
      border-bottom: 1px solid #d70a30;
}
div.areaR{
    margin: 0px 0 15px 20px;
    float: right;
}
div.areaL{
    margin: 0px 20px 15px 0;
    float: left;
}
div.pics span{
    width: 230px;
    height: 210px;
    display: block;
    background-repeat: no-repeat;
    border: 1px solid #d70a30;
    background-color: #d70a30;
    background-size: 230px 210px;
}
div.wide_pics span{
    width: 920px;
    height: 307px;
    display: block;
    background-repeat: no-repeat;
    border: 1px solid #d70a30;
    background-color: #d70a30;
    background-size: 920px 307px;
    margin: 30px 0 20px;
}

}
@media all and (max-width: 767px) {
div.txt_area h2{
    margin-bottom: 15px;
    font-size: 180%;
    margin:10px 0px;
}
div.txt_area{
    padding: 0px 0 15px;
    margin: 0 0px 15px;
}
div.txt_area p{
    font-size: 87.5%;
      line-height: 2.5;
     border-bottom: 1px solid #d70a30;
}
div.pics span{
    margin: 0 auto 15px;
    width: 270px;
    height: 172px;
    background-size: 270px 172px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #d70a30;
    background-color: #d70a30;
}
div.wide_pics span{
    margin: 15px auto 10px;
    width: 270px;
    height: 89px;
    background-size: 270px 89px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #d70a30;
    background-color: #d70a30;
}
}

/*  checkitout_area
============================== */
div.checkitout_area h2{
    color: #002e7c;
    line-height: 1.35;
    text-shadow: 1px 1px 2px #bfbfbf;
    text-align: center;
}
@media all and (min-width: 768px) {
div.checkitout_area h2{
    margin-bottom: 20px;
    font-size: 162.5%;
}
}
@media all and (max-width: 767px) {
div.checkitout_area h2{
    margin-bottom: 15px;
    font-size: 100%;
}
}