@charset "UTF-8";


/* --- 基本設定 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* ヘッダーの高さ分を指定 */
}

body {
    /* フォント指定集約 */
    font-size: 16px;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    color: #000;
    background-color: #f2ede4;
    line-height: 1.8;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    /* -webkit-font-smoothing: antialiased; */
}

/* 1. イラストの枠（is-image）を、文字を置くための「基準の場所」にする */
.feature-img.is-image, 
.rehab-item .img-box.is-image {
    position: relative; /* これで文字が画像からはみ出さなくなります */
    display: block;      /* 枠の形を整えます */
}

/* 画像の上に「イメージ図」の文字を出す */
.is-image::after {
    content: "※画像はイメージです";
    position: absolute;
    bottom: 5px;   /* 上からの位置 */
    left: 5px;  /* 左からの位置 */
    font-size: 10px;
    color: #666; /* 少し薄めの色にするとデザインを邪魔しません */
    background-color: rgba(255, 255, 255, 0.7); /* 背景を少し透かすと読みやすい */
    padding: 2px 6px;
    z-index: 2;
    pointer-events: none; /* 文字がクリックの邪魔をしないようにする */
}

/* --- ラベル共通スタイル (TOPICS / CONCEPT) --- */
.news-label,
.concept-label {
    display: inline-block;
    color: #fff;
    
    /* フォント設定：300を適用 */
    font-family: "Montserrat", sans-serif;
    font-weight: 300 !important; /* 強制的に細く */
    
    /* サイズと字間の統一 */
    font-size: 14px;           /* 16pxだと少し大きいので、14px程度がより都会的です */
    letter-spacing: 0.25em;    /* 字間を広げて高級感を演出 */
    padding: 6px 20px;         /* 内側の余白 */
    
    text-transform: uppercase; /* 大文字固定 */
    line-height: 1;            /* 行の高さをリセット */
    text-align: center;
}

/* TOPICS横の随時更新しますの文字 */
.inner-news-header {
    display: flex;
    align-items: center; /* 上下中央揃え */
    margin-bottom: 15px;
}

.news-sub-text {
    font-size: 13px;
    color: #8D6748;
    letter-spacing: 0.05em;
    margin-left: 15px;
    font-weight: 500;
    white-space: nowrap; /* 勝手に改行されないように固定 */
}

/* --- 個別の背景色設定 --- */
.news-label {
    background-color: #5D4037; /* トピックス：茶色 */
    margin-right: 30px;        /* ニュース項目との距離 */
}

.concept-label {
    background-color: #2D3A56; /* コンセプト：ネイビーグレー */
    margin-bottom: 20px;       /* 下の見出しとの距離 */
}


.g-nav span {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase; /* 小文字で打っても大文字にする */
}

/* =========================================================
   追加：ドロップダウンメニュー共通・PC版スタイル
   ========================================================= */
.g-nav ul li {
    position: relative; /* 子要素（ドロップダウン）の基準位置に */
}

/* ドロップダウンメニューの初期状態（非表示・アニメーション準備） */
.g-nav ul .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: rgba(74, 49, 33, 0.8);
    padding: 10px 0;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    flex-direction: column; /* 縦並びに強制 */
    gap: 0;
    z-index: 1010;
}

/* ドロップダウン内のリンク設定 */
.g-nav ul .dropdown li {
    width: 100%;
}
.g-nav ul .dropdown a {
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.g-nav ul .dropdown a span {
    font-size: 9px;
    opacity: 0.6;
}

/* =========================================
   PERSONAL PLAN (1日の過ごし方) スタイル
   ========================================= */
.section-personal-plan {
    background-color: #ffffff;
    padding: 100px 0;
}

/* ヘッダー周り */
.plan-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.plan-badge {
    background-color: #112552;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 18px;
    letter-spacing: 0.1em;
    position: relative;
}

/* 左端の赤いアクセント線 */
.plan-badge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: #c00000;
}

.plan-title {
    font-size: 22px;
    color: #000;
    font-weight: bold;
}

/* プラン全体の枠 */
.plan-container {
    background-color: #e9e3da;
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

/* タイムラインの横並び（PC版） */
.timeline-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background-color: #fff;
    padding: 15px;
    border-radius: 6px;
}

.timeline-item {
    padding: 12px 15px !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 時間の見出し */
.time-header {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid #112552;
    width: 100%;
}

/* 各コマのカード */
.item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.card-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* お迎え・お送りバッジ */
.badge-pickup, .badge-send {
    background-color: #2D3A56;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.item-card .img-box {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card .img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 自費延長エリア */
.extension-bar {
    background-color: #dfd5c9;
    padding: 10px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.ext-label {
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: bold;
    color: #112552;
    letter-spacing: 0.1em;
    border-left: 2px solid #112552;
    border-right: 2px solid #112552;
    padding: 0 4px;
}

.ext-detail strong {
    display: block;
    font-size: 14px;
    color: #333;
}

.ext-detail span {
    font-size: 16px;
    font-weight: bold;
    color: #112552;
}



/* PC版：親メニューにマウスホバーした時にじわっと表示 */
@media screen and (min-width: 1025px) {
    .g-nav ul li.has-child:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* 数字 */
.num {
    font-family: "Shippori Mincho", serif; 
    font-size: 5rem;      /* 画像に合わせて大きく */
    line-height: 1;
    display: inline-block;
    color: #333;          /* 墨色に近いグレー */
    font-weight: 700;     /* 太めにして存在感を出す */
    transform: scaleX(0.7); /* 横幅をギュッと細くして縦長感を出す */
    transform-origin: left; /* 左側を起点に圧縮 */
    margin-right: -10px;  /* 圧縮して空いた隙間を詰める */
}

/* 数字の横の英語タイトル (ENTRANCE SPACEなど) */
.feature-body .eng-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #b5b5b5;         /* 透過(rgba)より直接色を指定*/
    font-size: 1rem;      /* 少しサイズアップ */
    letter-spacing: 0.2em;  /* 字間をしっかり空けてモダンに */
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

/* 親要素：横並びの設定 */
.feature-body .title-row {
    display: flex;
    align-items: center; /* 数字の高さの中央に右側を合わせるならcenter、下揃えならbaseline */
    gap: 20px;           /* 数字と文字グループの間の距離 */
    margin-bottom: 25px;
}

/* 右側グループ：英語と日本語を上下に並べる */
.title-group {
    display: flex;
    flex-direction: column; /* 上下に並べる設定 */
    justify-content: center;
    gap: 5px;               /* 英語と日本語の間の隙間 */
}

.feature-body h3 {
    margin: 0; 
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.feature-body h4 {
    font-size: 1.4rem;      /* 1.25remから少しアップ */
    font-weight: 600;
    line-height: 1.5;
    color: #333;
    margin-bottom: 30px;    /* 20pxから30pxへ広げる */
    letter-spacing: 0.1em;  /* 少しだけ字間を空ける */
}

/* 見出し：HTMLで読み込んだWeight:700を適用 */
/* h2, h3 {
    font-weight: 700;
} */



.site-container {
    width: 100%;           /* 基本は100% */
    max-width: 1200px;     /* 最大1200pxに制限 */
    margin: 40px auto 0px;        /* 左右中央寄せ */
    padding: 10px 4% 0;
}

/* --- 固定ヘッダー（ナビゲーション共通化） --- */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 80px;
    background: #4A3121;
    border-bottom: 1px solid #eee;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px 0px;
    display: flex;
    /* ロゴとナビの間隔を自動調整しつつ、両端に配置 */
    justify-content: space-between; 
    align-items: center;
}

.logo img {
    padding: 0 100px 0px;
    height: 70px;
    display: block;
}

/* ナビゲーション全体の背景と形 */
.g-nav {
    background-color: #4A3121; /* 画像に合わせた濃い茶色 */
    padding: 10px 30px;        /* 内側の余白 */
}

.g-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;                 /* 項目間の隙間 */
}

/* PC版ではハンバーガーボタンを隠しておく */
.menu-btn-sp {
    display: none;
}

.g-nav a {
    text-decoration: none;
    color: #f2ede4;               /* 文字色は白 */
    display: flex;
    flex-direction: column;    /* 上下に並べる */
    align-items: center;       /* 中央揃え */
    line-height: 1.2;          /* 行間を少し詰める */
    transition: transform 0.3s ease;    /* 0.3秒かけて変化 */
}

/* 英語部分（上段）のスタイル */
.g-nav a span {
    font-size: 10px;           /* 小さくする */
    font-weight: normal;
    color: #f2ede4;
    letter-spacing: 0.05em;    /* 少し字間を広げる */
    margin-bottom: 2px;
    opacity: 0.5;
}

/* 日本語部分（下段）のスタイル */
.g-nav a {
    font-size: 14px;           /* 日本語をメインのサイズに */
    font-weight: bold;
}

/* マウスを乗せた時の演出*/
.g-nav a:hover {
    /* 上方向に3px移動させる（マイナスが上方向） */
    transform: translateY(-3px);
    
    /* お好みで少しだけ透明度を下げると、より「ボタン感」が出ます */
    opacity: 0.5;
}

/* --- メインビジュアル内の配置設定 --- */

.main-visual {
  position: relative;
  width: 100%;
  height: 80vh; /* 画面の高さの80%にする場合 */
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
}

/* 画像の上のテキスト設定 */
.main-visual__content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 10; /* 画像より前に出す */
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.3); /* 文字を見やすくする影 */
}
/* ここまで */

.mv-main-box {
    position: relative;
    width: 100%;
    height: 500px; /* PCでの表示高さ */
    overflow: hidden;
    background: none; /* ダミー背景を消す */
}



/* スライドが切り替わる時の動きを滑らかに（イージング） */
.swiper-wrapper {
    transition-timing-function: ease-in-out;
}

/* 画像自体のズームアニメーション */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.0);
    opacity: 0;           /* 非表示状態 */
    transition: transform 6s linear, opacity 1.5s ease-in-out; /* 6秒かけてゆっくり拡大 */
}

/* アクティブ（表示中）になったスライドの画像 */
.swiper-slide-active img {
    opacity: 1;           /* じわっと表示 */
    transform: scale(1.15); /* 1.15倍までゆっくり拡大し続ける */
}

/* スライドが切り替わった後の「過去のスライド」が急に消えないようにする */
.swiper-slide-prev img {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}


