/*!
Theme Name: sayanterrace
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sayanterrace
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sayanterrace is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# 1. Modern Reset & Variables
--------------------------------------------------------------*/
:root {
    /* Font Family */
    --font-jp: "yu-gothic-pr6n", "Yu Gothic Medium", "Yu Gothic", "YuGothic", sans-serif;
    --font-mincho: "Hiragino Mincho ProN", "MS Mincho", serif;
    --font-en: "linotype-didot", "didot", serif;

    /* Colors */
    --color-text: #333333;
    --color-link: #333333;
    --color-bg: #ffffff;
    
    /* Layout */
    --header-height: 60px;
    --booking-bar-height: 60px;
    --main-navy: #1d2041;
    --font-size-small: 13px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* アンカーリンク先の要素すべてに適用する場合 */
[id] {
    scroll-margin-top: 60px; /* ヘッダーの高さ分を指定 */
}

/* 特定のセクションのみに適用する場合 */
.section-item {
    scroll-margin-top: 60px;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ローディング中スクロール禁止用クラス */
body.is-loading {
    overflow: hidden;
}

html {
    font-size: 62.5%; 
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# 2. Base Typography
--------------------------------------------------------------*/
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-jp);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.en-text {
    font-family: var(--font-en);
    font-weight: 400;
}

/*--------------------------------------------------------------
# 3. Elements Reset
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}

p { margin: 0 0 1.5em; }

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

a {
    color: var(--color-link);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover { opacity: 0.7; }

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* PCのみ表示（769px以上で表示） */
.br-pc {
    display: block;
}

/* スマホのみ表示（768px以下で表示） */
.br-sp {
    display: none;
}

/* --- レスポンシブ設定 --- */
@media screen and (max-width: 768px) {
    /* PC用を非表示にする */
    .br-pc {
        display: none;
    }

    /* スマホ用を表示する */
    .br-sp {
        display: block;
    }
}

/*--------------------------------------------------------------
# 4. Form Elements Reset
--------------------------------------------------------------*/
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    border: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

select {
    background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6"><path fill="%231d2041" d="M4 6L0 0h8z"/></svg>') no-repeat right 8px center;
    background-size: 8px 6px;
    padding-right: 24px !important;
}

/*--------------------------------------------------------------
# 5. Utilities
--------------------------------------------------------------*/
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 60px;
}

/*--------------------------------------------------------------
# 6. Loading Animation (Fade Out) - ゆったり上質版
--------------------------------------------------------------*/
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: var(--main-navy);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transitionを0.5sから1.5sへ変更し、ふわっと消えるように調整 */
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* 初期状態：表示 */
    opacity: 1;
    visibility: visible;
}

/* JSでこのクラスが付いた時に、強制的に非表示にする */
.loading-screen.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.loading-logo {
    width: 240px; /* SP基準 */
    max-width: 80%;
    /* 初期状態を透明に固定 */
    opacity: 0;
    /* ロゴが浮かび上がる時間を1.2sから1.6sへ、開始を0.5sへ調整 */
    animation: loadingLogoFade 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s;
}

.loading-logo img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* PC版サイズ */
@media screen and (min-width: 769px) {
    .loading-logo {
        width: 320px;
    }
}

/* アニメーション：少しゆっくり、深く浮かび上がるように調整 */
@keyframes loadingLogoFade {
    0% { 
        opacity: 0; 
        filter: blur(10px);
        transform: scale(0.95);
    }
    100% { 
        opacity: 1; 
        filter: blur(0);
        transform: scale(1);
    }
}
/*--------------------------------------------------------------
# 7. Header & Navigation
--------------------------------------------------------------*/
:root {
    --header-height: 60px;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 10006;
    background-color: var(--main-navy);
    display: flex;
    align-items: center;
    transition: background-color 0.4s ease;
}

.site-header.is-transparent {
    background-color: transparent;
}

.site-header.is-transparent {
    backdrop-filter: blur(5px); 
}

.site-header.is-transparent .nav-list li a {
    color: var(--main-navy);
}



.site-header.is-scrolled,
.site-header.is-menu-open {
    background-color: var(--main-navy) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-header.is-scrolled .nav-list li a {
    color: #ffffff;
}


.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 50px;
}

.site-branding img {
    height: 32px;
    width: auto;
    display: block;
}

.pc-only { display: flex; }
.sp-only { display: none !important; }

.sp-drawer {
    display: none;
}

.main-navigation.pc-only {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.nav-list li a {
    color: #fff;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
}

.nav-list li a:hover { opacity: 0.7; }

/* --- ここから Language ドロップダウンの追加 --- */

/* 親要素（Language）の設定 */
.nav-list li.menu-item-has-children {
    position: relative; /* サブメニューの基準点 */
}

/* 矢印（＞）の動きを制御 */
.nav-list li.menu-item-has-children a span.arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 4px;
    font-size: 0.8em;
}

/* サブメニュー本体（初期状態は透明で少し下に配置） */
.nav-list .sub-menu {
    position: absolute;
    top: 100%; /* 親のすぐ下 */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 中央寄せ & 下に待機 */
    width: 200px;
    background-color: var(--main-navy); /* ホテルのテーマカラー（紺） */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 15px; /* マウス移動中に消えないよう隙間を調整 */
}

/* マウスオーバー時の挙動 */
.nav-list li.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* 定位置へ浮上 */
}

/* ホバー時に矢印を回転させる */
.nav-list li.menu-item-has-children:hover a span.arrow {
    transform: rotate(90deg);
}

/* 親がホバーされても文字が薄くなりすぎないよう調整 */
.nav-list li.menu-item-has-children:hover > a {
    opacity: 1;
}

/* サブメニュー内の各アイテム */
.nav-list .sub-menu li {
    width: 100%;
    margin: 0;
}

.nav-list .sub-menu li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 1;
    transition: background-color 0.2s;
}

/* サブメニュー内のホバー：背景を少し明るく */
.nav-list .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* サブメニュー内の ＞ 表示 */
.nav-list .sub-menu li a span {
    font-size: 10px;
    opacity: 0.5;
}

/* 透明な橋渡し（マウスが親から子へ移動する際に消えるのを防ぐ） */
.nav-list li.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
}

.header-cta { margin-left: 30px; }

header .btn-reserve {
    background-color: #fff;
    color: var(--main-navy) !important;
    font-size: var(--font-size-small);
    font-weight: 700;
    padding: 0 24px;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.3s;
}

