/* ==========================================================================
   ARK — 名刺の世界 / 下層ページの共通層（sub.css）
   style.css を読み込んだ上に重ねる。トップの見た目を変える指定は書かない。

   2. 共通：パンくず・区画の土台
   5. 4つの事業へのリンク（next-ports：全ページ共通。名刺の世界に作り替えた）
   7. responsive
   8. 名刺の世界の下層ページ（会社概要・4事業・プライバシー）：
      ページ冒頭（pg-head）／会社の名刺（c-namecard）／サービス一覧（c-svc）／お問い合わせへ（c-cta）
   旧・航海の部品（1. テーマ・3. 会社概要の旧部品・4. 事業ページの旧部品・6. 旧ページの動き）は fix1 で消した（番号は欠番のまま）。
   ========================================================================== */

/* ==========================================================================
   2. 共通
   ========================================================================== */
body.sub { background: var(--c-day); }
.sub main { display: block; position: relative; }

/* ページの航路（左の点線）はやめた。区画の土台だけ残す */
.sub-sec { position: relative; isolation: isolate; }

/* パンくず：名刺の線と同じ細い線でつなぐ */
.crumbs { margin-bottom: var(--sp-6); font-size: var(--fs-small); letter-spacing: 0.1em; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; display: inline-block; width: 1.8em; height: 1px; margin-inline: 0.7em; background: currentColor; opacity: 0.45; }
.crumbs a { display: inline-block; padding-block: 0.6em; font-weight: 900; text-decoration: none; border-bottom: 1px solid rgb(62 58 57 / 0.3); line-height: 1.2; }
.crumbs a:hover { border-bottom-color: currentColor; }
.crumbs [aria-current] { font-weight: 900; color: var(--crumb-now, #6D6866); }

/* ==========================================================================
   5. 4つの事業へのリンク（全ページ共通）：細い線で4つに区切った白い紙。今いる事業には ✦
   ========================================================================== */
.next-ports { background: #FFFFFF; color: #3E3A39; padding-bottom: clamp(96px, 10vw, 160px); }
.next-ports__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid rgb(62 58 57 / 0.18); }
.next-ports__list li + li a { border-left: 1px solid rgb(62 58 57 / 0.18); }
.next-ports__list a {
  position: relative;
  display: grid; justify-items: center; align-content: start; gap: 8px;
  min-height: 100%;
  padding: 28px 16px 26px;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
.next-ports__list a:hover { background: var(--tone-tint, #FAF8F6); }
.next-ports__list a[aria-current]::after { /* 今いる事業の ✦ */
  content: "";
  position: absolute; right: 16px; top: 16px;
  width: 12px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--c-star) center / contain no-repeat;
  mask: var(--c-star) center / contain no-repeat;
}
.next-ports__img { width: auto; height: 64px; margin-bottom: 6px; }
.next-ports__no { font-family: var(--f-en); font-variation-settings: var(--soft); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em; color: #6D6866; }
.next-ports__name { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }

/* ==========================================================================
   7. responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .next-ports__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .crumbs { margin-bottom: var(--sp-5); }
  .next-ports__list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .next-ports__list a { padding-block: var(--sp-4); }
}

/* ==========================================================================
   8. 名刺の世界の下層ページ（会社概要・Space Craft。第2段の Beauty Vision / Creative Factory / Apparel Works もこの型）
   色は body の .tone--beauty / --creative / --space / --apparel（style.css）で替わる。部品は style.css の 18. と共通
   ========================================================================== */
/* --- 8-1. ページ冒頭：左に言葉、右に名刺の楕円と水彩の道具の小さな絵。文字は最初のフレームから読める --- */
.pg-head {
  position: relative;
  isolation: isolate;
  overflow: hidden; overflow: clip;
  padding: calc(var(--header-h) + clamp(32px, 4vw, 64px)) 0 clamp(48px, 6vw, 96px);
  background: var(--c-card);
  color: var(--c-text);
}
.pg-head__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; column-gap: clamp(24px, 5vw, 96px); min-height: clamp(340px, 36vw, 500px); }
.pg-head .crumbs { margin-bottom: var(--sp-5); }
.pg-head__title { font-weight: 900; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1.2; letter-spacing: 0.08em; font-feature-settings: "palt"; }
.pg-head__title--en { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 600; letter-spacing: 0.005em; line-height: 1.05; }
.pg-head__title::after { /* 事業の色の、楕円の小さな水彩の点（会社概要は名刺の線の色を薄く） */
  content: "";
  display: block;
  width: 58px; height: 9px;
  margin-top: 22px;
  border-radius: 50%;
  background: var(--tone, rgb(62 58 57 / 0.22));
}
.pg-head__copy { margin-top: 26px; max-width: 30em; line-height: 1.95; font-feature-settings: "palt"; }
.pg-head__visual { justify-self: center; width: min(100%, 520px); }
/* 名刺の裏を小さく（会社概要）：ヒーローと同じ名刺データの線と、同じ座標の7つの道具 */
.c-minicard { position: relative; aspect-ratio: 257.95 / 155.9; background: var(--c-card); box-shadow: 0 0 0 1px rgb(62 58 57 / 0.08); --t-o: 22px; }
.c-minicard__orbit { position: absolute; left: 7.85%; top: 14.61%; width: 83.38%; height: 74.07%; fill: var(--c-text); overflow: visible; }
.c-minicard__ark { position: absolute; left: 30.03%; top: 35.05%; width: 39.94%; height: auto; fill: var(--c-text); }
.c-minicard__tools { position: absolute; inset: 0; }

/* --- 8-2. 会社の名刺（会社概要）：名刺の表と同じ。左に縦の ARK、紙に薄いグレーの道具、トンボ --- */
.c-profile { background: var(--c-card); padding-top: clamp(40px, 5vw, 72px); }
.c-namecard {
  --arkw: clamp(210px, 24vw, 290px);
  display: grid;
  grid-template-columns: calc(var(--arkw) * 0.2959) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 80px);
  width: min(100%, 980px);
  min-height: calc(var(--arkw) + 96px);
  margin-inline: auto;
  padding: clamp(36px, 4.6vw, 64px) clamp(24px, 5vw, 72px);
  background: var(--c-card);
  box-shadow: 0 0 0 1px rgb(62 58 57 / 0.1);
  isolation: isolate;
}
.c-namecard__wash { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; }
.c-namecard__wash img { position: absolute; height: auto; max-width: none; opacity: 0.12; }
.c-namecard__wash .w-compact  { right: 3%;  top: 20%;   width: clamp(110px, 20%, 200px); rotate: 9deg; }
.c-namecard__wash .w-lipstick { right: 26%; top: 8%;    width: clamp(36px, 6%, 60px);   rotate: 16deg; }
.c-namecard__wash .w-shirt    { right: -4%; bottom: -8%; width: clamp(130px, 27%, 260px); rotate: -11deg; }
.c-namecard__wash .w-camera   { right: 28%; bottom: -6%; width: clamp(100px, 21%, 210px); rotate: 7deg; }
.c-namecard__wash .w-hammer   { left: 14%; top: -5%;  width: clamp(48px, 8%, 80px);  rotate: -62deg; }
@media (max-width: 760px) {
  .c-namecard__wash .w-shirt { right: 2%; bottom: -6%; }   /* スマホでは名刺が画面いっぱいなので、画面の端で切れないよう内側へ */
}
.c-namecard__ark { position: relative; margin: 0; }
.c-namecard__mark { /* 名刺の表と同じく、下から上へ読む縦の ARK */
  position: absolute; left: 0; bottom: 0;
  width: var(--arkw); height: auto;
  transform-origin: 0 100%;
  transform: translateX(calc(var(--arkw) * 0.2959)) rotate(-90deg);
  fill: var(--c-text);
}
.c-namecard__list { align-self: center; }
.c-namecard__row { display: grid; grid-template-columns: minmax(6em, 9em) minmax(0, 1fr); column-gap: var(--sp-5); padding-block: 15px; border-bottom: 1px solid var(--c-hair-soft); }
.c-namecard__row:last-child { border-bottom: 0; }
.c-namecard__row dt { font-weight: 900; letter-spacing: 0.12em; }
.c-namecard__row dd { margin: 0; line-height: 1.95; overflow-wrap: anywhere; }
.c-namecard__row dd span { display: block; }
.c-namecard__row dd a { padding-block: 10px; }   /* TEL・MAIL を指で押しやすく（行の高さは変えない） */
.c-namecard__row a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.c-orbit4__item--lead .c-orbit4__txt { font-weight: 900; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }

/* --- 8-3. サービス一覧（事業ページ）：目次 → 1件ずつ。写真はトンボを付けた1枚の紙、角に事業の水彩の道具 --- */
.c-svc-sec, .c-profile { overflow-x: hidden; overflow-x: clip; }
.c-svc-sec { background: var(--c-card); color: var(--c-text); padding-top: clamp(24px, 3vw, 48px); --label: var(--tone-text); }
.c-svc-index { margin-bottom: clamp(64px, 8vw, 120px); }
.c-svc-index ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--c-hair-soft); }
.c-svc-index li + li a { border-left: 1px solid var(--c-hair-soft); }
.c-svc-index a { display: grid; align-content: start; gap: 4px; min-height: 48px; height: 100%; padding: 16px 18px; text-decoration: none; transition: background-color var(--dur-2) var(--ease-out); }
.c-svc-index a:hover { background: var(--tone-tint); }
.c-svc-index__no { font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.22em; color: var(--tone-text); }
.c-svc-index__name { font-weight: 900; font-size: 0.95rem; line-height: 1.6; letter-spacing: 0.04em; }
.c-svc-list { display: grid; gap: clamp(88px, 10vw, 152px); }
.c-svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(36px, 6vw, 104px); scroll-margin-top: calc(var(--header-h) + 24px); }
.c-svc:nth-child(even) .c-svc__visual { order: 2; }
.c-svc__visual { position: relative; isolation: isolate; padding: 30px; }
.c-svc__wash { position: absolute; z-index: -1; left: -2%; top: -4%; width: 52%; aspect-ratio: 1.55; border-radius: 50%; background: var(--tone-tint); }
.c-svc:nth-child(even) .c-svc__wash { left: auto; right: -2%; }
.c-svc__photo { aspect-ratio: 3 / 2; background: var(--tone-tint); --t-o: 24px; }
.c-svc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.c-svc__deco { position: absolute; inset: 0; pointer-events: none; }
.c-svc__deco .c-pin { --halo: transparent; }
.c-svc__gray img { opacity: 0.35; }
.c-svc__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-svc__no .c-star { width: 0.8em; }
.c-svc__title { margin-bottom: 22px; font-weight: 900; line-height: var(--lh-head); font-feature-settings: "palt"; }
.c-svc__lead { display: block; margin-bottom: 8px; font-size: var(--fs-body); letter-spacing: 0.12em; color: var(--tone-text); }
.c-svc__quote { display: block; font-size: var(--fs-h3); letter-spacing: 0.02em; text-indent: -0.5em; text-wrap: balance; }
.c-svc__desc { max-width: 34em; margin-bottom: 30px; line-height: 2.05; font-feature-settings: "palt"; }

