@charset "utf-8";
/* ======================================================
* style.css
* ------------------------------------------------------
  ・全体
  ・header
  ・footer
  ・#contents
  ・accordion
  ・modal
  ・他の記事を読む
  ・present
  ・backnumber
  ・会員登録
  ・個別スタイル
   - @media screen and (min-width: 599px)

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

/* =============================  全体  ============================= */
body{
    background: #fdfcf6;
}
html{
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}
#wrapper{
    max-width:800px;
    width:100%;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    box-shadow:0 0 5px 0 #ccc;
}
a:hover img{
    opacity: .85;
}
.sp{display: none;}
/*  ============================= header =============================  */
#anc_top{
    display: flex;
    justify-content: flex-end;
    width: 800px;
    margin: 0 0 10px;
    padding:0 20px;
}
#headlogo{
    display: flex;
    justify-content: space-between;
    width: 800px;
    padding:0 20px;
}
#headlogo img{
    height: 78px;
}
/*  ============================= footer  ============================= */
#footer{
    width: 100%;
}
#news{
    width: 640px;
}
#line{
    display: flex;
    justify-content: flex-end;
    width: 640px;
    margin-top: 30px;
}
#tab_cont{
    width: 600px;
}
#news td{
    font-size: 12px;
    line-height: 20px;
}
#tab_cont td{
    font-size: 12px;
    line-height: 20px;
    padding:0 10px;
}
/*  ============================= #contents =============================  */
#content img{
    display: block;
    vertical-align:top;
    width:100%;
}
/*  ============================= accordion =============================  */
.banner + .all_item{display:none;}
/* =============================  modal =============================  */
.modal_wrap{
    position: relative;
}
.modal_wrap .modal_open{
    max-width: 690px;
    width:50%;
    /* position: absolute; */
    left: 42%;
    bottom: 6%;
}
.modal_wrap .modal_open.mdl_prof{
    bottom: 13%;
    max-width: 470px;
    width: 50%;
    position: absolute;
    left: 37%;
}
/*  ============================= 他の記事を読む =============================  */
.other_wrap{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding:10px 20px 50px;
    background: #fffae0 url("../images/another-bg.jpg");
    background-size: cover;
    border-bottom: 3px #fff solid;
}
.other_wrap a{
    display: block;
    max-width: 200px;/*3つの時200px、4つの時170px、5つの時140px*/
    width:80%;
}
.other_wrap a:not(:last-of-type){
    margin-right:3%;/*3つの時3%、4つの時2%、5つの時1%*/
}
/* =============================  present  ============================= */
.pre-mv{
    position: relative;
    z-index: 0;
}
.pre-btn-mv{
    display: block;
    position: absolute;
    bottom: 6%;
    max-width: 380px;
    width: 48%;
    left: 7%;
    z-index: 1;
}
.pre-link{
    position: relative;
    z-index: 0;
}
.pre-btn-link{
    display: block;
    position: absolute;
    bottom: 17%;
    max-width: 325px;
    width: 40%;
    left: 30%;
    z-index: 1;
}
.teiki{
    position: relative;
    z-index: 0;
}
.teiki .btn-teiki{
    display: block;
    position: absolute;
    bottom: 8%;
    max-width: 640px;
    width:80%;
    left: 10.5%;
    z-index: 1;
}
/*  ============================= backnumber============================= */


/*  ============================= 会員登録============================= */
.preoubo{
    margin: auto;
    width: 85%;
}
/*  ============================= 号毎（vol55） ============================= */

.modal_wrap .modal_open.mdl_strech{
    width: 80%;
    bottom: 4%;
    max-width: 640px;
    display: block;
    left: 10%;
    position: absolute;
}
.modal_wrap .modal_open.mdl_strech.mdl_strech01{
    bottom: 49.5%;
}
.modal_wrap .modal_open.mdl_strech.mdl_strech02{
    bottom: 4%;
}
.modal_wrap .modal_open.mdl_strech.mdl_strech03{
    bottom: 50%;
}
.modal_wrap .modal_open.mdl_strech.mdl_strech04{
    bottom: 3.5%;
}
.modal_wrap .modal_open.mdl_strech.mdl_strech05{
    bottom: 59%;
}
.modal_wrap .modal_open.mdl_strech.mdl_strech06{
    bottom: 23.8%;
}


.strech_anchor_wrap{
    position: relative;
}
.strech_anchor{
    display: block;
    position: absolute;
    max-width: 640px;
    width:80%;
    z-index: 1;
    margin-bottom:20px;
    left: 10%;
}
.strech_anchor.strech_anchor01{
    top:62%;
}
.strech_anchor.strech_anchor02{
    top:75%;
}
.strech_anchor.strech_anchor03{
    top:88%;
}

.scroll_bar{
    background-color: #f0f0f0;
    overflow-y: scroll;

 }
 .scroll_bar::-webkit-scrollbar{
    width: 10px;
 }
 .scroll_bar::-webkit-scrollbar-track{
    background-color: #ccc;
 }
 .scroll_bar::-webkit-scrollbar-thumb{
    background-color: #17585d;
 }
 .scroll_bar{
    overflow-y: scroll;
 }



/*  ============================= @media (max-width: 599px)  ============================= */
@media (max-width: 599px) {
    .sp{display: block;}
    .pc{display: none;}
    #anc_top{
        width: 100%;
    }
    #headlogo{
        width: 100%;
        padding:0;
    }
    #headlogo img{
        height: 50px;
    }
    #footer{
        width: 100%;
    }
    #news{
        width: 100%;
    }
    #line{
        width: 100%;
        margin-top: 30px;
        justify-content: center
    }
    #tab_cont{
        width: 100%;
    }
    #direct_top img{
        width: 90%;
        display: block;
        margin: auto;
    }
    .banner{
        width: 100%;
    }
    .block img{
        width: 100%;
    }
    .block p{
        width: 90%;
        padding:10px 0;
    }
    .fbt{
        width: 33%;
    }
    .prelink{
        width: 100%;
        background-color: #fff;
    }
    .preoubo{
        margin: 10px auto;
        width: 100%;
    }
    .preoubo img{
        width: 93%;
    }
    .inner_wrap{overflow: hidden;}
}