@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;
}
a.s_btn:hover img{
    opacity: 1;
}
.sp{display: none;}
/*  ============================= header =============================  */
#anc_top{
    display: flex;
    justify-content: flex-end;
    width: 800px;
    margin: 0 0 10px;
    padding:0 20px 0 0;
}
#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{cursor: pointer;}
.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%;
}

/*  ============================= 号毎（vol69） ============================= */
.movie-bg{
    background-color: #fdf0ec;
    padding:30px 0;
}
.movie-wrap{
    position: relative;
    width: 90%;
    max-width: 720px;
    margin:0 5%;
    padding-top:50.625%;
}
.movie-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*  ============================= 他の記事を読む =============================  */
.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;/*2つの時200px、3つの時200px、4つの時170px、5つの時140px*/
    width:30%;/*3-5つの時80%*/
}
.other_wrap a:not(:last-of-type){
    margin-right:3%;/*2つの時3%、*3つの時3%、4つの時2%、5つの時1%*/
}

@media (max-width: 599px) {
    .other_wrap {
        padding-bottom: 30px;/*2つの時のみ*/
    }
}
/*  ============================= ページトップに戻る =============================  */


/*  ============================= 健康特集 ============================= */


/* =============================  present  ============================= */
.pre-mv{
    position: relative;
    z-index: 0;
}
.pre-btn-mv{
    display: block;
    position: absolute;
    bottom: 9.5%;
    max-width: 380px;
    width: 48%;
    left: 43%;
    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: 34%;
    z-index: 1;
}
.teiki{
    position: relative;
    z-index: 0;
}
.teiki .btn-teiki{
    display: block;
    position: absolute;
    bottom: 8%;
    max-width: 640px;
    width:80%;
     left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    text-align: center;
}
/*  ============================= バナー============================= */
.bnr{
    position: relative;
    z-index: 0;
}

/*  ============================= 会員登録============================= */
.preoubo{
    margin: auto;
    width: 85%;
}

/*  ============================= @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;}
    .head-line{
        display: grid;
        justify-items: center;
        align-items: center;
        justify-content: center;
     }
     .line-btn{
        max-width: 120px;
     }
     #anc_top{
        padding: 0 1% 0 1%;
     }
}