/* ============================================================
   はるひ薬局 — 補助スタイル
   ベースのユーティリティは Tailwind（css/tailwind.css。設定は tailwind.config.js）。
   このファイルは tailwind.css の *あと* に読み込まれる。
   ここには「繰り返し使うコンポーネント」と「動き」だけを置く。
   ============================================================ */

:root {
  --kiyo-50:  #F2F8FA;
  --kiyo-100: #E3F0F4;
  --kiyo-200: #C6E1E9;
  --kiyo-300: #8FC5D6;
  /* .notice-list の行頭ドットが使う。未定義のままドットが透明になっていた（2026-08-27 修正）。
     値は各HTMLの tailwind.config の colors.kiyo.400 と同じ。 */
  --kiyo-400: #5AA7C0;
  --kiyo-500: #2E8BA8;
  --kiyo-700: #17607A;
  --kiyo-800: #124C60;
  --kiyo-900: #0F3B4C;
  --warm-50:  #FDF7F3;
  --warm-300: #F2C6AC;
  --warm-400: #E9AA88;
  --warm-500: #E0906A;
  --warm-600: #C97650;
  --ink:      #223037;
  --ink-soft: #4A5C64;
  --ink-light:#83959C;
  --base:     #FBFAF7;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  /* 和文の可読性を優先した字送り */
  letter-spacing: 0.02em;
}

::selection {
  background: var(--kiyo-200);
  color: var(--kiyo-900);
}

/* フォーカスリング（キーボード操作時のみ） */
:focus-visible {
  outline: 2px solid var(--kiyo-500);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  /* 画像差し替え時に崩れないよう保険 */
  max-width: 100%;
  height: auto;
}


/* ------------------------------------------------------------
   本文カラーの打ち消し

   tailwind.config の colors.base（#FBFAF7）は背景用のつもりだが、
   Tailwind は同じ名前で「文字色」ユーティリティ .text-base も作る。
   これが標準のフォントサイズ用 .text-base と衝突するため、
   sm: 以上で sm:text-base が付いた要素の文字色が背景色になり、
   メインビジュアルの本文が真っ白で読めなくなっていた。

   クラスを重ねて詳細度を上げ、意図した本文カラーを明示的に戻す。
   （読み込み順に左右されないよう !important は使わない）
   ------------------------------------------------------------ */

.text-ink-soft.text-ink-soft {
  color: var(--ink-soft);
}


/* ------------------------------------------------------------
   見出し補助
   ------------------------------------------------------------ */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--kiyo-700);
}

.section-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--warm-400);
}


/* ------------------------------------------------------------
   ロゴ（文字組みのワードマーク）

   2026-09-29 変更：ヘッダー・フッターにあった四角いロゴマーク（SVG）をやめ、
   「はるひ薬局」の文字だけで見せる形にした。
   文字の並び（和文名を上、欧文＋所在地を下）は今までと同じで、
   ・明朝（Shippori Mincho）
   ・字間を広く（和文 .18em ／ 欧文 .3em 前後）
   ・ウェイトは 600（太すぎず、細すぎず）
   にそろえて上品に見えるようにしている。

   ★ 元のロゴマークに戻すには
     各HTMLの <!-- ロゴマーク（2026-09-29 に非表示）… --> のコメントを外し、
     このワードマークの <span class="brand__text"> を
     もとの <span class="leading-tight"> … </span> に戻してください。
     （HTML側にも同じ手順をコメントで書いてあります）
   ------------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand__text {
  display: block;
  min-width: 0;
}

.brand__name {
  display: block;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  /* 明朝は字間を空けるほど落ち着いて見える。
     ただし letter-spacing は最後の1文字の右にも入るので、
     同じ分だけ margin-right で戻して左右の重心をそろえる。 */
  letter-spacing: .18em;
  margin-right: -.18em;
  color: var(--kiyo-900);
  white-space: nowrap;
  transition: color .25s ease;
}

@media (min-width: 640px) {
  .brand__name { font-size: 22px; }
}

.brand__en {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .26em;
  margin-right: -.26em;
  color: var(--ink-light);
  white-space: nowrap;
}

/* 和文名と欧文ラベルのあいだの細い罫。装飾はこの1本だけにとどめる */
.brand__en::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  margin-right: 9px;
  vertical-align: 3px;
  background: var(--warm-400);
}

.brand:hover .brand__name { color: var(--kiyo-700); }

/* フッターは背景が淡いので、欧文ラベルを少しだけ強く */
.brand--footer .brand__name { font-size: 21px; }
.brand--footer .brand__en { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .brand__name { transition: none; }
}


/* ------------------------------------------------------------
   外部サービスのボタン・リンク（各社のイメージカラー）

   公式LINE / EPARKくすりの窓口 / melmo（メルモ）/ Instagram は、
   利用者がアプリ側で見慣れている色に合わせたほうが迷わない。
   サイトの配色（kiyo / warm）ではなく、各社のコーポレートカラーを使う。
   ------------------------------------------------------------ */

.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 59, 76, .06);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

@media (min-width: 640px) {
  .btn-brand { padding: 12px 18px; }
}

.btn-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 59, 76, .14);
}

.btn-brand__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

