@charset "UTF-8";
/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
*/

:root { --mst-serif: "Hiragino Mincho ProN","Yu Mincho",serif; }

/* 共通コンテナ */
.mst-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* ==========================================================================
   最新ヘッダー：背景完全抹殺・黄金バランス修正版（トータル調整済）
   ========================================================================== */

/* ヘッダー全体の基盤 */
.main-header.is-sub-header {
    position: relative !important; 
    background: #ffffff !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    width: 100% !important;
    z-index: 2000 !important;
}

/* 1. ヘッダー内部の高さ：要素を呼吸させる土台 */
.header-inner { 
    display: flex !important; 
    align-items: center !important; 
    padding: 0 3% !important; 
    height: 100px !important; /* バランスの要：高さを確保 */
    background: transparent !important; /* 親の白を透過 */
}

/* 2. MENUボタン：背景黒を物理的に消し去り、サイズを拡大 */
.header-left {
    flex: 0 0 140px !important; /* 横幅を十分に広げる */
}

.menu-open-btn {
    background: transparent !important; 
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* 三本線アイコン：大きく・太く */
.menu-open-btn .bar {
    display: block !important;
    width: 38px !important; /* 線の長さを目標サイズに */
    height: 2px !important; /* 線の太さをしっかり出す */
    background: #333333 !important;
    margin: 5px 0 !important; 
}

/* MENUテキスト：黒い箱を完全に除去 */
.menu-text {
    background: transparent !important; 
    background-color: transparent !important;
    color: #333333 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
    padding: 0 !important;
    border: none !important;
    letter-spacing: 0.1em !important;
}

/* 3. ロゴ：豆粒サイズから本来の高級感あるサイズへ復元 */
.header-logo-small img { 
    height: 52px !important; /* 20pxから52pxへ拡大。 image_c5b8aa.jpg の比率を再現 */
    width: auto !important; 
}

/* 4. キャッチコピー：右寄せ */
.header-tagline {
    flex: 1 !important;
    text-align: right !important;
    font-size: 14px !important;
    color: #333333 !important;
    padding-right: 30px !important;
    white-space: nowrap !important;
}

/* ハンバーガーボタンの魔法の一行（不要な干渉を防ぐためリセット） */
.menu-open-btn span {
    mix-blend-mode: normal !important;
}



/* -----------------------------------------
   ヒーロースライダー（中央ロゴ：小さく調整）
----------------------------------------- */
.hero-slider-area {
    position: relative;
    width: 100%; height: 100vh;
    overflow: hidden; background: #000;
}
.main-slider {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 1;
}
.slide-item {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.05);
    animation: luxuryZoom 15s infinite;
}
.hero-logo-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 100%;
    max-width: 120px; /* スライダー上の中央ロゴを小さく */
    text-align: center;
    pointer-events: none;
}
.hero-logo-overlay img {
    width: 100%; height: auto;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.3));
}

@keyframes luxuryZoom {
    0% { opacity: 0; transform: scale(1.05); }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0; }
}

/* -----------------------------------------
   カスタム投稿一覧（800px最適化・旅館名セリフ体）
----------------------------------------- */
.inn-list-wrapper, .res-list-wrapper {
    max-width: 800px; /* セクションを引き締める */
    margin: 0 auto;
}

.inn-item, .res-item {
    border-top: 1px solid #ddd;
    padding: 40px 0;
}

/* 旅館名（左上見出し）：セリフ体（明朝体）に変更 */
.inn-item__name, .res-item__name {
    font-family: var(--mst-serif) !important;
    font-size: 22px !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
    color: #333;
    text-align: left;
}

