@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ---- 共通 ----
 * .szn-gutter           - container / container-narrow の左右24pxガター
 *                         （デザインは狭い画面でも max-width を保つため 95% 縮小を打ち消す）
 * .szn-heading          - heading の英字を筆記体14px・日本語を clamp(24,2.8vw,32) にする
 *   --top               - TOPだけ英字15px
 *   .heading__en--wide  - 英字の字間を .08em にする（About us / menu / shop info 等）
 * .szn-lead             - 見出し下のリード文（16px / #5C5347）
 * .szn-catch            - セクション中央の大きめキャッチ（clamp(20,2.6vw,26) / オリーブ）
 * .szn-note             - 注記テキスト（13px / #7A7268）
 * .szn-divider          - セクション下端の1px区切り線（オリーブ）
 * .szn-btn              - btn を「内容幅・枠線なし・pill・padding 14/36」にする
 *   --sm / --md / --lg / --cta / --wide  - padding・文字サイズのバリエーション
 *   --cream / --white   - クリーム地／白地のボタン
 * .szn-flanked          - heading-flanked の両脇ラインを全幅にし、中央をpillバッジにする
 * .szn-h2-dotted        - 点線（2px dotted #C1C8A6）下線の見出し
 *   --center / --sm(20px) / --olive
 * .szn-subhead          - 両脇ドット線＋中央にオリーブのpillラベル（__label）の小見出し
 * .szn-table            - 項目名+内容の定義表（178px列・1px罫・項目名#6E7A50・背景なし）
 *   --wide              - 項目名列を208pxにする（会社概要）
 * .szn-infobox          - FAF6EA・角丸30pxの事業所概要ボックス（mbox と併用）
 *   __inner / __title
 * .szn-gallery          - minmax(220px,1fr)・高さ200px・角丸10pxの写真グリッド
 *   __item              - ライトボックス用リンク（hoverで画像を1.06倍）
 * .szn-flowsteps        - 丸写真+番号バッジの「ご利用の流れ」
 *   __figure / __no / __title / __text
 * .szn-wave             - セクション上下のSVG波型ディバイダー（--top / --bottom）
 * .szn-wavesection      - 波型ディバイダー付きの淡いグリーン（#EDF0E4）セクション
 *   --narrow / __inner / __inner--wide
 * .szn-whitebox         - 白・角丸32pxの内側ボックス
 * .szn-roundsection     - border-radius:50%/70px のベージュ「丘」型セクション
 *   --top               - 上側だけ丸い版（採用の募集要項）
 * .szn-checklist        - ✓付きのご相談ケースリスト（__item / __mark / __text）
 * .szn-illust           - 中央寄せのイラスト（--consult / --care）
 * .szn-modal            - 営業カレンダーのモーダル（__panel / __close / __head /
 *                         __en / __title / __body / __img）
 *
 * ---- ヘッダー / フッター ----
 * .szn-header           - --overlay: TOPは透過absolute ／ --sticky: 下層はsticky
 *   __inner             - 高さ可変（ナビ折返し対応）・padding 14/24
 * .szn-logo             - テキストロゴ（19px/700/#463E33、__name）
 * .szn-nav              - 点線区切り＋ホバーで丸い光が出るナビ
 *   __item / __item--current / __ja
 * .szn-header__sns      - ヘッダー右のアイコン群（header__right と併用）
 *   .szn-header__icon   - 34px丸・オリーブ地の Instagram / お問い合わせアイコン
 * .szn-nav-toggle       - ハンバーガーの地色をデザインの白に寄せる
 * .szn-spnav            - SPナビ（ナビ項目のみ）
 * .szn-footer           - オリーブ地の3カラムフッター
 *   __body / __col / __name / __address / __note / __label / __tels / __tel /
 *   __tel-num / __btns / __map / __bottom / __copyright
 *
 * ---- TOP ----
 * .szn-mv               - メインビュー（__badge 看板バッジ / __slider 全画面写真 / __catch）
 * .szn-intro            - 導入セクション（__grid / __body / __leafs）
 * .szn-photostack       - 大小2枚の角丸写真をずらして重ねる＋パターン
 *   __pattern / __item--back / __item--front / __img
 * .szn-business         - clip-path で山型に切ったクリーム地のセクション（__grid）
 * .szn-bird-fly         - カードホバー時にそのカードのアーチ上端に現れる鳥
 * .szn-linkcard         - 上端アーチ型の事業リンクカード
 *   __figure / __img / __img--left-bottom / __overlay / __more / __body / __name / __title
 * .szn-insta            - Instagram セクション
 * .szn-flow             - gallery-scroll を320px角・gap18・100秒に調整（__track / __img）
 * .szn-contact          - お問い合わせセクション（#EDF0E4地＋上端に波線、__inner）
 * .szn-form             - フォームの箱（白・角丸30px）
 *   __grid / __field / __label / __req / __textarea
 *
 * ---- 下層ページ ----
 * .szn-pagehero         - 写真で切り抜いた英字＋写真＋右下タイトルのページヒーロー
 *   __inner / __frame / __en / __figure / __title
 * .szn-philosophy       - 理念セクション（__inner / __title）
 * .szn-msgphoto         - 代表挨拶の写真2枚重ね（__main / __sub）
 * .szn-message__grid    - 代表挨拶の2カラム ／ .szn-message__sign 署名
 * .szn-company          - 会社概要セクション（__grid）
 * .szn-historybox       - 沿革ボックス（#F7F7F7、__title / __bar）
 * .szn-timeline         - 沿革のタイムライン（__item / __dot / __year / __text）
 * .szn-staff            - スタッフ／ギャラリーのセクション
 * .szn-about2col        - 説明＋写真の2カラム（--logo / __emphasis / __img）
 * .szn-logobox          - ロゴを中央に置くボックス
 * .szn-flowsection      - ご利用の流れセクション
 * .szn-servicecards     - 身体介護／生活援助のカード束
 * .szn-servicecard      - カード本体（--gold で生活援助のゴールドブラウン）
 *   __title / __bar / __line / __text
 * .szn-servicelist      - イラスト＋項目名＋説明のアイテムを横3列に並べる
 *                         （__row=アイテム / __illust / __label / __desc）
 * .szn-servicelead      - サービス見出し下の中央リード
 * .szn-pointcards / .szn-pointcard - サービスのポイントカード（__title / __mark）
 * .szn-tsugumikai / .szn-dashedbox - 点線枠のつぐみ会ボックス（__en / __title）
 * .szn-ctasection / .szn-photocta  - 写真背景＋暗幕の採用CTA
 *   __bg / __overlay / __title / __text / __btn
 * .szn-hinataintro      - 喫茶ひなたの導入（__frame / __grid / __body / __img）
 * .szn-master           - マスターの想い（__inner）
 * .szn-hinatafeature    - バリアフリー／ナイトカフェのカード2枚（段違い配置）
 * .szn-fcard            - 角を切り落とした白カード＋上部テープ（__tape / __body /
 *                         __title / __icon / __text / __thumbs / __thumb）
 * .szn-menu             - メニューセクション（__grid / __grid--mb / __item）
 * .szn-menuhead         - メニュー見出し（h2に1px下線）
 * .szn-shopinfo__btns   - 店舗情報のボタン2つ（営業カレンダー / Instagram）
 * .szn-cafegrid         - 店内の様子（左に写真 __photos ／右に動画 __video）
 * .szn-video__player    - 音楽イベントの縦動画（4:5）／ .szn-video__title キャプション
 * .szn-recruitlead      - 採用の導入（__catch / __title）
 * .szn-requirements     - 募集要項（__foot）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ・値の粒度不足
 *   デザインの余白・文字サイズがほぼ全て clamp()。$section_padding や .mt-{n} /
 *   .fz-{n} の固定値では再現できないため、セクション単位で site.css に持った。
 *   .container / .container-narrow が 1320px・639px 以下で max-width を 95% に
 *   落とすのに対し、デザインは max-width を保って左右24pxで詰めるため .szn-gutter で上書き。
 *   .grid-2 / .grid-3 の折返しは 896px・639px 固定だが、デザインは
 *   repeat(auto-fit, minmax(300px,1fr)) でカード幅基準に折り返すため上書き。
 *
 * ・構造不足
 *   上端だけアーチ（radius 999px 999px 0 0）の写真カード、看板のように上から
 *   下がるバッジ、テープ留めの写真重ね、clip-path の山型セクション、
 *   写真で文字を切り抜くページヒーロー（background-clip:text）に相当する
 *   コンポーネントがない。
 *
 * ・装飾パターン不足
 *   SVGの4連波ディバイダー（.wave-divider--clip は楕円／多角形のみ）、
 *   ホバー時に丸い光がふわっと出るナビ（.header__nav-item--dot-hover は点のみ）、
 *   border-radius:50%/70px の「丘」型セクション。
 *
 * ・指定方向不足
 *   .table-basic--th-side は th 幅が30%固定。デザインは 170px/200px の固定列幅＋
 *   背景なし＋1px罫なので .szn-table を追加した。
 *
 * ・状態不足
 *   カード全体のホバーで内側の円だけを上へ動かす指定がない（.hover-up はカード自体）。
 *   ホバーで別要素（鳥の装飾）をカード位置へ移動させる指定もないため JS + クラスで実装。
 *
 * ======================================
 * 実装メモ
 * ======================================
 *
 * ・画像パスは includes/config.php の IMG_BASE を通すため、写真・パターンの
 *   background-image は HTML 側の style="background-image:url(...)" で渡している
 *   （実装指示書§6で許可されている唯一のインラインスタイル）。
 * ・共通CSSの img は vertical-align:bottom（インライン）だが、デザインは
 *   img{display:block}。行ボックスのストラット分がずれるためデザインに合わせている。
 * ・ヘッダーのナビは 1100px 以下で共通CSSの nav-toggle + sp-nav に切り替わる
 *   （実装指示書§8のヘッダー構造に従う）。デザインはナビを折り返して出し続けるが、
 *   ROSの共通仕様に合わせてハンバーガー化している。
 * ・1100px 以下（ハンバーガーが出る幅）からは右端の縦タブ .szn-caltab をやめ、
 *   共通の .sp-fixed-bar（営業カレンダー／お問い合わせ）に切り替える。
 *   共通CSSの .sp-fixed-bar は 896px 以下表示なので site.css 側で 1100px に広げている。
 * ・3枚組の事業リンクカードと5ステップの「ご利用の流れ」は、auto-fit のままだと
 *   タブレット幅で最後の1枚が余るため 1003〜640px を個別に指定している。
 */