/* --- 8-4. お問い合わせへ：名刺の楕円の中に、ひとことと ボタン --- */
.c-cta__oval { position: relative; max-width: 760px; margin-inline: auto; padding: clamp(72px, 8vw, 112px) clamp(24px, 9vw, 128px); text-align: center; }
.c-cta__ring { position: absolute; inset: 0; }
.c-cta__title { position: relative; margin-bottom: 18px; font-family: var(--f-en); font-variation-settings: var(--soft); font-weight: 600; font-size: var(--fs-h2); letter-spacing: 0.08em; line-height: 1.2; }
.c-cta__desc { position: relative; margin-bottom: 30px; font-size: var(--fs-lead); line-height: 2; font-feature-settings: "palt"; }

/* --- 8-5. 動き：冒頭は CSS だけ（1 秒以内に完成。文字は最初から見えている）。画面に入ってからは style.css 18-8 と同じ --- */
@media (prefers-reduced-motion: no-preference) {
  html.js .pg-head .c-ring { animation: c-sweep 0.9s var(--ease-sail) 0.05s backwards; }
  html.js .pg-head .c-pin .c-star { animation: star-pop 0.45s var(--ease-pop) calc(0.35s + var(--d, 0s)) backwards; }
  html.js .pg-head .c-tool img { animation: item-in 0.55s var(--ease-out) calc(0.1s + var(--d, 0s)) backwards; }
  html.js .c-minicard__orbit, html.js .c-minicard__ark { animation: fade-in 0.6s var(--ease-out) 0.05s backwards; }
}

