/* =========================================================
   SynQ Creative — QUIET EDITORIAL CREATIVE
   骨格：左レール（番号/英字/日本語）＋ 12カラム
   面：白とオフホワイトのみ。黒はフッターだけ。
   ========================================================= */

/* ---------- セクションの器 ---------- */
.sec { padding-block: var(--pad-section); background: #fff; }
.sec--paper { background: var(--paper); }
.sec-in { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-6); }

/* 左レール：赤い罫線 / 01 / PHILOSOPHY / 私たちの哲学 */
.rail { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.rail::before { content: ""; width: 26px; height: 1px; background: var(--red);
  margin-bottom: var(--space-3); }
.rail-num { font-family: var(--en); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: .16em; color: var(--muted); }
.rail-en { font-family: var(--en); font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: .01em; line-height: 1.15; color: var(--ink); }
.rail-jp { font-size: var(--fs-xs); letter-spacing: .08em; color: var(--muted);
  font-feature-settings: "palt" 1; }

/* 12カラム */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6) 28px; }

/* 極小ラベル */
.lbl { font-family: var(--en); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: .1em; color: var(--muted); }
.lbl--red { color: var(--red); }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }

/* 見出し */
.h-sec { font-family: var(--jp); font-weight: 800; font-size: clamp(1.75rem, 2.9vw, 2.625rem);
  line-height: 1.32; letter-spacing: -.015em; color: var(--ink); font-feature-settings: "palt" 1; }
.h-sec .r { color: var(--red); }
.h-en { font-family: var(--en); font-weight: 800; font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.02; letter-spacing: -.025em; color: var(--ink); }
.h-en .r { color: var(--red); }
.txt { font-size: var(--fs-sm); color: var(--body); line-height: 1.95; font-feature-settings: "palt" 1; }

/* =========================================================
   HERO — 写真1枚を画面いっぱいに。文字はその上に置く
   ========================================================= */
.hx { position: relative; height: 100svh; min-height: 560px; max-height: 940px;
  display: flex; align-items: center; overflow: hidden; background: var(--ink); }
.hx-photo { position: absolute; inset: 0; z-index: 0; }
.hx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.62) 42%, rgba(10,10,12,.24) 100%); }

.hx-body { position: relative; z-index: 2; }
.hx h1 { color: #fff; }
.hx h1 .en { display: block; font-family: var(--en); font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 5.25rem); line-height: 1.06; letter-spacing: -.03em; }
.hx h1 .r { color: var(--red-2); }
.hx h1 .z { font-family: var(--en); font-weight: 800; }
.hx-eyebrow { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6);
  font-family: var(--en); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .18em;
  color: rgba(255,255,255,.7); }
.hx-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--red-2); flex: none; }
.hx-sub { margin: var(--space-5) 0 var(--space-6); font-size: var(--fs-base);
  color: rgba(255,255,255,.86); font-feature-settings: "palt" 1; }
.tlink--light { color: #fff; }
.tlink--light::after { color: var(--red-2); }
.tlink--light:hover { color: var(--red-2); }

.hx-img { overflow: hidden; }

.hx-scroll { position: absolute; left: 14px; bottom: 22%; z-index: 3; writing-mode: vertical-rl;
  font-family: var(--en); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .28em;
  color: rgba(255,255,255,.7); }
.hx-scroll::after { content: ""; display: block; width: 1px; height: 40px;
  background: rgba(255,255,255,.4); margin: var(--space-3) auto 0; }

/* 領域のラベルは画面下端に重ねる */
.hx-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.hx-tags { display: flex; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-5) 0; border-top: 1px solid rgba(255,255,255,.22); flex-wrap: wrap; }
.hx-tags span { font-family: var(--en); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: .08em; color: rgba(255,255,255,.7); }