/* V字ボタンを囲む薄グレーの箱 */
.slider-overlay-box {
    position: absolute;
    /* 数値を大きくすると、画面の端から離れて「内側」に寄ります */
    bottom: 10px;  /* 下端からさらに上へ（30px → 80px） */
    right: 240px;   /* 右端からさらに左へ（30px → 80px） */
    background: rgba(255, 255, 255, 0.8); /* グレーに戻す場合はこちら */
    padding: 0px 20px 20px;
    border-radius: 15px;
    z-index: 10;
    width: 460px; 
}


/* --- V字グリッドの微調整 --- */
.zone-grid-v {
    display: grid;
    grid-template-columns: repeat(2, 140px);
    justify-content: center;
    gap: 10px 10px; 
    /* ここがポイント！大きなマイナス値で上の空き地を消します */
    margin-top: -50px; 
    width: 100%;
}

/* ボタンの基本スタイル（1箇所に集約） */
/* --- [共通設定] --- */
.zone-item {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
    box-sizing: border-box;
    line-height: 1.3;
}

.zone-item .en {
    display: block;
    font-weight: bold;
}

.zone-item .jp {
    display: block;
    font-weight: normal;
}
/* --- V字の配置（ここで全ての位置を決めます） --- */


/* 1段目の左右（一番上：左右に大きく開き、上に持ち上げる） */
.zone-item:nth-child(1) { 
    transform: translate(-80px, -20px); /* 左へ80px、上へ20px */
}
.zone-item:nth-child(1):hover { 
    transform: translate(-80px, -20px) scale(1.05); 
}

.zone-item:nth-child(2) { 
    transform: translate(80px, -20px); /* 右へ80px、上へ20px */
}
.zone-item:nth-child(2):hover { 
    transform: translate(80px, -20px) scale(1.05); 
}

/* 2段目の左右（中央：1段目より内側に寄せ、高さは標準） */
.zone-item:nth-child(3) { 
    transform: translateX(-10px); /* 少しだけ左 */
}
.zone-item:nth-child(3):hover { 
    transform: translateX(-10px) scale(1.05); 
}

.zone-item:nth-child(4) { 
    transform: translateX(10px); /* 少しだけ右 */
}
.zone-item:nth-child(4):hover { 
    transform: translateX(10px) scale(1.05); 
}

/* 3段目：5番目（一番下の尖端：中央に配置し、下に下げる） */
.zone-item:nth-child(5) {
    grid-column: 1 / 3; 
    margin: 0 auto;
    transform: translateY(30px); /* 下に30px下げることでV字の底を作る */
}
.zone-item:nth-child(5):hover {
    transform: translateY(30px) scale(1.05); 
}

/* 補足：タイトルの位置調整 */
.overlay-title {
    text-align: center;
    font-size: 20px;
    color: #5D4037;
    margin-bottom: 0;
    position: relative;
    z-index: 5;
    /* ボタンの1段目と同じ高さまで持ち上げる */
    transform: translateY(-10px); 
}

/* グリッド自体の余白調整 */
.zone-grid-v {
    display: grid;
    grid-template-columns: repeat(2, 140px);
    justify-content: center;
    gap: 15px 10px; /* 縦の隙間を少し広げるとV字が綺麗に見えます */
    margin-top: 0; 
    width: 100%;
}

/* 5番目のホバー（その場で拡大） */
.zone-item:nth-child(5):hover {
    /* 位置指定を維持したまま拡大 */
    transform: translateY(0px) scale(1.05); 
}
.zone-item:hover{
    background: #805333;
}

/* 新しく追加：画面いっぱいに広がる透明な外枠 */
.care-level-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center; /* 中身を中央寄せにする */
    z-index: 150;              /* スライダーより手前に */
}

/* 修正：1200pxの幅を持って中央に配置される器 */
.care-level-container {
    width: 100%;
    max-width: 1200px; /* ここをヘッダーなどと同じ幅に合わせる */
    padding: 0 100px;   /* 画面端ギリギリにならないよう、ヘッダーと同じ余白を入れる */
    display: flex;
    gap: 10px;
    justify-content: flex-start; /* 左側に寄せる場合はこちら */
}

/* 各ボックスの共通スタイル */
.care-box {
    background-color: #af835f; /* ボタンと同じ茶色 */
    color: #fff;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

/* --- スライダー下のキャッチコピー帯 --- */
.hero-catch-bar {
    padding: 30px 20px;
    text-align: center;
    background-color: #fff;
}

.hero-catch-text {
    font-family: "Shippori Mincho", "Noto Serif JP", serif; /* 高級感のある明朝体 */
    font-size: 26px;
    font-weight: 700;
    color: #4A3121; 
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin: 0;
}


/* --- 3. 内覧ボタン（nairan-btn）の調整 --- */
.nairan-form {
    width: 100%;
    margin: -30px 0 50px; /* 下（TOPICS）との間隔 */
}

.nairan-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 600px; /* 必要に応じて元の最大幅に戻せるよう追加 */
    /* 修正：左側のパディングを0にして、赤い四角を左端に密着させます */
    padding: 0px 25px 0px 0px; 
    
    color: #fff !important;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 0.05em;
    background: linear-gradient(180deg, #112552 0%, #2D3A56 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin: 20px auto;
    font-weight: bold;
    overflow: hidden; /* 赤い四角の角がはみ出さないようにマスク */
}

/* 修正：日本語テキストを囲むspanに、左側の適度な余白を持たせる */
.nairan-btn > span:not(.btn-eng-label) {
    line-height: 1.4;
    text-align: left;
    padding-left: 25px; /* 赤い四角との間にできる綺麗な余白 */
    flex: 1; /* 残りの幅いっぱいに広げる */
}

.nairan-btn .arrow {
    margin-left: auto; /* 矢印を右端に固定 */
}

/* --- 追加：左端にくっつく赤い四角のスタイル --- */
.btn-eng-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0000; /* 鮮やかな赤 */
    color: #fff !important;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    
    /* ボタンの高さ（上下のパディング）に合わせる設定 */
    padding: 30px 20px; /* 上下の数値を増やすと、赤い四角の縦幅が連動して広がります */
    align-self: stretch; /* 紺のベースの高さ一杯に強制的に広げる設定 */
    flex-shrink: 0;
}


/* アイコンとテキストの余白 */
.nairan-btn i {
    margin-right: 10px;
}

.nairan-btn .arrow {
    margin-left: 15px;
    transition: transform 0.3s ease;
}

/* --- ホバー時の動き --- */
.nairan-btn:hover {
    /* 少し明るいグラデーションに変化 */
    background: linear-gradient(180deg, #1e5799 0%, #2D3A56 100%);
    
    /* 上に少し浮き上がる */
    transform: translateY(-3px);
    
    /* 影を強くして浮遊感を出す */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    
    opacity: 0.9;
}

/* ホバー時に矢印だけ少し右に動かす */
.nairan-btn:hover .arrow {
    transform: translateX(5px);
}

/* --- TOPICS セクション --- */
.news-section {
    padding: 60px 0;
}

/* ニュースリスト全体の枠線（一番上） */
.news-list {
    border-top: 1px dotted #8D6748;
}

/* 各行のスタイル */
.news-item {
    background-color: #ffe;
    display: flex;
    align-items: center;
    padding: 10px 50px;
    border-bottom: 1px dotted #8D6748; /* 下側の点線 */
}

/* 茶色のラベル部分 */
.news-label {
    background-color: #5D4037;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 15px;
    max-width: 160px;
    text-align: center;
    margin-right: 30px;
    letter-spacing: 0.1em;
}

/* 記事タイトル部分 */
.news-content {
    flex: 1;
    font-size: 15px;
}

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

.news-content a:hover {
    opacity: 0.7;
    text-decoration: underline;
}


.mv {
    padding: 20px 0;
}
.mv-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
/* --- メインビジュアルエリア（枠） --- */
.mv-main-box {
    position: relative;
    width: 100%;
    height: 600px; /* PCでの表示高さ */
    overflow: hidden; /* 画面端からはみ出さないように */
    background-color: #f0f0f0; /* 画像読み込み前の下地 */
}
.mv-fix-content {
    position: absolute; /* 浮かせる */
    top: 0px;          /* 上からの位置（画像に合わせて調整） */
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
    z-index: 50;        /* Swiper(1)より大きく、ボタン(100)より小さい絶妙な位置 */
    pointer-events: none; /* これが重要！文字の下にあるボタンを押せるようにする */
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,0.6);
    padding: 20px 40px 20px;
    margin-top: 0;
}
/* 2. COMING SOONの円（70%サイズ版） */
.circle-coming-soon {
    width: 100px;         /* 元の130pxの約70% */
    height: 100px;
    flex-shrink: 0;      /* 円が横に潰れないように固定 */
    margin: 0 !important;   /* 余計な余白を消す */
}

.circle-coming-soon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 画像を枠内で綺麗に収める */
    display: block;
}

/* キャッチコピーのテキスト */
.fix-catchphrase {
    color: #4A3121;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    text-shadow: 
    2px  2px 0 #fff,
   -2px  2px 0 #fff,
    2px -2px 0 #fff,
   -2px -2px 0 #fff,
    0px  0px 2px #fff,  /* 隙間を埋めるための微調整 */
    4px  4px 6px rgba(0, 0, 0, 0.3); /* これが「影」の部分 */
}

    /* タグ（通所介護）の調整 */
    .tag-care {
        font-size: 12px !important;
        padding: 1px 6px !important;
        margin-left: 5px !important;
        background-color: #8D6748;
        color: #fff;
        /* 親要素のtext-shadowを打ち消す */
        text-shadow: none !important;
    }


/* --- Swiper本体 --- */
.mySwiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 左右のスライドを画面端まで描画させる */
    overflow: visible !important; 
    z-index: 1;
}


/* スライドの切り替えアニメーションを滑らかにする設定 */
.swiper-wrapper {
    transition-timing-function: ease-in-out !important;
}

/* --- スライド内の画像（基本設定：小さくしておく） --- */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 1. 左右の画像はあらかじめ小さく（例：0.5倍）しておく */
    transform: scale(0.5); 
    /* 2. サイズが変わる時のアニメーション（1秒かけて滑らかに） */
    transition: transform 1.0s ease-in-out, opacity 0.5s ease;
    
    /* お好みで左右を少し薄くする */
    opacity: 0.2;
}

/* --- ★ギミック：中央のアクティブなスライドだけ大きくする --- */
.swiper-slide-active img,
.swiper-slide-duplicate-active img {
    /* 1. 中央にきた画像は等倍（1倍）に戻す */
    transform: scale(1.0);
    /* 2. 中央の画像ははっきり見せる */
    opacity: 1.0;
}