/*--------------------------------------------------------------
# Mobile Styles (max-width: 1024px)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .header-container { padding: 0 20px; }

    .pc-only { display: none !important; }
    .sp-only { display: flex !important; }

    .site-header {
        background-color: none;
    }

    .site-header.is-transparent {
        background-color: var(--main-navy);
    }

    .header-sp-actions {
        display: flex;
        align-items: center;
    }

    .btn-reserve-sp {
        background-color: #fff;
        color: var(--main-navy);
        font-weight: 700;
        padding: 0 16px;
        height: 32px;
        font-size: 12px;
        border-radius: 2px;
        margin-right: 15px;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .hamburger {
        width: 30px;
        height: 22px;
        position: relative;
        background: none;
        border: none;
        padding: 0;
        z-index: 10007;
    }
    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff;
        position: absolute;
        left: 0;
        transition: 0.3s;
    }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 10px; }
    .hamburger span:nth-child(3) { top: 20px; }

    .is-menu-open .hamburger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .is-menu-open .hamburger span:nth-child(2) { opacity: 0; }
    .is-menu-open .hamburger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

    .sp-drawer {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: var(--main-navy);
        transition: right 0.4s ease;
        z-index: 10000;
        padding: 80px 40px 40px;
        overflow-y: auto;
        text-align: center;
    }
    .is-menu-open .sp-drawer { right: 0; }

    .sp-nav-list { list-style: none; padding: 0; margin: 0 0 30px; }
    .sp-nav-list li { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .sp-nav-list li a {
        display: block;
        padding: 14px 0;
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }
    .sp-nav-list li a span {
        display: block;
        font-size: 10px;
        opacity: 0.5;
        margin-top: 2px;
    }

    /* --- Language アコーディオン追加分 (センター揃え完全版) --- */
    
    .sp-nav-list li.sp-menu-item-has-children {
        position: relative;
        cursor: pointer;
    }

    /* Languageの文字を中央にしつつ、矢印を右端に置く設定 */
    .sp-nav-list li.sp-menu-item-has-children > a {
        display: flex !important;
        justify-content: center !important; /* 文字をセンターへ */
        align-items: center !important;
        width: 100%;
        box-sizing: border-box;
        position: relative; /* 矢印配置の基準 */
    }

    /* 矢印（＞）を右端に絶対配置 */
    .sp-nav-list li.sp-menu-item-has-children .arrow {
        position: absolute;
        right: 0;
        font-size: 12px;
        transition: transform 0.4s ease;
        display: inline-block;
        pointer-events: none;
    }

    /* サブメニュー本体 */
    .sp-sub-menu {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        max-height: 0;
        overflow: hidden !important;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
    }

    /* 開いた時の状態 */
    .sp-nav-list li.sp-menu-item-has-children.is-active .sp-sub-menu {
        max-height: 600px !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 5px 0 15px !important;
    }

    .sp-nav-list li.sp-menu-item-has-children.is-active .arrow {
        transform: rotate(90deg) !important;
    }

    /* サブメニュー内のリンクもセンター揃え */
    .sp-sub-menu li {
        border-bottom: none !important;
    }

    .sp-sub-menu li a {
        padding: 12px 0 !important;
        font-size: 14px !important;
        opacity: 0.8 !important;
        text-align: center !important; /* 文字をセンターへ */
        justify-content: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    }
    
    /* --- 追加分終了 --- */

    .sp-lang { 
        color: #fff; 
        text-decoration: none; 
        display: block; 
        margin-bottom: 20px; 
        font-size: 14px; 
    }
    .sp-sns { 
        display: flex; 
        justify-content: center;
        gap: 30px;
    }
    .sp-sns a { color: #fff; text-decoration: none; font-size: 14px; }
}

.home .fv { margin-top: 0; }

/*--------------------------------------------------------------
# 8. Booking Bar (PC & General)
--------------------------------------------------------------*/
:root {
    --booking-bar-height: 60px;
}

.booking-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--booking-bar-height);
    background-color: var(--main-navy);
    z-index: 10010;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s;
    overflow: hidden;
}

/* PC用：フッター到達時に隠す設定 */
@media screen and (min-width: 1025px) {
    .booking-bar.is-hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
    /* PCでは閉じるボタンは不要 */
    .booking-close-btn { display: none; }
}

/* 予約バー全体のコンテナ */
.booking-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    box-sizing: border-box;
}

/* タイトル部分 */
.booking-title {
    display: flex;
    align-items: baseline;
    color: #fff;
    flex-shrink: 0;
}
.booking-title .jp { font-size: 13px; }
.booking-title .en { font-size: 13px; margin-left: 10px; }

/* フォーム本体：子要素をすべて横並びにする */
.booking-form {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* 人数と部屋数を横に並べるためのコンテナ */
.form-group-flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 各ラベルとセレクトボックスのセット */
.form-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
}

/* セレクトボックス内のグループ（年月日、泊数など） */
.input-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* セレクトボックスの共通スタイル */
.form-item select {
    height: 30px;
    font-size: 13px;
    padding: 0 25px 0 8px;
    color: var(--main-navy);
    background-color: #fff;
    border: none;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%231d2041' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* 検索ボタン */
.btn-search {
    background-color: #fff;
    color: var(--main-navy);
    font-weight: 700;
    padding: 0 40px;
    height: 32px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 2px;
    white-space: nowrap;
}

.btn-search:hover {
    opacity: 0.8;
}

/* スマホ対応 */
@media screen and (max-width: 1024px) {

    .home .fv { 
        margin-top: 50px; 
    }

    .booking-form {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .form-group-flex {
        gap: 15px;
    }

    .booking-tel {
        margin-top: 50px;
        text-align: center; /* ボタンを中央寄せにする場合 */
    }

    .btn-tel {
        display: inline-flex; /* 縦横中央揃えのため */
        align-items: center;
        justify-content: center;
        border: 1px solid #fff;
        color: #fff;
        font-weight: 700;
        padding: 0 40px;
        /* スマホで押しやすい高さ（44px〜48px推奨）に調整 */
        height: 48px; 
        border-radius: 2px;
        white-space: nowrap;
        text-decoration: none; /* aタグにした際の下線を消す */
        transition: background-color 0.3s, color 0.3s;
        font-size: 14px; /* テキストサイズを適正に */
        letter-spacing: 0.05em;
    }

    /* タップした時のフィードバック */
    .btn-tel:active {
        background-color: #fff;
        color: #333; /* 背景白、文字濃い色に反転 */
    }

}

/*--------------------------------------------------------------
# 8-2. SP Booking Overlay (修正・復元版)
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
        position: relative;
    }

    .booking-bar {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: -webkit-fill-available;
        background-color: var(--main-navy);
        z-index: 999999 !important;
        visibility: hidden !important; 
        opacity: 0 !important;
        transform: translate3d(0, 100%, 0) !important;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s, visibility 0.4s;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .booking-bar.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .booking-container {
        display: flex;
        flex-direction: column;
        padding: 100px 20px 60px !important; /* ×ボタン用に上部余白を確保 */
        gap: 25px;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* --- 閉じるボタン (×) --- */
    .booking-close-btn {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        cursor: pointer;
    }

    .booking-close-btn span {
        display: block;
        position: relative;
        width: 24px;
        height: 2px;
        background-color: #fff;
        transform: rotate(45deg);
    }

    .booking-close-btn span::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 2px;
        background-color: #fff;
        transform: rotate(-90deg);
    }

    /* --- 右下の白い予約ボタン (FAB) --- */
    .sp-reserve-fab {
        position: fixed !important;
        right: 20px !important;
        bottom: 30px !important;
        width: 70px !important;
        height: 70px !important;
        background-color: #fff !important;
        color: var(--main-navy) !important;
        border-radius: 50% !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        text-decoration: none;
        border: none;
        padding: 0;
    }

    /* FAB内のアイコン */
    .sp-reserve-fab::before {
        content: "";
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d2041'%3E%3Cpath d='M7 11h2v2H7v-2zm14-5v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1c1.1 0 2 .9 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 2px;
    }

    .sp-reserve-fab .fab-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    /* 入力エリアの調整 */
    .booking-form-static, 
    .form-group-flex,
    .form-item { 
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex;
        flex-direction: column;
        white-space: normal !important;
    }

    .form-item .input-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100% !important;
    }

    .form-item select { 
        flex: 1;
        min-width: 70px;
        height: 48px; 
        font-size: 16px; 
    }

    .btn-search {
        height: 56px !important;
        margin-top: 10px;
    }
}