/* LINE グリーン（LINEヤフー公式 #06C755） */
.btn-line { background: #06C755; border-color: #06C755; }
.btn-line:hover { background: #05B24C; border-color: #05B24C; }

/* EPARK くすりの窓口（黄緑 #82C341 ／ ホバーで #74B828） */
.btn-epark { background: #82C341; border-color: #82C341; }
.btn-epark:hover { background: #74B828; border-color: #74B828; }

/* melmo（メルモ／旧CLINICS）レッド #E60012 */
.btn-melmo { background: #E60012; border-color: #E60012; }
.btn-melmo:hover { background: #C50010; border-color: #C50010; }

/* Instagram は単色がないので公式のグラデーションで表す */
.btn-instagram {
  background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%);
  border-color: transparent;
}

.btn-instagram:hover {
  background: linear-gradient(45deg, #EFBE24 0%, #DE1A6B 52%, #5218C7 100%);
}

/* 濃紺の面（採用ページ）に置くとき、影が沈んで見えないので少し浮かせる */
.btn-brand--on-dark { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }

@media (prefers-reduced-motion: reduce) {
  .btn-brand { transition: none; }
  .btn-brand:hover { transform: none; }
}


/* テキストリンク版（フッターの公式Instagram など）。
   アイコンだけを各社の色にして、文字はサイトの色のままにする。 */

.link-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
  transition: color .25s ease;
}

.link-brand:hover { color: var(--kiyo-800); }

.link-brand__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  color: #fff;
  border-radius: 8px;
}

.link-brand__icon svg { width: 15px; height: 15px; }

.link-instagram .link-brand__icon {
  background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%);
}

.link-line .link-brand__icon { background: #06C755; }


/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */

.nav-link {
  position: relative;
  color: var(--ink-soft);
  transition: color .25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--warm-400);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}

/* .is-active は js/main.js が付けるトップページ内の現在地。
   aria-current="page" は別ページ（recruit.html など）が自分自身を示すときに使う。 */
.nav-link:hover,
.nav-link.is-active,
.nav-link[aria-current="page"] {
  color: var(--kiyo-800);
}

.nav-link:hover::after,
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

#site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(15, 59, 76, .06), 0 10px 30px -18px rgba(15, 59, 76, .35);
}


/* ------------------------------------------------------------
   メインビジュアルの背景写真

   PC（640px以上）はこれまでどおり、セクション全体に写真を敷く。

   スマホ（〜639px）は作りを変えている（2026-09-29）。
   ------------------------------------------------------------
   スマホではメインビジュアルの枠が非常に縦長になる（見出し・本文・
   ボタン・4つの特徴カードが縦に積まれるため、1500px を超える）。
   そこへ 3:4 の写真を object-fit: cover で敷くと、高さを合わせるために
   横方向が3倍以上に拡大され、写真の真ん中の壁しか映らない
   ＝「何の建物か分からない」状態になっていた。

   そこで、スマホでは写真をセクション全体ではなく
   「上部の帯」として置き、そこから下は地の色へ自然に溶かす。

   さらに 2026-09-29、その帯の中で写真を少し大きく描いて上端ぞろえにし、
   壁の青い「はるひ薬局」の看板がキャッチコピーの背後に重ならないよう
   下へ送っている（理由と数値は下の .hero-media img のコメントを参照）。
   ------------------------------------------------------------ */

.hero-media {
  position: absolute;
  inset: 0;
}

/* 写真の上に重ねる幕。文字の可読性を確保しつつ、写真を残す */
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ※ この切り替えは 639px（640px未満）で行う。
   index.html の <picture> が「640px未満のときだけ縦位置の写真に差し替える」指定に
   なっているため、そこと境界をそろえる必要がある。
   640〜768px は横位置の写真（object-position 76% 50%）が使われ、
   見出しは左半分に収まるので看板とは重ならない。 */
@media (max-width: 639px) {
  .hero-media {
    /* 下端の固定をやめ、上寄せの帯にする */
    bottom: auto;
    /* 帯の高さは画面の高さに連動させず固定値にしている。
       キャッチコピーはスマホでは文字サイズが固定なので、帯（＝写真の置き場所）も
       固定にしないと、画面の高さによって看板の位置がずれて文字に重なってしまうため。 */
    height: 700px;
    /* 写真を帯からはみ出させて置くので、あふれた分を隠す */
    overflow: hidden;

    /* ------------------------------------------------------------
       帯の上部を受け持つ背景（2026-09-29）

       写真そのものは下の img で 270px ぶん下げてある。
       その空いた上部＝キャッチコピーの背面を、このグラデーションが埋める。

       PC版の見え方（写真の空に白い幕を重ねて、ほぼ白〜淡い水色に
       見えている状態）に合わせて、白から薄い水色へ静かに変化させる。
       写真との境目は、下の img のマスク（上端をぼかす指定）が受け持つので、
       ここで写真の色に合わせる必要はない。
       ------------------------------------------------------------ */
    background: linear-gradient(
      to bottom,
      #FFFFFF 0%,
      #F7FCFE 15%,
      #DCEFFA 27%,
      #B7DCF2 38%,
      #9CCFEC 62%,
      #86C5E8 100%
    );
  }

  /* ------------------------------------------------------------
     写真の位置（2026-09-29）

     キャッチコピー（この街で、ずっと。／暮らしのそばにある／薬局へ。）の
     背後を完全に空だけにし、建物と壁の青い看板はその下の説明文
     （清洲に生まれ、師勝で育った薬剤師が〜）の背景に来るようにしている。

     写真は拡大も切り抜きもせず、まるごと 230px 下へ送るだけ。
     ・230px … 帯の上端から数えた送り量。
       これで写真の始まりが見出しの最終行の直下（画面で約360px）になり、
       屋根の輪郭は説明文の1〜2行目あたり（同 約420px）、
       壁の青い看板は説明文の後半（同 約525〜585px）に収まる。
       ※ index.html の見出しブロックの上余白（スマホは pt-10 ＝ 40px）と
         連動しています。片方だけ変えると位置関係がずれます。
     ・aspect-ratio … 写真の実寸比（706:941）。幅に合わせて高さが決まるので、
       端末の幅が変わっても構図の比率は崩れない。
     ・mask-image … 写真の上端 120px を透明から不透明へ変化させ、
       上の淡いグラデーションへ溶け込ませる。
       これがないと、淡い水色から写真の濃い空へ切り替わる線が見えてしまう。
       （＝背景側を写真の色に合わせる必要がなくなり、
         キャッチコピーの背面を自由に淡くできる）

     ★ キャッチコピーの行数・文字サイズ・上の余白（pt-20）を変えると
       看板や屋根の位置関係も変わります。
       変更したら 360／390／430px 幅で必ず確認してください。
     ------------------------------------------------------------ */
  .hero-media img {
    margin-top: 230px;
    width: 100%;
    height: auto;
    aspect-ratio: 706 / 941;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 120px);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 120px);
  }

  /* 縦のグラデーション（白い幕）。
     キャッチコピーの背面（〜30%）は淡いグラデーションをそのまま活かしたいので薄く、
     説明文が始まるあたり（38%〜）で一気に濃くして、写真と壁の看板を
     うっすらとした透かしの濃さまで落とす。文字が読みやすいことを優先する。
     帯の下端は地の色と完全に同じにして境目を消す。

     2026-09-29：説明文に写真が重なって読みにくかったため、
     38%以降の幕を .40 → .62〜.84 へ引き上げた（写真の見え方は約5割→約2割）。
     写真をもう少し見せたい場合は 38〜66% の値を下げてください。 */
  .hero-scrim--v {
    background: linear-gradient(
      to bottom,
      rgba(251, 250, 247, .14) 0%,
      rgba(251, 250, 247, .22) 30%,
      rgba(251, 250, 247, .70) 38%,
      rgba(251, 250, 247, .84) 50%,
      rgba(251, 250, 247, .87) 68%,
      rgba(251, 250, 247, .94) 85%,
      var(--base) 100%
    );
  }

  /* ※ 営業状況の下の注意書き（.open-note）は、この下でまとめて指定している。
     .open-note の定義がこのメディアクエリより後ろにあるため、
     ここに書いても上書きされてしまうので注意。 */

  /* 横方向のグラデーションは、PCで左側に文字を置くための処理。
     スマホでは左右いっぱいに文字が来るので不要（写真が暗くなるだけ）。 */
  .hero-scrim--h { display: none; }
}