/* ==========================================================================
   1. 土台（デザインの body 値）
   ========================================================================== */
:root {
  --szn-hh: 78px;           /* ヘッダー実測高さ（common.js が更新） */
  --szn-body: #5C5347;      /* 本文テキスト色 */
  --szn-olive: #5E6B40;
  --szn-olive-sub: #6E7A50;
  --szn-sage: #C1C8A6;
  --szn-cream: #F6E8C0;
  --szn-ink: #463E33;
  /* 写真・動画の角丸（全画像で共通）。
     ボタン・カード類は元から丸いのに写真だけ角張っていたため、
     サイト全体を「丸っこい」印象に寄せる目的で大きめに取る。
     代表挨拶横・居宅介護支援とは横・喫茶ひなた本文横の3枚だけは 30px */
  --szn-img-radius: 20px;
}

/* デザインの body は 16px 固定（共通CSSのSP縮小を打ち消す） */
body {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

/* デザインの本文は #5C5347、見出しは body 色（#463E33）のまま */
main p,
main li,
main dd {
  color: var(--szn-body);
}

/* ==========================================================================
   2. 共通パーツ
   ========================================================================== */

/* -- container のガター（デザインは max-width + padding:0 24px） --
   共通の .container / .container-narrow は狭い画面で max-width を 95% に落とすが、
   デザインは max-width を保ったまま左右 24px のパディングで詰めるので上書きする。 */
.szn-gutter {
  padding-left: 24px;
  padding-right: 24px;
}
.container.szn-gutter { max-width: 1200px; }
.container-narrow.szn-gutter { max-width: 900px; }

/* -- セクション見出し（筆記体の英字 + 日本語） -- */
.szn-heading .heading__en {
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: inherit;
  color: var(--szn-olive);
}
/* TOPの英字だけ15px（デザイン準拠） */
.szn-heading--top .heading__en { font-size: 15px; }
/* 導入セクションの英字のみ字間 .08em（デザイン準拠） */
.szn-heading .heading__en--wide { letter-spacing: 0.08em; }
.szn-heading .heading__ja {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 8px;
  color: var(--szn-ink);
}

.szn-lead {
  font-size: 16px;
  color: var(--szn-body);
}
.szn-note {
  font-size: 15px;
  color: #7A7268;
}

/* -- 両脇ライン+pillバッジの見出し（Philosophy / Master's message） -- */
.szn-flanked {
  gap: 14px;
  margin-bottom: 18px;
  color: var(--szn-olive);
}
.szn-flanked::before,
.szn-flanked::after {
  width: auto;
  flex: 1;
  background: var(--szn-olive);
}
.szn-flanked .heading__badge {
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 14px;
  letter-spacing: 0.14em;
}
.szn-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  background: var(--szn-olive);
}

/* -- ボタン（btn を内容幅・枠線なしの pill にする） -- */
.szn-btn {
  width: auto;
  max-width: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
}
.szn-btn--sm  { padding: 13px 32px; font-size: 1.45rem; }
.szn-btn--cta { padding: 15px 44px; font-size: 1.6rem; }
.szn-btn--md  { padding: 16px 46px; font-size: 1.6rem; }
.szn-btn--lg  { padding: 16px 56px; font-size: 1.6rem; }
.szn-btn--cream {
  background: var(--szn-cream);
  color: var(--szn-ink);
  padding: 12px 26px;
  font-size: 1.4rem;
}
.szn-btn--cream:hover { background: #FBF2D9; color: var(--szn-ink); opacity: 1; }
.szn-btn--white {
  background: #FEFEFE;
  color: var(--szn-olive);
  padding: 12px 26px;
  font-size: 1.4rem;
}
.szn-btn--white:hover { background: #F2F4EA; color: var(--szn-olive); opacity: 1; }

/* -- 定義表（項目名 + 内容） -- */
.szn-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #EDEADF;
}
.szn-table th,
.szn-table td {
  padding: 18px 8px;
  border: 0;
  border-bottom: 1px solid #EDEADF;
  font-size: 16px;
  text-align: left;
  vertical-align: top;
  background: transparent;
}
.szn-table th {
  padding-right: 0;
  width: 178px;
  font-weight: 700;
  color: var(--szn-olive-sub);
  white-space: nowrap;
}
.szn-table td { color: var(--szn-body); padding-left: 20px; padding-right: 8px; }
.szn-table--wide th { width: 208px; }
@media (max-width: 639px) {
  .szn-table th,
  .szn-table td { display: block; width: 100%; white-space: normal; }
  .szn-table th { padding-bottom: 0; border-bottom: 0; }
  .szn-table td { padding-top: 0; padding-left: 8px; }
}

/* -- 事業所概要ボックス --
   背景の横幅は他セクションのコンテンツ幅（container + szn-gutter = 1152px）に合わせる */
.szn-infobox {
  width: calc(100% - 48px);
  max-width: 1152px;
  margin: 0 auto;
  background: #FAF6EA;
  border-radius: 30px;
  padding: clamp(48px, 6vw, 72px) 24px;
}
.szn-infobox__inner {
  max-width: 900px;
  margin: 0 auto;
}
.szn-infobox__title {
  margin: 0 0 24px;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--szn-ink);
}
@media (max-width: 639px) {
  .szn-infobox { padding: 36px 18px; }
}

/* -- 写真グリッド（ギャラリー） -- */
.szn-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.szn-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--szn-img-radius);
  height: 200px;
}
.szn-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.szn-gallery__item:hover { opacity: 1; }

/* -- ご利用の流れ（丸写真 + 番号バッジ） -- */
/* 写真の左下に重ねる丸いロゴバッジ（白地＋メインカラーの枠線）。
   居宅介護支援とは／ほっとひと息〜 の2箇所で使う */
.szn-photologo {
  position: absolute;
  right: -16px;
  bottom: -24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(136px, 34%);
  aspect-ratio: 1;
  /* 正方形に近いロゴが円からはみ出さないよう、円に内接する分だけ内側に寄せる。
     ％指定だと親要素（写真）の幅基準になって余白が効きすぎるので px で持つ */
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 999px;
  background: #FEFEFE;
  border: 3px solid var(--szn-olive);
  box-shadow: 0 6px 18px rgba(70, 62, 51, 0.12);
}
.szn-photologo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* ロゴ自体に丸い輪郭が描かれているもの（喫茶ひなた）は、
   二重丸に見えないよう枠を付けず画像だけを置く */
.szn-photologo--plain {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
@media (max-width: 639px) {
  .szn-photologo {
    right: -18px;
    bottom: -16px;
    width: min(116px, 36%);
    padding: 16px;
    border-width: 2px;
  }
}

/* ご利用の流れの見出し下に置く一文（メインカラー・中央ぞろえ） */
.szn-flowlead {
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  text-align: center;
  color: var(--szn-olive);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
}
@media (max-width: 639px) {
  /* スマホは2行に折り返すので、文字を少し落として行間を詰める */
  .szn-flowlead {
    margin-bottom: clamp(20px, 5vw, 28px);
    font-size: 15px;
    line-height: 1.7;
  }
}

/* 2ページとも3つ並びで中央ぞろえ。
   3列ぶん（310px×3＋gap32×2）で折り返す幅に制限し、
   余った行（Komorebiの4・5番目）も中央に寄るよう flex で組む */
.szn-flowsteps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}
.szn-flowsteps__item {
  flex: 0 1 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.szn-flowsteps__figure {
  position: relative;
  display: block;
  width: min(270px, 100%);
  aspect-ratio: 1;
  border-radius: 999px;
  background: #F1EFE7;
  border: 6px solid #FEFEFE;
  box-shadow: 0 6px 20px rgba(70, 62, 51, 0.08);
  margin-bottom: 18px;
}
.szn-flowsteps__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
/* 番号バッジの地色はサブカラー（クリーム）。文字はオリーブで可読性を確保 */
.szn-flowsteps__no {
  position: absolute;
  right: 6px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--szn-cream);
  color: var(--szn-olive);
  font-size: 19px;
  font-weight: 700;
}
/* TSUGUMI のご利用の流れだけ番号の地色を濃いゴールドにする */
.szn-flowsteps--gold .szn-flowsteps__no { background: #F5D781; }

.szn-flowsteps__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--szn-ink);
}
.szn-flowsteps__text {
  margin: 12px 0 0;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.8;
  letter-spacing: 0;
  color: var(--szn-body);
}