.inn-item__flex, .res-item__flex {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.inn-item__img-box, .res-item__img-box {
    flex: 0 0 45%; /* 画像サイズを調整 */
}
.inn-item__img-box img, .res-item__img-box img {
    width: 100%; height: auto; object-fit: cover;
}

/* 右側：ロゴ・一言キャッチ・住所 */
.inn-item__info-box, .res-item__info-box {
    flex: 1;
}

/* 右側のロゴ：相当小さく */
.inn-item__brand-logo, .res-item__brand-logo {
    margin-bottom: 15px !important;
}
.inn-item__brand-logo img, .res-item__brand-logo img {
    max-width: 80px !important; /* 相当小さく調整 */
    height: auto !important;
}

/* 一言キャッチ：フォント調整と2行崩れ防止 */
.inn-item__copy, .res-item__copy {
    font-family: var(--mst-serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    color: #333;
}

.inn-item__address, .res-item__address {
    font-size: 13px !important;
    color: #888 !important;
    margin-bottom: 20px !important;
}

.inn-item__btn, .res-item__btn {
    display: inline-block !important;
    background-color: #eeb03e !important;
    color: #fff !important;
    padding: 10px 25px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    font-weight: bold;
}

/* -----------------------------------------
   全画面メニュー・その他調整
----------------------------------------- */
.full-menu {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh;
    background: #fff; z-index: 3000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.5s;
}
.full-menu.is-active { opacity: 1; visibility: visible; }
.full-menu-list { list-style: none; padding: 0; text-align: center; }
.full-menu-list li { margin: 30px 0; }
.full-menu-list a {
    font-family: var(--mst-serif); font-size: 32px;
    text-decoration: none; color: #333; letter-spacing: 0.2em;
}
.menu-close-btn { position: absolute; top: 30px; right: 5%; font-size: 40px; background: none; border: none; cursor: pointer; }

/* お知らせ */
.mst-news { padding: 60px 0; }
.mst-news__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.mst-news__title { font-family: var(--mst-serif); font-size: 24px; }
.mst-news__link { display: flex; gap: 30px; padding: 15px 0; text-decoration: none; color: #333; border-bottom: 1px solid #eee; }

/* 強制非表示 */
header#site-header, .site-header, #header, .elementor-location-header {
    display: none !important;
}

@media (max-width: 767px) {
    .inn-item__flex, .res-item__flex { flex-direction: column; }
    .inn-item__img-box, .res-item__img-box { flex: 0 0 100%; }
    .hero-logo-overlay { max-width: 90px; }
}

/* ページネーションのデザイン */
.mst-pagination {
    text-align: center;
    margin-top: 40px;
}
.mst-pagination .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    background: #f4f4f4;
    color: #333;
    text-decoration: none;
    border-radius: 2px;
}
.mst-pagination .current {
    background: #eeb03e;
    color: #fff;
}


/* -----------------------------------------
   宿泊施設集会の見出し部分
----------------------------------------- */

/* グリッド全体のコンテナ */
.biz-grid-container {
    display: flex;
    width: 100%;
    gap: 0; /* 隙間を空ける場合は 20px などに調整 */
    flex-wrap: wrap;
}

/* 各カードの基本スタイル */
.biz-card {
    position: relative;
    flex: 1;
    min-width: 50%; /* PCで2カラム */
    height: 450px; /* 高さを指定 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

/* 背景画像 */
.biz-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}

/* マウスホッパーで少しズームする演出 */
.biz-card:hover .biz-card-bg {
    transform: scale(1.05);
}

/* 暗幕（オーバーレイ） */
.biz-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* 0.4を大きくすると暗くなります */
    z-index: 2;
    transition: background 0.3s;
}

.biz-card:hover::after {
    background: rgba(0, 0, 0, 0.3); /* ホバー時に少し明るく */
}

/* テキストコンテンツ */
.biz-card-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #ffffff !important;
}

.biz-card-title {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: 0.1em !important;
    color: #ffffff !important;
}

.biz-card-sub {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    opacity: 0.9;
    color: #ffffff !important;
}

/* スマホ対応：縦に並べる */
@media (max-width: 767px) {
    .biz-card {
        min-width: 100%;
        height: 300px;
    }
}

/* --- Coming Soon用の追加スタイル --- */

/* 飲食店カード（画像なし）の背景色設定 */
.biz-card.coming-soon .biz-card-bg {
    background-color: #4a4a4a; /* お好みのグレーやブランドカラーに変更してください */
    background-image: none !important;
}

/* Coming Soon テキストのスタイル */
.coming-soon-text {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: 18px !important;
    margin-top: 15px !important;
    padding: 5px 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: inline-block;
    letter-spacing: 0.1em;
    color: #ffffff !important;
}

/* 準備中なのでホバー時のズームを無効化 */
.biz-card.coming-soon:hover .biz-card-bg {
    transform: none;
}

/* リンクではない場合、カーソルをデフォルトに戻す */
.biz-card.coming-soon {
    cursor: default;
}