/* ------------------------------------------------------------
   営業状況の下に出す注意書き（自動判定に関する免責）

   「ただいま営業中です」の表示は js/main.js が端末の時計から機械的に
   判定しているだけなので、臨時休業や時間変更は反映できない。
   その断りを、営業状況バッジのすぐ真下に置いている。

   2026-09-29：いったん白い囲み枠（白地・枠線・角丸）を付けたが、
   同日のご指示により枠は外し、背景なしのテキストだけに戻した。
   ★ 囲み枠は付けないこと。

   枠がなくても読めるよう、次の2点は維持している。
   ・文字サイズ 13px は本文（15.5px）の約84%。
     小さくしすぎず、免責として確実に読める大きさにしてある。
   ・色は本文と同じ --ink-soft。薄いグレーだと読み落とされるため。
   （スマホでは写真の上に乗るが、写真は白い幕でうっすらまで落としてあるので
     背景なしでも読める。幕の値は .hero-scrim--v を参照）
   ------------------------------------------------------------ */

.open-note {
  margin-top: 12px;
  max-width: 34em;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-soft);
}


/* ------------------------------------------------------------
   「こんなときに」カード
   ------------------------------------------------------------ */

.scene-card {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 30px;
  background: #fff;
  border: 1px solid var(--kiyo-100);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(15,59,76,.04), 0 12px 32px -14px rgba(15,59,76,.14);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}

.scene-card::before {
  /* 右上のやわらかな光 */
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(226,169,136,.28), transparent 70%);
  pointer-events: none;
}

.scene-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(15,59,76,.05), 0 26px 50px -22px rgba(15,59,76,.30);
}

.scene-num {
  font-family: "Shippori Mincho", serif;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--warm-600);
}

.scene-title {
  margin-top: 12px;
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  line-height: 1.65;
  letter-spacing: .03em;
  color: var(--kiyo-900);
}

.scene-body {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-soft);
}


/* ------------------------------------------------------------
   サービス（画像 + 本文の交互レイアウト）
   ------------------------------------------------------------ */

.service-row {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--kiyo-100);
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(15,59,76,.04), 0 14px 36px -18px rgba(15,59,76,.18);
}

