@charset "utf-8";
:root {
    /* ========================
       フォントサイズ
    ======================== */
    --fs__8l: 5.8rem;
    --fs__7l: 5rem;
    --fs__6l: 4.5rem;
    --fs__5l: 4rem;
    --fs__4l: 3.4rem;
    --fs__3l: 2.9rem;
    --fs__2l: 2.6rem;
    --fs__1l: 2.2rem;
    --fs__xl: 2rem;
    --fs__l: 1.8rem;
    --fs__m: 1.6rem;
    --fs__s: 1.4rem;
    --fs__xs: 1.2rem;

    /* ========================
       フォントファミリー
    ======================== */
    --ff__serif: 'Noto Serif JP', '游明朝体', 'Yu Mincho', YuMincho,
      'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif;
    --ff__serif02: 'Shippori Mincho', '游明朝体', 'Yu Mincho', YuMincho,
      'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif;

    /* ========================
       フォントウェイト
    ======================== */
    --fw__medium: 500;
    --fw__semiBold: 600;
    --fw__bold: 700;

    /* ========================
       行間
    ======================== */

     /* ✅ 一般テキストの行間 */
     --line-height__base: 1.6;

     /* ✅ タイトル（h1, h2）用の行間 */
     --line-height__title: 1.3;

     /* ✅ 縦書き用（特に間隔を広げる） */
     --line-height__vertical: 2.5;

     /* ✅ 段落テキスト（本文用） */
     --line-height__paragraph: 1.8;

    /* ========================
       ブレイクポイント
    ======================== */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 600px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1440px;

    /* ========================
       コンテンツの幅
    ======================== */
    --header-width: 260px;
    --content-margin: 260px:
    --slide-menu-width: 320px;
}


/* ========================
   レスポンシブ設定
======================== */
/* 1200px以上（大画面PC） */
@media screen and (min-width: 1200px) {
    :root {
        --header-width: 260px;
        --content-margin: 260px;
        --fs__8l: 6.2rem;
        --fs__7l: 5.4rem;
    }
}

/* ========================
   1024px以上（ノートPC・タブレット横）
======================== */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    :root {
        --header-width: 260px;
        --content-margin: 260px;
        --fs__8l: 5.8rem;
        --fs__7l: 5rem;
    }

    /* 🔥 #header の幅を変更する場合は `display: flex;` を明示 */
    #header {
        width: var(--header-width);
        display: flex !important;
    }

    /* 🔥 `content-margin` の影響で余白が発生しないように修正 */
    #content-area {
        margin-left: var(--header-width);
        transition: margin-left 0.3s ease-in-out;
    }
}

/* 🔥 1023px以下では `header` を `display: none;` にして確実に隠す */
@media screen and (max-width: 1023px) {
    #header {
        display: none !important;
    }

    #content-area {
        margin-left: 0 !important;
    }
}


/* 768px以上（タブレット縦） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        --header-width: 240px;
        --content-margin: 240px;
        --fs__8l: 5rem;
        --fs__7l: 4.4rem;
    }
}

/* 600px以上（スマホ大） */
@media screen and (min-width: 600px) and (max-width: 767px) {
    :root {
        --header-width: 200px;
        --content-margin: 200px;
        --fs__8l: 4.5rem;
        --fs__7l: 3.9rem;
    }
}

/* 600px未満（スマホ小） */
@media screen and (max-width: 599px) {
    :root {
        --header-width: 0;
        --content-margin: 0;
        --fs__8l: 4rem;
        --fs__7l: 3.4rem;
        --fs__6l: 3rem;
    }
}
/* ========================
   グローバル設定
======================== */
html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth;
    overflow-x: hidden; /* 🔥 横スクロール防止 */
}

body {
    background: #f7f7f6;
    font-family: var(--ff__serif);
    letter-spacing: 0.1em;
    color: #333;
    font-size: var(--base-font-size); /* 16px */
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ol,
ul,
li {
    list-style: none;
    line-height: 1.85;
    font-size: 1.6rem; /* 18px */
}

a {
    color: #333;
    text-decoration: none;
    outline: none;
}

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

/* ========================
   タイポグラフィ
======================== */
h1, h2, h3, h4, h5 {
    font-weight: var(--fw__bold);
    line-height: 1.3;
    font-family: var(--ff__serif);
    margin: 2rem 0 1rem; /* 余白調整 */
}

h1 {
    font-size: var(--fs__8l);
}

h2 {
    font-size: var(--fs__7l);
}

h3 {
    font-size: var(--fs__5l);
}

h4 {
    font-size: var(--fs__3l);
}

h5 {
    font-size: var(--fs__2l);
}

small {
    font-size: var(--fs__s);
}

p {
    font-size: max(var(--fs__m), 1.6rem); /* 最小16px */
    line-height: 1.85;
    font-weight: var(--fw__medium);
}



/* =========================
   スマホ（600px以下）の調整
========================= */
@media screen and (max-width: var(--breakpoint-sm)) {
    html {
        font-size: 55%; /* スマホでの可読性UP */
    }

    body {
        font-size: 1.8rem; /* スマホでも最低18px */
    }

    h1 {
        font-size: 4.8rem;
    }

    h2 {
        font-size: 4rem;
    }

    h3 {
        font-size: 3.2rem;
    }

    h4 {
        font-size: 2.6rem;
    }

    h5 {
        font-size: 2.2rem;
    }

    p {
        font-size: 1.7rem;
        line-height: 2;
    }

    ol,
    ul,
    li {
        font-size: 1.7rem;
        line-height: 2.2;
    }
}



/* ==========
   レイアウト
========== */
#container {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ==========
   ヘッダー共通スタイル
========== */
#header {
    width: var(--header-width);
    min-height: 100vh;
    max-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #FFFCF7;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    z-index: 1047;
    overflow-y: auto; /* 🔥 スクロール可能に */
    overflow-x: hidden; /* 横スクロールを防ぐ */
}

/* スクロール対象のコンテンツ */
.header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-y: auto; /* 🔥 スクロールを適用 */
}

/* ==========
   1024px以上（PC向け）の通常表示
========== */
@media screen and (min-width: 1024px) {
    #header {
        display: flex; /* 1024px以上では表示 */
    }
    #slide-menu {
        display: none; /* スライドメニューは消す */
    }
    #burger-menu {
        display: none; /* バーガーメニューも消す */
    }
}

/* ==========
   1024px以下（タブレット・スマホ）のヘッダー非表示
========== */
@media screen and (max-width: 1023px) {
    #header {
        display: none; /* 🔥 1023px以下では確実に非表示 */
    }
}


/* ==========
   スライドメニューの初期状態（非表示）
========== */
#slide-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--slide-menu-width);
    height: 100vh;
    background: #f8f8f8;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15); /* ← 滑らかな影 */
  border-right: 1px solid rgba(0, 0, 0, 0.05);  /* 境界に高級感 */
    z-index: 5500; /* 🔥 `#header` より高く */
    opacity: 0; /* 🔥 初期状態は非表示 */
    visibility: hidden; /* 🔥 画面から非表示 */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease-out,
    visibility 0.4s ease-out;
    transform: translateX(-100%) scale(0.98); /* ← 少し小さくしてから拡大 */
    opacity: 0;
    visibility: hidden;
}

/* 表示時 */
#slide-menu.active {
    transform: translateX(0) scale(1); /* ← 拡大してピタッと止まる */
    opacity: 1;
    visibility: visible;
  }

/* 1024px以下（タブレット以下） */
@media screen and (max-width: 1023px) {
    #slide-menu {
        width: 300px;
    }
}

/* 768px以下（スマホ） */
@media screen and (max-width: 767px) {
    #slide-menu {
        width: 260px;
    }
}


/* ==========
   バーガーメニューのデザイン
========== */

/* ===== バーガーメニュー本体 ===== */
#burger-menu {
    position: fixed;
    top: 0px;
    right: 10px;
    cursor: pointer;
    z-index: 5500;
    padding: 8px;
    display: none;
    backdrop-filter: none;
  }

  #burger-menu.blur-on {
    /* スクロール中だけブラー */
    backdrop-filter: blur(1px);
    background-color: rgba(255, 255, 255, 0.6);
  }


  .bar-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
  }

/* 共通の基本スタイル */
#burger-menu .bar {
    position: absolute;
    left: 0;
    width: 0;
    height: 1.5px;
    border-radius: 999px;
    transform-origin: left center;
    background-color: #333;
    transition:
      width 0.4s ease,
      background-color 0.3s ease;
  }

  /* top/middle/bottom 各バーに遅延を個別指定 */
  .bar.top    { top: 12px; }
  .bar.middle { top: 21px; }
  .bar.bottom { top: 30px; }

  /* ✅ ready・animate 両方で width: 30px */
  #burger-menu.ready .bar,
  #burger-menu.animate .bar {
    width: 44px;
  }

  /* ✅ animate 状態ではバー色を白に */
  #burger-menu.animate .bar {
    background-color: #fff;
  }

  /* ✅ 遅延アニメーションを ready・animate 両方に */
  #burger-menu.ready .bar.top,
  #burger-menu.animate .bar.top {
    transition-delay: 0ms;
  }
  #burger-menu.ready .bar.middle,
  #burger-menu.animate .bar.middle {
    transition-delay: 100ms;
  }
  #burger-menu.ready .bar.bottom,
  #burger-menu.animate .bar.bottom {
    transition-delay: 200ms;
  }

  /* ✅ hide 時は逆順で縮む */
  #burger-menu.hide .bar.top {
    width: 0;
    transition-delay: 200ms;
  }
  #burger-menu.hide .bar.middle {
    width: 0;
    transition-delay: 100ms;
  }
  #burger-menu.hide .bar.bottom {
    width: 0;
    transition-delay: 0ms;
  }

  /* ✅ 1024px以下で表示 */
@media screen and (max-width: 1023px) {
    #burger-menu {
      display: flex !important;
      align-items: center;
      justify-content: center;
    }

    #header {
      display: none !important;
    }
  }



/* ==========
   オーバーレイ（スライドメニューの背景を隠す）
========== */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
    z-index: 5050; /* 🔥 `#slide-menu` より低く設定 */
    display: none; /* 初期状態は非表示 */
    transition: opacity 0.4s ease;
}

/* スライドメニューが開いた時にオーバーレイを表示 */
#overlay.active {
    display: block;
    opacity: 1;
  pointer-events: auto;
}

/* ==========
   1024px以上で `#header` を再表示
========== */
@media screen and (min-width: 1024px) {
    #header {
        display: flex !important; /* 🔥 確実に表示 */
    }
    #slide-menu {
        display: none !important; /* 🔥 1024px以上では `slide-menu` を非表示 */
    }
}

/* =========================
   #content-areaを暗めにする
========================= */
#content-area.dimmed {
    filter: brightness(0.5); /* 画面を暗くする */
    pointer-events: none; /* クリックできなくする */
}

/* ==========
   ヘッダーエリアの中央配置
========== */
.header-area {
    text-align: center;
    padding: 20px 20px 0px;

}

.header-area p {
    text-align: center;
    margin: 8px auto;
}

.header-area h1 {
    text-align: center; /* 中央配置（念のため） */
}

/* 768px以下でヘッダーロゴの余白を調整 */
@media screen and (max-width: 767px) {
    .header-area h1 {
        margin-bottom: 15px;
    }
}

.header-contact-container {
    display: flex;
    flex-direction: column; /* 🔥 常に縦並び */
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 5px 20px;
    margin-bottom: 20px;
}
/* =========================
   1023px以下のレスポンシブ
========================= */
@media screen and (max-width: 1023px) {
    .header-contact-container {
        gap: 10px; /* 🔥 少し間隔を狭める */
        padding: 5px 15px;
    }
}

