/* info css */

/* 記事詳細ページ */

/* 旧HTML */
/* 旧HTML：<article class="info_body page_old_format"> */

article.page_old_format {

    /* =========================
   記事全体
   ========================= */

    &.info_body {
        width: 1008px;
        margin: 0 auto;
    }

    @media screen and (max-width: 768px) {
        &.info_body {
            width: 90vw;
        }
    }

    /* =========================
   タイトルエリア
   ========================= */

    & .info_label {
        display: flex;
        margin-bottom: 46px;
    }

    /* clearfix（HTMLに .cf がある前提で残す） */
    & .cf::before,
    & .cf::after {
        content: " ";
        display: table;
    }

    & .cf::after {
        clear: both;
    }

    /* ※ *zoom は無効化されがちなので入れない（必要なら zoom: 1;） */
    /* & .cf { zoom: 1; } */

    /* 日付 */

    & .date_area {
        display: inline-block;
        background-color: #222222;
        height: 55px;
        line-height: 55px;
        font-size: 0;
        padding: 0 12px 0 15px;
        float: left;
        margin-right: 18px;
    }

    & .date_area span {
        vertical-align: middle;
    }

    & .date_area span.date {
        color: #23b7fe;
        font-size: 3.6rem;
        transform: scale(0.8, 1);
        margin-right: 5px;
    }

    & .date_area span.date span {
        display: inline-block;
        margin: 0 0.08em 0.1em 0.16em;
    }

    & .date_area span.week {
        color: #23b7fe;
        font-size: 1.4rem;
        font-weight: bold;
        transform: scale(0.8, 1);
        margin-right: 5px;
    }

    & .date_area span.count {
        color: #222222;
        background-color: #e9f8ff;
        font-size: 1.5rem;
        padding: 0 4px;
        border-radius: 3px;
        display: inline-block;
        min-width: 25px;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    & .date_area span.slash {
        display: inline-block;
        width: 30px;
        height: 55px;
        background: url(../common_2017/info/date.png) no-repeat;
        background-size: auto 100%;
    }

    & .date_area span.year {
        color: #fff;
        transform: scale(0.8, 1);
        font-size: 1.6rem;
    }

    /* カテゴリー */

    & dl.cate_area {
        flex: 1;
        float: left;
        padding-top: 22px;
        color: #666666;
    }

    & dl.cate_area dt,
    & dl.cate_area dd {
        display: inline-block;
    }

    & dl.cate_area dd ul li {
        display: inline-block;
        background-color: #e9f8ff;
        padding: 0 5px 0 3px;
        border: 1px solid #c3dce7;
        border-radius: 3px;
        margin-right: 3px;
    }

    /* タイトル */

    & h2.info_ttl {
        min-height: 93px;
        box-sizing: border-box;
        padding: 0 15px 20px;
        font-size: 2.8rem;
        border-bottom: 1px solid #bfbfbf;
        font-weight: bold;
        margin-bottom: 18px;
        font-feature-settings: "palt";
    }

    /* =========================
   最新の一覧へ
   ========================= */

    & .more_link {
        display: block;
        text-align: right;
        margin-bottom: 25px;
    }

    & .more_link a {
        display: inline-block;
        padding: 3px 7px 2px 25px;
        background: url(../common_2017/info/ico_prev.png) 10px center no-repeat #f2f3f0;
        border-radius: 5px;
        color: #111111;
        transition: all 0.4s ease;
    }

    & .more_link a:hover {
        background: url(../common_2017/info/prev_active.png) 10px center no-repeat #23b7fe;
        color: #fff;
    }

    /* =========================
   記事本文
   ========================= */

    & section.info_dtl {
        font-size: 1.6rem;
        line-height: 1.6em;
        margin-bottom: 90px;
    }

    & section.info_dtl p {
        margin-bottom: 1.4em;
        word-wrap: break-word;
        font-size: 1.6rem;
        line-height: 2.0;
    }

    & section.info_dtl h5 {
        padding: 6px 0 6px 8px;
        border-left: 5px solid #23b7fe;
        font-feature-settings: "palt" 1;
        letter-spacing: 0.05em;
        clear: both;
        font-weight: bold;
        font-size: 2.0rem;
        margin-top: 1.6em;
        margin-bottom: 0.4em;
    }

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

    /* =========================
   関連するお知らせ
   （旧HTML：aside#relevance.info_list > section.info_list）
   ========================= */

    & #relevance h4.ttl_h4 {
        display: inline-block;
        height: 32px;
        line-height: 32px;
        padding-right: 26px;
        background: url(../common_2017/info/h3.png) right center no-repeat;
        font-size: 1.8rem;
        color: #222222;
        font-weight: bold;
        margin-bottom: 15px;
    }

    & #relevance ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* 2017の .info_list li（高さ固定）を旧HTML内だけで再現 */
    & #relevance.info_list li {
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 15px;
    }

    & #relevance.info_list li:last-child {
        margin-bottom: 0;
    }

    & #relevance.info_list li a {
        color: inherit;
    }

    & #relevance.info_list li a:hover {
        text-decoration: underline;
    }

    /* =========================
   SP
   ========================= */

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

        & .info_label {
            margin-bottom: 20px;
        }

        & .date_area {
            height: 40px;
            line-height: 40px;
        }

        & .date_area span.date {
            font-size: 20px;
            font-size: 6.25vw;
            /* 20px */
        }

        & .date_area span.week {
            font-size: 12px;
            font-size: 3.75vw;
            /* 12px */
        }

        & .date_area span.count {
            font-size: 12px;
            font-size: 3.75vw;
            /* 12px */
            min-width: 20px;
            height: 15px;
            line-height: 15px;
        }

        & .date_area span.slash {
            width: 20px;
            height: 40px;
        }

        & .date_area span.year {
            font-size: 14px;
            font-size: 4.375vw;
            /* 14px */
        }

        & .info_label dl.cate_area {
            display: none;
        }

        & h2.info_ttl {
            font-size: 20px;
            font-size: 6.25vw;
            /* 20px */
            min-height: auto;
            padding-left: 0;
            margin-bottom: 20px;
        }

        & section.info_dtl {
            font-size: 14px;
            font-size: 4.375vw;
            /* 14px */
            margin-bottom: 30px;
        }

        & section.info_dtl p {
            font-size: 4.0625vw;
            line-height: 1.6;
        }
    }

}