.service-media {
  position: relative;
  min-height: 220px;
  background: var(--kiyo-50);
}

.service-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* 写真の中に文字や見せたい要素があり、トリミングしたくない場合に付ける。
   列いっぱいに引き伸ばさず、本来の縦横比のまま上寄せで置く。
   （object-fit: contain と違い、写真の上下に余白の帯ができない） */
.service-media--top {
  align-self: start;
  min-height: 0;
  background: transparent;
}

.service-media--top img {
  height: auto;
  width: 100%;
  object-fit: contain;
}

.service-media__caption {
  padding: 14px 26px 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-light);
}

@media (min-width: 900px) {
  .service-media__caption {
    padding: 16px 0 0 48px;
  }
}

.service-body {
  padding: 32px 26px 36px;
}

.service-index {
  font-family: "Shippori Mincho", serif;
  font-size: 13px;
  letter-spacing: .24em;
  color: var(--warm-600);
}

.service-title {
  margin-top: 10px;
  font-family: "Shippori Mincho", serif;
  font-size: 25px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--kiyo-900);
}

.service-text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 2.05;
  color: var(--ink-soft);
}

.service-points {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.service-points li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.service-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--warm-400);
}

.service-steps {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.service-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--kiyo-50);
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.service-steps li span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--kiyo-700);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

@media (min-width: 900px) {
  .service-row {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: stretch;
  }
  .service-body {
    padding: 48px 48px 52px;
  }
  /* 偶数行は画像を右に */
  .service-row--reverse .service-media { order: 2; }
  .service-row--reverse .service-body  { order: 1; }
}


/* ------------------------------------------------------------
   手順リスト（見出し＋説明の2行構成。service-steps より情報量が多い場合）
   ------------------------------------------------------------ */

.flow-steps {
  display: grid;
  gap: 10px;
}

.flow-steps li {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--kiyo-50);
  border-radius: 16px;
}

.flow-steps li > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--kiyo-700);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.flow-steps b {
  display: block;
  font-size: 14.5px;
  letter-spacing: .02em;
  color: var(--kiyo-900);
}

.flow-steps p {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}


/* ------------------------------------------------------------
   そのほかの対応（小カード）
   ------------------------------------------------------------ */

.mini-card {
  padding: 22px 22px 24px;
  background: var(--kiyo-50);
  border: 1px solid var(--kiyo-100);
  border-radius: 20px;
  transition: background .3s ease;
}

.mini-card:hover { background: #fff; }

.mini-card h4 {
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  letter-spacing: .03em;
  color: var(--kiyo-900);
}

.mini-card p {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}


/* ------------------------------------------------------------
   緊急避妊薬のアコーディオン

   目立たせすぎず、必要な方が自分で開ける見せ方にする。
   details/summary なので JS なしでも開閉・キーボード操作ができる。
   ------------------------------------------------------------ */

.ec > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;          /* 標準の三角マーカーを消す */
  transition: background .3s ease;
}

/* Safari / 旧 Chrome 用 */
.ec > summary::-webkit-details-marker { display: none; }

.ec > summary:hover { background: var(--kiyo-50); }

.ec-summary__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ec-summary__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--kiyo-700);
}

.ec-summary__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm-500);
}

.ec-summary__title {
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .03em;
  color: var(--kiyo-900);
}

.ec-summary__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--kiyo-700);
}

/* 開閉のラベルは CSS 側で出し分ける（HTMLに両方の文言を持たせない） */
.ec-summary__toggle-text::after { content: "くわしく見る"; }
.ec[open] .ec-summary__toggle-text::after { content: "閉じる"; }

.ec-summary__icon {
  width: 18px;
  height: 18px;
  transition: transform .3s ease;
}

.ec[open] .ec-summary__icon { transform: rotate(180deg); }

@media (max-width: 639px) {
  .ec > summary { padding: 20px; }
  .ec-summary__title { font-size: 15.5px; }
  /* 幅が足りないので、開閉ラベルは矢印だけにする */
  .ec-summary__toggle-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ec > summary,
  .ec-summary__icon { transition: none; }
}


/* ------------------------------------------------------------
   お問い合わせ — 電話・公式LINEのご案内　【現在は未使用】

   フォームの送信先が決まるまでの暫定表示として 2026-08-31 に作ったが、
   同日フォーム表示に戻したため、いまはどのHTMLからも使われていない。
   また出したくなったときのために残してある（下のHTMLを
   index.html のお問い合わせセクション、<form> の直前に置けば表示される）。

   <div data-reveal data-reveal-delay="160" class="contact-notice mt-9">
     <p class="contact-notice__title"><span class="inline-block">お電話または公式LINEで</span><span class="inline-block">お問い合わせください</span></p>
     <p class="contact-notice__body">ただいまメールフォームをご用意している最中です。……</p>
     <div class="contact-notice__actions">
       <a href="tel:0529087288" class="contact-notice__btn contact-notice__btn--primary">
         <span class="contact-notice__btn-label">お電話でのお問い合わせ</span>
         <span class="contact-notice__btn-tel">052-908-7288</span>
       </a>
       <a href="https://page.line.me/595cavfx" target="_blank" rel="noopener" class="contact-notice__btn">
         <span class="contact-notice__btn-label">公式LINE</span>
         <span class="contact-notice__btn-tel">LINEで問い合わせる</span>
       </a>
     </div>
     <p class="contact-notice__hours">受付時間　月〜金 8:30–17:00／土 8:30–13:00／日・祝 10:00–17:00（年中無休）</p>
   </div>
   ------------------------------------------------------------ */