/* ---- 登場（JSがある時だけ。無効なら最初から表示されたまま）---- */
.hx-d0 { --d: 0s; } .hx-d1 { --d: .09s; } .hx-d2 { --d: .18s; } .hx-d3 { --d: .3s; }
.js .hx-rv { opacity: 0; }
.js .hx-photo img { transform: scale(1.06); }
.hero-in .hx-rv { animation: hxUp .75s cubic-bezier(.22,.61,.36,1) var(--d) both; }
.hero-in .hx-photo img { animation: hxZoom 1.6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes hxUp   { from { opacity: 0; transform: translateY(16px); }
                    to   { opacity: 1; transform: none; } }
@keyframes hxZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .js .hx-rv { opacity: 1; }
  .js .hx-photo img { transform: none; }
  .hero-in .hx-rv, .hero-in .hx-photo img { animation: none; }
}

/* =========================================================
   ABOUT — WE ARE NOT JUST A CREATIVE AGENCY.
   ========================================================= */
.ab-in { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-6); }
.ab-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7);
  align-items: start; }
.ab-lead p + p { margin-top: var(--space-2); }
.ab-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-6) 0;
  margin-top: var(--space-8); }
.ab-list--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ab-note { margin-top: var(--space-4); font-size: var(--fs-base); color: var(--ink);
  font-feature-settings: "palt" 1; }
.ab-note strong { font-weight: 700; }
.ab-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding-inline: var(--space-4); }
.ab-item:first-child { padding-left: 0; }
.ab-item + .ab-item { border-left: 1px solid var(--line); }
.ab-item svg { width: 24px; height: 24px; color: var(--ink); flex: none; }
.ab-item b { display: block; font-family: var(--en); font-weight: 700; font-size: var(--fs-2xs);
  letter-spacing: .1em; color: var(--muted); }
.ab-item span { display: block; margin-top: var(--space-1); font-size: var(--fs-base); font-weight: 600;
  line-height: 1.5; color: var(--ink); white-space: nowrap; font-feature-settings: "palt" 1; }

/* =========================================================
   01 PHILOSOPHY
   ========================================================= */
.ph-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7);
  align-items: start; }
.ph-flow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-7);
  margin-top: var(--space-8); }
.ph-step { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.ph-n { display: block; font-family: var(--en); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: .14em; color: var(--red); }
.ph-step b { display: block; margin-top: var(--space-3); font-size: var(--fs-lg); font-weight: 700;
  color: var(--ink); letter-spacing: .01em; font-feature-settings: "palt" 1; }
.ph-step p { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--body);
  line-height: 1.95; font-feature-settings: "palt" 1; }

/* =========================================================
   02 MESSAGE — 代表者メッセージ
   ========================================================= */
.ms-in { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: var(--space-7);
  align-items: start; }
.ms-photo { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-media); background: #fff; }
.ms-photo img { width: 100%; height: 100%; object-fit: cover; }
.ms-txt { margin-top: var(--space-5); font-size: var(--fs-base); color: var(--body);
  line-height: 2.05; font-feature-settings: "palt" 1; }
.ms-sign { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--line);
  display: inline-block; }
.ms-sign .n { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--ink);
  letter-spacing: .04em; font-feature-settings: "palt" 1; }
.ms-sign .t { display: block; margin-top: var(--space-1); font-family: var(--en);
  font-size: var(--fs-2xs); letter-spacing: .08em; color: var(--muted); }
.ms-roles { margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line); display: grid; gap: var(--space-1); }
.ms-roles li { position: relative; padding-left: var(--space-4); font-size: var(--fs-xs);
  color: var(--body); line-height: 1.7; font-feature-settings: "palt" 1; }
.ms-roles li::before { content: ""; position: absolute; left: 0; top: .75em;
  width: 6px; height: 1px; background: var(--red); }

/* =========================================================
   02 SERVICES
   ========================================================= */
