@charset "UTF-8";

/* =========================================================
   モデルハウス一覧 v2（A案）専用スタイル
   ・接頭辞は m-mh2 のみ。既存の .m-archive-model-house__list /
     __item 系セレクタは一切上書きしていないため、旧テンプレートに
     戻すだけで完全に元の表示に復帰します。
   ・font-size は既存テーマに合わせて em（16px基準）、
     余白・寸法は rem（可変ルート）で指定しています。
   ========================================================= */

.m-mh2__body {
    width: 34rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.6rem;
    padding-bottom: 7.5rem
}

@media screen and (min-width: 768px) {
    .m-mh2__body {
        width: 120rem;
        padding-top: 6rem;
        padding-bottom: 12rem
    }
}

/* ---------------------------------------------------------
   エリア絞り込みタブ
   --------------------------------------------------------- */
.m-mh2-filter {
    border-bottom: 1px solid #e2e0da;
    padding-bottom: 2.4rem
}

@media screen and (min-width: 768px) {
    .m-mh2-filter {
        padding-bottom: 3.2rem
    }
}

.m-mh2-filter__title {
    text-align: center;
    font-family: "NotoSerifJP", sans-serif;
    font-size: 1em;
    font-weight: 500
}

@media screen and (min-width: 768px) {
    .m-mh2-filter__title {
        font-size: 1.13em
    }
}

.m-mh2-filter__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 1.8rem
}

@media screen and (max-width: 767px) {
    .m-mh2-filter__list {
        gap: .6rem
    }
}

@media screen and (min-width: 768px) {
    .m-mh2-filter__list {
        gap: 1rem;
        margin-top: 2.4rem
    }
}

.m-mh2-filter__button {
    display: block;
    height: 3.8rem;
    padding: 0 1.8rem;
    background-color: #fff;
    border: 1px solid #d5d2ca;
    border-radius: 2rem;
    color: #333;
    font-family: "NotoSansJP", sans-serif;
    font-size: .87em;
    line-height: 3.6rem;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s
}

@media screen and (min-width: 768px) {
    .m-mh2-filter__button {
        height: 4.4rem;
        padding: 0 2.6rem;
        border-radius: 2.4rem;
        font-size: .94em;
        line-height: 4.2rem
    }
}

.m-mh2-filter__button:hover {
    border-color: #333
}

.m-mh2-filter__button[aria-pressed="true"] {
    background-color: #333;
    border-color: #333;
    color: #fff
}

.m-mh2-filter__count {
    margin-left: .6rem;
    font-size: .85em;
    opacity: .7
}

/* ---------------------------------------------------------
   高速キャッシュバック（全員向け・1行バー）
   --------------------------------------------------------- */
.m-mh2-cashback {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .6rem;
    width: 100%;
    margin-bottom: 2.8rem;
    padding: 1.6rem 1.8rem;
    background-color: #f7f6f5;
    color: #333;
    text-align: center;
    -webkit-transition: .3s;
    transition: .3s
}

@media screen and (min-width: 768px) {
    .m-mh2-cashback {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
        margin-bottom: 3.6rem;
        padding: 1.6rem 3.2rem;
        text-align: left
    }
}

.m-mh2-cashback:hover {
    background-color: #f0eee8
}

.m-mh2-cashback__en {
    color: #a9a294;
    font-family: "NotoSansJP", sans-serif;
    font-size: .69em;
    letter-spacing: .12em
}

@media screen and (min-width: 768px) {
    .m-mh2-cashback__en {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        font-size: .75em
    }
}

.m-mh2-cashback__main {
    font-family: "NotoSerifJP", sans-serif;
    font-size: .94em;
    font-weight: 500;
    line-height: 1.5
}

@media screen and (min-width: 768px) {
    .m-mh2-cashback__main {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        font-size: 1.06em
    }
}

.m-mh2-cashback__price {
    display: inline-block;
    margin-left: .8rem;
    color: #7d6f36;
    white-space: nowrap
}

