/* ==========================================================================
   デザイントークン
   ========================================================================== */
:root {
  /* --- 色 --- */
  --color-primary: #005FA7;
  /* ブランド基本色(青)。ヘッダー・ボタン・見出し */
  --color-accent: #FFEC33;
  /* アクセント(黄)。ヘッダー帯・ボタン等の差し色 */
  --color-accent-pink: #D76375;
  /* アクセント(ピンク)。Topics 見出し等の文字アクセント */
  --color-text: #000000;
  /* 本文テキスト */
  --color-bg: #FFFFFF;
  /* ページ背景 */

  /* ---色(追加) --- */
  --color-text-soft: #333333;

  /* --- フォント --- */
  --font-base: "Noto Sans JP", sans-serif;
  --font-round: "Zen Maru Gothic", sans-serif;
  /* FVキャッチ・採用ページのキャッチ/本文・ENTRYボタン */
  --font-serif: "Noto Serif JP", serif;
  /* /recruit/message の「TOP MESSAGE」ラベル専用 */
  --font-weight-extralight: 200;
  /* ExtraLight。Noto Serif JP「TOP MESSAGE」ラベル、/recruit/work の「ノムラの仕事を知る」見出し(Noto Sans JP) */
  --font-weight-light: 300;
  /* Light */
  --font-weight-normal: 400;
  /* 本文(Regular) */
  --font-weight-medium: 500;
  /* 見出し(Medium) */
  --font-weight-semibold: 600;
  /* 見出し(Semibold) */
  --font-weight-bold: 700;
  /* 見出し強調(Bold) */
  --font-weight-extrabold: 800;
  /* ExtraBold。Noto Serif JP用に追加(about/principle 等) */

  /* --- レイアウト --- */
  --width-content: 1000px;
  /* コンテンツ最大幅 */
  --width-content-gutter: 1040px;
  --bp-sp: 768px;
  /* PC〜Tablet 共通 / SP の境界 */

  /* --- セクション識別色(トップカード〜下層ページのテーマカラー) --- */
  --color-section-rehab: var(--color-accent-pink);
  /* #D76375 リハビリ */
  --color-section-lab: #EA5514;
  /* ノムラボ(オレンジ) */
  --color-section-store: #4E8DA4;
  /* 店舗検索(ティール) */
  --color-section-about: var(--color-primary);
  /* #005FA7 企業情報・について */
  --color-section-recruit: #4D9878;
  /* 採用・一緒に働く(緑) */

  /* --- 楽天ブランドカラー(ご用件カード専用) --- */
  --color-rakuten: #AE2E2A;

  /* --- EPARKブランドカラー(調剤予約ボタン専用) --- */
  --color-epark: #FF4600;

  /* --- 調剤予約ページ FVキャッチコピー専用色 --- */
  --color-booking-catch: #FF83A4;

  /* --- 調剤予約ページ SP版 背景ストライプ用(黄色の暗色側) --- */
  --color-booking-stripe: #FFE319;

  /* --- お困りごとページ「対象店舗」枠専用色(枠線・文字) --- */
  --color-scenes-stores: #666666;

  /* --- お困りごとページ 白パネル角のグラデーション装飾専用色 --- */
  --color-scenes-corner-gold: #D7AD44;
  --color-scenes-corner-blue: #7281B9;

  /* --- 白パネル角のグラデーション装飾専用色(取り組みページ左上のブルーグレー、
       キャリア採用ページ右下等の緑みの水色) --- */
  --color-bluegray: #7F9CAF;
  --color-teal-mid: #7DBFCB;

  /* --- 店舗一覧ページ エリア切替ボタン・エリア見出し専用色 --- */
  --color-store-hino: #1D9B76;
  /* 日野市内(緑) */
  --color-store-hachioji: #EA5973;
  /* 八王子市内(ピンク) */
  --color-store-other: #E0AC24;
  /* その他地域(金) */

  /* --- お問い合わせページ 企業様向けボタン専用色 --- */
  --color-contact-business: #B17160;

  /* --- 先輩インタビュー CTA「キャリア採用」ボタン専用色(やや濃い緑) --- */
  --color-entry-career: #209B75;

  /* --- 経営理念(about/principle)ページ Credo セクション専用色 */
  --color-principle-credo: var(--color-teal-mid);

  /* --- LINE公式ブランドカラー(/recruit/new-graduate の「公式LINE」ボタン専用) --- */
  --color-line: #06C755;

  /* --- 数字で見るノムラ薬局(/recruit/numbers)専用色 --- */
  --color-numbers-card-bg: #FFFDEF;
  /* 統計カードのクリーム色背景 */
  --color-numbers-orange: #E4992E;
  /* 統計カードの強調数字色(大きい数字側) */
  --color-numbers-female: #E3A1BF;
  /* 男女比ドーナツ「女性」区分色 */

  /* --- リクルートTOP(/recruit)専用色 --- */
  --color-teal-soft: #7CBECA;
  /* FV人物の円・キャッチコピー等の淡いティール */
  --color-job-dietitian: #A467A0;
  /* Our Business「管理栄養士」の見出し色 */
  --color-card-shadow: #B52636;
  /* Environment「働く環境を知る」カードのハードシャドウ色 */
  --color-card-grid: #BDE1F6;
  /* Environment「働く環境を知る」カードの方眼グリッド線色 */

  /* --- セクション区切りグラデーション(ENTRY帯・楔部分で使用) --- */
  --gradient-divider: linear-gradient(90deg, #FFFF81 0%, #86E3BE 50%, #539CAC 100%);
  --gradient-divider-rev: linear-gradient(90deg, #539CAC 0%, #86E3BE 50%, #FFFF81 100%);

  /* --- 斜め境界の「楔」グラデーション --- */
  --gradient-wedge-environment: linear-gradient(90deg, #C0FF97, #33AAB8);
  --gradient-wedge-interview: linear-gradient(90deg, #C88CAE, #92B3DB);
  --gradient-wedge-numbers: linear-gradient(90deg, #4CCAD4, #F4C93C);

  /* --- ティッカー --- */
  --ticker-tile-w: 809.1px;
  /* ticker.svg の viewBox 幅(PC: 高さ65px時) */
  --ticker-tile-w-sp: 423.18px;
  /* SP: 高さ34px時のタイル幅(809.1 × 34/65) */
  --ticker-duration: 60s;
  /* 速度調整 */

  /* --- ヘッダー(PC) --- */
  --header-height-pc: 100px;
  --header-logo-w-pc: 161.5px;
  --header-logo-left-pc: 49px;
  --header-btn-w: 171.5px;
  --header-btn-h-pc: 25px;
  --header-btn-top-pc: 24px;
  --width-nav: 1145px;
  /* PCナビコンテンツ幅(--width-content: 1000px とは別軸) */

  /* --- ヘッダー(SP) --- */
  --header-height-sp: 50px;
  --header-logo-w-sp: 99.5px;
  --header-logo-left-sp: 20px;
  --hamburger-btn-right: 11px;
  /* 44px タップ領域で右端アイコンが画面右から約24.5px */
  --drawer-width: 90%;

  /* --- フッター --- */
  --footer-top-h: 56px;
  /* PC 上部帯の高さ */
  --footer-logo-w-pc: 187px;
  /* PC フッターロゴ幅 */
  --footer-logo-w-sp: 130px;
  /* SP フッターロゴ幅 */
  --color-footer-topbar-bg: #337FB9;
  /* 上部帯背景(メインの --color-primary より明るい青) */

  /* --- パンくずリスト --- */
  --color-text-sub: #777777;
  /* 補助テキスト・パンくず区切り文字 */
  --breadcrumb-font-size: 0.8125rem;
  /* 13px */

  /* --- SP: ご用件カード横並びレイアウト --- */
  --can-do-card-h-sp: 150px;
  /* SP 横並びカードの固定高さ */
  --can-do-thumb-w-sp: 44%;
  /* SP 写真エリアの幅比率 */
}

/* ==========================================================================
   リセット
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

/* ==========================================================================
   ベーススタイル
   ========================================================================== */

body {
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2,
h3 {
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin: 0;
}

h4,
h5,
h6 {
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  margin: 0;
}

/* コンテンツ幅の共通ラッパー */
.l-container {
  max-width: var(--width-content-gutter);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ==========================================================================
   ユーティリティクラス
   ========================================================================== */

/* --- テキスト色 --- */
.u-text-primary {
  color: var(--color-primary);
}

.u-text-accent {
  color: var(--color-accent);
}

.u-text-accent-pink {
  color: var(--color-booking-catch);
}

.u-text-rehab {
  color: var(--color-section-rehab);
}

.u-text-lab {
  color: var(--color-section-lab);
}

.u-text-store {
  color: var(--color-section-store);
}

.u-text-about {
  color: var(--color-section-about);
}

.u-text-recruit {
  color: var(--color-section-recruit);
}

/* --- 背景色 --- */
.u-bg-primary {
  background-color: var(--color-primary);
}

.u-bg-accent {
  background-color: var(--color-accent);
}

.u-bg-accent-pink {
  background-color: var(--color-accent-pink);
}

.u-bg-rehab {
  background-color: var(--color-section-rehab);
}

.u-bg-lab {
  background-color: var(--color-section-lab);
}

.u-bg-store {
  background-color: var(--color-section-store);
}

.u-bg-about {
  background-color: var(--color-section-about);
}

.u-bg-recruit {
  background-color: var(--color-section-recruit);
}

/* --- SP限定の改行(見出し・リード文の改行位置調整用。SP側は @media 側で display:inline に上書き) --- */
.u-br-sp {
  display: none;
}

/* --- PC限定の改行(u-br-sp の逆。SP側は @media 側で display:none に上書き) --- */
.u-br-pc {
  display: inline;
}

/* --- ボーダー色 --- */
.u-border-primary {
  border-color: var(--color-primary);
}

.u-border-accent {
  border-color: var(--color-accent);
}

.u-border-accent-pink {
  border-color: var(--color-accent-pink);
}

.u-border-rehab {
  border-color: var(--color-section-rehab);
}

.u-border-lab {
  border-color: var(--color-section-lab);
}

.u-border-store {
  border-color: var(--color-section-store);
}

.u-border-about {
  border-color: var(--color-section-about);
}

.u-border-recruit {
  border-color: var(--color-section-recruit);
}

/* ==========================================================================
   共通ボタン(.btn) TOPページの「もっと見る」系ボタンを基準。
   新しくピル型ボタンを実装する場合は、必ずこの .btn ベース + modifier を使用。
   色は --btn-color を上書きするmodifier(.btn--primary 等)で指定。
   ページ固有の色を使う場合は、そのページの CSS 側で
   .btn--xxx { --btn-color: var(--color-xxx); }` のように追加。
   矢印は <svg class="btn__arrow">(もっと見る等の右向きが標準)。
   /store の絞り込みドロップダウンのような下向き矢印は .btn--arrow-down を併用。
   幅・余白はページごとに差があってよい(例: /store の各ボタン)。
   btn が保証するのは表示形式・角丸・ホバー時の塗り/線反転・矢印の回転切り替えのみ。
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 52px;
  padding: 12px;
  border-radius: 50px;
  border: 2px solid var(--btn-color, var(--color-primary));
  background-color: var(--btn-color, var(--color-primary));
  color: var(--color-bg);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  background-color: var(--color-bg);
  color: var(--btn-color, var(--color-primary));
}

.btn__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  position: absolute;
  top: 16px;
  right: 12px;
}

/* 下向き矢印(/store の絞り込みドロップダウン等)。右向きの矢印svgをそのまま90度回転させる */
.btn--arrow-down .btn__arrow {
  transform: rotate(90deg);
}

/* --- 色 modifier --- */
.btn--primary {
  --btn-color: var(--color-primary);
}

.btn--store {
  --btn-color: var(--color-section-store);
}

.btn--accent-pink {
  --btn-color: var(--color-accent-pink);
}

.btn--recruit {
  --btn-color: var(--color-section-recruit);
}

.btn--lab {
  --btn-color: var(--color-section-lab);
}

.btn--contact-business {
  --btn-color: var(--color-contact-business);
}

.btn--line {
  --btn-color: var(--color-line);
}

/* --- /recruit「Our Business」職種ボタン専用 --- */
.btn--job-pharmacist {
  --btn-color: var(--color-contact-business);
}

.btn--job-dietitian {
  --btn-color: var(--color-job-dietitian);
}

.btn--job-registered-seller {
  --btn-color: var(--color-entry-career);
}

/* --- 幅 modifier --- */
/* TOPページ「店舗を探す」セクションのボタン(お困りごとから/地域、エリアから)専用の幅 */
.btn--wide {
  width: 260px;
  /* gap: 5px; */
  padding: 13px 20px;
  justify-content: flex-start;
}

/* tel:リンクボタン: PCでは発信できないため非表示にし、SPでのみ表示する
   (/store の電話するボタンと同じ運用ルール。例: /contact の「電話で相談する」)。 */
.btn--tel-sp-only {
  display: none;
}

/* ==========================================================================
   共通ボタン(.btn-entry) — 先輩インタビュー CTA帯(ENTRY／募集要項はこちら)専用の
   .btn(矢印付き・幅固定200px)とは見た目が異なるため
   (矢印なし・角丸・幅固定170px・高さも大きい)独立コンポーネントとして新設。
   「新卒採用」「キャリア採用」で文字数が異なっても幅が揃うよう固定幅にしている。
   今後も同系統のCTAボタンが出てきた場合、色は
   --btn-entry-color を上書きするmodifierで指定する。
   ========================================================================== */
.btn-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 64px;
  padding: 0 12px;
  border-radius: 22px;
  background-color: var(--btn-entry-color, var(--color-primary));
  color: var(--color-bg);
  font-family: var(--font-round);
  /* Zen Maru Gothic Bold */
  font-size: 1.375rem;
  /* 22px */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.19em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.btn-entry:hover {
  opacity: 0.85;
}

.btn-entry--new-graduate {
  --btn-entry-color: var(--color-primary);
}

.btn-entry--career {
  --btn-entry-color: var(--color-entry-career);
}

/* ==========================================================================
   ENTRY CTA帯(「ENTRY／募集要項はこちら」)— parts/entry-cta.php 共通パーツ
   先輩インタビュー6ページ、/recruit/career/, /recruit/new-graduate/ で使用
   ========================================================================== */
.interview-cta {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0 20px;
  text-align: center;
}

.interview-cta__title {
  margin: 139px 0 56px;
  color: var(--color-primary);
  font-size: 2.8125rem;
  /* 45px */
  font-weight: var(--font-weight-bold);
}

.interview-cta__actions {
  display: flex;
  justify-content: center;
  gap: 37px;
  margin-bottom: 147.5px;
}

.interview-cta__divider {
  height: 35px;
  margin-inline: -20px;
  background: linear-gradient(90deg, #2d94aa 0%, #67dcce 30%, #afeca9 55%, #ffff81 100%);
}

.interview-cta__divider--top {
  background: linear-gradient(90deg, #ffff81 0%, #afeca9 45%, #67dcce 70%, #2d94aa 100%);
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */

/* --- ハンバーガーボタン(SP 固定・PC では非表示) --- */
.hamburger {
  display: none;
  position: fixed;
  right: var(--hamburger-btn-right);
  top: calc((var(--header-height-sp) - 44px) / 2);
  /* 3px: アイコン中心が SP 帯の中央 */
  z-index: 300;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-primary);
  padding: 0;
}

/* WordPress管理バー表示時（ログイン中のみ）のハンバーガー位置調整 */
.admin-bar .hamburger {
  top: calc(46px + (var(--header-height-sp) - 44px) / 2);
}

@media screen and (min-width: 783px) {
  .admin-bar .hamburger {
    top: calc(32px + (var(--header-height-sp) - 44px) / 2);
  }
}

.hamburger__icon {
  position: relative;
  display: block;
  width: 17.5px;
  height: 11.5px;
}

.hamburger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger__line:nth-child(1) {
  top: 0;
}

.hamburger__line:nth-child(2) {
  top: 5px;
}

.hamburger__line:nth-child(3) {
  top: 10px;
}

/* 開いた状態: 上下の線が中心で交差して × を形成 */
.hamburger.is-open .hamburger__line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.hamburger.is-open .hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-open .hamburger__line:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* --- 黄色帯 --- */
.site-header__band {
  height: var(--header-height-pc);
  background: var(--color-accent);
  display: flex;
  align-items: center;
  padding-left: var(--header-logo-left-pc);
}

/* --- ロゴ --- */
.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo img {
  width: var(--header-logo-w-pc);
  height: auto;
  display: block;
}

/* --- 右カラム(アクションボタン + グローバルナビ) --- */
.site-header__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  padding-top: var(--header-btn-top-pc);
  padding-bottom: 16px;
  padding-right: 40px;
  max-width: calc(var(--width-nav) - var(--header-logo-w-pc));
  margin-left: auto;
}

/* --- アクションボタン(お問い合わせ・採用情報) --- */
.site-header__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.site-header__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-btn-w);
  height: var(--header-btn-h-pc);
  background: var(--color-primary);
  color: var(--color-bg);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  border-radius: 8px;
  border: 1.5px solid var(--color-primary);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-header__action-btn:hover {
  background: transparent;
  color: var(--color-primary);
}

/* --- グローバルナビ --- */
.global-nav__list {
  display: flex;
  gap: 28px;
  justify-content: flex-end;
  align-items: center;
}

.global-nav__link {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.global-nav__link:hover {
  opacity: 0.65;
}

.global-nav__link.is-current {
  border-bottom: 2px solid var(--color-primary);
}

/* ==========================================================================
   ドロワー(SP スライドメニュー)
   ========================================================================== */

/* オーバーレイ背景 */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ドロワー本体 */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--drawer-width);
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  z-index: 250;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.drawer.is-open {
  transform: translateX(0);
}

/* ドロワー内側パディング */
.drawer__inner {
  padding: 54px 28px 53px 28px;
  display: flex;
  flex-direction: column;
}

/* ドロワー上部(ロゴのみ。×はハンバーガーボタンに統合) */
.drawer__top {
  margin-bottom: 40px;
}

.drawer__logo {
  display: inline-flex;
  text-decoration: none;
}

.drawer__logo img {
  width: 130px;
  height: auto;
  display: block;
}

/* ドロワーナビ */
.drawer-nav__list {
  display: flex;
  flex-direction: column;
}


.drawer-nav__link {
  display: inline-block;
  min-height: 44px;
  padding: 8px 0;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-primary);
  line-height: calc(44px - 8px * 2);
  /* min-height をテキストで満たす */
}

.drawer-nav__link.is-current {
  font-weight: var(--font-weight-bold);
}

.drawer-nav__item {
  margin-bottom: 14px;
}

/* ドロワーアクションボタン */
.drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 34px;
}

.drawer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-btn-w);
  min-height: 26px;
  background: var(--color-primary);
  color: var(--color-bg);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  border-radius: 8px;
  border: 1.5px solid var(--color-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.drawer__btn:hover {
  background: transparent;
  color: var(--color-primary);
}

/* ==========================================================================
   フッター — parts/footer.php 本実装
   ========================================================================== */

.site-footer {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* --- PC 上部帯(SP では非表示) --- */
.footer-top-bar {
  background: var(--color-footer-topbar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-top-bar__inner {
  max-width: var(--width-nav);
  margin: 0 auto;
  height: var(--footer-top-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 40px;
}

.footer-top-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-btn-w);
  height: 26px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  border-radius: 8px;
  border: 1.5px solid var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-top-bar__btn:hover {
  background: transparent;
  color: var(--color-accent);
}

.footer-top-bar__pagetop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  padding: 6px 0;
  transition: opacity 0.15s;
}

.footer-top-bar__pagetop:hover {
  opacity: 0.7;
}

.footer-top-bar__pagetop-icon {
  flex-shrink: 0;
}

/* 黄色塗りつぶし円 */
.footer-top-bar__pagetop-icon circle {
  fill: var(--color-accent);
  stroke: none;
}

/* 紺色の上向きシェブロン */
.footer-top-bar__pagetop-icon polyline {
  stroke: var(--color-primary);
  stroke-width: 2.5;
}

/* --- ロゴエリア --- */
.footer-head {
  padding-top: 28px;
  padding-bottom: 36px;
}

.footer-head__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-head__logo {
  display: inline-flex;
  text-decoration: none;
  flex-shrink: 0;
}

.footer-head__logo img {
  width: var(--footer-logo-w-pc);
  height: auto;
  filter: brightness(0) invert(1);
}

/* SP のみ表示(PC では .footer-top-bar に同じボタンあり) */
.footer-head__actions {
  display: none;
}

.footer-head__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  min-height: 26px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  border-radius: 8px;
  border: 1.5px solid var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-head__btn:hover {
  background: transparent;
  color: var(--color-accent);
}

/* --- フッターナビ --- */
.footer-nav {
  padding-bottom: 48px;
}

/*
 * PC: 企業情報(1fr) | 78px gap | 採用情報(362px固定)
 * l-container(1000px)内で: 1fr=560px + 78px gap + 362px = 1000px
 */
.footer-nav__grid {
  display: grid;
  grid-template-columns: 1fr 362px;
  column-gap: 78px;
}

/* セクション見出し(企業情報・採用情報) + 右に伸びる罫線 */
.footer-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-bg);
  white-space: nowrap;
}

.footer-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

/*
 * 企業情報セクション内 2カラム
 * 企業情報全体(560px) から 14px 左インデント: 左カラム348px + 中央カラム(残り)
 */
.footer-about-cols {
  display: grid;
  grid-template-columns: 348px 1fr;
  padding-left: 14px;
  column-gap: 0;
}

.footer-nav__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.footer-nav__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav__group-heading {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-bg);
  line-height: 1.5;
  text-decoration: none;
}

.footer-nav__group-heading--link {
  transition: opacity 0.15s;
}

.footer-nav__group-heading--link:hover {
  opacity: 0.65;
}

/* 子項目リスト: 2カラムグリッド */
.footer-nav__children {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 6px;
  column-gap: 8px;
}

.footer-nav__child--full {
  grid-column: 1 / -1;
}

.footer-nav__child-link {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-normal);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  line-height: 1.5;
  transition: opacity 0.15s;
}

/* 会社案内PDFが未受領のための暫定スタイル。素材受領後はこのブロックごと削除する */
.footer-nav__child-link--pending {
  opacity: 0.6;
  cursor: default;
}

.footer-nav__child-link::before {
  content: '・';
}

.footer-nav__child-link:hover {
  opacity: 0.65;
}

/* SNS ブロック */
.footer-sns {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.footer-sns__label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-bg);
  letter-spacing: 0.1em;
}

.footer-sns__link {
  display: inline-flex;
  color: var(--color-bg);
  text-decoration: none;
  transition: opacity 0.15s;
}

.footer-sns__link:hover {
  opacity: 0.65;
}

.footer-sns__icon {
  width: 32px;
  height: 32px;
}

/* SP PAGE TOP: PC では非表示 */
.footer-pagetop-sp {
  display: none;
}

/* --- 下部バー --- */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-block: 16px;
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-copy {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-privacy {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: opacity 0.15s;
  margin-bottom: 20px;
}

.footer-privacy:hover {
  opacity: 0.65;
}

main {
  overflow-x: hidden;
}

/* main(汎用下層ページ用。トップページは各セクションで幅制御) */
.main {
  max-width: var(--width-content-gutter);
  /* border-boxのpadding20px×2を補正 */
  margin: 0 auto;
  padding: 40px 20px;
}

/* ==========================================================================
   FV(ファーストビュー) —
   ========================================================================== */

.fv {
  position: relative;
  min-height: 100vh;
  /* svh 非対応ブラウザ用フォールバック */
  min-height: 100svh;
  /* ウインドウ高に追従 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* イラスト+コピーのかたまりを縦中央に配置 */
}

/* イラストエリア: 中身なりの高さ */
.fv__illust {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
}

.fv__illust img {
  width: 100%;
  max-width: 626px;
  /* SVG の viewBox 幅上限 */
  height: auto;
}

/* テキスト群: 中身なりの高さ */
.fv__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 20px 0;
  gap: 8px;
  width: 100%;
}

.fv__catch {
  font-size: 2.5rem;
  font-family: var(--font-round);
  font-weight: var(--font-weight-medium);
  /* Zen Maru Gothic Medium */
  color: var(--color-primary);
  margin: 0;
}

.fv__sub {
  font-size: 1.375rem;
  font-family: var(--font-round);
  font-weight: var(--font-weight-normal);
  /* Zen Maru Gothic Regular */
  color: var(--color-primary);
  margin: 0;
}

.fv__en {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  margin: 0;
}

/* ==========================================================================
   固定ボタン(PC/Tablet)
   SP(≤768px)ではボトムナビが担当するため非表示
   ========================================================================== */

.fixed-cta {
  position: fixed;
  right: 20px;
  bottom: 24px;
  top: auto;
  transform: none;
  z-index: 100;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.fixed-cta__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-bg);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.fixed-cta__btn img {
  height: 42px;
  width: auto;
}

/* ==========================================================================
   ティッカー(マーキー) 
   PC: 1段・左から右へ無限ループ
   SP: 2段・上下逆方向
   ========================================================================== */

.ticker {
  position: absolute;
  /* FV 内でイラストの背後に流す */
  left: 0;
  right: 0;
  top: 48%;
  /* イラスト下部付近。要調整 */
  z-index: 0;
  overflow: hidden;
  height: 65px;
  /* ticker.svg の viewBox 高さに合わせる */
}

.ticker__track {
  display: flex;
  animation: ticker-ltr var(--ticker-duration) linear infinite;
}

/*
 * ベルト幅 = var(--ticker-tile-w) × 8 = 809.1px × 8 = 6472.8px
 * タイル幅の整数倍にすることで translateX ループ境界と background-repeat 境界が
 * 完全一致し、継ぎ目なしにループする。
 * × 8 は 4K(3840px)より大きいため、どの画面幅でも単一ベルトが画面を覆う。
 */
.ticker__belt {
  width: calc(var(--ticker-tile-w) * 8);
  height: 65px;
  flex-shrink: 0;
  background-image: url('../img/common/ticker.svg');
  background-repeat: repeat-x;
  background-size: auto 65px;
  background-position: 0 0;
}

/*
 * LTR(左→右): translateX をベルト1本分だけ右方向に動かすことで
 * ループする。from で belt2 が表示され、to で belt1 に切り替わる。
 * 両ベルトは同じパターン(background-repeat)なので境界は視覚上シームレス。
 *
 * from: −(tile × 8) = ベルト1本分左にオフセット → belt2 が画面に表示
 * to  :  0           → belt1 が画面に表示
 */
@keyframes ticker-ltr {
  from {
    transform: translateX(calc(var(--ticker-tile-w) * -8));
  }

  to {
    transform: translateX(0);
  }
}

/* RTL(右→左): SP下段用。translateX が 0 → -(tile×8) で内容が左方向へ流れる */
@keyframes ticker-rtl {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(var(--ticker-tile-w) * -8));
  }
}

