/* ============================================================
   安房薬剤師会薬業会
   - Section 順: tokens → base → site-header → drawer → placeholders(他 section は順次置換)
   ============================================================ */


/* ---------- Tokens (CSS Variables) ---------- */
:root {
  /* Colors */
  --color-text: #333333;            /* variable TEXT */
  --color-accent: #008DCD;          /* variable LIGHT(プライマリブルー) */
  --color-accent-strong: #007BB6;   /* hover/active 用に少し濃い系(observed estimate, hero pass で確認) */
  --color-bg: #FFFFFF;              /* observed page BG(hero reference より、cream ではなく white-ish) */
  --color-surface: #FFFFFF;         /* card / drawer panel */
  --color-text-on-accent: #FFFFFF;
  --color-border: rgba(51, 51, 51, 0.1); /* 線 / divider 暫定。news/organization pass で確定 */
  --color-overlay: rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-jp-display: 'FOT-Rodin ProN', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-jp-text: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-en: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-en-microcopy: 'Kumbh Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-en-section: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-padding-x: 24px;
  --header-height: 90px;

  /* Effects */
  --shadow-card: 0 4px 34px rgba(0, 0, 0, 0.05); /* variable SHADOW */
  --shadow-header-scrolled: 0 2px 12px rgba(0, 0, 0, 0.08);
  --transition-base: 200ms ease;
  --transition-drawer: 320ms cubic-bezier(0.32, 0.72, 0.32, 1);

  /* Z-index */
  --z-header: 100;
  --z-drawer: 200;
}


/* ---------- Base ---------- */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-jp-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden; /* 装飾 wave / overflow するセクションで横スクロールを抑止 */
}

body {
  min-height: 100vh;
}

/* reset.css は ul/ol の list-style と一部 img/a 仕様を残しているので、本ファイルで補正 */
ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}

a:visited {
  color: inherit;
}

img, svg {
  display: block;
}

/* reset.css の `img { width: 100%; max-width: 100%; }` は per-element class で必要に応じ上書き */

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

body.drawer-open {
  overflow: hidden;
}


/* ============================================================
   Section: site-header
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.scrolled {
  background: var(--color-bg);
  box-shadow: var(--shadow-header-scrolled);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  /* Figma reference 高 95px、logo 57px → 上下余白 (95-57)/2 ≈ 19px、ただし Playwright 実測 +4px 必要 */
  padding: 21px 16px 21px 28px;
  /* 1440 で中央寄せ。viewport が広いときは左右に対称な余白(背景色)が出る案 2 構成。 */
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* Brand (logo + 2-line text) */
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 13px; /* 28→92 から logo→text の余白 ≈ 13px */
  flex-shrink: 0;
  color: var(--color-text);
}

.site-header__logo {
  /* reset.css の `img { width: 100%; }` を打ち消す。!important で確実に */
  width: 51px !important;
  height: 30px !important;
  max-width: none !important;
  flex-shrink: 0;
}

.site-header__brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  font-family: var(--font-jp-display);
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-header__brand-sub {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.site-header__brand-main {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 2px;
  white-space: nowrap;
}

/* Nav */
.site-header__nav {
  margin-left: auto;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header__nav-list a {
  display: inline-block;
  font-family: var(--font-jp-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text);
  white-space: nowrap;
}

.site-header__nav-list a:visited {
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  .site-header__nav-list a:hover {
    color: var(--color-accent);
  }
}

/* CTA */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 229px;
  height: 53px;
  /* Figma 実測: text x=1226-1394, button x=1195-1424 → 左 31, 右 30 */
  padding: 0 31px;
  margin-left: 16px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-jp-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 9999px;
  white-space: nowrap;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.site-header__cta:visited {
  color: var(--color-text-on-accent);
}

@media (hover: hover) and (pointer: fine) {
  .site-header__cta:hover {
    background: var(--color-accent-strong);
    color: var(--color-text-on-accent);
  }
}

/* Mobile menu toggle (hidden on desktop) */
.site-header__menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: calc(var(--z-drawer) + 1);
}

.site-header__menu-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ============================================================
   Section: drawer (mobile/tablet)
   ============================================================ */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
  visibility: hidden;
}

.drawer.open {
  pointer-events: auto;
  visibility: visible;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--transition-drawer);
}

.drawer.open .drawer__overlay {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: var(--color-surface);
  padding: 96px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(100%);
  transition: transform var(--transition-drawer);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

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

.drawer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-jp-display);
  color: var(--color-text);
}

.drawer__brand img {
  width: 51px !important;
  height: 30px !important;
  max-width: none !important;
  flex-shrink: 0;
}

.drawer__brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.drawer__brand-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.drawer__brand-main {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer__nav a {
  display: block;
  padding: 14px 8px;
  font-family: var(--font-jp-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.drawer__nav a:visited {
  color: var(--color-text);
}

.drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  margin-top: 8px;
  padding: 0 24px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-jp-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 9999px;
}

.drawer__cta:visited {
  color: var(--color-text-on-accent);
}


/* ============================================================
   Site main / footer placeholders (各 section の Phase 2S-a で置換)
   ============================================================ */

.site-main {
  /* hero は header 高さ分下に配置(scroll 0 で header が photo に被らない & Playwright capture が hero 単体を取れる) */
  padding-top: var(--header-height);
}

/* anchor jump 時の scroll offset */
[data-section]:not([data-section="hero"]):not([data-section="header"]) {
  scroll-margin-top: var(--header-height);
}


/* ============================================================
   Section: hero
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  /* hero element 高 = reference 647px(user の Slice export size に合わせる)。
     photo は absolute で y=89-728 に配置 → 下端が hero element からはみ出すが、
     overflow visible で次 section と境目が連続する。Playwright capture は .hero box (647) 内 */
  height: 647px;
  overflow: visible;
}

.hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* 案 2: 1440 で中央寄せ。photo / microcopy / tagline はすべて inner 内 left 基準。
     wave-bg だけは .hero の直接子に出して viewport 全幅で追従させる(下記参照)。 */
}

/* WAVE BG decoration(`55:16`)— hero〜news 上端まで覆う大型波装飾 / photo より前面で wave-bottom 効果を生む */
.hero__wave-bg {
  /* .hero (width:100%, position:relative) の直接子として配置。
     hero__inner が 1440 中央寄せされても、wave-bg だけは viewport 全幅に追従。
     viewport 1440 で Figma の left:-228 / width:1956 / height:1485 / rotate(1.908deg)。
     1440 超でも右端まで届くよう viewport に追従して幅を取る(viewport + 516)。 */
  position: absolute;
  left: -228px;
  top: 410px;
  width: calc(100vw + 516px) !important;
  height: 1485px !important;
  max-width: none !important;
  transform: rotate(1.908deg);
  transform-origin: top left;
  pointer-events: none;
  z-index: 3;
}