/* 会社概要の装飾 */
.about-section {
    padding: 100px 0;
    background-color: #fff;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.about-container {
    max-width: 1000px; /* 画像を入れるため少し広げました */
    margin: 0 auto;
    padding: 0 30px;
}

.about-header {
    margin-bottom: 60px;
    text-align: center;
}

.about-sub-title {
    display: block;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: #eeb03e;
    margin-bottom: 10px;
    font-family: sans-serif;
}

.about-main-title {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.1em;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.about-main-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background-color: #333;
}

/* レイアウト：画像と情報の横並び */
.about-flex-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 80px;
}

.about-image {
    flex: 1;
    min-width: 40%;
}

.about-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 10px 10px 0px #f9f9f9; /* さりげない装飾 */
}

.about-info {
    flex: 1.2;
}

/* 基本情報リストの調整 */
.about-item {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 15px 0; /* 少しコンパクトに */
    align-items: baseline;
}

.about-item dt {
    width: 100px;
    font-size: 14px;
    color: #888;
}

.about-item dd {
    flex: 1;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* 会社沿革のスタイル */
.history-section {
    margin-top: 50px;
    border-top: 2px solid #333;
    padding-top: 40px;
}

.history-title {
    font-size: 20px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.history-item {
    display: flex;
    padding: 12px 0;
}

.history-item dt {
    width: 150px;
    font-weight: bold;
    color: #333;
}

.history-item dd {
    flex: 1;
    margin: 0;
    color: #555;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .about-flex-layout {
        flex-direction: column;
        gap: 30px;
    }
    .about-image, .about-info {
        width: 100%;
    }
    .history-item {
        flex-direction: column;
    }
    .history-item dt {
        margin-bottom: 5px;
        font-size: 14px;
    }
}

/* アクセスマップのスタイル */
.access-map-section {
    margin-top: 60px;
}

.map-wrapper {
    width: 100%;
    line-height: 0; /* 下部の余計な隙間を解消 */
    filter: grayscale(0.2); /* 少し彩度を落とすとサイトの雰囲気に馴染みます。お好みで。 */
    border: 1px solid #eee;
}

.map-wrapper iframe {
    vertical-align: bottom;
}

/* スマホ対応：地図の高さを少し低くする */
@media (max-width: 767px) {
    .access-map-section {
        margin-top: 40px;
    }
    .map-wrapper iframe {
        height: 300px;
    }
}

/* 恩沢とフォームの装飾 */
.inquiry-section {
    padding: 100px 0;
    background-color: #fff;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.inquiry-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ヘッダーデザイン（会社概要と統一） */
.inquiry-header {
    margin-bottom: 60px;
    text-align: center;
}

.inquiry-sub-title {
    display: block;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: #eeb03e; /* ゴールド系 */
    margin-bottom: 10px;
    font-family: sans-serif;
}

.inquiry-main-title {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.1em;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.inquiry-main-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background-color: #333;
}

/* =============================================
   コンタクトフォーム全体のスタイル
   ============================================= */

/* フォームテーブル全体のスタイル */
.mst-form-table {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid #eee;
}

/* 各行のスタイル */
.mst-form-row {
    display: flex;
    border-bottom: 1px solid #eee;
    align-items: center;
    padding: 20px 0;
}

/* ラベルエリア（左側） */
.mst-form-label {
    width: 250px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30px;
}

/* 入力エリア（右側） */
.mst-form-input {
    flex: 1;
}

.mst-form-row.row-textarea {
    align-items: flex-start;
}

/* 必須・任意ラベル */
.required, .optional {
    font-size: 11px;
    padding: 2px 8px;
    margin-left: 10px;
    font-weight: normal;
    color: #fff;
    min-width: 40px;
    text-align: center;
}
.required { background: #b13546; }
.optional { background: #999; }

/* 入力枠の微調整 */
.mst-form-input input[type="text"],
.mst-form-input input[type="email"],
.mst-form-input input[type="tel"],
.mst-form-input textarea {
    width: 100%;
    max-width: 500px;
    padding: 10px 15px;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    font-size: 15px;
}

/* =============================================
   送信・同意エリア（レイアウト修正済）
   ============================================= */

/* 1. 送信エリア全体の設定 */
.mst-form-footer {
    margin-top: 50px;
    text-align: center; /* 子要素を中央に集める */
}

/* 2. 同意チェックボックス：
      「左揃え」のまま「中央」に見えるように配置 */
.mst-form-footer .wpcf7-form-control-wrap {
    display: inline-block !important; /* 最小幅の箱を作る */
    text-align: left !important;      /* 文字の開始位置を左に揃える */
    margin: 0 auto !important;
}

/* 各チェックボックス項目を綺麗に縦に並べる */
div.wpcf7 .wpcf7-list-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 左寄せ */
    margin: 0 0 12px 0 !important;
    width: auto !important;
}

div.wpcf7 .wpcf7-list-item-label {
    margin-left: 10px;
    font-size: 14px;
    color: #333;
    white-space: nowrap; /* 改行を防ぐ */
}

/* 3. 送信ボタン：NEWS一覧と統一感のある中央配置 */
.mst-form-submit .wpcf7-submit {
    display: block !important;
    margin: 40px auto 0 !important; /* 左右autoで完全中央 */
    padding: 18px 80px !important;
    background: #1a1a1a !important; /* ボタンを墨色に */
    border: 1px solid #1a1a1a !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 2px;
}

/* ホバー時はブランドカラー（赤/ピンク系）へ */
.mst-form-submit .wpcf7-submit:hover {
    background: #b13546 !important;
    border-color: #b13546 !important;
    color: #fff !important;
}

/* =============================================
   レスポンシブ対応
   ============================================= */

@media (max-width: 767px) {
    .mst-form-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 0;
    }
    .mst-form-label {
        width: 100%;
        margin-bottom: 10px;
        padding-right: 0;
    }
    .mst-form-input {
        width: 100%;
    }
    .mst-form-input input, .mst-form-input textarea {
        max-width: 100%;
    }
    .mst-form-submit .wpcf7-submit {
        width: 100%;
        padding: 15px 0 !important;
    }
    /* スマホでは左寄せを解除し、全体的に中央に */
    .mst-form-footer .wpcf7-form-control-wrap {
        display: block !important;
    }
}

/* プライバシーポリシー セクション全体の装飾 */
.privacy-section {
    padding: 100px 0;
    background-color: #fff;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    color: #333;
}

.privacy-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ヘッダーデザイン：会社概要と完全統一 */
.privacy-header {
    margin-bottom: 80px;
    text-align: center;
}

.privacy-sub-title {
    display: block;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: #eeb03e; /* ゴールドアクセント */
    margin-bottom: 10px;
    font-family: sans-serif;
}

.privacy-main-title {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.1em;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.privacy-main-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background-color: #333;
}

/* コンテンツ部分の装飾 */
.privacy-content {
    line-height: 2; /* 読みやすい行間 */
    font-size: 16px;
    text-align: justify;
}

.privacy-item {
    margin-bottom: 50px;
}

.privacy-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    border-left: 3px solid #eeb03e; /* 見出し横にゴールドのライン */
    padding-left: 15px;
}

.privacy-item p {
    margin-bottom: 15px;
}

.privacy-item ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 15px;
}