/* --- 手前の文字・ボタン（z-indexをしっかり上げる） --- */
.slider-overlay-box,
.care-level-wrapper {
    position: absolute;
    z-index: 100;
    /* (既存の配置スタイル) */
}


.mv-content {
    background: rgba(255,255,255,0.9);
    padding: 30px;
    text-align: center;
}

/* --- コンセプトセクションのスタイル --- */
.section-concept {
    padding: 30px 0;
    background-color: #f9f9f9; /* 背景をわずかに変えてセクションを区切る */
}

.concept-container {
    display: flex;
    align-items: flex-start; /* 上揃えに変更 */
    gap: 60px;
    max-width: 1000px;      /* 1000pxの幅に制限 */
    margin: 0 auto;         /* 真ん中に寄せる */
    width: 100%;
}

.concept-body {
    flex: 1.2;
}



/* メイン見出し（ケアベース CARE BASE） */
.concept-main-title {
    font-size: 32px;
    color: #4A3121;
    margin-bottom: 30px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.concept-main-title .eng {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #C5C5C5; /* 英語は薄いグレーにして都会感を出す */
    letter-spacing: 0.05em;
}

/* キャッチコピー（「安心」という土台...） */
.concept-lead {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.4;
}

/* 本文テキスト */
.concept-text {
    font-size: 16px;
    line-height: 2;
    color: #000;
    margin-bottom: 1.5em;
    text-align: justify; /* 両端揃えでスッキリ見せる */
    font-weight: 400
}

/* 外側のdiv：ボタンを置く位置などの調整 */
.btn-more {
    margin-top: 20px; /* 上の文章との間隔 */
}

/* 中のaタグ：ここをボタンのデザインにする */
.btn-more a {
    display: inline-block;
    background-color: #af835f;; /* こげ茶 */
    color: #ffffff;             /* 白抜き文字 */
    padding: 12px 30px;
    text-decoration: none;      /* 下線を消す */
    font-family: var(--font-base);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    border: 1px solid #af835f;;
}

/* ホバー時の動き（aタグに対して指定） */
.btn-more a:hover {
    background-color: #af835f;   /* 茶色を薄く */
    border-color: #af835f;
    color: #ffffff;
    transform: translateY(-5px); /* ぴょこっと上がる */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 右側のビジュアル部分 */
.concept-visual {
    flex: 1;
}



/* --- BASE ZONE セクション固有のスタイル --- */
.section-base-zone {
    background-color: #4A3121; /* カンプの濃い茶色 */
    padding: 20px 0;
    margin-bottom: 0px !important; /* 茶色の箱の下に背景なしの隙間を作る */
    text-align: center;
    color: #fff;
}

/* ネイビーのラベル（CONCEPT/TOPICSとスタイルを統一） */
.base-zone-label {
    display: inline-block;
    background-color: #2D3A56;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 300 !important;
    font-size: 14px;
    letter-spacing: 0.25em;
    padding: 6px 24px;
    text-transform: uppercase;
    line-height: 1;
 /* 擬似要素を配置するための設定 */
    position: relative;
    padding: 6px 24px 6px 40px; /* 左側のパディングを広げて赤いボックスのスペースを作る */
    margin-bottom: 30px;
    border: 1px solid #af835f;
}
/* 左端の赤いボックス (擬似要素) */
.base-zone-label::before {
    content: "";
    position: absolute;
    left: 1px; /* 左端からの距離 */
    top: 50%; /* 垂直方向中央 */
    transform: translateY(-50%); /* 垂直方向中央揃えの補正 */
    width: 20px; /* 赤いボックスの幅 */
    height: 15px; /* 赤いボックスの高さ (文字の高さに合わせるなど調整可) */
    background-color: #ff0000; /* 赤色 (鮮やかな赤) */
    /* background-color: #c00000; */ /* もし少し落ち着いた赤が良い場合はこちら */
}

/* NEW STYLE 部分 */
.base-zone-heading .eng {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4); /* 透明度を下げて少し沈ませる */
    letter-spacing: 0.15em;
    margin-bottom: 0px;
    text-transform: uppercase;
}

/* 5つのベースゾーン */
.base-zone-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
}

/* 説明文 */
.base-zone-lead {
    padding :0 20px 0;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}


/* --- レイアウトの基本 --- */
.section-features .feature-block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 120px;
    width: 100%;
}

.section-features .feature-block.is-reverse {
    flex-direction: row-reverse;
}

/* 画像と文字を半分ずつの幅にする */
.feature-img, .feature-body {
    flex: 1;
}

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

/* --- アニメーション（消えてるものを出す設定） --- */
.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s ease, transform 1.0s ease;
}

/* JavaScriptが動いてこのクラスがつくと表示される */
.js-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 茶色背景部分 */
.personal-care {
    background-color: #3d2617; /* 濃い茶色 */
    color: #fff;
    text-align: center;
    padding: 60px 0;
}

/* --- リハビリ全体の設定 --- */
.rehabilitation-detail {
    padding: 20px 0;
}

/* --- 上段：タイトルと説明の横並び --- */
.rehab-header {
    display: flex;
    align-items: center; /* これで左右のブロックの「中心」を合わせる */
    justify-content: center;
    margin-bottom: 20px;

}

.rehab-title-box {
    flex: 0 0 300px; /* タイトルエリアの幅を固定 */
}

.rehab-title-box .tag {
    display: inline-block;
    color: #fff;
    background-color: #3d2617; /* 背景色はそのまま */
    font-family: "Montserrat", sans-serif;
    font-weight: 300 !important; /* 細めのウェイト */
    font-size: 14px;            /* サイズを統一 */
    letter-spacing: 0.25em;     /* 字間を広く */
    padding: 6px 20px;          /* 余白を統一 */
    text-transform: uppercase;  /* 大文字固定 */
    line-height: 1;
    border-radius: 0;           /* 角を四角に */
    margin-bottom: 10px;
}

.rehab-title-box .eng {
    display: block;
    color: #c5b3a3; /* 薄い茶色 */
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.rehab-title-box h3 {
    font-size: 28px;
    margin-top: 5px;
    color: #3d2617;
}

.rehab-description {
    /* 線を引く */
    border-left: 1px solid #3d2617; 
    padding: 10px 0 10px 40px; /* 上下に少し余白を足すと線が綺麗に見えます */
    margin-left: 40px;
}

.rehab-description p {
    margin: 0; /* pタグの余計な上下余白を消すのがコツです */
    line-height: 1.8;
    font-weight: 400
}
/* --- 下段：4カラムグリッド --- */
.rehab-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* アイテム間の隙間 */
    margin-top: 80px; /* ★ここを外側に書くことでPCで隙間が開きます */
}

.rehab-item {
    flex: 1; /* 4つを均等な幅にする */
}

.rehab-item .img-box {
    width: 100%;
    aspect-ratio: 4 / 3; /* 画像のアスペクト比を固定 */
    overflow: hidden;
    margin-bottom: 15px;
}

.rehab-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに画像を表示 */
}

.rehab-item h4 {
    font-size: 18px;
    color: #3d2617;
    margin-bottom: 8px;
    font-weight: bold;
}

.rehab-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}




/* =========================================================
   詳細エリア共通の設定（リハビリ・食事・入浴・レクすべて）
   ★!important を使って、見出しの開始位置をリハビリに強制的に合わせます
   ========================================================= */

.rehabilitation-detail .inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 4% !important;   /* リハビリの site-container と同じ余白 */
    padding-right: 4% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.rehabilitation-detail {
    width: 100% !important;
    padding: 80px 0 !important; /* 上下の余白を統一 */
}
.rehabilitation-detail-faq{
    margin-top: 0;
    padding:0;
}