/* 768px以下（タブレット縦 & スマホ大） */
@media screen and (max-width: 768px) {
    .header-contact-container {
        gap: 10px; /* 🔥 スマホではさらに狭める */
        padding: 6px 10px;
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .header-contact-container {
        gap: 8px; /* 🔥 最小間隔 */
        padding: 5px 8px;
    }
}




/* =========================
   共通ナビゲーションスタイル（縦並び）
========================= */
.main-navigation {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* 🔥 縦並びを維持 */
    align-items: center;
    width: 100%;
    padding: 10px 20px;
}

/* `.menu` クラスではなく `.nav-menu` を使用 */
.main-navigation .nav-menu,
.slide-menu-navigation .nav-menu { /* ✅ スライドメニュー用も適用 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    margin: 0;
    width: 100%;
}

/* メニュー項目のスタイル */
.main-navigation .nav-menu li,
.slide-menu-navigation .nav-menu li, /* ✅ スライドメニューにも適用 */
#header .menu li,
#slide-menu .menu li {
    position: relative;
    padding: 8px 16px;
}
/* =========================
   スライドメニューの `.nav-menu li` の縦パディング調整
========================= */
@media screen and (max-width: 1023px) {
    .slide-menu-navigation .nav-menu li {
        padding: 6px 14px; /* 🔥 縦の余白を少し減らしてコンパクトに */
    }
}

/* 768px以下（タブレット・スマホ） */
@media screen and (max-width: 768px) {
    .slide-menu-navigation .nav-menu li {
        padding: 5px 12px; /* 🔥 スマホではさらにコンパクトに */
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .slide-menu-navigation .nav-menu li {
        padding: 4px 10px; /* 🔥 最もコンパクトなサイズ */
    }
}

/* =========================
   `.current-page::before` の共通デザイン（統一）
========================= */
/* 共通スタイル */
.main-navigation .menu li.current-menu-item > a,
.main-navigation .nav-menu li.current-menu-item > a,
.slide-menu-navigation .nav-menu li.current-menu-item > a {
  position: relative;
  display: inline-block; /* 🔥 これが重要！ */
  padding-bottom: 3px;
  color: #333;
}

/* アニメーション付き下線 */
.main-navigation .menu li.current-menu-item > a::after,
.main-navigation .nav-menu li.current-menu-item > a::after,
.slide-menu-navigation .nav-menu li.current-menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1.2px;
  background-color: #333;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
}

/* 表示させる（ホバー or 自動） */
.main-navigation .menu li.current-menu-item > a.animate-underline::after,
.main-navigation .nav-menu li.current-menu-item > a.animate-underline::after,
.slide-menu-navigation .nav-menu li.current-menu-item > a.animate-underline::after {
  transform: scaleX(1);
}



/* =========================
   スライドメニューの `.current-page::before` の微調整
========================= */
@media screen and (max-width: 1023px) {
    .slide-menu-navigation .nav-menu .current-page::before {
        left: 0; /* 🔥 `main-navigation` と統一する */
        width: 6px;
        height: 12px;
    }
}

/* =========================
   スライドメニューの `.nav-menu` の中央配置調整
========================= */
.slide-menu-navigation .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 🔥 `main-navigation` と同じく左揃え */
    padding-left: 20px; /* 🔥 メニュー全体を少し右に寄せる */
}



/* ヘッダーボトム画像とトンボをまとめるコンテナ */
.header-bottom-container {
    position: relative;
    width: 100%;
    height: 80px; /* 🔥 デフォルトは80px */
    margin-top: auto;
}

/* 768px以下（タブレット） */
@media screen and (max-width: 768px) {
    .header-bottom-container {
        height: 65px; /* 🔥 少し小さくする */
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .header-bottom-container {
        height: 50px; /* 🔥 スマホではコンパクトに */
    }
}

/* 夕日画像 */
.header-bottom-sunset-img {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 60px;
    height: auto;
    z-index: 11;
    opacity: 0.9;
}

/* 768px以下（タブレット） */
@media screen and (max-width: 768px) {
    .header-bottom-sunset-img {
        right: 10px; /* 🔥 右側の余白を少し詰める */
        width: 50px; /* 🔥 サイズを少し小さく */
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .header-bottom-sunset-img {
        right: 5px; /* 🔥 さらに詰める */
        width: 40px; /* 🔥 小さいスマホ用にさらに縮小 */
    }
}

/* ヘッダーボトム画像 */
.header-bottom-img {
    width: auto;
    height: 80px;
    max-width: 100%;
    display: block;
}

/* 768px以下（タブレット） */
@media screen and (max-width: 768px) {
    .header-bottom-img {
        height: 65px;
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .header-bottom-img {
        height: 50px;
    }
}

/* トンボの配置（ヘッダーボトム画像の上に重ねる） */
.dragonfly {
    position: absolute;
    bottom: 22%;
    left: 18%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    z-index: 10;

    /* 🔥 ふわふわアニメーション */
    animation: floatUpDown 4s ease-in-out infinite;
}

/* トンボのサイズ調整 */
.dragonfly svg {
    width: 40px;
    height: auto;
}

/* =========================
   アニメーション（上下にふわふわと動く）
========================= */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0); /* 元の位置 */
    }
    50% {
        transform: translateY(-10px); /* 🔥 10px 上に浮く */
    }
}

/* =========================
   スライドメニュー内の `dragonfly`
========================= */
#slide-menu .dragonfly {
    position: absolute;
    bottom: 15px;
    left: 20px;
    width: auto;
    z-index: 5500;
    overflow: visible;
    pointer-events: none;

    /* 🔥 ふわふわアニメーション（少し控えめに） */
    animation: floatUpDown 5s ease-in-out infinite;
}

/* トンボのサイズ調整（スライドメニュー内） */
#slide-menu .dragonfly svg {
    width: 50px;
    height: auto;
    overflow: visible;
}

/* 768px以下（タブレット） */
@media screen and (max-width: 768px) {
    .dragonfly svg {
        width: 35px; /* 🔥 ちょっと小さく */
    }
    #slide-menu .dragonfly svg {
        width: 40px;
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .dragonfly svg {
        width: 30px; /* 🔥 さらに小さく */
    }
    #slide-menu .dragonfly svg {
        width: 35px;
    }

    /* 🔥 スマホではふわふわの動きを控えめに */
    .dragonfly {
        animation: floatUpDown 5s ease-in-out infinite;
    }
}


/* ==========
   コンタクトボックスの間の適切なマージン
========== */
.header-contact-wrapper {
    display: flex;
    justify-content: center; /* 中央配置 */
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    width:100%;
    height: 44px;
    border-radius: 10rem;
    text-align: center;
    transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.header-contact-wrapper:not(:last-child) {
    margin-bottom: 8px; /* 10px の間隔を適用 */
}

.header-free-dial {
    background-color: #ffffff;
    color: #004d67;
    border: 1px solid #004d67;
    padding: 10px;
}

.header-line-contact {
    background-color: #ffffff;
    color: #00B900;
    border: 1px solid #00B900;
    padding: 10px;
}

/* LINEボタン：クリック時のhover風 */
.header-line-contact:hover,
.header-line-contact.clicked {
  background-color: #00B900;
  color: #ffffff;
  border-color: #00B900;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 185, 0, 0.4);
}

/* フリーダイヤル：クリック時のhover風 */
.header-free-dial:hover,
.header-free-dial.clicked {
  background-color: #007a99; /* 少し深めに変化 */
  color: #ffffff;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 77, 103, 0.4);
}

.header-urgency {
    font-size: var(--fs__m);
    background-color: #e63946;
    color: #ffffff;
    border: 1px solid #e63946;
    padding: 10px;
}

.header-urgency:hover,
.header-urgency.clicked {
    background-color: #ffffff;
    color: #e63946;
    border-color: #e63946;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(255, 64, 80, 0.4);
}

/* アイコン */
.header-contact-wrapper img {
    height: 24px;
    width: auto;
}

/* 1023px以下（タブレット以下） */
@media screen and (max-width: 1023px) {
    .header-contact-wrapper {
        gap: 0.8rem; /* 🔥 間隔を少し狭める */
        padding: 0.8rem;
    }
}

/* 768px以下（タブレット縦 & スマホ大） */
@media screen and (max-width: 768px) {
    .header-contact-wrapper {
        gap: 0.6rem; /* 🔥 さらに間隔を狭める */
        padding: 0.6rem;
        height: 40px; /* 🔥 高さを少し縮める */
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .header-contact-wrapper {
        gap: 0.5rem; /* 🔥 最小間隔 */
        padding: 0.5rem;
        height: 38px; /* 🔥 スマホではコンパクトに */
    }

    /* アイコンサイズを縮小 */
    .header-contact-wrapper img {
        height: 20px;
    }
}

/* `.header-contact-wrapper:not(:last-child)` のレスポンシブ */
@media screen and (max-width: 1023px) {
    .header-contact-wrapper:not(:last-child) {
        margin-bottom: 12px; /* 🔥 少し間隔を狭める */
    }
}

@media screen and (max-width: 768px) {
    .header-contact-wrapper:not(:last-child) {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 600px) {
    .header-contact-wrapper:not(:last-child) {
        margin-bottom: 8px;
    }
}

/* 600px以下（スマホ小）では `padding` を調整 */
@media screen and (max-width: 600px) {
    .header-free-dial,
    .header-line-contact {
        padding: 8px;
    }
}


/* =========================
   スライダーエリア
========================= */
#slider-area {
    position: relative;
    width: calc(100vw - var(--header-width));
    max-width: 100%;
    height: 600px;
    margin-left: 0; /* 🔥 左側にピッタリ寄せる */
    margin-right: auto; /* 右側の余白を自動調整 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
}

/* スライダーリスト */
.slider {
    display: flex;
    position: relative;
    width: 100%; /* 必要な幅を確保 */
    justify-content: center;
    align-items: center;
    transition: transform 10s ease;
}

/* スライダーアイテム */
.slider-item {
    width: 500px;
    height: 500px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
    position: absolute;
    transform: translateX(0); /* スケール変更なし */
    z-index: 1;
    opacity: 0.6;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

}
.slider-item.active {
    transform: translateX(0) scale(1);
    z-index: 2;
    opacity: 1;
    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); */
}

.slider-item.left {
    transform: translateX(-105%) scale(1); /* 🔥 左へ移動（間隔確保） */
    opacity: 0.5; /* 🔥 左のアイテムを暗めに */
}

.slider-item.right {
    transform: translateX(105%) scale(1); /* 🔥 右へ移動（間隔確保） */
    opacity: 0.5; /* 🔥 右のアイテムを暗めに */
}


/* 非表示アイテム */
.slider-item.hidden {
    transform: translateX(200%);
    opacity: 0;
}

.slider-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-indent: -9999px; /* 視覚的に何も見せない */
  }

  .front-slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    /* ✅ 横並びにする */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* ドットの間隔 */
  }


  .front-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .front-slider-dot.active {
    background-color: #333;
  }


/* レスポンシブ対応 */
@media screen and (max-width: 1023px) {
    #slider-area {
        width: 100%;
        height: 600px; /* タブレット用の高さ */
    }

    .slider-item {
        width: 500px; /* タブレット用の幅 */
        height: 500px; /* タブレット用の高さ */
    }
}

@media screen and (max-width: 990px) {
    #slider-area {
        width: 100%; /* ヘッダーが消えるサイズでは全幅 */
        margin: 0 auto; /* 中央配置 */
    }
}

/* =========================
   タブレット & スマホ (768px以下)
========================= */
@media screen and (max-width: 768px) {
    #slider-area {
        height: 600px; /* 🔥 スマホ用の高さを大きく */
    }

    .slider-item {
        width: 500px; /* 🔥 スマホ用の幅を大きく */
        height: 500px; /* 🔥 スマホ用の高さを大きく */
    }

    .slider-item.active {
        transform: translateX(0); /* 🔥 拡大はなし */
        z-index: 2;
        opacity: 1;
    }

    .slider-item.left {
        transform: translateX(-515px); /* 🔥 左に配置 */
        z-index: 1;
        opacity: 0.5;
    }

    .slider-item.right {
        transform: translateX(515px); /* 🔥 右に配置 */
        z-index: 1;
        opacity: 0.5;
    }
}

/* =========================
   小型スマホ (480px以下)
========================= */
@media screen and (max-width: 480px) {
    #slider-area {
        height: 400px; /* 🔥 小型スマホ用の高さを大きく */
    }

    .slider-item {
        width: 340px; /* 🔥 小型スマホ用の幅を大きく */
        height: 340px; /* 🔥 小型スマホ用の高さを大きく */
    }

    .slider-item.active {
        transform: translateX(0); /* 🔥 拡大なし */
        z-index: 2;
        opacity: 1;
    }

    .slider-item.left {
        transform: translateX(-355px); /* 🔥 左の配置を調整 */
        z-index: 1;
        opacity: 0.4;
    }

    .slider-item.right {
        transform: translateX(355px); /* 🔥 右の配置を調整 */
        z-index: 1;
        opacity: 0.4;
    }
}