/* RTL トラック: SP のみ表示。PC では非表示 */
.ticker__track--rtl {
  display: none;
}

/* SP 下段コンテナ: PC では非表示 */
.ticker--sp-btm {
  display: none;
}

/* モーション低減設定 */
@media (prefers-reduced-motion: reduce) {

  .ticker__track,
  .ticker__track--rtl {
    animation: none;
  }
}

/* ==========================================================================
   ご用件から探す
   ========================================================================== */

.can-do {
  padding-block: 10px;
}

.can-do__heading {
  font-size: 1.875rem;
  /* 28px */
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin: 0 0 16px;
}

.can-do__lead {
  font-size: 1.125rem;
  margin: 0 0 48px;
  color: var(--color-text);
  line-height: 1.8;
}

.can-do__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 24px;
}

.can-do__card {
  width: 300px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  border-radius: 12px;
  overflow: hidden;
  /* カード全体に色+斜め縞を敷き、写真の周囲に縁を作る */
  background-color: var(--card-color, var(--color-primary));
  background-image: repeating-linear-gradient(-31deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.05) 4px,
      rgba(255, 255, 255, 0.05) 11px);
}

.can-do__thumb {
  /* margin で写真を内側に入れ、上・左・右に色の縁を見せる */
  margin: 12px 12px 0;
  aspect-ratio: 23 / 16;
  overflow: hidden;
  border-radius: 12px;
  /* 写真角に軽い丸み */
  transition: filter 0.3s ease;
}

