@charset "UTF-8";
/*
    Template:   swell
    Theme Name: SWELL CHILD
    Theme URI:  https://swell-theme.com/
    Description: SWELLの子テーマ
    Version:    1.0.0
    Author:     LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License:     GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* =====================================================
   Webフォント読み込み
   ・Outfit：英数字のみに適用される欧文フォント
   ・日本語フォントはシステムフォントを使用（軽量化のため）
   ・Noto Serif JP は削除（SVGタイトル化のため不要）
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');


/* =====================================================
   CSS変数（サイト全体のデザイン集中管理）
   ここを変更するとサイト全体に反映されます
   変数名のプレフィックス「--ds-」= daifukuya style

   【重要】
   この変数はstyle.css・スニペット・追加CSS等から
   var(--ds-○○) で参照されます。
   変数名を変更する場合は、使用中のスニペットも
   あわせて変更してください。
   （スニペットタイトルに変数名を記載しておくと管理しやすいです）
   ===================================================== */
:root {

    /* -------------------------------------------------
       共通カラー
       ・SWELLカスタマイザーで管理する色（テキスト・背景・
         メインカラー・リンクカラー）はここには書かない
       ・独自パーツで繰り返し使う色のみここで管理する
       ------------------------------------------------- */
    --ds-white:          #ffffff;   /* 白（ボタン文字・スマホメニュー背景等） */
    --ds-border:         #e0e0e0;   /* ボーダー・区切り線 */


    /* -------------------------------------------------
       PCフローティングボタン（FAB）
       ・画面右下に固定表示されるボタン群
       ・スニペット使用：[スニペットタイトルにvar名を記載]
       ------------------------------------------------- */
    --ds-fab-bg:         #607d61;   /* ボタン背景色（オリーブグリーン） */
    --ds-fab-color:      #ffffff;   /* アイコン・ラベル文字色 */
    --ds-fab-shadow:     rgba(0, 0, 0, 0.25);  /* ボタンの影 */


    /* -------------------------------------------------
       スマホ下部固定ボタン（SP Bottom Menu）
       ・スマホ表示時に画面最下部に横並び固定されるメニュー
       ・スニペット使用：[スニペットタイトルにvar名を記載]
       ------------------------------------------------- */
    --ds-sp-bg:          #ffffff;   /* メニュー背景色（白） */
    --ds-sp-color:       #333333;   /* アイコン・ラベル文字色（黒） */
    --ds-sp-border:      #e0e0e0;   /* 上部ボーダー色 */


    /* -------------------------------------------------
       フッター
       ・ページ最下部のフッターエリア
       ・3分割レイアウト（左：営業カレンダー／中：情報／右：情報）
       ------------------------------------------------- */
    --ds-footer-bg:      #7a8a96;   /* フッター背景色（青みグレー） */
    --ds-footer-color:   #ffffff;   /* フッター文字色 */


    /* -------------------------------------------------
       営業カレンダー（FullCalendar使用）
       ショートコード：[shop_calendar]
       ・フッター内（1ヶ月表示）と専用ページ（2ヶ月表示）で使用
      ------------------------------------------------- */
    --ds-cal-closed:     #0071B0;   /* 休業日マーク色（青） */
    --ds-cal-short:      #91ad70;   /* 時短営業日マーク色（緑） */
    --ds-cal-today:      #e0e0e0;   /* 今日のハイライト色（薄グレー） */
    --ds-cal-sunday:     #E2571E;   /* 日曜日の曜日テキスト色（赤橙） */
    --ds-cal-saturday:   #0071B0;   /* 土曜日の曜日テキスト色（青） */


    /* -------------------------------------------------
       営業状態表示
       ・ページ上部バーまたはフローティングで営業状況を表示
       ・営業カレンダーと連動してテキストと色が切り替わる
       ------------------------------------------------- */
    --ds-status-open:    #8fad6e;   /* 通常営業中（抹茶色） */
    --ds-status-short:   #8fad6e;   /* 時短営業中（抹茶色） */
    --ds-status-closed:  #e05555;   /* 休業日（赤） */


    /* -------------------------------------------------
       フォント
       ・SWELLカスタマイザーで「游ゴシック」を設定済み
       ・--ds-font-base は独自パーツ（FAB・カレンダー等）用
       ・Outfit（欧文）を先頭に置くことで英数字のみ欧文フォントが適用される
       ・日本語はシステムフォント（游ゴシック→ヒラギノ→メイリオ）にフォールバック
       ・Androidはsans-serifにフォールバック（SWELLが自動処理）
       ・見出しフォント（--ds-font-heading）は削除
         → タイトル・ブランド名はSVG化で対応
         → その他見出しは游ゴシック統一（軽量化優先）
         → 必要になった時点で変数を追加する
       ------------------------------------------------- */
    --ds-font-base:
        'Outfit',                       /* 欧文（英数字のみに適用） */
        '游ゴシック体',                  /* Mac */
        'Yu Gothic',                    /* Windows */
        YuGothic,                       /* Mac（旧表記） */
        'Hiragino Kaku Gothic ProN',    /* Mac（游ゴシックなし時） */
        'Hiragino Sans',                /* Mac（新表記） */
        Meiryo,                         /* Windows（游ゴシックなし時） */
        sans-serif;                     /* Android・その他フォールバック */


    /* -------------------------------------------------
       角丸サイズ
       ・和テイストに合わせて控えめな設定
       ・丸ボタン（FAB等）は--ds-radius-fullを使用
       ------------------------------------------------- */
    --ds-radius-sm:      2px;    /* ほぼ角張り（バッジ・タグ等） */
    --ds-radius-md:      6px;    /* 控えめな角丸（カード・ポップアップ等） */
    --ds-radius-full:    50%;    /* 完全な丸（FABボタン等） */


    /* -------------------------------------------------
       z-index（重なり順）
       ・Illustratorのレイヤーと同じ概念
       ・数値が大きいほど手前に表示される
       ・4階層で管理（用途はコメント参照）
       ------------------------------------------------- */
    --ds-z-low:     100;     /* 通常パーツ（バナー・カード等） */
    --ds-z-mid:     1000;    /* ヘッダー・メニュー等 */
    --ds-z-high:    9999;    /* 最前面固定パーツ（FAB・スマホ下部メニュー等） */
    --ds-z-top:     10000;   /* 最前面ポップアップ（モーダル・営業案内ポップアップ等） */
}