.privacy-item li {
    margin-bottom: 5px;
}

/* お問い合わせ窓口のボックス */
.contact-info-box {
    background-color: #f9f9f9;
    padding: 30px;
    border: 1px solid #eee;
}

.contact-info-box h3 {
    border-left: none;
    padding-left: 0;
    margin-bottom: 20px;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .privacy-section {
        padding: 60px 0;
    }
    .privacy-main-title {
        font-size: 26px;
    }
    .privacy-item h3 {
        font-size: 17px;
    }
}

/* --- フッター全体のスタイル --- */
.site-footer {
    background-color: #1a1a1a !important; /* 左右の端まで黒く塗る */
    color: #fff;
    padding: 0 0 30px !important; /* 上部の黒帯を削除 */
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    /* 画面幅いっぱいに広げるための指定 */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.footer-container {
    max-width: 1000px; /* 中身の幅は維持 */
    margin: 0 auto;
    padding: 60px 30px 0 !important; /* 内部の余白を調整 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ロゴエリア */
.footer-logo {
    margin-bottom: 25px;
}

.logo-main {
    font-size: 24px;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.logo-sub {
    font-size: 14px;
    margin-left: 5px;
}

.footer-address {
    font-style: normal;
    font-size: 14px;
    line-height: 2;
    color: #ccc;
}

.footer-contact {
    display: block;
    margin-top: 10px;
    color: #fff;
}

/* ナビゲーション */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 15px;
    text-align: right;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.2em;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #eeb03e;
}

/* コピーライト部分 */
.footer-bottom {
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 20px 30px 0;
    border-top: 1px solid rgba(238, 176, 62, 0.3);
    text-align: center;
}

.copyright {
    font-size: 11px;
    color: #888;
    letter-spacing: 0.1em;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .site-footer {
        padding: 0 0 20px !important;
    }
    .footer-container {
        padding-top: 40px !important;
        flex-direction: column;
        text-align: center;
    }
    .footer-info {
        margin-bottom: 40px;
        width: 100%;
    }
    .footer-nav li {
        text-align: center;
    }
    .footer-bottom {
        margin-top: 40px;
    }
}

/* 1. セクション全体の背景と余白をリセット */
.inn-intro-section {
    padding: 20px 0 !important; /* 外側の余白を最小限に */
    background-color: #fdfaf5 !important;
}

/* 2. 白いボックス自体の上下余白を強制カット */
.inn-intro-container {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important; /* 100px以上あった余白を40pxに固定 */
    background-color: #fff !important;
    box-shadow: none !important;
}

/* 3. ヘッダー内の余計な隙間を削除 */
.inn-intro-header {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* 4. 英語と日本語の間の距離を詰める */
.inn-intro-sub {
    display: block !important;
    font-size: 14px !important;
    letter-spacing: 0.3em !important;
    color: #eeb03e !important;
    margin-bottom: 5px !important; /* 15pxから5pxへ短縮 */
}

/* 5. 宿泊施設紹介の文字と下の線の距離を詰める */
.inn-intro-title {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: 32px !important;
    margin: 0 !important;
    padding-bottom: 10px !important; /* 線の位置を文字に近づける */
    line-height: 1.2 !important;
}

/* 下の線の位置調整 */
.inn-intro-title::after {
    width: 30px !important;
    bottom: 0 !important;
}

/* NEWSカテゴリー全体の幅制限 */
.category-news .page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 記事一行の基本構造 */
.news-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
    gap: 40px;
}

/* 左側のテキストエリア */
.news-item-content {
    flex: 1; /* 残りの幅をすべてタイトルと抜粋に割り当てる */
}

.news-date {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}

.news-title {
    margin: 0 0 12px;
    font-size: 19px;
    font-family: "Hiragino Mincho ProN", serif;
    line-height: 1.4;
}

.news-title a {
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.news-title a:hover {
    color: #eeb03e;
}

.news-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* 右側の画像・ボタンエリア */
.news-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せ */
    flex: 0 0 200px; /* 右側の幅を固定して重なりを防ぐ */
}

.news-thumbnail img {
    width: 200px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 詳細ボタンをオシャレに */
.btn-detail {
    display: inline-block;
    background: #1a1a1a;
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 2px; /* 墨色に合う少し角のあるデザイン */
    font-size: 12px;
    text-decoration: none;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: 0.3s;
}

.btn-detail:hover {
    background: #eeb03e;
    transform: translateY(-2px);
}

/* スマホ対応（重なりを避けるため縦並びへ） */
@media (max-width: 767px) {
    .news-list-item {
        flex-direction: column;
        gap: 20px;
    }
    .news-item-side {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        flex: none;
    }
    .news-thumbnail img {
        width: 120px;
        height: 80px;
        margin-bottom: 0;
    }
}

/* NEWSカテゴリー全体の幅制限 */
.category-news .page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 記事一行の基本構造 */
.news-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上揃え */
    padding: 40px 0;
    border-bottom: 1px solid #eee;
    gap: 40px;
}

/* 左側のテキストエリア */
.news-item-content {
    flex: 1;
}

.news-date {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}

.news-title {
    margin: 0 0 15px;
    font-size: 20px;
    font-family: "Hiragino Mincho ProN", serif;
    line-height: 1.4;
}

.news-title a {
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.news-title a:hover {
    color: #eeb03e;
}

.news-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px; /* 抜粋とボタンの間の余白 */
}

/* 詳細ボタンの装飾 */
.news-button-container {
    display: block;
}

.btn-detail {
    display: inline-block;
    background: #1a1a1a; /* 墨色 */
    color: #fff !important;
    padding: 10px 30px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: 0.3s ease;
    border: 1px solid #1a1a1a;
}

.btn-detail:hover {
    background: #eeb03e; /* ブランドカラー */
    border-color: #eeb03e;
}

/* 右側の画像エリア */
.news-thumbnail {
    flex: 0 0 240px; /* 画像の幅を固定 */
}

.news-thumbnail img {
    width: 240px;
    height: 140px;
    object-fit: cover;
    border-radius: 2px;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .news-list-item {
        flex-direction: column-reverse; /* スマホでは画像を上に */
        gap: 20px;
    }
    .news-thumbnail, .news-thumbnail img {
        width: 100%;
        height: auto;
    }
    .news-item-content {
        width: 100%;
    }
}

/* NEWS一覧の見出し：サイズ20pt、余白を極小に */
.news-archive-title {
    font-size: 20pt !important;
    font-family: "Hiragino Mincho ProN", serif;
    font-weight: 500;
    color: #333;
    margin: 0 !important; /* 見出し自体のマージンをゼロに */
    letter-spacing: 0.05em;
}

/* 見出しを囲むエリアの余白を調整 */
.news-header {
    padding-top: 20px !important;    /* 上の余白 */
    padding-bottom: 10px !important; /* 下の線までの余白 */
    margin-bottom: 20px !important;  /* 下の線から記事までの余白 */
    border-bottom: 1px solid #eee;   /* 控えめな区切り線 */
}

/* 記事コンテンツ全体の開始位置を調整 */
.category-news .page-content {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 0 !important; /* 記事リストの上のパディングを削除 */
}

/* =============================================
   TOPページ：About us 黒背景塗りつぶしボタン
   ============================================= */

/* 1. ボタン全体の配置 */
.about-btn-wrapper {
    text-align: center !important;
    margin: 80px auto !important;
    display: flex;
    justify-content: center;
}

/* 2. ボタン本体：ベースは白背景・黒枠 */
.about-styled-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    width: 320px !important;
    height: 120px !important;
    
    border: 1px solid #1a1a1a !important; /* 黒い枠線 */
    background: #ffffff !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important; /* 背景がはみ出さないように */
    transition: all 0.4s ease !important;
    z-index: 1 !important;
}

/* 3. 背景塗りつぶし用の仕掛け（疑似要素） */
.about-styled-button::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important; /* 最初は左に隠れている */
    width: 100% !important;
    height: 100% !important;
    background: #1a1a1a !important; /* 黒で塗りつぶす */
    transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1) !important;
    z-index: -1 !important;
}