/* 縦書き microcopy(英語、左) */
.hero__microcopy {
  z-index: 2;
  position: absolute;
  /* 案 2: inner 1440 中央寄せ内の Figma 元位置(left:130) */
  left: 130px;
  top: 96px;
  width: 21px;
  height: 329px;
  margin: 0;
  font-family: var(--font-en-microcopy);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.07em;
  color: var(--color-accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-feature-settings: normal;
  font-variation-settings: 'YOPQ' 300;
}

/* 縦書きタグライン(日本語、メイン)— 2 列 */
.hero__tagline {
  z-index: 2;
  position: absolute;
  /* 案 2: inner 1440 中央寄せ内の Figma 元位置(left:191) */
  left: 191px;
  top: 88px;
  width: 96px;
  height: 336px;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  gap: 34px;
  font-family: var(--font-jp-display);
  font-weight: 600;
  font-size: 38px;
  line-height: 48px;
  letter-spacing: 0.05em;
  color: var(--color-text);
  white-space: nowrap;
}

.hero__tagline-line {
  display: inline-block;
  width: 31px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* hero photo(波形マスク付き)*/
.hero__photo {
  position: absolute;
  /* 案 2: inner 1440 中央寄せ内の Figma 元位置(left:438, x=438-1440) */
  left: 438px;
  top: 4px;
  width: 1002px;
  height: 639px;
  z-index: 2; /* WAVE BG より前 */
  /* mask: alpha-mode で SVG を活用(mask-mode: alpha は Safari 17.4+) */
  -webkit-mask: url('../images/hero-photo-mask.svg') center / 100% 100% no-repeat;
          mask: url('../images/hero-photo-mask.svg') center / 100% 100% no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

.hero__photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

/* hero responsive
   - 1219+ (PC):  1440 中央寄せ + 写真 / catchcopy / 波が Figma 通り
   - 769〜1218: 1440 デザインを viewport 比率にスケールダウン(構図保持)
   - 〜768  (SP): 縦積み flex column(縦書き → 横書きに切替) */

/* 1218〜769: 個別 calc スケーリング。Figma 1440 の各値を `N * 100vw / 1440` に置き換え、
   left / top / width / height / font-size / line-height / gap すべてが viewport 幅に
   比例して縮小される。transform: scale を使わないので文字も rasterize されず鮮明、
   catchcopy のサイズ感が画像と正しいバランスで viewport に追従する。
   (CSS calc() は `number * vw / number` は valid、`px * (vw/px)` は無効なので素直に書く)

   2 つの調整:
   - hero__photo: mask-size を 101%/101% に拡張(calc 縮小時の subpixel rounding で box 角
     が露出する subpixel bleed を覆う)
   - catchcopy / microcopy: font-size と box / line-height / gap に max() で下限を設定。
     768 直前まで縮小しても可読性を保ち、Figma 比率は保ちつつ文字が小さくなり過ぎない。 */
@media (max-width: 1218px) and (min-width: 769px) {
  .hero {
    height: calc(647 * 100vw / 1440);
  }
  .hero__inner {
    width: 100%;
    max-width: none;
    height: calc(647 * 100vw / 1440);
    margin: 0;
  }
  .hero__photo {
    left: calc(438 * 100vw / 1440);
    top: calc(4 * 100vw / 1440);
    width: calc(1002 * 100vw / 1440);
    height: calc(639 * 100vw / 1440);
  }
  .hero__microcopy {
    left: calc(130 * 100vw / 1440);
    /* 中間帯では writing-mode:vertical-rl の text が overflow:visible で box から溢れ、
       狭い viewport では hero 下端を超えて pharmacy-search 領域に侵入し、波 SVG path で
       末尾文字が隠される。top を Figma 96 → 約 30(viewport 比率)に上シフトして
       text 末尾も hero 内 / pharmacy 上端波より上に収める。 */
    top: max(12px, calc(40 * 100vw / 1440));
    width: max(17px, calc(21 * 100vw / 1440));
    height: max(271px, calc(329 * 100vw / 1440));
    font-size: max(14px, calc(17 * 100vw / 1440));
  }
  .hero__tagline {
    /* タブレット中間帯は Figma 1440 と同じ縦書き 2 列(span 2 つを flex で並列)を維持 */
    left: calc(191 * 100vw / 1440);
    top: calc(88 * 100vw / 1440);
    width: max(72px, calc(96 * 100vw / 1440));
    height: max(252px, calc(336 * 100vw / 1440));
    font-size: max(28px, calc(38 * 100vw / 1440));
    line-height: max(36px, calc(48 * 100vw / 1440));
    gap: max(26px, calc(34 * 100vw / 1440));
  }
  .hero__tagline-line {
    width: max(23px, calc(31 * 100vw / 1440));
  }
  .hero__wave-bg {
    /* ベース定義の `height: 1485px !important` を中間帯で確実に上書きするため !important 必須。
       これがないと viewport 縮小時に wave-bg の SVG 高さが固定 1485 で残り、
       SVG 内の波形 path 位置が photo 縮小と合わず、photo 左下 corner を覆い切れない。
       さらに photo 左下 corner を確実に覆うため、top を Figma 410 より上にシフト。 */
    top: calc(380 * 100vw / 1440) !important;
    height: calc(1485 * 100vw / 1440) !important;
  }
}

/* SP: 768 以下は縦積み flex に切替 */
@media (max-width: 768px) {
  .hero {
    height: auto;
    /* photo height と wave-bg top で参照する共有変数。viewport で変動 */
    --photo-h: clamp(220px, 60vw, 360px);
  }
  .hero__inner {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 24px 16px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: none;
  }
  .hero__microcopy,
  .hero__tagline,
  .hero__photo {
    position: static;
  }
  .hero__photo {
    /* SP: photo を viewport 全幅に。inner の padding-x 16 を negative margin で相殺し、
       photo 上端の波形マスクが viewport 端から端まで延びるようにする。 */
    width: 100vw;
    margin-left: -16px;
    margin-right: -16px;
    flex: 0 0 auto;
    height: 360px;
  }
  .hero__wave-bg {
    top: 374px;
    height: calc(1485 * 100vw / 1440) !important;
    z-index: 3;
  }
  .hero__tagline {
    /* SP 768(iPad Mini): 横書き 1 行構成。span 2 つを横並び flex row で
       「地域に寄り添い」+「健康を支えます」を連結して 1 行表示。
       より狭い viewport(<=600px)では下の規則で 2 行構成に切替。 */
    flex: 0 0 auto;
    width: auto;
    height: auto;
    font-size: 28px;
    line-height: 1.3;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    gap: 0;
  }
  .hero__microcopy {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    font-size: 14px;
    writing-mode: horizontal-tb;
  }
  .hero__tagline-line {
    writing-mode: horizontal-tb;
    width: auto;
  }
}

@media (max-width: 430px) {
  .hero__inner {
    min-height: 0;
  }
  .hero__photo {
    height: 280px;
  }
}

/* SP narrow: 600 以下では catchcopy を 2 行構成に切替(iPhone 等で行末がはみ出るのを防ぐ) */
@media (max-width: 600px) {
  .hero__tagline {
    flex-direction: column;
    gap: 4px;
  }
}


/* ============================================================
   Common: section heading(各 section の見出し共通スタイル)
   ============================================================ */

.section-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: nowrap;
}

.section-heading--inline {
  /* "薬局を探す" + "SEARCH PHARMACY" を横並びにする */
  flex-direction: row;
  align-items: baseline;
}

.section-heading__title {
  font-family: var(--font-jp-text);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: 0.06em;
  color: var(--color-text);
  line-height: 1;
}

.section-heading__en {
  font-family: var(--font-en-section);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  line-height: 1;
}

/* セクション見出しを catchcopy(hero__tagline)と同じスケーリングで viewport 縮小に追随。
   1218〜1025 中間帯: 40px → 約 28px へリニアに縮小、SP では下限 28px に固定。 */
@media (max-width: 1218px) {
  .section-heading__title {
    font-size: max(28px, calc(40 * 100vw / 1440));
  }
  .section-heading__en {
    font-size: max(16px, calc(22 * 100vw / 1440));
  }
}


/* ============================================================
   Section: pharmacy-search
   ============================================================ */

.pharmacy-search {
  position: relative;
  width: 100%;
  /* user 指定: padding-top 130(視覚調整、hero との接続深く取る)。
     section の bbox はその分高くなるが、reference との y 開始位置整合を優先。
     bottom は 0 にして、cards 直後に news が来るようにする。 */
  padding: 230px 0 0;
  margin-top: -161px; /* 130(pt) + 53(旧 pb 由来 cushion)+ -67(hero と接続)= 旧合計 -67 を維持しつつ pt 130 採用 */
}

.pharmacy-search__inner {
  position: relative;
  z-index: 4; /* hero wave-bg(z:3)の上に heading + cards を載せる */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  /* Figma: 薬局を探す x=120, cards x=120-1320。コンテナ自体が x=120 に来るので inner padding 0 */
}

@media (max-width: 1248px) {
  .pharmacy-search__inner {
    padding: 0 var(--container-padding-x);
  }
}

.pharmacy-search .section-heading {
  /* reference 実測 heading area = 100 logical(title 40 + 60 gap-to-cards) */
  padding-top: 0;
  padding-bottom: 60px;
  gap: 33px;
}

.pharmacy-search__cards {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 43px; /* reference 実測:cards 計 6×164 + 5×43 = 1199 ≈ container 1200 */
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 4; /* WAVE BG (hero z=3) より前 */
}

.pharmacy-card {
  flex: 1 1 0;
  min-width: 0;
}

.pharmacy-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 167px;
  padding: 0 8px;
  background: #FFFFFF;
  border-radius: 23px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  color: var(--color-text);
}

.pharmacy-card__link:visited {
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  .pharmacy-card__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  }
}