/* PC版（1025px以上）で非表示 */
@media screen and (min-width: 1025px) {
    .sp-reserve-fab {
        display: none !important;
    }
}

/*--------------------------------------------------------------
# 9. Site Footer
--------------------------------------------------------------*/
.site-footer {
    background-color: var(--main-navy);
    color: #fff;
    padding: 50px 0 50px;
    position: relative;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.footer-left { width: 200px; }
.footer-logo img { width: 100%; height: auto; }
.footer-center { flex: 1; }

.footer-nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
    margin-bottom: 5px;
    padding: 0;
}

.footer-nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-family: var(--font-mincho);
}

.footer-address-block {
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
    font-size: 13px;
    font-family: var(--font-mincho);
}

.footer-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-sns-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.footer-sns-icons img { width: 30px; height: auto; }
.site-info { font-size: 0.9rem; letter-spacing: 0.05em; }

@media screen and (max-width: 1024px) {
    .site-footer {
        padding: 50px 0 20px;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }
    .footer-nav {
        padding: 0 40px 15px;
    }

    .footer-nav-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0px 20px;
    }
    .footer-address-block {
        justify-content: center;
        line-height: 1.6;
    }
    .footer-right {
        align-items: center;
        margin-top: 10px;
    }
    .site-info { 
        padding-top: 15px;
        font-size: 0.9rem; 
        letter-spacing: 0.05em; 
    }

}

/*--------------------------------------------------------------
# 9. First View (FV)
--------------------------------------------------------------*/
.fv {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.fv-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.fv-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 2.0s ease-in-out;
    z-index: 1;
}

.fv-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.fv-slide__image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
}

.fv-slide__image::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(29, 32, 65, 0.1);/* 20260316 */
    mix-blend-mode: multiply;
}

.fv-slide__text-wrapper {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 100%;
    text-align: center;
}

.fv-slide__text {
    color: #fff;
    font-family: var(--font-mincho);
    font-size: 2rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.2em;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

/*--------------------------------------------------------------
# 10. Responsive (SP)
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    :root {
        --header-height: 54px;
        --booking-bar-height: auto;
    }

    .site-header {
        background-color: var(--main-navy);
    }
    .header-container { padding: 0 15px; }
    .site-branding img { height: 22px; }

    .main-navigation {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        height: 100svh;
        background-color: var(--main-navy);
        z-index: 10000;
        padding: 100px 20px;
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    .site-header.menu-open .main-navigation { opacity: 1; visibility: visible; }
    .nav-list { flex-direction: column; align-items: center; gap: 20px; }
    
    .sp-menu-btn {
        display: block;
        position: absolute;
        right: 15px; top: 50%;
        transform: translateY(-50%);
        width: 30px; height: 24px;
        z-index: 10001;
    }
    .sp-menu-btn span {
        display: block; position: absolute;
        width: 100%; height: 2px;
        background-color: #fff;
    }
    .sp-menu-btn span:nth-child(1) { top: 0; }
    .sp-menu-btn span:nth-child(2) { top: 11px; }
    .sp-menu-btn span:nth-child(3) { bottom: 0; }

    /* --- FV（SP） --- */
    .fv {
        height: 100vh;
        height: 100svh;
    }
    .fv-slide__text-wrapper {
        top: 50%;
    }
    .fv-slide__text {
        font-size: 1.6rem;
        padding: 0 20px;
        line-height: 1.8;
    }

    /* --- 予約バー（SP） --- */
    .booking-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 12px 0;
        min-height: 80px;
        background-color: var(--main-navy);
    }
    .booking-container {
        flex-direction: column;
        gap: 10px;
    }
    .booking-form-static {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

/*--------------------------------------------------------------
# Common Containers
--------------------------------------------------------------*/
.container-1440 {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

.container-1200 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Responsive (SP) --- */
@media screen and (max-width: 768px) {
    .container-1440 {
        padding: 0 20px; /* スマホ時は左右 20px に統一 */
    }

    .container-1200 {
        padding: 0 20px; /* スマホ時は左右 20px に統一 */
    }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.section-about {
    padding: 140px 0;
    background-color: #dddddd;
    text-align: center;
}

/* --- セクションタイトル --- */
.section-header {
    margin-bottom: 60px;
    text-align: center; /* センター揃え */
}

.section-header__icon {
    width: 32px;
    margin: 0 auto 5px; /* センター揃え */
    display: block;
}

.section-header__en {
    font-family: var(--font-en); 
    font-size: 28px;
    letter-spacing: 0em;
    color: var(--main-navy);
    margin-bottom: 0px;
    display: block;
}

.section-header__jp {
    font-family: var(--font-mincho);
    font-size: 13px;
    letter-spacing: 0em;
    color: #333;
    display: block;
}

/* --- テキストコンテンツ --- */
.about-content {
    margin-bottom: 80px;
}

.about-content__copy {
    font-family: var(--font-mincho);
    font-size: 24px;
    line-height: 2.0;
    margin-bottom: 40px;
    font-weight: 500;
    color: #333; /* #333に統一 */
}

.about-content__text {
    font-family: var(--font-jp);
    font-size: 14px;
    line-height: 2.4;
    color: #333; /* #333に統一 */
}

/* --- 画像ギャラリー (PC時 610px 固定) --- */
.about-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 610px;
    margin: 0 auto;
}

.about-gallery__top .image-wrapper {
    width: 610px;
    height: 300px;
}

.about-gallery__bottom {
    display: flex;
    gap: 10px;
}

/* 下段：(610 - 10) / 2 = 300px */
.about-gallery__bottom .image-wrapper {
    width: 300px;
    height: 300px;
}

/* 共通オーバーレイ */
.image-wrapper {
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(102, 102, 102, 0.6);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* --- レスポンシブ (SP) --- */
@media screen and (max-width: 768px) {
    .about-content__text {
        line-height: 2.0;
        text-align: justify;
    }

    .section-about {
        padding: 60px 0 80px;
    }
    .about-content {
        margin-bottom: 40px;
    }
    .about-gallery {
        width: 100%; 
        padding: 0 0px;
    }

    .about-gallery__top .image-wrapper,
    .about-gallery__bottom .image-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .about-gallery__bottom {
        flex-direction: column;
    }

    .about-content__copy {
        font-size: 20px;
    }
}

/*--------------------------------------------------------------
# Plan Section
--------------------------------------------------------------*/
.section-plan {
    padding: 120px 0;
    background-color: #fff;
}

.plan-slider {
    margin-top: 60px;
    padding-bottom: 50px;
}

.plan-card {
    text-decoration: none;
    display: block;
}

.plan-card__image {
    aspect-ratio: 3 / 2;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

/* 画像自体の設定（ホバー時の拡大用） */
.plan-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.plan-card__image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(102, 102, 102, 0.6);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: opacity 0.6s ease; /* 滑らかに消える設定 */
    opacity: 1;
}

/* --- マウスオーバー時の挙動 --- */

/* オーバーレイを消す */
.plan-card:hover .plan-card__image::after {
    opacity: 0;
}

/* 画像を少し拡大して奥行きを出す */
.plan-card:hover .plan-card__image img {
    transform: scale(1.05);
}

.plan-card__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.plan-card__title {
    font-family: var(--font-jp);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 500;
    color: #333;
}

.plan-card__arrow {
    font-size: 18px;
    color: #333;
    padding-top: 2px;
}

.plan-slider.swiper{
    padding-bottom: 30px!important;
}
.swiper-pagination {
    bottom: -5px !important;
}

.swiper-pagination-bullet {
    background: #aaaaaa;
    opacity: 1;
    margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
    background: #666666!important;
}


@media screen and (max-width: 768px) {
    /* セクション全体の余白をSP用に縮小 */
    .section-plan {
        padding: 60px 0;
    }

    /* スライダーの余白調整 */
    .plan-slider {
        margin-top: 40px;
        padding-bottom: 40px;
        /* スライドが端で切れているのを見せて、スワイプを促す場合は overflow: visible */
        overflow: visible !important; 
    }

    /* カード内の余白と画像比率 */
    .plan-card__image {
        margin-bottom: 16px;
        /* スマホでも 3/2 を維持、または少し高さを出すなら調整 */
        aspect-ratio: 3 / 2;
    }

    /* スマホではホバーがないため、オーバーレイを最初から少し薄く設定（任意） */
    .plan-card__image::after {
        background-color: rgba(102, 102, 102, 0.4);
    }

    /* タイトルのフォントサイズ調整 */
    .plan-card__title {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 矢印アイコンのサイズ調整 */
    .plan-card__arrow {
        font-size: 16px;
    }

    /* ページネーション（ドット）のサイズ */
    .plan-slider .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
        margin: 0 5px !important;
    }
}

/*--------------------------------------------------------------
# Top Rooms Section
--------------------------------------------------------------*/
.top-rooms {
    background-color: var(--main-navy);
    padding: 120px 0 100px;
    overflow: hidden;
}

.top-rooms-slider {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 50px; /* ドット用の余白 */
}

.top-rooms__item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 600px;
}

/* 背景画像とオーバーレイ（暗くする） */
.top-rooms__image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.top-rooms__image-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-rooms__image-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 32, 65, 0.6); 
    /* ▼ 追加 ▼ */
    mix-blend-mode: multiply;
}

