@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&family=Noto+Sans+JP:wght@100;400;600;800&display=swap');

/* ==========================================================================
   海業専門経営コンサルタント 川口経営事務所 共通スタイル

   ブレークポイント（CSS変数はメディアクエリ条件に使えないため値をここに記載）
   - 基本: 768px  … @media (min-width: 768px)  タブレット・PC
   - 追加: 1440px … @media (min-width: 1440px) カンプ基準幅（ヒーローの拡大上限のみ）
   モバイルファーストで記述し、上記以外のブレークポイントは使わない。

   カンプ（幅1920px）は、実装上の1440px幅に相当するものとして 0.75 倍で寸法を換算している。
   ========================================================================== */

:root {
  /* --- 色 --- */
  --color-primary: #1c6299;
  --color-primary-dark: #134a75;
  --color-navy: #325073;
  --color-blue: #0071bc;
  --color-button: #2e3192;
  --color-button-hover: #4347b5;
  --color-button-active: #1f2170;
  --color-button-line: #c7e5f8;
  --color-button-edge: #6ebaf8;
  --color-curve: #6e90d0;
  --color-number: #e3eefc;
  --color-teal: #3e9fa5;
  --color-orange: #f7931e;
  --color-red: #e60012;
  --color-yellow: #fcf49b;
  --color-text: #111111;
  --color-text-sub: #555555;
  --color-nav: #6b6b6b;
  --color-nav-separator: #000000;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg-light-blue: #e9f4fe;
  --color-bg-sky: #c7e5f8;
  --color-bg-gray: #f9fbfb;
  --color-bg-cream: #fcf8eb;
  --color-line: #9a9a9a;
  --color-dash: #8a8a8a;
  --color-footer-line: rgb(255 255 255 / 0.65);
  --color-shadow: rgb(0 0 0 / 0.14);
  --color-text-shadow: rgb(0 40 80 / 0.55);
  --color-focus: #c25e00;
  --color-focus-on-dark: #ffd166;

  /* --- レイアウト --- */
  --content-max-width: 1200px;
  --gutter-min: 20px;
  /* 画面端から本文までの実際の余白（最小20px） */
  --gutter: max(var(--gutter-min), calc((100vw - var(--content-max-width)) / 2));
  --header-height: 3.5rem;

  /* --- 文字 --- */
  --font-size-base: 112.5%; /* 18px（ブラウザ標準16px時）。利用者の文字サイズ設定を尊重するため%で指定 */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-latin: "Jost", "Noto Sans JP", sans-serif;
  --font-weight-thin: 100;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 800;
  --line-height-base: 1.8;
  --font-size-section-title: clamp(1.45rem, 0.95rem + 2.1vw, 2.65rem); /* セクション見出し（料金など）と帯状の見出しで共通 */

  /* --- 動き --- */
  --duration: 0.3s;
  --easing: cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (min-width: 768px) {
  :root {
    --header-height: 4.6rem;
  }
}

/* ==========================================================================
   ベース
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-text);
  background-color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

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

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

a {
  color: inherit;
}

strong {
  font-weight: var(--font-weight-bold);
}

[hidden] {
  display: none !important;
}

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

/*
 * 固定ヘッダーにページ内リンクの移動先が隠れないようにする。
 * 移動先は背景色の異なるセクションなので、上端をヘッダーの下端にぴったり合わせる（余白を足すと直前のセクションが見える）。
 * 小数ピクセルの誤差で直前のセクションが細い線状に見えないよう、1px だけヘッダーの下に潜らせる。
 */
[id] {
  scroll-margin-top: calc(var(--header-height) - 1px);
}

/* 見出しなど短い中央揃えの文は、文節単位で改行する（対応ブラウザのみ） */
h1,
h2,
h3,
h4,
.intro__lead,
.strength__text,
.results__list,
.access__address,
.case-flow__caption {
  word-break: auto-phrase;
}

@media (min-width: 768px) {
  .support__text,
  .about__text {
    word-break: auto-phrase;
  }
}

/* 見出し・リード文は約物（、。・など）を詰めてカンプの字面に近づける */
h1,
h2,
h3,
.intro__lead,
.hero__catch,
.hero-profile,
.site-footer {
  font-feature-settings: "palt";
}

/* ==========================================================================
   ユーティリティ
   ========================================================================== */

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* PC幅でのみ改行する */
.u-pc-only {
  display: none;
}

@media (min-width: 768px) {
  .u-pc-only {
    display: inline;
  }
}

/* モバイル幅でのみ改行する */
@media (min-width: 768px) {
  .u-sp-only {
    display: none;
  }
}

/* 電話番号・メールアドレスのリンク（下線なし・本文と同じ見た目） */
.u-plain-link {
  color: inherit;
  text-decoration: none;
}

.u-plain-link:hover {
  color: var(--color-primary);
}

.l-container {
  width: min(100% - var(--gutter-min) * 2, var(--content-max-width));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.5rem 1rem;
  color: var(--color-white);
  background-color: var(--color-primary);
  font-size: 0.9rem;
  transform: translateY(-200%);
  transition: transform var(--duration) var(--easing);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   ボタン
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 28.7rem);
  min-height: 3.6rem;
  padding: 0.5rem 1.5rem;
  color: var(--color-white);
  background-color: var(--color-button);
  border: 1px solid var(--color-button-edge);
  outline: 1px solid var(--color-button-line);
  outline-offset: -5px;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--duration) var(--easing),
    outline-color var(--duration) var(--easing);
}

.button:hover {
  background-color: var(--color-button-hover);
}

.button:active {
  background-color: var(--color-button-active);
}

.button:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .button {
    min-height: 3.9rem;
  }
}

/* ==========================================================================
   ヘッダー・グローバルナビゲーション
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  transition:
    background-color var(--duration) var(--easing),
    box-shadow var(--duration) var(--easing);
}

/* 1px以上スクロールしたら影を付ける（main.js が付与） */
.site-header.is-scrolled {
  box-shadow: 0 0.15rem 0.8rem var(--color-shadow);
}

/*
 * 下層ページでは、ヒーロー写真（魚の尾・頭）がヘッダーの領域まではみ出す。
 * ヘッダーは常に前面に置いてリンクを押せるようにし、ページ最上部（main.js が is-top を付与）では
 * 背景を透明にして後ろの写真を見せる。スクロールしたら白に戻す。
 * JS無効時と、モバイルのメニューを開いている間は白のまま。
 */
.site-header.is-top:not(.is-menu-open) {
  background-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding-inline: var(--gutter-min);
}

/* モバイルでJSが有効なときだけ表示する事務所名（ナビゲーションの代わり） */
.site-header__brand {
  display: none;
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.site-header__brand:hover {
  color: var(--color-primary-dark);
}

.global-nav__link {
  display: block;
  color: var(--color-nav);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--duration) var(--easing),
    background-color var(--duration) var(--easing);
}

.global-nav__link:hover,
.global-nav__link[aria-current="page"] {
  color: var(--color-primary);
}

.global-nav__link:active {
  color: var(--color-primary-dark);
}

.global-nav__link:focus-visible {
  color: var(--color-primary);
  outline-offset: -3px;
}

/* --- モバイル（JS無効時）: ヘッダー内で横スクロールできる1行のナビゲーション --- */
@media (max-width: 767.98px) {
  .global-nav {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .global-nav__list {
    display: flex;
    gap: 0.25rem;
    width: max-content;
    margin-inline: auto;
  }

  .global-nav__link {
    padding: 0.6rem 0.55rem;
    font-size: 0.85rem;
  }

  /* --- モバイル（JS有効時）: ハンバーガーで開閉するドロップダウン --- */
  .site-header.has-menu .site-header__brand {
    display: block;
  }

  .site-header.has-menu .global-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    overflow: visible;
    background-color: var(--color-white);
    box-shadow: 0 0.6rem 1rem var(--color-shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition:
      opacity 0.25s var(--easing),
      transform 0.25s var(--easing),
      visibility 0s linear 0.25s;
  }

  .site-header.has-menu.is-menu-open .global-nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.25s var(--easing),
      transform 0.25s var(--easing),
      visibility 0s linear 0s;
  }

  .site-header.has-menu .global-nav__list {
    display: block;
    width: auto;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--color-bg-light-blue);
  }

  .site-header.has-menu .global-nav__list li + li {
    border-top: 1px solid var(--color-bg-light-blue);
  }

  .site-header.has-menu .global-nav__link {
    padding: 0.85rem var(--gutter-min);
    font-size: 1rem;
  }

  .site-header.has-menu .global-nav__link:hover {
    background-color: var(--color-bg-light-blue);
  }
}

/* --- ハンバーガーボタン（アイコンはCSSで描画） --- */
.menu-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-right: -0.6rem;
  padding: 0;
  color: var(--color-primary);
  background: none;
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
  transition:
    color var(--duration) var(--easing),
    background-color var(--duration) var(--easing);
}

.menu-button:hover {
  background-color: var(--color-bg-light-blue);
}

.menu-button:active {
  color: var(--color-primary-dark);
}

.menu-button__icon,
.menu-button__icon::before,
.menu-button__icon::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition:
    transform var(--duration) var(--easing),
    background-color var(--duration) var(--easing);
}

.menu-button__icon {
  position: relative;
}

.menu-button__icon::before,
.menu-button__icon::after {
  position: absolute;
  left: 0;
  content: "";
}

.menu-button__icon::before {
  top: -0.45rem;
}

.menu-button__icon::after {
  top: 0.45rem;
}

/* 開いているときは×印にする */
.menu-button[aria-expanded="true"] .menu-button__icon {
  background-color: transparent;
}

.menu-button[aria-expanded="true"] .menu-button__icon::before {
  transform: translateY(0.45rem) rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-button__icon::after {
  transform: translateY(-0.45rem) rotate(-45deg);
}

/* --- タブレット・PC: 横並びのナビゲーション --- */
@media (min-width: 768px) {
  .site-header__inner {
    justify-content: center;
  }

  .site-header.has-menu .site-header__brand,
  .menu-button {
    display: none;
  }

  .global-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .global-nav__list li + li {
    border-left: 1px solid var(--color-nav-separator);
  }

  .global-nav__link {
    padding: 0.55rem clamp(0.7rem, 1.6vw, 1.45rem);
    font-size: clamp(0.85rem, 0.35rem + 1.05vw, 1.2rem);
    line-height: 1.4;
  }
}

/* ==========================================================================
   見出し（左右に魚のイラストを添える）
   ========================================================================== */

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: 1.1em;
  color: var(--color-primary);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
}

.section-title::before,
.section-title::after {
  flex: none;
  width: var(--fish-width, 2em);
  aspect-ratio: var(--fish-ratio, 3);
  background: no-repeat center / contain;
}

.section-title--about,
.section-title--support,
.section-title--strengths,
.section-title--results,
.section-title--price {
  --fish-gap: 0.9em;
  gap: var(--fish-gap);
}

.section-title--about::before,
.section-title--support::before,
.section-title--strengths::before,
.section-title--results::before,
.section-title--price::before,
.section-title--about::after,
.section-title--support::after,
.section-title--strengths::after,
.section-title--results::after,
.section-title--price::after {
  content: "";
}

.section-title--about::before {
  --fish-width: 2.4em;
  --fish-ratio: 1287 / 346;
  background-image: url("../images/header-fish-1-l.svg");
}

.section-title--about::after {
  --fish-width: 2.05em;
  --fish-ratio: 1090 / 543;
  background-image: url("../images/header-fish-1-r.svg");
}

.section-title--support::before {
  --fish-width: 2.7em;
  --fish-ratio: 723 / 217;
  background-image: url("../images/header-fish-2-l.svg");
}

.section-title--support::after {
  --fish-width: 2em;
  --fish-ratio: 526 / 159;
  background-image: url("../images/header-fish-2-r.svg");
}

.section-title--strengths::before {
  --fish-width: 1.95em;
  --fish-ratio: 518 / 172;
  background-image: url("../images/header-fish-3-l.svg");
}

.section-title--strengths::after {
  --fish-width: 1.9em;
  --fish-ratio: 507 / 196;
  background-image: url("../images/header-fish-3-r.svg");
}

.section-title--results::before {
  --fish-width: 1.9em;
  --fish-ratio: 505 / 139;
  background-image: url("../images/header-fish-4-l.svg");
}

.section-title--results::after {
  --fish-width: 1.65em;
  --fish-ratio: 430 / 236;
  background-image: url("../images/header-fish-4-r.svg");
}

.section-title--price::before {
  --fish-width: 2.25em;
  --fish-ratio: 606 / 319;
  background-image: url("../images/header-fish-5-l.svg");
}

.section-title--price::after {
  --fish-width: 2.15em;
  --fish-ratio: 574 / 235;
  background-image: url("../images/header-fish-5-r.svg");
}

/* 狭い画面では魚を小さくして見出しの文字幅を確保する */
@media (max-width: 767.98px) {
  .section-title::before,
  .section-title::after {
    width: calc(var(--fish-width, 2em) * 0.7);
  }

  .section-title--about,
  .section-title--support,
  .section-title--strengths,
  .section-title--results,
  .section-title--price {
    --fish-gap: 0.45em;
  }
}

/* ==========================================================================
   ヒーロー（共通）
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  background: url("../images/hero-bg.svg") no-repeat center bottom / cover;
}

.hero__inner {
  position: relative;
  width: min(100% - var(--gutter-min) * 2, var(--content-max-width));
  height: 100%;
  margin-inline: auto;
}

.hero__title {
  display: flex;
  flex-direction: column;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

.hero__title-main {
  letter-spacing: 0;
}

/*
 * 読み仮名（海業＝うみぎょう）は span で本文に含め、絶対配置で親字の上にルビのように表示する。
 * <ruby> は大きな文字サイズで行の高さの計算が Safari と Chrome で大きく異なり、
 * Safari でだけ行間が開く（表示方法を変えると読み仮名自体が消える）ため使っていない。
 * 読み仮名を囲む括弧は画面には表示せず、CSS無効時・コピー・読み上げでは「海（うみ）」となる。
 */
.hero__title-main {
  padding-top: 0.06em; /* 読み仮名の表示領域（行の上部の余白と合わせて確保） */
}

.hero__ruby {
  position: relative;
}

.hero__ruby-text {
  position: absolute;
  bottom: calc(100% - 1.55em); /* 親字の上端に寄せる（em は読み仮名の文字サイズ基準） */
  left: 50%;
  font-size: 0.17em;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  translate: -50% 0;
}

/*
 * ヒーロー写真（hero-kawaguchi.webp: 2000x1503）は、シャツの下端（上から 1205px）を
 * ヒーローの下端に合わせ、それより下（手と魚の頭）をヒーローの外へはみ出させる。
 *   はみ出す高さ = 写真の高さ × 298/1503 = 写真の幅 × 298/2000
 */
.hero__photo {
  --photo-overflow-ratio: calc(298 / 2000); /* 写真の幅に対する、シャツ下端より下の高さの比 */
}

.hero__catch {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

/* --- トップページのヒーロー --- */
.hero--top {
  display: flow-root; /* 写真の負のマージンがヒーローの外に抜けず、ヒーローの下端がシャツの下端になるように */
  padding-top: 1.25rem;
}

.hero--top .hero__title-main {
  font-size: clamp(3rem, 16vw, 5.5rem);
}

.hero--top .hero__title-sub {
  font-size: clamp(1.35rem, 7vw, 2.4rem);
}

.hero--top .hero__catch {
  margin-top: 0.4em;
  font-size: clamp(0.72rem, 3.7vw, 1.25rem);
}

.hero--top .hero__photo {
  --photo-width: min(92%, 34rem);
  position: relative;
  width: var(--photo-width);
  margin: 0.25rem calc(var(--gutter-min) * -1) calc(var(--photo-width) * var(--photo-overflow-ratio) * -1) auto;
}

.hero-profile {
  position: relative;
  /* モバイルではヒーロー写真が下にはみ出す分（写真幅の約18%）だけ下げる */
  padding-top: calc(16vw + 0.5rem);
}

.hero-profile__inner {
  text-align: right;
}

.hero-profile__name {
  font-size: 1.35rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.hero-profile__role {
  margin-right: 0.8em;
  font-size: 0.5em;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
  vertical-align: 0.2em;
}

/* ▲マーク */
.hero-profile__role::before {
  display: inline-block;
  margin-right: 0.5em;
  border-right: 0.4em solid transparent;
  border-bottom: 0.65em solid var(--color-primary);
  border-left: 0.4em solid transparent;
  content: "";
}

.hero-profile__achievement {
  font-size: 0.85rem;
  line-height: 1.5;
}

.hero-profile__number {
  margin-inline: 0.15em;
  color: var(--color-red);
  font-family: var(--font-latin);
  font-size: 1.3em;
  font-weight: 500;
  line-height: 1;
}

@media (min-width: 768px) {
  .hero--top {
    height: min(38.34vw, 30.7rem);
    padding-top: 0;
  }

  /*
   * 見出しとキャッチの左余白（画面左端から）は、画面幅 1440px で 105px、768px で 24px とし、その間は直線的に変える
   * （画面が狭いほど、画面幅に対する余白の割合も小さくなる）。余白が狭まるだけなので写真には重ならない。
   * 1440px 以上はコンテンツ幅（1200px）の左端から少し左に出す。
   */
  .hero--top .hero__inner {
    --hero-text-offset: max(-1.25%, 24px + (100vw - 768px) * 81 / 672 - var(--gutter));
  }

  .hero--top .hero__title {
    padding-top: min(2.3vw, 2rem);
    margin-left: var(--hero-text-offset);
  }

  .hero--top .hero__title-main {
    font-size: min(11.12vw, 8.9rem);
    line-height: 1.12;
  }

  .hero--top .hero__title-sub {
    font-size: min(4.94vw, 3.95rem);
    line-height: 1.25;
  }

  .hero--top .hero__catch {
    margin-top: 0.35em;
    margin-left: calc(var(--hero-text-offset) + 0.05em); /* 「〜」の字形の余白分、見出しと見た目の左端をそろえる */
    font-size: min(2.3vw, 1.85rem);
  }

  /* 写真はヒーローの下端からはみ出して配置する（translate の % は写真自身の高さ基準） */
  .hero--top .hero__photo {
    position: absolute;
    bottom: 0;
    right: calc(min(7.64vw, 110px, var(--gutter) - var(--gutter-min)) * -1);
    width: min(63.2vw, 910px);
    margin: 0;
    translate: 0 calc(298 / 1503 * 100%);
  }

  .hero-profile {
    padding-top: min(1.6vw, 1.3rem);
  }

  .hero-profile__inner {
    padding-right: min(2.8vw, 2.2rem);
  }

  .hero-profile__name {
    font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  }

  .hero-profile__achievement {
    font-size: clamp(0.8rem, 1.45vw, 1.1rem);
  }
}

/*
 * 1440px 以上ではヒーローの高さが一定のまま背景だけが横幅に合わせて大きくなり、
 * 下端揃えのため濃い色の海が見出しの高さまで上がってくる。
 * 背景が 1440px 時より高くなった分（背景の高さ - ヒーローの高さ）の 35% だけ背景を下にずらし、
 * 海の上端を 1440px 時とほぼ同じ高さに保つ（海は背景の下から約 30〜35% の範囲）。
 */
@media (min-width: 1440px) {
  .hero--top {
    background-position: left 50% bottom calc((100vw * 6136 / 16002 - 30.7rem) * -0.35);
  }
}

/* --- 下層ページのヒーロー（高さが低い） --- */
.hero--sub {
  --hero-height: 8.5rem;
  height: var(--hero-height);
  /* 低いヒーローでも hero-bg.svg の波頭が見える位置に合わせる */
  background-position: 30% 70%;
}

.hero--sub .hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--sub .hero__title {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
}

.hero--sub .hero__title-main {
  font-size: clamp(1.9rem, 10vw, 2.8rem);
}

.hero--sub .hero__title-sub {
  font-size: clamp(0.85rem, 4.2vw, 1.2rem);
}

/*
 * 写真が文字に重なる幅でも文字が読めるよう、見出しとキャッチを写真より前面に出し、
 * 白い光彩を付ける（背景の波や写真に重なっても読めるように）
 */
.hero--sub .hero__title,
.hero--sub .hero__catch {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 0.12em var(--color-white), 0 0 0.25em var(--color-white), 0 0 0.5em var(--color-white);
}

.hero--sub .hero__title-main {
  /* 大きい文字は em 基準だと光彩が広がりすぎるため、小さい文字と同程度の幅に抑える */
  text-shadow: 0 0 0.05em var(--color-white), 0 0 0.1em var(--color-white), 0 0 0.2em var(--color-white);
}

.hero--sub .hero__catch {
  font-size: clamp(0.62rem, 3vw, 0.8rem);
}

/*
 * モバイルでは魚の尾が少しだけヒーローの上にはみ出す大きさにする。
 * シャツ下端より上の高さ = ヒーローの高さ × 1.05 → 写真の幅 = ヒーローの高さ × 1.05 ÷ (1205/2000) ≒ × 1.74
 * 画面幅が狭くても写真の左端は画面中央より左に出さず、右側は画面の右端で見切れさせる。
 * 見切れは overflow: clip ではなく、要素の幅を画面の右端までに縮め、object-fit で画像の右側を切り取って表現する
 * （Safari では overflow-x: clip を付けると、上下のはみ出しまで切り取られることがあるため）。
 * left と width の % は .hero__inner（画面左端から --gutter-min の位置）が基準。
 */
.hero--sub .hero__photo {
  --photo-width: calc(var(--hero-height) * 1.74);
  --photo-left: max(50vw - var(--gutter-min), 100% + var(--gutter-min) * 0.5 - var(--photo-width));
  position: absolute;
  bottom: 0;
  left: var(--photo-left);
  width: min(var(--photo-width), 100vw - var(--gutter-min) - var(--photo-left));
  height: calc(var(--photo-width) * 1503 / 2000);
  object-fit: cover;
  object-position: left bottom;
  translate: 0 calc(298 / 1503 * 100%);
}

@media (min-width: 768px) {
  .hero--sub {
    --hero-height: min(13.7vw, 10.95rem);
    background-position: center 72%;
  }

  .hero--sub .hero__inner {
    padding-left: 5.8%;
  }

  .hero--sub .hero__title {
    column-gap: 0.45em;
    align-items: center;
  }

  .hero--sub .hero__title-main {
    font-size: min(4.6vw, 3.7rem);
  }

  .hero--sub .hero__title-sub {
    font-size: min(2.3vw, 1.85rem);
  }

  .hero--sub .hero__catch {
    margin-top: 0.1em;
    font-size: clamp(0.6rem, 1.05vw, 0.85rem);
  }

  /*
   * 頭の一部と魚の尾がヒーローの上にはみ出す大きさにする（カンプの比率）。
   * シャツ下端より上の高さ = ヒーローの高さ × 1.24 → 写真の幅 = ヒーローの高さ × 1.24 ÷ (1205/2000) ≒ × 2.06
   */
  .hero--sub .hero__photo {
    right: calc(min(3.1vw, 45px, var(--gutter) - var(--gutter-min)) * -1);
    --photo-width: calc(var(--hero-height) * 2.06);
    left: auto;
    width: var(--photo-width);
  }
}

/* ==========================================================================
   トップページ: 導入文
   ========================================================================== */

.intro {
  padding-block: 2rem 3.5rem;
  text-align: center;
}

.intro__lead {
  color: var(--color-primary);
  font-size: clamp(1.25rem, 0.7rem + 2.4vw, 2.45rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.intro__lead strong {
  color: var(--color-orange);
}

.intro__text {
  margin-top: 1.4rem;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem);
  font-weight: var(--font-weight-semibold);
  line-height: 2.2;
  text-align: left;
}

@media (min-width: 768px) {
  .intro {
    padding-block: min(2.5vw, 2rem) 4.5rem;
  }

  .intro__text {
    margin-top: 2.2rem;
    /* PC幅では指定位置で改行するため、768px付近でも1行に収まる文字サイズにする */
    font-size: clamp(0.85rem, 0.2rem + 1.25vw, 1.1rem);
    text-align: center;
  }
}

/* ==========================================================================
   トップページ: ご挨拶
   ========================================================================== */

.greeting {
  padding-block: 3.5rem 3rem;
  background-color: var(--color-bg-light-blue);
}

.greeting__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 58.6rem;
}

.greeting__profile {
  width: min(100%, 19.2rem);
  margin-inline: auto;
  text-align: center;
}

.greeting__caption {
  display: flex;
  flex-direction: column;
  margin-top: 1.1rem;
}

.greeting__name {
  font-size: 1.85rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  line-height: 1.3;
}

.greeting__name-en {
  color: var(--color-text-sub);
  font-family: var(--font-latin);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.greeting__title {
  margin-bottom: 0.4em;
  color: var(--color-primary);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.greeting__title--career {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
}

.greeting__text {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.95;
}

.greeting__career {
  font-size: 0.88rem;
  line-height: 1.85;
}

@media (min-width: 768px) {
  .greeting {
    padding-block: 5rem 4.5rem;
  }

  .greeting__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(1.5rem, 3vw, 2.4rem);
  }

  .greeting__profile {
    flex: 0 0 34%;
    margin: 0;
  }

  .greeting__body {
    flex: 1;
    margin-top: -0.3rem;
  }
}

/* ==========================================================================
   トップページ: 海業とは何か？
   ========================================================================== */

.about {
  padding-bottom: 4rem;
  background-color: var(--color-bg-light-blue);
}

.about__box {
  padding: 2.5rem 1rem 2.25rem;
  background-color: var(--color-bg-sky);
}

.about__text {
  max-width: 43rem;
  margin-inline: auto;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 2.1;
}

.about__gallery {
  display: flex;
  gap: 0.3rem;
  max-width: 58.7rem;
  margin: 2rem auto 0;
}

.about__gallery li {
  flex: 1 1 0;
}

.about__gallery img {
  width: 100%;
}

@media (min-width: 768px) {
  .about {
    padding-bottom: 4.5rem;
  }

  .about__box {
    padding: 3.6rem 2rem 3rem;
  }

  .about__text {
    text-align: center;
  }

  .about__gallery {
    gap: 0.5rem;
    margin-top: 3.6rem;
  }
}

/* ==========================================================================
   トップページ: どんな支援を行うか？
   ========================================================================== */

.support {
  padding-block: 3rem 13rem;
  color: var(--color-white);
  background: var(--color-primary) url("../images/support_services-title-bg-s.webp") no-repeat 72% bottom / cover;
}

.support__inner > p {
  max-width: 42rem;
  margin-inline: auto;
}

.support .section-title {
  margin-bottom: 0.6em;
  color: var(--color-white);
  text-shadow: 0 0 0.6em var(--color-text-shadow);
}

.support__text {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 2.2;
  text-shadow: 0 0 0.5em var(--color-text-shadow);
}

.support__action {
  margin-top: 1.5rem;
  text-align: center;
}

.support :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

@media (min-width: 768px) {
  .support {
    min-height: min(42.92vw, 34.35rem);
    padding-block: min(5.5vw, 4.4rem) 4rem;
    background-position: center bottom;
  }
}

/* 高解像度の大きな画面では原寸画像を使う */
@media (min-width: 1440px), (min-width: 1024px) and (min-resolution: 2dppx) {
  .support {
    background-image: url("../images/support_services-title-bg.webp");
  }
}

/* ==========================================================================
   トップページ: 当社サービスの強み・競争力
   ========================================================================== */

.strengths {
  padding-block: 3.5rem 4rem;
  overflow-x: clip; /* 狭い画面で左右に見切れる曲線で横スクロールが出ないように */
  background-color: var(--color-bg-gray);
}

.strengths__list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  max-width: 24rem;
  margin-inline: auto;
}

/*
 * 番号は CSS カウンターを使わず項目ごとに指定する。
 * .strength はコンテナ（container-type）のため、Safari ではカウンターが項目ごとに閉じ、すべて 0 になる。
 */
.strength {
  --strength-number: "1";
  position: relative;
  /* 子要素の寸法を項目の幅（cqi）基準で指定し、曲線の背景と位置を合わせる */
  container-type: inline-size;
  text-align: center;
}

.strength:nth-child(2) {
  --strength-number: "2";
}

.strength:nth-child(3) {
  --strength-number: "3";
}

/*
 * 狭い画面: 上下反転した曲線（W型の波）全体を項目ごとの背景にする。
 * 中央の山にアイコンを収め、両側の谷の先は画面の左右で見切れさせる。
 *   曲線の幅 --wave-width（画面幅の 140%。谷の底が画面内に入る大きさ）、高さはその 2055/5790
 *   山の内側の幅 ≒ 曲線の幅 × 0.22 → アイコンは曲線の幅 × 0.2
 *   山の付け根（アイコンの中心の高さ）≒ 曲線の高さ × 0.5
 */
.strength {
  --wave-width: min(140vw, 840px);
  --wave-height: calc(var(--wave-width) * 2055 / 5790);
  --icon-size: calc(var(--wave-width) * 0.2);
}

.strength::before {
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: var(--wave-height);
  background: url("../images/wavy_curve.svg") no-repeat center top / var(--wave-width) auto;
  transform: scaleY(-1);
  content: "";
}

.strength__icon {
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: calc(var(--wave-height) * 0.5 - var(--icon-size) * 0.5) auto 1.2rem;
  padding: calc(var(--icon-size) * 0.175);
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: 50%;
}

/* 1つ目（マグロ）はカンプに合わせて余白を減らし、円に対して大きめに表示する */
.strength:nth-child(1) .strength__icon {
  padding: calc(var(--icon-size) * 0.07);
}

/*
 * 3つ目（カジキ）は横長のため、カンプに合わせて白い円から少しはみ出す大きさにする。
 * 画像は円の外に描けないので、画像の幅を円の 1.14 倍に広げ、白い円は背景のグラデーションで描く
 * （closest-side は高さの半分 = 円の半径）。
 */
.strength:nth-child(3) .strength__icon {
  width: calc(var(--icon-size) * 1.14);
  padding: 0;
  background: radial-gradient(circle closest-side, var(--color-white) calc(100% - 0.5px), transparent 100%);
  border-radius: 0;
}

.strength__title {
  color: var(--color-navy);
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.65rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

/* 番号（1〜3）の丸 */
.strength__title::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto 1.4rem;
  color: var(--color-number);
  background-color: var(--color-curve);
  border-radius: 50%;
  font-family: var(--font-latin);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  content: var(--strength-number);
}

.strength__text {
  margin-top: 1.1rem;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  line-height: 1.95;
}

@media (max-width: 767.98px) {
  .strength__text br {
    display: none;
  }
}

@media (min-width: 768px) {
  .strengths {
    padding-block: 3.2rem 4.5rem;
  }

  .strengths .section-title {
    margin-bottom: 1.6em;
  }

  .strengths__list {
    position: relative;
    flex-direction: row;
    gap: 0;
    max-width: 57.9rem;
  }

  /* 広い画面: 3項目にまたがる曲線を1枚の背景として表示する */
  .strengths__list::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 5790 / 2055;
    background: url("../images/wavy_curve.svg") no-repeat center / contain;
    content: "";
  }

  .strength {
    --icon-size: 41cqi;
    flex: 1 1 0;
    min-width: 0;
  }

  /* 広い画面: アイコンから番号までの点線（幅1pxの縦長ブロックを背景で点線にする） */
  .strength::before {
    top: 73.3cqi;
    left: calc(50% - 0.5px);
    width: 1px;
    height: 50.5cqi;
    background: repeating-linear-gradient(to bottom, var(--color-dash) 0 0.35rem, transparent 0.35rem 0.6rem);
    transform: none;
  }

  .strength__icon {
    margin: 32.3cqi auto 50.5cqi;
  }

  .strength__title::before {
    margin-bottom: 1.6rem;
  }

  .strength__text {
    padding-inline: 0.5rem;
  }
}

/* ==========================================================================
   トップページ: 実績
   ========================================================================== */

.results {
  padding-block: 4rem;
  text-align: center;
}

.results__lead {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  line-height: 2.1;
  text-align: left;
}

.results__related {
  margin-top: 1.6rem;
}

.results__note {
  font-size: 0.95rem;
}

.results__list {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 2.05;
}

.results__action {
  margin-top: 2.2rem;
}

.results__gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 57rem;
  margin: 3rem auto 0;
}

.results__gallery li {
  flex: 1 1 0;
}

.results__gallery img {
  width: 100%;
}

@media (min-width: 768px) {
  .results {
    padding-block: 6.5rem 6rem;
  }

  .results__lead {
    text-align: center;
  }

  .results__gallery {
    flex-direction: row;
    gap: 1.65rem;
    margin-top: 5rem;
  }
}

/* ==========================================================================
   トップページ: お問い合わせ・プライバシーポリシー（フォーム自体は contact.css）
   ========================================================================== */

.contact {
  padding-block: 3.5rem 2rem;
  background-color: var(--color-bg-cream);
}

.contact__title,
.privacy__title {
  margin-bottom: 1.4em;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-align: center;
}

.privacy {
  padding-block: 2.5rem 4rem;
  background-color: var(--color-bg-cream);
}

.privacy__inner {
  max-width: 57rem;
  font-size: 0.8rem;
  line-height: 1.7;
}

.privacy__title {
  margin-bottom: 1em;
}

.privacy__heading {
  margin-top: 1.4em;
  font-size: 1em;
  font-weight: var(--font-weight-semibold);
}

.privacy__list li,
.privacy__contact li {
  padding-left: 1em;
  text-indent: -1em;
}

.privacy__list li::before {
  content: "・";
}

.privacy__contact li {
  padding-left: 0;
  text-indent: 0;
}

.privacy a:not(.u-plain-link) {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .contact {
    padding-block: 5.5rem 3rem;
  }

  .privacy {
    padding-block: 2.5rem 5rem;
  }

  .privacy__inner {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   トップページ: アクセス
   ========================================================================== */

.access {
  padding-top: 3.5rem;
  text-align: center;
}

.access .section-title {
  margin-bottom: 0.6em;
}

.access__address {
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.75;
}

/* 地図は画面幅いっぱいに表示する */
.access__map {
  display: block;
  width: 100%;
  height: clamp(18rem, 43vw, 34.5rem);
  margin-top: 2rem;
  border: 0;
}

@media (min-width: 768px) {
  .access {
    padding-top: 5rem;
  }

  .access__map {
    margin-top: 2.6rem;
  }
}

/* ==========================================================================
   サービス内容ページ
   ========================================================================== */

/* --- サービス内容①② の見出し行（魚アイコン付き） --- */
.service__label {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding-block: 1.6rem 1.2rem;
  color: var(--color-primary);
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.service__label::before {
  flex: none;
  width: 2.5em;
  aspect-ratio: 411 / 218;
  background: no-repeat center / contain;
  content: "";
}

.service__label--1::before {
  background-image: url("../images/header-fish-icon-1.svg");
}

.service__label--2::before {
  background-image: url("../images/header-fish-icon-2.svg");
  aspect-ratio: 421 / 224;
}

/* --- 写真の帯と、その上に重ねるサービス名 --- */
.service__visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 11rem;
  padding: 1.6rem var(--gutter-min);
  background: no-repeat center / cover;
}

.service__visual--1 {
  background-image: url("../images/service-1-hero-s.webp");
  background-position: 55% 60%;
}

/* サービス名を写真の帯の上下中央から少し下に置く */
.service__visual--2 {
  align-items: center;
  background-image: url("../images/service-2-hero-s.webp");
  background-position: center 60%;
}

.service__visual--2 .service__title {
  translate: 0 0.3em;
}

.service__title {
  color: var(--color-white);
  font-size: clamp(1.35rem, 0.8rem + 2.2vw, 2.65rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 0 0.5em var(--color-text-shadow);
}

.service__title--dark {
  color: var(--color-navy);
  text-shadow: 0 0 0.4em var(--color-white), 0 0 0.8em var(--color-white);
}

@media (min-width: 768px) {
  .service__label {
    padding-block: 2rem 1.6rem;
    padding-left: 4.7%;
  }

  .service__visual {
    min-height: min(28.6vw, 22.9rem);
    padding-top: min(3.6vw, 3rem);
  }

  /* 上下の余白をそろえ、中央がずれないようにする */
  .service__visual--2 {
    padding-bottom: min(3.6vw, 3rem);
  }
}

@media (min-width: 1440px), (min-width: 1024px) and (min-resolution: 2dppx) {
  .service__visual--1 {
    background-image: url("../images/service-1-hero.webp");
  }

  .service__visual--2 {
    background-image: url("../images/service-2-hero.webp");
  }
}

/* --- 本文 --- */
.service__body {
  padding-block: 2.5rem 3.5rem;
  background-color: var(--color-bg-gray);
}

.service__body--plain {
  background-color: var(--color-white);
}

.service__content {
  max-width: 42rem;
}

.service__text {
  margin-bottom: 1.8rem;
  font-size: 0.95rem;
  line-height: 2;
}

/* ●の行頭記号（2行目以降は記号の幅だけ字下げ） */
.service__bullets {
  font-size: 0.95rem;
  line-height: 2;
}

.service__bullets li {
  padding-left: 1em;
  text-indent: -1em;
}

.service__bullets li::before {
  content: "●";
}

.service__bullets--accent li::before {
  color: var(--color-primary);
}

/* --- 【具体的なイメージ】（左右の括弧は擬似要素で描画） --- */
.examples {
  position: relative;
  margin-top: 2.5rem;
  padding: 2rem 1.5rem;
}

.examples::before,
.examples::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  border: 0.6rem solid var(--color-teal);
  content: "";
}

.examples::before {
  left: 0;
  border-right: 0;
}

.examples::after {
  right: 0;
  border-left: 0;
}

.examples__title {
  color: var(--color-teal);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
}

.examples__list {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.75;
}

.examples__list li {
  position: relative;
  padding-left: 1em;
}

.examples__list li + li {
  margin-top: 0.15rem;
}

/* ▶の行頭記号 */
.examples__list li::before {
  position: absolute;
  top: 0.45em;
  left: 0;
  border-top: 0.42em solid transparent;
  border-bottom: 0.42em solid transparent;
  border-left: 0.7em solid var(--color-teal);
  content: "";
}

@media (min-width: 768px) {
  .service__body {
    padding-block: 3.6rem 4rem;
  }

  .service__bullets,
  .service__text {
    font-size: 1rem;
  }

  .examples {
    margin-top: 3.2rem;
    padding: 2.4rem 4.5rem 2.4rem 3.2rem;
  }

  .examples::before,
  .examples::after {
    width: 2.8rem;
  }
}

/* --- サービスの流れ --- */
.flow {
  padding-block: 3.5rem 4rem;
  background-color: var(--color-bg-light-blue);
}

/* 帯の高さは従来の文字サイズ（1.35rem〜2rem）から求めて固定し、文字だけセクション見出しと同じ大きさにする */
.flow__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 38.3rem);
  height: calc(clamp(1.35rem, 1.1rem + 0.9vw, 2rem) * 1.5 + 1rem);
  margin: 0 auto 2.2rem;
  padding-inline: 1rem;
  color: var(--color-white);
  background-color: var(--color-blue);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
}

.flow__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  max-width: 58.5rem;
  margin-inline: auto;
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 18rem);
  min-height: 8rem;
  padding: 1rem 0.6rem;
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 3px solid var(--color-primary);
  border-radius: 0.45rem;
  text-align: center;
}

/* ステップ間の矢印（三角形） */
.flow__step + .flow__step::before {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: calc(50% - 0.75rem);
  border-top: 1.05rem solid var(--color-primary);
  border-right: 0.75rem solid transparent;
  border-left: 0.75rem solid transparent;
  content: "";
}

.flow__step-title {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.flow__step-notes {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-feature-settings: "palt";
  line-height: 1.5;
}

.flow__step-notes li::before {
  content: "・";
}

.flow__info {
  max-width: 58.5rem;
  margin: 2.2rem auto 0;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.9;
}

.flow__info li {
  padding-left: 1em;
  text-indent: -1em;
}

.flow__info li + li {
  margin-top: 0.4rem;
}

@media (min-width: 768px) {
  .flow {
    padding-block: 3.2rem 5rem;
  }

  .flow__title {
    margin-bottom: 2.5rem;
  }

  .flow__steps {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(1.4rem, 3.5vw, 2.6rem);
  }

  .flow__step {
    flex: 1 1 0;
    width: auto;
    min-height: 10.9rem;
    padding-inline: 0.4rem;
  }

  .flow__step + .flow__step::before {
    top: calc(50% - 1.05rem);
    bottom: auto;
    left: auto;
    right: calc(100% + clamp(0.35rem, 1vw, 0.8rem));
    border-top: 1.05rem solid transparent;
    border-right: 0;
    border-bottom: 1.05rem solid transparent;
    border-left: clamp(0.7rem, 1.2vw, 1.25rem) solid var(--color-primary);
  }

  .flow__step-title {
    font-size: clamp(1rem, 0.25rem + 1.5vw, 1.6rem);
  }

  .flow__step-notes {
    font-size: clamp(0.62rem, 0.35rem + 0.55vw, 0.78rem);
  }

  .flow__info {
    margin-top: 2.6rem;
    text-indent: 0;
  }
}

/* --- 料金 --- */
.price {
  padding-block: 3.5rem 4.5rem;
}

.price .section-title {
  margin-bottom: 0.8em;
}

.price__lead {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.9;
  text-align: center;
}

.price__tables {
  max-width: 38.3rem;
  margin: 2.5rem auto 0;
}

.price__block {
  font-size: 0.9rem;
  line-height: 1.9;
}

.price__block + .price__block {
  margin-top: 2.5rem;
  padding-block: 2.2rem;
  border-block: 1px solid var(--color-line);
}

.price__heading {
  font-size: 1em;
  font-weight: var(--font-weight-regular);
}

/* サービス価格（税別）は見出し・項目名・金額とも太めにする */
.price__block:first-child,
.price__block:first-child .price__heading,
.price__block:first-child .price__row dt {
  font-weight: var(--font-weight-semibold);
}

/* 狭い画面では項目名と金額を太さで区別する（金額は標準の太さ） */
@media (max-width: 767.98px) {
  .price__block:first-child .price__row dd {
    font-weight: var(--font-weight-regular);
  }
}

.price__list {
  margin-top: 0.3rem;
}

/* 狭い画面: 項目名の下に金額を字下げして表示する */
.price__row + .price__row {
  margin-top: 0.4rem;
}

.price__row dt {
  font-weight: var(--font-weight-semibold);
}

.price__row dd {
  padding-left: 1em;
}

.price__past li + li {
  margin-top: 0.15rem;
}

@media (min-width: 768px) {
  .price {
    padding-block: 5rem 6rem;
  }

  .price__tables {
    margin-top: 3.4rem;
  }

  .price__block {
    font-size: 0.95rem;
  }

  .price__block:first-child {
    padding-inline: 0.5rem;
  }

  .price__row {
    flex-wrap: nowrap;
  }

  /* 広い画面: 項目名と金額を点線（リーダー）でつなぎ、金額の開始位置をそろえる */
  .price__row {
    display: flex;
    align-items: baseline;
  }

  .price__row + .price__row {
    margin-top: 0;
  }

  .price__row dt {
    display: flex;
    flex: none;
    align-items: baseline;
    min-width: 11em;
    font-weight: var(--font-weight-regular);
  }

  .price__row dt::after {
    flex: 1;
    min-width: 1.5em;
    margin-inline: 0.3em;
    border-bottom: 2px dotted currentColor;
    content: "";
  }

  .price__row dd {
    padding-left: 0;
  }

  .price__block--past {
    padding-inline: 4rem;
  }
}

/* ==========================================================================
   実績ページ
   ========================================================================== */

/*
 * 見出し帯の高さは従来の文字サイズ（--case-title-base）から求めて固定し、文字だけセクション見出しと同じ大きさにする。
 * 狭い画面では最も長い「実績②｜小規模事業者持続化補助金」（約 17.4 文字分）が1行に収まる大きさを上限にする。
 */
.case {
  --case-title-base: clamp(0.85rem, 4.6vw, 1.35rem);
  --case-title-height: calc(var(--case-title-base) * 2.4);
  --case-title-font-size: min(var(--font-size-section-title), (100vw - var(--gutter-min) * 2) / 18);
  /* 見出し帯の下半分から薄い灰色の背景をかける */
  padding-block: 2.5rem 0;
  background: linear-gradient(to bottom, transparent calc(2.5rem + var(--case-title-height) / 2), var(--color-bg-gray) 0);
}

.case + .case {
  margin-top: 2.5rem;
}

.case > .l-container {
  padding-bottom: 3.5rem;
}

.case__title {
  display: flex;
  width: min(100%, 49.6rem);
  margin-inline: auto;
  color: var(--color-white);
  font-size: var(--case-title-font-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.case__number,
.case__name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--case-title-height);
  padding-inline: 0.6em;
}

.case__number {
  flex: none;
  background-color: var(--color-navy);
}

.case__name {
  flex: 1;
  justify-content: flex-start;
  background-color: var(--color-blue);
  white-space: nowrap;
}

.case__text {
  max-width: 58.4rem;
  margin: 2rem auto 0;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.95;
}

/* --- 既存事業 → 新事業 の図 --- */
.case-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 58.4rem;
  margin: 2.5rem auto 0;
}

/* 狭い画面ではラベルを写真の間に並べ替える */
.case-flow__labels {
  display: contents;
}

.case-flow__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding-inline: 0.8rem;
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 3px solid var(--color-primary);
  border-radius: 0.45rem;
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.case-flow__label--before {
  order: 1;
}

.case-flow__photos {
  order: 2;
  width: 100%;
  margin-top: 1rem;
}

/* 下向きの矢印: ::before が縦線、::after が三角形 */
.case-flow__labels::before {
  order: 3;
  width: 3px;
  height: 2.5rem;
  margin-top: 1.2rem;
  background-color: var(--color-black);
  content: "";
}

.case-flow__labels::after {
  order: 4;
  margin-bottom: 1.2rem;
  border-top: 1.1rem solid var(--color-black);
  border-right: 0.55rem solid transparent;
  border-left: 0.55rem solid transparent;
  content: "";
}

.case-flow__label--after {
  order: 5;
}

.case-flow__result {
  order: 6;
  width: 100%;
  margin-top: 1rem;
}

.case-flow__photo-list {
  display: flex;
  gap: 0.6rem;
}

.case-flow__photo-list li {
  flex: 1 1 0;
}

.case-flow__caption {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  text-align: center;
}

.case-flow__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.2em;
  color: var(--color-primary);
  font-size: clamp(1.3rem, 0.95rem + 1.85vw, 2.5rem);
  white-space: nowrap;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.case-flow__points li::before {
  content: "●";
}

/*
 * アカエイの尾の先（画像の左から約 92%・上から約 54%）が黄色い円にかかるよう、
 * 円の位置と大きさを画像の幅（cqi）基準で指定する。尾は円より前面に表示する。
 */
.case-flow__product {
  --product-padding-top: 2.5rem;
  position: relative;
  container-type: inline-size;
  width: min(88%, 24rem);
  margin: 1rem 0 0;
  padding-top: var(--product-padding-top);
}

.case-flow__product img {
  position: relative;
  z-index: 1;
}

/* 狭い画面: 円を尾の先の上に置く（円の中心を画像の左から 90%、尾の先より 3rem 上） */
.case-flow__bubble {
  --bubble-size: 7.6rem;
  position: absolute;
  top: calc(var(--product-padding-top) + 100cqi * 868 / 1372 * 0.54 - 3rem - var(--bubble-size) / 2);
  left: calc(90cqi - var(--bubble-size) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bubble-size);
  aspect-ratio: 1;
  background-color: var(--color-yellow);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.7;
  text-align: center;
}

.case__illust {
  width: min(70%, 20rem);
  margin: 1.5rem 0 0 auto;
}

@media (min-width: 768px) {
  .case {
    --case-title-base: clamp(1.4rem, 0.7rem + 1.5vw, 2rem);
    --case-title-height: calc(var(--case-title-base) * 2.25);
    --case-title-font-size: var(--font-size-section-title);
    padding-top: 3rem;
    background-image: linear-gradient(to bottom, transparent calc(3rem + var(--case-title-height) / 2), var(--color-bg-gray) 0);
  }

  .case + .case {
    margin-top: 3.5rem;
  }

  .case > .l-container {
    padding-bottom: 4rem;
  }

  .case__number {
    width: 26%;
  }

  .case__name {
    padding-inline: 0.8em;
  }

  .case__text {
    margin-top: 2.6rem;
  }

  /* 広い画面: 左列にラベルと矢印、右列に写真と成果を並べる2次元レイアウトのため grid を使う */
  .case-flow {
    /* 写真・成果の高さを図の幅（cqi）から求め、ラベルの縦位置を合わせる */
    --flow-label-width: 7.6rem;
    --flow-column-gap: clamp(2rem, 5vw, 5rem);
    --flow-photo-gap: 1.55rem;
    --flow-label-height: 3rem;
    container-type: inline-size;
    display: grid;
    grid-template-columns: var(--flow-label-width) 1fr;
    column-gap: var(--flow-column-gap);
    row-gap: 2.6rem;
    align-items: center;
    margin-top: 2.6rem;
  }

  .case-flow__labels {
    --photo-height: calc((100cqi - var(--flow-label-width) - var(--flow-column-gap) - var(--flow-photo-gap)) / 2 * 1000 / 1299);
    --result-height: calc(40cqi * 868 / 1372);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    grid-row: 1 / 3;
    grid-column: 1;
  }

  .case-flow__label {
    width: 100%;
    height: var(--flow-label-height);
    font-size: clamp(1rem, 0.6rem + 0.8vw, 1.45rem);
  }

  .case-flow__label--before {
    order: 0;
    margin-top: calc(var(--photo-height) / 2 - var(--flow-label-height) / 2);
  }

  .case-flow__labels::before {
    order: 1;
    flex: 1;
    height: auto;
    margin-top: 1.1rem;
  }

  .case-flow__labels::after {
    order: 2;
    margin-bottom: 0.8rem;
  }

  .case-flow__label--after {
    order: 3;
    margin-bottom: calc(var(--result-height) / 2 - var(--flow-label-height) / 2);
  }

  .case-flow__photos,
  .case-flow__result {
    order: 0;
    margin: 0;
    grid-column: 2;
  }

  .case-flow__photo-list {
    gap: var(--flow-photo-gap);
  }

  .case-flow__caption {
    font-size: 0.75rem;
  }

  .case-flow__result {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  .case-flow__points {
    flex-direction: column;
    gap: 0;
  }

  .case-flow__product {
    --product-padding-top: 0rem;
    width: 40cqi;
    margin: 0;
  }

  /* 広い画面: 円をアカエイの右上に置き、円の左下に尾の先がかかるようにする */
  .case-flow__bubble {
    --bubble-size: max(46cqi, 7.2rem);
    top: 0;
    left: 79cqi;
    font-size: clamp(0.7rem, 0.4rem + 0.6vw, 0.85rem);
  }

  .case__illust {
    width: min(30%, 20rem);
    margin-top: 0;
    margin-right: 1%;
  }
}

/* ==========================================================================
   フッター
   ========================================================================== */

.site-footer {
  padding-block: 2.5rem 3rem;
  color: var(--color-white);
  background-color: var(--color-primary);
  text-align: center;
}

.site-footer :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.footer-nav {
  border-block: 1px solid var(--color-footer-line);
}

.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-block: 0.4rem;
}

.footer-nav__list li {
  width: 50%;
}

.footer-nav__link {
  display: block;
  padding: 0.5rem 0.5rem;
  color: var(--color-white);
  font-size: 0.9rem;
  text-decoration: none;
  transition:
    color var(--duration) var(--easing),
    background-color var(--duration) var(--easing);
}

.footer-nav__link:hover {
  background-color: rgb(255 255 255 / 0.12);
}

.footer-nav__link:active {
  background-color: rgb(255 255 255 / 0.22);
}

.footer-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer__title {
  margin-top: 2rem;
  font-size: clamp(1.4rem, 0.85rem + 2.2vw, 2.65rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.site-footer__catch {
  font-size: clamp(0.9rem, 0.6rem + 1.2vw, 1.6rem);
  line-height: 1.5;
}

.site-footer__office {
  margin-top: 1.2rem;
  font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.4rem);
  line-height: 1.5;
}

.site-footer__address {
  font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.95rem);
}

.site-footer__action {
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .site-footer {
    padding-block: 2.5rem 3.6rem;
  }

  .footer-nav__list {
    flex-wrap: nowrap;
    padding-block: 0.15rem;
  }

  .footer-nav__list li {
    width: auto;
  }

  .footer-nav__list li + li {
    border-left: 1px solid var(--color-footer-line);
  }

  .footer-nav__link {
    padding: 0.35rem clamp(0.7rem, 1.6vw, 1.45rem);
    font-size: clamp(0.85rem, 0.35rem + 1.05vw, 1.1rem);
  }

  .site-footer__title {
    margin-top: 2.3rem;
  }
}

/* ==========================================================================
   スクロールに応じた表示アニメーション（main.js が is-reveal-ready を付与したときだけ有効）
   ========================================================================== */

/* 表示するときだけアニメーションさせる（初期化時の非表示化は瞬時に行う） */
.is-reveal-ready [data-reveal].is-visible {
  transition:
    opacity 0.8s var(--easing),
    transform 0.8s var(--easing);
}

.is-reveal-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(1.5rem);
}

/* ==========================================================================
   動きを減らす設定の環境ではアニメーションとスムーズスクロールを抑制する
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .is-reveal-ready [data-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
  }
}