.contact-notice {
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--kiyo-100);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15,59,76,.04), 0 10px 26px -18px rgba(15,59,76,.16);
}

@media (min-width: 640px) {
  .contact-notice { padding: 34px 36px; }
}

.contact-notice__title {
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--kiyo-900);
}

@media (min-width: 640px) {
  .contact-notice__title { font-size: 22px; }
}

.contact-notice__body {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 2;
  color: var(--ink-soft);
}

.contact-notice__actions {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

@media (min-width: 640px) {
  .contact-notice__actions { grid-template-columns: 1fr 1fr; }
}

/* 押しやすさを優先して、ラベルと本文を積んだ大きめのボタンにする */
.contact-notice__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 18px;
  text-align: center;
  border: 1px solid var(--kiyo-300);
  border-radius: 16px;
  color: var(--kiyo-800);
  transition: background .25s ease, border-color .25s ease;
}

.contact-notice__btn:hover { background: var(--kiyo-50); }

.contact-notice__btn--primary {
  color: #fff;
  background: var(--kiyo-700);
  border-color: var(--kiyo-700);
}

.contact-notice__btn--primary:hover {
  background: var(--kiyo-800);
  border-color: var(--kiyo-800);
}

.contact-notice__btn-label {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-light);
}

.contact-notice__btn--primary .contact-notice__btn-label { color: rgba(255,255,255,.75); }

.contact-notice__btn-tel {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .03em;
}

.contact-notice__hours {
  margin-top: 20px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-light);
}


/* ------------------------------------------------------------
   お問い合わせフォーム
   ------------------------------------------------------------ */

.contact-form {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--kiyo-100);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15,59,76,.04), 0 10px 26px -18px rgba(15,59,76,.16);
}

@media (min-width: 640px) {
  .contact-form { padding: 26px 28px; }
}

.contact-form__grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 768px) {
  .contact-form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field label {
  display: block;
  margin-bottom: 5px;
  /* 「必須」バッジの有無で行の高さが変わらないよう固定する（左右の入力欄の頭を揃える） */
  min-height: 19px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--kiyo-900);
}

.field__required {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--warm-500);
  border-radius: 999px;
  vertical-align: middle;
}

.field__note {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-light);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 9px 13px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--kiyo-50);
  border: 1px solid var(--kiyo-100);
  border-radius: 11px;
  transition: border-color .25s ease, background .25s ease;
}

.field textarea { resize: vertical; min-height: 96px; }

/* スマホでは指で押しやすい高さ（約44px）を確保する */
@media (max-width: 639px) {
  .field input,
  .field select { padding: 11px 13px; }
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-light); }

.field input:hover,
.field select:hover,
.field textarea:hover { background: #fff; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #fff;
  border-color: var(--kiyo-300);
  outline: 2px solid var(--kiyo-500);
  outline-offset: 1px;
}

/* 入力後にエラーがある項目だけ色を変える（初期表示では出さない） */
.contact-form.is-validated .field input:invalid,
.contact-form.is-validated .field select:invalid,
.contact-form.is-validated .field textarea:invalid {
  border-color: #C0553C;
  background: #FDF6F4;
}

/* 迷惑送信よけ。読み上げ・タブ移動からも外す */
.contact-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--kiyo-50);
  border-radius: 13px;
}

.contact-form__consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--kiyo-700);
}

.contact-form__consent label {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  cursor: pointer;
}

.contact-form__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .contact-form__actions {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--kiyo-700);
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.contact-form__submit:hover {
  background: var(--kiyo-800);
  transform: translateY(-1px);
}

.contact-form__submit[disabled] {
  opacity: .6;
  cursor: progress;
  transform: none;
}

.contact-form__hint {
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-light);
}

.contact-form__status {
  white-space: pre-line;  /* メッセージ中の \n を改行として出す */
  margin-top: 16px;
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.8;
  border-radius: 12px;
}

.contact-form__status[data-state="error"] {
  color: #8C3A24;
  background: #FBEDE4;
}

.contact-form__status[data-state="ok"] {
  color: var(--kiyo-800);
  background: var(--kiyo-50);
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .field select,
  .field textarea,
  .contact-form__submit { transition: none; }
  .contact-form__submit:hover { transform: none; }
}


/* ------------------------------------------------------------
   採用カード（index.html の「採用」）

   濃紺の帯の上に置く白いカード。条件面は情報量が多いので、
   「時給 → キャッチ → ポイント → 詳細 → 待遇」の順に、
   上ほど文字を大きく、下ほど淡くして視線が流れるようにする。
   ------------------------------------------------------------ */

.job-card {
  display: flex;
  flex-direction: column;
  padding: 28px 22px 30px;
  color: var(--ink);
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 2px 4px rgba(15, 59, 76, .05), 0 24px 48px -24px rgba(15, 59, 76, .5);
}

@media (min-width: 640px) {
  .job-card { padding: 32px 30px 34px; }
}