/* =====================================================
   サイト全体：フォント適用
   ・独自パーツにはvar(--ds-font-base)を個別に指定
   ・SWELLが管理するbodyフォントはカスタマイザーに任せる
   ===================================================== */

/* 見出し（SWELLデフォルトのスタイルを上書き） */
h2, h3 {
    /* 游ゴシック統一（軽量化優先・SVG化対象は除く） */
    font-family: var(--ds-font-base);
    font-weight: 400;
}
h2 {
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ds-border);  /* 薄いグレーの一本線 */
    margin-top: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;   /* 和らしい文字間隔（控えめ） */
}
h3 {
    letter-spacing: 0.08em;
}

/* =====================================================
   メインメニュー：
   ===================================================== */

/* メインメニュー：サブメニュー区切り線 */
.menu-divider > a {
    pointer-events: none !important;
    cursor: default !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 区切り線の > アイコンを非表示 */
.menu-divider .c-arrow {
    display: none !important;
}

/* 区切り線のテキストを非表示にしてボーダーラインを表示 */
.menu-divider .ttl {
    display: block;
    height: 1px;
    background: var(--ds-border);
    overflow: hidden;
    color: transparent;
    margin: 1px 0px 1px 0px;
}

/* 区切り線の > アイコンを非表示 */
.menu-divider > a::after,
.menu-divider > a::before {
    display: none !important;
}

/* 電話メニューをPCで非表示 */
@media (min-width: 769px) {
    .menu-item-tel { display: none; }
}

/* =====================================================
   フッター
   ===================================================== */

/* ここからフッター1 */
/* ① .footer-brand：display・color をまとめた（重複解消） */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--ds-footer-color);
}

/* ⑤ .footer-catch-sub：創業年数など補足キャッチ（.footer-catchの上に表示） */
   .footer-catch-sub {
       font-size: 12px;
       letter-spacing: 0.05em;
       margin-bottom: 6px;
       opacity: 0.85;
   }

/* ② .footer-catch：font-size・margin-bottom をまとめた（重複解消） */
.footer-catch {
    font-size: 14px;
    margin-bottom: 15px;
}

.footer-sns-link svg {
    width: 24px;
    height: 24px;
    color: var(--ds-footer-color);
}