.pharmacy-card__icon-wrap {
  position: relative;
  width: 99px;
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.pharmacy-card__icon-bg {
  position: absolute;
  inset: 0;
  width: 99px !important;
  height: 99px !important;
  max-width: none !important;
  z-index: 1;
}

.pharmacy-card__icon {
  position: relative;
  z-index: 2;
  width: 92px !important;
  height: 92px !important;
  max-width: none !important;
}

.pharmacy-card__icon--car {
  width: 56px !important;
  height: 43px !important;
}
.pharmacy-card__icon--home {
  width: 66px !important;
  height: 50px !important;
}
.pharmacy-card__icon--night {
  width: 64px !important;
  height: 64px !important;
}
.pharmacy-card__icon--calendar {
  width: 64px !important;
  height: 64px !important;
}
.pharmacy-card__icon--pill {
  width: 56px !important;
  height: 56px !important;
}

.pharmacy-card__label {
  font-family: var(--font-jp-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.07em;
  color: var(--color-text);
  white-space: nowrap;
}

@media (max-width: 1218px) {
  .pharmacy-search__cards {
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  .pharmacy-search__cards {
    flex-wrap: wrap;
    gap: 16px;
  }
  .pharmacy-card {
    flex: 1 1 calc(33.333% - 16px);
    min-width: 0;
  }
}

/* SP narrow: 600 以下で 2 列に切替(catchcopy の 2 行構成ブレークポイントと一致)。
   iPad Mini(768)は上位 1024 ルールの 3 列を継承。 */
@media (max-width: 600px) {
  .pharmacy-search {
    padding-top: 180px;
  }
  .pharmacy-card {
    flex-basis: calc(50% - 8px);
  }
}

@media (min-width: 431px) and (max-width: 600px) {
  .pharmacy-search {
    padding-top: 120px;
  }
}

@media (max-width: 480px) {
  .pharmacy-search .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .section-heading__title {
    font-size: 28px;
  }
  .section-heading__en {
    font-size: 18px;
  }
}

/* ============================================================
   Section: news
   ============================================================ */

.news {
  position: relative;
  width: 100%;
  /* reference 実測 472 logical = 65(pt)+ 282(rows)+ 28(CTA gap)+ 53(CTA)+ 44(pb)
     ピクセル diff で row が ~15px 上にずれていたため pt を 50→65 に。 */
  padding: 120px 0 44px;
}

.news__inner {
  position: relative;
  z-index: 4; /* hero wave-bg(z:3)の上 */
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 232px; /* x=120(container) + 112(heading 領域) → x=232 から content */
}

.news__heading {
  position: absolute;
  left: 0; /* viewport x=120 = container left */
  top: 7px; /* reference top edge of heading bbox = section local y=72 - section pt 65 = 7 */
  display: flex;
  flex-direction: row; /* NEWS(左) + お知らせ(右) — reference 実測 */
  align-items: flex-start;
  gap: 15px;
}

.news__heading-jp {
  order: 2; /* お知らせ は flex row 内で右側 */
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: var(--color-text);
  letter-spacing: 0.48px;
  white-space: nowrap;
}

.news__heading-en {
  order: 1; /* NEWS は左側 */
  margin: 0;
  writing-mode: vertical-rl;
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: 10.8px;
  white-space: nowrap;
}

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

.news__item {
  display: grid;
  grid-template-columns: 91px 152px 1fr;
  column-gap: 20px;
  align-items: center;
  min-height: 74px; /* Figma 実測 row height = 74、タイトル 2 行時は伸長許容 */
  padding: 0;
  border-bottom: 1px solid var(--color-line, #E0E0E0);
}

.news__item:first-child {
  padding-top: 0; /* 第 1 row は section padding-top に依存 */
  padding-bottom: 18px; /* タイトル 2 行(48 高)時に line との視覚距離を確保 */
}

.news__date {
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 1.6px;
  align-self: center;
}

.news__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 31px;
  border-radius: 5px;
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: var(--color-text);
  align-self: center;
}

.news__category--info {
  background: #BADDED;
}

.news__category--event {
  background: #BADDED;
}

.news__title {
  font-family: var(--font-jp-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  letter-spacing: 1.6px;
  text-decoration: none;
  align-self: center;
  display: block;
  /* Figma row 1 は 2 行(48 高さ)、他 row は 1 行(24)。
     CSS は flex で auto-fit、表示行数は内容次第。Reference 一致のため第 1 row を多めに。 */
}

@media (hover: hover) and (pointer: fine) {
  .news__title:hover {
    color: var(--color-accent);
  }
}

.news__title:visited {
  color: inherit;
}

.news__cta {
  position: relative;
  display: flex; /* block-level flex で margin:auto が機能 */
  align-items: center;
  justify-content: center;
  width: 229px;
  height: 53px;
  border-radius: 50px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-jp-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.8px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  margin: 28px 0 0 auto; /* CTA right-align within news__inner content area */
}

.news__cta:visited {
  color: #fff;
}

.news__cta-label {
  display: inline-block;
}

.news__cta-arrow {
  position: absolute;
  right: 22px; /* Figma: vector x=1296 / button right edge x=1320 → 24px from right(arrow w=6 → 22 で中央寄せ調整) */
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 13px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 13' fill='none'><path d='M1 1l4 5.5L1 12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (hover: hover) and (pointer: fine) {
  .news__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 141, 205, 0.25);
  }
}

/* 1218〜1025: PC 版の縦書き heading レイアウトを維持(iPad Air 横向き 1180 含む)。
   コンテナ padding と heading 左余白だけ詰める。 */
@media (max-width: 1218px) {
  .news__inner {
    padding-left: 200px;
    padding-right: var(--container-padding-x);
  }
}

/* 1024 以下: iPad Air 縦向き(820)以下のサイズでは PC 版の縦書き heading +
   横並び list が窮屈なため、768 以下と同じ横並び heading / 横書きスタイルに
   切替。NEWS 36px / お知らせ 18px でデスクトップの 2:1 hierarchy を維持。 */
@media (max-width: 1024px) {
  .news__inner {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }
  .news__heading {
    position: static;
    flex-direction: row;
    width: auto;
    height: auto;
    margin-bottom: 24px;
    align-items: baseline;
    gap: 12px;
  }
  .news__heading-jp,
  .news__heading-en {
    position: static;
    writing-mode: horizontal-tb;
    line-height: 1;
  }
  .news__heading-en { font-size: 36px; letter-spacing: 5px; }
  .news__heading-jp { font-size: 18px; }
  .news__item { grid-template-columns: 80px 120px 1fr; column-gap: 16px; }
  .news__category { width: 110px; }
}

/* SP: date + カテゴリ を 1 行目、タイトルを 2 行目に分割して可読性を上げる。
   1 行に詰めると title が短く折り返され、metadata と本文の階層が読み取りにくい。
   grid-template-columns は `auto 1fr` — date を content 幅、残りを 1fr に
   吸収させることで、title の長文に引きずられて column が広がるのを防ぐ。 */
@media (max-width: 768px) {
  .news__item {
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 8px;
    padding: 16px 0;
  }
  .news__date { grid-column: 1; grid-row: 1; }
  .news__category {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    width: auto;
    padding: 0 12px;
  }
  .news__title { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 480px) {
  .news__cta { width: 100%; }
}


/* ============================================================
   Section: footer
   ============================================================ */

.site-footer {
  position: relative;
  width: 100%;
  background: #EFEFEF;
  margin-top: 0; /* contact bottom 5524 → footer start 5524 */
  /* 固定 height + position absolute は中間帯で破綻するので padding ベースに */
  padding: 53px 60px 32px;
}


.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  /* grid 2 段構成: 上段に brand + nav、下段に copyright (右寄せ)。
     copyright を flex 内で nav と取り合うと中間帯で nav が 2 行になるため独立させる。 */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 8px;
  align-items: start;
}

.site-footer__brand-block {
  /* 左カラム、2 行分跨ぐ */
  grid-column: 1;
  grid-row: 1 / 3;
  width: 350px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--color-text);
}

.site-footer__logo {
  width: 51px;
  height: 30px;
  flex-shrink: 0;
}

.site-footer__brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.site-footer__brand-sub {
  font-family: var(--font-jp-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.7px;
  margin-bottom: 6px;
}

.site-footer__brand-main {
  font-family: var(--font-jp-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
}

.site-footer__address {
  margin: 22px 0 0; /* address y=5651 - logo bottom (5577+57) = 17 ≈ */
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2.56px;
  color: #2E2E2E;
}

.site-footer__tel {
  margin: 3px 0 0; /* tel y=5684, addr bottom 5651+30=5681 → 3 */
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Lato', var(--font-jp-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2.56px;
  color: #2E2E2E;
}

.site-footer__tel-num {
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 2.88px;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__tel-num:visited {
  color: var(--color-accent);
}

.site-footer__nav {
  /* 右カラム上段。grid 右セル全幅を占有し、copyright と幅を取り合わない */
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin-top: 30px; /* PC で brand 上端から nav 上端への offset (y=83 - y=53 = 30) */
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* 残りスペース内で中央寄せ */
  gap: 20px 40px;
}

.site-footer__nav a {
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2.56px;
  color: #2E2E2E;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.site-footer__nav a:visited {
  color: #2E2E2E;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover { color: var(--color-accent); }
}

.site-footer__copyright {
  /* 右カラム下段、右寄せ。grid 下段なので nav の幅を奪わない */
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;
  font-family: var(--font-jp-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 2.24px;
  color: #000;
  white-space: nowrap;
}

/* 1025-1099 の狭いデスクトップ帯: brand と nav の隙間を縮めて nav を 1 行で収める */
@media (max-width: 1099px) and (min-width: 1025px) {
  .site-footer__inner {
    column-gap: 6px;
  }
  .site-footer__nav ul {
    gap: 20px 24px;
  }
}

@media (max-width: 1024px) {
  .site-footer { padding: 60px 24px 40px; }
  /* column stack。SP では nav はヘッダー drawer と重複するため非表示 */
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .site-footer__brand-block { width: 100%; max-width: 350px; }
  .site-footer__nav { display: none; }
  .site-footer__copyright { margin: 0; text-align: center; }
}


/* ============================================================
   Section: contact
   ============================================================ */

.contact {
  position: relative;
  width: 100%;
  height: 668px; /* Y 4856-5524 = 668 */
  background: #F1F8FC;
  margin-top: 0; /* organization bottom 4856 → contact start 4856 */
  overflow: hidden; /* wave 装飾が section 外にはみ出すのを抑制 */
}

.contact__wave-left {
  /* Figma 55:4 Layer Properties:
     width: 888.299px, height: 584.154px(SVG viewBox サイズ),
     transform: rotate(-5.231deg) */
  position: absolute;
  left: -337px;
  top: -128px;
  width: 888.299px !important;
  height: 584.154px !important;
  max-width: none !important;
  transform: rotate(-5.231deg);
  pointer-events: none;
  z-index: 0;
}

.contact__wave-right {
  /* Figma 55:5 Layer Properties:
     width: 1077.808px, height: 708.745px(SVG viewBox サイズ),
     transform: rotate(174.769deg) */
  position: absolute;
  right: -220px;
  top: 150px;
  width: 1077.808px !important;
  height: 708.745px !important;
  max-width: none !important;
  transform: rotate(174.769deg);
  pointer-events: none;
  z-index: 0;
}

.contact__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
}

.contact__heading {
  position: absolute;
  left: 50%;
  top: 96px; /* CONTACT y=4952 - section start 4856 = 96 */
  transform: translateX(-50%);
  text-align: center;
  width: 412px;
}

.contact__heading-en {
  margin: 0;
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 10.8px;
  color: var(--color-accent);
}

.contact__heading-jp {
  margin: 19px 0 0; /* en bottom 4952+60=5012, jp y=5031 → gap 19 */
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 4.16px;
  color: var(--color-text);
}

.contact__lead {
  position: absolute;
  left: 50%;
  top: 262px; /* y=5118 - 4856 = 262 */
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-jp-text);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1.6px;
  color: var(--color-text);
  /* 折り返し発生時(SP)も常に中央揃え */
  text-align: center;
  white-space: nowrap;
}

.contact__info {
  /* どの画面幅でも画面中央配置。1200px max-width 内で計算すると元の left: 268px と
     ほぼ同じだが、1025-1199 の中間帯では viewport 中央と一致しないので 50% + 中央寄せ。
     高さは固定せず padding + content で自然に決まるようにする(SP で wrap した時に
     オーバーフローしないため)。 */
  position: absolute;
  left: 50%;
  top: 337px; /* y=5193 - 4856 = 337 */
  transform: translateX(-50%);
  width: 664px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 39px 50px; /* text top y=5232 - box top y=5193 = 39 */
}

.contact__info-name {
  margin: 0;
  font-family: var(--font-jp-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 1.44px;
  color: var(--color-text);
}

.contact__info-name-break {
  display: none;
}

.contact__info-address {
  margin: 11px 0 0; /* y=5273 - 5232 - 30 line-height = 11 */
  font-family: var(--font-jp-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 1.28px;
  color: var(--color-text);
}

.contact__info-tel {
  margin: 16px 0 0; /* y=5319 - 5273 - 30 = 16 */
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Lato', var(--font-jp-text);
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 1.28px;
  color: var(--color-text);
}

.contact__info-tel-label {
  font-weight: 700;
}

.contact__info-tel-num {
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 2.88px;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* 「0470-24-」「2768」のように番号が wrap して 2 カラムに見える事故を防ぐ */
  white-space: nowrap;
}

.contact__info-tel-num:visited {
  color: var(--color-accent);
}

.contact__mascot {
  position: absolute;
  left: 836px; /* x=956 - 120 = 836 */
  top: 399px; /* mascot img y=5255 - 4856 = 399 */
  width: 156px;
  text-align: center;
  z-index: 2;
}

.contact__mascot img {
  width: 156px;
  height: 168px;
  display: block;
  margin: 0 auto;
}

.contact__mascot-label {
  margin: 12px 0 0; /* mascot bottom 5423, label y=5435 → 12 */
  font-family: var(--font-jp-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

@media (max-width: 1024px) {
  .contact { height: auto; padding: 80px 0 60px; }
  .contact__heading, .contact__lead, .contact__info, .contact__mascot { position: static; transform: none; }
  .contact__heading { margin: 0 auto; }
  .contact__lead { margin: 24px auto 0; white-space: normal; padding: 0 24px; }
  /* SP では padding を縮めて狭い viewport でも内側コンテンツが収まるように。
     1024 直下で 976 まで横に伸びると横長すぎるので max-width で抑える。 */
  .contact__info { width: calc(100% - 48px); max-width: 600px; margin: 32px auto 0; padding: 28px 28px; }
  .contact__mascot { margin: 24px auto 0; }
  /* PC の section height 668 前提の top:150 だと縦長セクションで上方に偏るため、
     bottom 基準に変更してセクション底部右下に再配置。サイズも viewport に合わせて縮小。 */
  .contact__wave-right {
    top: auto;
    bottom: -100px;
    right: -200px;
    width: 800px !important;
    height: 526px !important;
  }
}

@media (max-width: 768px) {
  .contact__wave-right {
    bottom: -100px;
    right: -100px;
    width: 650px !important;
    height: 427px !important;
  }
}

@media (max-width: 600px) {
  .contact__heading {
    width: calc(100% - 48px);
  }
  .contact__heading-en {
    font-size: 40px;
    letter-spacing: 6px;
  }
  .contact__heading-jp {
    font-size: 18px;
    letter-spacing: 2px;
  }
  .contact__info-name-break {
    display: inline;
  }
}

/* 354px 以下: TEL/FAX 行は label と num が同じ行に収まらないため、縦並びに切替 */
@media (max-width: 354px) {
  .contact__info-tel {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}


/* ============================================================
   Section: organization
   ============================================================ */

.organization {
  position: relative;
  width: 100%;
  /* 高さは photo + content の自然フローで決まる(固定 height は使わない) */
}

.organization__inner {
  /* 左コンテンツ + 右 photo の 2 カラム flex。photo は viewport 右端まで bleed。
     align-items: stretch で photo の高さを main に追従させ、下部の白余白を出さない。 */
  display: flex;
  align-items: stretch;
  width: 100%;
}

.organization__main {
  /* 左カラム: container 内に収まる。padding-left は max() で
     viewport 幅 ≥ 1200 のときコンテナ左端と一致、それ未満ではフォールバック。
     padding は clamp で画面幅に応じて連続縮小し、photo 側も連動して小さくなる。 */
  flex: 1 1 auto;
  min-width: 0;
  padding-top: clamp(40px, 6.5vw, 93px);     /* PC 93 → narrow 40 */
  padding-bottom: clamp(40px, 6.7vw, 96px);  /* PC 96 → narrow 40 */
  padding-left: max(var(--container-padding-x), calc((100vw - var(--container-max)) / 2));
  padding-right: 60px;
}

.organization__heading-en {
  margin: 0;
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  /* PC 1440 で 48px、viewport が狭くなるにつれリニアに縮小して 2 列レイアウトを
     維持(photo に被らない)。下限 20px で SP narrow でも可読性確保。
     letter-spacing も連動。 */
  font-size: clamp(20px, 3vw, 48px);
  line-height: 1;
  letter-spacing: clamp(2px, 0.6vw, 8.64px);
  color: var(--color-accent);
}

.organization__heading-jp {
  margin: clamp(10px, 1.5vw, 22px) 0 0;
  font-family: var(--font-jp-display);
  font-weight: 500;
  /* 見出しなので doc-label(最低 16px) より常に大きく。最低 18px、PC 1440 で 26px。 */
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1;
  letter-spacing: clamp(1.8px, 0.3vw, 4.16px);
  color: var(--color-text);
}

.organization__doc-list {
  width: 530px;
  max-width: 100%;
  /* PC 1440 で 89px → narrow viewport で 30px まで縮小し、section 下部の白余白を抑える */
  margin: clamp(30px, 6.2vw, 89px) 0 0;
  padding: 0;
  list-style: none;
}

.organization__doc-list li {
  border-bottom: 1px solid var(--color-line, #E0E0E0);
}

.organization__doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* PC 1440 で 84px / 18px / 2.88px → narrow viewport では小さく連動縮小。
     font-size は本文 / リンクラベルの最低 16px を保証(1280px 以下は 16px 固定)。 */
  height: clamp(64px, 5.8vw, 84px);
  padding: 0 5px;
  text-decoration: none;
  color: #000;
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: clamp(16px, 1.25vw, 18px);
  letter-spacing: clamp(2px, 0.2vw, 2.88px);
  transition: color var(--transition-base);
}

.organization__doc:visited {
  color: #000;
}

@media (hover: hover) and (pointer: fine) {
  .organization__doc:hover {
    color: var(--color-accent);
  }
}

.organization__doc-arrow {
  /* PC 1440 で 40px → narrow viewport で 32px に連動縮小。doc-label 16px に
     合わせてバランスのよい円サイズ。SP stack 時は別途復帰。 */
  width: clamp(32px, 2.8vw, 40px);
  height: clamp(32px, 2.8vw, 40px);
  border-radius: 50%;
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 1l6 5-6 5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(10px, 0.83vw, 12px) clamp(10px, 0.83vw, 12px);
  flex-shrink: 0;
}

.organization__photo {
  /* 右カラム: PC 1440 で 680×710、narrow viewport では shrink。
     flex 0 1 680px = basis 680、shrink 可、grow 不可。aspect-ratio は撤去し、
     align-items: stretch で main の高さに自動追従(下部の白余白を回避)。
     角は Figma デザイン踏襲のため radius なし。 */
  flex: 0 1 680px;
  min-width: 0;
  align-self: stretch;
}

.organization__photo-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

/* SP narrow: 600px 以下では 2 列だと photo が小さくなり過ぎる + 本文密度が低下
   するため、column レイアウトに切替。photo は本来 stretch だが
   stack 時は align-self を解除し、aspect-ratio で高さを決める。
   doc / arrow は viewport に余裕ができるので clamp の下限から少し戻して可読性確保。 */
@media (max-width: 600px) {
  .organization__inner {
    flex-direction: column;
    padding: 60px var(--container-padding-x);
  }
  .organization__main {
    width: 100%;
    padding: 0;
  }
  .organization__heading-en {
    font-size: clamp(28px, 8vw, 36px);
    letter-spacing: 0.1em;
  }
  .organization__doc-list {
    width: 100%;
    margin-top: 40px;
  }
  .organization__doc {
    height: 70px;
    font-size: 16px;
    letter-spacing: 2px;
  }
  .organization__doc-arrow {
    width: 36px;
    height: 36px;
    background-size: 11px 11px;
  }
  .organization__photo {
    flex: 0 0 auto;
    width: 100%;
    align-self: auto;
    /* SP では縦長だと photo が支配的になりすぎるので、横長 16:9 で抑える */
    aspect-ratio: 16 / 9;
    margin-top: 40px;
  }
}


/* ============================================================
   Section: activities
   ============================================================ */

.activities {
  position: relative;
  width: 100%;
  background: #F9F8F8; /* Figma Rectangle 78 fill。山の弧より下が見える色 */
  padding: 180px 0 119px;
  overflow: hidden;
}

.activities__wave-top {
  /* Figma 55:7 = 山形 wave 装飾。SVG は「山形の outside」を白で塗ることで、
     section bg(#F9F8F8)の上に上端両側だけ白い天井を作る。 */
  position: absolute;
  left: 50%;
  top: 0;
  width: 1619px !important;
  height: 250px !important;
  max-width: none !important;
  transform: translateX(-50%);
  display: block;
  z-index: 0;
  pointer-events: none;
}

.activities__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
}

/* heading は通常フロー、中央寄せ */
.activities__heading {
  text-align: center;
  margin: 0 auto 95px; /* heading bottom 2575 → first card top 2705 = 130、card 02 offset 63 で実質 row 高揃え */
  width: max-content;
}

.activities__heading-mark {
  /* Figma 55:9 = ACTIVITIES heading 上の小さな wave 装飾 */
  display: block;
  width: 60px;
  height: 35px;
  margin: 0 auto 16px;
}

.activities__heading-en {
  margin: 0;
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 10.8px;
  color: var(--color-accent);
}

.activities__heading-jp {
  margin: 14px 0 0;
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 4.16px;
  color: var(--color-text);
}

/* cards は CSS Grid (2 列)、 偶数 card に上 offset で互い違い配置 */
.activities__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 480px));
  column-gap: 126px; /* 中央 col gap = 663 - 537 = 126 */
  row-gap: 130px; /* row 1 → row 2 の縦間隔(card 03 top 3392 - card 01 photo bottom + body 3210 ≈ 180 baseline、offset 補正で 130) */
  justify-content: center;
}

.activity-card {
  position: relative; /* number の絶対配置の基準にする */
  width: 100%;
  max-width: 480px;
}

/* 互い違いの縦オフセット: card 02 / 04 を下にずらす */
.activity-card--02 { margin-top: 63px; } /* Figma 02 y=2768 - 01 y=2705 = 63 */
.activity-card--04 { margin-top: 58px; } /* Figma 04 y=3450 - 03 y=3392 = 58 */

.activity-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 275;
  border-radius: 20px;
  overflow: hidden;
}

.activity-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* title-bar(70% × 64px、bottom-left)が乗る矩形領域を image 側から
     clip-path で除外。これにより image が title-bar 領域に存在しなくなり、
     photo の rounded clip と title-bar の rounded curve の subpixel 差で
     image content が線として漏れる問題が根本的に発生しない。 */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    70% 100%,
    70% calc(100% - 64px),
    0 calc(100% - 64px)
  );
}

.activity-card__number {
  position: absolute;
  left: -61px;
  top: -63px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid rgba(0, 141, 205, 0.6);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.activity-card__number-text {
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 1.6px;
  color: rgba(0, 141, 205, 0.6);
}

.activity-card__title-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%; /* Figma 336/480 = 70%。image 側の clip-path と一致 */
  height: 64px; /* image 側 clip-path と高さ一致のため min-height ではなく固定 */
  background: #F9F8F8;
  /* top-right は title-bar 独自カード曲線、bottom-left は photo の border-radius
     (20px)と同じ曲線で card 全体の rounded corner を担う。image は clip-path で
     この矩形領域から除外されているため、curve area で image が漏れない。 */
  border-radius: 0 20px 0 20px;
  display: flex;
  align-items: center;
  padding: 8px 15px;
}

.activity-card__title {
  margin: 0;
  font-family: var(--font-jp-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.96px;
  color: var(--color-accent);
}

.activity-card__body {
  margin-top: 18px;
  padding-left: 8px;
  font-family: var(--font-jp-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.64px;
  color: #000;
}

.activity-card__body p {
  margin: 0;
}

.activities__cta-wrap {
  /* cards grid と同じ最大幅(2 col 480px + 126px gap = 1086px)に揃え、CTA を grid 右端に配置 */
  display: flex;
  justify-content: flex-end;
  max-width: calc(480px * 2 + 126px);
  margin: 40px auto 0;
}

.activities__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 229px;
  height: 53px;
  border-radius: 50px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-jp-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.8px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.activities__cta:visited {
  color: #fff;
}

.activities__cta-arrow {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 13px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 13' fill='none'><path d='M1 1l4 5.5L1 12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (hover: hover) and (pointer: fine) {
  .activities__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 141, 205, 0.25);
  }
}

/* 中間域(grid 2 col のまま、列幅を画面幅に追従)。
   inner padding-left を増やして card 左上の number(left:-61 突出)が
   viewport 左端を超えないようにする(85px = number 突出 61 + buffer 24)。
   column-gap は 120(= PC 値 126 に近い)に拡大して、右 card の number 突出
   (left:-61)が左 card 右端に接触しないよう 59px 以上の buffer を確保。 */
@media (max-width: 1248px) {
  .activities__inner {
    padding-left: 85px;
    padding-right: 85px;
  }
  .activities__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 120px;
  }
  .activities__cta-wrap {
    max-width: 100%;
    padding: 0 var(--container-padding-x);
  }
}

/* タブレット以下: 1 列、互い違い解除。number 位置は PC と同じ -61/-63 を維持。
   padding-top は PC(180px)と同じにして wave-top 装飾の下に inner が入り
   込むのを防ぐ。 */
@media (max-width: 1024px) {
  .activities { padding: 180px 0 60px; }
  .activities__inner {
    /* 1 列に切り替わるので extra padding を解除、通常の container padding に */
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
  }
  .activities__heading { margin-bottom: 60px; }
  .activities__list {
    grid-template-columns: minmax(0, 600px);
    row-gap: 80px;
    justify-content: center;
  }
  .activity-card--02,
  .activity-card--04 { margin-top: 0; }
  .activity-card { max-width: 100%; }
  .activities__cta-wrap {
    justify-content: center;
    margin: 60px auto 0;
  }
}

/* 723px 以下:1 列 card centered で card_left が 61px 未満になり、PC 値 left:-61
   だと number が viewport 左端を超える。具体的には:
   - 768viewport: card_left = (720-600)/2 + 24 = 84 → number_left = 23 ✓
   - 722viewport: card_left = 61 → number_left = 0(境界)
   - 700viewport: card_left = 50 → number_left = -11(画面外)
   - 600viewport: card_left = 24 → number_left = -37(画面外)
   そこで 722 以下では left を -20 に縮めて常時画面内に収める。top は PC 値 -63 維持。 */
@media (max-width: 722px) {
  .activity-card__number { left: -20px; }
}

/* 狭幅 SP: card が viewport 全幅で card 高も短くなるので、number を card 上端より
   さらに上(top -55px)に配置して、PC と同じくらい "上に乗っている" 印象を出す。 */
@media (max-width: 600px) {
  .activity-card__number { top: -55px; }
}

@media (max-width: 480px) {
  /* SP narrow: padding-top も 1024- ルールに合わせて wave-top を尊重(PC と同様) */
  .activities { padding: 180px 0 40px; }
  .activities__heading-en { font-size: 40px; letter-spacing: 6px; }
  .activities__heading-jp { font-size: 18px; letter-spacing: 2px; }
  .activity-card__title-bar { width: 80%; padding: 8px 12px; }
  .activity-card__title { font-size: 18px; }
  .activities__cta { width: 100%; }
}


/* ============================================================
   Section: message
   ============================================================ */

.message {
  position: relative;
  width: 100%;
  /* reference 707 logical 一致のため padding 90 / 44 */
  padding: 90px 0 44px;
}

.message__inner {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 540px; /* photo 289 + body extending to 2244-1614 = 630 */
  /* 内部レイアウト: 左 photo card(440×289) + 右 text(x=626 vp = container 506) */
}

.message__photo {
  position: absolute;
  left: 0; /* container x=120 */
  top: 0; /* section local 90 + 0 = 90 (photo top y=1614 - section start 1524 = 90 ✓) */
  width: 440px;
  height: 289px;
  border-radius: 20px;
  overflow: hidden;
}

.message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.message__body {
  /* container 1200 内、left=506(626-120) start、width=489 */
  position: relative;
  z-index: 3; /* decor-photo(z:auto)より前面に */
  margin-left: 506px;
  width: 489px;
  /* y=1646(title)→1715(body)→2127(signature) */
}

.message__title {
  margin: 0;
  font-family: var(--font-jp-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 2.24px;
  color: var(--color-accent);
  /* title y=1646 - section padding 90 - section start 1524 = 32 */
  padding-top: 32px;
}

.message__text {
  margin: 41px 0 0; /* title bottom 1646+28=1674、body top 1715、gap 41 */
  font-family: 'Lato', var(--font-jp-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #000;
  letter-spacing: 1.12px;
}

.message__text p {
  margin: 0; /* Figma の 5 段落構成は line-height 30 のフロー、段落間は spacer p で表現 */
}

.message__text-spacer {
  /* Figma の zero-width space 段落で 30 line-height 分の空行を作る */
  height: 30px;
}

.message__signature {
  margin: 22px 0 0; /* body bottom ~2105、signature 2127、gap 22 */
  font-family: var(--font-jp-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #000;
  letter-spacing: 1.12px;
  text-align: right; /* user 指定: 右揃え */
}

.message__decor-en {
  position: absolute;
  /* MESSAGE x=1335 viewport, w=72 = container right 1320 + 15 → right -15 */
  right: -15px;
  top: 49px; /* y=1663 - section start 1524 - section pt 90 = 49 */
  margin: 0;
  writing-mode: vertical-rl;
  font-family: 'Lato', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: rgba(0, 141, 205, 0.3);
  letter-spacing: 10.8px;
  white-space: nowrap;
  z-index: 2; /* decor-photo(z:auto)より前面 */
}

.message__decor-photo {
  position: absolute;
  /* Rectangle 77: x=1036 y=1965 w=404 h=279 (container left 120 → left:916), 角は左側だけ rounded */
  left: 916px;
  top: 351px; /* y=1965 - 1524(section start) - 90(pt) = 351 */
  width: 404px;
  height: 279px;
  overflow: hidden;
  border-radius: 20px 0 0 20px; /* 左上・左下のみ rounded */
  pointer-events: none;
}

.message__decor-photo img {
  position: absolute;
  inset: 0;
  width: 112.37%;
  height: 109.4%;
  left: -1.95%;
  top: -4.62%;
  max-width: none;
  object-fit: cover;
  opacity: 0.4;
}

/* iPad Air 横向き(1180)までは PC 版 2 列レイアウトを維持(photo 440×289 + body
   489px、decor 装飾あり)。1179 以下で縦積み + decor は配置調整して残す。 */
@media (max-width: 1179px) {
  .message__inner {
    padding: 0 var(--container-padding-x);
    min-height: 0;
  }
  /* photo: 元画像 440×289 のアスペクト比を維持。decor-photo を上に重ねるため
     position:relative + z-index。
     margin-left を viewport 連動 calc で計算し、chairman + decor の結合 bbox
     (= 440 + 160 bleed = 600px)が viewport 中央に来るよう左にシフト。
     chairman 単独 centered だと decor 右 bleed の分視覚的に右寄りに見えるため、
     結合中心を viewport 中心に合わせる。
     margin-bottom 100px は decor の下方向 bleed 分の余白確保。 */
  .message__photo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 440 / 289;
    margin-top: 0;
    margin-bottom: 100px;
    margin-left: max(0px, calc((100vw - 648px) / 2));
    margin-right: auto;
  }
  .message__body {
    position: relative;
    z-index: 2;
    margin-left: 0;
    width: 100%;
  }
  /* decor-en "MESSAGE": PC 版 60px に近い存在感を保つため 56px に。
     縦書きで右余白内に収める。 */
  .message__decor-en {
    right: var(--container-padding-x);
    top: 0;
    font-size: 56px;
    letter-spacing: 8px;
  }
  /* decor-photo: chairman photo の右下に diagonal にオフセットして重ねる。
     chairman は viewport 中央ではなく結合中心揃えのため左にシフトされる。
     - 水平方向: chairman_left = (100vw - 600) / 2、chairman_right = chairman_left + 440
       decor_left = chairman_right - 80(overlap)、decor_right = decor_left + 240
       → right offset = 100vw - decor_right = 50vw - 300 = calc(50% - 300px)
     - 垂直方向: top 170 で chairman 中段、下 81px が chairman 下に bleed
     z-index 1 で chairman の背面、4 角ラウンドして chairman と統一感。 */
  .message__decor-photo {
    position: absolute;
    left: auto;
    right: calc(50% - 300px);
    top: 170px;
    bottom: auto;
    width: 240px;
    height: 200px;
    z-index: 1;
    border-radius: 20px;
  }
  .message__decor-photo img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.4;
  }
}

/* SP narrow: decor-photo はほぼ画面外で見えにくいため非表示、MESSAGE 文字は
   smaller にして縦書きで残す。chairman は再び中央寄せ、photo mb も縮小。 */
@media (max-width: 600px) {
  .message__decor-photo { display: none; }
  .message__decor-en {
    font-size: 40px;
    letter-spacing: 6px;
  }
  .message__photo {
    margin-left: auto;
    margin-bottom: 32px;
  }
}

@media (max-width: 768px) {
  .message__title { font-size: 24px; }
  .message__photo { height: 200px; }
}


.placeholder {
  padding: 60px 24px;
  background: linear-gradient(135deg, rgba(0, 141, 205, 0.04), rgba(0, 141, 205, 0.10));
  border: 1px dashed rgba(0, 141, 205, 0.4);
  margin: 12px 16px;
  border-radius: 12px;
  min-height: 120px;
  font-family: var(--font-jp-text);
  color: rgba(51, 51, 51, 0.6);
}

.placeholder__inner {
  font-size: 14px;
}

.placeholder__inner small {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  color: rgba(51, 51, 51, 0.4);
}


/* ============================================================
   Responsive — header / drawer
   ============================================================ */

/* 1218 〜 1025: 中間オーバーフロー回避帯。nav gap を少しだけ詰める */
@media (max-width: 1218px) {
  .site-header__inner {
    gap: 16px;
    padding-left: 24px;
  }
  .site-header__nav-list {
    gap: 24px;
  }
}

/* 1024 以下: nav と CTA を畳んでドロワー化(tokuyaku 同等性) */
@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
  }
  .site-header__inner {
    padding: 12px 16px 12px 20px;
  }
  .site-header__brand-main {
    font-size: 18px;
  }
  .site-header__nav,
  .site-header__cta {
    display: none;
  }
  .site-header__menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  .site-header__brand-main {
    font-size: 16px;
  }
  .site-header__brand-sub {
    font-size: 12px;
  }
  .site-header__logo {
    width: 44px;
    height: 26px;
  }
}

@media (max-width: 480px) {
  .site-header__inner {
    padding: 10px 12px;
  }
}


/* ============================================================
   WordPress lower pages
   ============================================================ */

.page-shell {
  padding-top: var(--header-height);
  background: #fff;
}

.page-shell__hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 22vw, 330px);
  background: #EAF7FC;
  border-bottom: 0;
  isolation: isolate;
}