/* 中央コンテンツ */
.top-rooms__content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    padding: 0 20px;
    color: #fff;
}

.top-rooms__catch {
    font-family: var(--font-mincho);
    font-size: 20px;
    letter-spacing: 0.15em;
    margin-bottom: 30px;
    line-height: 1.6;
}

.top-rooms__lead {
    font-family: var(--font-jp);
    font-size: 13px;
    line-height: 2.2;
    margin-bottom: 40px;
}

.top-rooms__btn-detail {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 14px 45px;
    font-size: 13px;
    letter-spacing: 0.1em;
    transition: all 0.3s;
}
.top-rooms__btn-detail:hover {
    background-color: #fff;
    color: var(--main-navy);
    opacity: 1;
}

/* 下部インフォバー（白背景パーツ） */
.top-rooms__info-bar {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 20;
}

.top-rooms__room-name {
    color: #fff;
    font-size: 13px;
    margin-right: 30px;
    margin-bottom: 0;
}

.top-rooms__btn-reserve {
    background-color: #fff;
    color: var(--main-navy);
    font-size: 14px;
    font-weight: 700;
    padding: 18px 50px;
    display: inline-block;
    transition: opacity 0.3s;
}

/* スライダー用ドット */
.top-rooms-pagination.swiper-pagination {
    bottom: 20px!important;
}
.top-rooms-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.4;
    margin: 0 6px !important;
}
.top-rooms-pagination .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    /* セクション全体の余白調整 */
    .top-rooms {
        padding: 60px 0 100px;
        overflow: visible !important;
    }

    .top-rooms-slider {
        overflow: visible !important;
    }

    .top-rooms__item {
        min-height: 500px;
    }

    /* 中央コンテンツ */
    .top-rooms__content {
        position: absolute;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        padding: 0 20px;
        text-align: center;
        z-index: 10;
    }

    .top-rooms__catch {
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .top-rooms__lead {
        font-size: 12px;
        line-height: 1.8;
        text-align: justify;
        margin-bottom: 25px;
    }

    /* 「お部屋について」ボタンのサイズ適正化 */
    .top-rooms__btn-detail {
        display: inline-block;
        border: 1px solid #fff;
        color: #fff;
        padding: 10px 30px; /* パディングを縮小 */
        font-size: 12px;    /* フォントサイズを縮小 */
        width: auto;        /* 横幅をコンテンツに合わせる */
        min-width: 160px;   /* 最小幅を設定して形を整える */
    }

    /* 下部インフォバー */
    .top-rooms__info-bar {
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 5; /* ドットより背面に */
    }

    .top-rooms__room-name {
        margin: 0 0 8px;
        padding-right: 15px;
        font-size: 11px;
    }

    .top-rooms__btn-reserve {
        width: 100%;
        text-align: center;
        padding: 15px;
        font-size: 14px;
    }

    /* --- ドットの表示を最優先 --- */
    .top-rooms-slider .top-rooms-pagination.swiper-pagination {
        display: block !important;
        visibility: visible !important;
        bottom: 90px !important; /* 予約ボタン（約50-60px）のすぐ上に配置 */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        z-index: 99 !important; /* 何よりも前面に */
    }

    .top-rooms-pagination .swiper-pagination-bullet {
        background: #fff !important;
        opacity: 0.5 !important;
        margin: 0 6px !important;
        width: 7px !important;
        height: 7px !important;
        box-shadow: 0 0 4px rgba(0,0,0,0.5); /* 画像の上で確実に見せるための影 */
    }

    .top-rooms-pagination .swiper-pagination-bullet-active {
        opacity: 1 !important;
    }
}

/*--------------------------------------------------------------
# Cuisine Section
--------------------------------------------------------------*/
.section-cuisine {
    padding: 120px 0;
    background-color: #dddddd; /* 指定の背景色 */
}

.cuisine-slider {
    margin-top: 60px;
    /* 写真の下にドットを配置するための余白を確保 */
    padding-bottom: 60px !important; 
    /* ドットが枠外にはみ出しても表示されるようにする */
    overflow: visible !important;
}