/* ③ .footer-logo svg：margin-bottom を1つにまとめた（重複解消） */
.footer-logo svg {
    width: 180px;
    height: auto;
    color: var(--ds-footer-color);
    margin-bottom: 24px;
}

.footer-sns {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

/* ここからフッター2 */
.footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-tel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    padding: 12px 55px;
    margin: 20px 0;
    background: #5a6a76;
    border-radius: 50px;
    color: var(--ds-footer-color);
    text-decoration: none !important;
    font-weight: bold;
    font-size: 16px;
}

/* ④ .footer-tel-btn svg：20px と 18px の競合を18pxに統一（重複解消） */
.footer-tel-btn svg {
    width: 18px;
    height: 18px;
    color: var(--ds-footer-color);
}

.footer-tel-btn:hover {
    background: #4a5a66;
}

/* =====================================================
   トップページ：
   ===================================================== */

.top #content {
    padding-top: 2.5em;
}

/* =====================================================
   ページタイトル
   ===================================================== */

/* 固定ページ：コンテンツ内タイトルを非表示 */
.l-mainContent__inner .c-pageTitle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* post_contentの上マージンをリセット */
#main_content .post_content {
    margin-top: 0 !important;
}
.page .l-content {
    padding-top: 0;
}
.blog .l-content {
    padding-top: 0;
}

/* ページタイトルブロック：中央揃え */
.page-title-block .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0 !important;
}

/* ページタイトル：アイコン */
.page-title-block svg:first-child {
    width: 50px;
    height: 50px;
    color: #8fad6e;
}

/* ページタイトル：タイトルSVG */
.page-title-block svg:nth-child(2) {
    width: 30%;
    height: auto;
}

/* ページタイトル：サブタイトル */
.page-title-block .page-subtitle {
    margin-top: -14px;
    font-size: 0.8em;
}

/* =====================================================
   サイドバー
   ===================================================== */

/* サイドバー：バナー共通ホバー */
.sb-banner {
    transition: transform 0.2s, opacity 0.2s;
}
.sb-banner:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* =====================================================
   サイドバー：営業案内バナー
   ===================================================== */

.sb-shop-status-banner {
    position: relative;
    display: block;
    text-decoration: none;
}

.sb-shop-status-banner svg {
    display: block;
    width: 100%;
}

/* SVG上のオーバーレイ全体 */
.sb-shop-status-overlay {
    position: absolute;
    top: 42%;
    bottom: 16%;
    left: 1.5%;
    right: 8%;
    display: flex;
    align-items: center;
    gap: 4%;
}

/* 左：日付エリア（約1/3） */
.sb-shop-status-date {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    flex-shrink: 0;
    gap: 4px;
}

.sb-shop-status-month {
    font-size: 1em;
    font-weight: 700;
    color: #2b2b2b;
    font-family: 'Outfit', sans-serif;
}

.sb-shop-status-day {
    font-size: 2.5em;
    font-weight: 700;
    color: #2b2b2b;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    margin-bottom: 2.5px;
}

.sb-shop-status-weekday {
    font-size: 0.9em;
    color: #2b2b2b;
}

/* 右：営業情報エリア（約2/3） */
.sb-shop-status-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding-top: 24px;
    overflow: hidden;
    min-width: 0;
    margin-left: -5%;
}

.sb-shop-status-label {
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    padding: 2px 12px;
    min-width: 170px;
    border-radius: var(--ds-radius-sm);
    border: 1.5px solid var(--ds-status-open);
    color: var(--ds-status-open);
    background: transparent;
    align-self: center;
    margin-left: 2%;
    max-width: 120%;
    box-sizing: border-box;
}

/* 営業ステータスの色・枠・背景切り替え */
.sb-shop-status-label[data-status="open"] {
    border-color: var(--ds-status-open);
    color: var(--ds-status-open);
    background: transparent;
}

.sb-shop-status-label[data-status="open_short"] {
    border-color: var(--ds-status-short);
    color: #fff;
    background: var(--ds-status-short);
}

.sb-shop-status-label[data-status="close"] {
    border-color: var(--ds-status-closed);
    color: #fff;
    background: var(--ds-status-closed);
}

.sb-shop-status-label-detail {
    font-size: 1.5em;
    font-weight: 700;
    color: #2b2b2b;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    width: 100%;
    overflow: hidden;
    word-break: break-all;
    margin-top: 6px;
    margin-left: 0%;
}