/* ここが魔法！
   背景が何色であろうと、中身の横幅と左端の位置を強制的に固定します
*/
.rehabilitation-detail .inner {
    max-width: 1000px !important; /* 見出しを少し内側に寄せるためにあえて少し狭める */
    margin: 0 auto !important;
    padding: 0 20px !important;  /* 左右に最低限の隙間を確保 */
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 背景色の設定だけを分ける（これで「色」だけが変わる状態にする） */
.rehabilitation-detail.is-white {
    background-color: #ffffff !important;
}


/* 横並びのグリッド設定（共通） */
.rehabilitation-detail .rehab-grid {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 80px;
}

/* 4列の幅を固定（項目が3つでも大きさが変わらないようにする） */
.rehabilitation-detail .rehab-item {
    flex: 0 0 calc(25% - 15px);
}

/* --- 上下を区切る仕切り線タグ（hr）のスタイル --- */
.rehabilitation-detail .rehab-border {
    width: 100% !important;          /* 横幅いっぱい */
    border: none !important;
    border-top: 1px dotted #8D6748 !important; /* 点線（実線にしたい場合は dotted を solid に変更） */
    margin: 20px 0 10px 0 !important; /* 上下の余白調整 */
    flex-basis: 100% !important;      /* Flexbox内で強制的に1行独占させる */
    height: 0 !important;
}

/* 2行目の上余白（margin-top）が広くなりすぎないようリセット */
.rehabilitation-detail .rehab-divider + .rehab-grid {
    margin-top: 0 !important;
}

/* 仕切り線の上下余白を均等（上下にそれぞれ 35px）にする */
.rehabilitation-detail .rehab-divider {
    border: none !important;
    border-top: 1px dotted #8D6748 !important;
    margin: 35px 0 !important;
    width: 100% !important;
    height: 0 !important;
}

.rehabilitation-detail .rehab-divider + .rehab-more-btn-wrap + .rehab-grid {
    margin-top: 0 !important;
}

.machine-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.machine-tags span {
    font-size: 11px;
    background-color: #af835f; /* 背景となじむ薄いベージュやグレー */
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* 2. ボタン周りの共通スタイル */
.rehab-more-btn-wrap {
    display: none; /* PC版では非表示 */
    text-align: center;
    margin: 25px 0 10px;
}

.section-area {
    background-color: #f2ede4; /* ベージュ系の背景色 */
    padding: 80px 0;
}

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

.area-text-box {
    flex: 1;
}

.area-list {
    list-style: none;
    padding: 0;
}

.area-list li {
    background-color: #dccfbf; /* 薄茶色の角ボックス */
    padding: 15px 30px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #4A3121;
    font-size: 1.1rem;
}

.area-note {
    margin-top: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.area-map-box {
    flex: 1;
}

.area-map-box img {
    width: 100%;
    height: auto;
}

/* ボタンの基本スタイルに「変化のなめらかさ」を足す */
.area-list li {
    transition: all 0.3s ease; /* 0.3秒かけて変化させる */
    cursor: pointer;          /* マウスを乗せた時に指マークにする */
}

/* マウスを乗せた（ホバー）時の動き */
.area-list li:hover {
    background-color: #af835f; /* 少し濃い茶色に変わる */
    color: #fff;               /* 文字を白くする */
    transform: translateY(-5px); /* 5px上にぴょこっと浮く */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 軽い影をつけて浮遊感を出す */
}

/* --- 事業所情報セクション全体 --- */
.section-office {
    background-color: #f2ede4;
    padding: 80px 0;
}

/* 1200pxの枠を作り、左右を均等（5:5）に分ける */
.office-container {
    display: flex;
    max-width: 1200px; /* ここで全体の幅を制限 */
    margin: 0 auto;
    padding: 0 4%; /* 他のセクションと合わせる */
    gap: 80px;      /* 表と地図の間の距離をしっかりあける */
    align-items: flex-start;
}

/* 左側：基本情報（幅を50%に固定して伸びすぎを防ぐ） */
.office-info {
    flex: 0 0 55%; /* 表の方を少し広くする */
}

/* テーブル内のリンクを黒文字（または周囲と同じ色）にし、下線を消す */
.info-table td a {
    color: inherit; /* 親の文字色（#000や#333など）を引き継ぐ */
    text-decoration: none; /* 下線を消す */
}

/* マウスを乗せた時だけ少し変化させたい場合（お好みで追加） */
.info-table td a:hover {
    opacity: 0.7; /* 少し薄くする */
    text-decoration: underline; /* ホバー時のみ下線を出す */
}

.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table tr {
    border-bottom: 1px dotted #4A3121;
}

.info-table th {
    width: 120px; /* 「事業所名」などの項目幅を固定して見やすく */
    text-align: left;
    padding: 20px 0;
    font-weight: bold;
    vertical-align: top;
}

.info-table td {
    padding: 20px 0 20px 20px;
    text-align: left;
    vertical-align: top;
}

/* 右側：アクセス（幅を45%に固定） */
.office-access {
    flex: 0 0 40%; 
}

.access-text {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.access-title {
    font-weight: bold;
    flex-shrink: 0;
}

/* 地図画像のサイズを自動調整 */
.access-map img {
    width: 100%;
    height: auto;
    max-width: 500px; /* 地図が大きくなりすぎないように */
}

.access-map img {
    width: 100%;
    height: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* 地図が画面を突き破らないようにする */
.access-map iframe {
    width: 100% !important;
    max-width: 100%;
}



/* セクション間の白い余白 */
.section-spacer {
    width: 100%;
    height: 100px;      /* ★ここでお好みの余白の広さを調整してください */
    background-color: #ffffff; /* 白色 */
}

/* --- お問い合わせセクション --- */
.section-contact {
    width: 100%;
}

/* 下段：ベージュ部分のレイアウト */
.contact-lower {
    background-color: #ede4dc;
    padding: 40px 0;
    color: #000;
}

.contact-grid {
    display: flex;
    justify-content: center;
    gap: 100px; /* 左右の柱の間隔 */
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* 中央の区切り線 */
.contact-grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 100%; /* ★線の長さをカラムに合わせる */
    background-color: #bbb;
    z-index: 0;
}

.contact-column {
    flex: 1;
    text-align: center;
    padding: 0 20px; /* ★内側に余白を作って線との衝突を防ぐ */
}

/* --- ボタン（濃い茶色のボックス）の装飾 --- */
.contact-box-link {
    text-decoration: none;
    display: block;
    margin-bottom: 20px;
    transition: all 0.4s ease; /* 動きをなめらかに */
}

.contact-box {
    color: #fff;
    padding: 25px 20px;
        /* 深みのあるブルーのグラデーション */
    background: linear-gradient(180deg, #112552 0%, #2D3A56 100%);  
    /* 動きを滑らかにする設定 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.contact-box h3 {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

/* --- ホバー時の演出 --- */
.contact-box-link:hover {
    /* さらに上に浮かせる */
    transform: translateY(8px);
}

.contact-box-link:hover .contact-box {
    /* 茶色を少し薄く（明るく）する */
    background-color: #5d4030; 
    /* 影をさらに深く・広くして「高く浮いた」ように見せる */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.spacer-v {
    height: 60px; /* ★ここを広げると、左側の上下ボタンの間隔が綺麗になります */
}

/* 電話番号などのテキスト */
.tel-number {
    font-size: 26px; /* ★少し大きくして視認性をアップ */
    letter-spacing: 0.02em;
    margin: 15px 0 5px;
    color: #5d4030;;
}

.tel-time {
    font-size: 14px;
    color: #000;
}

/* SNSセクションの調整 */
.sns-section {
    margin-top: 40px;
}
.sns-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.sns-icons img {
    height: 30px;
    transition: transform 0.3s ease;
}
.sns-icons img:hover {
    transform: scale(1.1);
}

/* --- セクション共通：見出しの茶色い箱 --- */
.section-header-box {
    background-color: #4A3121; /* 濃い茶色 */
    padding: 40px 0;
    text-align: center;
}

/* --- セクション共通：中身のベージュの箱 --- */
.section-body-box {
    background-color: #f2ede4; /* ベージュ */
    padding: 60px 0 80px;
}

/* 見出しテキストの調整（白文字にする） */
.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-top: 10px;
    letter-spacing: 0.1em;
}

/* セクション間の白い隙間 */
.section-spacer {
    height: 100px; /* 画像のようなしっかりした余白 */
    background-color: #ffffff;
}

/* お問い合わせ特有の調整 */
.contact-intro {
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 60px;
}


/* フッター */
.footer {
    background-color: #3d2617;
    padding: 30px 0;
    text-align: center;
}

.footer-logo img {
    height: 40px;
}

.footer-title-box {
    display: block;
    color: #fff; /* 薄い茶色 */
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.2em;
    margin: 5px;
}

.footer-sub-nav {
    margin: 20px 0;
    font-size: 12px;
}

.footer-sub-nav a {
    color: #ccc;
    text-decoration: none;
    margin: 0 10px;
}

.footer-sub-nav a:hover {
    text-decoration: underline;
}



/* PC版SNS */
.sns-icons {
    display: flex;
    justify-content: center;
    gap: 30px; /* アイコン同士の隙間 */
    margin-top: 25px;
}

.sns-icon-link {
text-decoration: none !important;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* ★アイコン本体を直接、確実に大きくする設定 */
.sns-icon-link i {
    font-size: 48px !important; /* 32pxから48pxへ大幅アップ */
    color: #3d2617 !important;  /* ボタンと同じ濃い茶色に固定 */
    line-height: 1;
    transition: color 0.3s ease;
}

/* ホバー時の動き（ふわっと浮いて色が変わる） */
.sns-icon-link:hover {
    transform: translateY(-5px) scale(1.1);
}

.sns-icon-link:hover i {
    color: #af835f !important; /* ホバー時に少し明るい茶色へ */
}


/* --- お問い合わせボックスのホバー --- */

/* 1. 基本設定になめらかな変化を足す */
.contact-box {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 0 #2a1a10;  /* 2. 下側に濃い色の線を引いて立体感を出す（厚み） */
}

/* 2. マウスを乗せた時の動き */
.contact-box:hover {
    background-color: #805333; /* 少し明るい茶色にする */
    transform: translateY(-3px); /* 軽く浮き上がらせる */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* 影を強くして浮遊感を出す */
}


    /* V字ボタンの箱：中央配置にして少し小さく */
    .slider-overlay-box {
        width: 460px;
        right: 20%;
        bottom: 20px;
        transform: translateX(50%) scale(0.9);
        transform-origin: bottom center;
        padding: 10px;
    }

    /* V字グリッドのボタン配置リセット */
    .zone-grid-v {
        display: grid;
        grid-template-columns: 140px 140px;
        gap: 10px;
        margin-top: 0;
        justify-content: center;
    }

    .zone-item {
        width: 140px !important;
        height: 65px !important;
        transform: none !important; /* PC版の横移動をリセット */
        margin: 0 !important;
    }

    .zone-item:nth-child(5) { 
        grid-column: 1 / 3;
        justify-self: center;
    }

    /* --- 1. PC版（共通設定） --- */
.contact-lower .inner {
    position: relative; /* キャラクター配置の基準 */
}

.sns-section{
  background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
  border-radius: 10px; /* 角丸（必要に応じて数値を調整してください） */
  padding: 10px; /* テキストと背景の間に余白を追加 */
  /* 必要に応じて、テキストの配置やフォントスタイルも調整してください */
}
/* キャラクターの配置設定 */
.contact-lower .inner::after {
    content: "";
    position: absolute;
    display: block;
    background-image: url('../image/Good_Life_Care.png'); /* 画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    pointer-events: none; /* クリックを邪魔しない */
    z-index: 5;

    /* ★PC版での位置とサイズ */
    bottom: -100px;   /* 下端からの距離（少しフッターに被るくらいがお洒落） */
    right:200px;        /* 右端からの距離 */
    width: 280px;    /* PCでは少し大きめに表示 */
    height: 220px;
}

    .contact-lower .inner {
        padding-bottom:80px; /* キャラクターを置くための隙間を下に作る */
        overflow: visible;
    }
    

/* 右下固定連絡先 */
/* 基本スタイル（最初は透明で、少し下に下げておく） */
.float-contact-wrapper {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    /* アニメーションの設定 */
    transition: opacity 0.5s, transform 0.5s;
}

/* 隠れている状態 */
.float-contact-wrapper.is-hide {
    opacity: 0;
    pointer-events: none; /* 隠れている時はクリックできないようにする */
    transform: translateY(20px); /* 下からふわっと出すための予備動作 */
}

/* 表示される状態（JSでis-hideを外すと適用される） */
.float-contact-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.float-btn {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.float-btn:hover {
    transform: translateY(-5px);
}

/* 電話ボタン */
.float-btn.tel {
    background-color: #8D6748;
}

/* 内覧会予約ボタン */
.float-btn.mail {
    background-color: #af835f; 
}

.float-btn i {
    font-size: 20px;
    margin-right: 12px;
}

.float-btn .text-box {
    display: flex;
    flex-direction: column;
}

.float-btn .label {
    font-size: 13px;
    font-weight: bold;
}

.float-btn .number {
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em; /* 0.05em 〜 0.15em 程度が適切 */
}

/* スライドショーのイラストはイメージです。の文字設定 */
/* 1. スライドの外枠のはみ出し許可を出す */
.mv-main-box {
    overflow: visible !important; /* これで外に出した文字が見えるようになります */
}

/* 2. スライド本体もはみ出しを許可する */
.mySwiper {
    overflow: visible !important;
}

.swiper-slide.is-illust {
    position: relative;
    /* 画像の下に文字を出すための余白をあらかじめ確保する（任意） */
    margin-bottom: 30px; 
}
/* スライドショーの中に文字を出す */
/* 「is-illust」というクラスがついているスライドの時だけ、文字を表示する */
.swiper-slide.is-illust::after {
    content: "※画像はイメージです";
    position: absolute;
    top: calc(100% + 5px); 
    right: 10px;
    background-color: transparent !important;
    color: #8D6748;
    font-size: 12px;
    z-index: 999; /* 他の要素より手前に出す */
    white-space: nowrap;
}

/* =========================================================
   追加セクション固有スタイル（Gallery - サムネイル連動型）
   ========================================================= */

.luxury-gallery-container {
    max-width: 900px; /* 大きな写真が見やすくなる絶妙なサイズ感 */
    margin: 50px auto 0;
    width: 100%;
}

/* --- メインスライダー（大きい写真） --- */
.gallery-main-slider {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: #fff;
    overflow: hidden;
}

.gallery-main-slider .img-box {
    width: 100%;
    aspect-ratio: 16 / 9; /* 横長で映画のスクリーンのような美しさに固定 */
    overflow: hidden;
}

/* 既存のフェードイン設定（scale1.0固定で急なズームを防止） */
.gallery-main-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* キャプション（写真の下に敷く上品な説明枠） */
.gallery-caption {
    padding: 25px 30px;
    background-color: #faf6f0; /* 既存の薄ベージュを流用 */
    border-top: 1px solid #f2ede4;
}

.gallery-caption h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #4A3121; /* ヘッダーの濃い茶色 */
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}

.gallery-caption p {
    font-size: 15px;
    color: #333;
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
}

/* 矢印ボタンのデザインをラグジュアリー風（細身）にカスタマイズ */
.gallery-main-slider .swiper-button-next,
.gallery-main-slider .swiper-button-prev {
    color: #4A3121; /* ブランドカラーの濃い茶色 */
    transition: all 0.3s ease;
}

.gallery-main-slider .swiper-button-next::after,
.gallery-main-slider .swiper-button-prev::after {
    font-size: 24px; /* 少し小さくして都会的に */
}

.gallery-main-slider .swiper-button-next:hover,
.gallery-main-slider .swiper-button-prev:hover {
    opacity: 0.5;
    transform: scale(1.1);
}

/* --- サムネイル用スライダー（下の小写真） --- */
.gallery-thumbs-slider {
    width: 100%;
    margin-top: 15px; /* メイン写真との隙間 */
    box-sizing: border-box;
    padding: 0;
}

.gallery-thumbs-slider .swiper-slide {
    width: 20%; /* PC版では5枚がピタッと綺麗に並ぶ */
    aspect-ratio: 4 / 3; /* サムネイルは4:3でコンパクトに */
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.4; /* 選ばれていない写真は薄くする */
    transition: opacity 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
}

.gallery-thumbs-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ★現在アクティブ（表示中）のサムネイルだけをクッキリ強調 */
.gallery-thumbs-slider .swiper-slide-thumb-active {
    opacity: 1.0;
    border-color: #8D6748; /* キャッチコピーの茶色い線で囲う */
}


/* --- Q&A（アコーディオン仕様） --- */
.faq-container {
    margin-top: 60px;
    width: 100%;
}
.faq-item {
    background-color: #ffffff;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border-radius: 5px;
    overflow: hidden;
}
/* 質問部分 */
.faq-question {
    display: flex;
    align-items: flex-start; /* ★center から変更 */
    padding: 20px 25px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background-color 0.3s ease;
}


.faq-question:hover {
    background-color: #facba4b6; /* ほんのりベージュ */
}
.faq-icon-q {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #8D6748; 
    margin-right: 15px;
    line-height: 1.2;  /* ★追加：アイコン自体の行高さを微調整 */
    margin-top: 2px;   /* ★追加：本文の1文字目と上端を綺麗に合わせるデコボコ相殺用 */
}
.faq-text {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-right: 30px; /* 矢印と被らないように */
    flex: 1;
}
/* 開閉のプラスマイナス矢印マーク */
.faq-arrow {
    position: absolute;
    right: 25px;
    width: 12px;
    height: 12px;
}
.faq-arrow::before,
.faq-arrow::after {
    content: "";
    position: absolute;
    background-color: #4A3121;
    transition: transform 0.3s ease;
}
/* 横線 */
.faq-arrow::before {
    top: 5px;
    left: 0;
    width: 12px;
    height: 2px;
}
/* 縦線（開くと消える） */
.faq-arrow::after {
    top: 0;
    left: 5px;
    width: 2px;
    height: 12px;
}

/* 開いた状態のプラスマイナス（アニメーション用） */
.faq-item.is-open .faq-arrow::after {
    transform: rotate(90deg);
    opacity: 0;
}
.faq-item.is-open .faq-arrow::before {
    transform: rotate(180deg);
}

/* 回答部分（JSで高さを制御するために最初は0に） */
.faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    background-color: #fafaf9;
    border-top: 1px solid #f2ede4;
}
.faq-answer-inner {
    display: flex;
    align-items: flex-start;
    padding: 25px 25px;
}
.faq-icon-a {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2D3A56; /* コンセプト等のネイビーグレー */
    margin-right: 15px;
    line-height: 1;
}
.faq-answer p {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
}



 /* --- スマホ対応（レスポンシブ） --- */
@media screen and (max-width: 1024px) {

/* スマホ版：文字を画像の外（下）に配置する */
    .swiper-slide.is-illust::after,
    .is-image::after {
        position: absolute;
        /* topを100%にすることで、画像の高さ分だけ下にズラします */
        top: 100% !important; 
        bottom: auto !important;
        right: 0 !important;
        
        /* 見た目の調整 */
        content: "※イラストはイメージ図です";
        display: block;
        width: 100%;           /* 横幅いっぱいに */
        text-align: right;     /* 右寄せ */
        padding: 5px 10px  !important; /* 上下の余白 */
        
        /* 外に出すので、背景色は透明（none）にして文字だけにします */
        background-color: transparent !important;
        color: #8D6748 !important; /* ベージュ背景で見えやすい少し濃い茶色 */
        font-size: 10px !important;
        z-index: 10 !important;
    }

    /* 文字を外に出した分、下の要素（要支援・要介護バー）が重ならないよう隙間を作る */
    .mv-main-box {
        margin-bottom: 100px !important; /* バーとの間隔を広めに確保 */
    }

    /* 1. すべての inner クラスと site-container の余白を統一 */
    .inner, 
    .site-container,
    .rehabilitation-detail .inner,
    .concept-container {
        width: 100% !important;
        max-width: 100% !important;
        /* 数値を20pxから「6%」に変更することで、スクショのようなゆとりが生まれます */
        padding-left: 6% !important; 
        padding-right: 6% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    /* 白い帯全体の調整 */
   .mv-fix-content {
        /* top: 20px !important; */
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important; /* 垂直方向の中央揃え */
        justify-content: center !important; /* 水平方向の中央揃え */
        gap: 15px !important; /* サークルと文字の隙間 */
        padding: 15px 10px !important;
        background: rgba(255, 255, 255, 0.7) !important;
    }

    /* 2. COMING SOONサークルを小さくして、文字とのバランスを取る */
    .circle-coming-soon {
        width: 80px !important;  /* かなり小さくしてアイコンのように扱う */
        height: 80px !important;
        margin: 0 !important;   /* 余計な余白を消す */
        flex-shrink: 0;         /* 円が潰れないように固定 */
    }

    /* 3. タイトルテキストを調整 */
    .fix-catchphrase {
        font-size: 16px !important; /* 文字サイズを少し抑えて1行に収まりやすくする */
        line-height: 1.4 !important;
        text-align: left !important; /* 横並びなので左揃えが綺麗です */
        margin: 0 !important;
        width: auto !important;
    }

    /* 4. 通所介護タグ（span）*/
    .tag-care {
        order: 2 !important; /* テキストの後ろに配置 */
        display: inline-block !important;
        width: fit-content !important; /* 文字幅に合わせる */
        font-size: 11px !important;
        padding: 3px 8px !important;
        margin-left: 0 !important; /* 改行されるので左余白は不要 */
        background-color: #8D6748;
        color: #fff;
    }

    .rehabilitation-detail .rehab-item {
        flex: 0 0 calc(50% - 10px);
    }

    .concept-container {
        flex-direction: column;
        gap: 40px;
    }
    .concept-main-title {
        flex-direction: column;
        gap: 5px;
    }
    .rehab-header {
        flex-direction: column; /* 縦並びに */
    }
    .rehab-title-box {
        flex: none;
        width: 100%;
        margin-bottom: 20px;
    }
    .rehab-description {
        padding-left: 0;
        border-left: none; /* スマホでは縦線を消す */
        padding-top: 20px;
        border-top: 1px solid #ccc; /* 代わりに上に線をいれる */
    }
    .rehab-grid {
        display: flex;
        flex-wrap: wrap; /* スマホでは折り返す */
        justify-content: space-between;
        margin-top: 40px; /* スマホでは隙間を少し狭くする */
        gap: 20px;
    }
    .rehab-item {
        flex: 0 0 calc(50% - 10px); /* スマホでは2カラム */
        margin-bottom: 30px;
    }
/* スマホ対応：縦に並べる */
    .office-container {
        flex-direction: column;
        gap: 40px;
        padding: 0 5%; /* 左右の余白を均等に */
        align-items: center; /* 子要素を中央へ */
    }

    /* 左側（事業所情報）の幅を100%にする */
    .office-info {
        flex: 0 0 100% !important; 
        width: 100%;
        margin-bottom: 10px;
    }
    /* テーブルの項目（th）と内容（td）の幅を調整 */
    .info-table th {
        width: 30%; /* 項目名を少し詰め、内容のスペースを確保 */
        padding: 15px 0;
    }

    .info-table td {
        padding: 15px 0 15px 10px; /* 左側の余白(20px)を少し減らして中央に寄せる */
    }

    /* 右側（アクセス）の幅も100%にする */
    .office-access {
        flex: 0 0 100% !important;
        width: 100%;
        text-align: left; /* アクセス情報を中央揃えに */
    }

    .access-text {
        justify-content: left; /* 「アクセス」と「駅情報」を中央に */
        text-align: left; /* 駅名リスト自体は左揃えの方が見やすい */
        font-size: 14px;
    }
    .area-container {
        flex-direction: column;
        padding: 0 20px;
    }

    

   .section-concept .inner {
        padding-left: 20px;  /* 左側の余白 */
        padding-right: 20px; /* 右側の余白 */
        box-sizing: border-box; /* 余白を含めて100%の幅にする */
    }
    /* 外側の箱：中央配置にしてスケールで収める */
    .slider-overlay-box {
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important; /* 中央基準でリサイズ */
        right: auto !important;
        width: 100% !important;
        max-width: 480px;
        padding: 10px 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center; /* 中のタイトルとグリッドを中央に */
        box-sizing: border-box;
    }
    .overlay-title{
        padding-top: 10px;
        margin: 0;
    }

/* 2. グリッド自体の設定 */
    .zone-grid-v {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 均等に2カラム */
        gap: 8px !important;
        width: 100%;
        margin-top: -10px !important; /* タイトルとの隙間 */
    }

    /* ボタンのサイズと文字調整 */
.zone-item {
        height: 70px !important; /* バランスをとるために少し高さを出します */
        padding: 8px 5px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-decoration: none;
        background-color: #5D4037 !important; /* こげ茶色を強制適用 */
        color: #fff !important;               /* 文字を白に */
        border-radius: 5px;                  /* 少し角を丸く */
        transition: transform 0.3s ease, background-color 0.3s ease !important;
    }

.zone-item .en {
        font-family: "Montserrat", sans-serif;
        font-size: 11px !important; /* 英語を強調 */
        font-weight: 700 !important;
        letter-spacing: 0.05em;
        line-height: 1.2;
        margin-bottom: 3px !important; /* 日本語との隙間 */
        display: block;
        color: #fff !important;
    }

/* 日本語タイトルの調整（小さく、細く） */
    .zone-item .jp {
        font-family: "Noto Serif JP", serif;
        font-size: 9px !important; /* 日本語は補足程度に小さく */
        font-weight: 400 !important;
        letter-spacing: 0.02em;
        display: block;
        color: #fff !important;
        opacity: 0.9; /* 少しだけ透過させて英語を主役に */
    }

.zone-item:hover {
    background-color: #8D6748 !important; /* ホバー時は少し濃い茶色に */
    transform: scale(1.05) !important;    /* 1.05倍に拡大 */
    z-index: 10;                         /* 重なった時に手前に来るように */}

/* 5番目のボタン（Refresh Port）を中央に */
.zone-item:nth-child(5) {
    grid-column: 1 / 3;
    justify-self: center;
}

    /* スマホ版のV字を作るための配置直し */
    .zone-item:nth-child(1) { order: 1; }
    .zone-item:nth-child(2) { order: 2; }
    .zone-item:nth-child(3) { order: 3; }
    .zone-item:nth-child(4) { order: 4; }
    .zone-item:nth-child(5) { 
        order: 5;
        grid-column: 1 / 3; /* 5番目だけ真ん中 */
        justify-self: center;
    }

    .g-nav {
        overflow-y: auto; /* メニューが画面からはみ出た場合にスクロール可能にする */
    }
    .g-nav ul {
        width: 100%;
    }
    .g-nav ul li {
        width: 100%;
        text-align: center;
    }
    /* スマホ版ではドロップダウンを通常の縦並び展開にする */
    .g-nav ul .dropdown {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        box-shadow: none;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        
        /* ★スマホ版メニューも、背景のメインビジュアルなどが綺麗に透けるよう黒の半透明に変更 */
        background-color: transparent; 
        
        width: 100%;
        padding: 5px 0;
        opacity: 1;
        visibility: visible;
        display: flex;
        margin-top: 5px;
    }
    .g-nav ul .dropdown a {
        padding: 8px 20px;
        font-size: 13px; /* 親メニューより一回り小さく */
    }



 /* --- 3. 内覧ボタン（スマホ版）の調整 --- */
    .nairan-form {
        width: 100%;
        margin: 20px 0 50px; /* 上下の間隔を調整 */
    }

    .nairan-btn {
        display: flex !important;
        align-items: center !important;
        /* 横並び（row）を維持して、赤い四角を左端にキープします */
        flex-direction: row !important; 
        width: 100% !important; /* 95%だと周囲に隙間ができるので100%にします */
        
        /* 紺色の内側余白をすべて0にして隙間を絶対につくらせない */
        padding: 0 !important; 
        box-sizing: border-box;
    }

    /* 赤い四角（スマホ版）：上下に引き伸ばして左端に密着 */
    .btn-eng-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* スマホ画面に合わせて、文字サイズと左右の余白を少しだけタイトに調整 */
        font-size: 12px !important; 
        padding: 15px 12px !important; /* 上下の余白（15px）で高さを出します */
        
        align-self: stretch !important; /* 紺の高さ一杯まで広げる */
        flex-shrink: 0 !important;
        
        /* 下の隙間の原因になっていたmarginを完全にゼロにします */
        margin: 0 !important; 
    }

    /* 右側の日本語テキスト（スマホ版） */
    .nairan-btn > span:not(.btn-eng-label) {
        font-size: 13px !important; /* 文字をスマホ用に見やすく */
        line-height: 1.4 !important;
        text-align: left !important;
        
        /* 赤い四角と文字がぶつからないように内側に余白を設定 */
        padding: 12px 15px 12px 15px !important; 
        
        flex: 1 !important;
        display: block !important;
    }

    .nairan-btn .arrow {
        margin-left: auto !important; /* 矢印を右端に固定 */
    }

    /* 特徴セクション・ニュースの調整（現状維持） */
    .feature-block, 
    .feature-block.is-reverse {
        flex-direction: column;
        gap: 30px;
    }

    .news-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 10px !important; /* ← 左右の20pxを0にするだけ！ */
    }
    .news-content.no-label {
        padding-left: 0;
    }
/* TOPICS横の随時更新しますの文字 */
.inner-news-header {
        /* スマホでも横並びを維持 */
        display: flex; 
        align-items: center;
        margin-bottom: 10px;
    }
.inner-topics {
        margin: 0;
}

    .news-label {
        /* ラベルの幅が広すぎると文字がはみ出すので、スマホでは少しタイトに */
        margin-right: 0% !important; 
        padding: 4px 12px !important;
        font-size: 14px !important;
    }

    .news-sub-text {
        margin-left: 5px;   /* ラベルとの隙間を詰める */
        font-size: 14px !important; /* 画面幅に合わせて小さく調整 */
        scale: 0.95;        /* さらに微調整が必要なら少し縮小 */
        transform-origin: left center;
    }


    /* 2. ニュース項目の背景をリストの端まで広げ、中の文字だけ余白を作る */
    .news-list {
        border-top: 1px dotted #8D6748;
        width: 100%;
    }


    /* 3. 中のテキストだけ少し内側に寄せる（お好みで） */
    .news-content {
        padding: 5px 0 10px 0; /* ラベルの下に少し余裕を持たせる */
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* 4. ラベル（TOPICS）の左端を揃える */
    .news-label {
        margin-left: 0 !important;
    }

    /* リハビリ・食事セクション全体の左右に余白を作る */
    .rehabilitation-detail {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box; /* 余白を含めて100%にする */
    }

    /* 上段のタイトルと説明文の調整 */
    .rehab-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    /* 右側の説明文の線を消して、文字を左に寄せる */
    .rehab-description {
        padding-left: 0;
        border-left: none;
        /* もしスマホでも線がほしい場合は、上に線を引くときれいです */
        border-top: 1px solid #3d2617; 
        padding-top: 20px;
        margin-left: 0;
    }

    /* 写真の並び（2列のまま、隙間だけ調整） */
    .rehab-grid {
        gap: 20px;
        margin-top: 40px; /* 写真の上の隙間 */
    }

    /* ヘッダーの調整 */
    .header-inner {
        padding: 0 10px !important; /* 15pxから10pxへ */
        max-width: 100% !important;
        width: 100% !important;
    }
/* 2. ロゴ画像の左右パディングを強制的にゼロにする */
    .logo img {
        padding-left: 0 !important;   /* ★左の100pxを強制解除 */
        padding-right: 0 !important;  /* ★右の100pxを強制解除 */
        margin-left: 0 !important;    /* 念のためマージンも解除 */
        height: 45px !important;      /* ロゴを見やすく少し大きく */
        width: auto !important;
    }

    /* 3. ハンバーガーボタンの位置も微調整 */
    .menu-btn-sp {
        margin-right: 5px !important;
    }

/* メインビジュアル自体の高さを自動にして、はみ出さないようにする */
  .mv-main-box {
        position: relative !important;
        height: 450px !important; /* スマホで画像を表示させたい高さ */
        overflow: visible !important; /* はみ出しを許可 */
        display: block !important; /* flexを解除（Swiperのバグ防止） */
    }

    /* 2. Swiperと画像も親の高さに合わせる */
    .mySwiper, .swiper-slide, .swiper-slide img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover;
    }
    /* PC版で画像の上に浮かせていた設定をリセット */
    .care-level-wrapper-sp {
        position: relative; /* 浮かさずに通常の配置にする */
        width: 100%;
        z-index: 10;
        margin-top: 0; /* 画像と隙間ができる場合は-1pxでくっつける */
    }

    .care-level-container {
        display: flex;
        width: 100%;
        gap: 0; /* ボックス間の隙間をなくしてピタッと並べる */
    }

    .care-box {
flex: 1;
        /* ★高さを出す padding を 15px から 10px 程度に縮小 */
        padding: 10px 0; 
        font-size: 13px; /* 14pxから少しだけ小さく */
        font-weight: bold;
        text-align: center;
        background-color: #af835f;
        color: #fff;
        /* 境界線をさらに細く目立たなくする */
        border: 0.2px solid rgba(255, 255, 255, 0.5); 
        line-height: 1.2; /* 行間を詰めて高さを抑える */
    }

    /* ニュースセクション：縦並びに */
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 20px;
    }
    .news-label {
        margin-bottom: 10px;
        margin-right: 0;
    }

    /* コンセプトセクション：左右に20pxの余白を確保 */
    .section-concept .inner {
        flex-direction: column;
        gap: 40px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .concept-main-title {
        flex-direction: column;
        gap: 5px;
    }

/* 1. メイン写真とサムネイル全体のコンテナ幅をリセット */
    .luxury-gallery-container {
        width: 100% !important;
        padding: 0 !important;
        margin-top: 30px;
    }

    /* 2. メインの大きい写真スライダーの共通画像設定を強制解除 */
.gallery-main-slider .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* ★cover から contain に変更 */
    background-color: #faf6f0;     /* ★追加：縦型写真の左右にできる隙間を埋める上品なベージュ background */
}

    /* 3. ★最重要：下のサムネイル用スライダーのサイズを「小さく」強制固定 */
    .gallery-thumbs-slider {
        display: flex !important;
        width: 100% !important;
        margin-top: 15px !important;
        padding: 0 6% !important; /* スマホの基本余白に合わせる */
        box-sizing: border-box !important;
    }

    /* 4. サムネイルの各枠を「横に4つ並ぶ小さなサイズ」に固定 */
    .gallery-thumbs-slider .swiper-slide {
        /* 画面を突き破る挙動（calc(100% + 12%)など）を完全に打ち消す */
        width: calc(25% - 8px) !important; 
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        aspect-ratio: 4 / 3 !important; /* 小さな長方形に固定 */
        opacity: 0.4;
        flex-shrink: 0 !important; /* スマホで縮んで潰れるのを防ぐ */
    }

    /* 5. サムネイルの中の画像がはみ出さないように制御 */
    .gallery-thumbs-slider .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* 特徴セクション（.is-imageなど）の突き出し設定をリセット */
        position: relative !important; 
        transform: none !important;
    }

    /* 6. 現在アクティブなサムネイルの枠線 */
    .gallery-thumbs-slider .swiper-slide-thumb-active {
        opacity: 1.0 !important;
        border: 2px solid #8D6748 !important;
    }


    /* =========================================================
       ★ 特徴セクション（FEATURES）のスマホ対応
    ========================================================= */
/* 1. 写真を左右の壁を無視して画面端まで広げる */
.section-features .feature-img {
    width: calc(100% + 12%) !important; /* 左右の余白6%×2 = 12%分広げる */
    margin-left: -6% !important;        /* 左側に6%分突き出させる */
    margin-right: -6% !important;       /* 右側も同様 */
    padding: 0 !important;
}

.section-features .feature-img img {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 0 !important;
}

/* 2. テキスト部分は今の位置（6%のライン）をキープ */
.section-features .feature-body {
    width: 100% !important;
    padding-left: 0 !important; /* 親の余白があるのでここは0でOK */
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 3. ブロック全体の調整 */
.section-features .feature-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    margin-bottom: 60px !important;
    padding: 0 !important;
}

/* 4. 数字と見出しの並びをリセットして左揃え */
.feature-body .title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}
.num {
    font-size: 4rem !important; /* スマホ用に一回り小さく */
    margin-right: 0 !important;  /* 詰めていたマージンをリセット */
}

.feature-body h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.feature-body h4 {
    font-size: 1.1rem !important; /* リード文をスマホで見やすく */
    margin-bottom: 15px !important;
}

    /* 1. グリッドを縦1列に変更 */
    .contact-grid {
        flex-direction: column;
        gap: 50px; /* セクションごとの隙間 */
        padding: 0 20px;
    }

    /* 2. 中央の線を消す */
    .contact-grid::before {
        display: none;
    }

    /* 3. カラムの幅を100%に */
    .contact-column {
        width: 100%;
        padding: 0;
    }

    /* 4. 茶色いボタンの形を調整（縦長にならないよう、横長に固定） */
    .contact-box {
        width: 100%;
        max-width: 350px; /* 広がりすぎないよう制限 */
        margin: 0 auto;
        padding: 20px 15px;
        height: auto; /* 高さを自動にして潰れを防ぐ */
    }

    /* 5. 電話番号のサイズ調整（はみ出し防止） */
    .tel-number {
        font-size: 24px; /* PCより少し小さく */
        white-space: nowrap; /* 勝手に変なところで改行させない */
        letter-spacing: 0.15em; /* 0.05em 〜 0.15em 字間 */
    }

    /* 6. 左カラム内のボタン同士の隙間 */
    .spacer-v {
        height: 50px;
    }

    /* 7. コンテンツ全体の余白を調整 */
    .contact-lower {
        padding: 40px 0 60px;
    }

    /* 導入文の調整 */
    .contact-intro {
        text-align: left;      /* 左揃え */
        font-size: 14px;         /* スマホで読みやすいサイズ */
        line-height: 1.8;        /* 行間をゆったりさせる */
        margin: 0 auto 40px;     /* 下のボタンとの距離 */
        padding: 0 6%;           /* ★左右に余白（マージン）を作って内側に寄せる */
        word-break: break-all;   /* 単語の途中で変な改行を防ぐ（必要に応じて） */
    }

    /* セクション全体の余白も少し調整するとより綺麗です */
    .contact-lower .inner {
        padding: 0 10px;         /* 画面端との最低限の隙間 */
    }

    .contact-lower .inner {
        padding-bottom: 140px; /* キャラクターを置くための隙間を下に作る */
        overflow: visible;
    }
    
    .contact-lower .inner::after {
        /* ★スマホ版でのサイズ調整 */
        right: auto !important;
/* ★左から50%の位置に配置し、自分自身の幅の半分(50%)だけ左に戻す */
        left: 50% !important;
        transform: translateX(-50%) !important; /* マイナスにするのが正解です */
        
        width: 240px; 
        height: 200px;
        bottom: -110px;
        
        /* 背景画像の位置もセンターに固定 */
        background-position: center bottom;
    }

/* --- ハンバーガーボタンのスタイル --- */
    .menu-btn-sp {
        display: block; /* スマホで表示 */
        position: relative;
        width: 30px;
        height: 24px;
        z-index: 1001; /* ナビより手前に */
        cursor: pointer;
    }
    .menu-btn-sp span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #fff; /* 白い三本線 */
        transition: all 0.4s;
    }
    .menu-btn-sp span:nth-child(1) { top: 0; }
    .menu-btn-sp span:nth-child(2) { top: 11px; }
    .menu-btn-sp span:nth-child(3) { top: 22px; }

    /* ボタンが開いた時のアニメーション（バツ印になる） */
    .menu-btn-sp.active span:nth-child(1) { transform: translateY(11px) rotate(-45deg); }
    .menu-btn-sp.active span:nth-child(2) { opacity: 0; }
    .menu-btn-sp.active span:nth-child(3) { transform: translateY(-11px) rotate(45deg); }

    /* --- ナビゲーションメニュー本体（全画面で覆うタイプ） --- */
    .g-nav {
        display: block; /* 常にblockにしておき、位置で隠す */
        position: fixed;
        top: 0;
        right: -100%; /* 最初は画面の右側に隠しておく */
        width: 80%; /* 画面の8割を覆う */
        height: 100vh;
        background: rgba(74, 49, 33, 0.95); /* 濃い茶色（少し透けさせる） */
        padding-top: 100px;
        transition: all 0.5s;
        z-index: 1000;
    }
    /* メニューが開いた時 */
    .g-nav.active {
        right: 0;
    }

    .g-nav ul {
        flex-direction: column; /* 縦並び */
        align-items: center;
        gap: 20px;
    }
    .g-nav a {
        font-size: 16px; /* スマホで押しやすい大きさ */
    }

 /* 1. メインの箱：高さをしっかり固定（画像を見せるため） */
.mv-main-box {
        position: relative !important;
        height: 520px !important; /* ★少し高さを増やして余裕を持たせる */
        overflow: visible !important; /* ★絶対にはみ出しを隠さない */
        margin-bottom: 80px !important; /* ★突き出した分、下のトピックスを大きく押し下げる */
        display: block !important;
    }

    /* 2. スライド画像：親の高さ100%いっぱいに表示 */
    .mySwiper, .swiper-slide, .swiper-slide img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover;
    }

    /* 3. 5つのゾーン（白い箱）：下半分にコンパクトに配置 */
.slider-overlay-box {
        width: 70% !important; /* 横幅を少し絞る */
        padding: 10px 10px 15px !important; /* 上下の余白を最小限に */
        bottom: 10px !important; /* 位置をさらに下へ */
    }

    /* ボタンとタイトルのサイズを「最小」にする */
    .overlay-title {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }
    .zone-grid-v { gap: 6px !important; }
    .zone-item {
        height: 42px !important; /* かなり薄くして画像を見せる */
        font-size: 12px !important;
        width: 100% !important;
        transform: none !important; /* 変なズレをリセット */
    }

    /* 4. 要支援・要介護：画像の外（ベージュ部分）にピタッと置く */
.care-level-wrapper {
        position: absolute !important;
        top: 100% !important; /* 画像のすぐ下 */
        left: 0 !important;
        width: 100% !important;
        height: auto !important; 
        z-index: 50 !important; /* 重なり順を一番手前に */
        display: block !important;
        transform: none !important;
    }

    /* 2. REFRESH PORT を半分サイズにして中央寄せ */
    .zone-item:nth-child(5) {
        grid-column: 1 / 3; /* 2列の中央に置くための準備 */
        width: 50% !important; /* ★幅を半分に */
        margin: 0 auto !important; /* ★左右中央寄せ */
        height: 40px !important; /* 高さも少し抑える */
    }

    /* 3. 要支援・要介護をコンパクトに中央寄せ */
.care-level-container {
        display: flex !important;
        justify-content: center !important;
        width: 50% !important;
        padding: 0 0% !important; 
        gap: 2px !important; /* ボックス間の微かな隙間 */
    }

.care-box {
        flex: 1 !important;
        padding: 12px 0 !important; /* ★高さをしっかり持たせる */
        font-size: 13px !important;
        line-height: 1.4 !important;
        background-color: #af835f;
        border: none !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 軽く影をつけると「欠け」が防げているか確認しやすいです */
    }

    /* --- その他セクションの調整 --- */
    .news-section {
        margin-top: -60px;
        padding-top: 40px; /* ボックスが突き出した分を調整 */
    }

    /* コンセプト・特徴セクションの共通余白 */
    .section-concept .inner,
    .section-features .feature-block,
    .feature-img,
    .feature-body {
        padding-left: 20px;
        padding-right: 20px;
        flex-direction: column;
        gap: 30px;
    }
    /* 右下フロートボタン（電話番号） */
    .float-contact-wrapper {
        right: 10px;
        bottom: 20px;
    }
    .float-btn .label {
        font-size: 10px;
    }
    .float-btn .number {
        font-size: 14px;
    }
    /* 1. サービスエリアセクションの調整 */
    .area-container {
        padding-left: 6% !important;
        padding-right: 6% !important;
        flex-direction: column;
        gap: 30px;
    }
    
    .area-list li {
        width: 100% !important;
        padding: 12px 20px !important; /* ボタン内の余白をスマホ用に少し詰める */
        font-size: 1rem !important;
    }

    /* 2. 事業所情報（テーブル）の調整 */
    .section-office {
        padding: 60px 0 !important;
    }

    .office-container {
        padding-left: 6% !important;
        padding-right: 6% !important;
        width: 100% !important;
    }

    /* テーブルの文字が詰まりすぎないように調整 */
    .info-table th {
        width: 100px !important; /* 項目幅を少し固定 */
        font-size: 14px !important;
    }
    
    .info-table td {
        font-size: 14px !important;
        padding-left: 15px !important;
    }

    /* 3. お問い合わせセクションの調整 */
    /* 上段の茶色いヘッダーボックスの文字余白 */
    .section-header-box .inner {
        padding-left: 6% !important;
        padding-right: 6% !important;
    }

    /* 下段のベージュエリア */
    .contact-lower .inner {
        padding-left: 6% !important;
        padding-right: 6% !important;
        padding-bottom: 120px !important; /* キャラクター分の隙間 */
    }

    /* お問い合わせボタンの横幅を「6%」のラインに合わせる */
    .contact-box {
        max-width: 100% !important; /* 350px制限を解除してラインに合わせる */
        width: 100% !important;
    }

    .tel-number {
        font-size: 22px !important; /* 画面からはみ出さないよう微調整 */
    }
}

/* Q&A内のマーカーをソフトなピンクに変更 */
.faq-answer mark {
    background-color:#FFCCFF; /* 柔らかなココア・ベージュ */
    color: #4a3121;            /* 文字色を濃い茶色にして読みやすく */
    padding: 2px 4px;          /* 文字の周りにほんの少し余白を作って綺麗に */
    font-weight: 600;          /* 少しだけ太字にして強調を維持 */
}

/* =========================================
   PC版 最終復旧コード (CSSの一番下に貼る)
   ========================================= */
@media (min-width: 1024px) {
/* メインビジュアルの親要素 */
    .mv-main-box {
        position: relative;
        width: 100%;
    }

   /* PC版のタイトル位置を微調整 */
    .overlay-title {
        transform: none !important;
        margin-bottom: 15px !important;
        font-size: 18px !important;
    }

 /* 1. 白い箱の「基準」を、ブラウザの端ではなく【画面中央】にする */
    .slider-overlay-box {
        position: absolute !important;
        /* 画面中央(50%)から、1200pxの半分(600px)右へ行き、余白(4%)分だけ左に戻る */
        /* さらに箱自身の幅分を左に戻すことで「右揃え」が完成します */
        left: calc(50% + 600px - 4% - 600px - 80px) !important;
        
        bottom: 50px !important;
        right: auto !important; /* right指定をリセット */
        width: 460px !important;
        padding: 20px 20px !important;
        background: rgba(255, 255, 255, 0.85) !important;
        border-radius: 15px !important;
        z-index: 100 !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .zone-item {
        width: 140px;
        height: 80px; /* 日本語が入る分、少し高さを確保 */
    }
    .zone-item .en {
        font-size: 13px;
        margin-bottom: 2px;
    }
    .zone-item .jp {
        font-size: 11px;
        letter-spacing: 0.05em;
    }
    .zone-item {
    background-color: #5D4037 !important; /* こげ茶色を強制適用 */
    color: #fff !important;               /* 文字を白に */
    border-radius: 5px;                  /* 少し角を丸く */
    padding: 10px !important;
}

.zone-item:hover {
    background-color: #8D6748 !important; /* ホバー時は少し濃い茶色に */
}

.zone-item .en, .zone-item .jp {
    color: #fff !important;
}

    /* 2. タイトル：1段目のボタンの間に落とし込む */
    .overlay-title {
        position: relative !important;
        z-index: 110 !important;
        font-size: 18px !important;
        margin-bottom: -45px !important; /* 下のボタンを引き寄せる */
        transform: translateY(15px) !important; 
        pointer-events: none;
    }

    /* 3. ボタン：2列で真ん中を空けてV字を作る（昨日までの綺麗さを復元） */
    .zone-grid-v {
        display: grid !important;
        grid-template-columns: 140px 140px !important;
        column-gap: 140px !important; /* ボタン1個分の隙間 */
        row-gap: 15px !important;
    }

    /* V字の仕上げ（左右を内側に寄せる） */
    .zone-item:nth-child(3) { transform: translateX(60px) !important; }
    .zone-item:nth-child(4) { transform: translateX(-60px) !important; }
    .zone-item:nth-child(5) { 
        grid-column: 1 / 3 !important; 
        margin: 0 auto !important;
        transform: translateY(-5px) !important;
    }
    
    /* ホバー（その場で拡大） */
    .zone-item:hover { transform: scale(1.05) !important; }
    .zone-item:nth-child(3):hover { transform: translateX(60px) scale(1.05) !important; }
    .zone-item:nth-child(4):hover { transform: translateX(-60px) scale(1.05) !important; }

/* 食事セクション (#food) 専用の横並び設定 */
    #food .rehab-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 40px 20px; /* 項目間の隙間 */
    }

    #food .rehab-item {
        flex: 0 0 calc(50% - 10px); /* 1つを50%幅にする */
        display: flex;             /* 中身を横並びにする */
        align-items: flex-start;
        gap: 20px;                 /* 写真と文字の間の隙間 */
    }

    #food .rehab-item .img-box {
        flex: 0 0 200px;           /* 写真の幅を固定（お好みで調整） */
        margin-bottom: 0;          /* 下の余白を消す */
    }

    #food .rehab-item h4 {
        margin-top: 0;             /* タイトルの上余白を消して写真の高さに合わせる */
    }
}