.page-shell__hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(188px, 16.5vw, 238px);
  width: max(1850px, calc(100vw + 620px));
  height: 740px;
  background: #fff;
  -webkit-mask: url('../images/wave-bg.svg') center top / 100% 100% no-repeat;
  mask: url('../images/wave-bg.svg') center top / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(1.908deg);
  transform-origin: center top;
  pointer-events: none;
  z-index: 3;
}

.page-shell__hero::after {
  content: "";
  position: absolute;
  top: -20px;
  right: 0;
  bottom: -20px;
  width: min(65vw, 900px);
  background:
    linear-gradient(90deg, #EAF7FC 0%, rgba(234, 247, 252, 0.9) 18%, rgba(234, 247, 252, 0.28) 45%, rgba(234, 247, 252, 0) 74%),
    url('../images/hero-photo.webp') 58% 72% / cover no-repeat;
  -webkit-mask: url('../images/hero-photo-mask-bilateral.svg') center / 100% 100% no-repeat;
  mask: url('../images/hero-photo-mask-bilateral.svg') center / 100% 100% no-repeat;
  opacity: 0.96;
  pointer-events: none;
  z-index: 1;
}

.page-shell__hero-inner {
  position: relative;
  z-index: 4;
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: clamp(86px, 7vw, 112px) var(--container-padding-x) clamp(104px, 8vw, 128px);
}

.page-shell__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en-section);
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--color-accent);
}