/* =====================================================
   サイドバー：電話バナー
   ===================================================== */

.sb-tel-banner {
    position: relative;
    display: block;
    text-decoration: none;
}
.sb-tel-banner svg {
    display: block;
    width: 100% !important;
}
.sb-tel-text {
    position: absolute;
    bottom: 16%;
    left: 0;
    right: 0;
    text-align: center;
    padding-left: 22%;
    line-height: 1.2;
}
.sb-tel-label {
    font-size: 0.85em;
    color: #4C4948;
}
.sb-tel-num {
    font-size: 1.7em;
    font-weight: bold;
    color: #4C4948;
    font-family: 'Outfit', sans-serif;
    position: relative;
    top: 3px;
}

/* =====================================================
   サイドバー：来店予約・フォーム・よくある質問バナー
   ===================================================== */

.sb-reserve-banner,
.sb-form-banner,
.sb-faq-banner {
    display: block;
    text-decoration: none;
}

.sb-reserve-banner svg,
.sb-form-banner svg,
.sb-faq-banner svg {
    display: block;
    width: 100%;
}


/* =====================================================
   Googleマップ
   ===================================================== */

/* 角丸 */
.map-widget-wrap iframe {
    border-radius: var(--ds-radius-md);
}

/* =====================================================
   マップエリア：ボタン
   ===================================================== */
.map-widget-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.map-external-link,
.map-access-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #8fad6e;
    border-radius: 2px;
    color: #8fad6e;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
    flex: 1;
    justify-content: center;
    border-radius: 4px;
}

.map-access-link {
    color: #6b8f3e;
    border-color: #6b8f3e;
}

.map-external-link:hover,
.map-access-link:hover {
    opacity: 0.7;
}

.map-external-link svg,
.map-access-link svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .map-external-link,
    .map-access-link {
        flex: none;
        width: 100%;
        justify-content: center;
    }
}


/* =====================================================
   独自パーツ：営業カレンダー
   ショートコード：[shop_calendar]
   ・フッター内（1ヶ月）・専用ページ（2ヶ月）で使用
   ===================================================== */

/* フォント・全体レイアウト（2ヶ月横並び）をまとめた */
.shop-cal-wrapper {
    font-family: var(--ds-font-base);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin: 2.5em 0;
}
.shop-cal-unit {
    flex: 1;
    min-width: 280px;
    max-width: 340px;
}

/* FullCalendarデフォルトのボーダー・背景をリセット */
.shop-cal-wrapper .fc td,
.shop-cal-wrapper .fc th,
.shop-cal-wrapper .fc-scrollgrid {
    border: none;
    background: none;
}