/* -- SVG波型ディバイダー（セクション上下） -- */
.szn-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 34px;
  display: block;
  z-index: 1;
}
.szn-wave--top { top: -1px; }
.szn-wave--bottom { bottom: -1px; transform: scaleY(-1); }

/* -- モーダル（営業カレンダー） -- */
.szn-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(70, 62, 51, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
/* 中央の白パネル。クリーム地の二重枠＋上部に看板風のタブ */
.szn-modal__panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: auto;
  padding: clamp(30px, 4vw, 52px) clamp(22px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px);
  background: #FEFEFE;
  border: 8px solid var(--szn-cream);
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(70, 62, 51, 0.22);
}
.szn-modal__panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 14vw, 120px);
  height: 20px;
  background: var(--szn-olive);
  border-radius: 0 0 6px 6px;
}
.szn-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: #F7F8F1;
  color: var(--szn-body);
  font-size: 17px;
  transition: background-color 0.3s ease;
}
.szn-modal__close:hover { background: var(--szn-cream); color: var(--szn-olive); }
.szn-modal__head {
  text-align: center;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.szn-modal__en {
  margin: 0 0 4px;
  font-family: "Edu SA Hand", cursive;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--szn-olive);
}
.szn-modal__title {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--szn-ink);
}
.szn-modal__body {
  background: #F7F8F1;
  border-radius: 18px;
  padding: clamp(16px, 2vw, 24px);
}
.szn-modal__img {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: var(--szn-img-radius);
}

/* ==========================================================================
   3. ヘッダー
   ========================================================================== */
.szn-header {
  background: transparent;
}
.szn-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.szn-header--sticky {
  position: sticky;
  top: 0;
  background: rgba(254, 254, 254, 0.94);
  border-bottom: 1px solid #EDEADF;
  backdrop-filter: blur(6px);
}
.szn-header__inner {
  max-width: 1360px;
  height: auto;
  padding: 14px 24px;
  gap: 24px;
  flex-wrap: wrap;
}

.szn-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.szn-logo__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--szn-ink);
  white-space: nowrap;
}

/* ロゴを置かない構成のため、ナビを中央に据える。
   右のアイコン群と同じ幅のダミー余白を左に作って、左右の重さを釣り合わせる */
.szn-header__inner::before {
  content: "";
  flex: 0 0 76px;
}
.szn-nav {
  flex: 1;
  margin-right: 0;
  row-gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.szn-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.szn-nav__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 14px;
  border-left: 2px dotted #C8CDB6;
}
.szn-nav__item:first-child::before { border-left-color: transparent; }

.szn-nav__item > a {
  display: block;
  padding: 10px 11px;
  white-space: nowrap;
  background-image: radial-gradient(circle at 50% 50%, rgba(193, 200, 166, 0) 0 15px, rgba(193, 200, 166, 0) 15px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  transition: background-image 0.25s ease;
}
.szn-nav__item > a::after { display: none; }
.szn-nav__item > a:hover { opacity: 1; }
.szn-nav__ja {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 2;
  margin-top: 0;
  color: #6B6357;
  transition: color 0.25s ease;
}
.szn-nav__item > a:hover {
  background-image: radial-gradient(circle at 50% 50%, rgba(193, 200, 166, 0.16) 0 15px, rgba(193, 200, 166, 0) 15px);
}
.szn-nav__item > a:hover .szn-nav__ja { color: var(--szn-olive); }
.szn-nav__item--current > a {
  background-image: radial-gradient(circle at 50% 50%, rgba(193, 200, 166, 0.16) 0 15px, rgba(193, 200, 166, 0) 15px);
}
.szn-nav__item--current .szn-nav__ja { color: var(--szn-olive); }

/* -- SPナビ（1100px以下） -- */
.szn-nav-toggle { background: rgba(254, 254, 254, 0.88); }

/* ==========================================================================
   4. フッター
   ========================================================================== */
.szn-footer {
  background: var(--szn-olive);
  color: #FEFEFE;
  margin-top: 20px;
  padding: clamp(48px, 6vw, 72px) 24px 32px;
}
.szn-footer__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
}
.szn-footer__name {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 700;
}
/* -- 住所（所在地 / 法人登録住所を見出し付きで並べる） -- */
.szn-footer__addr { margin: 0; }
.szn-footer__addr-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--szn-cream);
  margin-bottom: 4px;
}
.szn-footer__addr-label:not(:first-of-type) { margin-top: 22px; }
.szn-footer__addr-body {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(254, 254, 254, 0.3);
}
.szn-footer__zip {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: #E3E8D4;
}
.szn-footer__street {
  display: block;
  font-size: 16px;
  line-height: 1.7;
  color: #FEFEFE;
}
.szn-footer__places {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #E3E8D4;
}

/* -- 電話（事業所名を小さく上に、番号を大きくリンクに） -- */
.szn-footer__label {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--szn-cream);
}
.szn-footer__tels {
  display: flex;
  flex-direction: column;
}
.szn-footer__tel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  color: #FEFEFE;
}
.szn-footer__tel + .szn-footer__tel {
  border-top: 1px dotted rgba(254, 254, 254, 0.3);
}
.szn-footer__tel-name {
  font-size: 12.5px;
  line-height: 1.6;
  color: #E3E8D4;
}
.szn-footer__tel-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--szn-cream);
}
.szn-footer__tel-num i { font-size: 0.7em; }
.szn-footer__tel-num:hover { color: #FEFEFE; opacity: 1; }
.szn-footer__tel-num--fax {
  font-size: 16px;
  color: #FEFEFE;
}
.szn-footer__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}
/* アイコンを入れるため inline-flex に */
.szn-footer__btns .szn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.szn-footer__btns .szn-btn i { font-size: 1.15em; }
.szn-footer__map {
  border-radius: var(--szn-img-radius);
  height: 180px;
  background: #FEFEFE;
}
.szn-footer__bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(254, 254, 254, 0.35);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.szn-footer__copyright {
  font-size: 13px;
  color: #E3E8D4;
}

/* ==========================================================================
   5. TOP：メインビュー
   ========================================================================== */
.szn-mv {
  background: #FEFEFE;
  padding: calc(var(--szn-hh) + 8px) 0 40px;
  animation: sznFadeUp 0.9s ease both;
}
/* MVは幅を絞らず、左右60pxの余白だけ残して画面幅いっぱいに伸ばす
   （デザイン出力は max-width:1360px / padding:0 40px） */
.szn-mv__inner {
  margin: 0 auto;
  padding: 0 60px;
}
.szn-mv__frame { position: relative; }
.szn-mv__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  background: var(--szn-olive);
  color: #FEFEFE;
  border-radius: 0 0 6px 6px;
  padding: 22px 30px 20px;
  text-align: center;
  line-height: 1.5;
}
.szn-mv__badge-en {
  display: block;
  font-family: "Edu SA Hand", cursive;
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: 0.14em;
}
.szn-mv__badge-ja {
  display: block;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.2em;
}
.szn-mv__slider {
  position: relative;
  height: calc(100vh - var(--szn-hh) - 48px);
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--szn-img-radius);
}
/* CMSスライダーの出力（Swiper）を外枠の高さに追従させる。
   CMS側が #main_slider 起点のセレクタで高さを持つため、#slideshow を足して
   詳細度で上回らせている（!important は使わない）。
   これで画像が object-fit:cover の中央基準でトリミングされる。 */
#slideshow #cms-slider-1-1-area,
#slideshow #main_slider,
#slideshow #main_slider .main_slider__outer,
#slideshow #main_slider .main_slider,
#slideshow #main_slider .swiper-wrapper,
#slideshow #main_slider .swiper-slide,
#slideshow #main_slider .main_slider__inner {
  height: 100%;
}
.szn-mv__slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.szn-mv__catch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 5;
}
.szn-mv__catch-text {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.7;
  color: #FEFEFE;
  text-align: center;
  text-shadow: 0 0 28px rgba(40, 35, 28, 0.85), 0 0 60px rgba(40, 35, 28, 0.6), 0 2px 10px rgba(40, 35, 28, 0.7);
}
@media (max-width: 639px) {
  .szn-mv__inner { padding: 0 24px; }
  .szn-mv__slider { height: 60vh; }
}

