/* 株式会社com 公式サイト 共通スタイル（A3案「com- の接頭辞」） */
:root {
  --paper: #f5f1e8;
  --paper-deep: #ebe5d6;
  --ink: #1a1a1a;
  --ink-soft: #57524b;
  --rule: rgba(26, 26, 26, 0.6);
  --rule-faint: rgba(26, 26, 26, 0.16);
  --shu: #b5442c;
  --gutter: clamp(16px, 6vw, 96px);
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --display: "Fraunces", "Shippori Mincho", serif;
  --com-size: clamp(72px, 17.5vw, 270px);
  --suf-size: clamp(27px, 5vw, 78px);
  /* ヘッダーとヒーローの重なり幅（.hero の margin-top / padding-top で使う） */
  --head-overlap: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mincho);
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.04em;
}
/* 紙の繊維感: 極薄のノイズ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.3  0 0 0 0 0.22  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
  border-radius: 1px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.en {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: 0;
}

/* ---------- ヘッダー ---------- */
.site-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 32px var(--gutter) 0;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.site-name { white-space: nowrap; }
.site-nav ul { display: flex; gap: clamp(14px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; }
.site-nav a { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-nav a:hover { border-bottom-color: var(--ink); }

/* ---------- ヒーロー ---------- */
.hero {
  min-height: clamp(620px, 100svh, 1000px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-bottom: clamp(28px, 5vh, 56px);
  /* ヘッダー（高さ約56px）の下に潜り込ませ、min-height を画面の高さ全体として数える。同じ量を padding で戻す */
  margin-top: calc(-1 * var(--head-overlap));
  padding-top: var(--head-overlap);
}
.lockup-wrap {
  display: grid;
  align-items: center;
  padding: clamp(40px, 8vh, 96px) var(--gutter);
}
.lockup {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  width: 100%;
}
/* 「com」は1回だけ。4つの語尾が同じ頭を共有する */
.com {
  font-family: var(--display);
  font-size: var(--com-size);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  transform: translateY(-0.13em);
  animation: fade 1.4s cubic-bezier(.2,.7,.2,1) both;
}
/* com から語尾の束へ伸びる1本の線と、分岐点の朱（朱はここ1点のみ） */
.stem {
  position: relative;
  width: clamp(14px, 4.2vw, 72px);
  height: 1px;
  background: var(--ink);
  margin-left: clamp(6px, 1.2vw, 20px);
  transform-origin: left center;
  animation: grow-x .7s .55s cubic-bezier(.3,.7,.2,1) both;
}
.stem::after {
  content: "";
  position: absolute;
  right: -3px; top: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--shu);
}
.suffixes {
  --row: calc(var(--suf-size) * 1.34);
  /* 束ね線から語尾までの間隔（左の余白と、横枝の引き戻し量で共用） */
  --branch-gap: clamp(12px, 2.4vw, 40px);
  /* 横枝の高さ位置（行の中心を字面に合わせて少し下げる） */
  --branch-y: calc(var(--row) / 2 + var(--suf-size) * 0.06);
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--branch-gap);
  list-style: none;
}
/* 束ね線（縦）: 1行目の中心から4行目の中心まで */
.suffixes::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--branch-y);
  bottom: calc(var(--row) - var(--branch-y));
  width: 1px;
  background: var(--ink);
  transform-origin: center;
  animation: grow-y .8s .8s cubic-bezier(.3,.7,.2,1) both;
}
.suffixes li {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(10px, 1.4vw, 22px);
  min-height: var(--row);
  line-height: var(--row);
  animation: rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.suffixes li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--branch-gap));
  top: var(--branch-y);
  width: clamp(8px, 1.6vw, 26px);
  height: 1px;
  background: var(--ink);
}
/* 語尾は上から順に現れる */
.suffixes li:nth-child(1) { animation-delay: 1.05s; }
.suffixes li:nth-child(2) { animation-delay: 1.3s; }
.suffixes li:nth-child(3) { animation-delay: 1.55s; }
.suffixes li:nth-child(4) { animation-delay: 1.8s; }
.suf {
  font-family: var(--display);
  font-size: var(--suf-size);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing: -0.01em;
  padding-left: clamp(4px, 0.6vw, 10px);
}
.gloss {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px 40px;
  margin: 0 var(--gutter);
  padding-top: 22px;
  border-top: 1px solid var(--rule-faint);
  animation: fade 1.2s 2.2s both;
}
.hero-foot h1 {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.6;
}
.catch {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 17px);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- 節（01〜04） ---------- */
main { position: relative; z-index: 1; }
.sec {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(24px, 6vw, 112px);
  padding: clamp(88px, 14vw, 184px) var(--gutter) 0;
}
.sec-head { align-self: start; position: sticky; top: 48px; }
.num {
  display: block;
  font-family: var(--display);
  font-size: clamp(76px, 12vw, 188px);
  font-weight: 200;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  line-height: .82;
  letter-spacing: -0.04em;
}
.sec-head h2 {
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  max-width: 16em;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.6;
}
.sec-body { padding-top: clamp(10px, 2.2vw, 36px); max-width: 38em; }