.job-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.job-card__badge {
  padding: 6px 15px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: var(--kiyo-700);
  border-radius: 999px;
}

/* 2枚のカードを見分けやすくするため、事務側は暖色にする */
.job-card__badge--alt { background: var(--warm-600); }

.job-card__employ {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-light);
}

/* 時給。求人でいちばん先に見られる情報なので、数字だけ明朝で大きく置く */
.job-card__wage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  margin-top: 18px;
}

.job-card__wage-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--kiyo-700);
}

.job-card__wage-num {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--kiyo-900);
  font-variant-numeric: tabular-nums;
}

.job-card__wage-unit {
  /* 「2,600」と「円」の間だけは空けたくないので gap を打ち消す */
  margin-left: -5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--kiyo-900);
}

.job-card__wage-range {
  font-size: 16px;
  font-weight: 700;
  color: var(--kiyo-800);
  font-variant-numeric: tabular-nums;
}

.job-card__wage-note {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--warm-600);
  background: var(--warm-50);
  border-radius: 999px;
}

.job-card__catch {
  margin-top: 16px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--kiyo-900);
  background: var(--warm-50);
  border-radius: 16px;
}

.job-card__subhead {
  margin-top: 24px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--kiyo-700);
}

/* ポイント。チェックマークは擬似要素の2辺を回転させて描く（画像なし） */
.job-points {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.job-points li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.job-points li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 3px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--kiyo-500);
  border-bottom: 2px solid var(--kiyo-500);
  border-radius: 1px;
  transform: rotate(-45deg);
}

/* 募集要項。ラベル列を固定して値の左端をそろえる */
.job-spec {
  margin-top: 22px;
  border-top: 1px solid var(--kiyo-100);
}

.job-spec > div {
  display: grid;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kiyo-100);
}

@media (min-width: 480px) {
  .job-spec > div {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
}

.job-spec dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.95;
  color: var(--kiyo-700);
}

.job-spec dd {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.job-spec dd b {
  font-weight: 700;
  color: var(--kiyo-800);
  font-variant-numeric: tabular-nums;
}

/* ①② の勤務時間は1行ずつ並べる */
.job-spec__line { display: block; }

/* 待遇・環境。数が多く、どれも短いのでタグで並べる */
.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.job-tags li {
  padding: 6px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kiyo-800);
  background: var(--kiyo-50);
  border-radius: 999px;
}


/* ------------------------------------------------------------
   採用の概要カード（index.html の「採用」）

   2026-09-29 変更：トップページに募集要項をすべて載せると
   採用セクションだけで画面3枚分になり、薬局を探しに来た方の動線を
   塞いでいた。詳細は recruit.html に移し、トップには
   「職種・雇用形態・時給・シフト」だけの概要カードを置く。
   ------------------------------------------------------------ */

.recruit-brief {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 26px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(15, 59, 76, .05), 0 22px 44px -24px rgba(15, 59, 76, .5);
}

@media (min-width: 640px) {
  .recruit-brief { padding: 28px 26px 30px; }
}

.recruit-brief__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.recruit-brief__wage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
}

.recruit-brief__terms {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--kiyo-100);
}

.recruit-brief__terms > div {
  display: grid;
  gap: 2px;
}

@media (min-width: 420px) {
  .recruit-brief__terms > div {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
  }
}

.recruit-brief__terms dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.9;
  color: var(--kiyo-700);
}

.recruit-brief__terms dd {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}


/* ------------------------------------------------------------
   採用ページ（recruit.html）の応募先カード
   ------------------------------------------------------------ */

.apply-box {
  display: grid;
  gap: 18px;
  padding: 26px 22px 28px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
}

@media (min-width: 640px) {
  .apply-box { padding: 34px 32px 36px; }
}

@media (min-width: 1024px) {
  .apply-box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 40px;
    align-items: center;
  }
}

.apply-box__title {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 21px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #fff;
}

.apply-box__body {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 2;
  color: rgba(255, 255, 255, .8);
}

.apply-box__actions { display: grid; gap: 11px; }

/* 電話・メールは押したあとの行き先が分かるよう、ラベルと値を積む */
.apply-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 15px 18px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

.apply-btn__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
}

.apply-btn__value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
  /* メールアドレスは狭い画面で1行に収まらないので、途中でも折り返させる */
  overflow-wrap: anywhere;
}

.apply-btn--tel {
  color: #fff;
  background: var(--warm-500);
  border-color: var(--warm-500);
}

.apply-btn--tel:hover { background: var(--warm-600); border-color: var(--warm-600); }
.apply-btn--tel .apply-btn__label { color: rgba(255, 255, 255, .8); }

.apply-btn--mail {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

.apply-btn--mail:hover { background: rgba(255, 255, 255, .1); }
.apply-btn--mail .apply-btn__label { color: rgba(255, 255, 255, .65); }
.apply-btn--mail .apply-btn__value { font-size: 15.5px; }

@media (prefers-reduced-motion: reduce) {
  .apply-btn { transition: none; }
}


/* ------------------------------------------------------------
   会社概要

   表組みも区切り記号も使わない。
   ラベル列の幅を固定して、値の左端を縦に揃えることだけで読ませる。
   ------------------------------------------------------------ */

.company-profile {
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.company-profile__row {
  display: grid;
  gap: 3px;
}

@media (min-width: 640px) {
  .company-profile { gap: 13px; }

  .company-profile__row {
    /* 「保険薬局指定番号」がいちばん長いので、それが収まる幅にそろえる */
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}

.company-profile dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.75;
  color: var(--kiyo-700);
}

.company-profile dd {
  font-size: 13.5px;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--ink);
}

/* 番号は等幅で読みやすく */
.company-profile__num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}