@media screen and (max-width: 767px) {
    .m-mh2-cashback__price {
        display: block;
        margin-top: .2rem;
        margin-left: 0
    }
}

.m-mh2-cashback__link {
    position: relative;
    padding-right: 1.8rem;
    color: #6f6959;
    font-size: .81em;
    white-space: nowrap
}

@media screen and (min-width: 768px) {
    .m-mh2-cashback__link {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-left: auto;
        font-size: .85em
    }
}

.m-mh2-cashback__link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .6rem;
    height: 1.1rem;
    background-image: url("../images/common/common_link_icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.m-mh2-cashback:hover .m-mh2-cashback__link {
    color: #7d6f36
}

#cashback {
    scroll-margin-top: 8rem
}

/* ---------------------------------------------------------
   群馬・富山向けの最短導線
   --------------------------------------------------------- */
.m-mh2-nearby {
    margin-top: 4rem;
    padding: 2.4rem 2rem;
    background-color: #f7f6f5;
    text-align: center
}

@media screen and (min-width: 768px) {
    .m-mh2-nearby {
        margin-top: 5.6rem;
        padding: 3.2rem 4rem
    }
}

.m-mh2-nearby__title {
    font-family: "NotoSerifJP", sans-serif;
    font-size: 1.13em;
    font-weight: 500
}

@media screen and (min-width: 768px) {
    .m-mh2-nearby__title {
        font-size: 1.38em
    }
}

.m-mh2-nearby__text {
    margin-top: 1rem;
    color: #6f6959;
    font-size: .85em;
    line-height: 1.8
}

@media screen and (min-width: 768px) {
    .m-mh2-nearby__text {
        margin-top: 1.2rem;
        font-size: .88em
    }
}

.m-mh2-nearby__actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 2rem
}

@media screen and (min-width: 768px) {
    .m-mh2-nearby__actions {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 1.6rem;
        margin-top: 2.4rem
    }
}

.m-mh2-nearby__button {
    display: block;
    min-width: 26rem;
    height: 4.4rem;
    padding: 0 2.2rem;
    background-color: #333;
    border: 1px solid #333;
    border-radius: 2.4rem;
    color: #fff;
    font-family: "NotoSansJP", sans-serif;
    font-size: .88em;
    line-height: 4.2rem;
    text-align: center;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s
}

.m-mh2-nearby__button:hover {
    background-color: #7d6f36;
    border-color: #7d6f36;
    color: #fff
}

.m-mh2-nearest-note {
    margin-top: 2rem;
    padding: 1.6rem 1.8rem;
    background-color: #f7f6f5;
    color: #333;
    font-size: .85em;
    line-height: 1.8;
    text-align: center
}

@media screen and (min-width: 768px) {
    .m-mh2-nearest-note {
        margin-top: 2.4rem;
        padding: 1.8rem 2.4rem;
        font-size: .88em
    }
}

.m-mh2-nearest-note[hidden] {
    display: none
}

/* ---------------------------------------------------------
   セクション見出し
   --------------------------------------------------------- */
.m-mh2-section {
    margin-top: 6rem
}

@media screen and (min-width: 768px) {
    .m-mh2-section {
        margin-top: 9rem
    }
}

.m-mh2-section[hidden] {
    display: none
}

.m-mh2-section__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 1.2rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid #e2e0da
}

@media screen and (min-width: 768px) {
    .m-mh2-section__head {
        gap: 1.8rem;
        padding-bottom: 2rem
    }
}

.m-mh2-section__title {
    font-family: "NotoSerifJP", sans-serif;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.4
}

@media screen and (min-width: 768px) {
    .m-mh2-section__title {
        font-size: 1.75em
    }
}

.m-mh2-section__en {
    color: #a9a294;
    font-family: "NotoSansJP", sans-serif;
    font-size: .75em;
    letter-spacing: .08em
}

@media screen and (min-width: 768px) {
    .m-mh2-section__en {
        font-size: .88em
    }
}