/* 日付セルのフレーム */
.shop-cal-wrapper .fc-daygrid-day-frame {
    position: relative;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.shop-cal-wrapper .fc-daygrid-day,
.shop-cal-wrapper td.fc-daygrid-day {
    padding: 0;
    margin: 0;
    height: auto;
}

/* 日付テキストを中央に配置 */
.shop-cal-wrapper .fc-daygrid-day-top {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin: 0;
    padding: 0;
    float: none;
}
.shop-cal-wrapper .fc-daygrid-day-number {
    color: inherit;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    line-height: 1;
    padding: 0;
    margin: 0;
    float: none;
    display: block;
}

/* 休業日・時短営業日：日付テキストを白にする */
.shop-cal-wrapper .is-event .fc-daygrid-day-number {
    color: var(--ds-white);
}

/* 休業日・時短営業日のマーク（丸または角丸） */
.shop-cal-status-mark {
    width: 38px;
    height: 38px;
    border-radius: var(--ds-radius-full);   /* 丸にする場合：--ds-radius-full / 角丸にする場合：--ds-radius-sm */
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
}
.shop-cal-mark--close       { background-color: var(--ds-cal-closed); }
.shop-cal-mark--open-short  { background-color: var(--ds-cal-short); }

/* 今日のハイライト */
.shop-cal-wrapper .fc-day-today .fc-daygrid-day-frame::before {
    content: "";
    width: 38px;
    height: 38px;
    background-color: var(--ds-cal-today);
    border-radius: var(--ds-radius-full);   /* 丸にする場合：--ds-radius-full / 角丸にする場合：--ds-radius-sm */
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* FullCalendarデフォルトの今日の黄色背景を無効化 */
.shop-cal-wrapper .fc .fc-day-today {
    background: none !important;
}

/* 年月タイトル（SWELLのh2スタイルをリセット） */
.shop-cal-wrapper h2 {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    letter-spacing: normal !important;
}
.shop-cal-wrapper h2::after,
.shop-cal-wrapper h2::before {
    display: none !important;
}

/* 年月タイトルのフォントサイズ */
.shop-cal-wrapper .fc .fc-toolbar-title {
    font-size: 1.25em;
    margin-bottom: 2px;
    line-height: 1 !important;
}

/* 曜日ヘッダー */
.shop-cal-wrapper .fc-col-header-cell-cushion {
    font-size: 0.9em;
    text-decoration: none;
    padding: 4px;
    display: block;
}

/* 日曜日の曜日テキスト色 */
.shop-cal-wrapper .fc .fc-col-header-cell:nth-child(1) .fc-col-header-cell-cushion {
    color: var(--ds-cal-sunday);
}

/* 土曜日の曜日テキスト色 */
.shop-cal-wrapper .fc .fc-col-header-cell:nth-child(7) .fc-col-header-cell-cushion {
    color: var(--ds-cal-saturday);
}

/* 当月以外の日を非表示 */
.shop-cal-wrapper .fc-day-other { visibility: hidden; }

/* ナビゲーションボタン（前月・翌月）スタイル */
.shop-cal-wrapper .fc .fc-button {
    background: none;
    border: none;
    box-shadow: none;
}

/* 凡例エリア（休業日・時短営業日の説明） */
.shop-cal-legend {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}

/* 凡例マーク（丸） */
.shop-cal-status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--ds-radius-full);
    margin-right: 8px;
    vertical-align: middle;
}
.shop-cal-status-dot--close      { background-color: var(--ds-cal-closed); }
.shop-cal-status-dot--open-short { background-color: var(--ds-cal-short); }


/* =====================================================
   独自パーツ：PCフローティングボタン（FAB）
   ・PC表示時のみ有効（スマホは非表示）
   ・画面右下に固定表示
   ・z-index は --ds-z-high を使用
   ===================================================== */

/* スマホでは非表示 */
@media (max-width: 768px) {
    .fab-container { display: none !important; }
}

/* ボタン群の外枠 */
.fab-container {
    position: fixed;
    right: 20px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: var(--ds-z-high);
}

/* 各ボタン行（親ボタン＋子ボタンの横並び） */
.fab-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* 子ボタンが扇状に展開するラッパー */
.fab-fan-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}

/* ボタン共通スタイル */
.fab-btn {
    width: 80px;
    height: 80px;
    border-radius: var(--ds-radius-full);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: var(--ds-fab-color) !important;
    font-family: var(--ds-font-base);
    font-weight: bold;
    box-shadow: 0 4px 12px var(--ds-fab-shadow);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    gap: 4px;
    padding: 0 !important;
    margin: 0;
    font-size: 20px !important;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.fab-btn svg {
    width: 28px;
    height: 28px;
}
.fab-btn span {
    font-size: 11px !important;
    margin-top: 4px !important;
}

/* ホバー時の浮き上がりエフェクト（タッチデバイスでは無効） */
@media (hover: hover) {
    .fab-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    }
}

/* 子ボタン（デフォルトは非表示・扇状展開用） */
.fab-fan-btn {
    position: absolute;
    width: 75px;
    height: 75px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1;
}

.fab-fan-btn span { font-size: 10px; }

/* お問い合わせ親ボタン（子ボタンの上に重なる） */
.fab-fan-wrapper .fab-parent-contact {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* 子ボタン展開時の位置（電話） */
.fab-fan-wrapper.open #fan-tel {
    transform: translate(calc(-50% - 10px), calc(-50% - 100px)) scale(1);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* 子ボタン展開時の位置（メール） */
.fab-fan-wrapper.open #fan-mail {
    transform: translate(calc(-50% - 85px), calc(-50% - 45px)) scale(1);
    opacity: 1;
    visibility: visible;
    transition-delay: 0.08s;
}

/* 全ボタンの背景色（--ds-fab-bgで一括管理） */
.fab-parent-contact,
.fab-calendar,
.fab-reserve-main,
.fab-access,
.fab-tel,
.fab-mail,
.fab-line {
    background: var(--ds-fab-bg);
}