/* ホバー時に背景が左からスライドしてくる */
.about-styled-button:hover::before {
    left: 0 !important;
}

/* 4. "ABOUT US"（英語：上段） */
.about-styled-button .btn-eng {
    color: #b13546 !important; /* 初期は赤ピンク */
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 8px !important;
    transition: color 0.4s !important;
}

/* 5. "Mスタイルについて"（日本語：下段） */
.about-styled-button .btn-jp {
    color: #1a1a1a !important; /* 初期は黒 */
    font-size: 20px !important;
    font-family: "Hiragino Mincho ProN", serif !important;
    font-weight: 500 !important;
    transition: color 0.4s !important;
}

/* =============================================
   ホバー時の文字色反転（白へ）
   ============================================= */

.about-styled-button:hover .btn-eng,
.about-styled-button:hover .btn-jp {
    color: #ffffff !important; /* 背景が黒くなるので文字は白に */
}

/* スマホ対応 */
@media (max-width: 767px) {
    .about-styled-button {
        width: 280px !important;
        height: 100px !important;
    }
}

/* =============================================
   スマホ表示時のロゴ復活と配置修正
   ============================================= */
@media (max-width: 767px) {
    /* 1. ヘッダー内部：ロゴを消さずに左右に散らす */
    .header-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
        height: 70px !important; /* スマホ用の高さ */
    }

    /* 2. ロゴ：スマホでの非表示設定を解除して中央付近に表示 */
    .header-logo-small {
        display: block !important;
        visibility: visible !important;
        margin: 0 auto !important;
        flex: 1 !important;
        text-align: center !important;
    }

    .header-logo-small img {
        display: inline-block !important;
        height: 32px !important; /* スマホで最適なサイズ */
        width: auto !important;
    }

    /* 3. MENUボタン：左端に固定 */
    .header-left {
        flex: 0 0 60px !important;
        display: flex !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    /* 4. キャッチコピー：スマホではスペースがないため非表示を維持 */
    .header-tagline {
        display: none !important;
    }
}