.can-do__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.can-do__card:hover .can-do__thumb {
  filter: saturate(0.6) brightness(0.9);
}

/* タイトル + 矢印エリア(カード背景を引き継ぐ) */
.can-do__body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: 20px 52px 20px 12px;
  /* 左右は thumb の margin に揃える */
}

.can-do__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-bg);
}

/* 矢印アイコン: 白丸 + --card-color のシェブロン */
.can-do__arrow {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--card-color, var(--color-primary));
  /* シェブロンの stroke 色 */
}

/* ==========================================================================
   店舗一覧
   ========================================================================== */

.store {
  background: var(--color-primary);
  padding-block: 80px;
  overflow: hidden;
}

.store__panel {
  max-width: var(--width-content);
  /* 1000px固定。769px〜は常にこれで中央寄せ */
  margin: 0 auto;
  height: 382px;
  background: var(--color-bg);
  margin-left: auto;
  border-radius: 16px;
  padding: 64px 50px 0;
  position: relative;
}

.store__body__wrapper {
  width: 40%;
}

.store__heading {
  font-size: 1.875rem;
  /* 28px */
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.store__lead {
  margin: 32px 0 36px;
  color: var(--color-primary);
  line-height: 1.9;
  font-size: 1.125rem;
}

.store__btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

/* 見た目(サイズ・色・矢印)は .btn / .btn--wide / .btn--store,--primary が担当。
   .store__btn は store__btns 内でのレイアウト調整用フックとして残し(SP幅指定など)。 */

.store__photo {
  max-width: 578px;
  position: absolute;
  top: -50px;
  right: -80px;
  /* 右端からはみ出す量を vw で可変にする */
}

.store__photo img {
  border-radius: 24px;
}

.store__no {
  position: absolute;
  display: block;
  height: 65px;
  width: auto;
  pointer-events: none;
}

.store__no--top {
  top: -33px;
  left: -108px;
}

.store__no--bottom {
  bottom: -33px;
  right: -120px;
}

/* ==========================================================================
   NOMLOG
   ========================================================================== */

.nomlog {
  padding-block: 150px 80px;
}

.nomlog__header {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 32px;
}

.nomlog__logo {
  flex-shrink: 0;
  width: auto;
  height: 115px;
}

.nomlog__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.8;
}