@keyframes sznFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   6. TOP：導入（写真重ね + テキスト）
   ========================================================================== */
.szn-intro {
  background: #FEFEFE;
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 88px);
}
.szn-intro__grid { gap: clamp(24px, 4vw, 48px); }

.szn-photostack {
  position: relative;
  height: clamp(400px, 45vw, 520px);
}
/* パターンは写真より下（奥の写真と同じ層＝DOM順で写真が上に乗る）。
   四角ではなく正円に切り抜く */
.szn-photostack__pattern {
  position: absolute;
  left: -19px;
  bottom: -80px;
  width: min(49%, 390px);
  aspect-ratio: 1;
  height: auto;
  background-repeat: repeat;
  background-size: 320px 240px;
  border-radius: 999px;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
  filter: brightness(0.9);
}
/* テープ・ポラロイド風はやめ、大小2枚の角丸四角形をずらして重ねる。
   どちらも白い枠を回す */
.szn-photostack__item {
  position: absolute;
  overflow: hidden;
  border-radius: 30px;
  border: 8px solid #FEFEFE;
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(70, 62, 51, 0.14);
}
/* 奥の大きい写真。重なりは一番下（パターン・手前の写真より下） */
.szn-photostack__item--back {
  top: 0;
  left: 0;
  width: min(88%, 500px);
  height: clamp(290px, 33vw, 400px);
  z-index: 0;
}
/* 手前の小さい写真 */
.szn-photostack__item--front {
  bottom: 0;
  right: 2%;
  width: min(56%, 300px);
  height: clamp(200px, 23vw, 280px);
  z-index: 2;
}
/* 写真が1枚だけのとき。重ねる相手がいないので枠の高さを写真に合わせ、
   写真自体も枠いっぱいに広げる（下に空きができないように） */
.szn-photostack--single { height: clamp(290px, 33vw, 400px); }
.szn-photostack--single .szn-photostack__item--back {
  width: 100%;
  height: 100%;
}
.szn-photostack__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.szn-intro__body { position: relative; }
.szn-intro__leafs {
  position: absolute;
  right: clamp(-30px, -2vw, -8px);
  bottom: clamp(-120px, -11vw, -70px);
  width: clamp(140px, 17vw, 210px);
  opacity: 0.9;
}

/* ==========================================================================
   7. TOP：3事業への導線
   ========================================================================== */
/* 鳥を山型の頂点に載せるため、clip-path の外側に位置の基準を作る */
.szn-business__wrap {
  position: relative;
  margin-top: clamp(32px, 4vw, 52px);
}
.szn-business {
  position: relative;
  background: var(--szn-cream);
  padding: clamp(120px, 15vw, 190px) 0 clamp(64px, 8vw, 96px);
  clip-path: polygon(50% 0%, 100% 22%, 100% 100%, 0% 100%, 0% 22%);
}
/* 家のシルエット地にストライプのテクスチャをうっすら重ねる
   （画像はros-cdn配信。CSSのURLは絶対パスで直書きする） */
.szn-business::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28633/bg-st.jpg") center / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}
.szn-business__grid {
  position: relative;
  z-index: 1;
  gap: 28px;
}
/* ホバーしたカードのアーチ中央に現れる鳥。
   移動先は top.js が --szn-bird-x / --szn-bird-y に入れる */
.szn-bird-fly {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(32px, 3.3vw, 48px);
  transform: translate(calc(-50% + var(--szn-bird-x, 0px)), calc(-100% + var(--szn-bird-y, 0px)));
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 4;
}
.szn-bird-fly.is-visible { opacity: 1; }

.szn-linkcard {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.szn-linkcard:hover { opacity: 1; }
.szn-linkcard__figure {
  position: relative;
  display: block;
  width: 100%;
  /* 正円。height を固定すると横幅次第で楕円になるため aspect-ratio で正方形にする */
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 999px;
  border: 6px solid #FEFEFE;
  box-shadow: 0 4px 18px rgba(70, 62, 51, 0.1);
}
.szn-linkcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.szn-linkcard__img--left-bottom { object-position: 30% 100%; }
.szn-linkcard__overlay {
  position: absolute;
  inset: 0;
  background: rgba(50, 44, 35, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.szn-linkcard__more {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FEFEFE;
  font-size: 14px;
  letter-spacing: 0.06em;
  transform: translateY(14px);
  transition: transform 0.45s ease;
}
.szn-linkcard:hover .szn-linkcard__overlay,
.szn-linkcard:focus-visible .szn-linkcard__overlay { opacity: 1; }
.szn-linkcard:hover .szn-linkcard__more,
.szn-linkcard:focus-visible .szn-linkcard__more { transform: translateY(0); }
.szn-linkcard__body {
  padding: 22px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  align-items: center;
}
/* タイトルの地色はメインカラー（白抜き文字） */
.szn-linkcard__name {
  font-size: 19px;
  font-weight: 700;
  color: #FEFEFE;
  background: var(--szn-olive);
  border-radius: 999px;
  padding: 10px 24px;
}
.szn-linkcard__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--szn-olive-sub);
}
@media (max-width: 639px) {
  .szn-business { clip-path: polygon(50% 0%, 100% 8%, 100% 100%, 0% 100%, 0% 8%); }
}

/* ==========================================================================
   8. TOP：Instagram
   ========================================================================== */
.szn-insta { padding: clamp(52px, 7vw, 84px) 0; }
.szn-flow { padding: 4px 0; }
.szn-flow__track {
  gap: 18px;
  animation-duration: 100s;
}
.szn-flow__track .szn-flow__img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: var(--szn-img-radius);
}
@media (max-width: 639px) {
  .szn-flow__track .szn-flow__img { width: 220px; height: 220px; }
}

/* ==========================================================================
   9. TOP：お問い合わせフォーム
   ========================================================================== */
/* セクション全体を淡いグリーン地＋上端に波線、フォームの箱は白。
   フッターの margin-top:20px を打ち消し、下に白い余白を残さない */
.szn-contact {
  position: relative;
  background: #EDF0E4;
  padding: clamp(60px, 8vw, 100px) 24px;
  margin-bottom: -20px;
}
.szn-form {
  background: #FEFEFE;
  border-radius: 30px;
  padding: clamp(26px, 4vw, 44px);
}
.szn-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.szn-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.szn-form__label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--szn-body);
}
.szn-form__req { color: #B9694F; }
.szn-form .form-input {
  background: #FEFEFE;
  border: 1px solid #E2DFD2;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--szn-ink);
}
.szn-form .form-input:focus { border-color: var(--szn-olive); }
.szn-form__textarea { resize: vertical; }

/* [hidden] 属性で閉じられるようにする（display:flex を打ち消す） */
.szn-modal[hidden] { display: none; }

/* ==========================================================================
   10. 下層ページ共通：ページヒーロー
   （写真で切り抜いた英字 + 写真 + 右下にページタイトル）
   ========================================================================== */
.szn-pagehero { padding: clamp(6px, 1vw, 10px) 0 0; }
/* ヒーローは幅を絞らず、左右60pxの余白だけ残して画面幅いっぱいに伸ばす
   （メインビューと同じガター幅） */
.szn-pagehero__inner {
  margin: 0 auto;
  padding: 0 60px;
}
.szn-pagehero__frame { position: relative; }
.szn-pagehero__en {
  margin: 0;
  font-family: "Edu SA Hand", cursive;
  font-weight: 500;
  font-size: clamp(26px, 5vw, 66px);
  line-height: 1.4;
  padding-top: 8px;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  background-size: cover;
  background-position: center 22%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.szn-pagehero__figure {
  position: relative;
  z-index: 2;
  margin-top: clamp(-22px, -2.6vw, -12px);
  height: clamp(260px, 34vw, 420px);
  overflow: hidden;
  border-radius: var(--szn-img-radius);
}
.szn-pagehero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 画像を下にずらす（＝写真の上側が見えるトリミングにする）。採用情報で使用 */
.szn-pagehero--down .szn-pagehero__figure img { object-position: 50% 20%; }
/* TSUGUMI（ヘルパーステーション）のヒーローだけ、被写体が中央に来る位置に寄せる */
.szn-pagehero--tsugumi .szn-pagehero__figure img { object-position: 50% 30%; }
/* 写真が明るく、文字に流し込んだ絵が白背景と同化して読めないページ用。
   写真をインク色と乗算して暗く沈ませ、文字の形が出るようにする */
.szn-pagehero--en-dark .szn-pagehero__en {
  background-color: rgba(70, 62, 51, 0.62);
  background-blend-mode: multiply;
}
.szn-pagehero__title {
  position: absolute;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(14px, 1.8vw, 24px);
  margin: 0;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #FEFEFE;
  text-shadow: 0 0 18px rgba(40, 35, 28, 0.8);
}
@media (max-width: 639px) {
  .szn-pagehero__inner { padding: 0 24px; }
  .szn-pagehero__en {
    padding-top: 0;
    background-position: center 60%;
  }
  /* スマホでは英字を写真にわずかに重ねる程度に留める */
  .szn-pagehero__figure {
    margin-top: -8px;
    height: 182px;
  }
}

/* ==========================================================================
   11. わたしたちについて
   ========================================================================== */
.szn-philosophy {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.szn-philosophy__inner { padding: clamp(52px, 7vw, 84px) clamp(20px, 3vw, 40px); }
.szn-philosophy__title {
  margin: 0 0 18px;
  font-size: clamp(21px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--szn-ink);
}

/* -- ベージュ地のセクション（湾曲なし。--top のみ上側を丸くする） -- */
.szn-roundsection {
  position: relative;
  background: #FAF6EA;
  padding: clamp(72px, 9vw, 108px) 0;
}
.szn-message__grid { gap: clamp(28px, 5vw, 56px); }
.szn-msgphoto {
  position: relative;
  height: clamp(380px, 44vw, 520px);
}
.szn-msgphoto__main {
  position: absolute;
  top: 0;
  left: 0;
  width: 72%;
  height: clamp(260px, 30vw, 360px);
  object-fit: cover;
  border: 6px solid #FEFEFE;
  box-sizing: border-box;
}
.szn-msgphoto__sub {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 52%;
  height: clamp(190px, 22vw, 260px);
  object-fit: cover;
  border: 6px solid #FEFEFE;
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(70, 62, 51, 0.14);
}
/* 代表挨拶の横写真は大きめの角丸で、やわらかい印象にする */
.szn-msgphoto__main,
.szn-msgphoto__sub { border-radius: 30px; }
.szn-message__sign {
  margin: 24px 0 0;
  text-align: right;
  font-size: 16px;
  font-weight: 500;
}

/* -- 会社概要・沿革 -- */
.szn-company {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) 24px clamp(52px, 7vw, 84px);
}
/* 沿革ブロックを外して1カラムになったため、表が全幅(1152px)まで伸びて
   項目名と内容が離れすぎる。見出しと同じ左揃えのまま読みやすい幅に収める */
.szn-company__grid {
  display: grid;
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.szn-historybox {
  background: #F7F7F7;
  border-radius: 10px;
  padding: clamp(24px, 3vw, 36px);
}
.szn-historybox__title {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--szn-ink);
}
.szn-historybox__bar {
  width: 5px;
  height: 22px;
  border-radius: 999px;
  background: var(--szn-olive);
  flex-shrink: 0;
}
.szn-timeline {
  display: flex;
  flex-direction: column;
  padding-left: 6px;
  border-left: 2px solid #E4DCC4;
}
.szn-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 30px 26px;
}
.szn-timeline__dot {
  position: absolute;
  left: -13px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--szn-olive);
  border: 3px solid #F7F7F7;
  box-sizing: border-box;
}
.szn-timeline__year {
  font-size: 16px;
  font-weight: 700;
  color: var(--szn-olive);
  letter-spacing: 0.04em;
}
.szn-timeline__text {
  font-size: 16px;
  color: var(--szn-body);
  white-space: pre-line;
}