/* =====================================================
   独自パーツ：スマホ下部固定ボタンメニュー（SP Bottom Menu）
   ・スマホ表示時のみ有効（PCは非表示）
   ・画面最下部に横並び固定
   ・z-index は --ds-z-high を使用
   ===================================================== */

/* PCでは非表示 */
.sp-bottom-menu { display: none !important; }

/* スマホのみ表示 */
@media (max-width: 768px) {

    /* メニューバー本体 */
    .sp-bottom-menu {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--ds-sp-bg);
        border-top: 1px solid var(--ds-sp-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: var(--ds-z-high);
        height: 60px;
        margin-bottom: 0 !important;
    }

    /* 各ボタンエリア */
    .sp-menu-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* ボタン本体 */
    .sp-menu-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none !important;
        color: var(--ds-sp-color) !important;
        font-family: var(--ds-font-base);
        gap: 3px;
        padding: 0;
    }

    /* アイコン */
    .sp-menu-btn svg {
        width: 20px;
        height: 20px;
        color: var(--ds-sp-color);
    }

    /* ラベルテキスト */
    .sp-menu-btn span {
        font-size: 9px;
        white-space: nowrap;
    }

    /* タップ時の色変化 */
    .sp-menu-btn:active { color: var(--ds-fab-bg) !important; }


    /* -------------------------------------------------
       子メニュー（お問い合わせボタンタップで上に展開）
       ・デフォルトは非表示
       ・.open クラスが付くと展開
       ------------------------------------------------- */
    .sp-child-menu {
        max-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        background: var(--ds-white);
        border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
        width: 100%;
        z-index: var(--ds-z-top);
        transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    /* 展開状態 */
    .sp-child-menu.open {
        max-height: 300px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 子メニュー各項目 */
    .sp-child-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 20px;
        text-decoration: none !important;
        color: var(--ds-sp-color) !important;
        font-family: var(--ds-font-base);
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #f0f0f0;
    }
    .sp-child-btn:last-child { border-bottom: none; }

    /* 子メニューアイコン */
    .sp-child-btn svg {
        width: 18px;
        height: 18px;
        color: var(--ds-fab-bg);
    }

    /* スマホ下部メニューの高さ分だけbodyに余白を追加 */
    body {
        padding-bottom: 60px;
    }

} /* @media (max-width: 768px) ここまで */

/* =====================================================
   トップページ：新着トピック
   ===================================================== */

.news-topics-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ヘッダー */
.news-topics-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 16px;
}

.news-topics-header svg {
    width: 24px;
    height: 24px;
    color: var(--color_main);
}

.news-topics-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color_text);
    font-family: var(--ds-font-base);
}

.news-topics-title-sep {
    margin: 0 8px;
    color: var(--ds-border);
}

/* リスト */
.news-topics-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 各アイテム：グリッドレイアウト */
.news-topics-item {
    display: grid;
    grid-template-columns: 6em 8em 1fr auto;
    align-items: center;
    gap: 0;
    padding: 14px 24px;
    border: 1px solid var(--ds-border);
    border-radius: 99px;
    text-decoration: none !important;
    color: var(--color_text) !important;
    margin-bottom: 12px;
    transition: transform 0.2s, opacity 0.2s;
    font-family: var(--ds-font-base);
}

.news-topics-item:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* 日付 */
.news-topics-date {
    font-size: 0.9em;
    color: var(--color_main);
    font-weight: 700;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
}