.sv-in { display: grid; grid-template-columns: minmax(0, 1fr) 28%; gap: var(--space-7); align-items: start; }
.sv-rows { border-top: 1px solid var(--line); }
.sv-row { display: grid; grid-template-columns: 22% 24% minmax(0, 1fr) 16px;
  gap: var(--space-5); align-items: center; min-height: 80px; padding-block: var(--space-4);
  border-bottom: 1px solid var(--line); transition: color .25s var(--ease); }
.sv-row b { font-family: var(--en); font-weight: 700; font-size: var(--fs-lg);
  letter-spacing: -.01em; color: var(--ink); transition: color .25s var(--ease); }
.sv-row .jp { font-size: var(--fs-base); color: var(--ink-2); font-feature-settings: "palt" 1; }
.sv-row .ds { font-size: var(--fs-sm); color: var(--muted); font-feature-settings: "palt" 1; }
.sv-row .ar { font-family: var(--en); color: var(--muted); text-align: right;
  transition: transform .25s var(--ease), color .25s var(--ease); }
.sv-row:hover b { color: var(--red); }
.sv-row:hover .ar { color: var(--red); transform: translateX(4px); }
.sv-shot { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-media); }
.sv-shot img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   03 SELECTED WORKS — 件数が増えても高さが変わらない
   ========================================================= */
.wk-in { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,3.4fr) minmax(0,3.6fr);
  gap: var(--space-7); align-items: start; }
.wk-shot { aspect-ratio: 3/2; overflow: hidden; border-radius: var(--r-media); }
.wk-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.wk-feat:hover .wk-shot img { transform: scale(1.02); }
.wk-ttl { font-family: var(--jp); font-weight: 700; font-size: var(--fs-xl); line-height: 1.5;
  letter-spacing: -.005em; color: var(--ink); margin: var(--space-3) 0 var(--space-3);
  font-feature-settings: "palt" 1; }
.wk-txt { font-size: var(--fs-sm); color: var(--body); line-height: 1.9;
  margin-bottom: var(--space-5); font-feature-settings: "palt" 1; }

.wk-list { border-top: 1px solid var(--line); }
.wk-item { display: grid; grid-template-columns: 84px minmax(0,1fr) 14px; gap: var(--space-4);
  align-items: center; min-height: 84px; padding-block: var(--space-3);
  border-bottom: 1px solid var(--line); }
.wk-item .th { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--r-media); }
.wk-item .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.wk-item:hover .th img { transform: scale(1.04); }
.wk-item .t { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  line-height: 1.5; font-feature-settings: "palt" 1; transition: color .2s; }
.wk-item:hover .t { color: var(--red); }
.wk-item .c { display: block; margin-top: 2px; }
.wk-item .ar { font-family: var(--en); color: var(--muted); text-align: right;
  transition: transform .25s var(--ease); }
.wk-item:hover .ar { transform: translateX(3px); }
.wk-all { margin-top: var(--space-5); }

/* =========================================================
   04 JOURNAL
   ========================================================= */
.jr-in { display: grid; grid-template-columns: minmax(0,4.4fr) minmax(0,4fr) minmax(0,3.6fr);
  gap: var(--space-7); align-items: start; }
.jr-shot { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-media); }
.jr-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.jr-feat:hover .jr-shot img { transform: scale(1.02); }
.jr-ttl { font-family: var(--jp); font-weight: 700; font-size: var(--fs-xl); line-height: 1.55;
  letter-spacing: -.005em; color: var(--ink); margin: var(--space-3) 0 var(--space-3);
  font-feature-settings: "palt" 1; }
.jr-read { margin-top: var(--space-5); }
.jr-list { border-top: 1px solid var(--line); }
.jr-item { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: var(--space-4);
  align-items: center; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.jr-item .th { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--r-media); }
.jr-item .th img { width: 100%; height: 100%; object-fit: cover; }
.jr-item .t { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  line-height: 1.5; font-feature-settings: "palt" 1; transition: color .2s; }
.jr-item:hover .t { color: var(--red); }
.jr-item .c { display: block; margin-top: 3px; }

/* =========================================================
   05 PRODUCTS
   ========================================================= */