/* メインナビゲーション */
#header-text {
    display: flex;
    justify-content: center; /* テキストを中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 10px;
    text-align: center;
    overflow-x: auto; /* テキストが画面幅を超えた場合に横スクロール */
    width: calc(100vw - var(--header-width));
}

/* テキスト部分 */
.header-text-p {
    font-size: var(--fs__l);
    white-space: nowrap; /* テキストの折り返しを禁止 */
    line-height: 1.5;
}

@media screen and (max-width: 1023px){
    #header-text {
        width: 100%; /* ヘッダーが消えるサイズでは全幅 */
        margin: 0 auto; /* 中央配置 */
    }

    .header-text-p {
        font-size: var(--fs__m);
    }
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .header-text-p {
        font-size: var(--fs__xs);
    }
}

@media screen and (max-width: 480px) {
    .header-text-p {
        font-size: var(--fs__xxs);
    }
}

#content-area {
    width: 100%;
    margin-left: 260px;
    box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
    #content-area {
        margin-left: 0;
    }
}


/* メインエリア */

#main-area {
    width: calc(100vw - var(--header-width));
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* 各セクション */
#main-area > section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 90px 0px;
    box-sizing: border-box;
}

@media screen and (max-width: 1023px){
    #main-area {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}


@media screen and (max-width: 768px) {
    #main-area {
        padding: 0;
    }

    #main-area > section {
        margin-bottom: 20px;
        padding: 30px 10px;
    }
}

/* heading */
.heading-block{
    display: flex;
    justify-content: center;
}



/* セクション全体（背景を一杯に広げる） */
#svg-section {
    position: relative;
    width: 100%;
    height: 500px; /* 🔥 画面全体の高さ */
    overflow: hidden; /* 🔥 余分な部分を隠す */
}

/* 夕日のSVG（右上） */
.svg-sun {
    position: absolute;
    bottom: 20%;
    left: 15%;
    width: 60px; /* 🔥 サイズ調整 */
    height: auto;
    z-index: -1;
    animation: floatUpDown 5s ease-in-out infinite;
}

/* 🔥 ぷかぷかアニメーション（上下に動く） */
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px); /* 🔥 下に少し動く */
    }
    100% {
        transform: translateY(0);
    }
}


/* 山のSVG（背景いっぱいに広げる） */
.svg-mountain {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20%; /* 🔥 幅いっぱいに広げる */
    height: auto;
    z-index: -1;
}


/* セクション全体 */
#customer-reviews {
    padding: 40px 20px;
    position: relative; /* 🔥 背景要素を配置するために必要 */

}

/* 🔥 右上に星を5つ配置し、透過させる */
#customer-reviews::before {
    content: "★★★★★"; /* 🔥 5つの星 */
    position: absolute;
    top: 10px; /* 🔥 セクションの上部に配置 */
    left: 50%;
    transform: translateX(-50%); /* 🔥 水平方向の中央揃え */
    font-size: 13rem; /* 🔥 星の大きさ */
    color: gold; /* 🔥 星の色 */
    letter-spacing: 5px; /* 🔥 星の間隔 */
    font-weight: bold;
    opacity: 0.1; /* 🔥 星を透過させる */
    z-index: -1;
}



/* カードコンテナ */
.review-card-container {
    display: flex;
    transition: transform 0.7s linear; /* スライドアニメーション */
    padding-bottom: 60px; /* 🔥 下部に余白を追加 */
    overflow: hidden; /* 🔥 ボタンと重ならないように */
    width: max-content;
}

/* 各カード */
.review-card {
    flex-shrink: 0;
    width: 300px; /* カード幅 */
    height: auto; /* 自動調整（高さ固定を解除） */
    margin-right: 20px; /* カード間のギャップ */
    background-color: #fcfbf9;
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: center; /* 中央揃え */
    justify-content: flex-start; /* 上部から配置 */
    padding: 20px; /* カード内の余白 */
    box-sizing: border-box; /* パディングを含めたサイズ管理 */
}

/* カード内の画像 */
.review-card-img {
    width: 80px; /* 画像の幅 */
    height: 80px; /* 画像の高さ */
    border-radius: 50%; /* 円形にする */
    object-fit: cover; /* 縦横比を保ったまま中央揃え */
    margin-bottom: 10px; /* 下の要素との間隔 */
}

/* カード内の名前（h3） */
.review-card-content h3 {
    font-size: var(--fs__l); /* フォントサイズ */
    margin-bottom: 10px; /* 下の要素との間隔 */
    text-align: center; /* テキスト中央揃え */
}

/* カード内のコメント（p） */
.review-card-content p {
    font-size: var(--fs__m); /* フォントサイズ */
    font-weight: normal; /* 通常の太さ */
    color: #666; /* 文字色 */
    line-height: 1.6; /* 行間 */
    text-align: center; /* テキスト中央揃え */
    margin: 0; /* 余白リセット */
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .review-card-container {
        flex-wrap: wrap; /* 🔥 スマホではカードを縦並びに */
        justify-content: center; /* 🔥 カードを中央寄せ */
        padding-bottom: 40px; /* 🔥 余白を調整 */
    }

    .review-card {
        width: 250px; /* スマートフォン用のカード幅 */
        height: auto; /* スマートフォン用のカード高さ */
    }
}

@media screen and (max-width: 426px) {
    .review-card {
        width: 200px; /* 小型スマートフォン用のカード幅 */
        height: auto; /* 小型スマートフォン用のカード高さ */
    }
}
/* 星評価とテキストを横並びにする */
.review-rating-container {
    display: flex;
    align-items: center;
    justify-content: center; /* ✅ 中央揃えを追加！ */
    gap: 5px;
    margin-top: 10px;
}

.rating-text {
    font-size: var(--fs__s);
}

/* 星評価のスタイル */
.review-rating {
    font-size: var(--fs__l);
    color: #FFD700;
}

.review-rating .star {
    font-size: var(--fs__l);
    color: #ccc;
}

.review-rating .star.filled {
    color: #FFD700;
}

/* ======================
   レスポンシブ調整
====================== */

/* タブレット以下 */
@media screen and (max-width: 768px) {
    .rating-text {
      font-size: 1rem; /* 小さくしすぎず保つ */
    }

    .review-rating,
    .review-rating .star {
      font-size: var(--fs__m);
    }
  }

  /* スマホ以下 */
  @media screen and (max-width: 480px) {
    .rating-text {
      font-size: var(--fs__s);
    }

    .review-rating,
    .review-rating .star {
      font-size: 1.1rem;
    }
  }


/* セクション全体 */
#funeral-plan {
    position: relative;
    padding: 40px 5%;
    background-color: #004d67;
}

.plan-wrapper::before {
    content: "";
    position: absolute;
    top: -5%;
    left: 3%;
    width: 600px; /* 画像サイズに合わせて調整 */
    height: auto;
    background-image: url('/wp-content/themes/akitsusousai/assets/images/common/front-plan-haikei.png'); /* ←画像のパスに差し替えてください */
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5; /* 半透明効果 */
    pointer-events: none; /* 背景として機能するようにクリック無効化 */
    z-index: 0;
  }


.plan-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; /* ✅ 右寄せ */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 5%;
    padding: 0 40px; /* ✅ 左右余白固定 */
}

/* 左側 (h2 → p の順番) */
.plan-header {
    writing-mode: vertical-rl; /* ✅ 縦書き */
    text-orientation: upright;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 10%;
    min-width: 100px;
    flex-shrink: 0;
}
/* 見出し */
.plan-header__title {
    font-size: var(--fs__5l);
    color: #ffffff;
    margin-bottom: 10px;
}

/* 説明文 */
.plan-header__text {
    font-size: var(--fs__l);
    color: #ffffff;
    line-height: 2;
}

/* 右側のプランコンテナ */
.plan-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    width: 100%;
    max-width: 1080px;
}

/* プランカード */
.plan-card {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
    max-width: 100%;
    margin: 0 auto; /* 中央配置 */
}

/* 画像コンテナ */
.plan-img-container {
    position: relative;
    width: 100%;
}

/* 画像 */
.plan-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

.plan-title-container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center; /* ✅ 子要素の高さを揃える */
    justify-content: space-between;
    padding: 26px 24px;
    background: rgba(0, 77, 103, 0.9);
    z-index: 2;
    box-sizing: border-box;
    width: 40%;
    min-width: 280px;
  }

  /* タイトルテキスト */
  .plan-title {
    color: white;
    font-size: var(--fs__2l);
    line-height: 1; /* ✅ 高さを文字に合わせる */
    display: flex;
    align-items: center; /* ✅ テキスト内部でも中央揃え（冗長だが安定） */
    margin: 0;
    padding: 0;
  }

  /* 矢印アイコン */
  .plan-arrow {
    width: 42px;  /* フォントサイズと揃える */
    height: 42px;
    display: block; /* ✅ inline だとベースラインズレるため block に */
    object-fit: contain;
  }



/* 1024px以上で最大幅1080pxに収める */
@media screen and (min-width: 1024px) {
    .plan-card {
        width: 100%; /* 100% の幅でスクリーン幅に合わせる */
        max-width: 1080px; /* 最大幅は1080pxに設定 */
    }
}


/* =========================
   📱 タブレット対応 (1023px以下)
========================= */
/* 1023px以下: `.plan-container` を中央配置 */
@media screen and (max-width: 1023px) {
    .plan-wrapper {
        flex-direction: column;
        align-items: center; /* ✅ 中央配置 */
        justify-content: center;
        text-align: center;
    }

    .plan-header {
        writing-mode: horizontal-tb; /* ✅ 横書き */
        text-orientation: mixed;
        width: 100%;
        text-align: center;
        align-items: center;
        margin-bottom: 20px; /* ✅ 下に余白を追加 */
    }

    .plan-header__title {
        font-size: var(--fs__4l);
    }

    .plan-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* ✅ 中央配置 */
        justify-content: center; /* ✅ 縦の中央揃え */
        width: 100%;
        max-width: 880px; /* ✅ 横長のまま */
    }

    .plan-card {
        max-width: 100%; /* スクリーン幅に合わせて最大幅を100%に設定 */
    }
    .plan-title-container {
        width: 50%;       /* タブレットサイズでは少し広めに */
        padding: 24px 20px;
      }

      .plan-title {
        font-size: var(--fs__xl); /* 少し小さめに調整（例：2rem など） */
      }

      .plan-arrow {
        width: 36px;
        height: 36px;
      }
}


/* =========================
   📱 スマホ対応 (600px以下)
========================= */
@media screen and (max-width: 768px) {
    #funeral-plan {
        padding: 30px 10px;
      }

    .plan-header {
        max-width: 100%;
    }

    .plan-header__title {
        font-size: var(--fs__3l);
    }

    .plan-header__text {
        font-size: var(--fs__l);
    }

    .plan-container {
        max-width: 100%;
        padding: 0;
    }

    .plan-wrapper {
        padding: 0 16px; /* ← 左右余白を小さめに */
      }

    .plan-card {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .plan-title-container {
        width: 50%;       /* スマホでは画面のほぼ全幅 */
        padding: 20px;
      }

      .plan-title {
        font-size: var(--fs__l); /* 例：1.6rem 相当 */
      }

      .plan-arrow {
        width: 28px;
        height: 28px;
      }

    .plan-img {
        height: 180px;
    }
}

  /* レスポンシブ：576px以下 */
  @media screen and (max-width: 576px) {
    .plan-header__title {
        font-size: var(--fs__3l);
    }

    .plan-header__text {
        font-size: var(--fs__m);
    }


    .plan-title {
        font-size: var(--fs__l);
    }
  }

  /* レスポンシブ：480px以下 */
  @media screen and (max-width: 480px) {
    .plan-header__title {
        font-size: var(--fs__2l);
    }

    .plan-header__text {
        font-size: var(--fs__s);
    }

    .plan-title-container {
        width: 45%;
        padding: 16px;
      }

      .plan-title {
        font-size: var(--fs__m); /* 例：1.4rem 相当 */
      }

      .plan-arrow {
        width: 24px;
        height: 24px;
      }

  }

/* 説明文 */
.plan-content {
    padding: 20px;
    text-align: left;
}

/* プランの説明 */
.plan-description {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    line-height: 1.6;
}

/* プラン名を丸で囲んだコンテンツ */
.plan-items {
    display: flex;
    justify-content: center;
    gap: 20px; /* 🔥 3つのアイテムの間隔 */
    margin-top: 20px;
}

