/* 部品：ボタン・リンク・タグ・見出し・表・工程表・費用・アコーディオン・フォーム・体験デモ */

/* ---- ボタン（色が左から満ちる） ---- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 28px;
  border: 1.5px solid var(--ink);
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: color 0.45s var(--ease), border-color 0.45s;
}
.btn::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  transform: scaleX(0); transform-origin: right; transition: transform 0.55s var(--ease);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn::after { content: '→'; font-family: var(--num); font-size: 20px; line-height: 1; transition: transform 0.45s var(--ease); }
.btn:hover::after { transform: translateX(5px); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink::before { background: var(--shu); }
.btn--ink:hover { border-color: var(--shu); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: var(--white); }
.btn--big { min-height: 64px; padding: 0 40px; font-size: 17px; }

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: var(--fs-sm); text-decoration: none; padding-bottom: 4px;
}
.link-arrow::before { content: ''; position: absolute; left: 0; right: 28px; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; transition: transform 0.5s var(--ease); }
.link-arrow:hover::before { transform: scaleX(0); transform-origin: right; }
.link-arrow::after {
  content: ''; width: 18px; height: 18px; flex: none; border: 1px solid var(--ink); border-radius: 50%;
  background: linear-gradient(var(--ink), var(--ink)) center / 6px 1px no-repeat;
  transition: background-color 0.3s, transform 0.45s var(--ease);
}
.link-arrow:hover::after { background-color: var(--ink); background-image: linear-gradient(var(--white), var(--white)); transform: translateX(4px); }

.tag { display: inline-block; padding: 1px 10px; border: 1px solid var(--line-2); font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; line-height: 1.8; }
.tag--live { border-color: var(--shu); color: var(--shu); font-weight: 700; }

/* ---- 場面 ----
   場面の境目に線や色の帯は作らない。地の色はページ全体で1色で、いま見ている場面の色へなめらかに変わる（motion.js の tones）。
   下の色は、動かさない設定のときだけ場面ごとに付く */