.cuisine__item {
    position: relative;
    max-width: 1440px; /* ROOMSと統一 */
    margin: 0 auto;
    width: 100%;
}

.cuisine__image-layer {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    width: 100%;
}

.cuisine__image-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 画像オーバーレイ */
.cuisine__image-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 中央コンテンツ */
.cuisine__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 90%;
    color: #fff;
}

.cuisine__catch {
    font-size: 24px;
    font-family: var(--font-mincho);
    margin-bottom: 20px;
    letter-spacing: 0.15em;
    line-height: 1.6;
}

.cuisine__lead {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 30px;
    font-family: var(--font-jp);
}

.cuisine__btn-detail {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 40px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cuisine__btn-detail:hover {
    background-color: #fff;
    color: #333;
}

/* 右下リンクボタン（ご夕食・ご朝食・ランチ） */
.cuisine__info-bar {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 20;
}

.cuisine__btn-link {
    display: block;
    background-color: #fff;
    color: var(--main-navy);
    padding: 15px 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s;
}

.cuisine__btn-link:hover {
    opacity: 0.9;
}

/* --- Pagination (画像の下・外側へ配置) --- */
.cuisine-pagination.swiper-pagination {
    /* .cuisine-slider の padding-bottom 内の最下部に配置 */
    bottom: 10px !important;
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
}

.cuisine-pagination .swiper-pagination-bullet {
    background: #aaa !important;
    opacity: 1;
    margin: 0 10px !important;
    width: 10px;
    height: 10px;
}

.cuisine-pagination .swiper-pagination-bullet-active {
    background: #666 !important;
}

/* --- Responsive (SP) --- */
@media screen and (max-width: 768px) {
    .section-cuisine {
        padding: 60px 0 80px;
    }

    .cuisine-slider {
        margin-top: 40px;
        padding-bottom: 50px !important;
    }

    .cuisine__item {
        max-width: 100%;
    }

    .cuisine__image-layer {
        aspect-ratio: 1 / 1; /* スマホでは正方形 */
    }

    .cuisine__catch {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .cuisine__lead {
        font-size: 12px;
        line-height: 1.8;
        margin-bottom: 25px;
        padding: 0 15px;
        text-align: justify;
    }

    .cuisine__btn-detail {
        padding: 10px 30px;
        font-size: 12px;
        min-width: 160px;
    }

    .cuisine__btn-link {
        padding: 12px 30px;
        font-size: 13px;
        width: 100%;
        text-align: center;
    }

    .cuisine-pagination.swiper-pagination {
        bottom: 0 !important;
    }
}

/*--------------------------------------------------------------
# Top Features Section (EVENT / SPEND / FACILITIES)
--------------------------------------------------------------*/
.top-features {
    background-color: #dddddd;
    width: 100%;
}

.features-wrapper {
    display: flex;
    flex-wrap: wrap; /* SP時の折り返し用 */
    width: 100%;
}

.feature-item {
    width: 33.333%;
    display: flex;
    flex-direction: column;
}

/* 画像・スライダーエリアの共通設定 */
.feature-slider,
.feature-static {
    width: 100%;
    height: 600px; /* PC版固定高 */
    position: relative;
    overflow: hidden;
}

/* スライド画像・背景の共通パーツ */
.feature-slide__bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease; /* リンクホバー時の拡大用 */
}

/* 共通オーバーレイ（紺色 #1d2041 の50%乗算） */
.feature-slide__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 32, 65, 0.7); /* #1d2041 の 50% */
    mix-blend-mode: multiply; /* 乗算処理 */
    pointer-events: none;
    z-index: 1;
}

/* テキストがオーバーレイの下に隠れないよう調整 */
.feature-content {
    z-index: 10;
}

/* テキストコンテンツ（中央配置の共通スタイル） */
.feature-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    z-index: 10;
    pointer-events: none; /* 下のリンクを邪魔しない */
}

.feature-icon {
    width: 40px;
    margin: 0 auto 15px;
}

.feature-en {
    font-size: 20px;
    letter-spacing: 0em;
    margin-bottom: 0px;
}

.feature-jp {
    font-size: 11px;
    margin-bottom: 40px;
}

.feature-summary {
    font-size: 16px;
    line-height: 1.8;
    font-family: var(--font-mincho);
}

/* --- 下部ボタンエリア --- */
.feature-btn-area {
    padding: 30px 0;
    text-align: center;
    background-color: #dddddd;
}

/* 共通ボタンパーツがあればそちらを継承、なければ以下で固定 */
.feature-btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 10px 30px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background-color 0.3s, opacity 0.3s;
}

.feature-btn:hover {
    background-color: #333;
    opacity: 0.8;
}

/* --- Swiper Pagination (共通デザインを継承しつつ位置調整) --- */
.feature-item .swiper-pagination {
    bottom: 30px !important;
}

/* ドットの色やサイズは他のセクション（PLANなど）と共通化 */
.feature-item .swiper-pagination-bullet {
    background: #fff !important;
    opacity: 0.5;
    width: 8px;
    height: 8px;
    margin: 0 6px !important;
}

.feature-item .swiper-pagination-bullet-active {
    opacity: 1;
}

/* --- Responsive (SP) --- */
@media screen and (max-width: 768px) {
    .features-wrapper {
        gap: 60px;
    }

.feature-item {
        width: 100%; /* 縦に並べる */
    }

    .feature-slider,
    .feature-static {
        height: 450px; /* SP版の高さ */
    }

    .feature-en {
        font-size: 24px;
    }

    .feature-jp {
        margin-bottom: 25px;
    }

    .feature-summary {
        font-size: 14px;
        padding: 0 20px;
    }
}

/* --- ACCESS Section --- */
.top-access {
    background-color: #f9f9f9; /* ABOUTと共通の背景色 */
    padding: 100px 0;
    text-align: center;
}

.access-intro {
    margin-bottom: 50px;
}

.access-intro p {
    font-size: 18px;
    letter-spacing: 0.1em;
    font-family: var(--font-mincho);
}

.access-map-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.access-map-inner {
    line-height: 0;
    overflow: hidden;
}

/* 地図をグレーにする設定 */
.access-map-inner iframe {
    filter: grayscale(100%) contrast(0.8) invert(5%);
    -webkit-filter: grayscale(100%) contrast(0.8) invert(5%);
}

/* 下部ボタン（共通パーツの.feature-btnを流用） */
.section-btn-area {
    margin-top: 40px;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .top-access {
        padding: 60px 0;
    }
    .access-intro p {
        font-size: 15px;
        padding: 0 20px;
        line-height: 1.8;
    }
    .access-map-inner iframe {
        height: 300px;
    }
}

/* --- NEWS Section 専用スタイル --- */
.nw-section {
    width: 100%;
}

.nw-bg-overlay {
    position: relative;
    padding: 60px 0; /* デザイン画像に合わせてゆったりめ */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}

/* 紺色 #1d2041 50% 乗算 */
.nw-bg-overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(29, 32, 65, 0.8);
    mix-blend-mode: multiply;
    z-index: -1;
}

.nw-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0px;
}