.page-shell__title {
  margin: 0;
  font-family: var(--font-jp-display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.page-shell__content {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 80px var(--container-padding-x) 96px;
}

.page-shell__body,
.single-news__body {
  font-size: 16px;
  line-height: 2;
}

.page-shell__body > * + *,
.single-news__body > * + * {
  margin-top: 1.2em;
}

.page-shell__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 52px;
  padding: 0 28px;
  border-radius: 9999px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-jp-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.page-shell__button:visited {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .page-shell__button:hover {
    background: var(--color-accent-strong);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 141, 205, 0.22);
    transform: translateY(-2px);
  }
}

.page-shell__button:focus-visible {
  background: var(--color-accent-strong);
  color: #fff;
}

.page-shell__button:active {
  box-shadow: 0 4px 12px rgba(0, 141, 205, 0.18);
  transform: translateY(0);
}

.archive-news__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.archive-news__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(0, 141, 205, 0.28);
  border-radius: 9999px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
}

.archive-news__category:visited {
  color: var(--color-accent);
}

.archive-news__category.is-active,
.archive-news__category.is-active:visited,
.archive-news__category:hover {
  background: var(--color-accent);
  color: #fff;
}

.archive-news__list {
  border-top: 1px solid #E0E0E0;
}

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

.archive-news__link {
  display: grid;
  grid-template-columns: 91px 132px 1fr;
  column-gap: 20px;
  align-items: center;
  min-height: 74px;
  padding: 0;
  color: var(--color-text);
}