/* =========================================
   スマホ表示（レスポンシブ切り替え）
   ========================================= */
@media screen and (max-width: 768px) {
    .plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .plan-title {
        font-size: 18px;
    }

    /* 横並びから縦並びに切り替え */
    .timeline-wrapper {
        flex-direction: column;
        gap: 20px;
        padding: 15px 10px;
    }

    .timeline-item {
        flex-direction: row;
        align-items: center;
        background-color: #fcfbf9;
        padding: 10px;
        border-radius: 8px;
        border-left: 4px solid #112552;
    }

    .time-header {
        width: 110px !important;       /* 幅を75px/80px → 110px程度に広げる */
        white-space: nowrap !important; /* 勝手な途中の改行を防ぐ */
        font-size: 14px;
        
        border-bottom: none;
        border-right: 1px solid #ccc;  /* 縦線の境界線 */
        padding-bottom: 0;
        margin-bottom: 0;
        margin-right: 12px;
        flex-shrink: 0;               /* 幅が潰れないように固定 */
        display: flex;
        align-items: center;          /* 上下中央揃え */
        justify-content: center;      /* 左右中央揃え */
    }

    .item-card {
        flex-direction: row;
        justify-content: space-between;
        flex: 1;
    }

    .item-card .img-box {
        width: 100px;
        height: 100px;
        flex-shrink: 0;           /* 画像が潰れないように保護 */
    }

    .card-label, .badge-pickup, .badge-send {
        margin-bottom: 0;
        font-size: 15px;
    }

    .ext-label {
        writing-mode: horizontal-tb;
        border-left: none;
        border-right: none;
        border-top: 2px solid #112552;
        border-bottom: 2px solid #112552;
        padding: 2px 0;
    }
}