/* タイトルエリア（nw-header） */
.nw-title-side {
    width: 20%;
}

.nw-header {
    text-align: center;
    color: #fff;
}

.nw-header__icon {
    width: 32px;
    height: auto;
    margin-bottom: 15px;
}

.nw-header__en {
    font-size: 30px;
    letter-spacing: 0em;
    margin-bottom: 10px;
    line-height: 1;
}

.nw-header__jp {
    font-size: 13px;
    letter-spacing: 0em;
    font-family: var(--font-mincho);
}

/* リストエリア */
.nw-list-side {
    width: 80%;
}

.nw-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.nw-item:first-child {
    border-top: none;
}

.nw-item:last-child {
    border-bottom: none;
}

.nw-link {
    display: flex;
    align-items: center;
    padding: 20px 0;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.nw-link:hover {
    opacity: 0.6;
}

.nw-date {
    font-size: 15px;
    font-family: var(--font-jp);
    min-width: 100px;
    margin-right: 40px;
}

.nw-cat-wrap {
    min-width: 90px;
    margin-right: 40px;
}

.nw-category {
    display: inline-block;
    font-size: 12px;
    font-family: var(--font-jp);
    border: 1px solid #fff;
    padding: 2px 0px;
    text-align: center;
    white-space: nowrap;
    width: 100px;
}

.nw-title {
    font-size: 15px;
    font-weight: normal;
    font-family: var(--font-jp);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
}

.nw-arrow {
    font-size: 14px;
    margin-left: auto;
}

/* --- レスポンシブ --- */
@media screen and (max-width: 1024px) {
    .nw-bg-overlay {
        background-attachment: scroll; /* スクロールと一緒に動くように変更 */
        background-position: center center;
        /* スマホで見栄えが良いように上下の余白を少し調整 */
        padding: 40px 0;
    }
    .nw-container {
        flex-direction: column;
        padding: 0 20px;
    }
    .nw-title-side {
        width: 100%;
        margin-bottom: 60px;
    }
    .nw-list-side {
        width: 100%;
    }

    /* SP版の調整: 日付とカテゴリを上に、タイトルを下に */
    .nw-link {
        flex-wrap: wrap; /* 折り返しを許可 */
        padding: 25px 0;
    }

    .nw-date {
        margin-right: 20px;
        min-width: auto;
    }

    .nw-cat-wrap {
        margin-right: 0;
        min-width: auto;
    }

    .nw-title {
        width: 100%;       /* 100%にして強制改行 */
        flex: none;        /* flex-growを解除 */
        margin-top: 15px;  /* 上との余白 */
        margin-right: 0;
        white-space: normal; /* スマホではタイトルを折り返して見せる（任意） */
        order: 3;          /* 3番目に配置 */
    }

    .nw-arrow {
        order: 2;          /* 矢印は1行目の右端に置く（任意） */
        margin-left: auto;
    }
}


@media screen and (max-width: 768px) {
    .nw-bg-overlay {
        padding: 80px 0;
    }
    .nw-link {
        flex-wrap: wrap;
        padding: 20px 0;
    }
    .nw-date {
        margin-right: 20px;
    }
    .nw-cat-wrap {
        margin-right: 0;
    }
    .nw-title {
        width: 100%;
        margin-top: 15px;
        order: 3;
        white-space: normal;
    }
    .nw-arrow {
        order: 2;
    }
}



/* --- 下層FV：ベース構造 (SPを含む基本設定) --- */
.sub-hero {
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
    /* ヘッダー高さ分の余白を追加 */
    margin-top: 60px;
}

.sub-hero__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 背景画像の乗算処理 */
.sub-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #888888;
    background-blend-mode: multiply;
    z-index: 1;
}

/* 中央コンテンツ */
.sub-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.sub-hero__icon {
    width: 40px;
    margin: 0 auto 15px;
}

.sub-hero__en {
    font-size: 28px;
    letter-spacing: 0em;
    line-height: 1;
    margin-bottom: 10px;
}

.sub-hero__jp {
    font-size: 13px;
    letter-spacing: 0em;
}

/* --- PC版（必要に応じて数値を上書きしてください） --- */
@media screen and (max-width: 769px) {
    .sub-hero {
        width: 100%;
        height: 25vh;
        position: relative;
        overflow: hidden;
        /* ヘッダー高さ分の余白を追加 */
        margin-top: 60px;
    }
    
    .sub-hero__en {
        /* PCで文字を大きくする場合のみ記述 */
    }

    .sub-hero__jp {
        /* PCで文字を大きくする場合のみ記述 */
    }
}

.sub-message {
    padding: 100px 0;
    text-align: center;
}

.sub-message__title {
    font-family: var(--font-mincho);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 40px;
}

.sub-message__text {
    font-family: var(--font-jp);
    font-size: 13px;
    line-height: 2.2;
}

@media screen and (max-width: 768px) {
    .sub-hero {
        margin-top: 54px;
    }
    .sub-message {
        padding: 60px 0px;
    }
    .sub-message__text {
    text-align: justify;
    }

    .sub-message__text br {
        display: none;
    }



}

/* --- 客室一覧セクション --- */
.rooms-list {
    background-color: #dddddd;
    padding: 0 0 100px;
    overflow-x: hidden;
}

.room-item {
    margin-bottom: 120px;
}

.room-item:last-child {
    margin-bottom: 0;
}

.room-item__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 左側：メイン画像（ブラウザ左端から配置） */
.room-item__visual {
    width: 60vw; 
    margin-left: calc(50% - 50vw);
    padding-right: 60px;
}

.room-item__visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 右側：情報エリア */
.room-item__info {
    width: 40%;
    max-width: 540px;
}

.room-item__en {
    display: block;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 0em;
    margin-bottom: 5px;
    color: var(--main-navy);
}

.room-item__name {
    font-family: var(--font-mincho);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
}

.room-item__sub-lead {
    font-family: var(--font-jp);
    font-size: 13px;
    line-height: 2;
    margin-bottom: 30px;
}

/* ボタンの並び */
.room-item__btns {
    display: flex;
    align-items: center;
    gap: 40px;
}

.room-item__trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-jp);
    font-size: 15px; 
    font-weight: 700;
    padding: 0;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}

/* 共通：予約ボタン（垂直中央揃えを強化） */
.page-cuisine a.btn-reserve,
.page-spend a.btn-reserve,
.room-detail__action a.btn-reserve,
.room-item__inner a.btn-reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #212844;
    color: #fff !important;
    padding: 0 30px;      /* 上下paddingをなくし、heightで高さを指定 */
    height: 40px;         /* 高さを固定してflexで中央寄せ */
    line-height: 1;       /* 行間を1にして沈み込みを防止 */
    font-family: var(--font-mincho);
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.btn-reserve:hover {
    opacity: 0.8;
}

/* --- アコーディオン展開エリア --- */
.room-detail {
    margin-top: 60px;
    display: none;
}

/* スライダー */
.room-detail__slider {
    margin-bottom: 60px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.room-detail__slider img {
    width: 100%;
    height: auto;
    display: block;
}

/* 客室情報 2カラムエリア */
.room-detail__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
    margin-bottom: 60px;
    padding: 0 80px;
}