.archive-news__link:visited {
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  .archive-news__link:hover .archive-news__title {
    color: var(--color-accent);
  }
}

.archive-news__date,
.single-news__date {
  font-family: var(--font-en-section);
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1.6px;
}

.archive-news__tag,
.single-news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  border-radius: 5px;
  background: #BADDED;
  font-family: var(--font-jp-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
}

.archive-news__tag {
  width: 132px;
  height: 31px;
  padding: 0 10px;
}

.single-news__tag {
  padding: 0 14px;
}

.archive-news__title {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.6px;
  transition: color var(--transition-base);
}

.single-news__article {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
}

.single-news__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin-bottom: 24px;
}

.single-news__title {
  margin: 0;
  font-family: var(--font-jp-display);
  font-size: clamp(23px, 2.25vw, 32px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.single-news__back {
  max-width: 840px;
  margin: 56px auto 0;
  text-align: center;
}

.single-news__body {
  margin-top: 20px;
  padding-top: 50px;
  border-top: 1px solid #D8EEF7;
  color: var(--color-text);
}

.single-news__body > *:first-child {
  margin-top: 0;
}

.single-news__body p {
  margin: 0;
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.04em;
}

.single-news__body p + p {
  margin-top: 1.2em;
}

.single-news__body h2,
.single-news__body h3,
.single-news__body h4,
.single-news__body h5,
.single-news__body h6 {
  font-family: var(--font-jp-display);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.single-news__body h2 {
  position: relative;
  margin: 56px 0 22px;
  padding: 0 0 16px 28px;
  font-size: clamp(21px, 1.9vw, 27px);
  color: var(--color-accent);
  border-bottom: 2px solid #D8EEF7;
}

.single-news__body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 6px;
  height: calc(100% - 0.45em);
  min-height: 30px;
  border-radius: 9999px;
  background: var(--color-accent);
}

.single-news__body h3 {
  position: relative;
  margin: 44px 0 16px;
  padding: 0 0 10px 22px;
  font-size: clamp(18px, 1.6vw, 22px);
  border-bottom: 1px solid #D8EEF7;
}

.single-news__body h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px #EAF7FC;
}

.single-news__body h4 {
  position: relative;
  margin: 36px 0 14px;
  padding-left: 16px;
  border-left: 3px solid var(--color-accent);
  font-size: clamp(16px, 1.35vw, 19px);
}

.single-news__body h5 {
  margin: 34px 0 14px;
  padding: 0;
  border: 0;
  font-size: 18px;
  color: var(--color-text);
}

.single-news__body h6 {
  margin: 30px 0 12px;
  font-size: 16px;
  color: var(--color-text);
}

.single-news__body :where(ul, ol) {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.single-news__body :where(ul, ol) + :where(ul, ol) {
  margin-top: 18px;
}

.single-news__body li {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.single-news__body li + li {
  margin-top: 12px;
}

.single-news__body ul > li {
  padding-left: 24px;
}

.single-news__body ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.74em;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-accent);
}

.single-news__body ol {
  counter-reset: single-news-list;
}

.single-news__body ol > li {
  counter-increment: single-news-list;
  padding-left: 40px;
}

.single-news__body ol > li::before {
  content: counter(single-news-list, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 141, 205, 0.42);
  border-radius: 9999px;
  background: #fff;
  color: var(--color-accent);
  font-family: var(--font-en-section);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}

.single-news__body :where(strong, b) {
  font-weight: 700;
  color: #006FA6;
}

.single-news__body a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base), text-underline-offset var(--transition-base);
}