/* 丸で囲んだプラン名 */
.plan-item {
    width: 120px;
    height: 120px;
    background: #7faaaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
}


/* レスポンシブ対応：スマホ */
@media screen and (max-width: 768px) {
    .plan-card {
        max-width: 100%; /* 幅を画面いっぱいに */
    }

    .corner-badge {
        width: 40px; /* スマホ用にバッジ画像を縮小 */
        bottom: 5px; /* 下端の距離を縮小 */
        right: 5px; /* 右端の距離を縮小 */
    }

    .plan-content {
        padding: 15px;
    }

    .plan-content h3 {
        font-size: 1.2rem;
    }

    .plan-description {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .text-boxes {
        flex-wrap: wrap; /* 折り返し可能に */
        gap: 5px; /* 各ボックス間のスペースを縮小 */
    }

    .text-box {
        font-size: 0.8rem; /* ボックス内のテキストを小さく */
    }

    .plan-price {
        font-size: 1.4rem; /* メイン金額のフォントサイズを縮小 */
    }

    .plan-price .price-small {
        font-size: 0.9rem; /* 税込価格のフォントサイズを縮小 */
    }
}



/* 🔥 セクション全体 */
#image-text-section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100vh; /* 🔥 画面の高さ全体を使用 */
    min-height: 400px; /* 🔥 最低限の高さを確保 */
    overflow: hidden;
}

/* 🔥 画像とテキストを横並びに配置 */
.image-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    gap: 10px; /* 🔥 画像の間のスペース */
}

/* 🔥 左右の画像 */
.image-box {
    width: calc(50vw - 20px); /* 🔥 セクションの半分を占める */
    height: 100%; /* 🔥 セクションの高さいっぱい */
    overflow: hidden;
    position: relative;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 画像を枠いっぱいに表示（縦横比を維持） */
}

/* 🔥 中央のテキストボックス */
.text-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff; /* 🔥 背景色 */
    padding: 20px;
    color: #333;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px; /* 🔥 適切な幅 */
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
    will-change: transform, box-shadow;
}

@keyframes richTap {
    0% {
      transform: translate(-50%, -50%) scale(1);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      opacity: 1;
    }
    30% {
      transform: translate(-50%, -50%) scale(1.1);
      box-shadow: 0 0 20px rgba(0, 77, 103, 0.4);
    }
    70% {
      transform: translate(-50%, -50%) scale(0.97);
      box-shadow: 0 0 10px rgba(0, 77, 103, 0.2);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
  }

  .text-box.animate-tap {
    animation: richTap 0.6s ease forwards;
  }




/* 🔥 縦書きの h2 */
.text-box h2 {
    writing-mode: vertical-rl; /* 🔥 縦書き */
    text-orientation: upright;
    font-size: var(--fs__4l);
    line-height: 2.5; /* 🔥 文字間のスペースを広げる */
    letter-spacing: 0.2em; /* 🔥 縦書きでも若干の文字間隔調整 */
    margin: 0;
}

/* 🔥 横書きの p */
.text-box p {
    font-size: var(--fs__m);
    margin-top: 20px;
    text-align: center;
    text-decoration: underline; /* 🔥 リンクっぽさ */
    color: #004d67; /* 🔥 青系のカラーでよりリンク感 */
}



/* 🔥 レスポンシブ対応（768px以下） */
@media screen and (max-width: 768px) {
    #image-text-section {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* 🔥 画像同士を縦に並べ、間隔を確保 */
    .image-text-container {
        flex-direction: column; /* ✅ 縦並び */
        align-items: center;
        gap: 10px; /* ✅ 画像の間に余白 */
    }

    /* 🔥 上下の画像 */
    .image-box {
        width: 100%;
        height: 40vh; /* ✅ スマホでは高さを少し縮小 */
        min-height: 180px; /* ✅ 最低限の高さを確保 */
        position: relative;
    }

    .image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ✅ 画像を枠いっぱいに表示（縦横比を維持） */
    }

    /* 🔥 中央のテキストボックスを画像上に配置 */
    .text-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff; /* ✅ 半透明の背景 */
        padding: 15px;
        color: #333;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%; /* ✅ モバイルでは横幅を広げる */
        max-width: 300px;
        border-radius: 8px; /* ✅ 角を少し丸める */
    }

    /* 🔥 縦書きの h2 */
    .text-box h2 {
        writing-mode: vertical-rl; /* ✅ 縦書きを維持 */
        text-orientation: upright;
        font-size: var(--fs__3l);
        line-height: 2.2;
        letter-spacing: 0.2em;
        margin: 0;
    }

    /* 🔥 横書きの p */
    .text-box p {
        font-size: 1.2rem;
        margin-top: 10px;
        text-align: center;
    }
}

@media screen and (max-width: 600px) {
    .text-box h2 {
      font-size: var(--fs__2l);
    }

    .text-box p {
      font-size:var(--fs__l);
      line-height: 1.5;
    }
  }



/* 祭壇イラスト */
.altar-image img {
    max-width: 50%; /* 全体の50%の幅に縮小 */
    height: auto;
    margin: 0 auto 20px; /* 上下の余白を調整して中央揃え */
    display: block; /* 画像をブロック要素として扱い中央揃え */
}

/* レスポンシブ対応：スマホ幅 */
@media screen and (max-width: 768px) {
    .altar-image img {
        max-width: 80%; /* スマホ幅では全体の80%まで拡大 */
    }
}


/* セクション内のコンテンツ */
.section-content {
    margin-top: 20px;
}

.section-content .description {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 🔥 ボタンの親要素（使い回し可能） */
.btn-wrapper {
    display: flex;
    justify-content: center; /* ボタンを中央揃え */
    align-items: center;
    margin: 20px auto; /* 上下の均一な余白 */
    width: 100%;
    max-width: 400px; /* 最大幅を統一 */
    position: relative;
}

/* 🔥 ボタンスタイル */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.5rem; /* ⬅️ 横だけにpadding */
    height: 55px;
    background-color: #ffffff;
    border: 1px solid #004d67;
    color: #004d67;
    text-decoration: none;
    border-radius: 10rem;
    font-size: var(--fs__l);
    font-weight: bold;
    text-align: center;
    width: 100%;
    max-width: 330px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0); /* 初期は影なし */
    transition:
      background-color 0.6s ease,
      color 0.6s ease,
      border-color 0.6s ease,
      box-shadow 0.6s ease,
      transform 0.4s ease;
}


/* 🔥 ホバー時のデザイン */
.btn:hover,
.btn.clicked {
  background-color: #004d67;
  border-color: #007a99;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 77, 103, 0.4); /* 軽い浮き上がり */
  transform: scale(1.03); /* 少し拡大 */
}

/* ボタン */
.test-btn-wrapper {
    text-align: center;
    margin-top: 20px;
}

.test-btn {
    display: inline-block;
    background: #004d67;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}


/* =========================
   📱 スマホ対応（600px以下）
========================= */
@media screen and (max-width: 600px) {
    .btn {
        font-size: var(--fs__m);
        min-width: 220px; /* 🔥 最小幅を少し広めに確保 */
        height: 50px; /* 🔥 ボタンの高さも調整 */
        padding: 0.8rem; /* 🔥 余白を適宜調整 */
    }
}

/* =========================
   📱 スマホ小（480px以下）
========================= */
@media screen and (max-width: 480px) {
    .btn {
        font-size: var(--fs__s);
        min-width: 200px; /* 🔥 最小幅を維持 */
        height: 48px; /* 🔥 高さを調整 */
        padding: 0.7rem; /* 🔥 余白を微調整 */
    }
}


/* セクションヘッダー全体 */
.section-header {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;
    margin-bottom: 40px; /* カードとの間隔 */
    text-align: center;
  }

  /* アイコン */
  .section-header .header-icon {
    width: 40px;
    height: auto;
    margin-bottom: 10px;
  }

  /* 見出し h2 */
  .section-header__title {
    font-size: var(--fs__4l);
    color: #333;
    font-weight: bold;
    margin: 0 0 20px;
  }

  /* 説明文 p */
  .section-header__text {
    font-size: var(--fs__l);
    color: #666;
  }

  /* レスポンシブ：1024px以下 */
  @media screen and (max-width: 1024px) {
    .section-header__title {
      font-size: var(--fs__4l);
      margin-bottom: 30px;
    }
  }

  /* レスポンシブ：768px以下 */
  @media screen and (max-width: 768px) {
    .section-header__title {
      font-size: var(--fs__3l);
      margin-bottom: 25px;
    }

    .section-content .description {
      font-size: 0.9rem;
    }

    .btn {
      width: 100%;
    }
  }

  /* レスポンシブ：576px以下 */
  @media screen and (max-width: 576px) {
    .section-header__title {
      font-size: var(--fs__2l);
      margin-bottom: 20px;
    }

    .section-header__text {
        font-size: var(--fs__m);
        color: #666;
      }

  }

  /* レスポンシブ：480px以下 */
  @media screen and (max-width: 480px) {
    .section-header__title {
      font-size: var(--fs__1l);
      margin-bottom: 20px;
    }
  }

/* デフォルトでは非表示 */
.br-sp {
    display: none;
  }

  /* 480px以下のときだけ表示 */
  @media screen and (max-width: 576px) {
    .br-sp {
      display: block;
      line-height: 1.8;
    }
  }

  /* セクション全体のラッパー */
.info-section-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* テキストブロック */
  .info-text-block {
    max-width: 600px;
  }

  /* 画像エリア */
  .info-image-wrapper img {
    width: 200px;
    height: auto;
    border-radius: 10px;
  }

  /* 中央寄せの見出しラッパー */
  .info-section-header-wrapper {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto 30px auto;
    box-sizing: border-box;
  }

  /* 見出しスタイル */
  .info-section-heading {
    font-size: var(--fs__4l);
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
  }

  /* 本文スタイル */
  .info-section-paragraph {
    font-size: var(--fs__l);
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 10px;
  }

  @media screen and (max-width: 768px) {
    .info-section-wrapper {
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .info-section-heading {
      font-size: var(--fs__3l);
      text-align: center;
    }

    .info-section-paragraph {
      font-size: var(--fs__m);
      text-align: center;
      line-height: 1.6;
    }

    .info-image-wrapper img {
      width: 160px;
    }
  }

  @media screen and (max-width: 576px) {
    .info-section-heading {
      font-size: var(--fs__2l);
      text-align: center;
    }

    .info-section-paragraph {
      font-size: var(--fs__m);
      text-align: left;
      line-height: 1.6;
    }
  }


/* セクションヘッダー */
.page-header {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;
    margin-bottom: 20px; /* カードとの間隔 */
    text-align: center;
}

.page-header h2 {
    font-size: 2.4rem;
    color: #333; /* テーマカラー */
    font-weight: bold;
    margin: 0;
}

.page-header p {
    font-size: 1.6rem;
    color: #666;
    margin-bottom: 20px;
}

/* セクションの基本設定 */
#prologue-section {
    width: 100%;
    padding: 40px 20px;
    display: flex;
    justify-content: center; /* 🔥 コンテンツ全体を中央揃え */
    position: relative;
}


/* 2つのコンテナを中央から左右に配置 */
.prologue-container {
    display: flex;
    align-items: center;
    justify-content: center; /* 🔥 中央から左右へ配置 */
    max-width: 1200px;
    height: 100%;
}


/* 背景画像（上部に配置） */
.prologue-background-logo {
    position: absolute;
    top: 0;
    left: 30%;
    transform: translateX(-50%);
    width: 500px; /* 適宜調整 */
    height: auto;
    opacity: 0.2; /* 透過させる */
    z-index: -1; /* 🔥 背景として配置 */
}
/* 左側コンテンツ */
.prologue-left {
    position: relative;
    width: 50%;
    text-align: left;

}

/* 左側テキスト */
.prologue-left-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    padding: 10px;
}

.prologue-left-content p {
    font-size: var(--fs__l);
    line-height: var(--line-height__paragraph);
}


.prologue-right {
  position: relative; /* 🔥 四隅にabsolute配置するため必須 */
  max-width: 800px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 20px; /* 🔥 イラストとの余白 */
  box-sizing: border-box;
}

/* 見出し（縦書き） */
.prologue-right h2 {
    font-size: var(--fs__5l);
    line-height: 2.5; /* 🔥 文字間のスペースを広げる */
    letter-spacing: 0.2em; /* 🔥 縦書きでも若干の文字間隔調整 */
    padding: 10px;
    margin-left: 5px;
}