@media screen and (max-width: 1024px) {
    /* スマホでは仕切り線を非表示 */
    .rehabilitation-detail .rehab-divider {
        display: none !important;
    }

    /* スマホ版のみ「もっと見る」ボタンを表示 */
    .rehab-more-btn-wrap {
        display: block;
    }

    .rehab-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-color: #af835f;
        color: #ffffff;
        border: none;
        padding: 12px 30px;
        font-size: 14px;
        font-weight: bold;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 300px;
    }

    .rehab-more-btn i {
        transition: transform 0.3s ease;
    }
    .rec-more-btn i {
        transition: transform 0.3s ease;
    }

    /* ボタン開閉時のアイコン回転 */
    .rehab-more-btn.is-open i {
        transform: rotate(180deg);
    }
    .rec-more-btn.is-open i {
        transform: rotate(180deg);
    }

    /* スマホ版では下段4コマを最初は非表示にする */
    #js-rehab-more-content {
        display: none;
        margin-top: 15px;
    }

        #js-rec-more-content {
        display: none;
        margin-top: 15px;
    }

    /* ボタンタップ時に下段4コマを表示 */
    #js-rehab-more-content.is-open,
    #js-rec-more-content.is-open {
        display: flex !important;
    }
}
/* ここでスマホ終了 */