.m-mh2-section__num {
    margin-left: auto;
    color: #8d8778;
    font-size: .81em
}

/* ---------------------------------------------------------
   PICK UP（大判）
   --------------------------------------------------------- */
.m-mh2-pickup__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4.8rem;
    margin-top: 3.2rem
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.6rem;
        margin-top: 5rem
    }
}

.m-mh2-pickup__item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.m-mh2-pickup__item[hidden] {
    display: none
}

.m-mh2-pickup__image {
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .m-mh2-pickup__image {
        width: 100%;
        height: 22rem
    }
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__image {
        height: 35rem
    }
}

.m-mh2-pickup__image-link {
    display: block;
    width: 100%;
    height: 100%
}

.m-mh2-pickup__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s
}

.m-mh2-pickup__image-link:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04)
}

.m-mh2-pickup__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-top: 2rem
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__text {
        margin-top: 2.4rem
    }
}

/* PICK UPの表示が1件だけのときのみ、2カラム分の横長にする
   （2件以上は件数にかかわらず2カラムを維持する） */
@media screen and (min-width: 768px) {
    .m-mh2-pickup__item--wide {
        grid-column: 1/-1;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 5.5rem
    }
    .m-mh2-pickup__item--wide .m-mh2-pickup__image {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 70rem;
        flex: 0 0 70rem;
        height: 46rem
    }
    .m-mh2-pickup__item--wide .m-mh2-pickup__text {
        margin-top: 0
    }
    .m-mh2-pickup__item--wide .m-mh2-pickup__title {
        font-size: 2.25em
    }
}

.m-mh2-pickup__subtitle {
    margin-top: 1.4rem;
    color: #7d7566;
    font-family: "NotoSerifJP", sans-serif;
    font-size: .94em;
    font-weight: 500
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__subtitle {
        margin-top: 2rem;
        font-size: 1.13em
    }
}

.m-mh2-pickup__title {
    margin-top: .8rem;
    font-family: "NotoSerifJP", sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.55
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__title {
        margin-top: 1.2rem;
        font-size: 1.75em
    }
}

.m-mh2-pickup__tag {
    margin-top: 1.4rem;
    color: #6f6959;
    font-size: .81em;
    line-height: 1.9
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__tag {
        margin-top: 1.8rem;
        font-size: .88em
    }
}

.m-mh2-pickup__description {
    margin-top: 1.8rem;
    font-size: .88em;
    line-height: 1.95
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__description {
        margin-top: 2.4rem;
        font-size: .94em
    }
}

.m-mh2-pickup__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: auto;
    padding-top: 2.6rem
}

@media screen and (min-width: 768px) {
    .m-mh2-pickup__buttons {
        gap: 1.6rem;
        padding-top: 3.4rem;
        max-width: 34rem
    }
}

/* .c-button は box-sizing:content-box のため border 分を差し引く */
.m-mh2-pickup__buttons .c-button {
    width: calc(100% - 2px);
    margin-left: 0;
    margin-right: 0
}

/* 副ボタン（詳細）はホバーでも黒塗りにせず、主ボタンとの階層を保つ */
.m-mh2-pickup__buttons .c-button:not(.c-is-black):hover {
    background-color: #f0eee8 !important
}

.m-mh2-pickup__buttons .c-button:not(.c-is-black):hover .c-button-link {
    color: #333
}

.m-mh2-pickup__buttons .c-button:not(.c-is-black):hover .c-button-link::after {
    background-image: url("../images/common/common_link_icon.svg")
}

/* ---------------------------------------------------------
   カードグリッド
   --------------------------------------------------------- */
.m-mh2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.6rem;
    margin-top: 3.2rem
}

@media screen and (min-width: 768px) {
    .m-mh2-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5.6rem 3.6rem;
        margin-top: 5rem
    }
}

@media screen and (min-width: 768px) {
    .m-mh2-grid--single {
        grid-template-columns: 1fr
    }
}