.nomlog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.nomlog__card {
  border-radius: 8px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
}

.nomlog__card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nomlog__thumb {
  aspect-ratio: 630 / 342;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  margin-bottom: 12px;
}

.nomlog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.nomlog__card-inner:hover .nomlog__thumb img {
  transform: scale(1.05);
}

.nomlog__card-title {
  margin: 16px 13px 11px 13px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.nomlog__footer {
  display: flex;
  justify-content: center;
}

/* 見た目は .btn / .btn--primary が担当(共通ボタンコンポーネント参照)。 */

/* ==========================================================================
   ノムラ薬局について知る
   ========================================================================== */

.about {
  padding-block: 80px;
}

.about__inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

.about__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.about__label {
  margin: 0;
  font-size: 1.625rem;
  /* 24px */
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.about__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.8;
}

/* 見た目は .btn / .btn--primary が担当(共通ボタンコンポーネント参照)。 */

.about__photo {
  flex: 0 0 45%;
}

.about__photo img {
  border-radius: 16px;
}

/* ==========================================================================
   Topics
   ========================================================================== */

.topics {
  padding-block: 80px 150px;
}

.topics__header {
  margin-bottom: 48px;
  text-align: center;
}

.topics__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.topics__heading-en {
  font-size: 5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-pink);
  line-height: 1;
}

.topics__heading-ja {
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-pink);
}

.topics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-bottom: 55px;
}

.topics__card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.topics__thumb {
  aspect-ratio: 600 / 360;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 12px;
}

.topics__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}

.topics__card-inner:hover .topics__thumb img {
  transform: scale(1.05);
}

.topics__card-meta {
  margin: 16px 0 4px;
  font-size: 0.750rem;
  color: var(--color-text);
  opacity: 0.7;
}

.topics__card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.topics__footer {
  display: flex;
  justify-content: center;
}

/* 見た目は .btn / .btn--accent-pink が担当(共通ボタンコンポーネント参照)。 */

/* ==========================================================================
   RECRUIT バナー
   ========================================================================== */

.recruit {
  padding: 70px 0 50px 0;
  color: var(--color-bg);
  background-image: url('../img/top/gradation-pc.svg');
  background-size: cover;
  background-repeat: no-repeat;
}

.recruit__inner {
  display: grid;
  grid-template-columns: 60% 1fr;
  grid-template-areas:
    "photo body"
    "photo btn";
  column-gap: 9%;
  row-gap: 30px;
}

.recruit__photo {
  grid-area: photo;
  align-self: center;
}

.recruit__photo img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.recruit__body {
  grid-area: body;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recruit__heading {
  margin: 0;
  font-size: 2.8125rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.2em;
}

.recruit__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--color-text);
}

/* 見た目は .btn / .btn--primary が担当(共通ボタンコンポーネント参照)。
   .recruit__btn クラス自体は SP でのグリッド配置(order 等)のフックとして残す。 */

/* ==========================================================================
   News
   ========================================================================== */

.news {
  padding: 0 0 150px 0;
}

.news__header {
  margin-bottom: 30px;
  text-align: center;
}

.news__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.news__heading-en {
  font-size: 5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
}

