/* =========================================================
    Layout: Single Footer Section
    記事下の「宿」と「関連記事」を包むセクション全体のデザイン
   ========================================================= */

/* 1. 外側のラップ：画面幅いっぱいに背景色を敷く */
.l-singleFooterSection {
	width: 100vw;
    margin-inline:calc(50% - 50vw);
    display: flow-root;
	background-color: var(--wan-color-bg-orange);
    padding-bottom: var(--wan-s-16, 64px);
    border-top: 1px solid var(--wan-color-border, #eee);
    margin-top: var(--wan-s-12, 48px);
}

/* 2. 内側のコンテナ：横幅を制限して中央寄せ */
.-singleFooter {
    max-width: var(--swell-container-width, 1200px);
    margin-inline: auto;
    padding-inline: var(--wan-s-4, 16px); /* スマホ時の左右余白 */
}

/* 3. 各ブロック（STAY / AREA GUIDE）の共通設定 */
.p-footerSection {
    margin-bottom: var(--wan-s-16, 64px);
}

.p-footerSection:last-of-type {
    margin-bottom: var(--wan-s-10, 40px);
}

/* 4. セクション見出しのデザイン */
.p-footerSection__title {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    text-align: center;
    margin-bottom: var(--wan-s-8, 32px);
    font-size: 1.4rem;
    font-weight: var(--wan-f-weight-bold);
    letter-spacing: 0.05em;
}

.p-footerSection__title .u-en {
    font-size: var(--wan-f-size-sm, 14px);
    color: var(--wan-color-brand, #ff922b); /* ブランドカラー */
    font-family: var(--wan-f-family-en);
    margin-bottom: 4px;
}

/* 5. 「もっと見る」ボタンエリア */
.p-footerSection__more,
.p-featureSingle__backArea {
    margin-top: var(--wan-s-8, 32px);
    display: flex;
    justify-content: center;
}

/* PC表示での調整 */
@media screen and (min-width: 769px) {
    .l-singleFooterSection {
        padding-top: var(--wan-s-20, 80px);
        padding-bottom: var(--wan-s-20, 80px);
    }
    
    .p-footerSection__title {
        font-size: 1.75rem;
    }
}