.m-mh2-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.m-mh2-card[hidden] {
    display: none
}

.m-mh2-card__thumb {
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .m-mh2-card__thumb {
        height: 20rem
    }
}

@media screen and (min-width: 768px) {
    .m-mh2-card__thumb {
        height: 23rem
    }
}

@media screen and (min-width: 768px) {
    .m-mh2-card--wide {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }
    .m-mh2-card--wide .m-mh2-card__thumb {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58rem;
        flex: 0 0 58rem;
        height: 34rem
    }
    .m-mh2-card--wide .m-mh2-card__body {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        margin-top: 0
    }
}

.m-mh2-card__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s
}

.m-mh2-card:hover .m-mh2-card__thumb img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04)
}

.m-mh2-card__body {
    margin-top: 1.6rem
}

@media screen and (min-width: 768px) {
    .m-mh2-card__body {
        margin-top: 2.2rem
    }
}

.m-mh2-card__title {
    margin-top: 1rem;
    font-family: "NotoSerifJP", sans-serif;
    font-size: 1.19em;
    font-weight: 500;
    line-height: 1.6
}

@media screen and (min-width: 768px) {
    .m-mh2-card__title {
        margin-top: 1.4rem;
        font-size: 1.31em
    }
}

.m-mh2-card--wide .m-mh2-card__title {
    font-size: 1.25em
}

@media screen and (min-width: 768px) {
    .m-mh2-card--wide .m-mh2-card__title {
        font-size: 1.88em
    }
}

.m-mh2-card__title a {
    color: #333;
    -webkit-transition: .3s;
    transition: .3s
}

.m-mh2-card:hover .m-mh2-card__title a {
    color: #7d6f36
}

/* カード全体をリンク化（見学会リンクだけは前面に出す） */
.m-mh2-card__stretch::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.m-mh2-card__tag {
    margin-top: 1rem;
    color: #6f6959;
    font-size: .81em;
    line-height: 1.85
}

@media screen and (min-width: 768px) {
    .m-mh2-card__tag {
        margin-top: 1.2rem;
        font-size: .85em
    }
}

.m-mh2-card__description {
    margin-top: 1.2rem;
    font-size: .85em;
    line-height: 1.9
}

@media screen and (min-width: 768px) {
    .m-mh2-card__description {
        margin-top: 1.6rem;
        font-size: .9em
    }
}

.m-mh2-card__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
    margin-top: 1.6rem;
    position: relative;
    z-index: 2
}

@media screen and (min-width: 768px) {
    .m-mh2-card__links {
        margin-top: 2.2rem
    }
}

.m-mh2-card__link {
    position: relative;
    padding-right: 1.8rem;
    color: #333;
    font-size: .85em;
    border-bottom: 1px solid #cfcabc;
    -webkit-transition: .3s;
    transition: .3s
}

@media screen and (min-width: 768px) {
    .m-mh2-card__link {
        font-size: .88em
    }
}

.m-mh2-card__link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .6rem;
    height: 1.1rem;
    background-image: url("../images/common/common_link_icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.m-mh2-card__link:hover {
    border-bottom-color: #7d6f36;
    color: #7d6f36
}

/* ---------------------------------------------------------
   ラベル
   --------------------------------------------------------- */
.m-mh2-labels {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: .6rem
}

@media screen and (min-width: 768px) {
    .m-mh2-labels {
        gap: .8rem
    }
}

.m-mh2-label {
    display: block;
    height: 2.5rem;
    padding: 0 1.4rem;
    border-radius: 1.8rem;
    color: #fff;
    font-size: .81em;
    font-weight: 500;
    line-height: 2.5rem;
    text-align: center;
    white-space: nowrap
}

@media screen and (min-width: 768px) {
    .m-mh2-label {
        height: 3.2rem;
        padding: 0 1.85rem;
        font-size: .88em;
        line-height: 3.2rem
    }
}

.m-mh2-label--area {
    background-color: #333
}