/* -- スタッフの様子 -- */
.szn-staff { padding: clamp(52px, 7vw, 84px) 0; }

/* 署名は本文色ではなく見出し色（デザイン準拠） */
.szn-message__sign { color: var(--szn-ink); }

/* ==========================================================================
   12. 居宅介護支援 Komorebi
   ========================================================================== */

/* -- 点線下線の見出し（各事業ページで共通） -- */
.szn-h2-dotted {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px dotted var(--szn-sage);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 700;
  line-height: 1.9;
  color: var(--szn-ink);
}
.szn-h2-dotted--center { text-align: center; }
.szn-h2-dotted--sm { font-size: 20px; line-height: 2; }
.szn-h2-dotted--olive { color: var(--szn-olive); }

/* -- 説明 + 写真の2カラム -- */
.szn-about2col {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 84px) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px;
  align-items: center;
}
.szn-about2col__emphasis {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
}
.szn-about2col__figure { position: relative; }
.szn-about2col__img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  /* 本文横の写真は大きめの角丸 */
  border-radius: 30px;
}
/* 写真の左下、写真の外に鳥を止まらせる（右下はロゴバッジを置くため）。
   top:100% を基準にすることで、鳥の高さに関わらず写真と重ならない */
.szn-about2col__bird {
  position: absolute;
  left: clamp(-30px, -2vw, -14px);
  top: calc(100% + 8px);
  width: clamp(48px, 5vw, 72px);
}

/* -- 波型ディバイダー付きの淡いグリーンセクション -- */
.szn-wavesection {
  position: relative;
  background: #EDF0E4;
  padding: clamp(88px, 11vw, 124px) 0;
}
.szn-wavesection--narrow { padding: clamp(64px, 8vw, 96px) 0; }
/* サブカラー（クリーム #F6E8C0）の淡い地色。代表挨拶・サービス内容で使用 */
.szn-wavesection--beige { background: #FAF6EA; }
/* クリーム（黄色）地 */
.szn-wavesection--cream { background: #FCF4DF; }
/* 代表挨拶の縦余白 */
.szn-wavesection--msg { padding: clamp(72px, 9vw, 108px) 0; }
.szn-wavesection__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.szn-wavesection__inner--wide { max-width: 1000px; }
@media (max-width: 639px) {
  /* SPは画面端の余白を20pxに詰める */
  .szn-wavesection__inner { padding: 0 20px; }
}
.szn-catch {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 500;
  line-height: 1.8;
}
.szn-illust {
  display: block;
  width: clamp(130px, 17vw, 210px);
  margin: 0 auto 22px;
}
/* 相談イラストは見出しの上に置き、やや大きめに */
.szn-illust--consult { width: clamp(100px, 13vw, 160px); }

.szn-whitebox {
  background: #FEFEFE;
  border-radius: 32px;
  padding: clamp(28px, 4vw, 44px);
}

/* -- ✓付きの相談ケースリスト -- */
.szn-checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.szn-checklist__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FAF9F3;
  border-radius: 20px;
  padding: 16px 20px;
  color: var(--szn-body);
}
.szn-checklist__mark {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--szn-sage);
  color: #FEFEFE;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.szn-checklist__text { font-size: 16px; }

/* -- ご利用の流れ セクション -- */
.szn-flowsection {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 84px) 24px;
}

/* 相談キャッチはオリーブ、強調文はサブオリーブ（デザイン準拠） */
.szn-catch { color: var(--szn-olive); }
.szn-about2col__emphasis { color: var(--szn-olive-sub); }

/* ==========================================================================
   13. ヘルパーステーションTSUGUMI
   ========================================================================== */

/* -- ロゴ + 説明の2カラム（左をやや狭く） -- */
.szn-about2col--logo { grid-template-columns: minmax(200px, 0.55fr) minmax(300px, 1fr); }
.szn-logobox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
}
.szn-logobox img {
  width: min(280px, 100%);
  height: auto;
}
/* 事業所名などを語中で折り返させない（フッターの3事業所名 等） */
.szn-nowrap { white-space: nowrap; }

/* 代表署名の半角かっこ。前後をわずかに詰めて名前との間隔を狭める */
.szn-paren { margin: 0 -0.1em; }
@media (max-width: 639px) {
  .szn-about2col--logo { grid-template-columns: 1fr; }
}

/* -- サービス内容 -- */
.szn-servicelead {
  margin: 0 auto 28px;
  max-width: 640px;
  text-align: center;
}
.szn-servicecards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.szn-servicecard {
  background: #FEFEFE;
  border-radius: 28px;
  padding: clamp(22px, 3vw, 34px);
}
.szn-servicecard__title {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--szn-olive);
}
.szn-servicecard__bar {
  flex: none;
  width: 6px;
  height: 28px;
  border-radius: 999px;
  background: var(--szn-olive);
}
.szn-servicecard__line {
  flex: 1;
  height: 1px;
  background: #DDE3CC;
}
.szn-servicecard__text {
  margin: 0 0 18px;
  font-size: 16px;
}
/* 「イラスト／項目名／説明」を縦に積んだアイテムを横3列で並べる。
   アイテムに枠線は持たせない。並びは左寄せ（最終行が余っても左詰め）で、
   アイテムの中身（イラスト・項目名）は中央揃え。 */