/*  */

/* =========================
     見出しエリア
     ========================= */
.box_info_ttl {

    & .info_label {
        display: flex;
        margin-bottom: 46px;
    }

    & .date_area {
        display: inline-block;
        background-color: #222;
        height: 55px;
        line-height: 55px;
        font-size: 0;
        padding: 0 12px 0 15px;
        float: left;
        margin-right: 18px;
    }

    & .date_area span {
        vertical-align: middle;
    }

    & .date_area span.date {
        color: #23b7fe;
        font-size: 3.6rem;
        transform: scale(0.8, 1);
        margin-right: 5px;
    }

    & .date_area span.date span {
        display: inline-block;
        margin: 0 0.08em 0.1em 0.16em;
    }

    & .date_area span.week {
        color: #23b7fe;
        font-size: 1.4rem;
        font-weight: bold;
        transform: scale(0.8, 1);
        margin-right: 5px;
    }

    & .date_area span.count {
        color: #222;
        background-color: #e9f8ff;
        font-size: 1.5rem;
        padding: 0 4px;
        border-radius: 3px;
        display: inline-block;
        min-width: 25px;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    & .date_area span.slash {
        display: inline-block;
        width: 30px;
        height: 55px;
        background: url(../common_2017/info/date.png) no-repeat;
        background-size: auto 100%;
    }

    & .date_area span.year {
        color: #fff;
        transform: scale(0.8, 1);
        font-size: 1.6rem;
    }

    & dl.cate_area {
        flex: 1;
        float: left;
        padding-top: 22px;
        color: #666;
    }

    & dl.cate_area dt,
    & dl.cate_area dd {
        display: inline-block;
    }

    & dl.cate_area dd ul li {
        display: inline-block;
        background-color: #e9f8ff;
        padding: 0 5px 0 3px;
        border: 1px solid #c3dce7;
        border-radius: 3px;
        margin-right: 3px;
    }

    & h2 {
        min-height: 93px;
        padding: 0.8em 15px 20px;
        font-size: 2.8rem;
        font-weight: bold;
        margin-bottom: 18px;
        font-feature-settings: "palt";
    }

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

        & .info_label {
            margin-bottom: 20px;
        }

        & .date_area {
            height: 40px;
            line-height: 40px;
        }

        & .date_area span.date {
            font-size: 20px;
            font-size: 6.25vw;
            /* 20px */
        }

        & .date_area span.week {
            font-size: 12px;
            font-size: 3.75vw;
            /* 12px */
        }

        & .date_area span.count {
            font-size: 12px;
            font-size: 3.75vw;
            /* 12px */
            min-width: 20px;
            height: 15px;
            line-height: 15px;
        }

        & .date_area span.slash {
            width: 20px;
            height: 40px;
        }

        & .date_area span.year {
            font-size: 14px;
            font-size: 4.375vw;
            /* 14px */

        }

        & .info_label dl.cate_area {
            display: none;
        }

        & h2 {
            font-size: 20px;
            font-size: 6.25vw;
            /* 20px */
            min-height: auto;
            padding-left: 0;
        }
    }
}