.m-mh2-label--new {
    background-color: #b5a446
}

.m-mh2-label--sale {
    background-color: #092266
}

.m-mh2-label--showroom {
    background-color: #55604f
}

/* ---------------------------------------------------------
   該当なし
   --------------------------------------------------------- */
.m-mh2-empty {
    margin-top: 6rem;
    padding: 4rem 2rem;
    background-color: #f7f6f3;
    text-align: center;
    font-size: .94em
}

@media screen and (min-width: 768px) {
    .m-mh2-empty {
        margin-top: 8rem;
        padding: 6rem 2rem
    }
}

.m-mh2-empty[hidden] {
    display: none
}

/* ---------------------------------------------------------
   導入文
   --------------------------------------------------------- */
.m-mh2-intro {
    margin-top: 6rem
}

@media screen and (min-width: 768px) {
    .m-mh2-intro {
        margin-top: 8rem
    }
}

.m-mh2-intro p {
    font-size: .88em;
    line-height: 2.1
}

@media screen and (min-width: 768px) {
    .m-mh2-intro p {
        font-size: .94em;
        line-height: 2.2
    }
}

/* 2段落目は初期状態で折りたたむ（FAQのアコーディオンと意匠が被らないよう控えめに） */
.m-mh2-intro__more {
    margin-top: 1.2rem
}

@media screen and (min-width: 768px) {
    .m-mh2-intro__more {
        margin-top: 1.6rem
    }
}

.m-mh2-intro__toggle {
    display: inline-block;
    position: relative;
    padding-right: 1.8rem;
    color: #7d7566;
    font-size: .81em;
    border-bottom: 1px solid #cfcabc;
    cursor: pointer;
    list-style: none;
    -webkit-transition: .3s;
    transition: .3s
}

.m-mh2-intro__toggle::-webkit-details-marker {
    display: none
}

@media screen and (min-width: 768px) {
    .m-mh2-intro__toggle {
        font-size: .85em
    }
}

.m-mh2-intro__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .2rem;
    width: .8rem;
    height: .8rem;
    margin-top: -.6rem;
    border-right: 1px solid #7d7566;
    border-bottom: 1px solid #7d7566;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: .3s;
    transition: .3s
}

.m-mh2-intro__more[open] .m-mh2-intro__toggle::after {
    margin-top: -.2rem;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg)
}

.m-mh2-intro__toggle:hover {
    color: #7d6f36;
    border-bottom-color: #7d6f36
}

.m-mh2-intro__more p {
    margin-top: 1.6rem
}

@media screen and (min-width: 768px) {
    .m-mh2-intro__more p {
        margin-top: 2rem
    }
}

/* ---------------------------------------------------------
   エリア別のモデルハウス紹介
   --------------------------------------------------------- */
/* キャッシュバック帯（#f7f6f5）と縞になるよう白背景にする */
.m-mh2-guide {
    background-color: #fff;
    padding-top: 5.6rem;
    padding-bottom: 6rem;
    border-top: 1px solid #ebe8e1
}

@media screen and (min-width: 768px) {
    .m-mh2-guide {
        padding-top: 8.4rem;
        padding-bottom: 9rem
    }
}

.m-mh2-guide__inner {
    width: 34rem;
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__inner {
        width: 120rem
    }
}

.m-mh2-guide__en {
    color: #a9a294;
    font-family: "NotoSansJP", sans-serif;
    font-size: .75em;
    letter-spacing: .08em;
    text-align: center
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__en {
        font-size: .88em
    }
}

.m-mh2-guide__list {
    margin-top: 2.8rem
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4.4rem 4rem;
        margin-top: 4.4rem
    }
}

@media screen and (max-width: 767px) {
    .m-mh2-guide__item+.m-mh2-guide__item {
        margin-top: 3.2rem
    }
}

.m-mh2-guide__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: .8rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #e2e0da
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__head {
        padding-bottom: 1.6rem
    }
}