.szn-servicelist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px 20px;
}
.szn-servicelist__row {
  display: flex;
  flex-direction: column;
  flex: 0 1 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
}
/* イラストは正方形の枠に収めて、行内で項目名の高さを揃える */
.szn-servicelist__illust {
  display: block;
  width: 100%;
  max-width: 175px;
  margin: 0 auto 14px;
  aspect-ratio: 1 / 1;
}
.szn-servicelist__illust img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.szn-servicelist__label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: var(--szn-olive);
  color: #FEFEFE;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.szn-servicelist__desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--szn-body);
}
/* 生活援助はゴールドブラウン */
.szn-servicecard--gold .szn-servicecard__title { color: #6B5C25; }
.szn-servicecard--gold .szn-servicecard__bar { background: #6B5C25; }
.szn-servicecard--gold .szn-servicecard__line { background: #E4D6A6; }
.szn-servicecard--gold .szn-servicelist__label { background: #6B5C25; }
@media (max-width: 1023px) {
  /* タブレットは2列 */
  .szn-servicelist__row {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}
@media (max-width: 599px) {
  /* SPは1列。イラストが大きくなりすぎないよう一回り小さくする */
  .szn-servicelist {
    gap: 22px;
  }
  .szn-servicelist__row {
    flex-basis: 100%;
    max-width: 100%;
  }
  .szn-servicelist__illust {
    max-width: 120px;
    margin-bottom: 12px;
  }
  /* SPは見出しを一段小さく、説明文も本文サイズに合わせて行間を詰める */
  .szn-servicecard__title { font-size: 21px; }
  .szn-servicelist__label { font-size: 15px; }
  .szn-servicelist__desc {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* -- サービスのポイント -- */
.szn-pointcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: clamp(28px, 4vw, 40px);
}
.szn-pointcard {
  background: #FEFEFE;
  border-radius: 28px;
  padding: 26px 24px;
}
.szn-pointcard__title {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--szn-olive);
}
.szn-pointcard__mark {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--szn-sage);
  color: #FEFEFE;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.szn-pointcard p {
  margin: 0;
  font-size: 16px;
}

/* -- つぐみ会（点線枠） -- */
.szn-tsugumikai {
  max-width: 1000px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 0 24px;
}
.szn-dashedbox {
  border: 2px dashed var(--szn-sage);
  border-radius: 32px;
  padding: clamp(28px, 4vw, 44px);
  background: #FEFEFE;
}
.szn-dashedbox__en {
  margin: 0 0 8px;
  font-family: "Edu SA Hand", cursive;
  font-size: 14px;
  color: var(--szn-olive);
}
.szn-dashedbox__title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: var(--szn-ink);
}
.szn-dashedbox p { margin: 0 0 14px; font-size: 16px; }
.szn-dashedbox p:last-child { margin-bottom: 18px; }
.szn-dashedbox .szn-dashedbox__en { font-size: 14px; margin: 0 0 8px; }

/* -- 写真背景のCTA -- */
.szn-ctasection {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) 24px 0;
}
.szn-photocta {
  position: relative;
  overflow: hidden;
  border-radius: var(--szn-img-radius);
  padding: clamp(36px, 5vw, 56px) clamp(26px, 3vw, 36px);
  text-align: center;
}
.szn-photocta__bg {
  position: absolute;
  inset: 0;
  top: -30px;
  width: 100%;
  height: calc(100% + 30px);
  object-fit: cover;
  object-position: 50% 15%;
}
.szn-photocta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(70, 62, 51, 0.52);
}
.szn-photocta__title {
  position: relative;
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: #FEFEFE;
}
.szn-photocta__text {
  position: relative;
  margin: 0 0 24px;
  font-size: 16px;
  color: #FEFEFE;
}
.szn-photocta__btn { position: relative; }

/* ==========================================================================
   14. 喫茶ひなた
   ========================================================================== */

/* -- ごあんない（右にパターン・写真は角丸なし） -- */
/* 上下の余白は Komorebi の「居宅介護支援とは」（.szn-about2col）と揃える */
.szn-hinataintro {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 84px) 24px;
}
.szn-hinataintro__frame { position: relative; }
.szn-hinataintro__figure { position: relative; }
.szn-hinataintro__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  /* 文章と写真の上下中央を合わせる（.szn-about2col と同じ） */
  align-items: center;
}
.szn-hinataintro__body { position: relative; }
.szn-hinataintro__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 90%;
  margin-left: auto;
  height: clamp(180px, 23vw, 306px);
  object-fit: cover;
  /* 本文横の写真は大きめの角丸 */
  border-radius: 30px;
}

/* -- マスターの想い（クリーム地＋上下波線） -- */
.szn-master {
  padding: clamp(64px, 8vw, 96px) 0;
}
.szn-master__inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(24px, 3vw, 40px);
}

/* -- どなたでも過ごしやすく / ナイトカフェ --
   角を切り落とした白カードを2枚、段違いに並べる */
/* 上段に「空間づくり」を全幅、下段に「ナイトカフェ」「コーヒーのこだわり」を横並び */
.szn-hinatafeature {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: stretch;
}
.szn-hinatafeature > .szn-fcard:first-child { grid-column: 1 / -1; }

.szn-fcard { position: relative; display: flex; }
/* テープのあしらいは使わない */
.szn-fcard__tape { display: none; }

/* 四方を角丸にした白カード。枠はサブカラー（クリーム）の太めのダッシュ線 */
.szn-fcard__body {
  flex: 1;
  background: #FEFEFE;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 30px;
  border: 3px dashed var(--szn-cream);
}
/* タイトル下を左に文章、右に写真の2カラムに分ける（空間づくりのカード） */
/* 左にタイトル＋文章、右に写真という2カラムのカード（空間づくり） */
.szn-fcard__body--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
/* 写真は大小2枚をずらして重ねる */
.szn-fcard__photos {
  position: relative;
  aspect-ratio: 4 / 3;
}
.szn-fcard__photo {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 30px;
}
.szn-fcard__photo:hover { opacity: 1; }
.szn-fcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.szn-fcard__photo--main {
  top: 0;
  left: 0;
  width: 82%;
  height: 78%;
}
/* 小さい方は右下に重ねる。白い縁を回して分離させる */
.szn-fcard__photo--sub {
  bottom: 0;
  right: 0;
  width: 54%;
  height: 54%;
  border: 6px solid #FEFEFE;
  box-shadow: 0 10px 28px rgba(70, 62, 51, 0.14);
}
.szn-fcard__title {
  margin: 0 0 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--szn-ink);
}
/* 見出し前の縦棒（角丸） */
.szn-fcard__bar {
  flex: none;
  width: 5px;
  height: 22px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--szn-olive);
}
.szn-fcard__text {
  margin: 0;
  font-size: 16px;
}
.szn-fcard__text + .szn-fcard__text { margin-top: 16px; }

@media (max-width: 1003px) {
  /* 3列だと1枚が細くなりすぎる幅から縦積みにする */
  .szn-hinatafeature { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .szn-fcard__title { font-size: 18px; }
  /* 文章と写真を縦に積む */
  .szn-fcard__body--2col { grid-template-columns: 1fr; }
}

/* -- メニュー -- */
.szn-menu {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 84px) 24px;
}
/* メニュー見出しは下線なし・中央ぞろえ。
   下に小見出し（pillラベル）が続くので、見出しとの間を広めに取る */
.szn-menuhead .heading__ja {
  margin-bottom: clamp(44px, 5vw, 64px);
}
/* 通常メニュー／夜メニューの小見出し。
   「Master's message」と同じ両脇に線が伸びる形で、線はドット（.szn-h2-dotted と同じ2px dotted）。
   中央のラベルはオリーブ地・白抜き・角丸。上下の余白は前後のスライダーと釣り合う量にする */
.szn-subhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto clamp(22px, 2.6vw, 30px);
  font-size: 17px;
  font-weight: 700;
}
.szn-subhead::before,
.szn-subhead::after {
  content: "";
  flex: 1;
  height: 0;
  border-bottom: 2px dotted var(--szn-sage);
}
.szn-subhead__label {
  flex: none;
  padding: 9px 34px;
  border-radius: 999px;
  background: var(--szn-olive);
  color: #FEFEFE;
  letter-spacing: 0.08em;
}
/* -- 横スライダー（メニュー／夜メニュー／店内の様子） --
   1画面に3枚。左右の丸矢印で1枚ずつ送る。送り量の計算は common.js 側 */
.szn-slider {
  --szn-slider-per: 3;
  /* 中央の1枚を拡大したときに隣と詰まらない程度に広めに取る */
  --szn-slider-gap: 28px;
  position: relative;
}
/* 中央の1枚を拡大する版（--center）で、拡大分が上下で切れないよう余白を取る */
.szn-slider__viewport { overflow: hidden; }
.szn-slider--center .szn-slider__viewport { padding: 16px 0; }
.szn-slider__track {
  display: flex;
  gap: var(--szn-slider-gap);
  transition: transform 0.45s ease;
  will-change: transform;
}
.szn-slider__slide {
  flex: 0 0 calc((100% - (var(--szn-slider-per) - 1) * var(--szn-slider-gap)) / var(--szn-slider-per));
  display: block;
}
.szn-slider__slide:hover { opacity: 0.85; }
/* 高さを揃えたいギャラリー用（店内の様子）。メニューは原寸比のまま */
.szn-slider__slide--fixed { height: 200px; }
/* 真ん中に来た1枚だけ大きく、両サイドは少し小さく
   （3枚見えているときだけ JS が is-center を付ける） */