/* =========================================
   ご利用エリア：2分割（2カラム）構造レイアウト
   ========================================= */

/* --- 1. PC版レイアウト（左右2分割） --- */
@media screen and (min-width: 1025px) {
    #area-map .area-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* 上揃え */
        justify-content: space-between !important;
        gap: 50px !important; /* 左右カラムの隙間 */
        max-width: 1100px !important;
        margin: 0 auto !important;
    }

    /* 左カラム（テキスト＋車）：幅を半分に確保 */
    #area-map .area-left-col {
        flex: 1 !important;
        max-width: 520px !important;
    }

    /* 右カラム（マップ）：幅を半分に確保 */
    #area-map .area-right-col {
        flex: 1 !important;
        max-width: 480px !important;
    }

    /* 車写真とキャッチコピーの配置ブロック */
    .sougei-car-block {
        margin: 20px 0;
        text-align: center;
    }

    .area-car-photo {
        width: 100%;
        max-width: 360px; /* 車の大きさを適切に設定 */
        margin: 0 auto 10px;
    }

    .area-car-photo img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .area-map-box img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* --- 2. 「安心・快適に送迎いたします」キャッチコピーの装飾 --- */
.sougei-catchphrase {
    margin: 10px 0 15px 0;
    padding: 10px 15px;
    border-radius: 4px;
    display: inline-block;
    width: 100%;
    max-width: 360px;
}

.sougei-catchphrase p {
    font-size: 17px !important;
    font-weight: bold !important;
    color: #4A3121 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* --- 3. スマホ・タブレット版レイアウト（縦並び） --- */
@media screen and (max-width: 1024px) {
    #area-map .area-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    #area-map .area-left-col,
    #area-map .area-right-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sougei-car-block {
        text-align: center;
        margin: 20px 0;
    }

    .area-car-photo {
        max-width: 280px;
        margin: 0 auto 10px;
    }

    .area-car-photo img {
        width: 100% !important;
        height: auto !important;
    }

    .sougei-catchphrase {
        max-width: 280px;
    }
}