.px-in { display: grid; grid-template-columns: 25% minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.px-lead { margin: var(--space-5) 0 var(--space-5); }
.px-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.px-p { display: block; }
.px-p .sh { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-media); background: var(--paper); }
.px-p img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.px-p:hover img { transform: scale(1.03); }
.px-p .n { display: block; margin-top: var(--space-3); font-family: var(--en); font-weight: 700;
  font-size: var(--fs-sm); color: var(--ink); letter-spacing: -.01em; transition: color .2s; }
.px-p:hover .n { color: var(--red); }
.px-p .d { display: block; margin-top: var(--space-2); font-size: var(--fs-2xs); color: var(--muted);
  line-height: 1.7; font-feature-settings: "palt" 1; }

/* =========================================================
   06 MEMBERS — 5列。写真の下に名前とInstagram
   ========================================================= */
.mb-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
  flex-wrap: wrap; margin-bottom: var(--space-6); }
.mb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5); }
.mb-p { display: block; }
.mb-p .sh { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-media); background: var(--paper); }
.mb-p img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mb-p:hover img { transform: scale(1.03); }
.mb-p .n { display: block; margin-top: var(--space-4); font-size: var(--fs-base); font-weight: 700;
  color: var(--ink); line-height: 1.45; overflow-wrap: anywhere;
  font-feature-settings: "palt" 1; transition: color .2s; }
.mb-p:hover .n { color: var(--red); }
.mb-p .r { display: block; margin-top: var(--space-1); font-size: var(--fs-xs);
  color: var(--muted); line-height: 1.55; font-feature-settings: "palt" 1; }
.mb-p .ig { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
  font-family: var(--en); font-size: var(--fs-xs); color: var(--muted);
  overflow-wrap: anywhere; transition: color .2s; }
.mb-p .ig svg { width: 14px; height: 14px; flex: none; }
.mb-p:hover .ig { color: var(--ink); }

/* =========================================================
   07 Q&A
   ========================================================= */
.qa-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: var(--space-8); }
.qa-i { border-bottom: 1px solid var(--line); }
.qa-i summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-4); min-height: 60px; padding-block: var(--space-3);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink); font-feature-settings: "palt" 1; }
.qa-i summary::-webkit-details-marker { display: none; }
.qa-i .pm { position: relative; width: 11px; height: 11px; flex: none; color: var(--muted); }
.qa-i .pm::before, .qa-i .pm::after { content: ""; position: absolute; background: currentColor;
  transition: transform .25s var(--ease); }
.qa-i .pm::before { left: 0; right: 0; top: 5px; height: 1px; }
.qa-i .pm::after { top: 0; bottom: 0; left: 5px; width: 1px; }
.qa-i[open] .pm::after { transform: scaleY(0); }
.qa-i .ans { padding: 0 var(--space-6) var(--space-5) 0; font-size: var(--fs-sm);
  color: var(--body); line-height: 1.95; font-feature-settings: "palt" 1; }

/* =========================================================
   08 CONTACT — 左テキスト / 右写真
   ========================================================= */