/* カテゴリー */
.news-topics-cat {
    font-size: 0.8em;
    color: var(--color_main);
    background: transparent;
    border: 1px solid var(--color_main);
    border-radius: 99px;
    padding: 2px 10px;
    white-space: nowrap;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* タイトル */
.news-topics-title-text {
    font-size: 0.95em;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 12px;
}

/* 矢印アイコン */
.news-topics-arrow {
    display: flex;
    align-items: center;
    padding-left: 12px;
}

.news-topics-arrow svg {
    width: 16px;
    height: 16px;
    color: var(--color_main);
}

/* 記事なし */
.news-topics-empty {
    padding: 16px;
    text-align: center;
    color: #999;
    font-size: 0.9em;
}

/* フッターボタン */
.news-topics-footer {
    text-align: center;
    margin-top: 24px;
}

.news-topics-btn {
    display: inline-block;
    padding: 10px 32px;
    border: 1px solid var(--color_main);
    border-radius: 99px;
    text-decoration: none !important;
    color: var(--color_main) !important;
    font-size: 0.9em;
    font-family: var(--ds-font-base);
    transition: background 0.2s, color 0.2s;
}

.news-topics-btn:hover {
    background: var(--color_main);
    color: #fff !important;
}

@media (max-width: 768px) {
    .news-topics-item {
        grid-template-columns: 6em 1fr auto;
        padding: 12px 14px;
        gap: 0 0px;
    }
    .news-topics-cat {
        display: none;
    }
    .news-topics-date {
        font-size: 0.8em;
    }
    .news-topics-title-text {
        font-size: 0.85em;
        padding-left: 0px;
    }
    .news-topics-arrow svg {
        width: 14px;
        height: 14px;
    }
}

/* =====================================================
   コトの葉：SWELLカテゴリータブ調整（3列×2行レイアウト）
   ===================================================== */
.blog .c-tabList {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 4px;
    padding-bottom: 16px;
}

.blog .is-style-balloon>.c-tabList .c-tabList__item {
    flex: 0 0 calc(33.333% - 4px);
    padding: 0 4px;
}

.blog .c-tabList__button {
    --the-tab-btn-padding: 14px 4px;
    font-size: 15px !important;
}

/* コトの葉：post_contentの下マージン調整 */
.blog .l-mainContent__inner > .post_content {
    margin-bottom: 0em !important;
}
/* コトの葉：カテゴリータブの上マージン調整 */
.blog .p-homeContent.u-mt-40 {
    margin-top: 2em !important;
}

/* =====================================================
   ハナの匣：一覧ページ
   ===================================================== */

#kimono-gallery-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* タブ */
.kg-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.kg-tab {
    padding: 10px 24px;
    border: 1px solid var(--ds-border);
    border-radius: 0;
    background: #fff;
    color: #999;
    font-size: 15px;
    cursor: pointer;
    font-family: var(--ds-font-base);
    transition: background 0.2s, color 0.2s;
    width: 100%;
    text-align: center;
}

.kg-tab.active {
    background: #e8e8e8;
    color: var(--color_text);
    border-color: var(--ds-border);
}

.kg-tab:hover:not(.active) {
    background: #f5f5f5;
    color: var(--color_text);
}

/* こだわり検索 */
.kg-search-block {
    border: 1px solid var(--ds-border);
    border-radius: 0;
    margin-bottom: 24px;
}

.kg-chevron svg {
    width: 12px;
    height: 12px;
    color: var(--color_text);
}

.kg-search-toggle {
    width: 100%;
    padding: 12px 16px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--color_text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-family: var(--ds-font-base);
}

.kg-search-toggle:hover { background: #e8e8e8; }

.kg-search-inner {
    padding: 16px;
    display: none;
    border-top: 1px solid var(--ds-border);
}

.kg-search-inner.open { display: block; }

.kg-search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.kg-search-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-weight: bold;
}

#kg-keyword,
#kg-item-cat {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-sizing: border-box;
    height: 40px;
    background: #fff;
}

.kg-tag-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.kg-tag {
    padding: 4px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 99px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s, color 0.2s;
}

.kg-tag.active {
    background: var(--color_text);
    color: #fff;
    border-color: var(--color_text);
}

.kg-btn-row {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

#kg-search-btn {
    flex: 1;
    padding: 9px;
    font-size: 15px;
    border-radius: var(--ds-radius-md);
    background: var(--color_main);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: var(--ds-font-base);
    transition: opacity 0.2s;
    height: 44px;
    line-height: 1;
}

#kg-search-btn:hover { opacity: 0.8; }

#kg-clear-btn {
    padding: 9px 16px;
    font-size: 15px;
    border-radius: var(--ds-radius-md);
    background: #fff;
    color: #666;
    border: 1px solid var(--ds-border);
    cursor: pointer;
    font-family: var(--ds-font-base);
    flex: 1;
    height: 45px;
    line-height: 1;
}

#kg-clear-btn:hover { background: #f5f5f5; }

