@charset "utf-8";


/* ==================================================================
    information.css

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

/* ==================================================================
   ■ 共通指定
=================================================================== */
.contents .text._s {
    margin-bottom: 0;
}
.contents .text._l {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.contents .asterisk {
    margin-top: 5px;
}

.contents .buttonStyle.light-blue {
    max-width: 348px;
    margin: 40px 0 0;
}
    .contents .buttonStyle.light-blue a {
        width: 100%;
        font-size: 1.6rem;
        padding: 17px 32px;
        text-align: center;
    }
    .contents .buttonStyle.light-blue a:hover {
        opacity: 1;
    }
    .contents p.link a {
        color: #002C6E;
        text-decoration: underline;
    }

/* ==================================================================
   ■ index ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#information .accent {
    height: 200px;
    background-image: none;
    margin-bottom: 20px;
}
#information .accent .heading {
    margin-bottom: 0;
}

/* --------------------------------
   □ 大枠
-------------------------------- */
/* ◇ wrapper
-------------------------------- */
.wrapper {
    align-items: inherit;
    max-width: 1244px;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
}

/* ◇ tabArea
-------------------------------- */
.tab-list {
    border-bottom: 1px solid #B1B1B1;
    margin-bottom: 30px;
}
.tab-item {
    width: calc( 100% / 7);
    color: #B1B1B1;
    font-size: 2.0rem;
    line-height: 1.2;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    transition: .4s ease-in-out;
}
.tab-item:hover,
.tab-item.is-active {
    color: #002C6E;
    position: relative;
}
    .tab-item:hover:after,
    .tab-item.is-active:after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #002C6E;
        animation: panel-show .9s ease-in-out forwards;
    }
.tab-content {
    display: none;
    width: 100%;
    max-width: 1244px;
    margin: auto;
}
    .tab-content.is-active {
        display: block;
        animation: panel-show .9s ease-in-out forwards;
    }
.tab-content .subsection {
    padding-top: 30px;
}
    .tab-content .subsection:not(:last-child) {
        margin-bottom: 60px;
    }

    @keyframes panel-show {
        from {
        opacity: 0;
        }
        to {
        opacity: 1;
        }
    }

/* --------------------------------
   □ info
-------------------------------- */
#info {
    padding-top: 0;
}
#info_list {
    border-top: none;
    margin-bottom: 50px;
}


/* ==================================================================
   ■ インフォメーション詳細 ページ detail
=================================================================== */

/* ◇ mainArea
-------------------------------- */
.contents .mainArea {
    width: 73%;
    max-width: 900px;
    padding-bottom: 100px;
}
.contents .mainArea section {
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 60px 0;
    margin: 0 auto;
}
    .contents .mainArea section:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }
.contents .mainArea section.wide .container {
    padding: 0 96px 0 0;
    margin: 0 auto;
}
.contents .mainArea section p.date {
    font-size: 1.4rem;
    letter-spacing: 0;
    color: #B1B1B1;
    text-align: left;
}
    .contents .mainArea section p.date .cat {
        color: #fff;
        background-color: #002C6E;
        margin-right: 1em;
        padding: 2.5px 11px;
        min-width: 81px;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
    }

        .contents .mainArea section p.date .cat.bridal {
            background: #7993BA;
        }
        .contents .mainArea section p.date .cat.canal {
            background: #111111;
        }
        .contents .mainArea section p.date .cat.eau {
            background: #E1BC48;
        }
        .contents .mainArea section p.date .cat.rugiada {
            background: #6B6B6B;
        }
        .contents .mainArea section p.date .cat.cofl {
            background: #9B9B9B;
        }
        .contents .mainArea section p.date .cat.others {
            background: #CCCCCC;
        }

.contents .mainArea section .lv3.title {
    font-size: 2.6rem;
    letter-spacing: 0;
    line-height: 1.8;
    margin-bottom: 30px;
}

.contents .mainArea dl.share {
    margin-bottom: 30px;
}
    .contents .mainArea dl.share dt {
        font-size: 1.3rem;
        padding-right: 10px;
    }
    .contents .mainArea dl.share dd:not(:last-child) {
        padding-right: 10px;
    }

.contents .mainArea section p.image {
    margin-bottom: 50px;
}
.contents .mainArea section .text._s {
    color: #808080;
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.contents .mainArea section .text._s + .lv4 {
    margin-top: 40px;
}

/* ◇ subArea
-------------------------------- */
.detail .contents {
    overflow: inherit; /* sticky */
}
.contents .subArea {
    min-width: 348px;
    width: 27%;
    padding-bottom: 100px;
}
.contents .subArea .sub-fixed {
    position: -webkit-sticky;/*Safari*/
    position: sticky;
    top: 140px;
}
.contents .subArea h3.lv3 {
    font-size: 1.8rem;
    letter-spacing: 0;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}
.contents .subArea section + section {
    margin-top: 50px;
}

/* #sub_articles 同じカテゴリーのその他の記事 */
.contents .subArea #sub_articles ul.list {
    margin-bottom: 10px;
}
.contents .subArea #sub_articles ul.list li dl {
    padding: 20px 0;
    border-bottom: 1px solid #E0E0E0;
}
    .contents .subArea #sub_articles ul.list li:first-child dl {
        border-top: 1px solid #E0E0E0;
    }
.contents .subArea #sub_articles ul.list li dt {
    width: 24%;
    min-width: 81px;
    margin-right: 15px;
    margin-bottom: 0;
    aspect-ratio: 1 / 1;
}
.contents .subArea #sub_articles ul.list li dd {
    width: 76%;
}
    .contents .subArea #sub_articles ul.list li dd .text {
        font-size: 1.4rem;
        letter-spacing: 0;
        line-height: 1.4;
        margin-bottom: 5px;
    }
    .contents .subArea #sub_articles ul.list li dd .date {
        font-size: 1.3rem;
        color: #B1B1B1;
        margin-bottom: 0;
    }