/* 段落（縦書き・改行あり） */
.prologue-right p {
    font-size: var(--fs__2l);
    line-height: var(--line-height__paragraph);
    margin: 40px 0 0 0;
    padding: 10px;
}

/* 共通の角イラストスタイル */
.prologue-right .corner {
  position: absolute;
  width: 80px; /* 必要に応じて調整 */
  height: auto;
  z-index: 1;
  opacity: 0.9;
}

/* 四隅の位置指定 */
.top-left {
  top: 0;
  left: 0;
}
.top-right {
  top: 0;
  right: 0;
}
.bottom-left {
  bottom: 0;
  left: 0;
}
.bottom-right {
  bottom: 0;
  right: 0;
}



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

/* 1024px以下（タブレット） */
@media screen and (max-width: 1024px) {
    .prologue-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .prologue-right {
      width: 100%;
      writing-mode: horizontal-tb; /* 🔁 横書きに変更 */
      text-align: center;
      align-items: center; /* 横書き時は中央寄せ */
    }

    .prologue-right h2 {
      font-size: var(--fs__4l);
      margin: 0 0 20px 0;
    }

    .prologue-right p {
      font-size: var(--fs__1l);
      line-height: 1.8;
      margin: 10px 0;
    }

    .prologue-background-logo {
      width: 400px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* 768px以下（スマホ・小さいタブレット） */
  @media screen and (max-width: 768px) {
    .prologue-right h2 {
      font-size: var(--fs__3l);
    }

    .prologue-right p {
      font-size: var(--fs__l);
      line-height: 1.6;
    }

    .prologue-background-logo {
      width: 350px;
      opacity: 0.2;
    }

    .prologue-right .corner {
      width: 70px; /* 必要に応じて調整 */
      height: auto;
    }
  }

  /* 600px以下（スマホ小） */
  @media screen and (max-width: 600px) {
    .prologue-right h2 {
      font-size: var(--fs__2l);
    }

    .prologue-right p {
      font-size:var(--fs__l);
      line-height: 1.5;
    }

    .prologue-background-logo {
      width: 300px;
      opacity: 0.15;
    }


    .prologue-right .corner {
      width: 50px; /* 必要に応じて調整 */
      height: auto;
    }
  }



  /* 相談方法セクション */
#consultation-methods {
    margin: 40px auto;
    padding: 20px;
  }

  /* ✅ セクションタイトル（デフォルト） */
  .consultation-methods-title {
    text-align: center;
    font-size: var(--fs__5l); /* 基本フォントサイズ */
    margin-bottom: 20px;
  }

  /* ✅ 事前相談の説明文（可読性向上） */
  .consultation-methods-text {
    text-align: center; /* ✅ 中央揃え */
    font-size: var(--fs__l); /* ✅ 適切なフォントサイズ */
    color: #333; /* ✅ 読みやすいダークグレー */
    line-height: 1.8; /* ✅ 読みやすくするための行間 */
    border-bottom: #333 1px solid;
    padding: 15px 20px; /* ✅ 内側に余白を確保 */
    max-width: 700px; /* ✅ 最大幅を指定 */
    margin: 0 auto 40px; /* ✅ 中央配置 & 下に余白 */
  }


  /* ✅ 1224px以下のタブレット用 */
  @media screen and (max-width: 1224px) {
    .consultation-methods-title {
      font-size: var(--fs__4l); /* 少し小さく */
      margin-bottom: 35px; /* 余白を微調整 */
    }
  }

  /* ✅ 1024px以下のタブレット・スマホ用 */
  @media screen and (max-width: 1024px) {
    .consultation-methods-title {
      font-size: var(--fs__3l); /* さらに縮小 */
      margin-bottom: 30px;
    }
  }

  /* ✅ 768px以下のスマホ用 */
  @media screen and (max-width: 768px) {
    .consultation-methods-title {
      font-size: var(--fs__2l); /* スマホ向けに調整 */
      margin-bottom: 25px;
    }
    .consultation-methods-text {
        text-align: center;
        font-size: var(--fs__l);
      }
  }

@media screen and (max-width: 600px) {
    .consultation-methods-title {
        font-size: var(--fs__2l); /* スマホ向けに調整 */
        margin-bottom: 25px;
    }
    .consultation-methods-text {
        text-align: center;
        font-size: var(--fs__m);
        line-height: 1.6;
        padding: 15px 18px;
        margin: 0 auto 40px;
        }
    }

  /* ✅ 480px以下の小さいスマホ用 */
  @media screen and (max-width: 480px) {
    .consultation-methods-title {
      font-size: var(--fs__1l); /* さらに小さく */
      margin-bottom: 20px;
    }

    .consultation-methods-text {
        text-align: left;
        font-size: var(--fs__m);
        color: #333;
        line-height: 1.5;
        border-bottom: #333 1px solid;
        padding: 15px 18px;
        margin: 0 auto 30px;
      }
  }


  .methods-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 30px;
    padding: 0 20px;
    margin-bottom: 30px;
  }


  .method-item {
    text-align: center;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 180px;
    isolation: isolate;
    background-color: #FFFCF7;
    /* ✅ 横幅を制限 */
    width: 100%;
    max-width: 440px; /* お好みで調整。例: 300px, 350pxなど */
    box-sizing: border-box;
    overflow: hidden;
  }

 /* .method-item-1 {
    background-image: url('/wp-content/themes/akitsusousai/assets/images/common/sumi-left.svg');
  }

  .method-item-2 {
    background-image: url('/wp-content/themes/akitsusousai/assets/images/common/sumi.svg');
  } */


  /* .method-item::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 0;
  } */

  .method-item * {
    position: relative;
    z-index: 1;
  }

  /* 左下にぴったり合う三角形 */
  .method-number {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-right: 100px solid #004d67;; /* 右向きの底辺 */
    border-top: 100px solid transparent;            /* 高さ */
    z-index: 1;
  }

  .method-number .icon-wrap {
    position: absolute;
    right: -65px;
    bottom: -50px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg); /* 三角に沿って表示 */
    transform-origin: bottom right;
    z-index: 2;
    pointer-events: none;
  }

  .method-number .icon-wrap img {
    width: 24px;
    height: 24px;
    transform: rotate(-45deg);
  }



  .method-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* 相談方法画像 */
  .method-item img {
    width: 100%;
    max-width: 150px;
    margin: 15px auto;
  }

  /* タイトル */
  .method-item h3 {
    font-size: var(--fs__3l);
    margin-bottom: 10px;
  }

  /* テキスト */
  .method-item p {
    font-size: var(--fs__l);
    line-height: 1.6;
  }

  /* ボタンスタイル */
  .method-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    max-width: 330px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    font-size: var(--fs__l);
    font-weight: bold;
    margin-top: auto;
  }

  /* LINEボタン */
  .method-line-btn {
    background-color: #ffffff;
    color: #00B900;
    border: 1px solid #00B900;
  }

  /* ボタンのリンク */
  .jizen-btn {
    display: inline-block;
    background-color: #004d67;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out;
  }

  .jizen-btn:hover {
    background-color: #00384e;
  }

  /* レスポンシブ対応 */
  @media (max-width: 1024px) {
    .methods-container {
        grid-template-columns: repeat(2, 1fr); /* タブレットでは2列 */
    }
  }

  @media (max-width: 768px) {
    .methods-container {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
  }


/* セクション全体のスタイル */
#apply-section {
    padding: 60px 20px;
    background-color: #D9D3C7;
    /* background-image: url("/wp-content/themes/akitsusousai/assets/images/common/image03.svg") */

}

.apply-container {
    display: flex;
    flex-direction: column; /* 🚀 上下に配置 */
    align-items: center; /* 🚀 中央寄せ */
    justify-content: center;
    gap: 20px; /* 🚀 適度な間隔 */
}

/* ✅ `apply-header` を `card-container` の上に配置 */
.apply-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* 🚀 テキストを中央寄せ */
    width: 100%;
    max-width: 600px; /* 🚀 幅の制限を調整 */
    padding: 10px;
    gap: 10px;
    position: relative;
    margin-top: 0;
}

/* ✅ h2（横書き） */
.apply-header h2 {
    font-size: var(--fs__5l);
    line-height: 1.5;
    letter-spacing: 0.1em;
    font-weight: bold;
    padding: 10px;
    margin: 0;

}

/* ✅ p（横書き） */
.apply-header p {
    font-size: var(--fs__1l);
    line-height: 1.8;

    text-align: center;
}


/* ✅ `card-container` の配置を調整 */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 🚀 カードを中央配置 */
    gap: 20px;
    width: 100%;
    max-width: 1200px; /* 🚀 幅を制限 */
    /* background-color: #ffffff;
    padding: 40px 20px; */
}

/* ✅ `apply-card` のスタイル */
.apply-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background: #f3f1ec;
    border-radius: 8px;
    overflow: hidden;
    max-width: 350px;
    height: 280px;
    width: 100%;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* LINEのカードの背景画像 */
.apply-card:nth-child(1) {
    background-image: url("/wp-content/themes/akitsusousai/assets/images/common/sumaho_honban_3.svg")!important;
}

/* フリーダイヤルのカードの背景画像 */
.apply-card:nth-child(2) {
    background-image: url("/wp-content/themes/akitsusousai/assets/images/common/dennwa.svg");
}

/* 🔥 カードホバー時のアクション */
.apply-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 🔥 カードの表面に h3 と p を中央配置 */
.apply-card-content,
.apply-card-content-line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* 🔥 縦方向に完全に中央配置 */
    text-align: left;
    color: white; /* 🔥 白抜き */
    background: rgba(0, 77, 103, 0.9); /* 🔥 背景を半透明 */
    padding: 10px 20px;
    height: 80px;
    width: 90%; /* 🔥 横幅をカード全体に広げる */
    max-width: 100%; /* 🔥 はみ出ないよう調整 */
    box-sizing: border-box; /* 🔥 paddingを含めた幅で調整 */
}

/* 🔥 h3 とアイコンを横並びに */
.apply-card-title {
    display: flex;
    align-items: center; /* 🔥 高さを揃える */
    gap: 10px; /* 🔥 h3 と画像の間隔を調整 */
}

.apply-card-content h3,
.apply-card-content-line h3 {
    font-size: var(--fs__l);
    font-weight: bold;
    display: inline-flex; /* 🔥 横並びにする */
    align-items: center;
}

/* 🔥 矢印アイコン */
.chevron-icon {
    width: 24px; /* 🔥 アイコンのサイズを調整 */
    height: auto;
}




/* 🔥 説明文（中央表示・白抜き） */
.apply-card-content p,
.apply-card-content-line p {
    font-size: var(--fs__m);
    font-weight: bold;
    line-height: 1.5;
}

/* 🔥 ボタンの調整 */
.apply-card-btn,
.apply-card-btn-line {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.apply-card-btn img,
.apply-card-btn-line img {
    max-width: 80%;
    max-height: 80%;
}

/* 🔥 説明文をカードコンテナの下に配置 */
.apply-description {
    font-size: var(--fs__m);
    font-weight: bold;
    text-align: center; /* 🔥 中央揃え */
    margin-top: 20px; /* 🔥 カードコンテナとの間隔 */
    max-width: 100%;
    box-sizing: border-box;
    border-bottom: #333 solid 1px;
}

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

/* 1024px以下（タブレット） */
@media screen and (max-width: 1024px) {
    .apply-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .apply-header {
        writing-mode: vertical-rl; /* 🔥 縦書きを維持 */
        text-align: center;
        align-items: center; /* 🔥 中央揃え */
        width: auto;
        margin: 0 auto; /* 🔥 センター配置 */
    }

    .apply-header h2 {
        font-size: 2rem;
        padding: 8px;
    }

    .apply-header p {
        font-size: 1.2rem;
        padding: 8px;
    }

    .card-container {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .apply-card {
        max-width: 350px;
        height: 280px;
        padding: 15px;
    }

    .apply-card-content,
    .apply-card-content-line {
        width: 95%;
        height: 70px;
    }

    .apply-card-content h3,
    .apply-card-content-line h3 {
        font-size: 1.4rem;
    }

    .apply-card-content p,
    .apply-card-content-line p {
        font-size: 1.1rem;
    }
}

/* 768px以下（スマホ・小さいタブレット） */
@media screen and (max-width: 768px) {
    .apply-container {
        flex-direction: column;
    }

    .apply-header {
        writing-mode: vertical-rl; /* 🔥 縦書きを維持 */
        text-align: center;
        align-items: center; /* 🔥 縦書きのままセンター配置 */
        margin: 0 auto;
    }

    .apply-header h2 {
        font-size: 1.8rem;
    }

    .apply-header p {
        font-size: 1rem;
    }

    .card-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .apply-card {
        max-width: 90%;
        height: auto;
    }

    .apply-card-content,
    .apply-card-content-line {
        height: auto;
        padding: 10px;
    }
}

/* 600px以下（スマホ小） */
@media screen and (max-width: 600px) {
    .apply-container {
        padding: 10px;
    }

    .apply-header {
        writing-mode: vertical-rl; /* 🔥 縦書きを維持 */
        text-align: center;
        align-items: center;
        margin: 0 auto;
    }

    .apply-header h2 {
        font-size: 1.6rem;
    }

    .apply-header p {
        font-size: 0.9rem;
    }

    .apply-card {
        max-width: 95%;
        padding: 10px;
    }

    .apply-card-content h3,
    .apply-card-content-line h3 {
        font-size: 1.2rem;
    }

    .apply-card-content p,
    .apply-card-content-line p {
        font-size: 1rem;
    }

    .apply-card-btn,
    .apply-card-btn-line {
        width: 40px;
        height: 40px;
    }
}


#hall-section {
    padding: 0 !important;
    position: relative;
}

/* 画像、説明文、見出しを横並びに配置 */
.hall-header-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px; /* 各要素の間隔 */
    z-index: 1;
}