/* 結果件数 */
.kg-result-count {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

/* タイルグリッド */
.kg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ⑦ .kg-tile-img：2つの定義をまとめた（重複解消） */
.kg-tile-img {
    width: 100%;
    aspect-ratio: unset;
    position: relative;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

/* ⑧ .kg-tile-img img：height・object-fit の競合を解消（後勝ちの contain に統一） */
/* マソンリーレイアウトのため画像の縦横比をそのまま表示 */
.kg-tile-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #f5f5f5;
}

/* 画像が設定されていない投稿（No Image）のプレースホルダー */
.kg-no-img {
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
}

.kg-tile {
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none !important;
    color: var(--color_text) !important;
    transition: transform 0.2s;
    display: block;
}

.kg-tile-body {
    padding: 8px 4px;
}

.kg-tile-name {
    font-size: 15px;
    color: var(--color_text);
    line-height: 1.5;
    text-align: left;
}

.kg-tile:hover {
    border-color: #888;
    transform: translateY(-2px);
}

.kg-tile-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--ds-radius-md);
    opacity: 0;
    transition: opacity 0.2s;
}

.kg-tile:hover .kg-tile-img::after {
    opacity: 1;
}

.kg-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--ds-radius-sm);
}

.kg-no-post {
    padding: 24px;
    text-align: center;
    color: #666;
}

.kg-load-more-wrap {
    text-align: center;
    margin-top: 24px;
}
#kg-load-more-btn {
    padding: 10px 32px;
    border: 1px solid var(--ds-border);
    background: var(--ds-white);
    border-radius: 100px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .kg-grid { grid-template-columns: repeat(2, 1fr); }
    .kg-search-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .kg-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   ハナの匣：詳細ページ
   ===================================================== */

.gd-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 左：画像エリア */
.gd-main-img {
    width: 100%;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.gd-main-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.gd-no-img {
    width: 100%;
    height: 300px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
}

.gd-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.gd-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.15s;
}

.gd-thumb:hover { opacity: 1; }
.gd-thumb.active {
    border-color: var(--color_main);
    opacity: 1;
}

/* 右：情報エリア */
.gd-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--color_text);
    margin: 0 0 16px;
    line-height: 1.5;
}

.gd-meta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
}

.gd-meta-label {
    color: #888;
    width: 60px;
    flex-shrink: 0;
    font-size: 12px;
    padding-top: 2px;
}

.gd-meta-value {
    color: var(--color_text);
}

.gd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gd-tag {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 99px;
    background: #f5f5f5;
    color: #666;
    border: 1px solid var(--ds-border);
}

.gd-divider {
    border: none;
    border-top: 1px solid var(--ds-border);
    margin: 16px 0;
}

.gd-content {
    font-size: 14px;
    color: var(--color_text);
    line-height: 1.8;
    margin-bottom: 16px;
}

/* =====================================================
   ハナの匣：詳細ページ
   ===================================================== */

/* 詳細ページ：#contentの上部余白リセット（パンくず直下にボタンを配置するため） */
.single-gallery-post #content {
    padding-top: 0;
}

/* 一覧に戻るリンク */
.gd-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    color: #999 !important;
    text-decoration: none !important;
    border: 1px solid var(--ds-border);
    background: #fff;
    padding: 10px 24px;
    margin-top: 16px;
    transition: background 0.2s, color 0.2s;
    font-family: var(--ds-font-base);
}

.gd-back:hover {
    background: #e0e0e0;
    color: var(--color_text) !important;
}

.gd-back svg {
    width: 16px;
    height: 16px;
    color: currentColor;
}

/* 一覧に戻るリンク（パンくずリスト直下・フルワイド配置用の上書き） */
.gd-back-top {
    display: inline-flex;
    width: fit-content;
    position: relative;
    top: 12px;
    margin-bottom: 48px;
    margin-left: -148px;
}

/* スマホ表示：左のズレ幅を縮小（画面幅が狭いため） */
@media (max-width: 768px) {
    .gd-back-top {
        margin-left: -24px;
    }
}

.gd-left {
    position: relative;
}

@media (max-width: 768px) {
    .gd-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* 商品ラベル */
.gd-labels {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.gd-label {
    display: inline-block;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 99px;
}

.gd-label-purchase {
    background: #EEEDFE;
    color: #3C3489;
    border: 1px solid #AFA9EC;
}

.gd-label-rental {
    background: #E1F5EE;
    color: #085041;
    border: 1px solid #5DCAA5;
}