.room-detail__info-block {
    width: 60%;
}

.room-detail__plan-image {
    margin-top: 75px;
    width: 35%;
}

.room-detail__plan-image img {
    width: 100%;
    height: auto;
}

/* 客室情報タイトル */
.room-detail__info-label {
    display: block;
    font-family: var(--font-en);
    font-size: 11px;
    color: #666;
    margin-bottom: 5px;
}

.room-detail__info-title {
    font-family: var(--font-mincho);
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 400;
}

/* テーブルスタイル */
.room-detail__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-top: 1px solid #ccc;
}

.room-detail__table tr {
    border-bottom: 1px solid #ccc;
}

.room-detail__table th {
    width: 120px;
    padding: 10px 0;
    text-align: left;
    font-weight: 400;
    color: #333;
}

.room-detail__table td {
    padding: 10px 0;
    color: #333;
    line-height: 1.6;
}

/* 下部アクションエリア（中央揃え） */
.room-detail__footer {
    text-align: center;
    margin-top: 40px;
}

.room-detail__action {
    margin-bottom: 30px;
}

.room-detail__close {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-jp);
    font-size: 15px;
    font-weight: 700;
    display: inline-block;
    color: #333;
    transition: opacity 0.3s;
}

.room-detail__close:hover {
    opacity: 0.6;
}

/* --- iPad & SP対応 --- */
@media screen and (max-width: 900px) {
    .rooms-list {
        padding: 0 0 60px;
    }

    .room-item {
        margin-bottom: 80px;
    }

    .room-item__inner {
        flex-direction: column;
        align-items: center; /* センター揃えに変更 */
    }

    .room-item__visual {
        width: 100vw;
        margin-left: 0;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .room-item__info {
        width: 100%;
        padding: 0 0px;
        max-width: none;
        text-align: center; /* テキストを中央寄せ */
    }

    .room-item__lead{
        text-align: justify;
    }

    .room-item__lead br{
        display: none;
    }

    .room-item__btns {
        flex-direction: column; /* 予約ボタンが上、詳細が下の順 */
        align-items: center;    /* ボタン類を中央寄せ */
        gap: 20px;
        width: 100%;
    }

    .btn-reserve {
        width: 100%;
        max-width: 340px; /* 広がりすぎ防止（お好みで調整） */
    }

    .room-item__trigger {
        width: 100%;
        text-align: center;
    }

    /* アコーディオンSPレイアウト */
    .room-detail__content {
        flex-direction: column;
        gap: 40px;
        padding: 0px;
    }

    .room-detail__info-block,
    .room-detail__plan-image {
        width: 100%;
    }
    
    .room-detail__plan-image {
        margin-top: 0;
    }

    /* アコーディオン内のフッター（閉じるボタンなど） */
    .room-detail__footer {
        display: flex;
        flex-direction: column;
        align-items: center; /* 閉じるボタンも中央寄せ */
        gap: 20px;
        margin-top: 40px;
    }

    .room-detail__action {
        width: 100%;
        margin-bottom: 0;
    }
}

/* --- 共通アメニティセクション --- */
.common-amenity {
    background-color: #dddddd; /* 客室一覧と同じ背景色 */
    padding: 100px 200px 120px;
}

.common-amenity__header {
    text-align: center;
    margin-bottom: 60px;
}

.common-amenity__en {
    display: block;
    font-family: var(--font-en);
    font-size: 11px;
    color: #666;
    margin-bottom: 10px;
    letter-spacing: 0em;
}

.common-amenity__title {
    font-family: var(--font-mincho);
    font-size: 20px;
    font-weight: 400;
    color: #333;
}

.common-amenity__grid {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* アイテム間の余白 */
}

.common-amenity__item {
    width: calc(50% - 20px);
}

.common-amenity__image {
    margin-bottom: 25px;
    overflow: hidden;
}

.common-amenity__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* 共通設備タイトル */
.common-amenity__item-title {
    font-family: var(--font-mincho);
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 400;
}

/* テキスト詳細 */
.common-amenity__text {
    font-family: var(--font-jp);
    font-size: 13px;
    line-height: 1.8;
    color: #333;
}

.common-amenity__text span {
    display: block;
    margin-top: 0px;
    font-size: 13px;
}

/* --- SP対応 --- */
@media screen and (max-width: 768px) {
    .common-amenity {
        padding: 60px 0 20px;
    }

    .common-amenity__grid {
        flex-direction: column;
        gap: 50px;
    }

    .common-amenity__item {
        width: 100%;
    }

    .common-amenity__header {
        margin-bottom: 40px;
    }
}

/* --- Common Content Section (Cuisine & Facilities) --- */
.common-content-list {
    background-color: #dddddd;
    padding: 0 0 120px;
    overflow-x: hidden;
}

.common-content-item {
    margin-bottom: 120px;
}

.common-content-item:last-child {
    margin-bottom: 0;
}

.common-content-item__inner {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

/* 左側：メインビジュアル（左突き抜け固定） */
.common-content-item__visual {
    width: 50vw;
    margin-left: calc(50% - 50vw);
    padding-right: 60px;
    position: relative;
}

.common-content-item__visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 右側：情報エリア */
.common-content-item__info {
    padding-top: 50px;
    width: 50%;
}

.common-content-item__en {
    display: block;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 0em;
    color: var(--main-navy);
    margin-bottom: 5px;
}

.common-content-item__name {
    font-family: var(--font-mincho);
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 1px;
}

.common-content-item__sub-lead {
    font-family: var(--font-jp);
    font-size: 14px;
    line-height: 2;
    margin-bottom: 30px;
}

/* ボタンエリア：共通で縦並びを基本とする */
.common-content-item__btns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

/* ボタン本体（お食事・施設共通） */
.btn-common-menu {
    width: 240px;
    /* .btn-reserve のスタイルを継承させる想定 */
}

/* --- SP & iPad対応 --- */
@media screen and (max-width: 900px) {
    .common-content-list {
        padding: 0 0 60px;
    }

    .common-content-item {
        margin-bottom: 80px;
    }

    .common-content-item__inner {
        flex-direction: column;
        align-items: center;
    }

    .common-content-item__visual {
        width: 100vw;
        margin-left: 0;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .common-content-item__info {
        width: 100%;
        padding: 0 0px;
        text-align: center;
        padding-top: 0; /* SPでは上の余白を詰める */
    }

    .common-content-item__lead{
        text-align: justify;
    }

    .common-content-item__name {
        font-size: 20px;
        margin-bottom: 25px;
    }


    .common-content-item__btns {
        align-items: center;
        width: 100%;
    }

    .btn-common-menu {
        width: 100%;
        max-width: 340px;
    }
}

/* --- Facilities: Floor Map --- */
.facilities-map {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.facilities-map__figure {
    max-width: 600px; /* 画像の細かさに合わせて調整してください */
    width: 100%;
}

.facilities-map__figure img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    .facilities-map {
        margin-top: 40px;
        padding: 0 20px;
    }
}

/* --- Spend Specific Styles --- */
.spend-tab {
    margin-top: 60px;
    text-align: center;
}

.spend-tab__lead {
    font-size: 14px;
    margin-bottom: 20px;
}

.spend-tab__btns {
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.spend-tab__btn {
    flex: 1;
    padding: 25px 10px;
    background-color: #dcdcdc; /* グレー背景 */
    color: #333;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.spend-tab__btn .en {
    display: block;
    font-family: var(--font-en);
    font-size: 18px;
    letter-spacing: 0.1em;
}

.spend-tab__btn .jp {
    display: block;
    font-size: 12px;
}

/* アクティブ時のスタイル（ネイビー背景） */
.spend-tab__btn.is-active {
    background-color: var(--main-navy);
    color: #fff;
}

/* コンテンツの切り替え制御 */
.js-spend-content {
    display: none;
}

.js-spend-content.is-active {
    display: block;
}

/* 過ごしかたページでは画像にスライダーの余白がいらないので微調整 */
.page-spend .common-content-item__visual img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .spend-tab {
        margin-top: 40px;
    }
    .spend-tab__btn {
        padding: 15px 10px;
    }
}

/*--------------------------------------------------------------
  Sightseeing Page
--------------------------------------------------------------*/
.sightseeing-map {
    margin-top: 60px;
    text-align: center;
}

.sightseeing-map img {
    max-width: 100%;
    height: auto;
}

/* グリッドレイアウト制御 */
.sightseeing-list {
    padding: 100px 0 150px;
    background-color: #fff;
}

.sightseeing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 40px;
}

/* カードスタイル */
.sightseeing-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.sightseeing-card__link:hover {
    opacity: 0.75;
}

.sightseeing-card__visual {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 15px;
}

.sightseeing-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sightseeing-card__place {
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.sightseeing-card__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.5;
}

.sightseeing-card__text {
    font-size: 13px;
    line-height: 1.8;
}

.sightseeing-card__text p {
    margin: 0;
}

/* レスポンシブ (タブレット 2列) */
@media screen and (max-width: 1024px) {
    .sightseeing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 30px;
    }
}

/* レスポンシブ (スマホ 1列) */
@media screen and (max-width: 767px) {
    .sightseeing-list {
        padding: 60px 0 80px;
    }
    .sightseeing-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .page-sightseeing .sub-message__title {

    }
    .sightseeing-card__title {
        font-size: 16px;
    }
}

/*--------------------------------------------------------------
  Access Page
--------------------------------------------------------------*/
.page-access .sub-message {
    padding-bottom: 40px;
}

.access-station-info {
    margin-top: 30px;
    font-weight: 500;
    color: #333;
}

/* Google Map */
.access-map-section {
    margin-bottom: 100px;
}

.access-map-wrapper {
    width: 100%;
    line-height: 0;
    filter: grayscale(20%); /* サイトのトーンに合わせて少し彩度を落とす */
}

/* アクセス詳細項目 */
.access-detail-section {
    padding-bottom: 120px;
}

.access-item {
    margin-bottom: 100px;
}

.access-item:last-child {
    margin-bottom: 0;
}

.access-item__title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
    font-family: var(--font-mincho);
}