/* 画像エリア */
.hall-top-image {
    position: relative;
    width: 80%;
    margin-top: 30px;
    margin-left: 30px;
    padding-top: 56.25%; /* 画像の縦横比を統一 */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.hall-top-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* 最初は非表示 */
    transition: opacity 1.5s ease-in-out;
}

.hall-top-image img.active {
    opacity: 1;

}

.hall-text-wrapper {
    display: flex;
    align-items: flex-start; /* 上から揃える */
    justify-content: flex-end; /* 要素を右寄せ */
    gap: 20px;
    background-color: #004d67;
    padding: 20px;
    margin-top: -40px;
    text-align: right;
    box-sizing: border-box;
    width: 100%;
    max-width: 210px; /* 🔥 最大幅を1200pxなどに制限 */
    margin-left: auto;
    margin-right: auto; /* 🔥 中央寄せ */

}

.hall-header {
    /* h2の基準を整える */
    display: inline-block;
    box-sizing: border-box;
    padding-top: 0;
    margin: 0;

  vertical-align: top;
}

.hall-header h2 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: var(--fs__5l);
    color: #ffffff;
    margin: 0;
    padding: 10px 0;
}

.hall-description {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

  vertical-align: top;
}

.hall-description p {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: var(--fs__2l);
    color: #ffffff;
    line-height: 1.8;
    margin: 0;
    padding: 10px 0;
}

.hall-card {
    position: relative;
    background-color: #7faaaa;
    padding: 40px;
    margin-top: -100px;
    margin-bottom: 0px;

}


.hall-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 50px;
}

.sircle-hall-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 50px 0;
}

.hall-image-top {
    position: relative;
    width: 400px;
    height: 250px;
}

.hall-image-top img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}



.hall-text {
    position: absolute;
    width: 180px; /* 🔥 幅を固定して文字数の影響を受けない */
    height: 45px; /* 🔥 高さも固定 */
    padding: 10px; /* 🔥 余白を調整 */
    background: rgba(0, 77, 103, 0.8); /* 半透明の背景色 */
    color: white;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;

    left: 0px; /* 🔥 画像の左端から 10px */
    top: 20%; /* 🔥 画像の縦中央基準 */
    transform: translateY(-50%); /* 🔥 完全に縦中央へ */
    pointer-events: none;
}

@media screen and (max-width: 1023px) and (min-width: 769px) {
  .hall-card {
    margin-top: 0; /* ✅ 負のマージンを解除して潜り込みを防止 */
  }

  .hall-text-wrapper {
    margin-top: 0; /* ✅ テキストを通常の位置に戻す */
  }
}



@media screen and (max-width: 768px) {
    .hall-header-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .hall-text-wrapper {
      order: -1; /* 🔥 上に表示させる */
      flex-direction: column;
      align-items: center;
      background-color: #004d67;
      padding: 20px 0;
      margin: 0 auto;
      max-width: none;
      width: 100%;
      justify-content: center;
    }

    .hall-card {
      margin-top: 0; /* ✅ スマホでは重なりを防止 */
      padding: 20px; /* ✅ スマホでも余白を自然に保つ */
    }

    .hall-content {
      padding-top: 0px; /* ✅ 不要な上部スペースを抑える */
      gap: 20px;
      margin-bottom: 20px;
    }

    .hall-top-image {
      width: 95%;
      max-width: 800px;
      margin: 0 auto;         /* ✅ 中央に配置 */
      padding-top: 60%;       /* ✅ 高さ比率維持 */
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      box-sizing: border-box;
      box-shadow: none;
    }

    .hall-top-image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }


    .hall-description {
      text-align: center;
      margin: 0 auto;
    }

    .hall-description p {
      writing-mode: horizontal-tb;
      font-size: var(--fs__l);
      line-height: 1.6;
    }

    .hall-header {
      order: -1;
      align-self: center;
    }

    .hall-header h2 {
      writing-mode: horizontal-tb;
      font-size: var(--fs__3l);
      text-align: center;
    }
  }

  @media screen and (max-width: 576px) {
    .hall-content,
    .sircle-hall-images {
      width: 90vw;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      box-sizing: border-box;
    }

    .hall-top-image,
    .hall-image-top {
      width: 90vw;
      max-width: 400px;
      aspect-ratio: 1 / 1;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 0 !important;
    }

    .hall-top-image img,
    .hall-image-top img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }

    .hall-text {
      position: absolute;
      top: 15%;
      left: 25%;
      width: 50%;
      height: 40px;
      line-height: 50px;
      background: rgba(0, 77, 103, 0.8);
      color: #fff;
      text-align: center;
      font-size: var(--fs__m);
      border-radius: 9999px;
    }
  }


.reasons-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
    border-top-right-radius: 100px; /* 右上の角を丸くする */
  }

  /* 縦書き見出し */
  .vertical-heading {
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright; /* 文字を縦方向に整列 */
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap; /* 折り返し防止 */
    z-index: 2; /* 画像より前面に表示 */
  }

  /* 各理由ブロック */
  .reason-block {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .reason-block.left {
    flex-direction: row; /* 左配置 */
  }

  .reason-block.right {
    flex-direction: row-reverse; /* 右配置 */
  }

  /* 画像のスタイル */
  .circle-image,
  .square-image {
    width: 400px;
    height: 400px;
    object-fit: cover;
    position: relative;
    z-index: 1; /* 見出しより後ろに配置 */
  }

  .circle-image {
    border-radius: 50%; /* 丸抜き画像 */
  }

  .square-image {
    border-radius: 0; /* 正方形画像 */
  }


/* お知らせセクション */
#news-section {
    padding: 40px 20px;
    text-align: center;
}

/* ニュース全体のレイアウト */
.news-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px; /* ヘッダーとリストの間隔 */
    margin: 40px 0;
}

/* 縦書きのヘッダー */
.news-header {
    position: relative; /* 疑似要素の基準位置 */
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px; /* 固定幅 */
    text-align: center;
    padding: 20px 0;
}

/* 背景の "NEWS" テキスト */
.news-header::before {
    font-family: "M PLUS 1p";
    content: "NEWS"; /* 背景テキスト */
    position: absolute;
    font-size: 10rem; /* 大きめのサイズ */
    font-weight: bold;
    color: rgba(221, 221, 221, 0.6); /* 透明度を下げた薄いグレー */
    top: 0%;
    left: 50%;
    white-space: nowrap; /* 🔥 文字が折り返されないように */
    transform: translate(-50%, -50%); /* 🔥 完全に中央に配置 */
    writing-mode: horizontal-tb; /* ✅ 横書きに固定 */
    text-orientation: mixed; /* ✅ 文字の方向を通常に */
    z-index: -1; /* 背面に配置 */
}

/* h2 のデザイン */
.news-header h2 {
    font-size: var(--fs__5l);

    margin: 0;
    position: relative;
    z-index: 1; /* 背景より前面に配置 */
}


.news-header p {
    font-size: var(--fs__m);
    color: #333;
    line-height: 1.8;
    margin: 0;
}

/* お知らせリスト */
.news-list {
    list-style: none;
    padding: 10px;
    margin: 0;
    width: 60%;
}

.news-item {
    display: flex;
    flex-wrap: wrap; /* レスポンシブ時の折り返しに対応 */
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #c9c9c9;
    padding: 10px;
    gap: 10px; /* レスポンシブ時の余白 */
  }
  /* 📌 メタ情報を横並びにする */
.news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }


  .news-date {
    font-size: var(--fs__m);
    font-weight: bold;
    margin-right: 10px;
    white-space: nowrap;
  }

  .news-category {
    font-size: var(--fs__m);
    color: #333;
    background: #e5eaee;
    padding: 1px 8px;
    white-space: nowrap;
  }

  .news-new {
    background: red;
    color: white;
    font-size: var(--fs__s);
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
  }

  .news-title {
    flex-grow: 1;
    font-size: var(--fs__m);
    text-decoration: none;
    color: #333;
    font-weight: bold;
    white-space: normal;
  }

  .news-arrow {
    width: 10px;
    height: 10px;
    background: url('矢印アイコンのURL') no-repeat center center;
    background-size: contain;
    margin-left: auto;
  }

@media screen and (max-width: 768px) {
    .news-container {
      flex-direction: column;
      align-items: center;
      gap: 20px; /* 間隔を少し詰める */
    }

    .news-header {
      writing-mode: horizontal-tb; /* 🔁 横書きに変更 */
      text-orientation: mixed;
      width: auto; /* 🔁 横幅に合わせて広がる */
      padding: 10px 0;
    }

    .news-header::before {
      font-size: 6rem; /* 🔁 少し小さくしてモバイルに収める */
      top: 0;
      left: 50%;
      transform: translate(-50%, -20%); /* 🔁 位置を微調整 */
      writing-mode: horizontal-tb;
      text-orientation: mixed;
    }

    .news-header h2 {
      text-align: center;
      font-size: var(--fs__5l); /* 🔁 サイズ維持 */
    }

    .news-header p {
      text-align: center;
      font-size: var(--fs__m);
    }

    .news-list {
      width: 100%; /* 🔁 画面幅にフィット */
      padding: 0 10px;
    }

    .news-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }

    .news-title {
      font-size: var(--fs__m);
      line-height: 1.6;
    }
  }



   /* #jizen-section の余白を完全になくす */
#jizen-section {
    width: 100%; /* 🔥 #main-area の影響を受けつつ最大幅 */
    padding: 0 !important; /* 🔥 #main-area > section の padding を上書き */
    margin: 0; /* 🔥 マージンもなし */
}

/* jizenコンテナ */
.footer-jizen-container {
    display: flex;
    gap: 0; /* 🔥 空白なく配置 */
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
}

/* 各カード */
.footer-jizen-card {
    position: relative; /* 🔥 オーバーレイ用 */
    width: calc(100% / 3); /* 🔥 3つ並ぶように幅を調整 */
    height: 330px; /* 🔥 カードの高さ */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
      /* ✅ ボーダー追加（重複しないように） */
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
    background-size: cover; /* 🔥 背景画像をカード全体にフィット */
    background-position: center; /* 🔥 画像の位置を中央に */
    background-repeat: no-repeat; /* 🔥 繰り返しを無効化 */
    overflow: hidden; /* 🔥 はみ出し防止 */
    background-color: #f8f8f8;
}



/* カードの背景を暗くするオーバーレイ */
.footer-jizen-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(127, 170, 170, 0.3); /* 🔥 背景を40%暗く */
    z-index: 0;
}

.footer-jizen-card:nth-child(3n) {
    border-right: none;
  }

/* テキストを前面に */
.footer-jizen-card span {
    z-index: 1; /* 🔥 オーバーレイの上に表示 */
    font-size: 1.6rem;
    font-weight: bold;
}