.ct-in { display: grid; grid-template-columns: 45% minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.ct-in h2 { font-family: var(--jp); font-weight: 800; font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: 1.45; letter-spacing: -.015em; color: var(--ink); font-feature-settings: "palt" 1; }
.ct-in h2 .r { color: var(--red); }
.ct-in p { margin: var(--space-4) 0 var(--space-6); font-size: var(--fs-sm); color: var(--body);
  font-feature-settings: "palt" 1; }
.ct-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
.ct-en { font-family: var(--en); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.ct-en .r { color: var(--red); }
.ct-info { display: flex; flex-direction: column; gap: var(--space-1); }
.ct-info a { font-family: var(--en); font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  transition: color .2s; }
.ct-info a:hover { color: var(--red); }
.ct-shot { aspect-ratio: 16/9; max-height: 400px; overflow: hidden; border-radius: var(--r-media); }
.ct-shot img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1439px) {
  .mb-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 1199px) {
  .mb-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ab-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ab-item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .sec-in, .ab-in { grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-5); }
  .wk-in { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .wk-list-col { grid-column: 1 / -1; }
  .jr-in { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .jr-list-col { grid-column: 1 / -1; }
  .px-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
  .sec-in, .ab-in { grid-template-columns: 1fr; gap: var(--space-5); }
  .rail { flex-direction: row; align-items: baseline; gap: var(--space-4); }
  .rail::before { display: none; }
  .hx-scroll { display: none; }
  .hx-photo::after { background: linear-gradient(100deg, rgba(10,10,12,.8) 0%, rgba(10,10,12,.55) 60%, rgba(10,10,12,.3) 100%); }
  .ab-head, .ph-head { grid-template-columns: 1fr; gap: var(--space-5); }
  .ms-in { grid-template-columns: 1fr; gap: var(--space-6); }
  .ms-photo { max-width: 320px; }
  .ph-flow { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-7); }
  .sv-in { grid-template-columns: 1fr; }
  .sv-shot { display: none; }
  .px-in { grid-template-columns: 1fr; }
  .ct-in { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hx { height: 100svh; min-height: 520px; }
  .hx-tags { justify-content: flex-start; gap: var(--space-2) var(--space-5); padding: var(--space-4) 0; }
  .hx-photo::after { background: linear-gradient(170deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,.75) 55%, rgba(10,10,12,.88) 100%); }
  .ab-list { grid-template-columns: 1fr 1fr; gap: var(--space-4) 0; }
  .ab-item { padding-inline: var(--space-4); }
  .ab-item + .ab-item { border-left: 1px solid var(--line); }
  .ab-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .wk-in, .jr-in { grid-template-columns: 1fr; gap: var(--space-6); }
  .px-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .mb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6) var(--space-4); }
  .qa-grid { grid-template-columns: 1fr; }
  .sv-row { grid-template-columns: 1fr 16px; row-gap: var(--space-2); }
  .sv-row .jp { grid-column: 1; }
  .sv-row .ds { grid-column: 1 / -1; }
  .sv-row .ar { grid-row: 1; grid-column: 2; }
}

/* =========================================================
   Opening — 白地の中央。初回のみ・合計1.7秒
   JSが無効／sessionStorage不可のときは display:none のまま出ない
   ========================================================= */
#intro { display: none; }
.intro-on, .intro-on body { overflow: hidden; }
.intro-on #intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 999; background: #fff;
  animation: introOut .55s ease-out 1.15s forwards;
}
.intro-in { text-align: center; padding-inline: var(--gutter); }
.intro-en { display: block; font-family: var(--en); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: .28em; color: var(--muted); margin-bottom: var(--space-4);
  opacity: 0; animation: introFade .4s ease-out .08s forwards; }
.intro-copy { font-family: var(--jp); font-weight: 700;
  font-size: clamp(1.5rem, 2.9vw, 2.25rem); line-height: 1.35; letter-spacing: .04em;
  color: var(--ink); font-feature-settings: "palt" 1;
  clip-path: inset(0 100% 0 0); animation: introWipe .7s cubic-bezier(.22,.61,.36,1) .15s forwards; }
.intro-rule { display: block; width: 0; height: 1px; background: var(--red);
  margin: var(--space-5) auto 0; animation: introRule .35s ease-out .6s forwards; }

@keyframes introFade { to { opacity: 1; } }
@keyframes introWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes introRule { to { width: 48px; } }
@keyframes introOut  { to { opacity: 0; visibility: hidden; } }

/* =========================================================
   下層ページ：PRODUCTS 一覧
   ========================================================= */
.pg-list { display: grid; gap: var(--space-9); }
.pg-item { display: grid; grid-template-columns: 3rem minmax(0,5fr) minmax(0,7fr);
  gap: var(--space-6); align-items: start; padding-top: var(--space-6);
  border-top: 1px solid var(--line); }