.single-news__body a:visited {
  color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .single-news__body a:hover {
    color: var(--color-accent-strong);
    text-decoration-color: var(--color-accent-strong);
    text-underline-offset: 6px;
  }
}

.single-news__body a:focus-visible {
  color: var(--color-accent-strong);
  text-decoration-color: var(--color-accent-strong);
  text-underline-offset: 6px;
}

.single-news__body blockquote {
  margin: 36px 0 0;
  padding: 24px 28px;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  background: #F4FBFE;
}

.single-news__body blockquote > * + * {
  margin-top: 1em;
}

.single-news__body hr {
  width: 100%;
  height: 1px;
  margin: 48px 0;
  border: 0;
  background: #D8EEF7;
}

.single-news__body :where(img, .wp-block-image) {
  max-width: 100%;
}

.single-news__body .wp-block-image {
  margin: 36px 0 0;
}

.single-news__body .wp-block-image img {
  border-radius: 8px;
}

.single-news__body figcaption {
  margin-top: 10px;
  color: rgba(51, 51, 51, 0.64);
  font-size: 13px;
  line-height: 1.7;
}

.single-news__body .wp-block-table {
  margin: 36px 0 0;
  overflow-x: auto;
}

.single-news__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}

.single-news__body th,
.single-news__body td {
  padding: 14px 16px;
  border: 1px solid #D8EEF7;
  text-align: left;
  vertical-align: top;
}

