/* vivitto — 下半分の「場面」
   1画面に1つの見せ場。暗い面と明るい面を交互に置いて、作品の色で全体を明るくする。 */

/* ------------------------------------------------------------ 明るい面の色 */
.theme-light {
  --text: #0a0b0c;
  --mute: #55575b;
  --mute-2: #66686c;
  --line: rgba(10, 11, 12, 0.12);
  --line-2: rgba(10, 11, 12, 0.22);
  --ink-3: #ffffff;
  --ink-4: #ffffff;
  --gold: #7a6433;
  --gold-hi: #6f5b2d;
  background: var(--paper);
  color: var(--text);
  color-scheme: light;
}
.theme-white { background: #fbfaf7; }

/* ------------------------------------------------------------ REEL（夜明け） */
.reel { position: relative; padding-bottom: clamp(80px, 10vw, 150px); }
.reel::before { content: ""; display: block; height: clamp(140px, 22vh, 260px); background: linear-gradient(var(--black), var(--paper)); }
.reel__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.reel__sub { color: var(--mute); }
.reel__screen { width: min(1320px, calc(100% - var(--gutter) * 2)); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #e6e3db url("../video/reel-poster.jpg") center / cover; box-shadow: 0 60px 120px -60px rgba(10, 11, 12, 0.45); }
.reel__screen video { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ SHOWCASE（作品ごとの色の世界） */
.showcase { background: #0a0b0c; position: relative; }
.sc-panel { position: relative; overflow: hidden; background: var(--bg); color: var(--fg); }
.sc-word {
  position: absolute; z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--f-mincho); font-weight: 800; line-height: 0.8; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 22%, transparent);
}
.sc-text { position: relative; z-index: 2; display: grid; gap: 18px; max-width: 34rem; align-content: center; }
.sc-no { font-size: 12px; letter-spacing: 0.3em; color: var(--accent); }
.sc-title { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(44px, 5.4vw, 92px); line-height: 1.08; font-feature-settings: "palt"; white-space: nowrap; }
.sc-lead { font-size: clamp(16px, 1.45vw, 21px); color: var(--sub); line-height: 1.7; }
.sc-points { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-points li { padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); font-size: 13.5px; font-weight: 500; }
.sc-tag { font-size: 11.5px; color: var(--sub); letter-spacing: 0.08em; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); }
.sc-media { position: relative; z-index: 2; display: grid; place-items: center; }

/* 表紙 */
.sc-cover { position: relative; z-index: 2; display: grid; gap: 26px; align-content: center; }
.sc-cover__title { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(56px, 8.6vw, 150px); line-height: 1.08; letter-spacing: 0.01em; font-feature-settings: "palt"; }
.sc-cover__title .ph { display: inline-block; white-space: nowrap; }
.sc-cover__sub { font-size: clamp(16px, 1.4vw, 20px); color: var(--sub); max-width: 32em; }
.sc-index { display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--sub); }
.sc-index li { display: inline-flex; gap: 10px; }
.sc-index .mono { color: var(--accent); }
.sc-hint { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.32em; color: var(--sub); }
.sc-hint i { width: 64px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; animation: hint 2s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* WEB */
.sc-desk { width: 100%; border-radius: 12px; overflow: hidden; background: #e8ebf2; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.6); transform: perspective(1800px) rotateY(-12deg) rotateX(4deg); transform-origin: left center; }
.sc-desk__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #dfe3ec; }
.sc-desk__bar i { width: 9px; height: 9px; border-radius: 50%; background: #b9c0cf; }
.sc-desk__bar span { margin-left: 12px; font-size: 11px; color: #67708a; background: #fff; border-radius: 999px; padding: 2px 14px; }
.sc-phone { aspect-ratio: 390 / 844; border-radius: clamp(26px, 2.6vw, 40px); padding: clamp(7px, 0.6vw, 9px); background: #121316; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.6); }
.sc-phone__screen { width: 100%; height: 100%; border-radius: clamp(19px, 2vw, 32px); overflow: hidden; background: #fff; }
.sc-phone__screen img { width: 100%; }
.sc-phone--scroll img { animation: phone-scroll 16s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; }
.is-playing .sc-phone--scroll img { animation-play-state: running; }
.sc-media--web .sc-phone { position: absolute; right: -2%; bottom: -6%; width: clamp(140px, 13vw, 230px); }

/* MOVIE */
.sc-media--movie { grid-template-columns: auto auto auto; gap: clamp(12px, 1.6vw, 24px); align-items: center; }
.sc-strip { display: grid; gap: clamp(12px, 1.6vw, 24px); }
.sc-strip li { width: clamp(90px, 9vw, 150px); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.sc-strip img { width: 100%; height: 100%; object-fit: cover; }
.sc-strip--b { transform: translateY(12%); }
.sc-strip:not(.sc-strip--b) { transform: translateY(-10%); }
.sc-video { position: relative; height: min(70vh, 640px); aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: #000 url("../video/sept-pv-poster.jpg") center / cover; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.75); }
.sc-video video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sc-video:hover video { transform: scale(1.04); }
.sc-video__play { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: rgba(8, 18, 51, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 700; font-size: 14px; color: #fff; }
.sc-video__play small { margin-left: auto; font-family: var(--f-mono); font-weight: 400; color: #c6d0f0; }
.sc-video__play .icon { color: var(--accent); }

/* APP */
.sc-media--app { grid-template-columns: auto auto; gap: clamp(24px, 4vw, 64px); }
.sc-phone--big { width: auto; height: min(68vh, 600px); transform: rotate(-4deg); }
.sc-stats { display: grid; gap: 28px; }
.sc-stats li { display: grid; gap: 4px; }
.sc-stats b { font-family: var(--f-mono); font-weight: 300; font-size: clamp(64px, 7vw, 120px); line-height: 0.9; color: var(--accent); font-variant-numeric: tabular-nums; }
.sc-stats span { font-size: 13px; letter-spacing: 0.1em; color: var(--sub); }

/* DESIGN */
.sc-media--design { gap: 22px; }
.sc-board { margin: 0; width: 100%; padding: clamp(14px, 1.6vw, 22px); border-radius: 16px; background: #fff; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.3); transform: perspective(1600px) rotateY(-10deg) rotateX(4deg); transition: transform 1s var(--ease); }
.sc-panel--design:hover .sc-board { transform: perspective(1600px) rotateY(0) rotateX(0); }
.sc-board img { width: 100%; border-radius: 8px; }
.sc-board figcaption { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10.5px; color: #6d6560; letter-spacing: 0.18em; }
.sc-swatches { display: flex; flex-wrap: wrap; gap: 16px; justify-self: start; }
.sc-swatches li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sub); }
.sc-swatches li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* PHOTO */
.sc-photo { position: relative; margin: 0; width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.3); }
.sc-photo img { width: 100%; display: block; }
.sc-photo::before { content: ""; position: absolute; inset: 16px; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.6); pointer-events: none; }
.sc-photo__ui { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 3; display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; letter-spacing: 0.18em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.sc-photo__ui [data-shot] { color: #f3dca5; }

/* 進み具合 */
.showcase__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5; background: rgba(255, 255, 255, 0.12); display: none; }
.showcase__progress i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }

@media (min-width: 900px) {
  .showcase__pin { height: 100vh; overflow: hidden; position: relative; }
  .showcase__track { display: flex; height: 100%; width: max-content; }
  .sc-panel { flex: none; width: 100vw; height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5vw; align-items: center; padding: calc(var(--header-h) + 3vh) 6vw 8vh; }
  .sc-panel--cover { grid-template-columns: minmax(0, 1fr); }
  .sc-word { left: -1vw; bottom: -5vw; font-size: 25vw; }
  .sc-media { height: 100%; }
  .sc-media--web { place-items: center start; }
  .sc-media--web .sc-desk { width: 92%; }
  .showcase__progress { display: block; }
}
@media (max-width: 899px) {
  .sc-panel { display: grid; gap: 36px; padding: 96px var(--gutter) 88px; }
  .sc-word { right: -4vw; top: 40px; font-size: 34vw; }
  .sc-media--web { padding-bottom: 14%; }
  .sc-desk { transform: none; }
  .sc-media--web .sc-phone { width: 30vw; right: 0; bottom: 0; }
  .sc-media--movie { grid-template-columns: auto; }
  .sc-strip { display: none; }
  .sc-video { height: auto; width: min(68vw, 320px); }
  .sc-media--app { grid-template-columns: auto auto; justify-content: center; gap: 22px; }
  .sc-phone--big { height: 64vw; max-height: 460px; }
  .sc-stats b { font-size: 15vw; }
  .sc-board { transform: none; }
}

/* ------------------------------------------------------------ BUILD（舞台を大きく、注釈つき） */
@media (min-width: 900px) { .build__grid { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); } }
.callouts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.callout { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); margin: 0; display: flex; align-items: center; transform: translateY(-50%); }
.callout::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); flex: none; box-shadow: 0 0 0 4px rgba(10, 11, 12, 0.12); }
.callout span { position: relative; margin-left: 28px; background: var(--ink); color: var(--paper); font-size: clamp(10px, 0.95vw, 13.5px); font-weight: 700; letter-spacing: 0.04em; padding: 7px 12px; border-radius: 6px; white-space: nowrap; }
.callout span::before { content: ""; position: absolute; right: 100%; top: 50%; width: 24px; height: 1px; background: var(--ink); }
.callout--left { flex-direction: row-reverse; transform: translate(-100%, -50%); }
.callout--left span { margin-left: 0; margin-right: 28px; }
.callout--left span::before { right: auto; left: 100%; }
@media (max-width: 899px) { .callouts { display: none; } }

/* ------------------------------------------------------------ RANK（スクロールで12か月） */
.rank { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.rank__intro { display: grid; gap: 22px; max-width: 980px; margin-bottom: 24px; }
.rank__lead { color: var(--mute); font-size: clamp(15px, 1.3vw, 18px); max-width: 40em; }
.rank .try { background: #fff; }
.rank__pin { min-height: 100vh; display: grid; align-content: center; gap: 18px; padding-block: calc(var(--header-h) + 12px) 28px; }
.rank__stage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.rank__month { display: grid; gap: 4px; align-content: center; }
.rank__mlabel { font-size: 12px; letter-spacing: 0.32em; color: var(--gold); }
.rank__num { font-family: var(--f-mono); font-weight: 300; font-size: clamp(110px, 12.5vw, 220px); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rank__unit { font-family: var(--f-mincho); font-weight: 700; font-size: 22px; }
.rank__ticks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 260px; margin-top: 12px; }
.rank__ticks i { height: 4px; border-radius: 2px; background: var(--line-2); transition: background-color 0.3s; }
.rank__ticks i.is-on { background: var(--gold); }
.rank__pos { margin-top: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.rank__pos b { font-family: var(--f-mono); font-weight: 400; font-size: 44px; color: var(--gold); min-width: 1.2ch; text-align: right; }
.rank__serp { background: #fff; border-color: var(--line-2); box-shadow: 0 50px 100px -60px rgba(10, 11, 12, 0.35); }
.rank__serp .serp__bar { background: #f3f2ee; }
.rank__serp .serp__list li i { background: rgba(10, 11, 12, 0.1); }
.rank__serp .serp__list li i + i { background: rgba(10, 11, 12, 0.06); }
.rank__serp .serp__list li.is-you { background: rgba(203, 180, 136, 0.22); box-shadow: inset 0 0 0 1.5px #b0965e; }
.rank__serp .serp__list li.is-you b { color: #5a4920; }
.rank__serp .serp__list li.is-you i { background: rgba(122, 100, 51, 0.35); }
.rank__phases { position: relative; min-height: 280px; }
.phase { position: absolute; inset: 0; display: grid; gap: 10px; align-content: center; opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.phase.is-on { opacity: 1; transform: none; }
.phase__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #e3d1a8; }
.phase__icon .icon { width: 28px; height: 28px; }
.phase__label { font-size: 11.5px; letter-spacing: 0.24em; color: var(--gold); }
.phase h3 { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(32px, 3.2vw, 50px); line-height: 1.2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.phase h3 small { font-family: var(--f-gothic); font-size: 14px; font-weight: 700; color: var(--mute); }
.phase p { color: var(--mute); }
.rank__note { font-size: 12px; color: var(--mute-2); }
html:not(.js) .phase, .rank--static .phase { position: static; opacity: 1; transform: none; }
@media (max-width: 899px) {
  .rank__stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rank__month { grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 10px; }
  .rank__mlabel { grid-column: 1 / -1; }
  .rank__num { font-size: 72px; }
  .rank__ticks { grid-column: 1 / -1; max-width: none; margin-top: 4px; }
  .rank__pos { margin-top: 0; justify-self: end; }
  .rank__pos b { font-size: 30px; }
  .rank__serp { padding: 12px; gap: 10px; }
  .rank__serp .serp__list { height: calc(8 * 34px); }
  .rank__serp .serp__list li { top: calc(var(--pos, 0) * 34px); height: 30px; }
  .rank__serp .serp__ranks { height: calc(8 * 34px); }
  .rank__serp .serp__ranks li { height: 34px; }
  .rank__phases { min-height: 170px; }
  .phase__icon { display: none; }
  .phase h3 { font-size: 26px; }
  .phase p { font-size: 14px; }
}

/* ------------------------------------------------------------ WALL（作品の壁） */
.wall { background: var(--ink); padding-block: var(--section-y) calc(var(--section-y) * 0.5); overflow: hidden; }
.wall__head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
.wall__sub { color: var(--mute); }
.wall__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); padding-inline: var(--gutter); max-width: 1560px; margin-inline: auto; align-items: start; }
.wall__col { display: grid; gap: clamp(14px, 1.6vw, 24px); will-change: transform; }
.wall__col:nth-child(2) { margin-top: 12vh; }
.wall__col:nth-child(3) { margin-top: 4vh; }
.tile { position: relative; margin: 0; display: block; border-radius: 14px; overflow: hidden; background: #16171a; color: var(--text); text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease); }
.tile--wide { aspect-ratio: 16 / 10; }
.tile--tall { aspect-ratio: 9 / 14; }
.tile:hover img { transform: scale(1.05); }
.tile__cap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border-radius: 10px; background: rgba(10, 11, 12, 0.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tile__kind { width: 100%; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--gold); }
.tile__name { flex: 1; font-weight: 700; font-size: 14px; }
@media (max-width: 899px) {
  .wall__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__col:nth-child(3) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .wall__col:nth-child(3) .tile--wide:last-child { display: none; }
  .tile__cap { left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; gap: 2px 8px; }
  .tile__kind { display: none; }
  .tile__name { font-size: 11.5px; line-height: 1.4; }
  .tile .status { font-size: 0; gap: 0; }
  .tile .status::before { width: 8px; height: 8px; }
}

/* ------------------------------------------------------------ SERVICE（広がる3枚） */
.svc2 { padding-block: var(--section-y); }
.svc2__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 64px); }
.acc { display: flex; gap: 12px; height: min(70vh, 580px); }
.acc__item { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--tone); color: #f5f3ee; }
.acc__item.is-open { flex-grow: 4.2; }
.acc__head { position: absolute; z-index: 2; inset: 0 0 auto 0; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 28px; background: none; border: 0; color: inherit; cursor: pointer; }
.acc__num { font-size: 12px; letter-spacing: 0.3em; opacity: 0.75; }
.acc__verb { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(32px, 3.4vw, 58px); line-height: 1.12; white-space: nowrap; }
.acc__title { font-weight: 700; letter-spacing: 0.06em; font-size: 15px; opacity: 0.88; white-space: nowrap; }
.acc__body { position: absolute; z-index: 1; inset: auto 0 0 0; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px; align-items: end; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 0.5s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s; }
.acc__item.is-open .acc__body { opacity: 1; transform: none; pointer-events: auto; }
.acc__text { display: grid; gap: 16px; }
.acc__text p { font-size: 16px; color: rgba(245, 243, 238, 0.88); }
.acc .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acc .chips li { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); }
.acc__visual { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: rgba(255, 255, 255, 0.08); }
.acc__visual video, .acc__visual img { width: 100%; height: 100%; object-fit: cover; }
.svc2 .extras { margin-top: 26px; }
.svc2 .extras li { background: #fff; }
@media (max-width: 899px) {
  .acc { flex-direction: column; height: auto; }
  .acc__item, .acc__item.is-open { flex: none; }
  .acc__head { position: static; padding: 22px 22px 0; cursor: default; }
  .acc__body { position: static; grid-template-columns: minmax(0, 1fr); opacity: 1; transform: none; pointer-events: auto; padding: 16px 22px 22px; }
}

/* ------------------------------------------------------------ STUDIO（写真から地図へ） */
.studio2__hero { position: relative; height: min(100vh, 880px); min-height: 520px; overflow: hidden; display: grid; align-items: end; color: #fff; }
.studio2__bg { position: absolute; inset: -8% 0 0 0; width: 100%; height: 116%; object-fit: cover; }
.studio2__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 12, 0) 35%, rgba(10, 11, 12, 0.7) 100%); }
.studio2__copy { position: relative; z-index: 1; padding-bottom: clamp(48px, 7vw, 100px); display: grid; gap: 18px; }
.studio2__copy .kicker { color: #e3d1a8; }
.studio2__lead { color: #f0eee8; max-width: 34em; font-size: clamp(15px, 1.3vw, 18px); }
.studio2__body { padding-block: clamp(72px, 9vw, 140px); }
.studio2__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.studio2__photos { display: grid; gap: 16px; }
.studio2__photos .ph-card--desk { aspect-ratio: 16 / 10; }
.studio2__photos .ph-card--office { aspect-ratio: 16 / 9; width: 82%; justify-self: end; }
.studio2 .ph-card { grid-column: auto; grid-row: auto; margin: 0; }
.studio2 .ph-card img { transform: none; }
.theme-light .shiga-map .land { fill: rgba(10, 11, 12, 0.24); }
.theme-light .shiga-map .lake { fill: rgba(176, 150, 98, 0.42); }
.theme-light .shiga-map__pin .core { stroke: #fff; }
.theme-light .studio__address { background: #fff; }
.studio2 .coach { margin-top: clamp(48px, 6vw, 88px); }
.theme-light .coach p:last-child { color: var(--mute); }
@media (max-width: 899px) {
  .studio2__grid { grid-template-columns: minmax(0, 1fr); }
  .studio2__photos .ph-card--office { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .sc-hint i { animation: none; } }

/* 表紙：この先の5つの世界を予告するカードの束 */
.sc-deck { position: relative; z-index: 1; display: none; }
.sc-deck__card { position: absolute; left: 50%; top: 50%; width: clamp(220px, 22vw, 360px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--c); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%) translate(calc(var(--i) * 34px), calc(var(--i) * -22px)) rotate(calc(var(--i) * 4deg - 6deg)); transition: transform 0.9s var(--ease); }
.sc-deck__card img { position: absolute; inset: 14% 10% 16%; width: 80%; height: 70%; object-fit: cover; object-position: center top; border-radius: 8px; }
.sc-deck__card span { position: absolute; left: 10%; bottom: 6%; font-size: 11px; letter-spacing: 0.24em; color: color-mix(in srgb, var(--c) 30%, #ffffff); mix-blend-mode: difference; }
.sc-panel--cover:hover .sc-deck__card { transform: translate(-50%, -50%) translate(calc(var(--i) * 58px - 110px), calc(var(--i) * -10px)) rotate(calc(var(--i) * 6deg - 12deg)); }
@media (min-width: 900px) {
  .sc-panel--cover { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .sc-deck { display: block; height: 70%; }
}
.studio2__bg { object-position: center 55%; }
@media (min-width: 900px) {
  .rank__stage { grid-template-columns: minmax(0, 2.6fr) minmax(0, 5.6fr) minmax(0, 3.8fr); }
  .rank__serp { padding: 26px; }
  .rank__serp .serp__bar { padding: 14px 22px; font-size: 17px; }
  .rank__serp .serp__list { height: calc(8 * 56px); }
  .rank__serp .serp__list li { top: calc(var(--pos, 0) * 56px); height: 48px; }
  .rank__serp .serp__ranks { height: calc(8 * 56px); }
  .rank__serp .serp__ranks li { height: 56px; font-size: 13px; }
  .rank__serp .serp__list li.is-you b { font-size: 15px; }
}

.sc-word::before { content: attr(data-word); }

/* ================================================================ 第2版（講評1回目の手直し） */

/* 文の折り返し：語の途中で切らない */
p, li, figcaption, dd, .tile__name { text-wrap: pretty; word-break: keep-all; }
.req { white-space: nowrap; }

/* ヒーロー：1行ずつの塊で折り返す */
.hero__title { font-size: clamp(46px, 6vw, 92px); }
.hero__copy { max-width: 760px; }
.hero__display .hl { display: block; white-space: nowrap; }

/* 明るい面では、左下の表示を消す */
.hud { transition: opacity 0.4s var(--ease); }
.hud.is-light { opacity: 0; }

/* 夜明けの帯をやめ、窓が開くだけにする */
.reel::before { display: none; }
.reel { padding-top: var(--section-y); }

/* 大きな数字は明朝で */
.rank__num, .rank__pos b, .sc-stats b, .coach__big b, .step3__visual--talk b {
  font-family: var(--f-mincho); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- 作品の色の世界 */
.sc-word { color: color-mix(in srgb, var(--fg) 6%, transparent); -webkit-text-stroke: 0; }
@media (min-width: 900px) {
  .sc-panel--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sc-panel--flip .sc-text { order: 2; }
  .sc-panel--flip .sc-media { order: 1; }
  .sc-panel--flip .sc-word { left: auto; right: -1vw; }
  .sc-panel--bleed { padding-right: 0; }
  .sc-panel--bleed .sc-media { place-items: center end; }
  .sc-panel--bleed .sc-board { transform: none; border-radius: 18px 0 0 18px; padding: 0; background: none; width: 100%; box-shadow: -40px 60px 120px -60px rgba(0, 0, 0, 0.35); }
  .sc-panel--bleed .sc-board img { border-radius: 18px 0 0 18px; }
  .sc-panel--bleed .sc-board figcaption { padding-right: 6vw; }
  .sc-panel--bleed:hover .sc-board { transform: none; }
  .sc-panel--bleed .sc-swatches { padding-right: 6vw; justify-self: start; }
  .sc-panel--photo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* 撮影：撮ったまま ⇄ 仕上げ */
.sc-media--photo { gap: 18px; justify-items: center; align-content: center; }
.ba { position: relative; margin: 0; height: min(70vh, 660px); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #e9e5dc; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.35); touch-action: pan-y; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; z-index: 2; }
.ba__handle i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.ba__handle i::before, .ba__handle i::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border: solid #141210; border-width: 0 0 2px 2px; }
.ba__handle i::before { left: 13px; transform: translateY(-50%) rotate(45deg); }
.ba__handle i::after { right: 13px; transform: translateY(-50%) rotate(-135deg); }
.ba__tag { position: absolute; top: 16px; z-index: 2; font-size: 11px; letter-spacing: 0.16em; padding: 6px 12px; border-radius: 999px; background: rgba(10, 11, 12, 0.66); color: #fff; pointer-events: none; }
.ba__tag--l { left: 16px; }
.ba__tag--r { right: 16px; background: #fff; color: #141210; }
.ba__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:has(.ba__range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.ba__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 12px; letter-spacing: 0.08em; color: var(--sub); }
.ba__notes li { display: inline-flex; align-items: center; gap: 8px; }
.ba__notes li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 899px) { .ba { height: auto; width: min(86vw, 420px); } }

/* ---------------------------------------------------------------- 順位：本物らしい検索結果 */
.rank__pos small { font-family: var(--f-gothic); font-size: 11px; font-weight: 700; color: var(--mute); border: 1px solid var(--line-2); padding: 1px 8px; border-radius: 999px; margin-left: 6px; align-self: center; }
.rank__serp .serp__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-content: center; background: none; }
.serp__fav { grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 50%; background: #e6e3db; box-shadow: inset 0 0 0 1px rgba(10, 11, 12, 0.08); }
.serp__t { font-size: 14px; font-weight: 600; color: #1f3a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.serp__u { font-family: var(--f-mono); font-size: 11px; color: #6b6e73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rank__serp .serp__list li.is-you { grid-template-columns: 20px minmax(0, 1fr); }
.rank__serp .serp__list li.is-you .serp__fav { background: #0a0b0c; box-shadow: 0 0 0 3px rgba(176, 150, 98, 0.45); }
.rank__serp .serp__list li.is-you b { color: #1f3a8a; font-size: 15px; }
.rank__serp .serp__list li.is-you .serp__u { color: #5a4920; }
.serp__ai { display: grid; gap: 8px; padding: 12px 16px; border-radius: 12px; background: #f6f4ee; border: 1px solid var(--line); }
.serp__ai-k { font-size: 11px; letter-spacing: 0.18em; color: #6f5b2d; }
.serp__ai p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.serp__ai p i { height: 8px; border-radius: 8px; background: rgba(10, 11, 12, 0.1); width: 36%; }
.serp__ai p i + i { width: 22%; background: rgba(10, 11, 12, 0.07); }
.serp__ai-you { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; font-weight: 700; color: #3f4144; padding: 4px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #b0965e; opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.serp__ai-you b { color: #5a4920; }
.serp__ai.is-in .serp__ai-you { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .serp__u { display: none; }
  .rank__serp .serp__list li { grid-template-rows: auto; padding: 0 8px; column-gap: 8px; }
  .serp__fav { grid-row: auto; width: 14px; height: 14px; }
  .serp__t { font-size: 12.5px; }
  .rank__serp .serp__list li.is-you b { font-size: 13px; }
  .serp__ai { padding: 10px 12px; }
}

/* ---------------------------------------------------------------- 作品の壁：説明は写真の下に */
.tile { overflow: visible; background: none; border-radius: 0; display: grid; gap: 12px; }
.tile__media { display: block; border-radius: 14px; overflow: hidden; background: #16171a; }
.tile__media--wide { aspect-ratio: 16 / 10; }
.tile__media--tall { aspect-ratio: 9 / 14; }
.tile__cap { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 2px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tile__name { flex: none; font-size: 14px; font-weight: 700; }
.tile__kind { width: auto; font-family: var(--f-gothic); font-size: 12.5px; letter-spacing: 0.04em; color: var(--mute); }
.tile .status { margin-left: auto; }
a.tile:focus-visible { outline: none; }
a.tile:focus-visible .tile__media { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 899px) {
  .wall__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__col { display: contents; }
  .tile:has(.tile__media--wide) { grid-column: 1 / -1; }
  .tile__cap { padding: 0; gap: 2px 10px; }
  .tile__kind { display: inline; font-size: 11.5px; }
  .tile__name { font-size: 13px; }
  .tile .status { font-size: 11px; gap: 6px; }
}

/* ---------------------------------------------------------------- サービス：写真で埋まる3枚 */
@media (min-width: 900px) { .acc { height: min(76vh, 640px); } }
.acc__visual { position: absolute; inset: 0; z-index: 0; border-radius: 0; aspect-ratio: auto; background: none; opacity: 0.3; clip-path: inset(0 0 0 0); transition: opacity 0.7s var(--ease), clip-path 0.9s var(--ease); }
.acc__item.is-open .acc__visual { opacity: 1; clip-path: inset(0 0 0 46%); }
.acc__head, .acc__body { z-index: 2; }
.acc__visual--report { display: grid; place-items: center; padding: 8% 6% 8% calc(46% + 4%); }
.acc__item:not(.is-open) .acc__visual--report { opacity: 0; }
@media (min-width: 900px) {
  .acc__body { right: 54%; grid-template-columns: minmax(0, 1fr); }
  .acc__item:not(.is-open) .acc__head { writing-mode: vertical-rl; inset: 0 auto 0 0; height: 100%; padding: 30px 24px; gap: 10px; align-content: start; }
  .acc__item:not(.is-open) .acc__num { text-combine-upright: all; }
  .acc__item:not(.is-open) .acc__verb { font-size: clamp(30px, 2.6vw, 44px); }
}
@media (max-width: 899px) {
  .acc__visual { position: relative; inset: auto; opacity: 1; clip-path: none; aspect-ratio: 16 / 10; margin: 16px 22px 0; border-radius: 14px; overflow: hidden; }
  .acc__item.is-open .acc__visual { clip-path: none; }
  .acc__visual--report { padding: 6%; background: rgba(255, 255, 255, 0.06); }
  .acc__item:not(.is-open) .acc__visual--report { opacity: 1; }
}

/* 毎月の報告（文字だけの小さな紙） */
.report { width: 100%; max-width: 360px; padding: 18px 20px; border-radius: 12px; background: #fbfaf7; color: #0a0b0c; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); display: grid; gap: 12px; }
.report__head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.2em; color: #6f5b2d; padding-bottom: 10px; border-bottom: 1px solid rgba(10, 11, 12, 0.12); }
.report ul { display: grid; gap: 10px; }
.report li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.report li i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(10, 11, 12, 0.3); transition: background-color 0.3s, border-color 0.3s; }
.report li i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.35s var(--ease); }
.report.is-in li i { background: #0a0b0c; border-color: #0a0b0c; }
.report.is-in li i::after { transform: rotate(45deg) scale(1); }
.report.is-in li:nth-child(2) i, .report.is-in li:nth-child(2) i::after { transition-delay: 0.25s; }
.report.is-in li:nth-child(3) i, .report.is-in li:nth-child(3) i::after { transition-delay: 0.5s; }
.report.is-in li:nth-child(4) i, .report.is-in li:nth-child(4) i::after { transition-delay: 0.75s; }

/* ---------------------------------------------------------------- 価値の一行：独立した1画面 */
.value-screen { min-height: 100vh; display: grid; align-items: center; background: var(--black); text-align: center; padding-block: var(--section-y); }
.value-screen__inner { display: grid; justify-items: center; gap: 30px; }
.value-screen__line { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(34px, 6.2vw, 96px); line-height: 1.28; letter-spacing: 0.01em; font-feature-settings: "palt"; display: grid; }
.value-screen__line .ph { display: block; white-space: nowrap; }
.value-screen__line .ph:last-child { color: var(--gold); }
.value-screen__sub { max-width: 40em; color: var(--mute); font-size: clamp(15px, 1.3vw, 18px); }

/* ---------------------------------------------------------------- スタジオ */
.studio2__bg { filter: saturate(0.85) contrast(1.05); }
.studio2__hero::after { background: linear-gradient(180deg, rgba(10, 11, 12, 0.1) 0%, rgba(10, 11, 12, 0) 30%, rgba(10, 11, 12, 0.78) 100%); }
.coach__label { font-family: var(--f-gothic); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); margin-right: 14px; align-self: center; }

/* ---------------------------------------------------------------- 進め方：4枚を横一列 */
.steps3 { padding-block: var(--section-y); }
.steps3__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 64px); }
.steps3__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.step3 { display: grid; align-content: start; gap: 8px; }
.step3__visual { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); margin-bottom: 12px; }
.step3__no { font-size: 12px; letter-spacing: 0.3em; color: var(--gold); }
.step3 h3 { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.2; }
.step3 p:last-child { color: var(--mute); font-size: 14.5px; }
.step3__visual--talk { display: grid; place-content: center; justify-items: center; gap: 12px; }
.step3__visual--talk b { font-size: clamp(56px, 5.4vw, 88px); line-height: 1; }
.step3__visual--talk b small { font-family: var(--f-gothic); font-size: 0.28em; font-weight: 700; margin-left: 6px; }
.step3__chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); }
.step3__chip .icon { color: var(--gold); }
.step3__visual--sketch i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); border: 1.5px dashed rgba(122, 100, 51, 0.6); border-radius: 6px; }
.step3__visual span.mono { position: absolute; right: 12px; bottom: 10px; font-size: 11px; letter-spacing: 0.22em; color: var(--mute); }
.step3__visual--build { display: grid; place-items: center; padding: 9%; background: #dcebe8; }
.step3__browser { width: 100%; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 24px 40px -24px rgba(10, 11, 12, 0.5); }
.step3__browser > span { display: flex; gap: 5px; padding: 7px 9px; background: #eceae4; }
.step3__browser > span i { width: 7px; height: 7px; border-radius: 50%; background: #c4c1b8; }
.step3__browser img { width: 100%; }
.step3__visual--months { display: grid; place-items: center; padding: 10% 10% 16%; background: #0a0b0c; border-color: transparent; }
.step3__visual--months span.mono { color: #a3a5a9; }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; }
.months li { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-family: var(--f-mincho); font-weight: 700; font-size: 15px; color: #a3a5a9; background: rgba(255, 255, 255, 0.06); transition: background-color 0.4s, color 0.4s; }
.months li.is-on { background: #cbb488; color: #0a0b0c; }
@media (max-width: 899px) {
  .steps3__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .step3 { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .step3__visual { grid-row: 1 / span 3; margin: 0; aspect-ratio: 1; }
  .step3 h3 { font-size: 26px; }
  .step3 p:last-child { font-size: 13.5px; }
  .step3__visual--talk b { font-size: 44px; }
  .step3__chip { display: none; }
  .months { gap: 4px; }
  .months li { font-size: 11px; border-radius: 5px; }
}

/* ---------------------------------------------------------------- 最後：ぼけたショーリールに、ピントが合う */
.finale { background: var(--black); }
.finale__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.finale__bg video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: blur(16px) brightness(0.4); }
.finale__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--black) 0%, rgba(10, 11, 12, 0.25) 28%, rgba(10, 11, 12, 0.25) 72%, var(--black) 100%); }

/* 設計図：スマホでは最初から骨組みを見せ、色見本は重ねない */
@media (max-width: 899px) {
  .swatches { position: relative; z-index: 2; flex-wrap: nowrap; gap: 8px; }
  .swatches li { font-size: 11px; gap: 5px; }
  .swatches li::before { width: 16px; height: 16px; }
  .build__phone { z-index: 1; bottom: 52px; }
}
@media (prefers-reduced-motion: reduce) { .acc__visual, .serp__ai-you, .report li i, .report li i::after { transition: none; } }

/* ヒーロー：大きな画面でも、ロゴと見出しの左端をそろえる */
.hero { padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.hero__hud { left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }

/* ================================================================ 第3版（講評2回目の手直し） */

/* サービス：広がる途中で文字が崩れないよう、本文は完成時の幅で固定し、広がり終えてから出す */
@media (min-width: 900px) {
  .acc__body { right: auto; width: min(30vw, 420px); }
  .acc__item.is-open .acc__body { transition-delay: 0.55s; }
  .acc__item:not(.is-open) .acc__body { transition-duration: 0.2s; transition-delay: 0s; }
}

/* ヘッダー：明るい面では淡い背景に黒い文字 */
.site-header.is-light[data-scrolled="true"] { background: rgba(251, 250, 247, 0.84); border-bottom-color: rgba(10, 11, 12, 0.08); }
.site-header.is-light .brand { color: #0a0b0c; }
@media (min-width: 900px) { .site-header.is-light .nav__list a:not(.btn) { color: #0a0b0c; } }
@media (max-width: 899px) {
  .site-header.is-light .nav__toggle { color: #0a0b0c; border-color: rgba(10, 11, 12, 0.24); }
  .site-header.is-light:has(.nav.is-open) { background: transparent; }
  .site-header.is-light:has(.nav.is-open) .brand, .site-header.is-light:has(.nav.is-open) .nav__toggle { color: var(--text); border-color: var(--line-2); }
}

/* ヒーロー：見出しの背後を少し暗く、境目はなだらかに */
.hero::before { background: linear-gradient(90deg, rgba(10, 11, 12, 0.94) 0%, rgba(10, 11, 12, 0.8) 34%, rgba(10, 11, 12, 0) 64%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 0; pointer-events: none; background: linear-gradient(rgba(10, 11, 12, 0), var(--black)); }
@media (max-width: 899px) { .scroll-cue { display: none; } }

/* 夜の場面：スマホでは映像を大きく */
@media (max-width: 899px) {
  .cine__screen { aspect-ratio: 1 / 1; background-position: 34% center; }
  .cine__video { height: 100%; object-fit: cover; object-position: 34% center; }
}

/* 小さな番号：0が斜線に見えないよう、ゴシックの数字に */
.sc-no, .step3__no, .acc__num { font-family: var(--f-gothic); font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-tag { font-size: 13px; }
@media (max-width: 899px) { .tile .status { font-size: 12px; } }

/* 順位：低い画面では行を詰める／スマホでは説明文を省いて画面内に収める */
@media (min-width: 900px) and (max-height: 820px) {
  .rank__serp { padding: 18px; gap: 12px; }
  .rank__serp .serp__list, .rank__serp .serp__ranks { height: calc(8 * 44px); }
  .rank__serp .serp__list li { top: calc(var(--pos, 0) * 44px); height: 40px; }
  .rank__serp .serp__ranks li { height: 44px; }
  .serp__ai { padding: 8px 14px; gap: 4px; }
  .rank__num { font-size: clamp(90px, 10vw, 160px); }
}
@media (max-width: 899px) {
  .rank__pos { grid-column: 1 / -1; justify-self: start; }
  .phase p { display: none; }
  .rank__phases { min-height: 84px; }
}

/* 作品の壁：右下に「次は、あなたの会社」 */
.tile__media--next { aspect-ratio: 1 / 1; display: grid; align-content: space-between; padding: clamp(22px, 2.4vw, 34px); background: #16130d; border: 1px solid rgba(203, 180, 136, 0.35); transition: background-color 0.5s var(--ease), border-color 0.5s; }
.tile__next-k { font-size: 11px; letter-spacing: 0.3em; color: var(--gold); }
.tile__next-t { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.3; color: var(--text); font-feature-settings: "palt"; }
.tile__next-a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--gold); }
.tile--next:hover .tile__media--next { background: #1f1a10; border-color: var(--gold); }
@media (max-width: 899px) { .tile--next { grid-column: 1 / -1; } .tile__media--next { aspect-ratio: 16 / 8; } }

/* 価値の画面：上下の余白を詰める */
.value-screen { min-height: 86vh; padding-block: calc(var(--section-y) * 0.7); }

/* スタジオ：明るい扉の写真。文字は左、扉は右 */
.studio2--bright .studio2__hero { background: #e8e8e6; color: #0a0b0c; align-items: center; }
.studio2--bright .studio2__hero::after { display: none; }
.studio2--bright .studio2__bg { inset: 0 0 0 auto; margin-block: auto; width: 60%; height: auto; aspect-ratio: 16 / 10; filter: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.studio2--bright .studio2__copy { padding-bottom: 0; max-width: 1320px; }
.studio2--bright .studio2__copy > * { max-width: 26em; }
.studio2--bright .studio2__copy .kicker { color: #7a6433; }
.studio2--bright .studio2__lead { color: #3f4144; }
@media (max-width: 899px) {
  .studio2--bright .studio2__hero { align-items: end; height: auto; min-height: 0; padding-top: 80vw; }
  .studio2--bright .studio2__bg { inset: 0 0 auto 0; margin: 0; width: 100%; height: auto; aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .studio2--bright .studio2__copy { padding-bottom: 56px; }
}

/* 進め方：小さな文字と図が重ならないように */
.step3__visual--months { padding: 8% 8% 16%; }
@media (max-width: 899px) { .step3__visual--sketch span.mono, .step3__visual--months span.mono { display: none; } .step3__visual--months { padding: 10%; } }

/* サービス1：Webサイトだと分かるよう、ブラウザの枠に入れる */
.acc__visual--browser { display: grid; place-items: center; padding: 7% 6% 7% calc(46% + 5%); }
.acc__browser { width: 100%; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.acc__browser > span { display: flex; gap: 6px; padding: 9px 12px; background: #e9e7e1; }
.acc__browser > span i { width: 8px; height: 8px; border-radius: 50%; background: #c4c1b8; }
.acc__browser img { width: 100%; height: auto; display: block; }
.acc__item:not(.is-open) .acc__visual--browser { opacity: 0.22; padding: 30% 8%; }
@media (max-width: 899px) { .acc__visual--browser { padding: 7%; background: rgba(255, 255, 255, 0.06); } .acc__item:not(.is-open) .acc__visual--browser { opacity: 1; padding: 7%; } }
.studio2--bright .studio2__copy h2 .ph { display: block; }
@media (min-width: 900px) { .studio2--bright .studio2__bg { width: 56%; } }
.hero::before { background: linear-gradient(90deg, rgba(10, 11, 12, 0.94) 0%, rgba(10, 11, 12, 0.86) 42%, rgba(10, 11, 12, 0) 72%); }

/* ================================================================ 第4版（講評3回目の手直し） */
/* サービス1：小さなサイトの画面（ナビ・写真・見出し・カード） */
.mini { display: grid; gap: 8px; padding: 10px 12px 12px; background: #fbfaf7; }
.mini__nav { display: flex; align-items: center; gap: 8px; }
.mini__nav b { width: 18%; height: 8px; border-radius: 4px; background: #0a0b0c; }
.mini__nav i { width: 8%; height: 5px; border-radius: 3px; background: rgba(10, 11, 12, 0.22); }
.mini__nav i:first-of-type { margin-left: auto; }
.mini__nav em { width: 12%; height: 12px; border-radius: 999px; background: #0b1f4d; }
.mini__hero { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 7; }
.mini__hero img { width: 100%; height: 100%; object-fit: cover; }
.mini__hero p { position: absolute; left: 6%; bottom: 14%; display: grid; gap: 6px; width: 44%; }
.mini__hero p i { height: 9px; border-radius: 4px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.mini__hero p i + i { width: 70%; }
.mini__hero p em { width: 38%; height: 14px; border-radius: 999px; background: #0b1f4d; }
.mini__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini__cards i { aspect-ratio: 4 / 3; border-radius: 5px; background: #ecebe6; box-shadow: inset 0 0 0 1px rgba(10, 11, 12, 0.06); }
.mini__cards i:nth-child(2) { background: #dcebe8; }
.mini__cards i:nth-child(3) { background: #efe9e1; }
@media (max-width: 899px) { .acc__visual--browser { aspect-ratio: auto; } }

/* 最後：ピントが合っても、文字の背後は暗い幕で守る */
.finale__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 46% 40% at 50% 58%, rgba(10, 11, 12, 0.72), rgba(10, 11, 12, 0) 100%); }

/* スマホ：レンズの距離表示が見出しに重ならないように／報告の紙を切らない */
@media (max-width: 899px) {
  .lens__read { display: none; }
  .acc__visual--report { aspect-ratio: auto; }
  .report { padding: 14px 16px; }
}
.serp__ai-you { gap: 0; }

/* ================================================================ 第5版：代表あいさつ・SEPT・これまでの仕事 */

/* 代表あいさつ */
.profile { padding-block: var(--section-y); }
.profile__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.profile__photo { margin: 0; display: grid; gap: 14px; }
.profile__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.profile__photo figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.profile__photo figcaption .mono { font-size: 11px; font-weight: 400; letter-spacing: 0.3em; color: var(--gold); }
.profile__body { display: grid; gap: 24px; }
.profile__lead { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.4; letter-spacing: 0.01em; font-feature-settings: "palt"; }
.profile__text { display: grid; gap: 14px; max-width: 36em; color: var(--mute); font-size: clamp(15px, 1.15vw, 17px); line-height: 2; }
.profile__sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 13px; color: var(--mute); }
.profile__sign b { font-family: var(--f-mincho); font-weight: 700; font-size: 28px; letter-spacing: 0.14em; color: var(--text); }
@media (min-width: 900px) { .profile__lead .ph { white-space: nowrap; } }
@media (max-width: 899px) { .profile__grid { grid-template-columns: minmax(0, 1fr); } .profile__photo { max-width: 300px; } }

/* SEPT */
.sept { position: relative; overflow: hidden; background: #071e48; color: #f3f5fb; padding-block: var(--section-y); }
.sept__bg { position: absolute; inset: 0; z-index: 0; }
.sept__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.sept__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 30, 72, 0.94) 0%, rgba(7, 30, 72, 0.76) 46%, rgba(7, 30, 72, 0.5) 100%); }
.sept__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.sept__text { display: grid; gap: 18px; justify-items: start; }
.sept .kicker { color: #f3c4cf; }
.sept__p { color: #ccd4ea; max-width: 34em; }
.sept__stats { display: flex; gap: 40px; margin-top: 6px; }
.sept__stats li { display: grid; gap: 6px; }
.sept__stats b { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(40px, 4vw, 64px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sept__stats span { font-size: 13px; letter-spacing: 0.06em; color: #b9c3dc; }
.btn--sept { --btn-bg: #ad2349; --btn-fg: #ffffff; --btn-bd: #ad2349; margin-top: 8px; }
.btn--sept:hover { --btn-bg: #c42a55; --btn-fg: #ffffff; --btn-bd: #c42a55; }
.sept__video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0b1f4d url("../video/sept-days-poster.jpg") center / cover; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.7); }
.sept__video video { width: 100%; height: 100%; object-fit: cover; }
.sept__tag { position: absolute; left: 16px; top: 14px; font-size: 11px; letter-spacing: 0.26em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.sept__goods-k { margin-top: 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #e3e8f5; }
.sept__goods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sept__good { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in; }
.sept__good img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.sept__good:hover img { transform: scale(1.06); }
.sept__good span { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(7, 30, 72, 0.84); color: #fff; }
.sept__good:focus-visible { outline: 2px solid #f3c4cf; outline-offset: 3px; }
@media (max-width: 899px) { .sept__grid { grid-template-columns: minmax(0, 1fr); } .sept__goods { gap: 8px; } .sept__stats { gap: 28px; } }

/* これまでの仕事：流れる作品の帯 */
.archive { background: var(--ink); padding-block: var(--section-y) calc(var(--section-y) * 0.8); overflow: hidden; }
.archive__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.archive__count { display: grid; gap: 6px; }
.archive__count b { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(80px, 10vw, 168px); line-height: 0.9; letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.archive__count span { font-size: 12px; letter-spacing: 0.32em; color: var(--mute); }
.archive__sub { margin-top: 14px; max-width: 36em; color: var(--mute); }
.archive__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.archive__item { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #16171a; cursor: zoom-in; }
.archive__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.archive__item:hover img { transform: scale(1.08); }
.archive__no { position: absolute; left: 6px; bottom: 5px; font-size: 11px; letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 0.3s; }
.archive__item:hover .archive__no, .archive__item:focus-visible .archive__no { opacity: 1; }
.archive__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 1099px) { .archive__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 899px) { .archive__head { grid-template-columns: minmax(0, 1fr); align-items: start; } .archive__count b { font-size: 72px; } .archive__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .archive__item { border-radius: 4px; } }

/* 作品の拡大 */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 11, 12, 0.95); color: #fff; }
.lightbox::backdrop { background: rgba(5, 5, 6, 0.6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 14px; }
.lightbox__fig img { width: auto; height: auto; max-width: min(90vw, 1400px); max-height: 78dvh; border-radius: 8px; background: #16171a; }
.lightbox__count { font-size: 12px; letter-spacing: 0.2em; color: #a3a5a9; }
.lightbox__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(10, 11, 12, 0.5); color: #fff; font-size: 20px; cursor: pointer; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__close { position: absolute; top: 18px; right: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(10, 11, 12, 0.5); color: #fff; font-weight: 700; cursor: pointer; }
.lightbox__nav:hover, .lightbox__close:hover { border-color: var(--gold); }
@media (max-width: 899px) { .lightbox__nav { top: auto; bottom: 22px; margin-top: 0; } .lightbox__nav--prev { left: calc(50% - 66px); } .lightbox__nav--next { right: calc(50% - 66px); } }
.sept .display-2 { font-size: clamp(34px, 3.9vw, 62px); }
.sept__good span { white-space: nowrap; }
@media (max-width: 899px) {
  .profile__lead { font-size: clamp(21px, 5.9vw, 28px); }
  .profile__lead .ph { display: block; white-space: nowrap; }
}
.archive__rows { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ================================================================ 第6版：流れの組み直し（スマホ縦が基準） */

/* 全体：上下の余白と見出しを控えめに */
:root { --section-y: clamp(64px, 9vw, 128px); }
.display-2 { font-size: clamp(28px, 4vw, 56px); line-height: 1.3; }
.hud, .band { display: none; }

/* なぜ、vivittoなのか */
.why { padding-block: var(--section-y); overflow: hidden; }
.why__inner { display: grid; gap: 22px; justify-items: start; }
.why__title { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(28px, 4.2vw, 60px); line-height: 1.35; font-feature-settings: "palt"; }
.why__title .ph { display: inline-block; }
.why__beat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; font-family: var(--f-mincho); font-weight: 700; }
.why__beat span { font-size: clamp(22px, 2.8vw, 40px); }
.why__beat span:first-child { font-size: clamp(16px, 1.5vw, 22px); color: var(--mute); }
.why__beat span:not(:first-child) { color: #7a6433; }
.why__lead { max-width: 38em; color: var(--mute); font-size: clamp(15px, 1.2vw, 17px); }
.why__reel { width: min(1180px, calc(100% - var(--gutter) * 2)); margin: clamp(32px, 4vw, 56px) auto 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #e6e3db url("../video/reel-poster.jpg") center / cover; box-shadow: 0 50px 100px -60px rgba(10, 11, 12, 0.45); }
.why__reel video { width: 100%; height: 100%; object-fit: cover; }

/* できること */
.sc-head { padding-block: var(--section-y) clamp(28px, 4vw, 48px); color: var(--text); }
.sc-no { font-family: var(--f-gothic); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--accent); }
.sc-title { font-size: clamp(30px, 3.6vw, 56px); }
.sc-lead { font-size: clamp(15px, 1.25vw, 18px); }
.sc-tag { font-size: 13px; color: var(--sub); padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); }
.sc-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.sc-mosaic figure { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #fff; }
.sc-mosaic__main { grid-column: 1 / -1; aspect-ratio: 2 / 1 !important; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.4); }
.sc-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.sc-mosaic figure:hover img { transform: scale(1.05); }
@media (max-width: 899px) {
  .sc-panel { gap: 24px; padding: 56px var(--gutter) 56px; }
  .sc-media--web { padding-bottom: 10%; }
}

/* つくって、育てる */
.grow { padding-block: var(--section-y); }
.grow__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.grow__lead { max-width: 36em; color: var(--mute); }
.grow__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.gcard { display: grid; align-content: start; gap: 8px; }
.gcard__media { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; display: grid; place-items: center; margin-bottom: 10px; }
.gcard__media--make { background: #0b1f4d; }
.gcard__media--reach { background: #e9e6dd; }
.gcard__media--grow { background: #173f3b; }
.gcard__no { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: #7a6433; }
.gcard h3 { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; }
.gcard > p:last-child { color: var(--mute); font-size: 14.5px; }
.grow .try { margin: clamp(24px, 3vw, 36px) 0 10px; background: #fff; }
.grow__note { font-size: 12px; color: var(--mute-2); }
@media (max-width: 899px) {
  .grow__cards { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gcard__media { aspect-ratio: 4 / 3.4; }
}

/* つくる：骨組み → 色と写真 → 公開、をくり返す */
.bl { position: relative; width: 58%; aspect-ratio: 9 / 17; border-radius: 26px; padding: 8px; background: #121316; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.bl__screen { height: 100%; border-radius: 19px; overflow: hidden; background: #fbfaf7; display: grid; align-content: start; gap: 8px; padding: 10px; }
.bl__screen * { --dur: 6s; }
.bl__nav { display: flex; align-items: center; gap: 6px; }
.bl__nav b { width: 30%; height: 7px; border-radius: 4px; background: #0a0b0c; }
.bl__nav i { width: 9%; height: 4px; border-radius: 2px; background: rgba(10, 11, 12, 0.22); }
.bl__nav i:first-of-type { margin-left: auto; }
.bl__nav em { width: 14%; height: 10px; border-radius: 999px; background: #0b1f4d; }
.bl__hero { position: relative; aspect-ratio: 4 / 4.2; border-radius: 8px; overflow: hidden; background: #e6e3db; }
.bl__hero img { width: 100%; height: 100%; object-fit: cover; }
.bl__hero p { position: absolute; left: 8%; bottom: 10%; display: grid; gap: 5px; width: 64%; }
.bl__hero p i { height: 8px; border-radius: 4px; background: #fff; }
.bl__hero p i + i { width: 70%; }
.bl__hero p em { width: 46%; height: 13px; border-radius: 999px; background: #0b1f4d; }
.bl__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bl__cards i { aspect-ratio: 4 / 3; border-radius: 6px; background: #dcebe8; }
.bl__cards i + i { background: #efe9e1; }
.bl__text { display: grid; gap: 5px; }
.bl__text i { height: 5px; border-radius: 3px; background: rgba(10, 11, 12, 0.14); }
.bl__text i:last-child { width: 60%; }
.bl__done { position: absolute; right: -14%; top: 12%; padding: 6px 14px; border-radius: 999px; background: #cbb488; color: #0a0b0c; font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); opacity: 0; }
/* 骨組みの時間は、色と写真を隠して点線だけにする */
.is-playing .bl__hero img, .is-playing .bl__hero p, .is-playing .bl__cards i, .is-playing .bl__nav b, .is-playing .bl__nav em { animation: bl-fill 6s var(--ease) infinite; }
.is-playing .bl__screen > * { animation: bl-wire 6s linear infinite; }
.is-playing .bl__done { animation: bl-done 6s var(--ease) infinite; }
@keyframes bl-fill { 0%, 28% { opacity: 0; } 44%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bl-wire { 0%, 28% { outline: 1.5px dashed rgba(10, 11, 12, 0.35); outline-offset: -1px; } 40%, 100% { outline: 1.5px dashed rgba(10, 11, 12, 0); outline-offset: -1px; } }
@keyframes bl-done { 0%, 58% { opacity: 0; transform: scale(0.7); } 66%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 届ける：順位が上がっていく小さな検索画面 */
.rk { width: 84%; display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -40px rgba(10, 11, 12, 0.45); }
.rk__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #f3f2ee; font-size: 13px; font-weight: 600; }
.rk__bar .icon { width: 16px; height: 16px; color: #66686c; }
.rk__ai { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #f6f4ee; }
.rk__ai-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #6f5b2d; }
.rk__ai-you { justify-self: start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #b0965e; color: #3f4144; opacity: 0; transform: translateY(4px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.rk__ai-you b { color: #5a4920; }
.rk__ai.is-in .rk__ai-you { opacity: 1; transform: none; }
.rk__list { position: relative; height: calc(6 * 34px); }
.rk__list li { position: absolute; left: 0; right: 0; top: calc(var(--pos, 0) * 34px); height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #1f3a8a; white-space: nowrap; overflow: hidden; transition: top 0.7s var(--ease); }
.rk__list li span { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #e6e3db; }
.rk__list li.is-you { background: rgba(203, 180, 136, 0.22); box-shadow: inset 0 0 0 1.5px #b0965e; z-index: 2; }
.rk__list li.is-you span { background: #0a0b0c; }
.rk__list li.is-you b { color: #1f3a8a; overflow: hidden; text-overflow: ellipsis; }
.rk__meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; color: #3f4144; padding-top: 8px; border-top: 1px solid rgba(10, 11, 12, 0.1); }
.rk__meta b { font-family: var(--f-mincho); font-size: 26px; color: #7a6433; margin-right: 2px; font-variant-numeric: lining-nums tabular-nums; }

/* 育てる：毎月の報告に、チェックが入っていく */
.report--loop { width: 82%; }
.report--loop .report__head { font-family: var(--f-gothic); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }

/* 費用の一言：短く */
.value-screen--compact { min-height: 0; padding-block: clamp(64px, 8vw, 110px); }
.value-screen--compact .value-screen__line { font-size: clamp(28px, 4.4vw, 64px); }

/* 会社：事務所 */
.studio3 { padding-block: var(--section-y); }
.studio3__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.studio3__text { display: grid; gap: 18px; }
.studio3__lead { color: var(--mute); }
.studio3__photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; }
.studio3__photos .ph-card { aspect-ratio: 4 / 3; border-radius: 12px; }
.studio3__photos .ph-card img { transform: none; }
.studio3 .shiga-map { max-width: 300px; }
.studio__name { font-weight: 700; }
.theme-light .studio__address { background: #fff; }
@media (max-width: 899px) { .studio3__grid { grid-template-columns: minmax(0, 1fr); } .studio3 .shiga-map { max-width: 220px; } }
.profile, .sept { padding-block: var(--section-y); }

/* 実績 */
.works2 { background: var(--ink); padding-block: var(--section-y); }
.works2 .display-2 { margin-bottom: clamp(24px, 3vw, 40px); }
.works2__web { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.works2__web .tile__media { aspect-ratio: 4 / 3; }
.works2__more { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: end; margin: clamp(48px, 6vw, 80px) 0 clamp(20px, 2.4vw, 32px); }
.works2__count { display: flex; align-items: baseline; gap: 6px; }
.works2__count b { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(64px, 7vw, 120px); line-height: 0.9; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.works2__count span { font-weight: 700; color: var(--mute); }
.works2__more-t { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.35; }
.works2 .archive__rows { padding-inline: 0; }
@media (max-width: 899px) { .works2__web { grid-template-columns: repeat(2, minmax(0, 1fr)); } .works2__more { grid-template-columns: minmax(0, 1fr); } }

/* よくあるご質問 */
.faq { padding-block: var(--section-y); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq .qa summary { font-size: 15.5px; }
@media (min-width: 900px) { .faq .display-2 { position: sticky; top: calc(var(--header-h) + 24px); } }
@media (max-width: 899px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } }

/* お問い合わせ：Q&Aは上へ移したので、横並びをやめる */
.contact__grid { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.finale__hero { padding-block: clamp(96px, 12vw, 180px) clamp(64px, 8vw, 110px); }
@media (prefers-reduced-motion: reduce) { .is-playing .bl__hero img, .is-playing .bl__hero p, .is-playing .bl__cards i, .is-playing .bl__nav b, .is-playing .bl__nav em, .is-playing .bl__screen > *, .is-playing .bl__done { animation: none; } }
/* 実績：見えたら一瞬で並ぶ（待っている間だけ隠す） */
.archive__item { transition: opacity 0.5s var(--ease) var(--d, 0s), transform 0.5s var(--ease) var(--d, 0s); }
.archive__grid.is-waiting .archive__item { opacity: 0; transform: scale(0.6); }
@media (max-width: 899px) {
  .why__beat { display: grid; gap: 2px; }
  .why__beat span:not(:first-child) { font-size: 26px; }
}

/* いつでも押せる、お問い合わせボタン */
.fab { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); min-height: 52px; padding: 0 22px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55); transform: translateY(160%); transition: transform 0.5s var(--ease), background-color 0.4s var(--ease); }
.fab.is-on { transform: none; }
@media (max-width: 899px) { .fab { left: 50%; right: auto; min-height: 50px; padding: 0 26px; font-size: 14px; translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .fab { transition: none; } }

/* ================================================================ 料金 */
.price { background: var(--black); padding-block: var(--section-y); }
.price__head { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.price__line { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(28px, 4vw, 56px); line-height: 1.3; font-feature-settings: "palt"; display: grid; }
.price__line .ph { display: block; white-space: nowrap; }
.price__line .ph:last-child { color: var(--gold); }
.price__sub { color: var(--mute); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.plan { position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.4vw, 32px); border-radius: 18px; background: #141518; border: 1px solid rgba(236, 235, 230, 0.12); }
.plan--pick { border-color: var(--gold); background: #17150f; }
.plan__badge { position: absolute; top: -12px; left: 22px; padding: 3px 12px; border-radius: 999px; background: var(--gold); color: #0a0b0c; font-size: 12px; font-weight: 700; }
.plan__name { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); }
.plan__price { display: flex; align-items: baseline; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(236, 235, 230, 0.12); }
.plan__price b { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(36px, 3.6vw, 50px); line-height: 1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.plan__price span { font-size: 13px; font-weight: 700; color: var(--mute); }
.plan__list { display: grid; gap: 8px; }
.plan__list li { position: relative; padding-left: 18px; font-size: 14.5px; color: #d6d5d0; }
.plan__list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.care { margin-top: clamp(28px, 3vw, 40px); padding: clamp(20px, 2.4vw, 30px); border-radius: 18px; border: 1px solid rgba(236, 235, 230, 0.12); }
.care__title { display: flex; align-items: baseline; gap: 12px; font-weight: 700; margin-bottom: 14px; }
.care__title span { font-size: 12px; color: var(--mute); }
.care__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.care__item { position: relative; display: grid; gap: 6px; padding: 16px 18px; border-radius: 12px; background: #141518; }
.care__item p:last-of-type { font-size: 13.5px; color: #c9c8c3; }
.care__price b { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); color: var(--text); margin-right: 2px; font-variant-numeric: lining-nums tabular-nums; }
.care__price { font-size: 13px; font-weight: 700; color: var(--mute); }
.care__tag { position: absolute; top: 14px; right: 14px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-size: 12px; font-weight: 700; }
.price__note { margin-top: 18px; font-size: 12.5px; color: var(--mute-2); max-width: 60em; }
.price__cta { display: grid; justify-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); text-align: center; }
.price__cta p { font-weight: 700; }
@media (max-width: 899px) {
  .plans, .care__list { grid-template-columns: minmax(0, 1fr); }
  .plans { gap: 18px; }
  .plan { padding: 22px 20px; gap: 10px; }
}
.fab { border: 0; box-shadow: none; outline: 3px solid rgba(10, 11, 12, 0.18); }
.qa-group { margin: 30px 0 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: #7a6433; }
.qa-group:first-child { margin-top: 0; }
.qa summary { word-break: keep-all; text-wrap: pretty; }
@media (max-width: 899px) { .faq .qa summary { padding-block: 15px; font-size: 15px; } .qa-group { margin-top: 24px; } }

/* 検索のための言葉（見た目は控えめに） */
.sc-head__sub { margin-top: 12px; color: var(--mute); font-size: clamp(14px, 1.1vw, 16px); }
.price__label { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); }
.area { display: grid; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.area__title { font-size: 15px; font-weight: 700; }
.area__text { color: var(--mute); font-size: 14px; }
.area__list { display: flex; flex-wrap: wrap; gap: 6px; }
.area__list li { padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; }
.site-footer__area { margin-top: 10px; font-size: 12px; color: var(--mute-2); max-width: 32em; }
/* 実績：これまでの主な業種 */
.industry { display: grid; gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
.industry__title { font-size: 15px; font-weight: 700; }
.industry__list { display: flex; flex-wrap: wrap; gap: 8px; }
.industry__list li { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(236, 235, 230, 0.22); font-size: 13.5px; color: #e6e5e0; }
.industry__note { font-size: 13px; color: var(--mute); }
/* 下層ページへのリンク */
.sc-more { justify-self: start; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sc-more::after { content: " →"; }
.grow__more, .price__more, .works2__link { margin-top: 14px; }
.price__more { text-align: center; }
.faq__side { display: none; }
@media (min-width: 900px) { .faq__grid { grid-template-rows: auto 1fr; } .faq__side { display: block; grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--header-h) + 120px); } .faq .qa-list { grid-column: 2; grid-row: 1 / span 2; } }

/* 自社の動画：縦長の枠と「音を出す」ボタン */
.vframe { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background-color: #0a0b0c; background-position: center; background-size: cover; box-shadow: 0 40px 80px -40px rgba(10, 11, 12, 0.55); }
.vframe video { width: 100%; height: 100%; object-fit: cover; }
.vframe__sound { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(10, 11, 12, 0.72); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.vframe__sound .icon { width: 18px; height: 18px; }
.vframe__sound[aria-pressed="true"] { background: #cbb488; color: #0a0b0c; }
.vframe__sound:focus-visible { outline: 2px solid #cbb488; outline-offset: 3px; }
.why__video, .grow__video { margin: 0; display: grid; gap: 10px; justify-items: center; }
.why__video figcaption, .grow__video figcaption, .works2__reel figcaption { font-size: 13px; color: var(--mute); }
.why__video .vframe, .grow__video .vframe { width: min(320px, 76vw); }
.why__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.grow__head--video { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.grow__head-text { display: grid; gap: 14px; }
.works2__reel { margin: 0 0 clamp(28px, 4vw, 48px); display: grid; gap: 10px; }
.works2__reel .why__reel { margin: 0; width: 100%; }
@media (max-width: 899px) {
  .why__grid, .grow__head--video { grid-template-columns: minmax(0, 1fr); }
  .why__video .vframe, .grow__video .vframe { width: min(280px, 72vw); }
}
.industry__list a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(236, 235, 230, 0.4); }
.industry__list a:hover { color: var(--gold-hi); border-bottom-color: currentColor; }
@media (max-width: 899px) { .step3__visual { grid-row: 1 / span 2; } }

/* ================================================================ 第7版：動きと見せ方の作り直し */

/* アプリ：試合ノートの画面が、ゆっくり下へ流れる */
.sc-phone--app img { animation: app-scroll 22s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; }
.is-playing .sc-phone--app img { animation-play-state: running; }
@keyframes app-scroll { 0%, 6% { transform: translateY(0); } 46%, 54% { transform: translateY(-63%); } 94%, 100% { transform: translateY(0); } }

/* 映像：自社PV3本 */
.sc-media--movie { grid-template-columns: auto auto; align-items: center; gap: clamp(16px, 2vw, 32px); }
.sc-pvs { display: grid; gap: 10px; }
.sc-pvs__k { font-size: 13px; font-weight: 700; color: var(--sub); }
.sc-pvs ul { display: grid; gap: 10px; }
.sc-pv { position: relative; display: block; width: clamp(96px, 8vw, 128px); aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.sc-pv img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.sc-pv:hover img { transform: scale(1.05); }
.sc-pv span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 22px 8px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); color: #fff; font-size: 12px; font-weight: 700; text-align: left; }
.sc-pv small { font-family: var(--f-gothic); font-weight: 500; font-size: 11px; color: #ddd; }
.sc-pv:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 899px) {
  .sc-media--movie { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sc-pvs ul { grid-auto-flow: column; }
  .sc-pv { width: min(28vw, 116px); }
}

/* つくる：段階ごとに組み上がる */
.gcard__media--make, .gcard__media--grow { display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px 14px 14px; }
.bx { position: relative; width: 56%; aspect-ratio: 9 / 17; border-radius: 26px; padding: 7px; background: #121316; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.65); transition: transform 0.8s var(--ease); }
.bx__screen { height: 100%; border-radius: 20px; overflow: hidden; background: #fbfaf7; position: relative; }
.bx__page { display: grid; gap: 7px; padding: 9px; transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.bx__page > * { position: relative; border-radius: 5px; outline: 1.5px dashed rgba(10, 11, 12, 0.32); outline-offset: -1px; transition: outline-color 0.5s; }
.bx__nav { display: flex; align-items: center; gap: 5px; height: 16px; padding: 0 5px; }
.bx__nav b { width: 28%; height: 6px; border-radius: 3px; background: #0a0b0c; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.bx__nav i { width: 9%; height: 3px; border-radius: 2px; background: rgba(10, 11, 12, 0.25); opacity: 0; transition: opacity 0.4s; }
.bx__nav i:first-of-type { margin-left: auto; }
.bx__nav em { width: 15%; height: 8px; border-radius: 999px; background: #0b1f4d; opacity: 0; transition: opacity 0.4s; }
.bx__hero { aspect-ratio: 4 / 3.4; overflow: hidden; background: #ece9e1; }
.bx__hero img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.bx__h { display: grid; gap: 4px; padding: 2px 0; }
.bx__h i { height: 7px; border-radius: 4px; background: #0a0b0c; transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.bx__h i + i { width: 66%; transition-delay: 0.15s; }
.bx__btn { padding: 2px 0; }
.bx__btn em { display: block; width: 46%; height: 13px; border-radius: 999px; background: #ad2349; transform: scale(0); transform-origin: left center; transition: transform 0.5s var(--ease); }
.bx__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.bx__cards i { aspect-ratio: 1; border-radius: 5px; background-color: #dcebe8; background-size: cover; background-position: center; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s var(--ease); }
.bx__cards i:nth-child(2) { transition-delay: 0.1s; background-color: #efe9e1; }
.bx__cards i:nth-child(3) { transition-delay: 0.2s; }
.bx__text { display: grid; gap: 4px; }
.bx__text i { height: 4px; border-radius: 2px; background: rgba(10, 11, 12, 0.16); opacity: 0; transition: opacity 0.5s; }
.bx__text i:last-child { width: 60%; }
.bx__sw { position: absolute; left: 10%; top: 18%; display: grid; gap: 6px; z-index: 2; }
.bx__sw li { width: 22px; height: 22px; border-radius: 50%; background: #0b1f4d; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(-14px); transition: opacity 0.4s, transform 0.5s var(--ease); }
.bx__sw li:nth-child(2) { background: #ad2349; transition-delay: 0.1s; }
.bx__sw li:nth-child(3) { background: #efe9e1; transition-delay: 0.2s; }
.bx__tap { position: absolute; left: 30%; top: 62%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(203, 180, 136, 0.55); box-shadow: 0 0 0 2px #fff; opacity: 0; transform: translate(60px, 70px) scale(0.7); transition: transform 0.8s var(--ease), opacity 0.3s; z-index: 3; }
.bx__done { position: absolute; right: 9%; top: 14%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 999px; background: #cbb488; color: #0a0b0c; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5); opacity: 0; transform: scale(0.6); transition: opacity 0.4s, transform 0.5s var(--ease); z-index: 3; }
.bx__done svg { width: 16px; height: 16px; fill: none; stroke: #0a0b0c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gx__cap { font-size: 13px; font-weight: 700; color: #fff; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: opacity 0.3s; }
.gx__cap.is-swap { opacity: 0; }
/* 段階：s1 骨組み → s2 色 → s3 ヘッダー → s4 写真 → s5 見出しとボタン → s6 カードとタップ → s7 スクロール → s8 公開 */
.s2 .bx__sw li { opacity: 1; transform: none; }
.s3 .bx__nav b { transform: none; } .s3 .bx__nav i, .s3 .bx__nav em { opacity: 1; } .s3 .bx__nav { outline-color: transparent; }
.s4 .bx__hero img { clip-path: inset(0 0 0 0); } .s4 .bx__hero { outline-color: transparent; }
.s5 .bx__h i { transform: none; } .s5 .bx__btn em { transform: none; } .s5 .bx__h, .s5 .bx__btn { outline-color: transparent; }
.s6 .bx__cards i, .s6 .bx__text i { opacity: 1; transform: none; } .s6 .bx__cards, .s6 .bx__text { outline-color: transparent; }
.s6 .bx__tap { opacity: 1; transform: none; }
.s7 .bx__page { transform: translateY(-34%); } .s7 .bx__tap { opacity: 0; }
.s8 .bx__done { opacity: 1; transform: none; } .s8 .bx { transform: translateY(-4px); }

/* 育てる：毎月の手入れを、ひとつずつ */
.gx__month { font-size: 13px; font-weight: 700; color: #e3d1a8; }
.gx__month b { font-family: var(--f-mincho); font-size: 20px; color: #fff; margin-right: 2px; }
.gx { position: relative; width: 56%; aspect-ratio: 9 / 17; border-radius: 26px; padding: 7px; background: #121316; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.65); }
.gx__screen { height: 100%; border-radius: 20px; overflow: hidden; background: #fbfaf7; display: grid; align-content: start; gap: 7px; padding: 9px; }
.gx__screen .bx__nav b { transform: none; } .gx__screen .bx__nav i, .gx__screen .bx__nav em { opacity: 1; }
.gx__screen > * { outline: 0; }
.gx__screen .bx__h i { transform: none; } .gx__screen .bx__text i { opacity: 1; }
.gx__hero { position: relative; aspect-ratio: 4 / 3.6; border-radius: 6px; overflow: hidden; }
.gx__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.9s, filter 0.9s; }
.gx__old { filter: saturate(0.6) brightness(0.92); }
.gx__new { opacity: 0; }
.gx__add { display: grid; gap: 4px; padding: 6px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #cbb488; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.5s; }
.gx__add span { justify-self: start; font-size: 9px; font-weight: 700; color: #fff; background: #ad2349; padding: 1px 6px; border-radius: 999px; }
.gx__add i { height: 4px; border-radius: 2px; background: rgba(10, 11, 12, 0.18); }
.gx__chart, .gx__pin, .gx__mail { position: absolute; z-index: 3; opacity: 0; transition: opacity 0.4s, transform 0.6s var(--ease); }
.gx__chart { left: -16%; top: 10%; width: 74%; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.5); transform: translateY(10px) scale(0.9); }
.gx__chart svg { width: 100%; height: auto; display: block; }
.gx__line { fill: none; stroke: #7a6433; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease 0.2s; }
.gx__chart span { display: block; margin-top: 4px; font-size: 9px; color: #66686c; }
.gx__pin { right: -14%; top: 40%; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff; color: #0a0b0c; font-size: 11px; font-weight: 700; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.5); transform: translateX(16px); }
.gx__pin .icon { width: 16px; height: 16px; color: #ad2349; }
.gx__mail { left: 10%; right: 10%; bottom: 8%; display: grid; gap: 5px; padding: 12px; border-radius: 12px; background: #0a0b0c; color: #fff; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.6); transform: translateY(20px); }
.gx__mail b { font-size: 11px; color: #e3d1a8; }
.gx__mail i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.g1 .gx__chart { opacity: 1; transform: none; } .g1 .gx__line { stroke-dashoffset: 0; }
.g2 .gx__new { opacity: 1; } .g2 .gx__old { opacity: 0; }
.g3 .gx__add { max-height: 60px; opacity: 1; }
.g4 .gx__pin { opacity: 1; transform: none; }
.g5 .gx__mail { opacity: 1; transform: none; }
.gcard__media--grow .gx__cap { background: rgba(255, 255, 255, 0.14); }
@media (prefers-reduced-motion: reduce) { .bx *, .gx * { transition: none !important; } }

/* 進め方：4枚の写真 */
.step3__visual--img { padding: 0; background: #e8e5dd; border: 0; aspect-ratio: 4 / 5; }
.step3__visual--img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.step3:hover .step3__visual--img img { transform: scale(1.04); }
@media (max-width: 899px) { .step3__visual--img { aspect-ratio: 4 / 5; } }

/* 料金：中身が積み上がる */
.price__head { margin-bottom: clamp(32px, 4vw, 52px); }
.plans2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: end; }
.plan2 { position: relative; display: grid; gap: 12px; padding: clamp(20px, 2.2vw, 28px); border-radius: 18px; background: #141518; border: 1px solid rgba(236, 235, 230, 0.12); }
.plan2--pick { border-color: #cbb488; background: #17150f; }
.plan2__badge { position: absolute; top: -12px; left: 20px; padding: 3px 12px; border-radius: 999px; background: #cbb488; color: #0a0b0c; font-size: 12px; font-weight: 700; }
.plan2__name { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); }
.plan2__price { display: flex; align-items: baseline; gap: 4px; }
.plan2__price b { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; color: #cbb488; font-variant-numeric: lining-nums tabular-nums; }
.plan2__price span { font-size: 13px; font-weight: 700; color: #a3a5a9; }
.stack { display: flex; flex-direction: column-reverse; gap: 6px; padding-top: 6px; }
.stack__b { padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; background: rgba(236, 235, 230, 0.08); color: #d6d5d0; transition: opacity 0.4s, transform 0.6s var(--ease); }
.js .plans2:not(.is-in) .stack__b { opacity: 0; transform: translateY(-26px); }
.stack__b--up { background: rgba(203, 180, 136, 0.2); color: #f1e3c2; box-shadow: inset 0 0 0 1px rgba(203, 180, 136, 0.45); }
.stack__b--ai { background: #cbb488; color: #0a0b0c; }
.plans2.is-in .stack__b:nth-child(1) { transition-delay: 0.1s; } .plans2.is-in .stack__b:nth-child(2) { transition-delay: 0.25s; } .plans2.is-in .stack__b:nth-child(3) { transition-delay: 0.4s; } .plans2.is-in .stack__b:nth-child(4) { transition-delay: 0.55s; } .plans2.is-in .stack__b:nth-child(5) { transition-delay: 0.7s; }
.stack-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px; font-size: 13px; color: #a3a5a9; }
.stack-key li { display: inline-flex; align-items: center; gap: 6px; }
.stack-key i { width: 14px; height: 14px; border-radius: 4px; }
.k-base { background: rgba(236, 235, 230, 0.18); } .k-up { background: rgba(203, 180, 136, 0.35); box-shadow: inset 0 0 0 1px rgba(203, 180, 136, 0.6); } .k-ai { background: #cbb488; }
.stack-note { margin-top: 10px; text-align: center; font-size: 14.5px; color: #d6d5d0; }
.care2 { margin-top: clamp(32px, 4vw, 52px); }
.care2__title { display: flex; align-items: baseline; gap: 12px; font-weight: 700; margin-bottom: 12px; }
.care2__title span { font-size: 12px; color: #a3a5a9; }
.care2__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.care2__item { position: relative; display: grid; gap: 6px; padding: 18px; border-radius: 14px; background: #141518; border: 1px solid rgba(236, 235, 230, 0.1); }
.care2__item--base { border-color: rgba(203, 180, 136, 0.55); }
.care2__price { font-size: 13px; font-weight: 700; color: #a3a5a9; }
.care2__price b { font-family: var(--f-mincho); font-size: clamp(26px, 2.4vw, 34px); color: #ecebe6; margin-right: 2px; font-variant-numeric: lining-nums tabular-nums; }
.care2__desc { font-size: 14px; color: #c9c8c3; }
.care2__tag { position: absolute; top: 14px; right: 14px; padding: 2px 10px; border-radius: 999px; border: 1px solid #cbb488; color: #cbb488; font-size: 12px; font-weight: 700; }
@media (max-width: 899px) {
  .plans2, .care2__list { grid-template-columns: minmax(0, 1fr); }
  .plans2 { gap: 22px; }
}

/* 実績：3段で左へ流れ続ける */
.works2__head { display: grid; gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); }
.works2__lead { color: var(--mute); }
.mq { display: grid; gap: 10px; overflow: hidden; }
.mq__row { display: flex; width: max-content; animation: mq var(--dur) linear infinite; animation-play-state: paused; }
.mq.is-running .mq__row { animation-play-state: running; }
.mq.is-running .mq__row:hover, .mq.is-running .mq__row:focus-within { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq__track { display: flex; gap: 10px; padding-right: 10px; }
.mq__item { display: block; height: clamp(96px, 11vw, 150px); padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #16171a; cursor: zoom-in; }
.mq__item img { display: block; width: auto; height: 100%; transition: transform 0.6s var(--ease); }
.mq__item:hover img { transform: scale(1.06); }
.mq__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mq__row { animation: none; } .mq { overflow-x: auto; } }

/* 主な業種：たたんでおく */
.ind { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ind summary { list-style: none; cursor: pointer; position: relative; padding: 16px 32px 16px 0; font-weight: 700; font-size: 15px; }
.ind summary::-webkit-details-marker { display: none; }
.ind summary::before, .ind summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1px; background: var(--gold); transition: transform 0.4s var(--ease); }
.ind summary::after { transform: rotate(90deg); }
.ind[open] summary::after { transform: rotate(0deg); }
.ind .industry__list { padding-bottom: 12px; }
.ind .industry__note { padding-bottom: 16px; }
.gx__cap { font-size: 13.5px; background: rgba(0, 0, 0, 0.28); color: #fff; }
@media (max-width: 899px) {
  .gcard__media--make, .gcard__media--grow { aspect-ratio: auto; padding: 22px 14px 16px; }
  .bx, .gx { width: min(210px, 56vw); }
  .bx__sw { left: calc(50% - min(210px, 56vw) / 2 - 34px); }
  .gx__chart { left: -22%; }
  .gx__pin { right: -24%; }
}

/* ================================================================ 第8版：文字組み（サイズの基準と改行） */
/* 改行：本文は和文の標準どおり1文字単位で折り返す。見出しと短い文は、文節（<wbr>）でだけ折り返す */
p, li, figcaption, dd, .tile__name { word-break: normal; line-break: strict; text-wrap: pretty; }
h1, h2, h3, summary, .sub, .colcard__title, .sc-lead, .grow__lead, .why__lead, .price__sub, .works2__lead, .finale__lead, .stack-note,
.studio3__lead, .phero__lead, .psec__lead, .pcta__text, .hero__lead, .link-arrow, .sc-more, .value-screen__sub, .area__text, .btn, .industry__note, .plan2__name, .gx__cap {
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
h1, h2, h3, .colcard__title { text-wrap: balance; }
.qa summary { text-wrap: balance; }
.nw { display: inline-block; }

/* 見出しの大きさは一つ前（v23）のまま。小さく揃えると画面がスカスカに見えるため、ここでは変えない */
@media (max-width: 899px) { .nav__list a:not(.btn) { font-size: 24px; font-feature-settings: "palt"; } }

/* 明朝の見出しは、字面を詰める */
.gcard h3, .step3 h3, .plan2__name, .why__beat, .colcard__title, .pcta__text, .sc-title, .profile__lead { font-feature-settings: "palt"; }

/* リード文・本文・カード本文・注記・ラベル */
.hero__lead, .why__lead, .grow__lead, .price__sub, .sc-lead, .works2__lead, .studio3__lead, .finale__lead, .value-screen__sub { font-size: 16px; }
@media (min-width: 900px) { .hero__lead, .why__lead, .grow__lead, .price__sub, .sc-lead, .works2__lead, .studio3__lead, .finale__lead, .value-screen__sub { font-size: 17px; } }
.qa p, .profile__text, .sept__p { font-size: 15px; }
@media (min-width: 900px) { .qa p, .profile__text, .sept__p { font-size: 16px; } }
.gcard > p:last-child, .step3 p:last-child, .care2__desc { font-size: 15px; }
@media (min-width: 900px) { .gcard > p:last-child, .step3 p:last-child, .care2__desc { font-size: 15px; } }
.grow__note, .price__note, .industry__note { font-size: 13px; }
.theme-light .grow__note, .theme-light .industry__note { color: #55575b; }
.req, .tile__kind, .plan2__badge, .care2__tag, .rk__ai-k, .gx__pin, .gx__mail b, .sept__good span, .sc-pv small, .film-note { font-size: 12px; }
.gx__chart span, .gx__add span { font-size: 11px; }
.btn small { font-family: var(--f-gothic); }

/* 小さな金色の文字は、明るい面で少し濃く */
.theme-light { --gold: #66532a; --gold-hi: #5c4a24; }
.theme-light .qa-group { color: #66532a; }

/* 細部 */
@media (max-width: 720px) {
  .hero__kicker { font-size: 13px; letter-spacing: 0.12em; gap: 10px; }
  .hero__kicker::before { width: 24px; }
}
.to-top, .site-footer__copy { white-space: nowrap; letter-spacing: 0.12em; }
.site-footer__brand p { letter-spacing: 0.04em; }
.grow__note { margin-top: 24px; }
@media (min-width: 900px) { .grow__note { margin-top: 32px; } }
.qa p { max-width: 40em; }
.price__note { max-width: 46em; }
.area__text { max-width: 36em; }
.sc-pv span { padding-top: 40px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 60%); }
@media (max-width: 899px) { .step3 { grid-template-rows: auto 1fr; align-content: start; } }
.plan2__price span { font-size: 15px; color: #a3a5a9; }
.plan2__price span small { font-size: 12.5px; margin-left: 2px; }

/* ================================================================ 第9版：文字組みの仕上げ（2回目の確認を受けて） */
/* 長いリード文は、スマホでは1文字単位で折り返す（文節単位だと行末が大きく空くため） */
@media (max-width: 899px) {
  .why__lead, .works2__lead, .area__text, .grow__lead, .psec__lead, .stack-note { word-break: normal; }
}
/* 箇条書き・目次・タグ・地域名も、語の途中で切らない */
.pains li, .ptable li, .toc a, .sc-tag, .sc-head__sub, .site-footer__area { word-break: keep-all; overflow-wrap: anywhere; }
.gx__chart span, .req, .why__title .ph { white-space: nowrap; }
.qa summary { text-wrap: pretty; }
.btn small { white-space: nowrap; flex: none; font-size: 12px; }
.sc-tag { font-size: 12px; }
.plan__name, .colgroup { font-feature-settings: "palt"; }
.plan__price span small { font-size: 12px; }
.price__note { max-width: 40em; }
.sc-video__play small { font-size: 12px; }
.works2__more--plain { grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(16px, 2vw, 24px); }

/* ================================================================ 第10版：アプリ開発（RPAの画面・作れる仕組みの例） */
.sc-sys-k { font-weight: 700; font-size: 14px; margin-top: 4px; }
.sc-sys { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-sys li { padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 7%, transparent); font-size: 13px; font-weight: 500; }
.sc-media--app2 { display: grid; gap: 14px; align-content: center; grid-template-columns: minmax(0, 1fr); }
.rpa-fig { position: relative; margin: 0; padding: 0 8% 10% 0; }
.sc-phone--app2 { position: absolute; right: 0; bottom: 0; width: clamp(92px, 10vw, 170px); height: auto; transform: rotate(3deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45); }
.rpa-cap { font-size: 13px; font-weight: 500; line-height: 1.6; }
.rpa-cap span { display: block; font-size: 12px; font-weight: 400; }

.rpa { --cx: 80%; --cy: 85%; position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; background: #f3f4f6; color: #111; font-family: var(--f-gothic); font-size: 11px; line-height: 1.3; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.5); }
.rpa__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #e4e6ea; }
.rpa__bar i { width: 8px; height: 8px; border-radius: 50%; background: #c3c7cf; }
.rpa__bar span { margin-left: 10px; font-size: 11px; }
.rpa__tools { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #fff; border-bottom: 1px solid #e3e5e9; }
.rpa__run { padding: 3px 10px; border-radius: 5px; background: #111; color: #fff; font-weight: 700; transition: transform 0.2s, background 0.2s; }
.is-run .rpa__run { background: var(--accent, #145f57); transform: scale(0.94); }
.rpa__save { padding: 3px 10px; border-radius: 5px; border: 1px solid #d5d8de; }
.rpa__state { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #eceef1; font-weight: 700; }
.is-run .rpa__state { background: var(--accent, #145f57); color: #fff; }
.is-done .rpa__state { background: #111; color: #fff; }
.rpa__body { display: grid; grid-template-columns: 28% minmax(0, 1fr); min-height: 0; }
.rpa__lib { display: grid; align-content: start; gap: 6px; padding: 10px 8px; background: #fff; border-right: 1px solid #e3e5e9; }
.rpa__a { position: relative; padding: 6px 8px 6px 20px; border-radius: 6px; border: 1px solid #e3e5e9; background: #fafafa; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.rpa__a::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 2px; background: var(--k); }
.rpa__a.is-pick { transform: scale(0.95); border-color: #111; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35); }
.rpa__a--xl, .rpa__n--xl { --k: #1f7a4a; }
.rpa__a--loop, .rpa__n--loop { --k: #555a63; }
.rpa__a--web, .rpa__n--web { --k: #2c58c9; }
.rpa__a--in, .rpa__n--in { --k: #111; }
.rpa__a--mail, .rpa__n--mail { --k: #a8661d; }
.rpa__flow { display: grid; align-content: start; gap: 6px; padding: 10px 12px; overflow: hidden; }
.rpa__n { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; background: #fff; border: 1px solid #e3e5e9; white-space: nowrap; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.2s, background 0.2s; }
.rpa__n.is-in { opacity: 1; transform: none; }
.rpa__n--in1 { margin-left: 14px; }
.rpa__n--in1::after { content: ""; position: absolute; left: -9px; top: -7px; bottom: -7px; width: 2px; background: #c9cdd4; }
.rpa__n b { padding: 1px 6px; border-radius: 4px; background: var(--k); color: #fff; font-size: 10px; font-weight: 700; }
.rpa__n em { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #c9cdd4; transition: background 0.2s, border-color 0.2s; }
.rpa__n.is-act { border-color: var(--accent, #145f57); background: color-mix(in srgb, var(--accent, #145f57) 8%, #fff); }
.rpa__n.is-act em { border-color: var(--accent, #145f57); border-top-color: transparent; animation: rpa-spin 0.6s linear infinite; }
.rpa__n.is-ok em { border-color: #1f7a4a; background: #1f7a4a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat; animation: none; }
@keyframes rpa-spin { to { transform: rotate(360deg); } }
.rpa__foot { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #fff; border-top: 1px solid #e3e5e9; }
.rpa__prog { flex: 1; height: 6px; border-radius: 999px; background: #e7e9ee; overflow: hidden; }
.rpa__prog i { display: block; height: 100%; background: var(--accent, #145f57); transform: scaleX(0); transform-origin: left; transition: transform 0.15s linear; }
.rpa__count { font-variant-numeric: tabular-nums; }
.rpa__count b { font-weight: 700; }
.rpa__toast { position: absolute; right: 12px; bottom: 44px; padding: 8px 12px 8px 30px; border-radius: 8px; background: #111; color: #fff; font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.rpa__toast::before { content: ""; position: absolute; left: 10px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: #2fa66a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.is-done .rpa__toast { opacity: 1; transform: none; }
.rpa__cursor { position: absolute; left: var(--cx); top: var(--cy); z-index: 3; width: 16px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M1 1l13 10.5-6 .6 3.6 6.4-2.4 1.2-3.5-6.5L1 17z' fill='%23111' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); transition: left 0.42s var(--ease), top 0.42s var(--ease); pointer-events: none; }
@media (max-width: 899px) {
  .rpa { font-size: 10px; }
  .rpa__n b { font-size: 9.5px; }
  .sc-media--app2 { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rpa__cursor { display: none; } }

/* ================================================================ 第10版：つくる（サンプルの工務店サイトが組み上がる） */
.gcard__media--make { background: radial-gradient(120% 90% at 50% 0%, #22231f 0%, #0c0c0b 70%); }
.mk { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; gap: 12px; }
.mk__tools { display: grid; gap: 8px; padding: 8px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); opacity: 0; transform: translateX(-8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.mk__sw { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); transition: box-shadow 0.3s, transform 0.3s; }
.mk__font { font-family: var(--f-mincho); font-size: 10px; color: #fff; text-align: center; }
.mk__phone { width: min(200px, 52vw); aspect-ratio: 390 / 800; padding: 6px; border-radius: 28px; background: #050505; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.mk__screen { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: #fff; }
.mk__page { position: relative; background: #fff; color: #1d2420; font-size: 8px; line-height: 1.5; transition: background 0.6s, transform 1.6s cubic-bezier(0.65, 0, 0.35, 1); }
.mk__page > * { opacity: 0; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.mk__nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px; transform: translateY(-6px); }
.mk__nav b { font-family: var(--f-mincho); font-size: 10px; }
.mk__nav span { display: grid; gap: 3px; }
.mk__nav i { display: block; width: 14px; height: 1.5px; background: currentColor; }
.mk__hero { position: relative; height: 200px; overflow: hidden; }
.mk__hero img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); transform: scale(1.15); transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1), transform 1.6s var(--ease); }
.mk__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); color: #fff; }
.mk__h { font-family: var(--f-mincho); font-weight: 700; font-size: 13px; line-height: 1.45; }
.mk__h i { font-style: normal; opacity: 0; transition: opacity 0.08s; transition-delay: calc(var(--i) * 0.06s); }
.mk__s { margin-top: 2px; font-size: 7.5px; opacity: 0; transition: opacity 0.4s 0.9s; }
.mk__btn { display: inline-block; margin-top: 7px; padding: 4px 10px; border-radius: 999px; background: #b8875a; color: #fff; font-size: 7.5px; font-weight: 700; opacity: 0; transform: scale(0.6); transition: opacity 0.3s 1s, transform 0.4s 1s var(--ease); }
.mk__sec { padding: 12px 12px 4px; transform: translateY(10px); }
.mk__k { font-family: var(--f-mincho); font-weight: 700; font-size: 9px; margin-bottom: 6px; }
.mk__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk__cards i { aspect-ratio: 4 / 3; border-radius: 6px; background: center / cover; }
.mk__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; counter-reset: f; }
.mk__flow li { padding: 6px 0; border-radius: 6px; background: #f1ece2; text-align: center; font-size: 7px; font-weight: 700; }
.mk__cta { margin: 12px; padding: 8px; border-radius: 8px; background: #24372d; color: #fff; text-align: center; font-size: 8px; font-weight: 700; transform: translateY(10px); }
/* 骨組みの線 */
.mk__wire { position: absolute; inset: 0; pointer-events: none; }
.mk__wire i { position: absolute; left: 10px; right: 10px; border: 1px solid #c9a76a; border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease), opacity 0.5s; }
.mk__wire i:nth-child(1) { top: 10px; height: 18px; transition-delay: 0s; }
.mk__wire i:nth-child(2) { top: 34px; height: 196px; transition-delay: 0.12s; }
.mk__wire i:nth-child(3) { top: 238px; height: 80px; transition-delay: 0.24s; }
.mk__wire i:nth-child(4) { top: 326px; height: 46px; transition-delay: 0.36s; }
.mk__wire i:nth-child(5) { top: 380px; height: 28px; transition-delay: 0.48s; }
.mk__tap { position: absolute; left: 62%; top: 52%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.mk__done { position: absolute; left: 50%; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #f6e7b8, #c9a35a 55%, #f0d897); color: #111; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px) scale(0.9); transition: opacity 0.4s, transform 0.5s var(--ease); }
.mk__done svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* 段階：s1 骨組み → s2 色 → s3 帯 → s4 写真 → s5 見出しとボタン → s6 中身 → s7 スマホで確かめる → s8 公開 */
.s1 .mk__wire i { transform: scaleX(1); }
.s2 .mk__tools { opacity: 1; transform: none; }
.s2 .mk__sw:nth-child(1) { box-shadow: 0 0 0 2px #fff; transform: scale(1.15); }
.s2 .mk__page { background: #faf7f1; }
.s3 .mk__nav { opacity: 1; transform: none; }
.s3 .mk__wire i:nth-child(1), .s4 .mk__wire i:nth-child(2), .s6 .mk__wire i { opacity: 0; }
.s4 .mk__hero { opacity: 1; }
.s4 .mk__hero img { clip-path: inset(0 0 0 0); transform: scale(1); }
.s5 .mk__h i, .s5 .mk__s, .s5 .mk__btn { opacity: 1; }
.s5 .mk__btn { transform: none; }
.s5 .mk__font { color: #f0d897; }
.s6 .mk__sec, .s6 .mk__cta { opacity: 1; transform: none; }
.s6 .mk__sec:nth-of-type(3) { transition-delay: 0.2s; }
.s6 .mk__cta { transition-delay: 0.35s; }
.s7 .mk__page { transform: translateY(-150px); }
.s7 .mk__tap { animation: mk-tap 1.4s 0.9s var(--ease) both; }
.s7 .mk__tools { opacity: 0; }
.s8 .mk__page { transform: none; }
.s8 .mk__done { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes mk-tap { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@media (max-width: 899px) { .mk__phone { width: min(190px, 50vw); } }
.rpa__n span { overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ 第10版：料金（白地・中身のバー・詳しく見る） */
:root {
  --gold-grad: linear-gradient(115deg, #8a6a2f 0%, #d6b25e 20%, #fff0c2 36%, #cfa14a 50%, #8f6c2d 70%, #e7c97f 88%, #8a6a2f 100%);
  --gold-grad-soft: linear-gradient(115deg, #b38a42 0%, #e9cd86 30%, #fff4d1 45%, #d8b062 60%, #a9803b 100%);
}
.price--v3 { background: #fff; color: #111; }
.price--v3 .price__label { color: #111; }
.price--v3 .price__line .ph:last-child { color: #111; }
.price--v3 .price__sub, .price--v3 .price__note, .price--v3 .stack-note { color: #111; }
.plan3-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 18px; font-size: 13px; font-weight: 700; }
.plan3-key li { display: inline-flex; align-items: center; gap: 7px; }
.plan3-key i { width: 22px; height: 10px; border-radius: 3px; }
.m-base { background: #d3cec4; }
.m-up { background: var(--gold-grad); background-size: 200% 100%; }
.m-ai { background: #111; }
.plans3 { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; } }
.plan3 { position: relative; display: grid; gap: 14px; padding: 26px 22px 20px; border-radius: 18px; background: #fff; border: 1px solid #e4e0d8; box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.35); }
.plan3--pick { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gold-grad) border-box; box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.3); }
.plan3__badge { position: absolute; top: -13px; left: 20px; padding: 4px 14px; border-radius: 999px; background: var(--gold-grad); background-size: 200% 100%; color: #111; font-size: 12px; font-weight: 700; animation: gold-sheen 5s linear infinite; }
.plan3__name { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(20px, 1.7vw, 23px); font-feature-settings: "palt"; }
.plan3__price { display: flex; align-items: baseline; gap: 6px; }
.plan3__price b { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums; }
.plan3__price span { font-size: 14px; font-weight: 700; }
.plan3__for { font-size: 14px; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid #ece8e0; }
.plan3__meter { display: flex; gap: 3px; height: 12px; }
.plan3__meter i { width: calc(var(--n) / 8 * 100%); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.plans3.is-in .plan3__meter i { transform: none; }
.plans3.is-in .plan3__meter i:nth-child(2) { transition-delay: 0.25s; }
.plans3.is-in .plan3__meter i:nth-child(3) { transition-delay: 0.5s; }
.plan3__list { display: grid; gap: 8px; }
.plan3__list li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; }
.plan3__list li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 15px; height: 15px; border-radius: 50%; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.plan3__more { border-top: 1px solid #ece8e0; }
.plan3__more summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-top: 6px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.plan3__more summary::-webkit-details-marker { display: none; }
.plan3__more summary::after { content: ""; width: 12px; height: 12px; background: linear-gradient(#111, #111) center / 100% 2px no-repeat, linear-gradient(#111, #111) center / 2px 100% no-repeat; transition: transform 0.3s var(--ease); }
.plan3__more[open] summary::after { transform: rotate(45deg); }
.plan3__more dl { display: grid; gap: 4px 0; padding: 4px 0 6px; }
.plan3__more dt { font-size: 12px; font-weight: 700; margin-top: 8px; }
.plan3__more dd { font-size: 14px; line-height: 1.7; }
.plan3__more[open] dl { animation: more-in 0.4s var(--ease); }
@keyframes more-in { from { opacity: 0; transform: translateY(-6px); } }
.js .plans3:not(.is-in) .plan3 { opacity: 0; transform: translateY(24px); }
.plans3 .plan3 { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.plans3.is-in .plan3:nth-child(2) { transition-delay: 0.12s; }
.plans3.is-in .plan3:nth-child(3) { transition-delay: 0.24s; }
.price--v3 .stack-note { text-align: center; margin: 22px auto 0; max-width: 34em; font-size: 14px; }
.care3 { margin-top: clamp(32px, 4vw, 48px); padding: 22px; border-radius: 18px; background: #f6f4ef; }
.care3__title { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-mincho); font-weight: 800; font-size: 20px; margin-bottom: 12px; }
.care3__title span { font-family: var(--f-gothic); font-size: 13px; font-weight: 700; }
.care3__list { display: grid; gap: 10px; }
@media (min-width: 900px) { .care3__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.care3__item { position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid #e4e0d8; }
.care3__item--base { border-color: #111; }
.care3__tag { position: absolute; top: 14px; right: 14px; padding: 2px 10px; border-radius: 999px; background: #111; color: #fff; font-size: 12px; font-weight: 700; }
.care3__price b { font-family: var(--f-mincho); font-size: 28px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.care3__price { font-size: 14px; font-weight: 700; }
.care3__desc { font-size: 14px; }
.price--v3 .price__note { margin: 18px auto 0; text-align: left; }
.price--v3 .price__cta .link-arrow { color: #111; }
@keyframes gold-sheen { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* ================================================================ 第10版：SEPT（PVの場面が流れる帯） */
.sept__pv { margin-top: 22px; display: grid; gap: 10px; }
.sept__pv-k { font-size: 14px; font-weight: 700; color: #fff; }
.sept__pvrow { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; }
.sept__pvtrack { display: flex; width: max-content; animation: mq 40s linear infinite; }
.sept__pvtrack > span { display: flex; gap: 6px; padding-right: 6px; }
.sept__pvtrack img { width: clamp(86px, 7.5vw, 120px); height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; }
.sept__pvrow:hover .sept__pvtrack, .sept__pvrow:focus-visible .sept__pvtrack { animation-play-state: paused; }
.sept__pvplay { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sept__pvplay .icon { width: 16px; height: 16px; }
.sept__pvplay small { font-size: 12px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sept__pvtrack { animation: none; } }

/* ================================================================ 第10版：文字は黒か白。黒地の金は、本物の金らしく光らせる */
:root { --text: #ffffff; --mute: #ffffff; --mute-2: #ffffff; --gold: #d9b762; --gold-hi: #f0d896; }
.theme-light, .price--v3, .psec--light { --text: #0a0b0c; --mute: #0a0b0c; --mute-2: #0a0b0c; --mute-light: #0a0b0c; --gold: #0a0b0c; --gold-hi: #0a0b0c; --gold-deep: #0a0b0c; }
/* 暗い面：色を直接決めていた文字を白に */
.hero__lead, .phero__lead, .finale__lead, .plan__list li, .stack__b, .care2__desc, .care__item p:last-of-type, .industry__list li, .industry__list a,
.psec--dark .chips2 li, .tile__name, .tile__kind, .nav__toggle-label, .site-footer__copy, .price__note, .sc-video__play small, .sc-pv small,
.sept, .sept__p, .sept__stats span, .panel__text > p:not([class]), .reach__lead, .studio__lead, .coach p:last-child, .film-ui, .film-ui__place, .film-note,
.studio2__lead, .acc__text p, .ph-card__cap, .care2__price b, .plan2__price span, .lightbox__count, .sc-head__sub, .works2__reel figcaption, .why__video figcaption { color: #fff; }
/* 明るい面：灰色や茶色だった文字を黒に */
.theme-light .grow__note, .theme-light .industry__note, .theme-light .qa-group, .colcard__cat, .colcard__desc, .article__meta, .studio2--bright .studio2__lead,
.rk__meta, .rk__meta b, .serp__ai-you, .rk__ai-you, .rk__ai-you b, .report__head, .rk__ai-k, .serp__ai-k, .gcard__no, .theme-light .tile__kind, .theme-light figcaption,
.theme-light .status, .theme-light .link-arrow, .ptable li, .why__beat span, .why__beat span:not(:first-child), .theme-light .sr-only { color: #0a0b0c; }
/* 作品のパネル：説明と「詳しく」も、見出しと同じ黒か白に */
.sc-panel .sc-lead, .sc-panel .sc-tag, .sc-panel .sc-more, .sc-panel .sc-pvs__k, .sc-panel .sc-stats span { color: var(--fg); }

/* 金の文字：グラデーションに、ゆっくり光が流れる */
.sub--gold, .hero__kicker, .sept__stats b, .plan__price b, .status--live, .care__tag, .sept .kicker {
  background: var(--gold-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: gold-sheen 7s linear infinite;
}
.finale__title .ph:last-child, .finale__title .ph:last-child .ch {
  background: var(--gold-grad); background-size: 200% 100%; background-attachment: fixed; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero__kicker::before { background: var(--gold-grad); }
.theme-light .status--live, .theme-light .sept__stats b { background: none; color: #0a0b0c; -webkit-text-fill-color: #0a0b0c; animation: none; }

/* 金のボタン：金属の地に、ときどき光が走る */
.btn--gold { --btn-fg: #111; --btn-bd: transparent; position: relative; overflow: hidden; isolation: isolate; background: var(--gold-grad); background-size: 200% 100%; border-color: transparent; color: #111; animation: gold-sheen 9s linear infinite; }
.btn--gold::after { content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); transform: skewX(-22deg) translateX(-260%); animation: btn-shine 5s var(--ease) infinite; pointer-events: none; }
.btn--gold:hover { box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.45); filter: brightness(1.06); }
@keyframes btn-shine { 0%, 62% { transform: skewX(-22deg) translateX(-260%); } 100% { transform: skewX(-22deg) translateX(420%); } }
.fab { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55); outline: 0; }
@media (prefers-reduced-motion: reduce) {
  .btn--gold, .btn--gold::after, .sub--gold, .hero__kicker, .sept__stats b, .plan__price b, .status--live, .care__tag, .sept .kicker, .plan3__badge { animation: none; }
}
.agree a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.plan__name, .plan__price span, .plan__price small, .care__price, .care__price b, .care__title, .psec--dark .psec__title, .industry__title { color: inherit; }
/* RPA：スマホは画面の右下の角に少しだけ重ねる（手順を隠さない） */
.rpa-fig { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 0; }
.sc-phone--app2 { position: relative; right: auto; bottom: auto; width: clamp(104px, 9vw, 160px); margin: 0 0 -8% -7%; z-index: 2; }
.rpa__a { white-space: nowrap; }
.rpa__toast { right: auto; bottom: auto; left: 50%; top: 46%; transform: translate(-50%, 8px); }
.is-done .rpa__toast { transform: translate(-50%, 0); }
@media (max-width: 899px) {
  .rpa-fig { grid-template-columns: minmax(0, 1fr); }
  .rpa { aspect-ratio: 4 / 3.5; }
  .rpa__body { grid-template-columns: 23% minmax(0, 1fr); }
  .rpa__lib { padding: 8px 5px; gap: 5px; }
  .rpa__a { padding: 5px 4px 5px 13px; font-size: 9px; }
  .rpa__a::before { left: 5px; width: 5px; height: 5px; margin-top: -2.5px; }
  .rpa__flow { padding: 8px; gap: 5px; }
  .sc-phone--app2 { width: 27vw; margin: -9vw 2vw 0 auto; }
}
.sc-media--app2 { justify-items: stretch; justify-content: stretch; place-items: stretch; }
.rpa-fig, .rpa { width: 100%; }
.rpa-fig .rpa { justify-self: stretch; }
.rpa__toast { white-space: nowrap; }
@media (max-width: 899px) { .sc-phone--app2 { width: 24vw; margin-top: -10vw; } }
.site-header.is-light .nav__toggle-label { color: #0a0b0c; }

/* ================================================================ 第11版：料金の見出しと金額だけ、深い青に */
.price--v3 { --price-blue: #16357c; }
.price--v3 .price__line, .price--v3 .price__line .ph, .price--v3 .price__line .ph:last-child, .price--v3 .price__line .ch { color: var(--price-blue); }
.plan3__price, .plan3__price b, .plan3__price span, .care3__price, .care3__price b { color: var(--price-blue); }

/* ================================================================ 第11版：アプリ開発（黒い画面にプログラムが打ち込まれる） */
.code { width: 100%; border-radius: 10px; overflow: hidden; background: #0b0c0e; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.code__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #17181b; }
.code__bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a3c42; }
.code__bar span { margin-left: 8px; font-family: var(--f-mono); font-size: 10px; color: #fff; }
.code__body { position: relative; height: 13.5em; margin: 0; padding: 8px 10px 10px 0; overflow: hidden; font-family: var(--f-mono), var(--f-gothic); font-size: 10.5px; line-height: 1.55; color: #e9e9e9; white-space: pre; }
.code__body code { display: block; height: 100%; overflow: hidden; }
.code__ln { display: block; min-height: 1.55em; padding-left: 30px; position: relative; }
.code__ln::before { content: attr(data-n); position: absolute; left: 0; width: 22px; text-align: right; color: #55595f; }
.tk-k { color: #7fb4ff; } .tk-f { color: #8fd4a5; } .tk-s { color: #e6c07b; } .tk-p { color: #c4c7cc; } .tk-v { color: #f1f1f1; } .tk-c { color: #6c727a; } .tk-o { color: #8fd4a5; } .tk-ok { color: #55d68a; font-weight: 700; }
.code__caret { position: absolute; display: none; }
.code__ln:last-child::after { content: ""; display: inline-block; width: 6px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: #e9e9e9; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* 重ね方：プログラムの画面を左上、RPAの画面を右下に */
.rpa-fig { grid-template-areas: "code code" "rpa phone"; }
.rpa-fig .code { grid-area: code; width: 56%; margin-bottom: -6%; position: relative; z-index: 2; justify-self: start; }
.rpa-fig .rpa { grid-area: rpa; }
.rpa-fig .sc-phone--app2 { grid-area: phone; }
@media (max-width: 899px) {
  .rpa-fig { grid-template-areas: "code" "rpa" "phone"; }
  .rpa-fig .code { width: 76%; margin-bottom: -7%; }
  .code__body { font-size: 9.5px; height: 12.5em; }
}

/* ================================================================ 第11版：デザイン制作（架空のお店・会社の見本） */
.sc-media--design2 { display: grid; gap: 12px; width: 100%; }
.dz { position: relative; width: 100%; aspect-ratio: 1 / 0.9; }
.dz > * { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.is-playing .dz > *, .dz.is-in > * { opacity: 1; transform: none; }
.is-playing .dz .dz-flyer, .dz.is-in .dz-flyer { transform: rotate(-5deg); transition-delay: 0.25s; }
.is-playing .dz .dz-cards, .dz.is-in .dz-cards { transition-delay: 0.45s; }
/* 焼鳥店のホームページ */
.dz-web { position: absolute; top: 0; right: 0; width: 80%; border-radius: 10px; overflow: hidden; background: #0e0d0c; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.6); }
.dz-web__bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: #e7e4de; }
.dz-web__bar i { width: 7px; height: 7px; border-radius: 50%; background: #c4bfb6; }
.dz-web__bar span { margin-left: 8px; font-size: 9.5px; color: #111; }
.dz-web__view { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.dz-web__page { color: #f3ece0; font-family: var(--f-mincho); animation: dz-scroll 15s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; }
.is-playing .dz-web__page { animation-play-state: running; }
@keyframes dz-scroll { 0%, 22% { transform: translateY(0); } 48%, 70% { transform: translateY(-56%); } 94%, 100% { transform: translateY(0); } }
.dz-r__hero { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.dz-r__hero img { width: 100%; height: 100%; object-fit: cover; }
.dz-r__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 55%, rgba(0, 0, 0, 0.35)); }
.dz-r__nav { position: absolute; z-index: 1; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 9px; letter-spacing: 0.1em; }
.dz-r__nav b { font-size: 11px; font-weight: 700; }
.dz-r__v { position: absolute; z-index: 1; right: 9%; top: 18%; writing-mode: vertical-rl; font-size: clamp(15px, 1.7vw, 24px); font-weight: 700; line-height: 1.7; letter-spacing: 0.18em; }
.dz-r__btn { position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 5px 12px; border: 1px solid rgba(243, 236, 224, 0.7); font-family: var(--f-gothic); font-size: 8.5px; letter-spacing: 0.12em; }
.dz-r__menu { padding: 16px 14px 10px; }
.dz-r__k { font-size: 12px; font-weight: 700; letter-spacing: 0.3em; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid #b8955a; }
.dz-r__row { display: grid; grid-template-columns: 42% 1fr; gap: 12px; align-items: center; }
.dz-r__row img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dz-r__row ul { display: grid; gap: 7px; font-size: 9.5px; }
.dz-r__row li { display: flex; justify-content: space-between; gap: 6px; padding-bottom: 5px; border-bottom: 1px dotted rgba(243, 236, 224, 0.3); white-space: nowrap; }
.dz-r__row b { color: #d9b762; font-weight: 700; }
.dz-r__info { position: relative; padding: 12px 14px 44px; font-family: var(--f-gothic); font-size: 8.5px; }
/* カフェのチラシ */
.dz-flyer { position: absolute; left: 0; bottom: 0; width: 38%; aspect-ratio: 1 / 1.414; display: grid; grid-template-rows: 54% auto auto 1fr auto; padding: 0 0 8% 0; background: #fffdf9; color: #2a1d1d; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45); overflow: hidden; }
.dz-f__photo { overflow: hidden; }
.dz-f__photo img { width: 100%; height: 100%; object-fit: cover; }
.dz-f__tag { justify-self: start; margin: 7% 0 0 9%; padding: 2px 8px; border-radius: 999px; background: #c8323f; color: #fff; font-size: clamp(7px, 0.62vw, 9px); font-weight: 700; }
.dz-f__h { margin: 5% 9% 0; font-family: var(--f-mincho); font-weight: 800; font-size: clamp(11px, 1.15vw, 16px); line-height: 1.35; }
.dz-f__d { margin: 4% 9% 0; font-size: clamp(6.5px, 0.6vw, 8.5px); }
.dz-f__n { margin: 0 9%; padding-top: 5%; border-top: 1px solid #2a1d1d; font-family: var(--f-mincho); font-size: clamp(7.5px, 0.7vw, 10px); font-weight: 700; letter-spacing: 0.15em; }
/* 設計事務所の名刺 */
.dz-cards { position: absolute; right: 3%; bottom: 3%; width: 40%; aspect-ratio: 91 / 75; }
.dz-card { position: absolute; width: 86%; aspect-ratio: 91 / 55; border-radius: 4px; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.5); }
.dz-card--back { right: 0; top: 0; padding: 9% 9%; background: #fbfaf7; color: #1a1a1a; transform: rotate(7deg); display: grid; align-content: space-between; }
.dz-c__who { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(7.5px, 0.7vw, 10px); }
.dz-c__addr { font-size: clamp(6px, 0.52vw, 7.5px); line-height: 1.5; }
.dz-card--front { left: 0; bottom: 0; display: grid; place-items: center; align-content: center; gap: 6%; background: #10213f; color: #fff; transform: rotate(-4deg); }
.dz-c__mark { display: grid; place-items: center; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #d9b762; font-family: var(--f-mincho); font-weight: 800; font-size: clamp(11px, 1.1vw, 16px); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dz-c__name { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(7.5px, 0.75vw, 10.5px); letter-spacing: 0.25em; }
.dz-cap { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .dz-web__page { animation: none; } .dz > * { transition: none; } }
.dz.is-play .dz-web__page { animation-play-state: running; }
.dz-f__photo img { object-position: 82% 40%; }

/* ================================================================ 第12版：ショップカードの裏面を作り込む */
.dz-cards { width: 46%; aspect-ratio: 91 / 80; right: 1%; bottom: 1%; }
.dz-card { width: 84%; }
.dz-card--back { top: 0; right: 0; padding: 7% 8% 6%; display: block; background: linear-gradient(160deg, #fffdf8, #f3efe6); color: #14213a; transform: rotate(6deg); overflow: hidden; }
.dz-c__wave { position: absolute; right: -6%; bottom: -4%; width: 70%; height: 60%; fill: none; stroke: #c9a55c; stroke-width: 0.8; opacity: 0.55; }
.dz-c__co { display: flex; align-items: center; gap: 5%; font-family: var(--f-mincho); font-weight: 700; font-size: clamp(6px, 0.55vw, 8px); letter-spacing: 0.18em; padding-bottom: 5%; border-bottom: 0.5px solid #c9a55c; }
.dz-c__mini { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #10213f; color: #e9cf8e; font-size: 0.95em; letter-spacing: 0; }
.dz-c__role { margin-top: 7%; font-size: clamp(5px, 0.45vw, 6.5px); letter-spacing: 0.15em; }
.dz-c__who { margin-top: 2%; font-family: var(--f-mincho); font-weight: 800; font-size: clamp(9px, 0.95vw, 13px); letter-spacing: 0.22em; }
.dz-c__addr { position: relative; margin-top: 7%; font-size: clamp(4.8px, 0.43vw, 6.2px); line-height: 1.6; letter-spacing: 0.04em; }
.dz-card--front { width: 76%; }
.dz-cards { aspect-ratio: 91 / 98; width: 44%; }
.dz-card--back { width: 88%; }
.dz-card--front { width: 70%; left: -4%; }
.dz-card--back { padding: 6% 7% 5%; }
.dz-c__role { margin-top: 5%; }
.dz-c__who { margin-top: 1%; }
.dz-c__addr { margin-top: 4%; line-height: 1.5; white-space: nowrap; }

/* ================================================================ 第13版：デザイン制作は全部が動く（サイト・サイネージ・スマホ） */
.dz { aspect-ratio: 1 / 0.92; }
/* 焼鳥店のサイト：写真がゆっくり寄り、縦書きが1文字ずつ出る */
.dz-r__hero img { animation: dz-kb 15s ease-in-out infinite; animation-play-state: paused; }
@keyframes dz-kb { 0% { transform: scale(1.14); } 50% { transform: scale(1); } 100% { transform: scale(1.14); } }
.dz-r__v i { font-style: normal; display: inline-block; opacity: 0; animation: dz-ch 15s linear infinite; animation-delay: calc(var(--i) * 0.14s); animation-play-state: paused; }
@keyframes dz-ch { 0%, 2% { opacity: 0; transform: translateY(-6px); } 6%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.dz-r__btn { animation: dz-pulse 3s ease-in-out infinite; animation-play-state: paused; }
@keyframes dz-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 183, 98, 0); } 50% { box-shadow: 0 0 0 4px rgba(217, 183, 98, 0.25); } }
/* サイネージ：2枚が、写真を動かしながら入れ替わる */
.dz-sign { position: absolute; left: 0; bottom: 0; width: 36%; aspect-ratio: 1 / 1.5; border-radius: 6px; overflow: hidden; background: #111; box-shadow: 0 0 0 4px #1b1b1d, 0 30px 60px -24px rgba(0, 0, 0, 0.55); }
.dz-s { position: absolute; inset: 0; display: grid; grid-template-rows: 54% auto auto 1fr auto; padding-bottom: 8%; animation: dz-swap 10s ease-in-out infinite; animation-play-state: paused; }
.dz-s--a { background: #fffdf9; color: #2a1d1d; }
.dz-s--b { grid-template-rows: 1fr auto auto auto; padding: 0 0 10%; color: #fff; background: #0e0d0c; animation-delay: -5s; }
.dz-s__photo { overflow: hidden; }
.dz-s__photo img { width: 100%; height: 100%; object-fit: cover; animation: dz-kb 10s ease-in-out infinite; animation-play-state: paused; }
.dz-s--a .dz-s__photo img { object-position: 82% 40%; }
.dz-s--b .dz-s__photo { position: absolute; inset: 0; }
.dz-s--b .dz-s__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.85)); }
.dz-s__big, .dz-s__sub, .dz-s__name { position: relative; margin: 0 9%; }
.dz-s__big { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(16px, 1.7vw, 24px); letter-spacing: 0.12em; color: #fff; }
.dz-s__sub { margin-top: 4%; font-size: clamp(7px, 0.62vw, 9px); font-weight: 700; }
.dz-s__name { margin-top: 8%; padding-top: 5%; border-top: 1px solid rgba(255, 255, 255, 0.4); font-family: var(--f-mincho); font-size: clamp(7.5px, 0.7vw, 10px); letter-spacing: 0.15em; }
@keyframes dz-swap { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
/* カフェのスマホサイト：上から下へ流れ、見出しが1文字ずつ出る */
.dz-phone { position: absolute; right: 4%; bottom: 0; width: 27%; aspect-ratio: 390 / 800; padding: 1.6%; border-radius: 18% / 9%; background: #0a0a0a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.dz-phone__screen { height: 100%; border-radius: 15% / 7.5%; overflow: hidden; background: #fbf7f2; }
.dz-m { color: #3b2a26; font-size: clamp(6px, 0.55vw, 8px); animation: dz-mscroll 12s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; }
@keyframes dz-mscroll { 0%, 18% { transform: translateY(0); } 40%, 52% { transform: translateY(-38%); } 72%, 84% { transform: translateY(-62%); } 100% { transform: translateY(0); } }
.dz-m__nav { display: flex; justify-content: space-between; align-items: center; padding: 14% 8% 5%; }
.dz-m__nav b { font-family: var(--f-mincho); font-size: 1.3em; letter-spacing: 0.1em; }
.dz-m__nav span { display: grid; gap: 2px; }
.dz-m__nav i { display: block; width: 10px; height: 1.2px; background: currentColor; }
.dz-m__hero { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.dz-m__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 82% 40%; animation: dz-kb 12s ease-in-out infinite; animation-play-state: paused; }
.dz-m__tag { position: absolute; left: 8%; top: 8%; padding: 2px 7px; border-radius: 999px; background: #c8323f; color: #fff; font-weight: 700; animation: dz-pop 12s ease-in-out infinite; animation-play-state: paused; }
@keyframes dz-pop { 0%, 3% { transform: scale(0); } 7%, 92% { transform: scale(1); } 97%, 100% { transform: scale(0); } }
.dz-m__h { position: absolute; left: 8%; bottom: 7%; font-family: var(--f-mincho); font-weight: 800; font-size: 2.1em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.dz-m__h i { font-style: normal; display: inline-block; opacity: 0; animation: dz-mch 12s linear infinite; animation-delay: calc(0.6s + var(--i) * 0.16s); animation-play-state: paused; }
@keyframes dz-mch { 0%, 2% { opacity: 0; transform: translateY(5px); } 6%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.dz-m__k { margin: 9% 8% 4%; font-family: var(--f-mincho); font-weight: 700; font-size: 1.2em; letter-spacing: 0.2em; }
.dz-m__list { display: grid; gap: 5px; margin: 0 8%; }
.dz-m__list li { display: grid; grid-template-columns: 22% 1fr auto; align-items: center; gap: 6%; padding-bottom: 5px; border-bottom: 1px solid #eadfd3; }
.dz-m__list i { aspect-ratio: 1; border-radius: 4px; background: center / cover; }
.dz-m__list b { color: #c8323f; }
.dz-m__shop { margin: 9% 8% 0; }
.dz-m__shop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.dz-m__shop p { margin-top: 4%; }
.dz-m__btn { display: block; margin: 8% 8% 14%; padding: 6px; border-radius: 999px; background: #3b2a26; color: #fff; text-align: center; font-weight: 700; }
/* 見えている間だけ動く／ふわりと浮かぶ */
.dz.is-play .dz-r__hero img, .dz.is-play .dz-r__v i, .dz.is-play .dz-r__btn, .dz.is-play .dz-s, .dz.is-play .dz-s__photo img, .dz.is-play .dz-m, .dz.is-play .dz-m__hero img, .dz.is-play .dz-m__tag, .dz.is-play .dz-m__h i { animation-play-state: running; }
.dz.is-in .dz-sign { animation: dz-float 7s ease-in-out infinite; }
.dz.is-in .dz-phone { animation: dz-float 6s ease-in-out -2s infinite; }
@keyframes dz-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.is-playing .dz .dz-sign, .dz.is-in .dz-sign { transform: rotate(-4deg); transition-delay: 0.25s; }
.is-playing .dz .dz-phone, .dz.is-in .dz-phone { transform: rotate(4deg); transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .dz-r__v i, .dz-m__h i { opacity: 1; animation: none; }
  .dz-r__hero img, .dz-s, .dz-s__photo img, .dz-m, .dz-m__hero img, .dz-m__tag, .dz-r__btn, .dz.is-in .dz-sign, .dz.is-in .dz-phone { animation: none; }
  .dz-s--b { opacity: 0; }
}

/* ================================================================ 第14版：デザイン制作は3業種が動く（焼鳥店のPC・建設会社のタブレット・美容室のスマホ） */
.dz { aspect-ratio: 1 / 0.98; }
.dz-web { width: 78%; }
/* 建設会社のタブレット */
.dz-tab { position: absolute; left: 0; bottom: 2%; width: 56%; aspect-ratio: 4 / 3.05; padding: 2.2%; border-radius: 14px; background: #121316; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 34px 70px -26px rgba(0, 0, 0, 0.6); }
.dz-tab__screen { height: 100%; border-radius: 6px; overflow: hidden; background: #fff; }
.dz-b { color: #10213f; font-size: clamp(6px, 0.55vw, 8px); animation: dz-bscroll 14s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; }
@keyframes dz-bscroll { 0%, 22% { transform: translateY(0); } 44%, 60% { transform: translateY(-46%); } 78%, 88% { transform: translateY(-64%); } 100% { transform: translateY(0); } }
.dz-b__nav { display: flex; justify-content: space-between; align-items: center; padding: 3% 4%; background: #fff; }
.dz-b__nav b { font-family: var(--f-mincho); font-size: 1.25em; letter-spacing: 0.08em; }
.dz-b__nav span { font-size: 0.85em; letter-spacing: 0.06em; }
.dz-b__hero { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; }
.dz-b__hero img { width: 100%; height: 100%; object-fit: cover; animation: dz-kb 14s ease-in-out infinite; animation-play-state: paused; }
.dz-b__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 45, 0.7), transparent 70%); }
.dz-b__h { position: absolute; z-index: 1; left: 6%; top: 26%; font-family: var(--f-mincho); font-weight: 800; font-size: 2.2em; line-height: 1.45; color: #fff; }
.dz-b__h i { font-style: normal; display: inline-block; opacity: 0; animation: dz-bch 14s linear infinite; animation-delay: calc(0.4s + var(--i) * 0.12s); animation-play-state: paused; }
@keyframes dz-bch { 0%, 2% { opacity: 0; transform: translateX(-6px); } 6%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.dz-b__s { position: absolute; z-index: 1; left: 6%; bottom: 12%; padding-top: 2%; border-top: 1px solid rgba(255, 255, 255, 0.6); color: #fff; letter-spacing: 0.2em; }
.dz-b__k { margin: 6% 4% 3%; font-family: var(--f-mincho); font-weight: 800; font-size: 1.4em; letter-spacing: 0.2em; }
.dz-b__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; margin: 0 4%; }
.dz-b__cards li { display: grid; gap: 6px; }
.dz-b__cards i { aspect-ratio: 4 / 3; background: center / cover; }
.dz-b__cards span { font-weight: 700; letter-spacing: 0.1em; padding-left: 6px; border-left: 2px solid #1f4fa8; }
.dz-b__recruit { position: relative; margin: 7% 4% 8%; aspect-ratio: 16 / 6; overflow: hidden; color: #fff; display: grid; align-content: center; padding: 0 6%; gap: 6%; }
.dz-b__recruit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.dz-b__recruit p, .dz-b__recruit span { position: relative; }
.dz-b__recruit p { font-family: var(--f-mincho); font-weight: 700; font-size: 1.3em; line-height: 1.5; }
.dz-b__recruit span { justify-self: start; padding: 3px 10px; background: #1f4fa8; font-weight: 700; }
/* 美容室のスマホ */
.dz-phone { right: 2%; bottom: 0; width: 26%; }
.dz-m { color: #3d3430; }
.dz-m__hero { aspect-ratio: 4 / 5.2; }
.dz-m__hero img { object-position: 50% 40%; }
.dz-m__h { bottom: 8%; font-size: 1.75em; line-height: 1.5; }
.dz-m__btn--top { margin: 6% 8% 0; background: #8a6f5a; }
.dz-m__list li { grid-template-columns: 1fr auto; }
.dz-m__list b { color: #3d3430; }
/* 見えている間だけ動く */
.dz.is-play .dz-b, .dz.is-play .dz-b__hero img, .dz.is-play .dz-b__h i { animation-play-state: running; }
.dz.is-in .dz-tab { animation: dz-float 7s ease-in-out infinite; }
.is-playing .dz .dz-tab, .dz.is-in .dz-tab { transform: rotate(-3deg); transition-delay: 0.25s; }
@media (prefers-reduced-motion: reduce) { .dz-b__h i { opacity: 1; animation: none; } .dz-b, .dz-b__hero img, .dz.is-in .dz-tab { animation: none; } }
.dz-m__h { font-size: 1.4em; white-space: nowrap; }

/* ================================================================ 第15版：よくある質問とフォームは、ボタンで開く */
.faq { padding-block: clamp(56px, 7vw, 96px); }
.faq-all { border-top: 1px solid var(--line-2); }
.faq-all__open { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 4px; cursor: pointer; list-style: none; font-weight: 700; font-size: 16px; }
.faq-all__open::-webkit-details-marker { display: none; }
.faq-all__open small { font-size: 13px; font-weight: 500; }
.faq-all__open::after { content: ""; margin-left: auto; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 0.35s var(--ease); }
.faq-all[open] > .faq-all__open::after { transform: rotate(45deg); }
.faq-all[open] > .faq-all__open span::after { content: "（閉じる）"; font-weight: 500; font-size: 13px; }
.faq-all[open] .qa-list { animation: more-in 0.45s var(--ease); }
/* 質問は細めの字に、上下も詰める */
.qa summary, .faq .qa summary { font-weight: 400; padding-block: 13px; }
.qa-group { margin: 18px 0 0; }
.qa-group:first-child { margin-top: 6px; }
.qa p { padding-bottom: 16px; }
@media (max-width: 899px) { .faq .qa summary { padding-block: 12px; } .qa-group { margin-top: 16px; } }
/* お問い合わせフォーム */
.cform { width: 100%; }
.cform__open { list-style: none; cursor: pointer; justify-self: start; }
.cform__open::-webkit-details-marker { display: none; }
.cform[open] > .cform__open { display: none; }
.cform[open] .form { animation: more-in 0.45s var(--ease); }

/* ================================================================ 第16版：銀の楕円・右下のボタンの固定・会社と代表を詰める・フォームは段階で開く */
:root { --silver-grad: linear-gradient(115deg, #8b8f95 0%, #c9ccd1 18%, #f6f7f9 34%, #bfc3c8 50%, #8e9298 68%, #dfe1e4 86%, #8b8f95 100%); }
/* 楕円は落ち着いた銀に（＋や「」の金はそのまま） */
.btn--gold { background: var(--silver-grad); background-size: 200% 100%; color: #111; }
.btn--gold::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); }
.req, .plan__badge, .plan3__badge, .mk__done { background: var(--silver-grad); background-size: 200% 100%; color: #111; }
/* 右下のお問い合わせは、画面に固定する（光の効果の指定に負けないように） */
.btn--gold.fab { position: fixed; }
/* 対応エリアの下：写真3枚を横に並べる */
.studio3__photos--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.ph3 { margin: 0; overflow: hidden; border-radius: 10px; }
.ph3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); }
.ph3:hover img { transform: scale(1.04); }
/* 代表：写真は小さく丸く、文章はまとめて、上下を詰める */
.profile { padding-block: clamp(56px, 7vw, 96px); }
.profile__wrap { display: grid; gap: 16px; max-width: 760px; }
.profile__head { display: flex; align-items: center; gap: 16px; }
.profile__photo { width: clamp(92px, 11vw, 128px); flex: none; margin: 0; }
.profile__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.profile__role { font-size: 13px; font-weight: 700; }
.profile__name { margin-top: 2px; font-family: var(--f-mincho); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: 0.14em; }
.profile__lead { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; margin-top: 4px; }
.profile__text { display: grid; gap: 10px; max-width: 36em; line-height: 1.9; }
.profile__sept { display: grid; gap: 10px; margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.profile__sept-k { font-size: 13px; font-weight: 700; }
.profile__sept-t { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.45; font-feature-settings: "palt"; }
.profile__sept-p { font-size: 15px; line-height: 1.9; max-width: 36em; }
.profile__sept .btn { justify-self: center; margin-top: 8px; }
@media (max-width: 899px) { .profile__lead .ph { display: block; } }
/* お問い合わせ：種類を選んでから、ボタンで入力欄を開く */
.cform-more > .cform__open { list-style: none; cursor: pointer; justify-self: start; }
.cform-more > .cform__open::-webkit-details-marker { display: none; }
.cform-more[open] > .cform__open { display: none; }
.cform__fields { display: grid; gap: 24px; animation: more-in 0.45s var(--ease); }
.studio3 { padding-block: clamp(56px, 7vw, 96px); }

/* ================================================================ 第17版：お問い合わせの最初の画面（中央にそろえ、選んだ種類はSEPTと同じ赤） */
.field--topics { text-align: center; }
.field--topics legend { justify-content: center; width: 100%; }
.topics { justify-content: center; }
.topics input:checked + span { background: #ad2349; border-color: #ad2349; color: #fff; }
.topics label:first-child span, .cform-more > .cform__open { width: 236px; max-width: 100%; justify-content: center; }
.cform-more { text-align: center; }
.cform-more > .cform__open { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: 14px; letter-spacing: 0.04em; }
.cform-more[open] { text-align: left; }

/* ================================================================ 第18版：ご相談の種類は4枚のカード＋その他。選ぶと入力欄が開く */
.field--topics { text-align: left; }
.field--topics legend { justify-content: center; width: 100%; font-size: 16px; margin-bottom: 4px; }
.topics2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tc { position: relative; cursor: pointer; }
.tc input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tc__box { display: grid; justify-items: center; align-content: center; gap: 4px; height: 100%; min-height: 112px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); text-align: center; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.tc__box .icon { width: 26px; height: 26px; margin-bottom: 4px; }
.tc__box b { font-size: 15px; font-weight: 700; line-height: 1.35; }
.tc__box small { font-size: 12px; line-height: 1.45; }
.tc:hover .tc__box { border-color: rgba(255, 255, 255, 0.5); }
.tc input:checked + .tc__box { background: #ad2349; border-color: #ad2349; color: #fff; }
.tc input:focus-visible + .tc__box { outline: 2px solid #fff; outline-offset: 3px; }
.tc:active .tc__box { transform: scale(0.98); }
.tc--other { grid-column: 1 / -1; }
.tc--other .tc__box { grid-auto-flow: column; justify-content: center; min-height: 48px; padding: 10px 14px; gap: 8px; }
.tc--other .tc__box .icon { width: 18px; height: 18px; margin: 0; }
.tc--other .tc__box b { font-size: 14px; font-weight: 500; }
.topics2__hint { margin-top: 10px; text-align: center; font-size: 13px; }
@media (min-width: 900px) { .topics2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 入力欄：JSが動くときだけ、選ぶまでたたんでおく */
.js .cform__fields:not(.is-open) { display: none; }
.cform__fields.is-open + * , .cform__fields.is-open { animation: more-in 0.45s var(--ease); }
.js .field--topics:has(input:checked) .topics2__hint { display: none; }
.tc { display: block; }
.tc__box { width: 100%; }
.tc__box b, .tc__box small { word-break: keep-all; overflow-wrap: anywhere; }
/* 銀・金のグラデーションは、すべて左から右へ流れる */
@keyframes gold-sheen { from { background-position: 200% 0; } to { background-position: 0% 0; } }
.nwi { display: inline-block; white-space: nowrap; }

/* ================================================================ 第19版：文字の金はプラチナに。「おすすめ」は金、「必須」は赤 */
:root { --plat-grad: linear-gradient(115deg, #aeb4bd 0%, #e6e9ee 20%, #ffffff 36%, #cdd2d9 52%, #a7adb6 70%, #eceef2 88%, #aeb4bd 100%); }
.sub--gold, .hero__kicker, .sept__stats b, .plan__price b, .status--live, .care__tag, .sept .kicker { background-image: var(--plat-grad); }
.finale__title .ph:last-child, .finale__title .ph:last-child .ch { background-image: var(--plat-grad); }
.hero__kicker::before { background: var(--plat-grad); }
.gx__month, .gx__mail b, .dz-r__row b, .s5 .mk__font { color: #fff; }
/* 298,000円の「おすすめ」は金 */
.plan3__badge, .plan__badge { background: var(--gold-grad); background-size: 200% 100%; color: #111; animation: gold-sheen 5s linear infinite; }
/* 「必須」は、選んだカードやSEPTのボタンと同じ赤 */
.req { background: #ad2349; color: #fff; }

/* ================================================================ 第20版：お問い合わせのボタンは黄土色。ときどきキラッと光が走る（銀はやめる） */
.btn--gold { background: #cbb488; background-size: auto; animation: none; color: #111; }
.btn--gold:hover { background: #d6c39a; }
.mk__done { background: #cbb488; background-size: auto; animation: none; color: #111; }

/* ================================================================ 第21版：お問い合わせのボタンに、紙飛行機のアイコン（Solar plain-2） */
.btn--gold::before { content: ""; flex: none; width: 1.2em; height: 1.2em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17.4975%2018.4851L20.6281%209.09373C21.8764%205.34874%2022.5006%203.47624%2021.5122%202.48782C20.5237%201.49939%2018.6511%202.12356%2014.906%203.37189L5.57477%206.48218C3.49295%207.1761%202.45203%207.52305%202.13608%208.28637C2.06182%208.46577%202.01692%208.65596%202.00311%208.84963C1.94433%209.67365%202.72018%2010.4495%204.27188%2012.0011L4.55451%2012.2837C4.80921%2012.5384%204.93655%2012.6658%205.03282%2012.8075C5.22269%2013.0871%205.33046%2013.4143%205.34393%2013.7519C5.35076%2013.9232%205.32403%2014.1013%205.27057%2014.4574C5.07488%2015.7612%204.97703%2016.4131%205.0923%2016.9147C5.32205%2017.9146%206.09599%2018.6995%207.09257%2018.9433C7.59255%2019.0656%208.24576%2018.977%209.5522%2018.7997L9.62363%2018.79C9.99191%2018.74%2010.1761%2018.715%2010.3529%2018.7257C10.6738%2018.745%2010.9838%2018.8496%2011.251%2019.0285C11.3981%2019.1271%2011.5295%2019.2585%2011.7923%2019.5213L12.0436%2019.7725C13.5539%2021.2828%2014.309%2022.0379%2015.1101%2021.9985C15.3309%2021.9877%2015.5479%2021.9365%2015.7503%2021.8474C16.4844%2021.5244%2016.8221%2020.5113%2017.4975%2018.4851Z%22%2F%3E%3Cpath%20d%3D%22M6%2018L21%203%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17.4975%2018.4851L20.6281%209.09373C21.8764%205.34874%2022.5006%203.47624%2021.5122%202.48782C20.5237%201.49939%2018.6511%202.12356%2014.906%203.37189L5.57477%206.48218C3.49295%207.1761%202.45203%207.52305%202.13608%208.28637C2.06182%208.46577%202.01692%208.65596%202.00311%208.84963C1.94433%209.67365%202.72018%2010.4495%204.27188%2012.0011L4.55451%2012.2837C4.80921%2012.5384%204.93655%2012.6658%205.03282%2012.8075C5.22269%2013.0871%205.33046%2013.4143%205.34393%2013.7519C5.35076%2013.9232%205.32403%2014.1013%205.27057%2014.4574C5.07488%2015.7612%204.97703%2016.4131%205.0923%2016.9147C5.32205%2017.9146%206.09599%2018.6995%207.09257%2018.9433C7.59255%2019.0656%208.24576%2018.977%209.5522%2018.7997L9.62363%2018.79C9.99191%2018.74%2010.1761%2018.715%2010.3529%2018.7257C10.6738%2018.745%2010.9838%2018.8496%2011.251%2019.0285C11.3981%2019.1271%2011.5295%2019.2585%2011.7923%2019.5213L12.0436%2019.7725C13.5539%2021.2828%2014.309%2022.0379%2015.1101%2021.9985C15.3309%2021.9877%2015.5479%2021.9365%2015.7503%2021.8474C16.4844%2021.5244%2016.8221%2020.5113%2017.4975%2018.4851Z%22%2F%3E%3Cpath%20d%3D%22M6%2018L21%203%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.btn--gold { gap: 8px; }
.btn--gold::before { position: static; inset: auto; z-index: auto; transform: none; transition: none; background-image: none; background-color: currentColor; }
.btn--gold:hover::before { transform: none; }
/* 管理費の「必須」も、ほかの必須と同じバーガンディー */
.care3__tag { background: #ad2349; color: #fff; }
.care3__item--base { border-color: #ad2349; }
/* 料金のページの「基本」も、バーガンディーの札に（光る文字の指定を打ち消す） */
.care__tag { background: #ad2349; background-image: none; border-color: #ad2349; color: #fff; -webkit-text-fill-color: #fff; -webkit-background-clip: border-box; background-clip: border-box; animation: none; }
.care__item--base { border-color: #ad2349; }
.care__item--base { border: 1px solid #ad2349; }

/* ================================================================ 第22版：メニュー（全ページ共通）と、料金の色をバーガンディーに */
@media (min-width: 900px) { .nav__label, .nav__m { display: none; } }
@media (max-width: 899px) {
  .nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; justify-content: stretch; gap: 0 18px; padding: calc(var(--header-h) + 16px) var(--gutter) 32px; overflow-y: auto; }
  .nav__label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 2px; }
  .nav__svc { grid-column: 1 / -1; }
  .nav__svc a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--f-mincho); font-size: 22px; font-weight: 700; }
  .nav__sub a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--f-gothic); font-size: 15px; font-weight: 700; }
  .nav__svc + .nav__sub, .nav__svc + .nav__sub + .nav__sub { margin-top: 14px; }
  .nav__list a:not(.btn)::after { display: none; }
  .nav__cta { grid-column: 1 / -1; margin-top: 24px; }
  .nav__cta .btn { width: 100%; min-height: 54px; font-size: 15px; }
}
.price--v3 { --price-blue: #ad2349; }
@media (max-width: 899px) {
  .nav__list .nav__svc a:not(.btn) { font-family: var(--f-mincho); font-size: 22px; font-weight: 700; }
  .nav__list .nav__sub a:not(.btn) { font-family: var(--f-gothic); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
}
/* 料金のチェックも、バーガンディー */
.plan3__list li::before { background-color: #ad2349; }
.plan__list li::before { background: #ad2349; }

/* ================================================================ 第23版：料金の見出しの下に、黄土色の線が伸びる（メニューの線と同じ動き） */
.plan3__name, .care3__title { position: relative; justify-self: start; width: fit-content; padding-bottom: 8px; }
.plan3__name::after, .care3__title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #cbb488; transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.plan3__name.is-on::after, .care3__title.is-on::after { transform: scaleX(1); }
.plan3:nth-child(1) .plan3__name::after { transition-delay: 0.35s; }
.plan3:nth-child(2) .plan3__name::after { transition-delay: 0.5s; }
.plan3:nth-child(3) .plan3__name::after { transition-delay: 0.65s; }
.care3__title::after { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) { .plan3__name::after, .care3__title::after { transform: none; transition: none; } }

/* ================================================================ 第24版：スクロールしてからメニューを開いても、全画面に出す */
/* ヘッダーのぼかし（backdrop-filter）や移動（transform）があると、中の全画面メニューがヘッダーの高さに閉じ込められるため、開いている間は外す */
.site-header:has(.nav.is-open) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; background: transparent !important; border-bottom-color: transparent !important; }
.site-header:has(.nav.is-open) .brand, .site-header:has(.nav.is-open) .nav__toggle, .site-header:has(.nav.is-open) .nav__toggle-label { color: #fff !important; }
.site-header:has(.nav.is-open) .nav__toggle { border-color: rgba(255, 255, 255, 0.3) !important; }

/* ================================================================ 第25版：つくって、育てる。にも黄土色の線。カードごとに細い線で区切る */
#grow-title[data-line], .gcard h3[data-line] { position: relative; width: fit-content; padding-bottom: 8px; }
#grow-title[data-line]::after, .gcard h3[data-line]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #cbb488; transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.15s; }
#grow-title[data-line]::after { height: 3px; bottom: -2px; }
#grow-title.is-on::after, .gcard h3.is-on::after { transform: scaleX(1); }
.gcard h3[data-line] { margin-top: 6px; }
/* カードの区切り：上に細い線、下に余白 */
.gcard { padding-top: 22px; border-top: 1px solid var(--line-2); }
@media (max-width: 899px) {
  .grow__cards { gap: 0; }
  .gcard { padding: 26px 0 30px; }
  .gcard:last-child { border-bottom: 1px solid var(--line-2); }
}
@media (prefers-reduced-motion: reduce) { #grow-title[data-line]::after, .gcard h3[data-line]::after { transform: none; transition: none; } }

/* ================================================================ 第26版：メニューが開くときの登場の動き（スマホ） */
@media (max-width: 899px) {
  .nav__list { opacity: 1; visibility: hidden; clip-path: circle(0px at calc(100% - 58px) 36px); transition: clip-path 0.45s var(--ease), visibility 0s linear 0.45s; }
  .nav.is-open .nav__list { visibility: visible; clip-path: circle(150vmax at calc(100% - 58px) 36px); transition: clip-path 0.75s var(--ease), visibility 0s linear 0s; }
  .nav__list > li { opacity: 0; transform: translateY(16px); transition: opacity 0.2s ease, transform 0.2s ease; }
  .nav.is-open .nav__list > li { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
  .nav.is-open .nav__list > li:nth-child(1) { transition-delay: 0.180s; }
  .nav.is-open .nav__list > li:nth-child(2) { transition-delay: 0.225s; }
  .nav.is-open .nav__list > li:nth-child(3) { transition-delay: 0.270s; }
  .nav.is-open .nav__list > li:nth-child(4) { transition-delay: 0.315s; }
  .nav.is-open .nav__list > li:nth-child(5) { transition-delay: 0.360s; }
  .nav.is-open .nav__list > li:nth-child(6) { transition-delay: 0.405s; }
  .nav.is-open .nav__list > li:nth-child(7) { transition-delay: 0.450s; }
  .nav.is-open .nav__list > li:nth-child(8) { transition-delay: 0.495s; }
  .nav.is-open .nav__list > li:nth-child(9) { transition-delay: 0.540s; }
  .nav.is-open .nav__list > li:nth-child(10) { transition-delay: 0.585s; }
  .nav.is-open .nav__list > li:nth-child(11) { transition-delay: 0.630s; }
  .nav.is-open .nav__list > li:nth-child(12) { transition-delay: 0.675s; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .nav__list, .nav.is-open .nav__list { clip-path: none; transition: none; }
  .nav__list > li, .nav.is-open .nav__list > li { opacity: 1; transform: none; transition: none; }
  .nav__list { opacity: 0; } .nav.is-open .nav__list { opacity: 1; }
}

/* ================================================================ 第27版：スマホとタブレットを本物の比率に（iPhone 15 ≒ 0.49、iPad 横 ≒ 1.4） */
.sc-phone, .mk__phone, .dz-phone { aspect-ratio: 49 / 100; }
.dz-tab { aspect-ratio: 1.4; }

/* ================================================================ 第28版：作品の欄の見出しを、枠が一筆書きで囲む */
.sc-frame {
  --fc: #cbb488; --fw: 2px;
  display: inline-block; padding: 0.14em 0.38em 0.18em; margin-left: -0.38em;
  background:
    linear-gradient(var(--fc), var(--fc)) left top / 0 var(--fw) no-repeat,
    linear-gradient(var(--fc), var(--fc)) right top / var(--fw) 0 no-repeat,
    linear-gradient(var(--fc), var(--fc)) right bottom / 0 var(--fw) no-repeat,
    linear-gradient(var(--fc), var(--fc)) left bottom / var(--fw) 0 no-repeat;
}
.sc-panel--app .sc-frame, .sc-panel--design .sc-frame { --fc: #ad2349; }
.sc-frame.is-on { animation: frame-draw 1.4s var(--ease) 0.2s forwards; }
@keyframes frame-draw {
  0% { background-size: 0 var(--fw), var(--fw) 0, 0 var(--fw), var(--fw) 0; }
  28% { background-size: 100% var(--fw), var(--fw) 0, 0 var(--fw), var(--fw) 0; }
  50% { background-size: 100% var(--fw), var(--fw) 100%, 0 var(--fw), var(--fw) 0; }
  78% { background-size: 100% var(--fw), var(--fw) 100%, 100% var(--fw), var(--fw) 0; }
  100% { background-size: 100% var(--fw), var(--fw) 100%, 100% var(--fw), var(--fw) 100%; }
}
@media (prefers-reduced-motion: reduce) { .sc-frame { background-size: 100% var(--fw), var(--fw) 100%, 100% var(--fw), var(--fw) 100%; } .sc-frame.is-on { animation: none; } }

/* ================================================================ 第29版：枠を描いたあと、中を塗りつぶして文字の色を反転させる */
.sc-frame { position: relative; isolation: isolate; --ft: #111; }
.sc-panel--app .sc-frame, .sc-panel--design .sc-frame { --ft: #fff; }
/* 塗り：左から右へ */
.sc-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fc); transform: scaleX(0); transform-origin: left; }
/* 反転した文字：塗りと同じ速さで、左から見えてくる */
.sc-frame::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; padding: inherit; color: var(--ft); white-space: nowrap; clip-path: inset(0 100% 0 0); pointer-events: none; }
.sc-frame.is-on::before { animation: frame-fill 0.75s cubic-bezier(0.7, 0, 0.2, 1) 1.45s forwards; }
.sc-frame.is-on::after { animation: frame-text 0.75s cubic-bezier(0.7, 0, 0.2, 1) 1.45s forwards; }
@keyframes frame-fill { to { transform: scaleX(1); } }
@keyframes frame-text { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .sc-frame::before { transform: scaleX(1); } .sc-frame::after { clip-path: none; }
  .sc-frame.is-on::before, .sc-frame.is-on::after { animation: none; }
}

/* ================================================================ 第30版：アプリ開発とデザイン制作のスマホは、同じ大きさ・同じ形に（少しずんぐり） */
.sc-phone--app2, .dz-phone { width: clamp(98px, 9.7vw, 140px); aspect-ratio: 53 / 100; }
@media (max-width: 899px) { .sc-phone--app2 { width: clamp(98px, 26vw, 120px); } .dz-phone { width: clamp(98px, 26vw, 120px); } }

/* ================================================================ 第31版：すべてのスマホを同じ形（0.53）に。ホームページ制作の欄のスマホは、アプリ・デザインと同じ大きさに */
.sc-phone, .mk__phone, .dz-phone { aspect-ratio: 53 / 100; }
.sc-media--web .sc-phone { width: clamp(98px, 9.7vw, 140px); }
@media (max-width: 899px) { .sc-media--web .sc-phone { width: clamp(98px, 26vw, 120px); } }

/* ================================================================ 第32版：夜の場面 — 上の黒帯をなくし、時計を2倍に。字幕は映像の中央に重ねる */
.cine { position: relative; }
.cine__screen::before { display: none; }
.film-ui { inset: 14px 16px auto; font-size: 22px; letter-spacing: 0.14em; color: rgba(236, 235, 230, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.cine__subs { position: absolute; z-index: 3; inset: 0 0 9% 0; min-height: 0; padding-inline: var(--gutter); color: #fff; pointer-events: none; }
.cine__subs::before { content: ""; position: absolute; inset: 16% 0; z-index: -1; background: radial-gradient(closest-side, rgba(5, 6, 8, 0.5), rgba(5, 6, 8, 0)); }
.cine__subs .sub:not(.sub--gold) { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.45); }
.cine--static .cine__subs, html:not(.js) .cine__subs { align-content: center; }
@media (max-width: 720px) { .film-ui { inset: 12px 14px auto; } .cine__subs { font-size: clamp(22px, 6.4vw, 30px); } .cine__screen { aspect-ratio: 4 / 5; } }

/* ================================================================ 第32版：「AIに任せるだけでは」— 文の下のグレーの帯が、左から右へ一行ずつ伸びる */
.why__marks { display: grid; gap: clamp(14px, 1.6vw, 22px); justify-items: start; }
.why__title { line-height: 1.5; }
.why__title .ph { display: block; width: fit-content; }
.mk { --band: rgba(10, 11, 12, 0.12); padding: 0.02em 0.1em 0.02em 0; background: linear-gradient(var(--band), var(--band)) no-repeat 0 55% / 100% 84%; -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.js [data-marks] .mk { background-size: 0% 84%; transition: background-size 0.8s cubic-bezier(0.65, 0, 0.25, 1); }
.js [data-marks].is-on .mk { background-size: 100% 84%; }
.why__q { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: #0a0b0c; font-feature-settings: "palt"; }
.why__beat { display: grid; gap: clamp(6px, 0.8vw, 12px); justify-items: start; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.5; }
.why__beat .ln { display: block; width: fit-content; }
.why__beat span, .why__beat span:first-child, .why__beat span:not(:first-child) { font-size: inherit; color: #0a0b0c; }
@media (max-width: 899px) {
  .why__beat { gap: 6px; font-size: clamp(19px, 5.6vw, 26px); }
  .why__beat span, .why__beat span:not(:first-child) { font-size: inherit; }
}
@media (prefers-reduced-motion: reduce) { .js [data-marks] .mk { background-size: 100% 84%; transition: none; } }

/* ================================================================ 第32版：スマホを横向きにしてメニューを開いても、ロゴと文字が重ならない */
/* 横向きは高さが足りず、中央寄せのメニューが上にはみ出してロゴの下に潜っていた。上から並べ、ロゴの帯を黒で残す */
@media (max-width: 899px) and (max-height: 560px) and (orientation: landscape) {
  .nav__list { grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: start; gap: 0 22px;
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 4px) max(var(--gutter), env(safe-area-inset-right, 0px)) 20px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .nav__label, .nav__cta { grid-column: 1 / -1; }
  .nav__svc { grid-column: span 3; }
  .nav__sub { grid-column: span 2; }
  .nav__svc + .nav__sub { grid-column: 1 / span 2; }
  .nav__list .nav__svc a:not(.btn) { padding: 9px 0; font-size: 19px; }
  .nav__list .nav__sub a:not(.btn) { padding: 11px 0; }
  .nav__svc + .nav__sub, .nav__svc + .nav__sub + .nav__sub { margin-top: 0; }
  .nav__cta { margin-top: 16px; }
  .nav__cta .btn { min-height: 46px; }
  .site-header:has(.nav.is-open)::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); background: var(--black); pointer-events: none; }
  .site-header__inner { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
}

/* ================================================================ 第32版：コラムへのリンクと「なぜか」の文も、文節でだけ折り返す */
.colnav__t, .links2 a, .why__q, .why__beat { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.colnav__t, .links2 a { text-wrap: pretty; }