.pg-n { font-family: var(--en); font-weight: 700; font-size: var(--fs-2xs);
  letter-spacing: .14em; color: var(--red); }
.pg-shot { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-media); }
.pg-shot img { width: 100%; height: 100%; object-fit: cover; }
.pg-shot--empty { background: var(--paper); border: 1px solid var(--line); }
.pg-ttl { font-family: var(--jp); font-weight: 700; font-size: var(--fs-xl); line-height: 1.45;
  letter-spacing: -.005em; color: var(--ink); margin-top: var(--space-3);
  font-feature-settings: "palt" 1; }
.pg-copy { margin-top: var(--space-3); font-size: var(--fs-md); font-weight: 600; color: var(--red);
  line-height: 1.7; font-feature-settings: "palt" 1; }
.pg-body .txt { margin-top: var(--space-4); }
.pg-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.pg-tags li { font-family: var(--jp); font-size: var(--fs-2xs); letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .45em .9em; }
.pg-body .tlink { margin-top: var(--space-5); }
.pg-item--soon { opacity: .65; }
.pg-custom { margin-top: var(--space-10); padding: var(--space-8) var(--space-6);
  background: var(--paper); text-align: center; border-radius: var(--r-md); }
.pg-custom p { margin: var(--space-4) 0 var(--space-6); font-size: var(--fs-md); color: var(--ink);
  line-height: 1.8; font-feature-settings: "palt" 1; }

/* =========================================================
   下層ページ：JOURNAL 一覧
   ========================================================= */
.ar-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ar-item { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: var(--space-6);
  align-items: center; padding: var(--space-6) 0; border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease); }
.ar-item:hover { background: var(--paper); }
.ar-shot { aspect-ratio: 3/2; overflow: hidden; border-radius: var(--r-media); }
.ar-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ar-item:hover .ar-shot img { transform: scale(1.03); }
.ar-ttl { font-family: var(--jp); font-weight: 700; font-size: var(--fs-xl); line-height: 1.5;
  letter-spacing: -.005em; color: var(--ink); margin: var(--space-2) 0 var(--space-4);
  font-feature-settings: "palt" 1; transition: color .2s; }
.ar-item:hover .ar-ttl { color: var(--red); }

/* =========================================================
   下層ページ：記事本文
   ========================================================= */
.art { padding-block: var(--space-9) var(--space-10); }
.art-in { width: min(760px, calc(100% - var(--gutter) * 2)); }
.art-ttl { font-family: var(--jp); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.375rem);
  line-height: 1.55; letter-spacing: -.01em; color: var(--ink); margin: var(--space-3) 0 var(--space-6);
  font-feature-settings: "palt" 1; }
.art-by { display: flex; align-items: center; gap: var(--space-3); }
.art-by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.art-by span { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.5; }
.art-by b { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: 700; }
.art-shot { margin: var(--space-7) 0 var(--space-8); aspect-ratio: 3/2; overflow: hidden;
  border-radius: var(--r-media); }
.art-shot img { width: 100%; height: 100%; object-fit: cover; }
.article-body p { font-size: var(--fs-base); color: var(--body); line-height: 2.1;
  margin-bottom: var(--space-5); font-feature-settings: "palt" 1; }
.article-body h2 { font-family: var(--jp); font-weight: 700; font-size: var(--fs-lg); color: var(--ink);
  line-height: 1.6; letter-spacing: -.005em; margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-5); border-top: 1px solid var(--line); font-feature-settings: "palt" 1; }
.article-body blockquote { margin: var(--space-6) 0; padding-left: var(--space-5);
  border-left: 2px solid var(--red); font-size: var(--fs-md); color: var(--ink); line-height: 1.95;
  font-feature-settings: "palt" 1; }