/* --- 8-6. responsive --- */
@media (max-width: 1080px) {
  .next-ports__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-ports__list li:nth-child(3) a { border-left: 0; }
  .next-ports__list li:nth-child(n + 3) a { border-top: 1px solid rgb(62 58 57 / 0.18); }
}
@media (max-width: 900px) {
  .pg-head__grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; min-height: 0; }
  .pg-head__visual { width: min(100%, 440px); }
  .c-svc, .c-svc:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .c-svc:nth-child(even) .c-svc__visual { order: 0; }
  .c-svc-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-svc-index li:nth-child(3) a { border-left: 0; }
  .c-svc-index li:nth-child(n + 3) a { border-top: 1px solid var(--c-hair-soft); }
}
@media (max-width: 760px) {
  .c-namecard { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 20px; padding: 30px 20px 18px; }
  .pg-head__visual > .c-minicard { --t-o: 14px; --t-g: 5px; margin-inline: 10px; }   /* 会社概要の小さな名刺の裏: トンボが画面の外で切れないように */
  .c-namecard__mark { position: static; width: 104px; transform: none; }
  .c-namecard__row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding-block: 12px; }
  .c-namecard__wash .w-hammer { left: auto; right: 6%; top: -4%; }
  .c-svc__visual { padding: 20px; }
  .c-svc__photo { --t-o: 16px; }
  .c-cta__oval { padding: 84px 26px 72px; }
  .c-cta__ring { left: calc(12px - var(--gutter)); right: calc(12px - var(--gutter)); }   /* 楕円は画面の端から 12px まで広げる（ボタンの角を線に掛けず、左右の ✦ も画面の端で切れない） */
  .next-ports__list { grid-template-columns: minmax(0, 1fr); }
  .next-ports__list li + li a { border-left: 0; border-top: 1px solid rgb(62 58 57 / 0.18); }
  .next-ports__list a { grid-template-columns: 56px auto 1fr; justify-items: start; align-items: center; column-gap: 14px; padding: 14px 8px; text-align: left; }
  .next-ports__img { height: 40px; margin: 0; justify-self: center; }
  .next-ports__list a[aria-current] { padding-right: 26px; }   /* 今いる事業の ✦ を右端の真ん中に。名前（Creative Factory）に重ならない */
  .next-ports__list a[aria-current]::after { top: 50%; right: 8px; translate: 0 -50%; }
  .pg-head__copy { font-size: min(1rem, 4.3vw); letter-spacing: 0.02em; }   /* 原稿の改行の位置で折り返す */
}
@media (max-width: 400px) {
  .next-ports__list a { grid-template-columns: 48px auto 1fr; }   /* 320px でも「Creative Factory」が1行に（道具の絵は 40px のまま） */
  .c-cta .c-btn .c-arrow { display: none; }
  .c-cta__oval { padding-bottom: 88px; }   /* 楕円を少し縦に伸ばして、ボタンの下の角を線から離す */
}
@media (max-width: 400px) {
  /* パンくず: 320〜400px でも1行に収める（2行目が区切り線から始まらない） */
  .crumbs { letter-spacing: 0.06em; }
  .crumbs li + li::before { width: 1.1em; margin-inline: 0.5em; }
}
@media (max-width: 374px) {
  .next-ports__name { font-size: 1.1rem; }   /* 「Creative Factory」を1行に */
}
@media (max-width: 374px) {
  .c-svc-index a { padding-inline: 14px; }
  .c-svc-index__name { font-feature-settings: "palt"; letter-spacing: 0.02em; }   /* 2列の目次で「ブランド体験を」を1行に */
}