.szn-slider--center .szn-slider__slide {
  transition: transform 0.45s ease;
  transform-origin: center center;
  transform: scale(0.88);
}
.szn-slider--center .szn-slider__slide.is-center {
  position: relative;
  z-index: 1;
  transform: scale(1.06);
}
.szn-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--szn-img-radius);
  border: 1px solid #EDEADF;
}
/* 丸矢印。写真の左右に半分だけ重ねて置く */
.szn-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--szn-olive);
  color: #FEFEFE;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(70, 62, 51, 0.22);
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
.szn-slider__nav:hover { background: var(--szn-olive-sub); }
.szn-slider__nav--prev { left: -14px; }
.szn-slider__nav--next { right: -14px; }
.szn-slider__nav:disabled { opacity: 0.3; cursor: default; }
/* 送る先が無い枚数のときは矢印を出さない */
.szn-slider.is-static .szn-slider__nav { display: none; }
@media (max-width: 896px) {
  .szn-slider { --szn-slider-per: 2; }
}
@media (max-width: 639px) {
  .szn-slider { --szn-slider-per: 1; }
  .szn-slider__nav { width: 34px; height: 34px; font-size: 13px; }
  .szn-slider__nav--prev { left: -6px; }
  .szn-slider__nav--next { right: -6px; }
}

.szn-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
/* 通常メニューと夜メニューの間はしっかり空けて、2つのまとまりを区切る */
.szn-menu__grid--mb { margin-bottom: clamp(64px, 8vw, 104px); }
.szn-menu__item { display: block; }
.szn-menu__item:hover { opacity: 0.85; }
.szn-menu__item img {
  width: 100%;
  height: auto;
  border-radius: var(--szn-img-radius);
  border: 1px solid #EDEADF;
}

/* -- 店舗情報 -- */
.szn-shopinfo__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
}
.szn-btn--wide { padding: 15px 34px; font-size: 1.5rem; }


/* ==========================================================================
   15. デザイン準拠の微調整
   ========================================================================== */

/* デザインは img { display:block }。共通CSSは vertical-align:bottom のため
   インライン扱いで行ボックスのストラット分（line-height 2 ＝ 32px）の高さが残る。
   メニュー画像など高さautoの画像がずれるため、デザインどおり block にする。 */
img { display: block; }

/* 営業カレンダーのボタンだけ文字色がオリーブ（フッターのクリームボタンは焦茶） */
.szn-shopinfo__btns .szn-btn--cream { color: var(--szn-olive); }
.szn-shopinfo__btns .szn-btn--cream:hover { color: var(--szn-olive); }

/* ==========================================================================
   16. 採用情報
   ========================================================================== */
.szn-recruitlead {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 84px) 24px;
}
.szn-recruitlead__catch {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--szn-olive);
}
.szn-recruitlead__title {
  margin: 0 0 22px;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--szn-ink);
}
.szn-illust--care {
  width: clamp(90px, 11vw, 140px);
  margin: clamp(20px, 2.5vw, 30px) auto clamp(22px, 2.8vw, 32px);
}

/* 上側だけ丸い「丘」型（採用の募集要項）
   フッターの margin-top:20px を打ち消し、下に白い余白を残さずフッターへ続ける */
.szn-roundsection--top {
  border-radius: 50% 50% 0 0 / 70px 70px 0 0;
  padding: clamp(72px, 9vw, 108px) 0 clamp(52px, 7vw, 84px);
  margin-bottom: -20px;
}
.szn-requirements {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.szn-requirements__foot { margin-top: clamp(32px, 4vw, 44px); }

/* 共通の grid-2 / grid-3 は 896px・639px で列数が切り替わるが、デザインは
   repeat(auto-fit, minmax(300px,1fr)) でカード幅300pxを下回った時点で折り返す。
   折り返し位置をデザインに合わせる。 */
.szn-intro__grid,
.szn-business__grid,
.szn-message__grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* お問い合わせのラッパーはセクション側で左右24pxを持つため、
   container-narrow の SP時 95% 縮小だけを打ち消す */
.szn-contact__inner { position: relative; z-index: 2; max-width: 900px; }

/* フォーム下の注記は他ページの注記より少し小さく */
.szn-form .szn-note { font-size: 12px; }

/* ==========================================================================
   17. スマートフォン（639px以下）の調整
   ========================================================================== */

/* SPだけ改行するための br（キャッチコピー等） */
.szn-br-sp { display: none; }

/* 署名は「社名」と「代表＋氏名」の単位で折り返す */
.szn-message__signname { display: inline-block; }

@media (max-width: 639px) {
  .szn-br-sp { display: inline; }

  /* -- ページヒーロー：タイトルの字間を詰めて画面内に収める -- */
  .szn-pagehero__title { letter-spacing: 0.1em; font-size: 14px; }

  /* -- お問い合わせ：CMSフォーム側の余白と二重になるため内側を詰める -- */
  .szn-contact { padding-left: 16px; padding-right: 16px; }
  .szn-form { padding: 20px 10px; border-radius: 20px; }

  /* -- ご利用の流れ：丸写真を左・テキストを右の横並びにして縦を詰める -- */
  .szn-flowsteps { gap: 18px; max-width: none; }
  .szn-flowsteps__item {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 16px;
    align-items: center;
    text-align: left;
  }
  .szn-flowsteps__figure {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 96px;
    margin-bottom: 0;
    border-width: 4px;
  }
  .szn-flowsteps__no {
    width: 32px;
    height: 32px;
    font-size: 13px;
    right: -2px;
    bottom: 0;
  }
  .szn-flowsteps__title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 16px;
  }
  .szn-flowsteps__text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 4px;
    font-size: 14px;
  }

  /* -- 写真ギャラリー：2列にして縦の長さを抑える -- */
  .szn-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .szn-gallery__item { height: 140px; }

  /* -- 本文横の写真は Komorebi（.szn-about2col__img）と高さを揃え、
        左下のロゴバッジとの大きさの釣り合いも2ページで同じにする -- */
  .szn-hinataintro__img,
  .szn-about2col__img {
    width: 100%;
    height: 220px;
  }

  /* -- 事業所概要／店舗情報のボタンは全幅で押しやすく -- */
  .szn-shopinfo__btns .szn-btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   18. タブレット（896px以下）の調整
   ========================================================================== */
@media (max-width: 896px) {
  /* 会社概要：2カラムだと表の内容列が狭くなり住所が細かく折り返すため1カラムに */
  .szn-company__grid { grid-template-columns: 1fr; }
}

/* -- 店内の様子：左に写真（3列）・右に動画を並べる -- */
/* 左のギャラリーを少し大きめに。動画は行の高さいっぱいに伸ばして縦幅を揃える */
.szn-cafegrid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}
/* 店内の様子：大きい画像＋下に小窓3カラム（小窓を選ぶと大窓に反映） */
.szn-mainview__stage {
  display: block;
  width: 100%;
  /* 大窓は高さを抑えめにして、そのぶん小窓を大きく見せる */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--szn-img-radius);
  margin-bottom: 14px;
}
.szn-mainview__stage:hover { opacity: 1; }
.szn-mainview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 小窓の並びはスライダー側（.szn-slider）に任せ、間隔だけ詰める */
.szn-mainview__thumbs { --szn-slider-gap: 10px; }
.szn-mainview__thumb {
  height: 160px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.szn-mainview__thumb.is-active { opacity: 1; }
.szn-mainview__thumb.is-active img { border-color: var(--szn-olive); }
@media (max-width: 639px) {
  /* スマホでも小窓は2つ横並びにする（.szn-slider の1枚表示より優先させるため
     クラスを2つ重ねて指定する） */
  .szn-slider.szn-mainview__thumbs { --szn-slider-per: 2; }
  .szn-mainview__thumb { height: 110px; }
}

/* 動画は縦書きの「Event」と横並び。左のギャラリーと縦幅を揃える */
.szn-cafegrid__video {
  display: flex;
  align-items: stretch;
  gap: 12px;
  height: 100%;
}
.szn-video__label {
  flex: none;
  order: 2;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: "Edu SA Hand", cursive;
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--szn-olive);
}
.szn-video__box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 音楽イベントの動画（576×720の縦動画）。
   左のギャラリーと縦幅を合わせるため、高さは行に追従させる */
.szn-video__player {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--szn-img-radius);
  background: var(--szn-ink);
}
.szn-video__title {
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--szn-ink);
  text-align: center;
}

@media (max-width: 896px) {
  /* 写真を上に、動画をその下に */
  .szn-cafegrid { grid-template-columns: 1fr; gap: 24px; }
  .szn-cafegrid__video { max-width: 340px; margin: 0 auto; }
}

/* ==========================================================================
   19. スタッフ／みんなの様子（coming soon）
   ========================================================================== */