.art-foot { margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.tlink--back::after { content: ""; }
.tlink--back::before { content: "←"; color: var(--red); margin-right: .55em; }

@media (max-width: 1023px) {
  .pg-item { grid-template-columns: 2.5rem minmax(0,1fr); }
  .pg-body { grid-column: 2; margin-top: var(--space-5); }
}
@media (max-width: 767px) {
  .ar-item { grid-template-columns: 1fr; gap: var(--space-4); }
  .pg-list { gap: var(--space-8); }
}

/* トップのPRODUCTSは実在の2件なので2列に */
.px-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
.px-p .c { display: block; margin-top: var(--space-4); }
.px-p .sh--empty { background: var(--paper); border: 1px solid var(--line); }
.px-p--soon { opacity: .65; }
@media (max-width: 767px) { .px-grid--2 { grid-template-columns: minmax(0,1fr); } }

/* =========================================================
   サービス下層ページ
   ========================================================= */
.sv-hero .sv-no { display: block; font-family: var(--en); font-weight: 700; font-size: var(--fs-2xs);
  letter-spacing: .16em; color: var(--red); margin-bottom: var(--space-2); }
.sv-lead { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: var(--space-7);
  align-items: start; padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); }

.blk { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: var(--space-6);
  padding-top: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--line); }
.sv-lead + .blk { border-top: 0; margin-top: var(--space-7); padding-top: 0; }
.blk-head { display: flex; flex-direction: column; gap: var(--space-2); }
.blk-ttl { margin-bottom: var(--space-5); }
.blk-txt p { font-size: var(--fs-base); color: var(--body); line-height: 2.05;
  margin-bottom: var(--space-4); font-feature-settings: "palt" 1; max-width: 46em; }

.sv-items { display: grid; gap: var(--space-8); }
.sv-item { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: var(--space-5);
  align-items: start; }
.sv-item-n { font-family: var(--en); font-weight: 700; font-size: var(--fs-2xs);
  letter-spacing: .14em; color: var(--red); padding-top: .35em; }
.sv-item-ttl { font-family: var(--jp); font-weight: 700; font-size: var(--fs-xl); line-height: 1.5;
  letter-spacing: -.005em; color: var(--ink); margin-top: var(--space-2);
  font-feature-settings: "palt" 1; }
.sv-copy { margin-top: var(--space-3); font-size: var(--fs-md); font-weight: 600; color: var(--red);
  font-feature-settings: "palt" 1; }
.sv-item .txt { margin-top: var(--space-4); max-width: 44em; }
.sv-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5); }
.sv-list li { position: relative; padding-left: var(--space-4); font-size: var(--fs-sm);
  color: var(--body); line-height: 1.7; font-feature-settings: "palt" 1; }
.sv-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 1px;
  background: var(--red); }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-6);
  margin-top: var(--space-8); }