/* 供花の注文のテキスト背景（縦書き + 右上配置 + 上部起点） */
.highlight-text {
    background: rgba(230, 230, 230, 0.9);
    color: #333; /* 🔥 白文字で視認性を確保 */
    width: 50px; /* 🔥 幅を固定して文字数の影響を受けない */
    height: 200px; /* 🔥 高さも固定 */
    padding: 12px 0; /* 🔥 上下の余白を調整 */

    /* 🔥 テキストを中央配置 */
    display: flex;
    align-items:flex-start; /* ✅ 縦方向の中央配置 */
    justify-content: center; /* ✅ 横方向の中央配置 */
    text-align: center; /* ✅ テキストを中央揃え */

    flex-direction: column; /* ✅ 縦書きなので `column` */
    writing-mode: vertical-rl; /* ✅ 縦書き（右から左へ） */
    text-orientation: upright; /* ✅ 文字を正しい向きで表示 */

    position: absolute;
    right: 8%; /* ✅ 右端にピッタリ配置 */
    top: 0; /* ✅ `.footer-jizen-card` の上端と揃える */
    height: 100%; /* ✅ `.footer-jizen-card` の高さに合わせる */
}



/* 各カードごとに異なる背景画像を設定 */
.footer-card1 {
    background-image: url('/wp-content/themes/akitsusousai/assets/images/common/footer-jizen.png');
}

.footer-card2 {
    background-image: url('/wp-content/themes/akitsusousai/assets/images/common/kyoka.png');
}

.footer-card3 {
    background-image: url('/wp-content/themes/akitsusousai/assets/images/common/bba_3.png');
}

/* ==========================
   1224px以下で3列レイアウトを維持
==========================*/
@media screen and (max-width: 1224px) and (min-width: 1024px) {


    /* 供花の注文のテキスト背景は横書きに変更 */
    .highlight-text {
        writing-mode: horizontal-tb; /* 横書きに変更 */
        text-orientation: mixed;
        width: auto;
        height: auto;
        padding: 0 12px; /* 横書き用に余白を調整 */
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 10px; /* 右端に配置 */
        top: 10px; /* 上端に配置 */
        font-size: 1.2rem;
        gap: 0;
    }
}

/* ==========================
   1023px以下で縦1列に切り替え
==========================*/
@media screen and (max-width: 1023px) {
          /* 余白をさらに調整 */
    #jizen-section {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .footer-jizen-container {
        display: flex;
        flex-direction: column; /* 縦並び */
        align-items: stretch; /* カードを親要素の幅にフィットさせる */
    }

    .footer-jizen-card {
        width: 100%;
        height: 250px;
        max-width: none;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #f8f8f8;
    }

    /* 供花の注文のテキスト背景は横書きに変更 */
    .highlight-text {
        writing-mode: horizontal-tb; /* 横書きに変更 */
        text-orientation: mixed;
        width: auto;
        height: auto;
        padding: 0 12px; /* 横書き用に余白を調整 */
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%; /* カードの中央に配置 */
        left: 50%;
        transform: translate(-50%, -50%); /* 完全に中央に配置 */
        font-size: 1.6rem;
        gap: 0;
        background: rgba(0, 77, 103, 0.8); /* 半透明の背景色 */
        color: white; /* 白文字 */
    }
}

/* 768px以下（スマホ）の場合 */
@media screen and (max-width: 768px) {
    #jizen-section {
        margin: 0 !important;
        padding: 0 !important;
    }

    #jizen-section + section {
        margin-top: 0;
      }

    .footer-jizen-card {
        width: 100%;
        height: 200px;
        max-width: none;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #f8f8f8;
    }
}



  @media screen and (max-width: 480px) {
    .footer-jizen-card {
      width: 100%;
      border-right: none;
    }
  }


/* =========================
   フッター全体のレイアウト
========================= */
#footer {
    width: calc(100vw - var(--header-width));
    max-width: 100%;
    background: #004d67;
    color: #333;
    text-align: center;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 990px以下（サイドメニューなし）の場合 */
@media screen and (max-width: 1023px) {
    #footer {
        width: 100%;
        margin-left: 0;
        padding: 50px 15px;
    }
}

/* 768px以下（スマホ）の場合 */
@media screen and (max-width: 768px) {

    #footer {
        margin-top: 0;
        padding-top: 0;
        padding: 0;
    }
}

/* ==========
   フッター内のコンテンツ配置
========== */
.footer-content {
    display: flex;
    justify-content: space-between; /* 🔥 左右に適切な余白 */
    align-items: stretch; /* 🔥 高さを揃える */
    width: 100%;
    max-width: 1224px; /* 🔥 最大幅 */
    margin: 0 auto;
    padding: 40px 40px 20px 40px; /* 🔥 左右の余白を適用 */
    gap: 50px; /* 🔥 左右の間隔を確保 */
}
/* 家族葬情報のコンテナ */
.footer-details {
    display: flex;
    flex-direction: column;
    align-items: center; /* 🔥 中央揃え */
    text-align: center;
    justify-content: center;
    width: 100%;
}
/* ==========
   家族葬・ロゴ・住所
========== */
.footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex: 1; /* 🔥 高さを統一 */
    min-height: 100%; /* 🔥 高さを揃える */
    padding: 20px;
    background: #004d67; /* 🔥 背景色を設定 */
    border: #7faaaa solid 5px;
    border-radius: 0px; /* 🔥 デザインの統一感 */
    color: #ffffff;
    font-weight: bold;
}

.footer-info img {
    width: 180px;
    height: auto;
    margin-top: 10px;
}

.footer-address {
    margin: 20px 0;
    font-size: var(--fs__s);
    line-height: 1.6;
    text-align: left; /* 🔥 左揃え */
    width: 100%; /* 🔥 幅いっぱいに広げる */
    display: flex;
    flex-direction: column;
    align-items: center; /* 🔥 中央配置 */
}


.footer-address p {
    width: fit-content; /* 🔥 テキストの幅に合わせる */
    text-align: center; /* 🔥 左揃え */
}
/* ==========
   Googleマップ
========== */
.footer-map {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

.footer-map iframe {
    width: 330px;
    height: 200px;
}

/* ==========
   LINE・電話ボタン（高さを揃える）
========== */
.footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; /* 🔥 高さを統一 */
    min-height: 100%; /* 🔥 高さを揃える */
    padding: 20px;
    background: #004d67; /* 🔥 背景色を設定 */
    border-radius: 0px; /* 🔥 デザインの統一感 */
    border: #7faaaa solid 5px;
}

/* ボタン全体のコンテナ */
.footer-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* 各ボタンのブロック */
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* テキストのスタイル */
.footer-contact-text {
    font-size: var(--fs__l);
    font-weight: bold;
    margin-bottom: 8px;
    color: #ffffff;
}

/* ボタンの共通スタイル */
.footer-phone-button, .footer-line-button,.footer-urgency-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rem;
    width: 330px;
    height: 55px;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    gap: 10px;
    transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* 電話ボタンのスタイル */
.footer-phone-button {
    background-color: #ffffff;
    color: #004d67;
    border: 2px solid #007a99;
    padding: 10px;
}

/* LINEボタンのスタイル */
.footer-line-button {
    background-color: #ffffff;
    color: #00B900;
    border: 2px solid #00B900;
    padding: 10px;
}

.footer-urgency-button {
    font-size: var(--fs__l);
    font-weight: bold;
    background-color: #e63946;
    color: #ffffff;
    border: 2px solid #e63946;
    padding: 10px;
  }


/* LINEボタン：クリック時のhover風 */
.footer-line-button:hover,
.footer-line-button.clicked {
  background-color: #00B900;
  color: #ffffff;
  border-color: #00B900;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 185, 0, 0.4);
}

/* フリーダイヤル：クリック時のhover風 */
.footer-phone-button:hover,
.footer-phone-button.clicked {
  background-color: #004d67; /* 少し深めに変化 */
  color: #ffffff;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,  122, 153, 0.4);
}

  .footer-urgency-button:hover,
  .footer-urgency-button.clicked {
    background-color: #ffffff;
    color: #e63946;
    border-color: #e63946;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(255, 64, 80, 0.4);
  }

/* ボタン内の画像 */
.footer-phone-button img, .footer-line-button img, .footer-urgency-button img {
    height: 40px;
    width: auto;

}
/* ボタン内のテキスト */
.footer-phone-button span, .footer-line-button span, .footer-urgency-button span {
    font-size: var(--fs__l);
    font-weight: bold;
}

/* サポート案内セクション */
.footer-support {
    text-align: center;
    margin-bottom: 35px; /* 🔥 下のボタンとの間隔を確保 */
}

/* サポート案内タイトル（左右にラインを追加） */
.footer-support-title {
    font-size: var(--fs__l);
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 🔥 テキストとラインの間隔 */
    position: relative;
}

/* 左右のライン */
.footer-support-title::before,
.footer-support-title::after {
    content: "";
    display: block; /* 🔥 確実に表示 */
    width: 100px; /* 🔥 ラインの長さ */
    height: 5px; /* 🔥 ラインの太さ */
    background-color: #7faaaa; /* 🔥 ラインの色 */
}

/* スマホ対応（ラインの長さを調整） */
@media screen and (max-width: 768px) {
    .footer-support-title {
        font-size: 1.4rem; /* 🔥 フォントサイズを少し小さく */
        gap: 10px; /* 🔥 スペースを調整 */
    }

    .footer-support-title::before,
    .footer-support-title::after {
        width: 50px; /* 🔥 ラインを短く */
    }
}


.footer-support-text {
    font-size: var(--fs__m);
    color: #ffffff;
}

/* LINE・電話ボタンのコンテナ */
.footer-buttons {
    display: flex;
    flex-direction: column; /* 🔥 縦並び */
    align-items: center;
    gap: 15px; /* 🔥 ボタン間の余白 */
}

/* 1224px 以下で縦並びに切り替え */
@media screen and (max-width: 1224px) {
    .footer-content {
        gap: 20px; /* 各要素の間隔 */
    }
}



/* 1224px 以下で縦並びに切り替え */
@media screen and (max-width: 1200px) {
    .footer-content {
        display: flex; /* 縦並びにするために明示的にflexを指定 */
        flex-direction: column; /* 縦並び */
        gap: 20px; /* 各要素の間隔 */
        align-items: center; /* センター寄せ */
    }

    .footer-info, .footer-link {
        width: 100%; /* 幅を100%にしてフルサイズ表示 */
        text-align: center; /* 中央揃え */
    }

    .footer-info .footer-map iframe {
        height: 200px; /* 地図の高さをさらに小さく */
    }

    /* フッターのメニュー */
    .footer-menu ul {
        padding: 0;
        list-style-type: none;
    }

    .footer-menu ul li {
        display: block; /* メニューを縦並び */
        margin-bottom: 10px;
        text-align: center; /* 中央揃え */
    }

    .footer-link .footer-buttons {
        flex-direction: column; /* ボタンの配置を縦に */
    }

    .footer-contact {
        flex-direction: column; /* ボタンを縦並び */
        align-items: center;
    }
}



/* ==========
   スマホ対応（縦並び）
========== */
@media screen and (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* 🔥 スマホでは縦並び */
        align-items: center;
        gap: 30px;
        padding: 20px;
    }

    .footer-info, .footer-link {
        width: 100%; /* 🔥 スマホでは全幅 */
    }

    .footer-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
      }

      .footer-contact {
        width: 100%;
      }

      .footer-phone-button,
      .footer-line-button,
      .footer-urgency-button {
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
        height: 50px;
        padding: 0 12px;
      }

      .footer-contact-text {
        font-size: var(--fs__s);
        margin-bottom: 6px;
      }

      .footer-phone-button span, .footer-line-button span, .footer-urgency-button span {
        font-size: var(--fs__m);
        font-weight: bold;
    }

      .footer-phone-button img,
      .footer-line-button img,
      .footer-urgency-button img {
        width: 24px;
        height: auto;
      }
}

/* ==========
   フッターメニュー
========== */
.footer-menu {
    width: calc(100vw - var(--header-width));
    max-width: 100%;
    margin: 20px auto; /* 🔥 上下の余白 */
    padding: 10px 0;
    text-align: center;
}

.footer-menu ul {
    display: flex;
    justify-content: center; /* 🔥 PCでは中央寄せで横並び */
    gap: 20px; /* 🔥 各メニューの間隔 */
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-menu ul li {
    display: inline-block;
}

.footer-menu ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: var(--fs__s);
    font-weight: bold;
    transition: color 0.3s ease-in-out;
    border-bottom: #ffffff 1px solid;
}

.footer-menu ul li a:hover {
    color: #7faaaa;
}