/* スタッフの様子：coming soon 画像は切り抜かず全体を見せる */
.szn-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.szn-gallery__item--soon img { object-fit: contain; background: #F7F8F1; }

@media (max-width: 896px) {
  .szn-gallery--4 { grid-template-columns: repeat(2, 1fr); }
}

/* 3枚目（コーヒー）は2段目に単独で置く */
@media (max-width: 639px) {
  .szn-hinatafeature { grid-template-columns: 1fr; }
}

/* ボタン内のアイコン（Instagram等） */
.szn-btn i { margin-right: 8px; font-size: 1.15em; }

/* ==========================================================================
   20. 画面右端に固定する営業カレンダーのタブ
   ========================================================================== */
.szn-caltab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  writing-mode: vertical-rl;
  cursor: pointer;
  border: 0;
  padding: 24px 25px;
  border-radius: 20px 20px 0 20px;
  background: var(--szn-olive);
  color: #FEFEFE;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  box-shadow: -2px 2px 12px rgba(70, 62, 51, 0.2);
  transition: background-color 0.3s ease, padding-right 0.3s ease;
}
.szn-caltab:hover {
  background: var(--szn-olive-sub);
  padding-right: 29px;
}
@media (max-width: 639px) {
}


/* マスターの想いと3カードを同じ背景の中に収める */
.szn-master__inner { margin-bottom: clamp(48px, 6vw, 72px); }
.szn-hinatafeature { position: relative; z-index: 2; }

/* ==========================================================================
   21. スクロールで表示するアニメーション（TOPページ）
   JSが無効なときは noscript 側で打ち消して常に表示する
   ========================================================================== */
.szn-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.szn-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* 並びに時間差をつける */
.szn-reveal--d1 { transition-delay: 0.12s; }
.szn-reveal--d2 { transition-delay: 0.24s; }
.szn-reveal--d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .szn-mv { animation: none; }
  .szn-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* SPではパターンをもう少し小さく控えめに。位置は写真の右下。
   height を % で指定すると楕円になり、写真の下端で切られた帯に見えるので
   aspect-ratio（正円）のまま、写真の右下の角から覗かせる */
@media (max-width: 639px) {
  .szn-photostack__pattern {
    width: min(38%, 150px);
    height: auto;
    background-size: 200px 150px;
    left: auto;
    right: -14px;
    bottom: -34px;
  }
}

/* ==========================================================================
   22. SP：画面下の固定ボタン（営業カレンダー / お問い合わせ）
   ========================================================================== */
.szn-fixed-bar {
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  gap: 8px;
  background: rgba(254, 254, 254, 0.96);
  border-top: 1px solid #EDEADF;
}
.szn-fixed-bar__btn {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 700;
  line-height: 1.4;
  padding: 13px 6px;
  white-space: nowrap;
  border-radius: 999px;
  text-align: center;
}
.szn-fixed-bar__btn i { margin-right: 5px; font-size: 0.95em; }
.szn-fixed-bar__btn--cal {
  background: var(--szn-cream);
  color: var(--szn-olive);
}
.szn-fixed-bar__btn--contact {
  background: var(--szn-olive);
  color: #FEFEFE;
}
.szn-fixed-bar__btn--contact:hover { color: #FEFEFE; opacity: 1; }

/* 縦タブを消して固定バーを出す指定は 1100px 以下でまとめて行う（27〜28章） */
@media (max-width: 639px) {
  /* リード文はSPでは左揃え */
  .szn-lead { text-align: left; }
}

/* ==========================================================================
   23. SP：本文の字送りとページヒーローの高さ
   ========================================================================== */
@media (max-width: 639px) {
  /* 本文は15px。字間も詰めて1行に入る文字数を増やす */
  body {
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.01em;
  }
  /* px 固定で書いている本文クラスも 14px に揃える（見出し・キャッチは対象外） */
  .szn-lead,
  .szn-table th,
  .szn-table td,
  .szn-flowsteps__text,
  .szn-timeline__year,
  .szn-timeline__text,
  .szn-about2col__emphasis,
  .szn-checklist__text,
  .szn-servicecard__text,
  .szn-pointcard p,
  .szn-dashedbox p,
  .szn-photocta__text,
  .szn-fcard__text,
  .szn-footer__street,
  .szn-footer__tel-num--fax {
    font-size: 14px;
  }
  /* ページヒーローの高さを30%縮小（260px → 182px） */
  .szn-pagehero__figure { height: 182px; }
}

/* ==========================================================================
   24. SP：白ボックス（こんなときにご相談ください）のバランス調整
   ========================================================================== */
@media (max-width: 639px) {
  .szn-whitebox {
    padding: 22px 16px;
    border-radius: 22px;
  }
  /* 箱内の見出しは一段小さく・行間も詰める */
  .szn-h2-dotted--sm {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
  .szn-checklist { gap: 10px; }
  .szn-checklist__item {
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
  }
  .szn-checklist__mark {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    font-size: 12px;
  }
  .szn-checklist__text {
    font-size: 14px;
    line-height: 1.8;
  }
}

/* ==========================================================================
   25. SP：つぐみ会ボックスのバランス調整
   ========================================================================== */
@media (max-width: 639px) {
  /* 親（wavesection__inner）の左右20pxと二重になるので内側の余白は外す */
  .szn-tsugumikai {
    padding: 0;
    margin-top: 24px;
  }
  .szn-dashedbox {
    padding: 20px 16px;
    border-radius: 20px;
  }
  .szn-dashedbox__en { font-size: 13px; }
  .szn-dashedbox .szn-dashedbox__title {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 12px;
  }
  .szn-dashedbox p {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .szn-dashedbox p:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   26. SP：波線は緩やかに・盛り上がりを2つに
   （同じSVG内にPC用／SP用のパスを持たせて表示を切り替える）
   ========================================================================== */
.szn-wave__sp { display: none; }

@media (max-width: 639px) {
  .szn-wave__pc { display: none; }
  .szn-wave__sp { display: block; }
  .szn-wave { height: 22px; }
}

/* -- ヘッダー右のアイコン（Instagram / お問い合わせ） -- */
.szn-header__sns { gap: 8px; }
.szn-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--szn-olive);
  color: #FEFEFE;
  font-size: 15px;
  transition: background-color 0.3s ease;
}
.szn-header__icon:hover {
  background: var(--szn-olive-sub);
  color: #FEFEFE;
  opacity: 1;
}

/* ==========================================================================
   27. ヘッダー：ナビが2段に折り返す手前（〜1320px）で1段に収める
   共通CSSのハンバーガー切替は1100pxなので、そこまで1段を保てる寸法に詰める
   ========================================================================== */
@media (max-width: 1320px) {
  .szn-header__inner { padding: 14px 16px; gap: 14px; }
  .szn-logo__name { font-size: 20px; }
  .szn-nav__item { padding-left: 10px; }
  .szn-nav__item > a { padding: 10px 6px; }
  .szn-nav__ja { font-size: 13.5px; }
  .szn-header__sns { gap: 6px; }
  .szn-header__icon { width: 30px; height: 30px; font-size: 14px; }
  .szn-header__inner::before { flex-basis: 66px; }
}

/* ==========================================================================
   28. タブレット（640〜1100px）
   ハンバーガーが出る幅からは、右端の縦タブをやめて画面下の固定バーに寄せる
   ========================================================================== */
@media (max-width: 1100px) {
  /* ハンバーガーに切り替わりナビが消えるので、中央合わせ用のダミー余白も外す */
  .szn-header__inner::before { display: none; }
  /* ハンバーガーが出たら右端の縦タブは出さない（下の固定バーに集約） */
  .szn-caltab { display: none; }
  .sp-fixed-bar { display: flex; }
  /* 固定バーの分だけフッター下端とページトップボタンの位置をずらす */
  .szn-footer { padding-bottom: 96px; }
  .szn-page-top { bottom: 84px; }
}
/* タブレットでは固定バーが横に伸びすぎないよう中央に寄せる（SPは全幅のまま） */
@media (max-width: 1100px) and (min-width: 640px) {
  .szn-fixed-bar { max-width: 560px; margin: 0 auto; border-radius: 22px 22px 0 0; }
  .szn-fixed-bar__btn { font-size: 13px; }
}

/* 事業リンクカードは3枚なので、2カラムだと最後の1枚が余る。
   タブレットでも3カラムのまま、写真と文字を一段小さくして収める */
/* 1003px 以下で auto-fit が2列に落ちるため、そこから 640px までを対象にする */
@media (max-width: 1003px) and (min-width: 640px) {
  .szn-business { padding: clamp(96px, 14vw, 150px) 0 clamp(48px, 7vw, 72px); }
  .szn-business__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .szn-linkcard__figure { border-width: 5px; }
  .szn-linkcard__more { font-size: 13px; }
  .szn-linkcard__body { padding: 16px 0 0; gap: 6px; }
  /* 名前が2行に折り返すカードがあるため、ピルの高さを揃えて下の一文の位置を合わせる */
  .szn-linkcard__name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.5;
  }
  .szn-linkcard__title { font-size: 13px; }

  /* 導入の写真重ね：柄タイルが写真より下へはみ出すのでサイズと位置を詰める */
  .szn-photostack__pattern {
    width: min(44%, 260px);
    height: 40%;
    background-size: 240px 180px;
    left: -12px;
    bottom: 0;
  }

  /* ご利用の流れは5ステップ。余った1〜2枚が左端に寄って見えるので、
     折り返した行を中央に揃える（項目幅は固定してPCの見た目を保つ） */
  .szn-flowsteps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .szn-flowsteps__item { flex: 0 1 176px; }
}