/* =========================
     記事本体
     ========================= */
article.info_body {
    width: 1008px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    article.info_body {
        width: 90vw;
    }
}

/* カテゴリー（本文上） */
article.info_body dl.cate_area {
    display: none;
}

@media screen and (max-width: 768px) {
    article.info_body dl.cate_area {
        display: block;
        text-align: right;
        font-size: 12px;
        font-size: 3.75vw;
        /* 12px */
        margin-bottom: 20px;
    }
}

/* 最新の一覧へ */
article.info_body .more_link {
    text-align: right;
    margin-bottom: 25px;
}

article.info_body .more_link a {
    display: inline-block;
    padding: 3px 7px 2px 25px;
    background: url(../common_2017/info/ico_prev.png) 10px center no-repeat #f2f3f0;
    border-radius: 5px;
    color: #111;
}

article.info_body .more_link a:hover {
    background: url(../common_2017/info/prev_active.png) 10px center no-repeat #23b7fe;
    color: #fff;
}

/* 本文 */
section.box_info_main {
    font-size: 1.6rem;
    margin-bottom: 90px;
}

section.box_info_main p {
    font-size: 1.6rem;
    line-height: 2;
    margin-bottom: 1.4em;
}

/* =========================
     見出し
     ========================= */
section.box_info_main h3 {
    padding-left: 8px;
    border-left: 5px solid #23b7fe;
    font-size: 2.0rem;
    margin-top: 60px;
    margin-bottom: 20px;
}

section.box_info_main h4 {
    font-size: 2.2rem;
    color: #23b7fe;
    margin-top: 2.4em;
}

/* =========================
     関連するお知らせ
     ========================= */
aside#relevance {

    & h4.ttl_h4 {
        display: inline-block;
        height: 32px;
        line-height: 32px;
        padding-right: 26px;
        background: url(../common_2017/info/h3.png) right center no-repeat;
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 20px;
    }

    & ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    & li {
        display: flex;
        gap: 12px;
        font-size: 1.4rem;
        margin-bottom: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: auto;
        line-height: 1.4;
        color: #1b8bc1;
    }

    & li a {
        color: #222;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & li a:hover {
        text-decoration: underline;
    }
}




/*  */