/* ------------------------------------------------------------
   営業状況バッジ（押すと営業時間の一覧へ移動する）
   ------------------------------------------------------------ */

.open-status-link {
  cursor: pointer;
  color: var(--kiyo-800);
  text-decoration: underline;
  text-decoration-color: var(--kiyo-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* 括弧や「–」の下で下線が途切れるのを防ぐ（既定の skip-ink が字形を避けてしまう） */
  text-decoration-skip-ink: none;
  transition: color .25s ease, text-decoration-color .25s ease;
}

.open-status-link::after {
  content: "›";
  /* margin だと下線が引かれず隙間になるため padding で空ける */
  padding-left: 5px;
  font-weight: 700;
  color: var(--kiyo-500);
}

.open-status-link:hover {
  color: var(--kiyo-700);
  text-decoration-color: var(--kiyo-700);
}

.open-status-link:focus-visible {
  outline: 2px solid var(--kiyo-500);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ------------------------------------------------------------
   フッター

   左に店舗情報、右にメニュー。
   メニューを2列に折り返すことで、縦に伸びるのを抑える。
   ------------------------------------------------------------ */

.footer-main {
  display: grid;
  gap: 30px;
  padding-bottom: 34px;
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 56px;
    align-items: start;
  }

  .footer-nav {
    justify-self: end;
    text-align: right;
  }
}

.footer-company {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-light);
}

.footer-company a {
  color: var(--kiyo-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-nav__list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  font-size: 14px;
}

@media (min-width: 640px) {
  .footer-nav__list {
    /* 上から下へ流し込み、5件＋4件の2列にする */
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    column-gap: 44px;
    row-gap: 9px;
  }
}

@media (min-width: 768px) {
  .footer-nav__list { justify-items: end; }
}


/* ------------------------------------------------------------
   施設基準・掲示事項ページ（notices.html）
   ------------------------------------------------------------ */

.notice-block + .notice-block { margin-top: 44px; }

.notice-block h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--kiyo-900);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kiyo-100);
}

.notice-block h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  margin-right: 12px;
  vertical-align: -2px;
  background: var(--warm-400);
  border-radius: 2px;
}

.notice-block > p,
.notice-block > ul,
.notice-block > dl { margin-top: 18px; }

.notice-block p {
  font-size: 14.5px;
  line-height: 2.05;
  color: var(--ink-soft);
}

.notice-list { display: grid; gap: 10px; }

.notice-list li {
  position: relative;
  padding: 13px 18px 13px 38px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  background: var(--kiyo-50);
  border-radius: 14px;
}

/* 件数が多く1件が短い一覧（施設基準の届出項目など）は2列に流し込む。
   行ごとに左→右へ並ぶので、読み順は1列のときと変わらない。 */
@media (min-width: 640px) {
  .notice-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.notice-list li::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 18px;
  width: 6px;
  height: 6px;
  background: var(--kiyo-400);
  border-radius: 50%;
}

.notice-meta {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--kiyo-100);
  border-radius: 18px;
}

.notice-meta > div {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.85;
  border-top: 1px solid var(--kiyo-100);
}

.notice-meta > div:first-child { border-top: 0; }

@media (min-width: 640px) {
  .notice-meta > div {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.notice-meta dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--kiyo-800);
}

.notice-meta dd { color: var(--ink-soft); }

/* ブロック内の小見出し（「調剤機器・設備」など）。
   h2 の下にもう一段だけ階層が要るときに使う。
   `.notice-block > p` より詳細度を上げないと、本文と同じ 18px / 本文色に負ける。 */
.notice-block > .notice-subhead {
  margin-top: 28px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .18em;
  color: var(--kiyo-700);
}

/* 小見出しの直後は 18px より詰める */
.notice-block > .notice-subhead + ul,
.notice-block > .notice-subhead + dl { margin-top: 12px; }


/* 実績・人員体制のカード
   ラベルは小さく、数字を主役にする。数字は本文と同じ明朝で大きく置く。 */

.stat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 2項目だけのときは広い画面でも2列のまま（4列にすると右半分が空く） */
  .stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px 16px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--kiyo-100);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15, 59, 76, .04), 0 12px 32px -20px rgba(15, 59, 76, .22);
}

.stat-card dt {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--kiyo-700);
}

.stat-card dd {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.stat-card__num {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--kiyo-900);
  /* 桁のそろった数字にする */
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .stat-card__num { font-size: 40px; }
}

.stat-card__unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-light);
}


/* 設備の一覧（名称 … 台数）
   notice-list と同じ地色にそろえ、右端に台数を置く。 */

.spec-list { display: grid; gap: 8px; }

.spec-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  font-size: 14.5px;
  line-height: 1.8;
  background: var(--kiyo-50);
  border-radius: 14px;
}

.spec-list__name {
  color: var(--ink-soft);
  font-weight: 500;
}