.access-item__figure {
    text-align: center;
}

.access-item__text {
    padding-top: 15px;
    text-align: center;
}

.access-item__text p {
    padding: 0px;
}

.access-item__text img {
    padding-bottom: 50px;
}

.access-item__figure img {
    max-width: 100%;
    height: auto;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
    .access-map-section {
        margin-bottom: 60px;
    }
    
    .access-map-wrapper iframe {
        height: 350px;
    }

    .access-detail-section {
        padding-bottom: 80px;
    }

    .access-item {
        margin-bottom: 60px;
    }

    .access-item__title {
        font-size: 20px;
        margin-bottom: 30px;
    }
}

/*--------------------------------------------------------------
  News Single Page
--------------------------------------------------------------*/
.news-article {
    padding: 100px 0 150px;
    background-color: #fff;
}

.news-article__header {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.news-article__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.news-article__date {
    font-size: 14px;
    letter-spacing: 0.05em;
}

.news-article__category {
    display: inline-block;
    font-size: 12px;
    font-family: var(--font-jp);
    border: 1px solid #333;
    padding: 2px 0px;
    text-align: center;
    white-space: nowrap;
    width: 100px;
}


.news-article__title {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
}

.news-article__visual {
    margin-bottom: 50px;
    text-align: center;
}

.news-article__visual img {
    max-width: 100%;
    height: auto;
}

/* 本文領域のスタイリング */
.news-article__content {
    line-height: 1.6;
    font-size: 15px;
    color: #333;
}

.news-article__content p {
    margin-bottom: 0.5em;
}

.news-article__content h3 {
    font-size: 22px;
    margin: 2em 0 1em;
    padding-left: 15px;
    border-left: 2px solid #333;
}

/* ページネーション */
.news-article__footer {
    margin-top: 100px;
    border-top: 1px solid #eee;
    padding-top: 50px;
}

.news-article__pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.news-article__pager-item a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
}

.news-article__pager-item a:hover {
    opacity: 0.6;
}

.news-article__pager-item--back {
    display: none;/* 20260325 */
}

.news-article__pager-item--back a {
    font-weight: bold;
    border-bottom: 1px solid #333;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
    .news-article {
        padding: 60px 0 100px;
    }
    .news-article__title {
        font-size: 22px;
    }
    .news-article__content {
        font-size: 15px;
    }
    .news-article__footer {
        margin-top: 60px;
    }
}

/*--------------------------------------------------------------
  Related News Section
--------------------------------------------------------------*/
.related-news {
    padding: 80px 0 120px;
    background-color: #dddddd; /* 少し背景色を変えてセクションを区切る */
}

.related-news__title {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
}

.related-news__list {
    border-top: 1px solid #ddd;
    margin-bottom: 50px;
}

.related-news__item {
    display: flex;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    transition: background 0.3s;
}

.related-news__item:hover {
    background-color: #eee;
}

.related-news__date {
    font-size: 13px;
    width: 120px;
    flex-shrink: 0;
}

/* single.php側のカテゴリラップ（PC用余白） */
.news-cat-wrap {
    margin-right: 20px;
}

.related-news__item-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding-left: 20px;
    flex: 1;
}

.related-news__footer {
    text-align: center;
}

.related-news__none {
    text-align: center;
    font-size: 14px;
    padding: 40px 0;
}

/* --- レスポンシブ (SP版) --- */
@media screen and (max-width: 767px) {
    .related-news {
        padding: 60px 0 80px;
    }

    .related-news__item {
        flex-wrap: wrap; /* 折り返しを許可 */
        align-items: center;
        padding: 20px 0;
    }

    .related-news__date {
        width: auto;
        margin-right: 20px;
    }

    .news-cat-wrap {
        margin-right: 0;
    }

    .related-news__item-title {
        width: 100%;       /* 100%にして改行させる */
        flex: none;
        padding-left: 0;
        margin-top: 12px;
        font-size: 14px;
        white-space: normal; /* スマホではタイトルを折り返し表示 */
    }
}