.single-news__body th {
  background: #F4FBFE;
  color: var(--color-accent);
  font-weight: 700;
}

.theme-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.theme-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(0, 141, 205, 0.28);
  border-radius: 9999px;
  color: var(--color-accent);
  font-family: var(--font-en-section);
}

.theme-pagination .page-numbers:visited {
  color: var(--color-accent);
}

.theme-pagination .page-numbers.current,
.theme-pagination .page-numbers.current:visited,
.theme-pagination a.page-numbers:hover {
  background: var(--color-accent);
  color: #fff;
}

@media (max-width: 768px) {
  .page-shell__hero {
    min-height: 220px;
  }

  .page-shell__hero::before {
    top: 154px;
    width: max(980px, calc(100vw + 420px));
    height: 520px;
  }

  .page-shell__hero::after {
    top: 0;
    right: -130px;
    bottom: 16px;
    width: min(560px, 120vw);
    opacity: 0.26;
    -webkit-mask: none;
    mask: none;
  }

  .page-shell__hero-inner {
    padding: 64px var(--container-padding-x) 84px;
  }

  .page-shell__eyebrow {
    font-size: clamp(32px, 11vw, 44px);
    letter-spacing: 0.18em;
  }

  .page-shell__content {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .archive-news__link {
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    min-height: 0;
    padding: 16px 0;
  }

  .archive-news__title {
    grid-column: 1 / -1;
  }

  .single-news__meta {
    margin-bottom: 18px;
  }

  .single-news__body {
    margin-top: 20px;
    padding-top: 40px;
  }

  .single-news__body h2 {
    margin-top: 42px;
    padding-left: 22px;
  }

  .single-news__body h2::before {
    width: 5px;
  }

  .single-news__body h3 {
    margin-top: 34px;
  }

  .single-news__body h4 {
    padding-left: 12px;
  }

  .single-news__body :where(ul, ol) {
    padding: 0;
  }

  .single-news__body ol > li {
    padding-left: 36px;
  }

  .single-news__body p,
  .single-news__body li {
    font-size: 15px;
  }
}