/* 01 目指す社会 */
.vision p {
  margin: 0 0 1.6em;
  font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 2.3;
}
.vision .origin {
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rule-faint);
  color: var(--ink-soft);
}
.vision .origin .en { font-size: 1.15em; color: var(--ink); font-style: italic; }
.vision .origin b { font-weight: 500; font-style: normal; }

/* 02 投資する対象 */
.targets-lead { margin: 0 0 clamp(24px, 3vw, 40px); }
.targets { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-faint); }
.targets li {
  display: grid;
  grid-template-columns: clamp(52px, 7vw, 104px) minmax(0, 1fr);
  column-gap: clamp(12px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(22px, 3vw, 38px) 0;
  border-top: 1px solid var(--rule-faint);
}
.targets .n {
  font-family: var(--display);
  font-size: clamp(44px, 5.6vw, 84px);
  font-weight: 200;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  line-height: 1;
}
.targets h3 {
  margin: 0 0 8px;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.6;
}
.targets p { margin: 0; color: var(--ink-soft); line-height: 1.95; }

/* 03 会社概要 */
.profile { margin: 0; border-top: 1px solid var(--rule); }
.profile div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 0 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-faint);
}
.profile div:last-child { border-bottom-color: var(--rule); }
.profile dt { font-size: 12.5px; letter-spacing: 0.24em; color: var(--ink-soft); line-height: 2.2; }
.profile dd { margin: 0; line-height: 1.9; }

/* 04 お問い合わせ */
.contact p { margin: 0; }
.form-link {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  margin-top: clamp(28px, 3.4vw, 48px);
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--ink);
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.16em;
  transition: gap .35s cubic-bezier(.2,.7,.2,1);
}
.form-link .en { font-style: italic; font-weight: 300; font-size: 1.3em; }
.form-link:hover { gap: 30px; }

/* ---------- フッター ---------- */
.site-foot {
  position: relative;
  overflow: hidden;
  margin-top: clamp(104px, 15vw, 196px);
  padding: 28px var(--gutter) 0;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.foot-row ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.foot-row a { border-bottom: 1px solid var(--rule-faint); }
.foot-row a:hover { border-bottom-color: var(--ink); }
.foot-row a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }
/* 終わりにもう一度だけ、頭文字を大きく（下端で切る） */
.foot-mark {
  display: block;
  margin: clamp(20px, 3vw, 40px) 0 0 -0.04em;
  font-family: var(--display);
  font-size: clamp(120px, 40vw, 720px);
  font-weight: 200;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  line-height: .3;
  letter-spacing: -0.05em;
  color: var(--paper-deep);
  height: .36em;
  overflow: hidden;
  user-select: none;
}

/* ---------- 法務ページ（1段組み） ---------- */
.legal {
  max-width: calc(42em + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) 0;
  font-size: 15.5px;
  line-height: 2.1;
}
.back-link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  padding: 2px 0;
  border-bottom: 1px solid var(--rule-faint);
}
.back-link:hover { border-bottom-color: var(--ink); }
.legal h1 {
  margin: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.6;
}
.legal h2 {
  margin: 2.8em 0 .8em;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.7;
}
.legal p { margin: 0 0 1.2em; }
.legal ol, .legal ul { margin: 0 0 1.2em; padding-left: 1.8em; }
.legal li { margin: 0 0 .5em; padding-left: .2em; }
.legal a:not(.back-link) {
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
}
.legal a:not(.back-link):hover { border-bottom-color: var(--ink); }
.legal .enacted {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--rule-faint);
  color: var(--ink-soft);
}

/* ---------- 動き（CSS のみ） ---------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* 視差: ヒーローの頭文字の束が、スクロールより少し遅れて退く（移動のみ。文字は薄めない）
   移動量 10vh は、束の下端から標語の区切り線までの間隔（実測 111〜306px）を超えない値 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lockup {
      animation: lag linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    @keyframes lag { to { transform: translateY(10vh); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 狭い画面 ---------- */
@media (max-width: 860px) {
  .sec { grid-template-columns: minmax(0, 1fr); }
  .sec-head { position: static; }
  .sec-body { padding-top: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .hero { min-height: clamp(560px, 100svh, 780px); }
  .site-head { padding-top: 22px; }
  .site-nav { display: none; }
  .lockup-wrap { padding-top: 24px; padding-bottom: 24px; }
  .suffixes { --row: calc(var(--suf-size) * 1.2 + 20px); }
  .suffixes li { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.15; }
  .suffixes { --branch-y: calc(var(--suf-size) * 0.62); }
  .gloss { font-size: 10px; letter-spacing: 0.14em; padding-left: 4px; margin-top: 2px; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .profile div { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
  .profile dt { line-height: 1.8; }
  .legal { font-size: 14.5px; line-height: 2; }
  .legal h1 { letter-spacing: 0.16em; }
}