.news__heading-ja {
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.news__list {
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

.news__item {
  border-bottom: 1px solid #e0e0e0;
}

.news__link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.2s ease;
  justify-content: space-between;
}

.news__link:hover {
  opacity: 0.5;
}

.news__arrow {
  flex-shrink: 0;
}

.news__title__wrapper {
  display: flex;
  justify-content: flex-start;
  column-gap: 24px;
}

.news__date {
  flex-shrink: 0;
  font-size: 0.9375rem;
  color: var(--color-text);
  opacity: 0.6;
  min-width: 6em;
}

.news__title {
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.news__footer {
  display: flex;
  justify-content: center;
}

/* 見た目は .btn / .btn--primary が担当(共通ボタンコンポーネント参照)。 */

/* ==========================================================================
   ボトムナビ(SP のみ / PC は fixed-cta が担当)
   ========================================================================== */

.bottom-nav {
  display: none;
}


/* ==========================================================================
   パンくずリスト
   ========================================================================== */
.breadcrumb-nav {
  padding-block: 14px 16px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item:not(:last-of-type)::after {
  content: "›";
  margin: 0 0.6em;
  color: var(--color-text-sub);
  font-size: var(--breadcrumb-font-size);
  line-height: 1;
}

.breadcrumb__link {
  font-size: var(--breadcrumb-font-size);
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__current {
  font-size: var(--breadcrumb-font-size);
  color: var(--color-text-sub);
}

/* ==========================================================================
   カテゴリページ 共通 — templates/category-template.php
   store / nomlog / about / news 等のカテゴリトップで共通利用する骨格。
   色は付与しない(ページごとに u-* ユーティリティで個別指定する)。
   ========================================================================== */

.category-header {
  padding-block: 60px 40px;
  text-align: center;
}

.category-header__title {
  font-size: 1.875rem;
  /* 30px。他セクション見出し(can-do__heading等)と統一 */
  font-weight: var(--font-weight-medium);
  margin: 0 0 16px;
}

.category-header__lead {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}

.category-content {
  max-width: var(--width-content);
  margin-inline: auto;
}

/* ==========================================================================
   汎用下層ページ 共通
   ========================================================================== */

.general-header {
  margin-bottom: 40px;
}

.general-header__title {
  font-size: 1.875rem;
  /* 30px。category-header__title と統一 */
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.general-header__lead {
  font-size: 1rem;
  line-height: 1.8;
  margin: 16px 0 0;
}

/* --- タイプA: テキスト中心(装飾なし) --- */
.general-header--plain {
  text-align: left;
}

/* --- タイプB: ヘッダーあしらい型 ---
   背景色は付与しない(デフォルト無色のプレースホルダー)。
   ページ側で u-bg-* ユーティリティをこのブロックに個別指定する。 */
.general-header--decorated {
  padding: 40px 20px;
  text-align: center;
}

.general-content {
  max-width: var(--width-content);
  margin-inline: auto;
}

.general-content h2 {
  font-size: 1.5rem;
  /* 24px */
  font-weight: var(--font-weight-medium);
  margin: 72px 0 20px;
}

.general-content h2:first-child {
  margin-top: 0;
}

.general-content h3 {
  font-size: 1.25rem;
  /* 20px */
  font-weight: var(--font-weight-medium);
  margin: 32px 0 16px;
}

.general-content p {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 20px;
}

.general-content ul,
.general-content ol {
  margin: 0 0 20px;
  padding-left: 1.5em;
}

.general-content ul {
  list-style: disc;
}

.general-content ol {
  list-style: decimal;
}

.general-content li {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 8px;
}

/* 番号付きリストの項目間に1行分の空白を空ける(privacypolicyの「調剤情報の利用と
   取り扱いについて」等、法的文書で項目のまとまりを視覚的に区切りたい場合に使う)。 */
.general-content li.u-mt-blank-line {
  margin-top: 1.8em;
  /* li の line-height と揃え、1行分空ける */
}

/* :not(.btn) — 共通ボタン(.btn)は独自の配色/下線なしを持つため、本文リンクの
   自動着色・下線から除外する(.btn 利用側で毎回打ち消しルールを書かずに済むようにする)。 */
.general-content a:not(.btn) {
  color: var(--color-primary);
  text-decoration: underline;
  overflow-wrap: anywhere;
  /* URL等、長い文字列はみだし対策 */
}

.general-content a:not(.btn):hover {
  text-decoration: none;
}

.general-content img {
  margin: 0 0 24px;
}

/* ==========================================================================
   装飾ヘッダー(帯+ノ柄+ラベル)+ 浮遊白パネル一式 — 共通コンポーネント
   .general-header--decorated(装飾帯)+ 白パネルのページ
   (scenes, store 等)で共通して使う。
   
   ページ側で指定する項目:
   - 帯の背景色: u-bg-* ユーティリティ
   - 白パネル角のグラデーション色(左上/右下)は
     --deco-panel-corner-1(左上)・--deco-panel-corner-2(右下)を
     ページ側CSSで .deco-panel に対して上書きする(例: store.css, scenes.css)
 */

.deco-header {
  position: relative;
  width: 100vw;
  margin-top: -40px;
  /* .main の padding-top(40px)を打ち消してヘッダー直下に密着させる */
  margin-left: calc(-50vw + 50%);
  height: 300px;
  padding: 0;
  background-image: url("../img/common/no-pattern.svg");
  background-repeat: repeat;
  background-size: 960px 906px;
  /* no-pattern.svg viewBox比(1208.99:1140.1)を維持 */
}

.deco-header__label {
  position: absolute;
  top: 50%;
  left: calc(max(0px, (100vw - var(--width-content)) / 2) + 20px);
  transform: translateY(-50%);
  margin: 0;
  color: var(--color-bg);
  font-size: 1.875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
}

.deco-content {
  margin-top: -108px;
  padding-bottom: 80px;
}

.deco-panel {
  position: relative;
  max-width: var(--width-content);
  margin-inline: auto;
  padding: 74px 60px 64px;
  background-color: var(--color-bg);
  border-radius: 24px;
  box-shadow: 0 20px 10px rgba(0, 0, 0, 0.12);
  text-align: center;
  overflow: hidden;
  /* 角のグラデーションのにじみを角丸の内側にクリップする */
}

/* 角のグラデーション装飾(左上/右下、対角線方向のlinear-gradient)。
   色はページ側が --deco-panel-corner-1/2 で指定する(必須)。
   濃さは --deco-panel-corner-1-opacity/-2-opacity で個別に指定可能(未指定時は45%)。 */
.deco-panel::before,
.deco-panel::after {
  content: "";
  position: absolute;
  width: var(--deco-panel-corner-size, 170px);
  height: var(--deco-panel-corner-size, 170px);
  pointer-events: none;
  z-index: 0;
}

/* 左上 */
.deco-panel::before {
  top: 0;
  left: 0;
  background: linear-gradient(to bottom right,
      color-mix(in srgb, var(--deco-panel-corner-1) var(--deco-panel-corner-1-opacity, 45%), transparent) 0%,
      transparent 50%);
}

/* 右下 */
.deco-panel::after {
  bottom: 0;
  right: 0;
  background: linear-gradient(to top left,
      color-mix(in srgb, var(--deco-panel-corner-2) var(--deco-panel-corner-2-opacity, 45%), transparent) 0%,
      transparent 50%);
}

/* パネル本体のコンテンツをグラデーションより手前に描画する */
.deco-panel>* {
  position: relative;
  z-index: 1;
}

.deco-panel__eyebrow,
.general-content .deco-panel__eyebrow {
  margin: 0 0 0px;
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15em;
}

.deco-panel__title,
.general-content .deco-panel__title {
  margin: 0 0 24px;
  color: var(--color-primary);
  font-size: 2.1875rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* リード文(任意) */
.deco-panel__lead {
  margin: 0 auto 64px;
  max-width: 840px;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.9;
  text-align: center;
}

/* ==========================================================================
   section-top ページ 共通 — templates/section-top-template.php
   nomura-st / nomulabo / recruit の各セクションTOPで共通利用する骨格。
   色は付与しない(ページごとに u-* ユーティリティで個別指定する)。
   ========================================================================== */

.section-top-header {
  padding-block: 60px 40px;
  text-align: center;
}

.section-top-header__title {
  font-size: 1.875rem;
  /* 30px。category-header__title と統一 */
  font-weight: var(--font-weight-medium);
  margin: 0 0 16px;
}

.section-top-header__lead {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}

.section-top-content {
  max-width: var(--width-content);
  margin-inline: auto;
}

/* ==========================================================================
   CMS single(記事詳細)ページ 共通 
   ========================================================================== */

/* --- マストヘッド(記事データに依存しない固定ブロック。$post_type で出し分け)
   背景の薄いトーンはページ全体(<body>)に適用する。 */
body.cms-post-news {
  background-color: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
}

body.cms-post-topics {
  background-color: color-mix(in srgb, var(--color-accent-pink) 3%, var(--color-bg));
}

.cms-masthead {
  position: relative;
  /* nomlog版のorb(絶対配置)の基準にする */
  padding-block: 72px 88px;
  text-align: center;
}

/* nomlogのorb */
body.cms-post-nomlog main {
  overflow-x: visible;
}

/* --- nomlog版マストヘッド(ひし形ロゴ+NOMLOGロゴタイプ+orb装飾。背景は白のまま) --- */
.cms-masthead__logo {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto 40px;
}

.cms-masthead__orb {
  z-index: 0;
}

.cms-masthead__orb--left {
  left: -40px;
  top: 8px;
}

.cms-masthead__orb--right {
  width: 165px;
  height: 165px;
  right: -70px;
  top: 290px;
  /* リード文2行目の下の方に画像上部が来る位置 */
  transform: rotate(180deg);
}

.cms-post-nomlog .cms-masthead__lead {
  position: relative;
  z-index: 1;
  color: var(--color-text);
}

.cms-masthead__eyebrow {
  margin: 0 0 4px;
  color: var(--color-primary);
  font-size: 5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.cms-masthead__subtitle {
  margin: 16px 0 24px;
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
}

.cms-masthead__lead {
  /* 改行位置は u-br-pc/u-br-sp の明示的な<br>で制御するため、max-width による
     自動折り返しは持たせない */
  margin: 0;
  color: var(--color-primary);
  font-size: 1.25rem;
  line-height: 1.9;
}

.cms-post-topics .cms-masthead__eyebrow,
.cms-post-topics .cms-masthead__subtitle,
.cms-post-topics .cms-masthead__lead,
.news-hub-section--topics .cms-masthead__eyebrow,
.news-hub-section--topics .cms-masthead__subtitle,
.news-hub-section--topics .cms-masthead__lead {
  color: var(--color-accent-pink);
}

/* --- 記事ヘッダー(順序: 日付+タグ → タイトル → 区切り線 → アイキャッチ) --- */
.cms-single-header {
  margin: 56px 0 40px;
}

.cms-single-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.cms-single-header__date {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 0.875rem;
}

.cms-single-header__tag {
  margin: 0;
  padding: 0px 4px;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
}

.cms-post-topics .cms-single-header__tag,
.news-hub-section--topics .cms-single-header__tag {
  background-color: color-mix(in srgb, var(--color-accent-pink) 10%, var(--color-bg));
  color: var(--color-accent-pink);
}

.cms-single-header__title {
  margin: 0 0 24px;
  color: var(--color-text);
  font-size: 1.5625rem;
  /* 25px */
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: left;
}

.cms-single-header__divider {
  margin: 0 0 32px;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-text-sub) 35%, var(--color-bg));
}

.cms-single-header__eyecatch {
  margin: 0;
}

.cms-single-header__eyecatch img {
  width: 100%;
  height: auto;
}

/* --- 本文内の丸数字見出し(①②③④⑤ パターン。TOPICS等の手順説明で使用) --- */
.general-content .cms-numbered-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 40px 0 12px;
  color: var(--color-text);
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
}

/* 丸数字は背景色で円を描画せず、Noto Sans JP収録の丸数字グリフ(❶❷❸…)を
   そのまま使い、color だけを post_type で切り替える。 */
.cms-numbered-heading__num {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 1em;
  font-weight: var(--font-weight-normal);
}

.cms-post-topics .cms-numbered-heading__num {
  color: var(--color-accent-pink);
}

/* --dot modifier: 丸数字の代わりに黒系のシンプルな丸ドット(●)を使う見出し(nomlog等)。
   マーカーは post_type で色分けせず、見出し本文と同じ色で統一する。 */
.cms-numbered-heading--dot .cms-numbered-heading__num {
  color: var(--color-primary);
  /* #005FA7 */
  font-size: 1em;
  /* 見出し本文と同じサイズにする */
  font-weight: var(--font-weight-normal);
}

/* --- 本文内の強調テキスト(見出しではなく1文だけ色付けして目立たせる。nomlog等で使用) --- */
.general-content .cms-emphasis {
  margin: 40px 0 12px;
  color: var(--color-primary);
  font-size: 1rem;
  /* 16px */
  font-weight: var(--font-weight-bold);
}

/* --- 「他の記事も見る」リンク --- */
.cms-single-more {
  margin: 64px 0 0;
  text-align: center;
}

.cms-single-more__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 1.5625rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.cms-post-topics .cms-single-more__link {
  color: var(--color-accent-pink);
}

.cms-single-more__icon {
  flex-shrink: 0;
}

/* ==========================================================================
   ノムログTOP(/nomlog) — nomlog/index.php 専用
   マストヘッドは記事詳細ページと共通の .cms-masthead(nomlog版)をそのまま流用。
   カードグリッドはTOPページの nomlog セクション(.nomlog__grid 等)をそのまま
   流用しているため、ここではページネーションのみ追加する。
   ========================================================================== */
.nomlog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.nomlog-pagination__link,
.nomlog-pagination__current {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.nomlog-pagination__link {
  color: var(--color-text);
  text-decoration: none;
}

.nomlog-pagination__link:hover {
  color: var(--color-primary);
}

.nomlog-pagination__current {
  color: var(--color-primary);
}

.nomlog-pagination__ellipsis {
  color: var(--color-text-sub);
  font-size: 1.25rem;
  font-weight: var(--font-weight-normal);
  line-height: 1;
}

.nomlog-pagination__next,
.nomlog-pagination__prev {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-text);
  color: var(--color-bg);
}

/* 色モディファイア(/news お知らせ扉ページで使用。既定=黒丸/primary文字は
   nomlog TOPのまま変更しない)。 */
.nomlog-pagination--primary .nomlog-pagination__current,
.nomlog-pagination--primary .nomlog-pagination__link:hover {
  color: var(--color-primary);
}

.nomlog-pagination--primary .nomlog-pagination__next,
.nomlog-pagination--primary .nomlog-pagination__prev {
  background-color: var(--color-primary);
}

.nomlog-pagination--accent-pink .nomlog-pagination__current,
.nomlog-pagination--accent-pink .nomlog-pagination__link:hover {
  color: var(--color-accent-pink);
}

.nomlog-pagination--accent-pink .nomlog-pagination__next,
.nomlog-pagination--accent-pink .nomlog-pagination__prev {
  background-color: var(--color-accent-pink);
}

/* ==========================================================================
   お知らせ扉(/news) 専用
   TOPICSセクション → NEWSセクションを縦に並べる構成。各セクションはマストヘッド
   ( .cms-masthead 。単体記事ページと共通)+ 2カラム(カテゴリ + 記事リスト)+
   ページネーション( .nomlog-pagination 。nomlog TOPと共通)から成る。
   背景色はセクション単位でフルブリード適用。
   ========================================================================== */
body.page-news-hub main {
  overflow-x: visible;
}

.news-hub-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.news-hub-section:first-child {
  /* .main の padding-top(40px)を打ち消してヘッダー直下に密着させる
     (.deco-header と同じ考え方)。以前は-60pxで20px超過し、
     ヘッダーの黄色帯に食い込んでいた。 */
  margin-top: -40px;
}

.news-hub-section:last-child {
  margin-bottom: -40px;
}

.news-hub-section--topics {
  background-color: color-mix(in srgb, var(--color-accent-pink) 3%, var(--color-bg));
}

.news-hub-section--news {
  background-color: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
}

.news-hub-section__inner {
  max-width: var(--width-content-gutter);
  margin-inline: auto;
  padding: 72px 20px 88px;
}

.news-hub-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 56px;
}

/* --- 左カラム: CATEGORY --- */
.news-hub-categories__label {
  display: inline-block;
  margin: 0 0 20px;
  padding: 0 14px;
  border-radius: 16px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-size: 1.5625rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}

.news-hub-section--topics .news-hub-categories__label {
  background-color: var(--color-accent-pink);
}

.news-hub-categories__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-hub-categories__link {
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.news-hub-categories__link.is-current {
  border-bottom-color: var(--color-primary);
}

.news-hub-section--topics .news-hub-categories__link {
  color: var(--color-accent-pink);
}

.news-hub-section--topics .news-hub-categories__link.is-current {
  border-bottom-color: var(--color-accent-pink);
}

/* --- 右カラム: 記事リスト --- */
.news-hub-list {
  display: flex;
  flex-direction: column;
}

.news-hub-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-sub) 35%, var(--color-bg));
  color: inherit;
  text-decoration: none;
}

.news-hub-list__item:first-child {
  padding-top: 0;
}

.news-hub-list__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.news-hub-list__date {
  color: var(--color-text-sub);
  font-size: 0.875rem;
}

.news-hub-list__title {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
}

.news-hub-list__arrow {
  flex-shrink: 0;
  color: var(--color-primary);
}

.news-hub-section--topics .news-hub-list__arrow {
  color: var(--color-accent-pink);
}

.news-hub-list__item:hover .news-hub-list__title {
  text-decoration: underline;
}

.news-hub-pagination {
  justify-content: flex-start;
  /* 記事リスト列の左端(記事タイトルの行頭)に揃える */
  margin-top: 32px;
}

/* ==========================================================================
   お問い合わせ(/contact) 共通 
   /contact 本体 + 4フォームページ(customer/business/entry/nomura-st) + 
   privacypolicy + medical-dx の計7ページで共通利用するコンポーネント。
   ========================================================================== */

.contact-header {
  margin-top: 150px;
  margin-bottom: 240px;
  text-align: center;
}

.contact-header__title {
  margin: 0 0 24px;
  color: var(--color-primary);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.contact-header__subtitle {
  margin: 0;
  color: var(--color-text);
  font-size: 1.125rem;
  font-weight: var(--font-weight-medium);
}

/* リード文: PCは中央揃え、SPは左揃え */
.contact-lead {
  max-width: 700px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.9;
}

/* --- /contact 本体: 5行の問い合わせ導線 --- */
.contact-rows {
  margin-top: 56px;
}

.contact-row {
  padding-block: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-sub) 35%, var(--color-bg));
}