/* 990px以下（サイドメニューなし）の場合はフル幅 */
@media screen and (max-width: 990px) {
    .footer-menu {
        width: 100%;
    }
}

/* 768px以下（スマホ）の場合は縦並び */
@media screen and (max-width: 768px) {
    .footer-menu ul {
        flex-direction: column; /* 🔥 スマホでは縦並び */
        gap: 10px;
    }
}

/* ==========
   著作権表記
========== */
.footer-copyright {
    width: calc(100vw - var(--header-width));
    max-width: 100%; /* 🔥 画面幅を超えないように制限 */
    text-align: center;
    padding: 15px 0;
    background: #004d67;
    border-top: 2px solid #7faaaa; /* 🔥 上部にラインを追加 */
    font-size: 1rem;
    font-weight: bold;
    color: #7faaaa;
    margin: 0;
}


/* 1023px以下ではフル幅にする！ */
@media screen and (max-width: 1023px) {
    .footer-copyright {
        width: 100%;
    }
}


/* 990px以下（サイドメニューなし）の場合はフル幅 */
@media screen and (max-width: 990px) {
    .footer-copyright {
        width: 100%;
    }
}

.svg-wave-container-2 {
    position: relative;
    width: 100%;
    height: 180px; /* 波の高さ（調整可能） */
    overflow: hidden;
  }


/* セクション全体のスタイル */
#sogi-cases {
    padding: 60px 20px;
    text-align: center;
    position: relative;
}

/* #sogi-cases::before {
    font-family: "M PLUS 1p";
    content: "CASES";
    position: absolute;
    font-size: 12rem;
    font-weight: bold;
    color: rgba(221, 221, 221, 0.5);
    top: 8%;
    right: 3%;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    z-index: -1;
} */


/* コンテナ全体 */
.case-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* カードリスト */
.case-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr)); /* 3列に */
    gap: 20px;
    max-width: 1200px; /* ✅ 画面幅が広すぎる場合の制限 */
    margin: 0 auto; /* ✅ 中央寄せ */
    justify-content: center; /* ✅ グリッド全体を中央に */
}

/* カード */
.case-item {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 350px;
}

.case-item:hover {
    transform: translateY(-5px);
}

/* リンク全体 */
.case-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 画像コンテナ */
.case-img {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 画像 */
.case-img img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    display: block;
}

/* タイトル */
.case-title {
    font-size: 20px;
    margin: 15px 0 10px;
    color: #333;
    text-align: center;
    font-weight: bold;
}

.case-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background-color: #333;
    margin: 8px auto 0;
    border-radius: 2px;
}

/* 説明文 */
.case-excerpt {
    font-size: 16px;
    color: #333;
    margin: 0 15px 10px;
    text-align: left;
    line-height: 1.5;
    padding-left: 10px;
}

/* タグのスタイル */
.case-tags {
    margin: 0 15px 15px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
}

.case-tag {
    font-weight: bold;
    display: inline-block;
    background-color: #ffffff;
    color: #333;
    border: 1px solid #333;
    font-size: 12px;
    padding: 2px 6px;
    margin: 0 5px 0 0;
}
@media screen and (max-width: 1224px) {
    .case-list {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        max-width: 900px; /* ✅ 幅を調整 */
    }
}

/* 🔥 1023px以下で横2列レイアウト */
@media screen and (max-width: 1023px) {
    .case-list {
        grid-template-columns: repeat(2, minmax(280px, 1fr)); /* ✅ 2列 */
        justify-content: center; /* ✅ 2列時も中央寄せ */
        max-width: 800px; /* ✅ 画面幅が狭くなった際の最大幅 */
    }

    .case-item {
        max-width: 400px;
    }
}

/* 🔥 600px以下で縦1列レイアウト */
@media screen and (max-width: 599px) {
    .case-list {
        grid-template-columns: 1fr; /* ✅ 1列 */
        max-width: 400px; /* ✅ 画面幅が狭くなった際の最大幅 */
    }
}


#urgency-staff-section {
    position: relative;
    padding: 60px 0;
    background-image: url('/wp-content/themes/akitsusousai/assets/images/plan/plan_haikei.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    margin: 0;
    z-index: 1;
    overflow: hidden;
  }


  /* ✅ マスク（黒の半透明オーバーレイ） */
  #urgency-staff-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: -1; /* ✅ 背景画像より前・コンテンツより後ろ */
  }

  .staff-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
  }

  .staff-title {
    font-size: var(--fs__5l);
    font-weight: bold;
    margin-bottom: 20px;
  }

  .staff-description {
    font-size: var(--fs__1l);
    margin-bottom: 40px;
    line-height: 1.6;
  }

  .staff-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }

  .staff-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 200px;
  }

  .staff-member img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%; /* ✅ 丸抜き画像 */
    border: 1px solid #ccc; /* ✅ フレーム色（任意） */
    margin-bottom: 10px;
  }

  .staff-name {
    font-size: var(--fs__m);
    font-weight: bold;
    color: #333;
  }

  @media screen and (max-width: 1024px) {
    /* タブレット以下 */
    .staff-container {
      padding: 0 20px;
    }

    .staff-title {
      font-size: var(--fs__4l); /* 少し小さめ */
    }

    .staff-description {
      font-size: var(--fs__l); /* テキストも少し小さめ */
      margin-bottom: 30px;
    }

    .staff-members {
      gap: 30px; /* スタッフ間の間隔を少し詰める */
    }

    .staff-member {
      max-width: 160px; /* ちょっとコンパクトに */
    }

    .staff-member img {
      width: 80px;
      height: 80px;
    }

    .staff-name {
      font-size: var(--fs__s); /* 名前も少し小さく */
    }
  }

  @media screen and (max-width: 768px) {
    /* スマホ以下 */
    #urgency-staff-section {
      padding: 40px 0;
    }

    .staff-container {
      padding: 0 15px;
    }

    .staff-title {
      font-size: var(--fs__3l); /* さらに小さめ */
      margin-bottom: 15px;
    }

    .staff-description {
      font-size: var(--fs__m);
      margin-bottom: 20px;
    }

    .staff-members {
      flex-direction: column; /* スタッフを縦並びにする */
      align-items: center;
      gap: 20px;
    }

    .staff-member {
      max-width: 200px;
    }

    .staff-member img {
      width: 80px;
      height: 80px;
    }

    .staff-name {
      font-size: var(--fs__s);
    }
  }



#marquee-section {
    padding: 2rem 1rem;
    border-top-left-radius: 100px;
  }

  .marquee-container {
    width: 70%;
    overflow: hidden;  /* テキストがコンテナ外に出ないようにする */
    padding: 100px 0;
    white-space: nowrap;
    position: relative;

  }

  .marquee-content {
    position: absolute;  /* `marquee-container` の中で絶対配置 */
    top: 50%;
    left: 100%;  /* 最初はコンテナの右端の外に */
    transform: translateY(-50%);
    font-size: 5rem;
    font-weight: bold;
    color: #ff5733;
    white-space: nowrap;
  }




/* ✅ マーカー風の下線（汎用クラス） */
.marker-yellow,
.marker-blue,
.marker-orange {
    position: relative;
    display: inline-block;
    padding-bottom: 5px; /* 余白を確保 */
}

.marker-yellow::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    background: rgba(255, 221, 0, 0.72);
    z-index: -1;
}

.marker-blue::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background: rgba(173, 216, 230, 0.5);
    z-index: -1;
}

.marker-orange::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background: rgba(255, 124, 30, 0.5);
    z-index: -1;
}

/*  確実にマーカーが表示されるように修正 */
.marker-yellow,
.marker-blue,
.marker-orange {
    z-index: 1;
}

.marker-yellow::after,
.marker-blue::after,
.marker-orange::after {
    z-index: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #member {
        padding: 30px 15px;
    }
}

/* ✅ セクション全体 */
#faq-section {
    padding: 40px 20px;
    margin: 20px auto;
    background-color: #eeefef;
  }
/* ✅ セクションタイトル（デフォルト） */
.faq-title {
    text-align: center;
    font-size: var(--fs__4l); /* 基本フォントサイズ */
    margin-bottom: 40px;
  }
  /* ✅ FAQリスト（中央配置 & 最大幅を指定） */
  .faq-list {
    width: 100%;
    max-width: 800px; /* ✅ 最大幅を統一 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* ✅ 質問間の余白 */
    box-sizing: border-box;
  }

  /* ✅ FAQの各アイテム（ボックス） */
  .faq-item {
    width: 100%; /* ✅ 幅を最大に */
    text-align: left;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* ✅ QとAの間隔 */
  }

  /* ✅ Q&A共通のレイアウト */
  .faq-question,
  .faq-answer {
    font-size: var(--fs__l);
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px; /* ✅ Q/Aとテキストの間隔 */
  }

  /* ✅ ハイライト部分（QとAのボックス） */
  .highlight-q,
  .highlight-a {
    background-color: #004d67; /* Qの背景色 */
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs__m);
    font-weight: bold;
    border-radius: 5px;
    flex-shrink: 0; /* ✅ ボックスサイズを固定 */
  }

  .highlight-a {
    background-color: #C24A57; /* Aの背景色 */
  }

  /* ✅ 1024px ～ 1224px の画面幅で余白を調整 */
  @media screen and (max-width: 1224px) and (min-width: 1024px) {
    .faq-list {
      padding: 0 50px; /* ✅ 上下左右の余白を調整 */

    }
  }


  /* ✅ スマホ（768px以下）での調整 */
  @media screen and (max-width: 768px) {
    .faq-list {
      width: 95%; /* ✅ スマホ時に幅を広げすぎない */
    }

    .faq-item {
      padding: 15px;
    }

    .faq-question,
    .faq-answer {
      font-size: var(--fs__m);
      flex-direction: row; /* ✅ Q/Aとテキストを横並びに維持 */
    }

    .highlight-q,
    .highlight-a {
      width: 35px; /* ✅ スマホ時にボックスを少し小さく */
      height: 35px;
      font-size: var(--fs__m);
    }
  }

  /* サイトマップセクション全体 */
#site-map-page {
    padding: 60px 20px;
    background-color: #f9f9f9;
  }

  #site-map-page .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* セクションタイトル */
  #site-map-page h1 {
    font-size: var(--fs__5l);
    font-weight: bold;
    margin-bottom: 40px;
    text-align: left;
  }

  /* 各ブロックの見出し */
  #site-map-page h2 {
    font-size: var(--fs__3l);
    font-weight: bold;
    margin: 30px 0 10px;
    text-align: left;
  }

  /* リスト全体 */
  #site-map-page ul {
    padding-left: 20px;
    list-style-type: disc;
    margin-bottom: 30px;
  }

  /* 各リンクリストのスタイル */
  #site-map-page li {
    margin-bottom: 10px;
    text-align: left;
  }

  #site-map-page a {
    font-size: var(--fs__l);
    color: #004d67;
    text-decoration: underline;
    transition: color 0.3s ease;
  }

  #site-map-page a:hover {
    color: #c24a57;
  }
  @media screen and (max-width: 768px) {
    #site-map-page {
      padding: 40px 10px;
    }

    #site-map-page h1 {
      font-size: var(--fs__4l);
      text-align: left;
    }

    #site-map-page h2 {
      font-size: var(--fs__2l);
    }

    #site-map-page a {
      font-size: var(--fs__m);
    }
  }


/* 最初は非表示にする */
#bottom-menu {
    display: none;
  }

  /* スマホ幅だけ表示する */
  @media screen and (max-width: 768px) {
    #bottom-menu {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background: #f8f8f8; /* 背景統一 */
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 4999;
      opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.5s ease-out 0.3s forwards;
    }

    .bottom-menu-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      text-decoration: none;
    }

    .menu-content {
        display: flex;
        flex-direction: column; /* 🔥 縦並び */
        align-items: center;
        justify-content: center;
        gap: 4px; /* 🔥 画像とテキストの間にちょっと間隔 */
      }

      .menu-content img {
        width: 28px;
        height: auto;
      }

      .menu-content span {
        font-size: 11px; /* 🔥 小さめのテキスト */
        color: #333;
        line-height: 1.2;
      }

  }

  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* 通常状態 */
.bottom-menu-item {
    transition: transform 0.2s ease; /* 🔥 なめらかに変化 */
  }

  /* 押したとき */
  .bottom-menu-item:active {
    transform: scale(0.9); /* 🔥 90%に縮小して押した感 */
  }

  @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    #bottom-menu {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }