@charset "utf-8";
/* キャッチコピー17文字だけの Zen Kaku Gothic New Black（900）。SIL Open Font License 1.1（fonts/OFL.txt）。
   Google Fonts の text= 指定で作られたサブセット（fonts/zen-kaku-gothic-new-900-catch.woff2）を埋め込んでいる。
   外部フォントの読み込みを待たずに、ファーストビューの言葉を正しい字形で描くため */
@font-face {
  font-family: "ARK Catch";
  src: url(data:font/woff2;base64,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) format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3001-3002, U+300C-300D, U+3044, U+304B-304C, U+304F-3050, U+3059-305A, U+305F-3060, U+3084, U+308A-308B, U+3092, U+3099, U+4E16, U+754C, U+767D, U+9762;
}
@property --p { syntax: "<length-percentage>"; inherits: false; initial-value: 400%; }   /* 言葉が開く位置（帆布の縁） */
/* ==========================================================================
   ARK — 名刺の世界（社長の名刺が正解。船は小さな脇役）
   1. design tokens ........ 色・書体・余白・線・動き（以降はすべてトークン参照）
   1〜6 は全ページ共通の土台とヒーロー（名刺の裏）。下のセクションは 18.「名刺の世界」。
   旧・航海の部品（12. 灯台・便箋、舷窓・番号札など）は fix1 で消した（番号は欠番のまま）。
   ========================================================================== */
:root {
  /* --- color: 空と海と木。主役の色面は「藍の海 × 木のアプリコット」 --- */
  --c-sky: #E3EEF4;          /* 朝の空（ヒーロー） */
  --c-day: #EEF4F7;          /* 昼の空 */
  --c-dusk: #FBE6D2;         /* 夕方（採用・お問い合わせ） */
  --c-dusk-deep: #F8DAC0;
  --c-night: #14203D;        /* 夜（フッター） */
  --c-night-sea: #1C2F57;
  --c-ink: #3E3A39;          /* 文字：名刺の ARK と同じチャコール */
  --c-ink-soft: #55504E;
  --c-ink-mute: #726C6A;
  --c-line: #141414;         /* 線画の輪郭（道具イラストと同じ黒） */
  --c-sea-far: #B2D3EB;
  --c-sea-mid: #85B9E0;
  --c-sea: #3385CC;          /* 海の青 */
  --c-sea-deep: #1F5898;     /* 深い海：ARKについて・私たちの強みの色面 */
  --c-wood: #FCC08A;         /* 木のアプリコット（イラストの柄の色） */
  --c-wood-light: #FED9B6;
  --c-wood-deep: #E9A26A;
  --c-wood-text: #964A18;    /* 文字に使うアプリコット（夕方の地 #FBE6D2 に 5.3:1、#F8DAC0 に 4.8:1、昼の地に 5.8:1） */
  --c-paper: #FDFEFE;
  --c-glass: #DCEAF2;
  --c-gray: #D2D2D2;         /* 断面図の畳んだ服だけ */
  --c-sun: #FCDDBF;
  --c-star: #FDE7C8;
  --c-night-text: #C9D3E6;
  /* 4事業の差し色（イラストから採取） */
  --c-beauty: #FCC6D2;
  --c-creative: #FCEA9C;
  --c-space: #FCC08A;
  --c-apparel: #8AA2DE;
  /* 断面図・遠景の淡色 */
  --t-beauty: #FDE8EE;
  --t-creative: #FDF5D3;
  --t-space: #FEEBDA;
  --t-apparel: #E2E8F7;
  --t-stock: #E8EEF2;
  /* 板張りの柄（船体・ヒーローの船室の壁） */
  --planks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='184'%3E%3Crect x='0' y='0' width='300' height='46' fill='%23FCC08A'/%3E%3Crect x='300' y='0' width='300' height='46' fill='%23FABC85'/%3E%3Crect x='150' y='46' width='300' height='46' fill='%23FDC490'/%3E%3Crect x='450' y='46' width='150' height='46' fill='%23FBBF88'/%3E%3Crect x='0' y='46' width='150' height='46' fill='%23FBBF88'/%3E%3Crect x='75' y='92' width='300' height='46' fill='%23FCC28D'/%3E%3Crect x='375' y='92' width='225' height='46' fill='%23F9BA83'/%3E%3Crect x='0' y='92' width='75' height='46' fill='%23F9BA83'/%3E%3Crect x='225' y='138' width='300' height='46' fill='%23FDC591'/%3E%3Crect x='525' y='138' width='75' height='46' fill='%23FBBE87'/%3E%3Crect x='0' y='138' width='225' height='46' fill='%23FBBE87'/%3E%3Cg fill='none' stroke='%23E9A26A' stroke-width='1.2'%3E%3Cpath d='M0 45.5H600 M0 91.5H600 M0 137.5H600 M0 183.5H600 M0.6 0V46 M300.6 0V46 M150.6 46V92 M450.6 46V92 M75.6 92V138 M375.6 92V138 M225.6 138V184 M525.6 138V184'/%3E%3C/g%3E%3Cg fill='%23E9A26A'%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3Ccircle cx='8' cy='38' r='1.6'/%3E%3Ccircle cx='308' cy='8' r='1.6'/%3E%3Ccircle cx='308' cy='38' r='1.6'/%3E%3Ccircle cx='158' cy='54' r='1.6'/%3E%3Ccircle cx='158' cy='84' r='1.6'/%3E%3Ccircle cx='458' cy='54' r='1.6'/%3E%3Ccircle cx='458' cy='84' r='1.6'/%3E%3Ccircle cx='83' cy='100' r='1.6'/%3E%3Ccircle cx='83' cy='130' r='1.6'/%3E%3Ccircle cx='383' cy='100' r='1.6'/%3E%3Ccircle cx='383' cy='130' r='1.6'/%3E%3Ccircle cx='233' cy='146' r='1.6'/%3E%3Ccircle cx='233' cy='176' r='1.6'/%3E%3Ccircle cx='533' cy='146' r='1.6'/%3E%3Ccircle cx='533' cy='176' r='1.6'/%3E%3C/g%3E%3C/svg%3E");   /* 板ごとに 2〜3% の明度差 */
  --planks-size: 600px 184px;

  /* --- type（和文は 500 / 900 の2ウェイトだけ） --- */
  --f-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --f-logo: "Manrope", "Helvetica Neue", Arial, sans-serif;   /* 会社概要の証書の印・プライバシーの印の「ARK」だけ（ロゴは名刺の ARK の SVG） */
  --f-en: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fs-catch: clamp(2.2rem, min(0.8rem + 4.2vw, 8.6svh), 4.9rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 2.3vw, 3.2rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  --fs-port: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --fs-small: 0.8125rem;
  --fs-micro: 0.75rem;
  --lh-body: 2;
  --lh-head: 1.42;
  --ls-body: 0.04em;
  --ls-label: 0.18em;
  --soft: "SOFT" 100, "WONK" 0;

  /* --- space --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 136px;
  --gutter: clamp(16px, 4.6vw, 80px);
  --lane: clamp(28px, 4.4vw, 64px);            /* 航路の通り道（本文はこの右から始まる） */
  --content: 1200px;
  --wrap-w: min(100% - var(--gutter) * 2, var(--content));
  --wrap-x: calc((100% - var(--wrap-w)) / 2);   /* .wrap の左端 */
  --sec-pad: clamp(96px, 11vw, 176px);
  --header-h: clamp(60px, 5.2vw, 78px);
  --radius: 4px;

  /* --- line（船の輪郭は道具イラストと同じ細さにそろえる） --- */
  --lw: 1.6px;
  --lw-fine: 1.1px;
  --lw-bold: 2.1px;
  --route-w: 2.6px;
  --route-gap: 10px;

  /* --- motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* 出る */
  --ease-sail: cubic-bezier(0.65, 0, 0.35, 1);     /* 移る */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 弾む（乗組員と積み荷だけ） */
  --ease-wave: cubic-bezier(0.37, 0, 0.63, 1);     /* 揺れ */
  --ease-iris: cubic-bezier(0.7, 0, 0.18, 1);      /* 窓が開く */
  --dur-1: 0.18s;
  --dur-2: 0.32s;
  --dur-3: 0.6s;
  --dur-4: 1s;
  --dur-5: 1.6s;
  /* 同じ動きを GSAP 側でも使う（main.js が読む） */
  --js-ease-out: expo.out;
  --js-ease-sail: power3.inOut;
  --js-ease-pop: back.out(2.2);
  --js-ease-wave: sine.inOut;
}

@media (max-width: 760px) {
  :root {
    --lw: 1.3px;
    --lw-fine: 1px;
    --lw-bold: 1.7px;
    --route-w: 2.2px;
    --route-gap: 8px;
  }
}

/* ==========================================================================
   2. base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  position: relative;
  background: var(--c-day);
  color: var(--c-ink);
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 日本語の改行（スマホ仕上げ）: HTML の文節の切れ目に tools/phrase_wrap.py が <wbr> を入れてあり、
     keep-all で「<wbr>・空白の位置でだけ」折り返す（Chrome / Safari 共通。Chrome だけの auto-phrase には頼らない）。
     1文節が1行に入らない時だけ anywhere で割る（横にはみ出さない保険）。line-break: strict は小さい「ゃ」「ー」を行頭に置かない */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
/* 見出しは行の長さをそろえる（未対応のブラウザでは普通の折り返しのまま）。
   本文の text-wrap: pretty は使わない — WebKit（iPhone の Safari 26）で keep-all＋<wbr> の長い段落に pretty を当てると、
   幅によってはページごと落ちる（プライバシー第2条・390px で再現）。最後の行の短さは tools/phrase_wrap.py の SHORT_TAIL で防ぐ */
h1, h2, h3, h4, dt, figcaption, blockquote { text-wrap: balance; }

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

a { color: inherit; }
p, h1, h2, h3, ol, ul, figure, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px dashed var(--focus, var(--c-sea-deep));
  outline-offset: 4px;
  border-radius: 2px;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed; left: var(--sp-4); top: var(--sp-3); z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-ink); color: var(--c-paper);
  border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 900; text-decoration: none;
  translate: 0 -200%;
  transition: translate var(--dur-2) var(--ease-out);
}
.skip:focus { translate: 0 0; }

/* ==========================================================================
   3. 線画の共通部品（線・ラベル・ヘッダーのボタン）
   ========================================================================== */
.ln {
  stroke: var(--c-line);
  stroke-width: var(--lw);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ln--fine { stroke-width: var(--lw-fine); }

/* --- セクションラベル：名刺の ✦ ＋ 日本語（太字）＋ 英字の小さな添え書き --- */
.label {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.75em;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 900;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  color: var(--label, #3E3A39);
}
.label__star { font-size: 0.9em; letter-spacing: 0; color: var(--star-fg, currentColor); }
.label__en {
  font-family: var(--f-en);
  font-variation-settings: var(--soft);
  font-weight: 500;
  font-size: 0.95em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-en, #6D6866);
}
.label__en::before { content: "— "; }

.sec-title {
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  text-wrap: balance;
}

/* --- ボタン（.btn）：ヘッダーの「お問い合わせ」。名刺の紙（白地・チャコールの細い線）に ✦ を添える --- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.9em;
  min-height: 52px;
  padding: 0.85em 1.35em 0.85em 2.2em;
  background: #FFFFFF;
  border: 1px solid var(--c-ink);
  border-radius: 2px;
  color: var(--c-ink);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), translate var(--dur-1) var(--ease-out);
}
.btn::before { /* 名刺の ✦ */
  content: "";
  position: absolute; left: 0.95em; top: 50%;
  width: 0.62em; height: 0.62em;
  translate: 0 -50%;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.btn:hover { background: var(--c-ink); color: #FFFFFF; }
.btn:active { translate: 0 2px; }
.btn--small { min-height: 40px; padding: 0.5em 1.05em 0.5em 1.95em; font-size: 0.82rem; }
.btn--small::before { left: 0.78em; width: 0.6em; height: 0.6em; }

/* ==========================================================================
   4. header / menu
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  transition: background-color var(--dur-3) var(--ease-out);
}
.site-header::after { /* スクロール後の下の縁：名刺の線と同じ細い線 */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgb(62 58 57 / 0.16);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.site-header.is-scrolled { background: rgb(255 255 255 / 0.94); }   /* 名刺の紙の白（ヒーロー・ARKについてと同じ） */
.site-header.is-scrolled::after { opacity: 1; }
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-inline: var(--gutter);
}
.logo {
  display: inline-flex; align-items: center; gap: 0.55em;
  text-decoration: none;
  color: var(--c-ink);
  padding-block: 12px; margin-block: -12px;   /* 押せる高さを 43px に（見た目と位置は同じ） */
}
/* ロゴ：名刺の極太の「ARK」（名刺の Illustrator データのアウトライン。色も名刺と同じ #3E3A39）。
   高さは前の文字ロゴ（Manrope 26〜32px）の大文字と同じくらいの見た目にそろえる */
.logo__mark {
  display: block;
  height: clamp(19px, 1.55vw, 23px);
  width: auto;
  aspect-ratio: 103.02 / 30.48;
  fill: #3E3A39;
}
.gnav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.gnav__list { display: flex; gap: clamp(14px, 1.9vw, 30px); }
.gnav__list a {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 0.45em;
  padding-block: 0.4em;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}
.gnav__list a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-3) var(--ease-out);
}
.gnav__list a:hover::after,
.gnav__list a:focus-visible::after { clip-path: inset(0 0 0 0); }
.gnav__no {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: var(--fs-micro);
  color: var(--c-ink-mute);
  letter-spacing: 0.06em;
}
.menu-btn { /* 名刺の紙の札。中に ✦ */
  display: none;
  position: relative;
  align-items: center; gap: 0.5em;
  min-height: 44px;
  padding: 0.3em 0.95em 0.3em 0.8em;
  background: #FFFFFF;
  border: 1px solid var(--c-ink);
  border-radius: 2px;
  color: var(--c-ink);
  font-size: 0.8rem; font-weight: 900; letter-spacing: 0.1em;
  cursor: pointer;
}
.menu-btn__icon { width: 16px; height: 16px; fill: currentColor; transition: rotate var(--dur-4) var(--ease-out); }
.menu-btn:hover .menu-btn__icon { rotate: 90deg; }
.chart-menu__close::before { /* 名刺の ✦ */
  content: "";
  position: absolute; left: 0.75em; top: 50%;
  width: 0.6em; height: 0.6em;
  translate: 0 -50%;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.chart-menu {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: #FFFFFF;   /* 名刺の紙の白 */
  color: var(--c-ink);
}
.chart-menu::backdrop { background: rgb(62 58 57 / 0.35); }
.chart-menu__inner {
  position: relative;
  min-height: 100%;
  padding: var(--sp-4) var(--gutter) var(--sp-8);
}
.chart-menu__head { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin-bottom: var(--sp-6); }
.chart-menu__title {
  font-family: var(--f-en); font-variation-settings: var(--soft);
  font-weight: 600; font-size: 1.2rem; letter-spacing: 0.06em;
}
.chart-menu__ja { font-family: var(--f-ja); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.14em; color: var(--c-ink-mute); margin-left: 0.4em; }
.chart-menu__close {
  position: relative;
  min-height: 44px; padding: 0 1.1em 0 1.8em;
  background: #FFFFFF;
  border: 1px solid var(--c-ink); border-radius: 2px;
  color: var(--c-ink);
  font-size: 0.85rem; font-weight: 900; letter-spacing: 0.1em;
  cursor: pointer;
}
.chart-menu__close:hover, .menu-btn:hover { background: var(--c-ink); color: #FFFFFF; }
.chart-menu__list {
  position: relative;
  padding-left: var(--lane);
}
.chart-menu__list::before { /* 縦の細い線（名刺の線） */
  content: "";
  position: absolute; left: calc(var(--lane) / 2); top: 1.2em; bottom: 1.2em;
  width: 1px;
  background: rgb(62 58 57 / 0.25);
}
.chart-menu__list > li { position: relative; }
.chart-menu__list > li > a {
  display: flex; align-items: baseline; gap: 0.8em;
  min-height: 48px; padding-block: 0.55em;
  font-size: 1.3rem; font-weight: 900;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.chart-menu__list > li > a::before { /* ✦（形は 18. の名刺の ✦。白い紙で線を切る） */
  position: absolute; left: calc(var(--lane) / -2); top: 1.25em;
  translate: -50% -50%;
  width: 12px; height: 14px;
  color: #3E3A39;
  box-shadow: 0 0 0 4px #FFFFFF;
}
.chart-menu__no { font-family: var(--f-en); font-weight: 500; font-size: 0.85rem; color: var(--c-ink-mute); }
.chart-menu__sub { display: flex; flex-wrap: wrap; gap: 0.2em 1.2em; padding: 0 0 var(--sp-3) 2.4em; }
.chart-menu__sub a { display: inline-block; min-height: 40px; padding-block: 0.4em; font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: 1rem; text-decoration: none; border-bottom: 1px dotted currentColor; }
.chart-menu__ark { display: none; }   /* メニューの小舟はやめた（船はヒーローと採用の2か所だけ） */

/* ==========================================================================
   5. hero（名刺の裏）
   代表の名刺の裏面を、そのまま画面いっぱいに拡大する。座標は名刺の Illustrator データ（pt）のまま：
   楕円の中心を原点に、1 単位 = --u。ARK・楕円の線・✦・7つの水彩イラストの位置と大きさは名刺と同じ比率
   （名刺 91×55mm = 257.95×155.9pt。--u は名刺がちょうど画面に収まる大きさ）。
   方舟は小さな脇役：左下の水平線に浮かぶ小舟だけ。スクロールすると、航路を下って「ARKについて」へ出航する。
   ========================================================================== */
.hero {
  --c-card: #FFFFFF;          /* 名刺の紙の白 */
  --c-card-ink: #3E3A39;      /* 名刺の ARK・線・✦ の色 */
  --vh: max(100svh, 540px);
  --foot: 0px;                /* 小舟と SCROLL のために下に空ける高さ（横長の画面では名刺の余白に収まる） */
  --u: min(100vw / 257.95, (var(--vh) - var(--header-h)) / 155.9, 7.2px);
  --oy: calc(var(--header-h) + (var(--vh) - var(--header-h) - var(--foot)) / 2);   /* 楕円の中心の高さ */
  --cue-s: 1.25;              /* 航路の起点の小舟の大きさ（航路を下りながら 1 倍へ） */
  --keel: 30px;               /* 小舟の竜骨（喫水線）の、画面の下端からの高さ */
  position: relative;
  isolation: isolate;
  height: var(--vh);
  overflow: hidden;
  overflow: clip;
  background: var(--c-card);
  color: var(--c-card-ink);
}
.hero__card { position: absolute; left: 50%; top: var(--oy); width: 0; height: 0; }   /* 楕円の中心（原点） */
.hero__deco, .hero__items, .hero__mid { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hero__deco { -webkit-user-select: none; user-select: none; }
.hero__item img { -webkit-user-drag: none; pointer-events: none; }
.hero__orbit { position: absolute; max-width: none; overflow: visible; color: var(--c-card-ink); fill: currentColor; }
.hero__orbit--a { left: calc(-108.714 * var(--u)); top: calc(-55.17 * var(--u)); width: calc(215.09 * var(--u)); height: calc(115.47 * var(--u)); }
.hero__orbit--b { display: none; left: calc(-50 * var(--u)); top: calc(-80 * var(--u)); width: calc(100 * var(--u)); height: calc(160 * var(--u)); }
.hero__orbit .orbit-line { fill: none; stroke: currentColor; stroke-width: 0.85px; vector-effect: non-scaling-stroke; }
.orbit-draw { stroke-dasharray: 1 1; }
.orbit-pop { transform-box: fill-box; transform-origin: center; }

/* 7つの水彩イラスト（--ax/--ay/--aw は名刺どおりの横長の配置、--bx/--by/--bw はスマホの縦長の楕円） */
.hero__item {
  --x: var(--ax); --y: var(--ay); --w: var(--aw);
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  translate: -50% -50%;
}
.hero__item img { display: block; width: 100%; height: auto; }
.hero__items { transition: translate 1.4s var(--ease-out); translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -4px); }

/* ARK（名刺の極太のロゴ）とキャッチコピー */
.hero__ark {
  position: absolute;
  left: calc(-51.51 * var(--u));
  top: calc(-23.31 * var(--u));
  width: calc(103.02 * var(--u));
  margin: 0;
  line-height: 0;
  color: var(--c-card-ink);
  transition: translate 1.4s var(--ease-out);
  translate: calc(var(--mx, 0) * 3px) calc(var(--my, 0) * 2px);
}
.hero__ark-svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.hero__ark-ch { transform-box: fill-box; transform-origin: 50% 100%; }
.hero__catch {
  position: absolute;
  left: 0; top: calc(21.12 * var(--u));
  translate: -50% -50%;
  padding-left: 0.09em;   /* 字間の分だけ左右をそろえる */
  white-space: nowrap;
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: calc(6.3 * var(--u));
  line-height: 1;
  letter-spacing: 0.09em;
  color: var(--c-card-ink);
}
.hero__br { display: none; }

/* 名刺の外：左下に小舟（航路の起点）と SCROLL、右下に英字の小さな札 */
.hero__foot { position: absolute; inset: auto 0 0 0; height: 0; }
.hero__foot::before { /* 小舟が浮かぶ細い水平線（名刺の線と同じ細さ・色） */
  content: "";
  position: absolute; left: 0;
  bottom: calc(var(--keel) - 1px);
  width: calc(var(--wrap-x) + var(--lane) / 2 + 150px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(62 58 57 / 0.45) 22%, rgb(62 58 57 / 0.45) 70%, transparent);
}
.hero__cue-pt { /* 航路の起点（小舟の竜骨の位置）。航路の小舟と起点の小舟は、どちらもこの点に同じ寸法で乗る */
  position: absolute;
  left: calc(var(--wrap-x) + var(--lane) / 2);
  bottom: var(--keel);
  width: 1px; height: 1px;
  pointer-events: none;
}
.hero__cue-ship { /* JS が無い時だけ見える起点の小舟（JS がある時は、同じ場所・同じ大きさで航路の小舟が浮かぶ） */
  position: absolute;
  left: calc(var(--wrap-x) + var(--lane) / 2);
  bottom: var(--keel);
  width: 48px;
  margin: 0 0 -10px -24px;
  transform-origin: 24px 34px;
  scale: var(--cue-s);
  pointer-events: none;
}
html.has-route .hero__cue-ship { visibility: hidden; }
.hero__cue-ship .mini-ark { width: 100%; }
.hero__cue {
  position: absolute; z-index: 2;
  left: calc(var(--wrap-x) + var(--lane) / 2 + 30px * var(--cue-s) + 14px);
  bottom: calc(var(--keel) + 4px);
  display: block;
  padding: 4px 6px;
  color: var(--c-card-ink);
  text-decoration: none;
  --focus: var(--c-card-ink);
}
.hero__cue-text {
  display: block;
  font-family: var(--f-en); font-weight: 500;
  font-size: var(--fs-micro); letter-spacing: 0.3em; text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;   /* WebKit（iPhone の Safari）は縦書きの絶対配置で幅を最小に見積もり、S・C・R・O・L・L が1字ずつ横に散る */
}
.hero__eyebrow {
  position: absolute; z-index: 2;
  right: var(--gutter);
  bottom: calc(var(--keel) + 6px);
  display: flex; align-items: center; gap: 0.7em;
  margin: 0;
  font-family: var(--f-en);
  font-variation-settings: var(--soft), "opsz" 24;
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6D6866;   /* 紙の白に 5.5:1 */
}
.hero__eyebrow-star { font-style: normal; letter-spacing: 0; color: var(--c-card-ink); }

/* ==========================================================================
   6. sections common（見出しの余白。新しいセクションは 18. の .c-sec / .c-wrap）
   ========================================================================== */
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }

/* ==========================================================================
   15. keyframes
   ========================================================================== */
@keyframes card-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes orbit-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes star-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes item-in { from { opacity: 0; transform: translateY(16%) scale(0.9) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes item-float { from { transform: none; } to { transform: translateY(-3%) rotate(0.8deg); } }
@keyframes ark-ch { from { opacity: 0; transform: translateY(32%); } to { opacity: 1; transform: none; } }
@keyframes catch-in { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   16. ファーストビューの台本（JS 環境かつ動きを減らす設定でない時だけ。名刺の裏ができあがっていく）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ヒーロー（名刺の裏）：2 秒以内に名刺の裏と同じ絵が完成する。
       0.15–1.15s 楕円の線が 3 時の少し上から時計回りに引かれ、線が通ると ✦ が灯る
       0.06–1.57s 線が通るところから、イラストが楕円に沿って順にふわっと置かれる（リップ→ハンマー→レンズ→シャツ→カメラ→コンパクト→斧）
       0.5–1.38s A・R・K が下から現れる ／ 1.0–1.7s キャッチコピー ／ 1.35–1.95s 小舟・SCROLL
       2s〜 イラストがごくわずかに浮遊する（マウスには数 px だけ反応する） */
  html.js.is-go .site-header__inner > :not(.logo) { animation: fade-in 0.5s var(--ease-out) 0.2s backwards; }
  html.js.is-go .orbit-draw { animation: orbit-draw 1s linear 0.15s backwards; }
  html.js.is-go .orbit-pop { animation: star-pop 0.5s var(--ease-pop) var(--d) backwards; }
  html.js.is-go .hero__item { animation: item-in 0.6s var(--ease-out) var(--d) backwards; }
  html.js.is-go .hero__item img { animation: item-float var(--fd, 5.4s) var(--ease-wave) 2s infinite alternate; }
  html.js.is-go .hero__item:nth-child(2n) img { --fd: 6.2s; animation-direction: alternate-reverse; }
  html.js.is-go .hero__item:nth-child(3n) img { --fd: 4.8s; }
  html.js .hero.is-off .hero__item img { animation-play-state: paused; }
  html.js.is-go .hero__ark-ch { animation: ark-ch 0.7s var(--ease-out) backwards; animation-delay: calc(0.5s + var(--i) * 0.09s); }
  html.js.is-go .hero__catch { animation: catch-in 0.7s var(--ease-out) 1s backwards; }
  html.js.is-go .hero__cue,
  html.js.is-go .hero__cue-ship,
  html.js.is-go .hero__foot::before,
  html.js.is-go .hero__eyebrow { animation: fade-in 0.6s var(--ease-out) 1.35s backwards; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   17. responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .gnav { display: none; }
  .menu-btn { display: inline-flex; }
  html.no-js .site-header { position: absolute; height: auto; }
  html.no-js .site-header__inner { flex-wrap: wrap; row-gap: 4px; padding-block: 10px 6px; }
  html.no-js .gnav { display: flex; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  html.no-js .menu-btn { display: none; }
  html.no-js .gnav__list { gap: 16px; }
  html.no-js .gnav__cta { display: none; }
}


/* ヒーローのスマホと縦長タブレット：名刺を回さず、楕円を縦長にする（イラストは名刺と同じ角度に、名刺の 0.68 倍の大きさで）。
   キャッチコピーは 2 行。イラスト・ARK・コピー・小舟が 1 画面に収まる */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .hero {
    --foot: 76px;
    --u: min(96vw / 100, (var(--vh) - var(--header-h) - var(--foot) - 12px) / 152);
    --oy: calc(var(--header-h) + 6px + (var(--vh) - var(--header-h) - var(--foot) - 12px) / 2 + 2 * var(--u));
    --cue-s: 1.1;
    --keel: 26px;
  }
  .hero__orbit--a { display: none; }
  .hero__orbit--b { display: block; }
  .hero__item { --x: var(--bx); --y: var(--by); --w: var(--bw); }
  html.js.is-go .hero__item { animation-delay: var(--dp); }
  .hero__ark { left: calc(-30 * var(--u)); top: calc(-18.87 * var(--u)); width: calc(60 * var(--u)); }
  .hero__catch { top: calc(9.65 * var(--u)); font-size: max(13px, calc(4.3 * var(--u))); line-height: 1.55; text-align: center; }
  .hero__br { display: inline; }
  .hero__foot::before { width: calc(var(--wrap-x) + var(--lane) / 2 + 110px); }
  /* 狭い画面では SCROLL を小舟の真上に置き、右下の英字の札と重ならないようにする */
  .hero__cue { left: calc(var(--wrap-x) + var(--lane) / 2); bottom: calc(var(--keel) + 34px * var(--cue-s) + 6px); translate: -50% 0; padding-inline: 2px; }
  .hero__cue-text { writing-mode: vertical-rl; letter-spacing: 0.22em; font-size: 12px; }   /* 12px 未満の文字は使わない */
}

@media (max-width: 760px) {
  .sec-head { margin-bottom: 36px; }
}

/* ==========================================================================
   18. 名刺の世界（トップのヒーローより下・下層ページの共通部品）
   名刺の語彙だけで組む：白い紙／名刺の楕円と同じ細さの線（1px）／✦／淡い水彩の道具（カラー）／
   名刺の表の薄いグレーの道具／トンボ（名刺の裁ち落としの印）。文字は名刺の ARK と同じ #3E3A39。
   新しい部品のクラスは c- で始まる（第2段で、c- で始まらない旧・航海の部品を消す）
   ========================================================================== */
:root {
  --c-card: #FFFFFF;            /* 名刺の紙の白 */
  --c-text: #3E3A39;            /* 名刺の ARK・線・✦ の色。白に 11.0:1 */
  --c-text-mute: #6D6866;       /* 小さな英字・番号・肩書き。白に 5.5:1 */
  --c-hair: #3E3A39;            /* 名刺の楕円の線 */
  --c-hair-soft: rgb(62 58 57 / 0.18);   /* 区切りの細い線 */
  --c-paper-2: #FAF8F6;         /* 入力欄にフォーカスした時だけの、ほんの少し温かい白 */
  --c-wash: 0.17;               /* 名刺の表のグレーの道具の濃さ（紙に透かした薄さ） */
  --hair: 1px;
  --c-wrap-w: min(100% - var(--gutter) * 2, 1180px);
  --c-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0,-10 Q1.25,-1.25 8.6,0 Q1.25,1.25 0,10 Q-1.25,1.25 -8.6,0 Q-1.25,-1.25 0,-10 Z'/%3E%3C/svg%3E");
}
/* 4事業の差し色：名刺の水彩の道具から採った淡い色（--tone）、その薄い地（--tone-tint）、文字用（--tone-text：白に 4.5:1 以上） */
.tone--beauty   { --tone: #F2C4BC; --tone-tint: #FCEFEC; --tone-text: #A0473B; }   /* コンパクトの頬紅・リップ */
.tone--creative { --tone: #CDBFAE; --tone-tint: #F4F0EA; --tone-text: #6E5C4B; }   /* カメラの革と真鍮 */
.tone--space    { --tone: #E9AC7C; --tone-tint: #FCEFE4; --tone-text: #93501F; }   /* ハンマーと斧の木の柄 */
.tone--apparel  { --tone: #E0D2C0; --tone-tint: #F7F2EB; --tone-text: #77604A; }   /* シャツの生成り */

body.c-page { background: var(--c-card); color: var(--c-text); }
.c-page .sec-title { color: var(--c-text); }
.c-wrap { position: relative; z-index: 2; width: var(--c-wrap-w); margin-inline: auto; }
.c-sec {
  position: relative;
  isolation: isolate;
  padding-block: clamp(88px, 10vw, 160px);
  background: var(--c-card);
  color: var(--c-text);
  --focus: var(--c-text);
  overflow-x: hidden;   /* 楕円・トンボ・道具が画面の端からはみ出しても横スクロールにしない */
  overflow-x: clip;
}
.c-head { margin-bottom: clamp(36px, 4.6vw, 64px); }
.c-head--center { text-align: center; }
.c-head--center .label { justify-content: center; }
.c-center { margin-top: clamp(40px, 5vw, 72px); text-align: center; }

/* --- ✦・楕円・水彩の道具 --- */
.c-star { display: inline-block; width: 1em; height: 1.16em; fill: var(--c-hair); overflow: visible; vertical-align: middle; }
.c-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: visible; fill: none; stroke: var(--c-hair); stroke-width: var(--hair); pointer-events: none; }
.c-ring ellipse, .c-arc3__line path { vector-effect: non-scaling-stroke; }
/* 線を「引く」演出は、線そのものではなく、上にかぶせたマスクを回して見せる（伸縮した SVG では破線の長さが狂うため） */
@property --sw { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@property --swp { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.c-ring { -webkit-mask: conic-gradient(from 80deg, #000 var(--sw), transparent 0); mask: conic-gradient(from 80deg, #000 var(--sw), transparent 0); }
.c-arc3__line { -webkit-mask: linear-gradient(to right, #000 var(--swp), transparent 0); mask: linear-gradient(to right, #000 var(--swp), transparent 0); }
.c-pin { /* 楕円の上の ✦。下に紙の白を敷いて、名刺のように線を切る */
  position: absolute; z-index: 1;
  left: var(--x); top: var(--y);
  width: calc(15px * var(--s, 1)); height: calc(18px * var(--s, 1));
  translate: -50% -50%;
}
.c-pin::before { content: ""; position: absolute; inset: -30% -45%; z-index: -1; border-radius: 50%; background: var(--halo, var(--c-card)); }
.c-pin .c-star { display: block; width: 100%; height: 100%; }
.c-tool { /* 楕円の切れ目に置く水彩の道具（名刺の裏と同じ絵） */
  position: absolute; z-index: 2;
  left: var(--x); top: var(--y); width: var(--w);
  translate: -50% -50%;
  rotate: var(--r, 0deg);
}
.c-tool::before { content: ""; position: absolute; inset: 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--halo, var(--c-card)) 70%, transparent); }
.c-tool img { display: block; width: 100%; height: auto; }
.c-wash { position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.c-wash img, .footer__wash img { position: absolute; height: auto; max-width: none; opacity: var(--c-wash); }

/* --- トンボ（名刺の裁ち落としの印）：大事な1枚の紙（採用の手紙・お問い合わせ・メンバーの名刺・会社の名刺）にだけ付ける --- */
.c-trim, .mate-card__inner { position: relative; --t-o: 26px; --t-g: 7px; --t-l: calc(var(--t-o) - var(--t-g)); --t-c: rgb(62 58 57 / 0.55); }
.c-trim::before, .mate-card__inner::before,
.c-trim::after, .mate-card__inner::after {
  content: "";
  position: absolute; inset: calc(var(--t-o) * -1);
  pointer-events: none;
  background-repeat: no-repeat;
}
.c-trim::before, .mate-card__inner::before { /* 四隅 */
  background-image: linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)),
                    linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c));
  background-size: var(--t-l) 1px, 1px var(--t-l), var(--t-l) 1px, 1px var(--t-l), var(--t-l) 1px, 1px var(--t-l), var(--t-l) 1px, 1px var(--t-l);
  background-position: left 0 top var(--t-o), left var(--t-o) top 0, right 0 top var(--t-o), right var(--t-o) top 0,
                       left 0 bottom var(--t-o), left var(--t-o) bottom 0, right 0 bottom var(--t-o), right var(--t-o) bottom 0;
}
.c-trim::after, .mate-card__inner::after { /* 上下左右の中心の十字 */
  background-image: linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)),
                    linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c)), linear-gradient(var(--t-c), var(--t-c));
  background-size: 1px var(--t-l), 44px 1px, 1px var(--t-l), 44px 1px, var(--t-l) 1px, 1px 44px, var(--t-l) 1px, 1px 44px;
  background-position: center top 0, center top calc(var(--t-l) / 2), center bottom 0, center bottom calc(var(--t-l) / 2),
                       left 0 center, left calc(var(--t-l) / 2) center, right 0 center, right calc(var(--t-l) / 2) center;
}

/* --- ボタンとリンク：名刺のような四角い白い紙に ✦。押せる所は黒く反転する --- */
.c-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.95em;
  min-height: 54px;
  padding: 0.9em 1.5em 0.9em 1.3em;
  background: var(--c-card);
  border: var(--hair) solid var(--c-hair);
  border-radius: 0;
  color: var(--c-text);
  font: inherit;
  font-weight: 900; font-size: 0.95rem; letter-spacing: 0.08em; line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.c-btn::before, .c-biz__index li + li::before, .chart-menu__list > li > a::before, .c-join__dot {
  content: "";
  display: inline-block; flex: none;
  width: 0.62em; height: 0.72em;
  background: currentColor;
  -webkit-mask: var(--c-star) center / contain no-repeat;
  mask: var(--c-star) center / contain no-repeat;
}
.btn__ext { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; }   /* 外部リンクの印（.c-btn の中） */
.c-arrow { width: 28px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--dur-3) var(--ease-out); }
.c-btn:hover { background: var(--c-text); color: var(--c-card); }
.c-btn:hover .c-arrow, .c-link:hover .c-arrow { translate: 6px 0; }
.c-btn:active { translate: 0 1px; }
.c-link {
  display: inline-flex; align-items: center; gap: 0.9em;
  min-height: 44px; padding-block: 0.5em;
  border-bottom: var(--hair) solid var(--c-hair);
  font-weight: 900; letter-spacing: 0.08em;
  text-decoration: none;
}
.c-link:hover { color: var(--tone-text, var(--c-text)); border-bottom-color: currentColor; }

/* ==========================================================================
   18-1. ARKについて：名刺の表（薄いグレーの道具）＋ 楕円の弧に ✦ 3つ、その下に3つの段落
   ========================================================================== */
.c-about { padding-top: clamp(72px, 8vw, 128px); overflow: hidden; overflow: clip; }
.c-about__wash .w-hammer   { left: 3%;  top: 9%;  width: clamp(40px, 4.4vw, 66px); rotate: -62deg; }
.c-about__wash .w-shirt    { left: 9%;  top: 1%;  width: clamp(90px, 9vw, 140px); rotate: -6deg; }
.c-about__wash .w-camera   { left: 2%;  top: 15%; width: clamp(80px, 8vw, 124px); rotate: -9deg; }
.c-about__wash .w-compact  { right: 15%; top: 2%; width: clamp(84px, 8.4vw, 130px); rotate: 8deg; }
.c-about__wash .w-lipstick { right: 9%; top: 7%; width: clamp(28px, 2.8vw, 44px); rotate: 50deg; }
.c-about__wash .w-lens     { right: 1%; top: 2%; width: clamp(80px, 8vw, 124px); rotate: -18deg; }
.c-arc3 { position: relative; --h: clamp(56px, 7vw, 100px); }
.c-arc3__line { position: absolute; left: 0; top: 0; width: 100%; height: var(--h); overflow: visible; fill: none; stroke: var(--c-hair); stroke-width: var(--hair); }
.c-arc3__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-arc3__item { position: relative; padding: calc(var(--h) + 30px) clamp(14px, 2.4vw, 40px) 0; --sy: 0.255; }
.c-arc3__item:nth-child(2) { --sy: 0; }
.c-arc3__star { position: absolute; z-index: 1; left: 50%; top: calc(var(--h) * var(--sy)); width: 20px; height: 24px; translate: -50% -50%; }
.c-arc3__star::before { content: ""; position: absolute; inset: -20% -60%; z-index: -1; border-radius: 50%; background: var(--c-card); }
.c-arc3__star .c-star { display: block; width: 100%; height: 100%; }
.c-arc3__no { margin-bottom: 14px; text-align: center; font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.24em; color: var(--c-text-mute); }
.c-arc3__text { line-height: 2.05; font-feature-settings: "palt"; letter-spacing: 0.05em; }

/* ==========================================================================
   18-2. 事業紹介：楕円に切り抜いた写真、そのまわりの楕円の線と ✦、線の切れ目に事業の水彩の道具
   ========================================================================== */
.c-biz__index { margin: calc(clamp(36px, 4.6vw, 64px) * -0.4) 0 clamp(56px, 7vw, 112px); }
.c-biz__index ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.c-biz__index li { display: inline-flex; align-items: center; }
.c-biz__index li + li::before { margin-inline: 1.1em; width: 0.55em; color: var(--c-text); }
.c-biz__index a { display: inline-block; padding-block: 0.55em; font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: 1.02rem; text-decoration: none; border-bottom: var(--hair) solid transparent; }
.c-biz__index a:hover { border-bottom-color: currentColor; }
.c-biz__index-no { margin-right: 0.55em; font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--c-text-mute); }
.c-bizrow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(32px, 6vw, 104px);
  scroll-margin-top: var(--header-h);
}
.c-bizrow + .c-bizrow { margin-top: clamp(72px, 9vw, 140px); }
.c-bizrow:nth-of-type(even) .c-bizrow__scene { order: 2; }
.c-scene { position: relative; aspect-ratio: 6 / 5; }
.c-scene__wash { position: absolute; left: 24%; top: 1%; width: 72%; height: 76%; border-radius: 50%; background: var(--tone-tint, #F6F3F0); }
.c-scene__photo { position: absolute; left: 16%; top: 17%; width: 68%; height: 66%; border-radius: 50%; overflow: hidden; background: var(--tone-tint, #F6F3F0); }
.c-scene__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.c-scene__orbit { position: absolute; left: 5%; top: 9%; width: 90%; height: 82%; rotate: -6deg; }
.c-scene__tools { position: absolute; inset: 0; }
.c-scene .c-pin, .c-scene .c-tool { --halo: transparent; }   /* 淡い地の上では白い下敷きを見せない */
.c-bizrow__no { display: flex; align-items: center; gap: 0.7em; margin-bottom: 16px; font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.24em; color: var(--tone-text); }
.c-bizrow__no .c-star { width: 0.8em; }
.c-bizrow__title { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 600; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.1; letter-spacing: 0.005em; }
.c-bizrow__title::after { /* 事業の色の、楕円の小さな水彩の点 */
  content: "";
  display: block;
  width: 58px; height: 9px;
  margin-top: 20px;
  border-radius: 50%;
  background: var(--tone);
}
.c-bizrow__desc { max-width: 30em; margin: 22px 0 28px; line-height: 2.05; font-feature-settings: "palt"; letter-spacing: 0.05em; }

/* ==========================================================================
   18-3. メンバー紹介：丸い似顔絵のまわりに、ひとりずつ小さな楕円と ✦（名刺の裏の構図を15人ぶん）
   ========================================================================== */
.c-team__note { margin-top: 14px; font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-text-mute); }
.c-team__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(44px, 4.6vw, 68px) clamp(12px, 2vw, 32px); }
.mate { display: flex; justify-content: center; }
.mate__btn {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%;
  padding: 10px 0 4px;
  background: none; border: 0;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
.mate__face { position: relative; display: block; width: min(76%, 132px); aspect-ratio: 1; }
.mate__face > img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mate__orbit { position: absolute; left: -19%; top: -5%; width: 138%; height: 110%; rotate: var(--r); transition: rotate 0.9s var(--ease-out); }
.mate__orbit .c-ring { stroke: rgb(62 58 57 / 0.75); }
.mate__btn:hover .mate__orbit, .mate__btn:focus-visible .mate__orbit { rotate: calc(var(--r) + 16deg); }
.mate__plate { display: grid; justify-items: center; gap: 3px; }
.mate__no { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--c-text-mute); }
.mate__name { font-weight: 900; font-size: 1.05rem; letter-spacing: 0.06em; line-height: 1.5; border-bottom: var(--hair) solid transparent; }
.mate__btn:hover .mate__name { border-bottom-color: currentColor; }
.mate__role { font-size: var(--fs-micro); line-height: 1.6; letter-spacing: 0.04em; color: var(--c-text-mute); }

/* メンバーの名刺（dialog）：トンボの付いた1枚の名刺 */
.mate-card {
  width: min(100vw - 24px, 820px);
  max-width: none; max-height: calc(100dvh - 24px);
  padding: 30px;
  border: 0;
  background: transparent;
  color: var(--c-text);
  overflow: auto;
}
.mate-card::backdrop { background: rgb(62 58 57 / 0.38); }
.mate-card__inner {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(28px, 4vw, 48px);
  padding: 52px clamp(28px, 4vw, 52px) 44px;
  background: var(--c-card);
}
.mate-card__face { position: relative; width: 190px; aspect-ratio: 1; }
.mate-card__face img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.mate-card__face .c-ring { left: -17%; top: -5%; width: 134%; height: 110%; rotate: -9deg; }
.mate-card__no { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--c-text-mute); }
.mate-card__name { margin-top: 6px; font-weight: 900; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: 0.06em; line-height: 1.3; }
.mate-card__role { margin-top: 6px; padding-bottom: 14px; border-bottom: var(--hair) solid var(--c-hair-soft); font-weight: 900; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--c-text-mute); }
.mate-card__comment { margin-top: 14px; font-size: 0.95rem; line-height: 2; font-feature-settings: "palt"; }
.mate-card__close {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 44px; padding: 0 14px;
  background: var(--c-card);
  border: var(--hair) solid var(--c-hair);
  border-radius: 0;
  font-size: 0.8rem; font-weight: 900; letter-spacing: 0.1em;
  cursor: pointer;
}
.mate-card__close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5px; }
.mate-card__close:hover { background: var(--c-text); color: var(--c-card); }

/* ==========================================================================
   18-4. 私たちの強み（会社概要の企業理念も同じ型）：名刺の裏の構図。真ん中に言葉、楕円の上下左右に4つ、斜めに ✦
   ========================================================================== */
.c-orbit4 { position: relative; min-height: clamp(600px, 52vw, 720px); --ex: 14%; --ey: 84px; }
.c-orbit4__field { position: absolute; inset: 0; }
.c-orbit4__ring { position: absolute; left: var(--ex); right: var(--ex); top: var(--ey); bottom: var(--ey); }
.c-orbit4__center { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(44%, 32em); margin: 0; translate: -50% -50%; text-align: center; }
.c-orbit4__center .label { justify-content: center; }
.c-orbit4__center .sec-title { font-size: clamp(1.6rem, 1rem + 1.7vw, 2.5rem); }
.c-orbit4__item {
  position: absolute; z-index: 1;
  width: min(27%, 19em);
  padding: 12px 20px;
  translate: -50% -50%;
  background: var(--c-card);
  text-align: center;
  font-feature-settings: "palt";
}
.c-orbit4__item--n { left: 50%; top: var(--ey); width: min(36%, 25em); }
.c-orbit4__item--s { left: 50%; top: calc(100% - var(--ey)); width: min(36%, 25em); }
.c-orbit4__item--w { left: var(--ex); top: 50%; }
.c-orbit4__item--e { left: calc(100% - var(--ex)); top: 50%; }
.c-orbit4__no { display: block; margin-bottom: 4px; font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.24em; color: var(--c-text-mute); }
.c-orbit4__txt { display: block; font-size: 1.05rem; line-height: 1.9; letter-spacing: 0.04em; }

/* ==========================================================================
   18-5. 採用：こんな方と働きたい（✦ の4項目）＋ 16人目の空いた楕円と小舟 ＋ トンボの付いた手紙
   ========================================================================== */
.c-join__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: clamp(24px, 5vw, 96px); margin-bottom: clamp(56px, 6vw, 96px); }
.c-join__top .c-head { margin-bottom: 0; }
.c-join__intro { font-size: var(--fs-lead); line-height: 2; font-feature-settings: "palt"; }
.c-join__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(32px, 5vw, 96px); margin-bottom: clamp(80px, 9vw, 136px); }
.c-join__want-title { margin-bottom: 18px; font-weight: 900; font-size: var(--fs-h3); letter-spacing: 0.04em; }
.c-join__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); }
.c-join__list li { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; border-top: var(--hair) solid var(--c-hair-soft); font-size: 1.02rem; line-height: 1.85; font-feature-settings: "palt"; }
.c-join__list .c-star { flex: none; width: 12px; height: 14px; margin-top: 0.5em; }
.c-seat { position: relative; justify-self: center; width: min(100%, 330px); }
.c-seat__frame { position: relative; width: 60%; aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.c-seat__orbit { position: absolute; left: -19%; top: -5%; width: 138%; height: 110%; rotate: -9deg; }
.c-ring--dash { display: none; }
.c-seat__frame::before { content: ""; position: absolute; inset: 0; border: var(--hair) dashed rgb(62 58 57 / 0.6); border-radius: 50%; background: #FCFBFA; }
.c-seat__text { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; text-align: center; }
.c-seat__no { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--c-text-mute); }
.c-seat__k { font-family: var(--f-en); font-variation-settings: var(--soft); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0.04em; }
.c-seat__v { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 600; font-size: 1.9rem; line-height: 1.1; letter-spacing: 0.04em; }
.c-seat__sea { position: relative; height: 64px; margin-top: 10px; }
.c-seat__sea::before { /* 小舟が浮かぶ細い水平線（ヒーローの左下と同じ線） */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 18px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(62 58 57 / 0.45) 22%, rgb(62 58 57 / 0.45) 78%, transparent);
}
.c-seat__ship { position: absolute; left: 26%; bottom: 8px; width: 46px; }
.c-seat__ship .mini-ark { width: 100%; overflow: visible; }
.c-letter {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 6vw, 96px);
  background: var(--c-card);
  text-align: center;
}
.c-letter__title { margin-bottom: 24px; font-weight: 900; font-size: var(--fs-h3); line-height: 1.6; letter-spacing: 0.04em; font-feature-settings: "palt"; }
.c-letter__body { line-height: 2.1; font-feature-settings: "palt"; }
.c-letter__closing { margin-top: 22px; font-weight: 900; line-height: 1.9; }
.c-letter__cta { margin-top: 32px; }

/* ==========================================================================
   18-6. お問い合わせ：トンボの付いた1枚の紙。左には小さな名刺の裏（楕円・✦・ARK）
   ========================================================================== */
.c-contact { overflow: hidden; overflow: clip; padding-bottom: clamp(120px, 12vw, 180px); }
.c-contact__wash .w-lens     { right: 3%; bottom: 4%; width: clamp(90px, 9vw, 140px); rotate: -14deg; }
.c-contact__wash .w-lipstick { right: 13%; bottom: 7%; width: clamp(30px, 3vw, 46px); rotate: 40deg; }
.c-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: clamp(40px, 7vw, 128px); }
.c-contact__intro { max-width: 22em; font-size: var(--fs-lead); line-height: 2; font-feature-settings: "palt"; }
.c-contact__mini { position: relative; display: grid; place-items: center; width: min(100%, 280px); aspect-ratio: 257.95 / 155.9; margin-top: clamp(40px, 5vw, 72px); }
.c-contact__orbit { position: absolute; left: 6%; top: 12%; width: 88%; height: 76%; }
.c-contact__ark { width: 40%; height: auto; fill: var(--c-text); }
.c-form { padding: clamp(32px, 4.4vw, 60px); background: var(--c-card); }
.c-form__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 30px; padding-bottom: 14px; border-bottom: var(--hair) solid var(--c-hair); font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em; }
.c-form__to { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-mute); }
.c-field { display: grid; gap: 6px; margin-bottom: 26px; }
.c-field__label { font-weight: 900; font-size: 0.9rem; letter-spacing: 0.08em; }
.c-field__input {
  width: 100%;
  min-height: 48px;
  padding: 0.6em 0.3em;
  background: transparent;
  border: 0; border-bottom: var(--hair) solid var(--c-hair);
  border-radius: 0;
  font: inherit; font-weight: 500;
  color: var(--c-text);
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
@media (max-width: 760px) {
  .c-field__input { font-size: 16px; }   /* iPhone の Safari は 16px 未満の入力欄を押すと画面を拡大してしまう */
}
.c-field__input--area { min-height: 168px; padding: 0.7em 0.8em; border: var(--hair) solid var(--c-hair); resize: vertical; line-height: 1.8; }
.c-field__input:focus { outline: none; background: var(--c-paper-2); box-shadow: inset 0 -2px 0 var(--c-hair); }
.c-field__input--area:focus { box-shadow: inset 0 0 0 1px var(--c-hair); }
.c-btn--send { margin-top: 6px; }

/* ==========================================================================
   18-7. フッター（全ページ共通）：名刺の表。上に名刺の楕円の弧と ✦、右上に薄いグレーの道具、名刺の ARK
   ========================================================================== */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--c-card);
  color: var(--c-text);
  padding: clamp(150px, 13vw, 210px) 0 var(--sp-6);
  overflow: hidden;
  overflow: clip;
  --focus: var(--c-text);
}
.site-footer::before { /* 名刺の楕円の上の弧（端は紙に溶ける） */
  content: "";
  position: absolute; left: 5%; right: 5%; top: 64px;
  height: 340px;
  border: var(--hair) solid var(--c-hair);
  border-radius: 50%;
  -webkit-mask: linear-gradient(to bottom, #000 6%, transparent 30%);
  mask: linear-gradient(to bottom, #000 6%, transparent 30%);
  pointer-events: none;
}
.site-footer::after { /* 弧のてっぺんの ✦ */
  content: "";
  position: absolute; left: 50%; top: 64px;
  width: 17px; height: 20px;
  translate: -50% -50%;
  background: var(--c-hair);
  -webkit-mask: var(--c-star) center / contain no-repeat;
  mask: var(--c-star) center / contain no-repeat;
}
.footer__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.footer__wash .w-hammer   { left: 5%;  bottom: 220px; width: clamp(34px, 3.2vw, 50px); rotate: -60deg; }
.footer__wash .w-shirt    { left: 11%; bottom: 198px; width: clamp(64px, 6.4vw, 96px); rotate: -8deg; }
.footer__wash .w-camera   { left: 4%;  bottom: 166px;  width: clamp(58px, 5.8vw, 88px); rotate: -8deg; }
.footer__wash .w-compact  { left: 19%; bottom: 190px; width: clamp(60px, 6vw, 92px); rotate: 8deg; }
.footer__wash .w-lipstick { left: 26%; bottom: 210px; width: clamp(20px, 2vw, 30px); rotate: 48deg; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: var(--sp-7) clamp(24px, 4vw, 64px);
  padding-bottom: var(--sp-8);
}
.footer__logo { position: relative; color: var(--c-text); }
.footer__mark { display: block; height: clamp(52px, 5.4vw, 84px); width: auto; aspect-ratio: 103.02 / 30.48; fill: var(--c-text); }
.footer__tagline { margin-top: var(--sp-5); font-weight: 900; font-size: 1.05rem; line-height: 1.9; color: var(--c-text); }
.footer__port { margin-top: var(--sp-4); font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-mute); }
.footer__h { margin-bottom: var(--sp-4); font-family: var(--f-ja); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.18em; color: var(--c-text-mute); }
.footer__nav ul { display: grid; gap: 0.1em; }
.footer__nav a, .footer__contact { display: inline-block; padding-block: 0.32em; font-size: 0.92rem; color: var(--c-text); text-decoration: none; }
.footer__nav a:hover, .footer__contact:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.footer__services { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--hair) solid var(--c-hair-soft); }
.footer__services a { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; }
.footer__info address { font-size: 0.9rem; line-height: 2; }
.footer__contact { margin-top: var(--sp-3); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-top: var(--sp-5); border-top: var(--hair) solid var(--c-hair-soft); }
.footer__copy { font-family: var(--f-en); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--c-text-mute); }
.to-top { display: inline-flex; align-items: center; gap: 0.7em; min-height: 48px; color: var(--c-text); text-decoration: none; font-family: var(--f-en); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.76rem; }
.to-top__icon { position: relative; display: grid; place-items: center; width: 44px; height: 34px; transition: rotate var(--dur-4) var(--ease-out); }
.to-top__icon .c-star { position: relative; display: block; width: 11px; height: 13px; }
.to-top__icon .ln { stroke: var(--c-text); }
.to-top:hover .to-top__icon { rotate: -12deg; }

/* ==========================================================================
   18-8. 動き（JS 環境かつ動きを減らす設定でない時だけ。飾りだけを動かし、文言・写真は最初から見えている）
   画面に入ると：楕円の線が引かれ（1.2 秒）→ ✦ が弾むように灯り → 水彩の道具がふわっと置かれる（ヒーローと同じ置き方）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] .c-ring { transition: --sw 1.3s var(--ease-sail) 0.05s; }
  html.js [data-reveal].is-pre .c-ring { --sw: 0deg; }
  html.js [data-reveal] .c-arc3__line { transition: --swp 1.3s var(--ease-sail) 0.05s; }
  html.js [data-reveal].is-pre .c-arc3__line { --swp: 0%; }
  html.js [data-reveal] .c-pin .c-star,
  html.js [data-reveal] .c-arc3__star .c-star { transition: transform 0.5s var(--ease-pop) calc(var(--d, 0s) + 0.35s); transform-origin: 50% 50%; }
  html.js [data-reveal].is-pre .c-pin .c-star,
  html.js [data-reveal].is-pre .c-arc3__star .c-star { transform: scale(0); }
  html.js [data-reveal] .c-tool img { transition: opacity 0.6s var(--ease-out) calc(var(--d, 0s) + 0.25s), transform 0.7s var(--ease-out) calc(var(--d, 0s) + 0.25s); }
  html.js [data-reveal].is-pre .c-tool img { opacity: 0; transform: translateY(16%) scale(0.9) rotate(-3deg); }
  .c-seat__ship .mini-ark, .hero__cue-ship .mini-ark { animation: c-bob 3.4s var(--ease-wave) 2s infinite alternate; transform-origin: 50% 90%; }
}
@keyframes c-sweep { from { --sw: 0deg; } to { --sw: 360deg; } }
@keyframes c-bob { from { transform: none; } to { transform: translateY(-3px) rotate(-2.5deg); } }

/* JS 無効：メンバー紹介文を各名札の下にそのまま表示する（dialog を開かなくても全文が読める） */
html.no-js .mate { flex-direction: column; align-items: center; }
html.no-js .mate-card { position: static; display: block; width: 100%; max-height: none; margin: 10px 0 0; padding: 0; overflow: visible; font-size: 0.85rem; }
html.no-js .mate-card__inner { grid-template-columns: 1fr; padding: 12px 6px; }
html.no-js .mate-card__inner::before, html.no-js .mate-card__inner::after,
html.no-js .mate-card__face, html.no-js .mate-card__close, html.no-js .mate-card__no, html.no-js .mate-card__name { display: none; }
html.no-js .mate-card__role { padding-bottom: 6px; font-size: var(--fs-micro); }
html.no-js .mate-card__comment { font-size: 0.82rem; line-height: 1.85; }
html.no-js .mate__btn { cursor: default; }
html.no-js .c-team__note { display: none; }

/* --- responsive --- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .c-bizrow { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .c-bizrow:nth-of-type(even) .c-bizrow__scene { order: 0; }
  .c-bizrow__scene { width: min(100%, 520px); justify-self: center; }
  .c-team__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 8px; }
  .mate__face { width: min(68%, 120px); }
  .mate__orbit { left: -15%; width: 130%; }
  .c-orbit4 { min-height: 0; }
  .c-orbit4__center { position: static; width: auto; translate: none; margin-bottom: 36px; }
  .c-orbit4__field { position: relative; inset: auto; padding-block: 8px; }
  .c-orbit4__ring { left: 0; right: 0; top: 22px; bottom: 22px; }
  .c-orbit4__list { position: relative; display: grid; row-gap: 26px; }
  .c-orbit4__item, .c-orbit4__item--n, .c-orbit4__item--s, .c-orbit4__item--w, .c-orbit4__item--e { position: relative; left: auto; top: auto; translate: none; width: min(84%, 26em); margin-inline: auto; padding: 10px 14px; }
  .c-join__top, .c-join__grid, .c-contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .c-seat { width: min(80%, 300px); }
  .c-contact__mini { width: min(70%, 240px); margin-top: 32px; }
  /* 1列のときはリップがフォームの紙の下に潜って上が四角く切れて見える → 紙より下の余白に、レンズと並べて寝かせる */
  .c-contact__wash .w-lens { right: 5%; bottom: 14px; width: 92px; }
  .c-contact__wash .w-lipstick { right: calc(5% + 104px); bottom: 26px; width: 24px; rotate: 72deg; }
  .footer__wash { display: none; }
}
@media (max-width: 760px) {
  .c-arc3__line { display: none; }
  .c-arc3__list { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .c-arc3__item { padding: 0 0 0 44px; }
  .c-arc3__item:not(:last-child)::after { /* ✦ どうしをつなぐ縦の細い線 */
    content: ""; position: absolute; left: 12px; top: 26px; bottom: -34px; width: 1px; background: var(--c-hair-soft);
  }
  .c-arc3__star { left: 12px; top: 0.9em; width: 16px; height: 19px; }
  .c-arc3__no { text-align: left; margin-bottom: 6px; }
  .c-about__wash .w-shirt, .c-about__wash .w-lens, .c-about__wash .w-hammer, .c-about__wash .w-lipstick { display: none; }
  .c-about__wash .w-camera { top: 6px; left: 8px; width: 72px; }    /* 画面の端で切れないよう、紙の内側に置く */
  .c-about__wash .w-compact { top: 6px; right: 8px; width: 70px; }
  .c-join__list { grid-template-columns: minmax(0, 1fr); }
  .mate-card { padding: 22px 14px; }
  .mate-card__inner { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 50px 22px 26px; --t-o: 18px; --t-g: 5px; }
  .mate-card__face { width: 120px; justify-self: center; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
  .site-footer::before { left: -20%; right: -20%; }
  .c-trim { --t-o: 12px; --t-g: 4px; }   /* 紙が画面いっぱいなので、トンボが画面の端に触れない長さに（320px でも端から 4px 空く） */
  .c-form, .c-letter { padding-inline: 20px; }
}
@media (max-width: 374px) {
  .c-team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   19. スマホの仕上げ（改行と細部）— 2026-10 社長「改行がちょっとアレてる」
   文節の <wbr> は tools/phrase_wrap.py が入れる（2. base の keep-all と組）。ここはそれ以外の細部。
   ========================================================================== */
.nobr { white-space: nowrap; }   /* 「」の」「」が」など、閉じ括弧と助詞を離さない（phrase_wrap.py が付ける） */
@media (max-width: 760px) {
  .br-pc { display: none; }      /* PC 前提の原稿の改行。スマホでは文をつなげて画面幅で折る（文の切れ目・台詞の並びの <br> は残す） */
}
/* 真ん中ぞろえの短い文は、行の長さをそろえる（右左のでこぼこを出さない） */
.c-orbit4__txt, .c-cta__desc, .c-seat__text, .footer__copy, .mate__role, .c-svc-index__name { text-wrap: balance; }

@media (max-width: 760px) {
  /* 事業紹介の目次: PC の横並び（01 … ✦ 02 …）は折り返すと 01 だけ ✦ が無く左にずれる → スマホは縦の目次にし、4つとも ✦ で頭をそろえる */
  .c-biz__index ol { flex-direction: column; align-items: stretch; row-gap: 0; border-top: 1px solid var(--c-hair-soft); }
  .c-biz__index li { border-bottom: 1px solid var(--c-hair-soft); }
  .c-biz__index li::before, .c-biz__index li + li::before {
    content: ""; display: inline-block; flex: none; width: 0.62em; height: 0.72em; margin: 0 0.9em 0 0.2em;
    background: currentColor; -webkit-mask: var(--c-star) center / contain no-repeat; mask: var(--c-star) center / contain no-repeat;
  }
  .c-biz__index a { flex: 1; min-height: 48px; display: flex; align-items: center; padding-block: 0.5em; }

  /* 私たちの強み・企業理念の縦長の楕円: 楕円の頭と足を言葉の上下に見せ、✦ は上下左右に（斜めの ✦ が紙の隙間に半端に出ない） */
  .c-orbit4__field { padding-block: 64px; }
  .c-orbit4__ring { top: 10px; bottom: 10px; }
  .c-orbit4__ring .c-pin:nth-of-type(1) { --x: 50% !important; --y: 0% !important; }
  .c-orbit4__ring .c-pin:nth-of-type(2) { --x: 100% !important; --y: 50% !important; }
  .c-orbit4__ring .c-pin:nth-of-type(3) { --x: 50% !important; --y: 100% !important; }
  .c-orbit4__ring .c-pin:nth-of-type(4) { --x: 0% !important; --y: 50% !important; }

  /* メンバーの肩書き（3列の細い欄）: 詰め組みにして「プロデューサー兼、」を1行に収める */
  .mate__role { font-feature-settings: "palt"; letter-spacing: 0; }   /* 3列（375px〜）で「プロデューサー兼、」が1行に入る幅 */
  .c-team__list { column-gap: 4px; }

  /* 写真の角の水彩の道具: 画面の端で切れないよう、紙の内側に寄せる（PC の位置はそのまま） */
  .c-svc__deco .c-tool { left: clamp(calc(var(--w) / 2 + 2%), var(--x), calc(98% - var(--w) / 2)); }
}
@media (max-width: 374px) {
  /* 小さな英字の札（✦ OUR PHILOSOPHY — PHILOSOPHY）を 320px でも1行に */
  .label { gap: 0.3em 0.5em; letter-spacing: 0.1em; }
  .label__en { letter-spacing: 0.06em; }   /* 「✦ OUR SERVICES — CREATIVE FACTORY」も 320px で1行に */
  /* メンバー 2列: 15人目（奇数の最後）を真ん中に */
  .c-team__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
}
@media (max-width: 374px) {
  /* 長い名前のボタン（Beauty Connect詳細 など）が 320px で2行にならないよう、中の間隔だけ詰める */
  .c-btn { gap: 0.7em; padding-inline: 1.05em 1.15em; letter-spacing: 0.05em; }
}