.contact-rows .contact-row:first-child {
  padding-top: 0;
}

.contact-rows .contact-row:last-child {
  border-bottom: none;
}

.contact-row__text {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}

.contact-row__tel {
  margin: 0 0 20px;
  color: var(--color-text);
  font-size: 0.9375rem;
}

/* ==========================================================================
   スクロールフェイドイン + 移動 / scroll-reveal.js
   ========================================================================== */
.js-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal--orb {
  transition: opacity 2s ease, transform 2s ease;
}

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

/* ==========================================================================
   背景 orb（円形グラデーション装飾）
   ========================================================================== */
.can-do,
.nomlog,
.about,
.topics,
.news {
  position: relative;
}

.orb {
  position: absolute;
  pointer-events: none;
  display: block;
}

/* orb_1: ご用件から探す — 左端・縦方向中央 */
.orb--1 {
  width: 210px;
  height: 210px;
  left: -50px;
  top: calc(50% - 105px);
}

/* orb_2: store〜nomlog 境界 — 右端・nomlog 上部にかけて配置 */
.orb--2 {
  width: 240px;
  height: 240px;
  right: -80px;
  top: -30px;
}

/* orb_3: nomlog 下部 — 左端 */
.orb--3 {
  width: 165px;
  height: 165px;
  left: -40px;
  bottom: 100px;
}

/* orb_4: about〜topics 境界 — 右端・topics 上部にかけて配置 */
.orb--4 {
  width: 240px;
  height: 240px;
  right: -80px;
  top: -120px;
}

/* orb_5: topics〜news 境界 — 左端・news 上部にかけて配置 */
.orb--5 {
  width: 195px;
  height: 195px;
  left: -60px;
  top: -80px;
}


@media (max-width: 1280px) {
  .store__photo {
    width: 60%;
  }
}

@media (max-width: 940px) {
  .can-do__container {
    justify-content: space-evenly;
  }
}

/* ==========================================================================
   SP 対応(PC ファースト / max-width で上書き)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --ticker-duration: 120s;
  }

  .btn--tel-sp-only {
    display: inline-flex;
  }

  .interview-cta__title {
    margin-top: 95px;
    margin-bottom: 62px;
    font-size: 1.625rem;
    /* 26px */
  }

  .interview-cta__actions {
    flex-direction: column;
    align-items: center;
    gap: 24.5px;
    margin-bottom: 89.5px;
  }

  .btn-entry {
    font-size: 1.125rem;
    /* 18px(現状維持) */
  }

  /* FV */

  .fv {
    min-height: calc(100vh - 94px);
    /* svh 非対応ブラウザ用フォールバック */
    min-height: calc(100svh - 94px);
    /* ウインドウ高に追従(notes.md 2-2) */
  }

  .fv__catch {
    font-size: 1.375rem;
  }

  .fv__sub {
    font-size: 0.875rem;
  }

  .fv__en {
    font-size: 0.625rem;
  }

  /* SP ではボトムナビが担当するため固定ボタンを非表示 */
  .fixed-cta {
    display: none;
  }

  /* ヘッダーの表示切替は @media (max-width: 960px)(本ファイル末尾)に分離済み。
     ドロワー・オーバーレイは固定配置済みのため SP 追加スタイルなし */

  /* フッター SP */
  .footer-top-bar {
    display: none;
  }

  .footer-head__inner {
    align-items: flex-start;
    gap: 16px;
    padding-top: 16px;
  }

  .footer-head__logo {
    padding-top: 22px;
  }

  .footer-head__logo img {
    width: var(--footer-logo-w-sp);
    height: auto;
  }

  .footer-head__actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
  }

  .footer-nav {
    padding-bottom: 32px;
  }

  .footer-nav__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .footer-about-cols {
    grid-template-columns: 1fr;
    padding-left: 0;
    row-gap: 22px;
  }

  .footer-nav__section--about {
    margin-bottom: 32px;
  }

  /* SP PAGE TOP 仮配置 */
  .footer-pagetop-sp {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .footer-pagetop-sp__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    min-height: 44px;
  }

  .footer-bottom__inner {
    /* DOM順(コピーライト→プライバシーポリシー)を保ったまま、
       SPのみ見た目の並びを反転してコピーライトを最下部にする。 */
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
  }

  /* 店舗一覧 */

  .store {
    padding-block: 30px;
  }

  .store__no {
    display: none;
  }

  .store__panel {
    width: 90%;
    height: auto;
    margin-inline: auto;
    border-radius: 16px;
    padding: 30px 18px 30px;
  }

  .store__heading {
    text-align: center;
    font-size: 1.4375rem;
  }

  .store__lead {
    font-size: 1rem;
  }

  .store__photo {
    max-width: initial;
    width: 100%;
    position: relative;
    top: revert;
    right: revert;
    margin-inline: auto;
    margin-block-start: 20px;
  }

  .store__body__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .store__btns {
    margin-top: 0;
  }

  .store__btn {
    width: 90%;
    margin-inline: auto;
  }

  /* NOMLOG */
  .nomlog__inner {
    flex-direction: column;
    gap: 32px;
  }

  .nomlog {
    padding-block: 75px 105px;
  }

  .nomlog__header {
    flex-direction: column;
    gap: 26px;
  }

  .nomlog__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }

  /* ノムラ薬局について知る */
  .about__inner {
    flex-direction: column;
  }

  .about__body {
    align-items: center;
  }

  .about__label {
    font-size: 1.4375rem;
  }

  .about__lead {
    text-align: center;
  }

  .about__photo {
    flex: none;
    width: 100%;
  }

  /* RECRUIT */
  .recruit {
    background-image: url('../img/top/gradation-sp.svg');
  }

  .recruit__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .recruit__body {
    order: 1;
    align-self: flex-start;
  }

  .recruit__heading {
    font-size: 2.5rem;
  }

  .recruit__lead {
    font-size: 1rem;
  }

  .recruit__photo {
    order: 3;
    width: 100%;
  }

  .recruit__btn {
    order: 4;
    align-self: center;
    justify-self: unset;
    margin-top: 40px;
  }

  /* Topics */
  .topics__heading {
    flex-direction: column;
    gap: 10px;
  }

  .topics__heading-en {
    font-size: 1.5rem;
  }

  .topics__heading-ja {
    font-size: 1rem;
  }

  .topics__header {
    margin-bottom: 26px;
  }

  .topics__card-meta {
    margin: 16px 0 0;
  }

  .topics__grid {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 50px;
  }

  .topics {
    padding-block: 80px 74px;
  }

  /* News */
  .news {
    padding: 0 0 60px 0;
  }

  .news__heading-en {
    font-size: 1.5rem;
  }

  .news__heading-ja {
    font-size: 1rem;
  }

  .news__heading {
    gap: 10px;
  }

  .news__link {
    gap: 16px;
  }

  .news__title__wrapper {
    flex-direction: column;
  }

  .news__date {
    font-size: 0.8125rem;
  }

  .news__title {
    font-size: 0.8125rem;
  }

  /* =====================================================================
     1. SPティッカー 2段化
     上段(.ticker): イラスト上部に配置。高さは PC と同じ 65px
     下段(.ticker--sp-btm): 元の top: 48% 付近に配置
     ===================================================================== */
  .ticker {
    height: 34px;
    /* ← ① コンテナ高さ */
    top: 12%;
    /* イラストの上に移動 */
  }

  .ticker--sp-btm {
    height: 34px;
    /* ② 下段コンテナも同じ高さに揃える */
    display: block;
    top: 80%;
    /* イラストの下に移動 */
  }

  .ticker__track--rtl {
    display: flex;
    animation: ticker-rtl var(--ticker-duration) linear infinite;
  }

  .ticker__belt {
    height: 34px;
    /* ← ③ ベルト本体の高さ */
    width: calc(var(--ticker-tile-w-sp) * 8);
    /* SP: 縮小後のタイル幅基準に切り替え */
    background-size: auto 34px;
    /* ← ④ SVG を縮小スケールに合わせる */
  }

  /* SP用キーフレーム: タイル幅が縮小されるため移動量を --ticker-tile-w-sp 基準に再定義 */
  @keyframes ticker-ltr {
    from {
      transform: translateX(calc(var(--ticker-tile-w-sp) * -8));
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes ticker-rtl {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(var(--ticker-tile-w-sp) * -8));
    }
  }

  /* =====================================================================
     2. ご用件から探す — SP 横並びレイアウト(写真左・テキスト右)
     ===================================================================== */

  .can-do__heading {
    font-size: 1.4375rem;
    text-align: center;
  }

  .can-do__lead {
    font-size: 1rem;
  }

  .can-do__container {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* カード: 横並び */
  .can-do__card {
    flex-direction: row;
    width: 100%;
    min-width: 0;
    /* コンテンツ起点のサイズ決定を防ぐ */
    height: var(--can-do-card-h-sp);
  }

  /* 写真エリア: 左44%・高さ全体 */
  .can-do__thumb {
    width: var(--can-do-thumb-w-sp);
    flex-shrink: 0;
    aspect-ratio: unset;
    margin: 10px;
    border-radius: 8px;
  }

  /* テキストエリア: 縦中央揃え */
  .can-do__body {
    align-items: center;
    padding: 12px 44px 12px 10px;
    /* right: 矢印アイコン分を確保 */
  }

  .can-do__title {
    font-size: 1.1875rem;
    /* 19px */
  }

  /* 矢印: カード右端の下端 */
  .can-do__arrow {
    top: auto;
    bottom: 0;
    right: 8px;
    transform: translateY(-50%);
  }

  /* ノムラボカード: ロゴ画像がクリップされないよう SP のみ contain + 白背景 */
  .can-do__card--nomurabo .can-do__thumb {
    background: var(--color-bg);
  }

  .can-do__card--nomurabo .can-do__thumb img {
    object-fit: contain;
  }

  /* =====================================================================
     3. SP ボトムナビ
     ===================================================================== */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  .bottom-nav__btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-bg);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
  }

  .bottom-nav__btn img {
    height: 24px;
    width: auto;
    flex-shrink: 0;
  }

  .bottom-nav__btn:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }

  .bottom-nav__btn:last-child {
    background: #D76375;
  }

  /* ボトムナビ固定分の余白をページ末尾に確保 */
  body {
    padding-bottom: 44px;
  }

  /* パンくずリスト */
  .breadcrumb-nav {
    padding-block: 10px 12px;
  }

  /* カテゴリページ 共通 */
  .category-header {
    padding-block: 32px 24px;
  }

  .category-header__title {
    font-size: 1.375rem;
    /* 22px。18〜24pxの基準内 */
  }

  .category-header__lead {
    font-size: 0.9375rem;
    /* 15px。14〜16pxの基準内 */
  }

  /* 汎用下層ページ 共通 */
  .general-header {
    margin-bottom: 24px;
  }

  .general-header__title {
    font-size: 1.375rem;
    /* 22px。18〜24pxの基準内 */
  }

  .general-header__lead {
    font-size: 0.9375rem;
    /* 15px。14〜16pxの基準内 */
  }

  .general-header--decorated {
    padding: 32px 20px;
  }

  .deco-header {
    height: 160px;
    background-size: 640px 604px;
  }

  .deco-header__label {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
  }

  .deco-content {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: -24px;
    margin-bottom: -40px;
    padding-bottom: 48px;
    background-color: var(--color-primary);
    background-image: url("../img/common/no-pattern.svg");
    background-repeat: repeat;
    background-size: 640px 604px;
  }

  .deco-panel {
    margin-inline: 25px;
    padding: 52px 20px 40px;
    border-radius: 16px;
    --deco-panel-corner-size: 120px;
  }

  .deco-panel__eyebrow,
  .general-content .deco-panel__eyebrow {
    font-size: 0.8125rem;
    /* 13px */
    margin: 0 0 8px;
  }

  .deco-panel__title,
  .general-content .deco-panel__title {
    font-size: 1.4375rem;
    /* 23px */
    line-height: 1.6;
  }

  .deco-panel__lead {
    margin-bottom: 40px;
    font-size: 0.875rem;
    /* 14px */
    text-align: left;
  }

  .general-content h2 {
    font-size: 1.25rem;
    margin: 56px 0 16px;
  }

  .general-content h3 {
    font-size: 1.125rem;
    margin: 24px 0 12px;
  }

  .general-content p,
  .general-content li {
    font-size: 0.9375rem;
  }

  /* section-top ページ 共通 */
  .section-top-header {
    padding-block: 32px 24px;
  }

  .section-top-header__title {
    font-size: 1.375rem;
  }

  .section-top-header__lead {
    font-size: 0.9375rem;
  }

  /* CMS single ページ 共通 */
  .cms-masthead {
    padding-block: 32px 40px;
  }

  .cms-masthead__eyebrow {
    font-size: 3.25rem;
  }

  .cms-masthead__subtitle {
    font-size: 1.125rem;
    margin-bottom: 16px;
  }

  .cms-masthead__lead {
    font-size: 0.875rem;
    text-align: center;
  }

  .cms-masthead__logo {
    width: 195px;
    height: auto;
    margin-bottom: 24px;
  }

  /* nomlogのorb */
  .cms-masthead .cms-masthead__orb {
    display: block;
  }

  .cms-masthead__orb--left {
    width: 68px;
    height: 68px;
    left: -10px;
    top: -10px;
  }

  .cms-masthead__orb--right {
    width: 60px;
    height: 60px;
    right: -20px;
    top: 80px;
  }

  .cms-single-header {
    margin: 32px 0 24px;
  }

  .cms-single-header__date {
    font-size: 0.8125rem;
  }

  .cms-single-header__tag {
    padding: 3px 12px;
    font-size: 0.75rem;
  }

  .cms-single-header__title {
    font-size: 1.375rem;
    margin-bottom: 16px;
  }

  .cms-single-header__divider {
    margin-bottom: 24px;
  }

  .general-content .cms-numbered-heading {
    font-size: 1rem;
    margin: 32px 0 10px;
  }

  .cms-single-more {
    margin-top: 48px;
  }

  .cms-single-more__link {
    font-size: 1rem;
    /* 16px */
    font-weight: var(--font-weight-medium);
  }

  .cms-single-more__icon {
    width: 19px;
    height: 19px;
  }

  /* お知らせ扉(/news) — カテゴリを記事リストの上に配置し1カラム構成にする */
  .news-hub-section__inner {
    padding: 40px 20px 64px;
  }

  .news-hub-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .news-hub-categories__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .news-hub-list__item {
    gap: 12px;
    padding-block: 16px;
  }

  .news-hub-list__title {
    font-size: 0.9375rem;
  }

  .news-hub-pagination {
    margin-top: 40px;
  }

  /* 単体記事ページの「他の記事も見る」リンクと同じ見た目(16px/矢印19px)に揃える。
     .nomlog-pagination を使う全ページ(nomlog TOP・お知らせ扉)に共通で適用する。 */
  .nomlog-pagination__link,
  .nomlog-pagination__current,
  .nomlog-pagination__ellipsis {
    font-size: 1rem;
    /* 16px */
  }

  .nomlog-pagination__next,
  .nomlog-pagination__prev {
    width: 19px;
    height: 19px;
  }

  .nomlog-pagination__next svg,
  .nomlog-pagination__prev svg {
    width: 8px;
    height: 8px;
  }

  /* お問い合わせ(/contact) 共通 */
  .contact-header {
    margin-top: 40px;
    margin-bottom: 56px;
  }

  .contact-header__title {
    margin-bottom: 16px;
    font-size: 1.75rem;
    /* 28px */
  }

  .contact-header__subtitle {
    font-size: 1rem;
    /* 16px */
  }

  .contact-lead {
    margin-top: 32px;
    text-align: left;
    font-size: 0.9375rem;
  }

  .contact-rows {
    margin-top: 40px;
  }

  .contact-row {
    padding-block: 24px;
    text-align: center;
  }

  .contact-row__text,
  .contact-row__tel {
    text-align: left;
  }

  /* 背景 orb: SP では非表示 */
  .orb {
    display: none;
  }

  /* SP限定の改行 */
  .u-br-sp {
    display: inline;
  }

  /* PC限定の改行(SPでは非表示) */
  .u-br-pc {
    display: none;
  }
}

/* ==========================================================================
   ヘッダー専用の切替点。--bp-sp(768px) とは別軸
   ========================================================================== */
@media (max-width: 960px) {
  .hamburger {
    display: flex;
  }

  .site-header__band {
    height: var(--header-height-sp);
    padding-left: var(--header-logo-left-sp);
  }

  .site-header__logo img {
    width: var(--header-logo-w-sp);
  }

  /* PC の右カラム(ナビ+ボタン)は SP 非表示 */
  .site-header__right {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  .drawer {
    width: min(var(--drawer-width), 400px);
  }
}

/* snow-monkey-forms用の追加スタイル */
.smf-form ul {
  list-style: disc;
  padding-left: 1.5em;
}

.smf-form ol {
  list-style: decimal;
  padding-left: 1.5em;
}


/* ==========================================================================
   404ページ(404.php)専用 — 案内ボタンの並び。PCは横並び(折り返し可)、SPは縦積み。
   ボタン自体の見た目は .btn / .btn--wide / .btn--primary が担当。
   ========================================================================== */
.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

/* 「ネット（スマホ）から調剤予約」(14文字)が .btn--wide の260pxでは矢印に接するため、
   このページのボタンのみ280pxにする(幅はページごとに差があってよい・.btn の規約参照)。 */
.not-found__actions .btn--wide {
  width: 280px;
}

.page-not-found .general-content {
  margin-bottom: 80px;
  padding-inline: 100px;
}

.page-not-found .general-content p {
  margin: 0 auto;
}

.page-not-found .contact-header {
  margin-bottom: 120px;
}

@media (max-width: 768px) {
  .not-found__actions {
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
  }

  .page-not-found .general-content {
    padding-inline: 0;
  }

  .page-not-found .contact-lead {
    text-align: center;
  }
}