.m-mh2-guide__title {
    font-family: "NotoSerifJP", sans-serif;
    font-size: 1.13em;
    font-weight: 500;
    line-height: 1.5
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__title {
        font-size: 1.19em
    }
}

.m-mh2-guide__count {
    margin-left: auto;
    color: #8d8778;
    font-family: "NotoSansJP", sans-serif;
    font-size: .81em;
    white-space: nowrap
}

.m-mh2-guide__text {
    margin-top: 1.4rem;
    font-size: .85em;
    line-height: 2
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__text {
        margin-top: 1.8rem;
        font-size: .85em;
        line-height: 2.05
    }
}

.m-mh2-guide__links {
    margin-top: 1.4rem
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__links {
        margin-top: 1.8rem
    }
}

.m-mh2-guide__links li+li {
    margin-top: .8rem
}

.m-mh2-guide__links a {
    position: relative;
    display: block;
    padding-left: 1.4rem;
    color: #333;
    font-size: .78em;
    line-height: 1.75;
    -webkit-transition: .3s;
    transition: .3s
}

@media screen and (min-width: 768px) {
    .m-mh2-guide__links a {
        font-size: .81em
    }
}

.m-mh2-guide__links a::before {
    content: "";
    position: absolute;
    top: .8rem;
    left: 0;
    width: .6rem;
    height: 1.1rem;
    background-image: url("../images/common/common_link_icon.svg");
    background-size: contain;
    background-repeat: no-repeat
}

.m-mh2-guide__links a:hover {
    color: #7d6f36
}

.m-mh2-guide__links-area {
    display: inline-block;
    margin-right: .8rem;
    color: #8d8778
}

/* ---------------------------------------------------------
   よくある質問
   --------------------------------------------------------- */
/* 白背景のエリアガイドの直後なので、帯色を戻して区切る */
.m-mh2-faq {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 6rem;
    padding-bottom: 7.5rem;
    background-color: #f7f6f5
}

@media screen and (min-width: 768px) {
    .m-mh2-faq {
        width: 100%;
        padding-top: 9.5rem;
        padding-bottom: 12rem
    }
}

.m-mh2-faq__title {
    width: 34rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: "NotoSerifJP", sans-serif;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.5
}

@media screen and (min-width: 768px) {
    .m-mh2-faq__title {
        width: 120rem;
        font-size: 1.75em
    }
}

.m-mh2-faq__list {
    width: 34rem;
    margin-top: 2.8rem;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #e2e0da
}

@media screen and (min-width: 768px) {
    .m-mh2-faq__list {
        width: 120rem;
        margin-top: 4rem
    }
}

.m-mh2-faq__item {
    border-bottom: 1px solid #e2e0da
}

.m-mh2-faq__q {
    position: relative;
    display: block;
    padding: 2rem 4rem 2rem 0;
    font-family: "NotoSerifJP", sans-serif;
    font-size: .94em;
    font-weight: 500;
    line-height: 1.7;
    cursor: pointer;
    list-style: none
}

.m-mh2-faq__q::-webkit-details-marker {
    display: none
}

@media screen and (min-width: 768px) {
    .m-mh2-faq__q {
        padding: 2.8rem 5rem 2.8rem 0;
        font-size: 1.13em
    }
}

.m-mh2-faq__q::before,
.m-mh2-faq__q::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .6rem;
    width: 1.6rem;
    height: 1px;
    background-color: #7d7566;
    -webkit-transition: .3s;
    transition: .3s
}

.m-mh2-faq__q::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.m-mh2-faq__item[open] .m-mh2-faq__q::after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.m-mh2-faq__a {
    padding: 0 0 2.4rem
}

@media screen and (min-width: 768px) {
    .m-mh2-faq__a {
        padding: 0 5rem 3.2rem 0
    }
}

.m-mh2-faq__a p {
    font-size: .85em;
    line-height: 2
}

@media screen and (min-width: 768px) {
    .m-mh2-faq__a p {
        font-size: .94em;
        line-height: 2.1
    }
}