.block { position: relative; padding: var(--block) 0; }
.block--alt { background: var(--paper-2); }
.block--line { background: var(--white); }
.block--ink { background: var(--tone-ink); }
.block--navy { background: var(--tone-navy); }
.block--blue { background-color: var(--tone-blue); }
.has-tones :is(.block--alt, .block--line, .block--ink, .block--navy, .block--blue, .night, .letter, .svc-track-wrap, .gf, .gf__cta, .wpager, .send, .salon, .dive--salon) { background-color: transparent; }
/* 薄青の場面には、青焼きの方眼を敷く */
.block--blue, .devices {
  background-image: linear-gradient(var(--blueprint) 1px, transparent 1px), linear-gradient(90deg, var(--blueprint) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* 濃い地（墨・紺・朱）の場面の中は、文字と線の色を入れ替える（部品はそのまま使える） */
.block--navy, .block--ink, .gf__cta, .gf {
  --ink: #f5f5f1; --ink-soft: #e6e7e2; --ink-2: #d5d8d6; --ink-3: #b6bbc0; --ink-4: #9aa3ab;
  --line: rgba(245, 245, 241, 0.16); --line-2: rgba(245, 245, 241, 0.28);
  color: var(--ink);
}
.block--navy { --paper: var(--tone-navy); --paper-2: #1b3a5b; --white: #1d3d60; }
.block--ink {
  --ink: #f5f5f1; --ink-soft: #e6e7e2; --ink-2: #cfd1cc; --ink-3: #b0b4b8; --ink-4: #9aa3ab;
  --line: rgba(245, 245, 241, 0.14); --line-2: rgba(245, 245, 241, 0.26);
  --paper: var(--tone-ink); --paper-2: #24272a; --white: #2a2d31;
  color: var(--ink);
}
/* 地の色が場面の途中で替わったとき（motion.js の tones が付ける）。
   明るい場面が濃い地の上に残ったら濃い場面と同じ文字と線に、濃い場面が明るい地の上に残ったら明るい場面の文字と線にする。
   色は登録した変数なので、地の色と一緒になめらかに変わる */
@property --ink { syntax: '<color>'; inherits: true; initial-value: #1c1e20; }
@property --ink-2 { syntax: '<color>'; inherits: true; initial-value: #44494f; }
@property --ink-3 { syntax: '<color>'; inherits: true; initial-value: #6f747a; }
@property --ink-4 { syntax: '<color>'; inherits: true; initial-value: #9a9ea3; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #d6d7d1; }
@property --line-2 { syntax: '<color>'; inherits: true; initial-value: #bfc1ba; }
:root .tone-on-dark, :root .tone-on-light { color: var(--ink); transition: --ink 0.6s, --ink-2 0.6s, --ink-3 0.6s, --ink-4 0.6s, --line 0.6s, --line-2 0.6s, color 0.6s; }
:root .tone-on-dark {
  --ink: #f5f5f1; --ink-soft: #e6e7e2; --ink-2: #d5d8d6; --ink-3: #b6bbc0; --ink-4: #9aa3ab;
  --line: rgba(245, 245, 241, 0.18); --line-2: rgba(245, 245, 241, 0.3);
  --grid: rgba(245, 245, 241, 0.05); --grid-strong: rgba(245, 245, 241, 0.09);
  --paper: var(--page-bg); --paper-2: color-mix(in srgb, var(--page-bg) 90%, #ffffff); --paper-3: color-mix(in srgb, var(--page-bg) 84%, #ffffff);
  --white: color-mix(in srgb, var(--page-bg) 88%, #ffffff);
}
/* 朱の地では、朱の印や数字が地に溶けるので、明るい色に替える */
:root[data-tone='shu'] .tone-on-dark { --ink-2: #ffe9e3; --ink-3: #ffe9e3; --ink-4: #ffe3d9; --shu: #ffe3d9; --shu-deep: #ffffff; --shu-wash: rgba(255, 255, 255, 0.14); }
:root .tone-on-light {
  --ink: #1c1e20; --ink-soft: #2e3236; --ink-2: #44494f; --ink-3: #575c62; --ink-4: #62676c;
  --line: #d6d7d1; --line-2: #bfc1ba; --grid: rgba(28, 30, 32, 0.045); --grid-strong: rgba(28, 30, 32, 0.08);
  --paper: #f5f5f1; --paper-2: #ecece6; --paper-3: #e2e3dc; --white: #ffffff; --pearl: #1c1e20;
}
:root .tone-on-light .btn--pearl { color: #f5f5f1; }
.block__more { margin-top: 40px; text-align: right; }
.block__more--left { text-align: left; margin-top: 28px; }

/* ---- 見出し ----
   基本は「左に大きく、説明は右下へ少し下げる」。--flip は左右を入れ替え、--stack は説明を見出しの下で右へずらす。
   広い画面では、場面の名前（.sec-no）を左の欄外に縦書きで置く */
.sec-head { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(56px, 7vw, 96px); }
.sec-no { display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.sec-no::after { content: ''; width: 40px; height: 1px; background: var(--ink-4); }
.sec-title { margin-top: 12px; font-size: clamp(30px, 3.5vw, 52px); font-weight: 700; line-height: 1.4; letter-spacing: 0.03em; }
.sec-lead { color: var(--ink-2); font-size: 15px; max-width: 25em; }
.sec-head .sec-lead { justify-self: end; margin-bottom: -2.2em; }
.sec-head--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.sec-head--flip > div { order: 2; }
.sec-head--flip .sec-lead { order: 1; justify-self: start; align-self: start; margin: 0; }
.sec-head--stack { grid-template-columns: minmax(0, 1fr); }
.sec-head--stack .sec-lead { justify-self: start; margin: 4px 0 0 clamp(0px, 24%, 300px); }
@media (min-width: 1360px) {
  .sec-head > div > .sec-no, .v-label { position: absolute; left: -80px; top: 6px; writing-mode: vertical-rl; letter-spacing: 0.2em; }
  .sec-head > div > .sec-no::after, .v-label::after { width: 1px; height: 56px; }
  .sec-head--flip > div > .sec-no { left: auto; right: -80px; }
}
@media (max-width: 760px) {
  .sec-head, .sec-head--flip { grid-template-columns: 1fr; }
  .sec-head--flip > div { order: 0; }
  .sec-head .sec-lead, .sec-head--stack .sec-lead { justify-self: start; margin: 0; }
}

/* ---- 表 ---- */
.table { width: 100%; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--white); font-size: 15px; }
.table th, .table td { padding: 20px 24px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { width: 15em; font-weight: 700; background: var(--paper); }
.table tr:last-child th, .table tr:last-child td { border-bottom: 0; }

/* ---- 工程表 ---- */
.gantt { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--white); }
.gantt__head, .gantt__row { display: grid; grid-template-columns: minmax(220px, 28%) 1fr; border-bottom: 1px solid var(--line); }
.gantt__row:last-child { border-bottom: 0; }
.gantt__head { grid-template-columns: minmax(220px, 28%) repeat(8, 1fr); font-family: var(--num); font-size: 13px; color: var(--ink-3); background: var(--paper-2); }
.gantt__head span { padding: 8px 10px; border-left: 1px solid var(--line); }
.gantt__head span:first-child { border-left: 0; padding-left: var(--pad); font-family: var(--ja); }
.gantt__name { padding: 22px 16px 22px var(--pad); font-size: var(--fs-sm); color: var(--ink-2); }
.gantt__track { position: relative; overflow: hidden; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 12.5% 100%; }
.gantt__bar { position: absolute; top: 15px; bottom: 15px; left: calc(var(--s) * 100%); width: calc(var(--w) * 100%); background: var(--paper-2); border: 1px solid var(--line-2); }
.gantt__bar--shu { background: var(--shu-wash); border-color: var(--shu); color: var(--shu); }
.gantt__bar--ink { background: var(--ink); border-color: var(--ink); color: var(--white); }
.gantt__bar b { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; white-space: nowrap; }

/* ---- 費用の数字 ---- */
.price-nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); margin-bottom: 48px; }
.price-nums div { padding: 18px 16px 0 0; }
.price-nums div + div { padding-left: 24px; border-left: 1px solid var(--line-2); }
.price-nums dt { font-size: 13px; color: var(--ink-3); }
.price-nums dd { font-size: clamp(44px, 5vw, 76px); font-weight: 600; line-height: 1.05; white-space: nowrap; }
.price-nums small { font-size: 16px; font-weight: 700; margin-left: 4px; }

/* ---- アコーディオン ---- */
.acc { border-top: 1px solid var(--line-2); }
.acc:last-child { border-bottom: 1px solid var(--line-2); }
.acc summary { position: relative; display: flex; gap: 16px; align-items: baseline; padding: 22px 56px 22px 0; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--shu); }
.acc summary i { position: absolute; right: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
.acc summary i::before, .acc summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 7.5px; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease); }
.acc summary i::after { transform: rotate(90deg); }
.acc[open] summary i::after { transform: rotate(0deg); }
.acc__q, .acc__a { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; font-size: 13px; font-weight: 500; }
.acc__q { border: 1px solid var(--ink); }
.acc__a { background: var(--ink); color: var(--white); margin-right: 16px; float: left; }
.acc__body { overflow: hidden; }
.acc__body p { padding: 0 0 26px; color: var(--ink-2); max-width: 44em; }

/* ---- 体験デモの枠 ---- */
.demo__frame { position: relative; height: min(820px, 86vh); border: 1px solid var(--line-2); background: var(--white); box-shadow: 0 30px 60px -45px rgba(28, 30, 32, 0.5); overflow: hidden; }
.demo__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo__frame:not(.is-loaded) iframe { display: none; }
.demo__poster { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.demo__frame.is-loaded .demo__poster { display: none; }
.demo__cover { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 0; background: rgba(28, 30, 32, 0.32); cursor: pointer; transition: background-color 0.35s; }
.demo__cover span { position: relative; padding: 16px 28px; background: var(--ink); color: var(--white); font: 700 15px var(--ja); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); transition: transform 0.45s var(--ease), background-color 0.3s; }
.demo__cover:hover { background: rgba(28, 30, 32, 0.4); }
.demo__cover:hover span { transform: translateY(-4px); background: var(--shu); }
.demo__frame.is-loaded .demo__cover { place-items: end center; padding-bottom: 32px; background: rgba(28, 30, 32, 0); }
.demo__frame.is-live .demo__cover { display: none; }
.demo__open { margin-top: 24px; }
.demo__login { margin-top: 12px; display: inline-block; padding: 8px 14px; border: 1px dashed var(--line-2); background: var(--white); font-size: var(--fs-sm); }
.demo__login b { font-size: 17px; margin: 0 4px; }

@media (max-width: 860px) {
  .sec-head { grid-template-columns: 1fr; margin-bottom: 36px; }
  .table th, .table td { display: block; width: auto; padding: 14px 16px; }
  .table th { border-bottom: 0; padding-bottom: 4px; }
  .gantt__head { grid-template-columns: 116px repeat(8, 1fr); font-size: 12px; }
  .gantt__head span { padding: 6px 2px; text-align: center; }
  .gantt__row { grid-template-columns: 116px 1fr; }
  .gantt__name { padding: 14px 8px 14px var(--pad); font-size: 12px; line-height: 1.5; }
  .gantt__bar b { font-size: 12px; left: 6px; right: 6px; white-space: normal; line-height: 1.3; }
  .price-nums { grid-template-columns: 1fr 1fr; }
  .price-nums div:nth-child(3) { padding-left: 0; border-left: 0; }
  .demo__frame { height: auto; aspect-ratio: 16 / 10; }
  .demo__frame iframe { display: none !important; }
  .demo__poster { display: block !important; }
  .demo__cover { display: none !important; }
}
/* 幅360px未満では「10–22万円」が半分の幅に収まらないので、数字を縦に並べる */
@media (max-width: 359px) {
  .price-nums { grid-template-columns: 1fr; }
  .price-nums div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2); margin-top: 18px; }
}

/* ノートパソコンの写真（背景透明。紙の色の上にそのまま置く） */
.devphoto { max-width: 1240px; margin: 64px auto 0; }
.devphoto img { width: 100%; height: auto; }
.devphoto figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-3); text-align: right; }
.tech-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px 56px; align-items: center; }
.devphoto--side { margin-right: calc(var(--bleed) * -1 + 12px); }
.devphoto--side { margin: 0; }
@media (max-width: 900px) {
  .tech-wrap { grid-template-columns: 1fr; }
  .devphoto { margin-top: 40px; }
}