.stat { padding-top: var(--space-4); border-top: 1px solid var(--ink); }
.stat b { display: block; font-family: var(--en); font-weight: 800; font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.stat p { margin: var(--space-3) 0 var(--space-3); font-size: var(--fs-sm); color: var(--body);
  line-height: 1.85; font-feature-settings: "palt" 1; }

.proc { display: grid; gap: 0; border-top: 1px solid var(--line); }
.proc li { display: grid; grid-template-columns: 3rem minmax(0,10rem) minmax(0,1fr); gap: var(--space-5);
  align-items: baseline; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.proc-n { font-family: var(--en); font-weight: 700; font-size: var(--fs-2xs);
  letter-spacing: .14em; color: var(--red); }
.proc b { font-size: var(--fs-base); font-weight: 700; color: var(--ink);
  font-feature-settings: "palt" 1; }
.proc p { font-size: var(--fs-sm); color: var(--body); line-height: 1.9;
  font-feature-settings: "palt" 1; }

.cta-band { margin-top: var(--space-10); padding: var(--space-9) var(--space-6); background: var(--paper);
  text-align: center; border-radius: var(--r-md); }
.cta-en { margin: var(--space-3) 0 var(--space-4); }
.cta-band p { max-width: 44em; margin: 0 auto var(--space-6); font-size: var(--fs-base);
  color: var(--body); line-height: 1.95; font-feature-settings: "palt" 1; }

@media (max-width: 1023px) {
  .sv-lead { grid-template-columns: 1fr; gap: var(--space-5); }
  .blk { grid-template-columns: 1fr; gap: var(--space-5); }
  .blk-head { flex-direction: row; gap: var(--space-4); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proc li { grid-template-columns: 2.5rem minmax(0,1fr); }
  .proc p { grid-column: 2; margin-top: var(--space-2); }
}
@media (max-width: 767px) {
  .sv-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .sv-list { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* トップ SERVICES 直下：各サービスページへの導線 */
.sv-index { display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--space-3); align-items: stretch; margin-top: var(--space-7);
  padding-top: var(--space-5); border-top: 1px solid var(--line); }
.sv-index > .lbl { grid-column: 1 / -1; justify-self: start; }
.sv-index a { display: block; }
.sv-index b { display: block; font-family: var(--en); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .04em; color: var(--ink); transition: color .2s; }
.sv-index a:hover b { color: var(--red); }
.sv-index span { display: block; margin-top: var(--space-1); font-size: var(--fs-2xs);
  color: var(--muted); font-feature-settings: "palt" 1; white-space: nowrap; }
@media (max-width: 1100px) { .sv-index { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* =========================================================
   規約・ポリシー系ページ
   ========================================================= */
.lg { width: min(820px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.lg-date { font-family: var(--en); font-size: var(--fs-2xs); letter-spacing: .1em;
  color: var(--muted); margin-bottom: var(--space-7); }
.lg-lead { font-size: var(--fs-base); color: var(--body); line-height: 2.05;
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--line);
  font-feature-settings: "palt" 1; }
.lg-sec { margin-top: var(--space-7); }
.lg-sec h2 { font-family: var(--jp); font-weight: 700; font-size: var(--fs-md); color: var(--ink);
  line-height: 1.6; margin-bottom: var(--space-4); font-feature-settings: "palt" 1; }
.lg-sec p { font-size: var(--fs-sm); color: var(--body); line-height: 2.05;
  margin-bottom: var(--space-3); font-feature-settings: "palt" 1; }
.lg-sec ul { margin: var(--space-3) 0 var(--space-4); display: grid; gap: var(--space-2); }
.lg-sec li { position: relative; padding-left: var(--space-4); font-size: var(--fs-sm);
  color: var(--body); line-height: 1.9; font-feature-settings: "palt" 1; }
.lg-sec li::before { content: ""; position: absolute; left: 0; top: .85em; width: 5px; height: 1px;
  background: var(--red); }
.lg-note { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.8; }

.lg-dl { display: grid; grid-template-columns: 12rem minmax(0,1fr); margin-top: var(--space-4);
  border-top: 1px solid var(--line); }
.lg-dl dt { padding: var(--space-4) 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line); font-feature-settings: "palt" 1; }
.lg-dl dd { padding: var(--space-4) 0; font-size: var(--fs-sm); color: var(--body); line-height: 1.9;
  border-bottom: 1px solid var(--line); font-feature-settings: "palt" 1; }
.lg-dl a { color: var(--ink); border-bottom: 1px solid var(--line); }
.lg-dl a:hover { color: var(--red); border-bottom-color: var(--red); }
.lg-foot { margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid var(--line); }

/* 未記入項目：公開前に必ず埋める */
.todo { display: inline-block; margin-left: .4em; padding: .15em .6em; border: 1px solid var(--red);
  border-radius: var(--r-sm); font-family: var(--en); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .08em; color: var(--red); background: #FFF4F4; }

@media (max-width: 767px) {
  .lg-dl { grid-template-columns: 1fr; }
  .lg-dl dt { padding-bottom: var(--space-1); border-bottom: 0; }
  .lg-dl dd { padding-top: 0; }
}