/* #sub_category カテゴリー一覧 */
.contents .subArea #sub_category ul.list li {
    margin-bottom: 20px;
}
.contents .subArea #sub_category ul.list li dl {
    text-align: left;
}
.contents .subArea #sub_category ul.list li dt.image {
    margin-bottom: 5px;
}
.contents .subArea #sub_category ul.list li dd.buttonStyle.arrow {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 0;
    position: relative;
    padding: 0 15px 0 0;
    display: inline-block;
}
    .contents .subArea #sub_category ul.list li dd.buttonStyle.arrow span:before {
        top: 6px;
    }
    .contents .subArea #sub_category ul.list li a:hover dd.buttonStyle.arrow span:before {
        right: 0;
    }



@media (max-width: 1600px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */

    /* ==================================================================
       ■ インフォメーション詳細 ページ detail
    =================================================================== */
}


@media (max-width: 1400px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □ 大枠
    -------------------------------- */
    /* ◇ wrapper
    -------------------------------- */
    .wrapper {
        width: auto;
        margin-left: 4%;
        margin-right: 4%;
    }

    /* ◇ tabArea
    -------------------------------- */
    .tab-item {
        font-size: 1.8rem;
    }


    /* ==================================================================
       ■ インフォメーション詳細 ページ detail
    =================================================================== */
    /* ◇ mainArea
    -------------------------------- */
    .contents .mainArea section.wide .container {
        padding: 0 6% 0 0;
    }
    .contents .mainArea section.wide .container p.image img {
        width: 100%;
    }

    /* ◇ subArea
    -------------------------------- */
}


@media (max-width: 1200px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* ◇ tabArea
    -------------------------------- */
    .tab-item {
        font-size: 1.6rem;
    }


    /* ==================================================================
       ■ インフォメーション詳細 ページ detail
    =================================================================== */

}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {
    /* ==================================================================
       ■ 共通指定
    =================================================================== */
    .contents .buttonStyle.light-blue {
        margin-top: 30px;
    }


    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* ◇ tabArea
    -------------------------------- */
    .tab-item {
        font-size: 1.4rem;
    }


    /* ==================================================================
       ■ インフォメーション詳細 ページ detail
    =================================================================== */
    /* ◇ mainArea
    -------------------------------- */
    .contents .mainArea section.wide .container {
        padding: 0 4% 0 0;
    }

    /* ◇ subArea
    -------------------------------- */
    .contents .subArea {
        padding-bottom: 30px;
        min-width: 210px;
    }
    .contents .subArea #sub_category ul.list li dd.buttonStyle.arrow {
        font-size: 1.3rem;
    }

}


@media only screen and (max-width : 767px) {
    /* ==================================================================
       ■ 共通指定
    =================================================================== */
    .contents .text,
    .contents .text._s {
        margin-bottom: 0;
    }
    .contents .text._l {
        font-size: 1.8rem;
    }

    .contents .buttonStyle.light-blue {
        width: 100%;
        max-width: 280px;
        margin-top: 30px;
    }
        .contents .buttonStyle.light-blue a {
            font-size: 1.4rem;
            padding: 12px 32px;
        }


    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  accent
    -------------------------------- */
    #information .accent {
        height: auto;
        margin-bottom: 0;
    }
    #information .accent .txtArea {
        position: static;
        transform: none;
        -webkit-transform: none;
        padding: 30px 0;
        margin: auto;
    }

    /* --------------------------------
       □ 大枠
    -------------------------------- */
    /* ◇ wrapper
    -------------------------------- */
    .wrapper {
        margin-top: 0;
    }

    /* ◇ tabArea
    -------------------------------- */
    .tab-list {
        flex-wrap: wrap;
        align-items: center!important;
        margin-bottom: 20px;
    }
    .tab-item {
        width: calc(100% / 3);
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .tab-content .subsection:not(:last-child) {
        margin-bottom: 30px;
    }

    /* --------------------------------
       □ info
    -------------------------------- */
    #info_list {
        margin-bottom: 20px;
    }


    /* ==================================================================
       ■ インフォメーション詳細 ページ detail
    =================================================================== */

    /* ◇ mainArea
    -------------------------------- */
    .contents .mainArea {
        padding-bottom: 20px;
    }
    .contents .mainArea section.wide {
    }
    .contents .mainArea section.wide .container {
        padding: 0;
        margin-left: 4%;
        margin-right: 4%;
    }
    .contents .mainArea section p.date .cat {
        font-size: 1.2rem;
        width: fit-content;
        display: block;
        margin-bottom: 5px;
    }
    .contents .mainArea section .lv3.title {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    .contents .mainArea dl.share {
        margin-bottom: 20px;
    }
    .contents .mainArea section p.image {
        margin-bottom: 30px;
    }
    .contents .mainArea section .text._s {
        font-size: 1.4rem;
    }
    .contents .mainArea section .text._s + .lv4 {
        margin-top: 20px;
    }

    /* ◇ subArea
    -------------------------------- */
    .contents .subArea {
        min-width: inherit;
        padding-bottom: 30px;
    }
    .contents .subArea section {
        padding-left: 4%;
        padding-right: 4%;
    }
    .contents .subArea section + section {
        margin-top: 30px;
    }
    .contents .subArea h3.lv3 {
        font-size: 1.8rem;
    }
        .contents .subArea h3.lv3 span {
            font-size: 1.4rem;
            margin-top: 5px;
        }
    .contents .subArea ul.list {
        padding: 0;
    }
    .contents .subArea ul.list li {
        width: 48%;
    }
    .contents .subArea ul.list li dd p {
        text-align: left;
    }

}