/* 製品名などの補足。名称の下にぶら下げる */
.spec-list__note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-light);
}

.spec-list__val {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--kiyo-800);
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   代表略歴（index.html の「想い」）

   年が付く項目と付かない項目が混ざるので、年の桁で揃えるのはやめて、
   縦のラインとドットだけで時系列に見せる。

   ※ 2026-09-29 にいったん「左＝年月日／右＝内容」の2列（.history）へ
     作り直しましたが、同日のご指示によりこの形に戻しました。
   ------------------------------------------------------------ */

.career-list {
  position: relative;
  display: grid;
  gap: 11px;
  padding-left: 20px;
}

.career-list::before {
  content: "";
  position: absolute;
  top: .9em;
  bottom: .9em;
  left: 4px;
  width: 1px;
  background: var(--kiyo-200);
}

.career-list li {
  position: relative;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.career-list li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: -20px;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 2px solid var(--kiyo-300);
  border-radius: 50%;
}

/* 現在の役割（いちばん下）だけ色を変えて、時系列の終点を示す */
.career-list li:last-child::before { border-color: var(--warm-500); }

.career-list b {
  font-weight: 700;
  color: var(--kiyo-800);
  font-variant-numeric: tabular-nums;
}

/* 年月日が付く行（2026-09-29 追加）
   ------------------------------------------------------------
   もとは日付のうしろに全角スペースを置いただけだったため、内容が折り返すと
   「代表取締役に就任」が日付の真下（＝行の左端）へ回り込んでしまっていた。

   日付と内容を別の列に分けて、折り返し後も内容の頭が縦にそろうようにする。
   ・左列は max-content（日付がそのまま入る幅）。日付は途中で折り返さない。
   ・右列は minmax(0, 1fr)。何行に折り返しても頭の位置は変わらない。

   狭い画面（〜479px）は1列のまま。
   もともと日付と内容が別々の行に落ちていたので、見た目はこれまでと同じで、
   2列にすると右列がつぶれてしまうため切り替えていない。

   ドットと縦のラインは li の ::before（絶対配置）なので、
   grid にしても位置は変わらない。
   ------------------------------------------------------------ */

.career-list__row {
  display: grid;
  row-gap: 0;
}

@media (min-width: 480px) {
  .career-list__row {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 14px;
    align-items: baseline;
  }
}


/* ------------------------------------------------------------
   スクロールで浮かび上がる演出（控えめに）
   ------------------------------------------------------------ */

/* 非表示の初期状態は「JSが動いている環境」に限定する。
   JSが無効／読み込み失敗でも本文が消えないようにするため。 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scene-card,
  .nav-link::after {
    transition: none !important;
  }
}


/* ------------------------------------------------------------
   スマホ用ボトムナビ

   スマホで来た人がまず知りたい「今開いているか」「どこにあるか」
   「電話」「処方せんを送る」の4つへ、スクロール位置を問わず届くようにする。
   PC（1024px以上）はヘッダーのメニューがあるので出さない。
   ------------------------------------------------------------ */

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* ヘッダー（z-50）と同じ層。モバイルメニューを開いても下に隠れない */
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--kiyo-100);
  background: rgba(251, 250, 247, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px -18px rgba(15, 59, 76, .45);
  /* iPhone のホームバー分を下に足す（対応していない端末では 0） */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 指で押せる高さを確保する */
  min-height: 58px;
  padding: 8px 2px 7px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  transition: color .2s ease, background-color .2s ease;
}

.bottom-nav__item + .bottom-nav__item {
  border-left: 1px solid var(--kiyo-100);
}

.bottom-nav__item:active {
  background: var(--kiyo-50);
}

.bottom-nav__item:focus-visible {
  outline: 2px solid var(--kiyo-500);
  outline-offset: -3px;
}

.bottom-nav__icon {
  position: relative;
  display: block;
  width: 21px;
  height: 21px;
  color: var(--kiyo-700);
}

.bottom-nav__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 電話は主たる行動なので、ひとつだけ色を変えて見つけやすくする */
.bottom-nav__item--call,
.bottom-nav__item--call .bottom-nav__icon {
  color: var(--warm-600);
}

/* 営業状況のランプ。色は js/main.js が <html data-open-state> に書く状態で決まる */
.bottom-nav__dot {
  position: absolute;
  top: -1px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--kiyo-300);
  box-shadow: 0 0 0 2px var(--base);
}

[data-open-state="open"] .bottom-nav__dot { background: #10B981; }
[data-open-state="soon"] .bottom-nav__dot { background: var(--warm-500); }
[data-open-state="closed"] .bottom-nav__dot { background: var(--ink-light); }

/* ボトムナビの高さぶん、ページ末尾に余白を足して重なりを防ぐ。
   59px = 項目の min-height 58px ＋ 上境界線 1px */
@media (max-width: 1023.98px) {
  body {
    padding-bottom: calc(59px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1024px) {
  .bottom-nav {
    display: none;
  }
}


/* ------------------------------------------------------------
   印刷（アクセス情報だけ持ち帰れるように）
   ------------------------------------------------------------ */

@media print {
  #site-header,
  #recruit,
  .bottom-nav {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .service-row,
  .scene-card {
    box-shadow: none;
    break-inside: avoid;
  }
}