/*
 * トップ（/）だけの組み — 編集の手仕事（DESIGN.md）。読み込みは site.css の後（層の外なので、site.css より必ず勝つ）。
 * 1画面目（文章だけ：名乗り → 明朝の一文 → 伺う一行 → 文字リンク）→ 制作実績（全幅の紙の台に 3 画面 → 仕様表／Grand Trading は左右分割）
 * → できること（.section の 5:7）→ どんなご相談ですか？（行一覧）→ このようなサイトを制作できます（図版列）→ 3つの約束
 * → 進め方（2 列 × 3 行）→ つくっている人 → 相談の帯。演出はここ 1 か所：たま結の 3 画面の登場（360ms、reduce では静止）。
 * 地：墨（data-ground="ink"）はヘッダー・1画面目（表紙）・どんなご相談ですか？・3つの約束・相談の帯・フッターの 6 か所。ほかは紙。
 *   表紙は、紙の台（制作実績）が下端から少しのぞく高さで止める。墨が続くのはページ末の「相談の帯＋フッター」だけ。
 */

/* ------------------------------------------------------------ 節の頭（制作実績だけ。ほかは site.css の .section） */

.sec-head {
  padding-top: var(--sp-5);
  border-top: var(--rule) solid var(--line-strong);
}

.sec-head .eyebrow + h2 {
  margin-top: var(--sp-2);
}

.sec-head .permission {
  margin-top: var(--sp-4);
}

@media (min-width: 1024px) {
  .sec-head--split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--col-gap);
    align-items: end;
  }

  .sec-head--split .permission {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------ 1画面目：文章だけ。墨の表紙 */

/* 高さは「画面 − ヘッダー − 380px」、上限 680px。380px は制作実績の見出しと台の頭のぶんで、1440×900 では表紙が中身の高さになり、
   紙の台の中の画面が下端からのぞく（空の墨で高さを稼がない）。1023px 以下は中身の高さ。名乗りと一文は上、伺う一行と押す先は下端の罫の上。
   押す先をリードの直下に移した分（1 行）は、上下の余白と一文の下の余白を 1 段ずつ詰めて相殺する（2026-09-28 第 2 回） */
.intro {
  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - var(--header-h) - 380px), 680px);
  padding-top: clamp(40px, 4vw + 16px, 80px);
  padding-bottom: clamp(32px, 3vw + 12px, 56px);
}

@media (max-width: 1023px) {
  .intro {
    min-height: auto;
  }
}

.intro__inner {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.intro__role {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  max-inline-size: none;
  color: var(--ink-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.intro__name {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* 明朝の一文（署名の要素）。PC 2 行、SP 4〜5 行 */
.intro__title {
  max-inline-size: 26em;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: clamp(1.875rem, 1.2rem + 1.7vw, 2.5rem);
}

.intro__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: var(--rule) solid var(--line);
}

.intro__lead {
  max-inline-size: 30em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: 0.01em;
  word-break: auto-phrase;
}

.intro__action {
  margin-top: var(--sp-4);
}

/* 押す先（制作実績を見る）は、どの幅でもリードの直下・左端に置く（1440 で右端に置くと、行末から 570px 離れて見落とす。2026-09-28 第 2 回） */


/* ------------------------------------------------------------ 制作実績 */

.works {
  padding-top: clamp(56px, 5vw + 24px, 112px);
}

.work-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-section);
  margin-top: var(--space-block);
}

/* 全幅の紙の台（画面の端まで）。3 画面を下端でそろえ、1px の罫で縁を取る。影なし */
.plate--bleed {
  padding: 0;
  border-inline: 0;
}

.plate__inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3%;
  padding-top: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(32px, 4vw, 64px);
}

.plate__main {
  width: min(40%, 320px);
}

.plate__side {
  width: min(26%, 260px);
}

.plate--bleed .plate__caption {
  padding-block: var(--sp-3) var(--sp-4);
  border-top: var(--rule) solid var(--line);
}

/* SP：3 画面は横スクロールの帯（各 72vw。読めない幅にしない） */
@media (max-width: 767px) {
  .plate--bleed .plate__inner {
    position: relative;
    width: auto;
    justify-content: flex-start;
    gap: var(--sp-4);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .plate--bleed .plate__inner::-webkit-scrollbar {
    display: none;
  }

  .plate--bleed .plate__inner img {
    flex: none;
    width: 72vw;
    max-width: 320px;
    scroll-snap-align: start;
    scroll-margin-left: var(--gutter);
  }

  /* SP は 1 画面目を先頭に（左端から読める順に） */
  .plate--bleed .plate__main {
    order: -1;
  }
}

/* 演出はここ 1 か所：3 画面が 12px 下から現れる（360ms ease-out。1 画面目が先、両脇が 80ms 遅れ） */
@media (prefers-reduced-motion: no-preference) {
  .plate--showpiece img {
    animation: plate-rise var(--t-showpiece) var(--ease-out) both;
  }

  .plate--showpiece .plate__side {
    animation-delay: 80ms;
  }

  @keyframes plate-rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
}

/* 仕様表と見どころ：左 5 列（名前・仕様・リンク）、右 7 列（見どころ） */
.work__sheet {
  margin-top: var(--space-block);
}

.work__title {
  font-size: var(--fs-h3);
}

/* 作品名のリンクは触れる範囲 44px（上下の負の余白で相殺して、行の高さと仕様表の位置は変えない） */
.work__title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-block: calc((var(--lh-h3) * 1em - var(--tap)) / 2);
  color: var(--ink);
  text-decoration: none;
}

.work__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}

.work__head .spec {
  margin-top: var(--sp-4);
}

.work__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  max-inline-size: none;
  margin-top: var(--sp-3);
}

.work__notes {
  margin-top: var(--sp-6);
}

.work__notes-title {
  color: var(--ink-3);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
}

.work__notes .work__points {
  margin-top: var(--sp-2);
}

@media (min-width: 1024px) {
  .work__sheet {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--col-gap);
  }

  .work__notes {
    margin-top: 0;
  }

  /* 左の仕様表（作品名の行＋16px の下）と右の見どころ（「見どころ」の行＋この余白の下）の罫を同じ高さに引く（2026-09-28 第 2 回） */
  .work__sheet:not(.work__sheet--stack) .work__notes .work__points {
    margin-top: calc(var(--fs-h3) * var(--lh-h3) + var(--sp-4) - var(--fs-label) * var(--lh-label));
  }

  .work__sheet--stack {
    display: block;
  }

  .work__sheet--stack .work__notes {
    margin-top: var(--sp-6);
  }
}

/* Grand Trading：左に 2 画面（同じ台・同じ大きさ・同じ名札）、右に仕様表 */
.work__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-block);
}

.work__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sp-5);
  padding: var(--sp-4);
}

.work__media .shot img {
  width: 100%;
}

.work--split .work__sheet {
  margin-top: 0;
}

@media (min-width: 768px) {
  .work__media {
    padding: var(--sp-5);
  }
}

@media (min-width: 1024px) {
  .work__split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
}

/* ------------------------------------------------------------ どんなご相談ですか？ */

.doors-more {
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------ 制作できるサイトの例：3 画面を台に 1px の罫で。画面の下に業種とサイトの種類 */

/* 台（.sample-row。SP では横スクロールの帯で、名前つきの領域）の中に、3 点の一覧（ul）。一覧は一覧のまま読み上げる */
.sample-row {
  padding: var(--sp-4);
  border: var(--rule) solid var(--line);
  background: var(--surface);
}

.sample-row > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.sample-row li {
  max-inline-size: none;
}

.sample-row .device__frame img {
  aspect-ratio: 390 / 740;
  object-fit: cover;
  object-position: top;
}

.sample-row figcaption {
  margin-top: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.6;
  word-break: auto-phrase;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .sample-row {
    padding: var(--space-block);
  }

  .sample-row > ul {
    gap: var(--col-gap);
  }
}

/* SP：3 点は横スクロールの帯（見本の一覧のカードと同じ 60vw・250px まで。98px の読めない幅にしない）。台は画面の端まで */
@media (max-width: 767px) {
  .sample-row {
    position: relative;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--sp-4) 0;
    border-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .sample-row::-webkit-scrollbar {
    display: none;
  }

  .sample-row > ul {
    display: flex;
    gap: var(--sp-4);
    width: max-content;
    padding-inline: var(--gutter);
  }

  .sample-row li {
    flex: none;
    width: 60vw;
    max-width: 250px;
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------ 3つの約束：墨の帯（.section--band）に等幅数字 1・2・3 の 3 行 */

/* 罫は列の幅いっぱい（ほかの一覧・できることと右端をそろえる）。文字だけを右の余白で 38em に収める */
.promise-list {
  border-top: var(--rule) solid var(--line);
  counter-reset: promise;
}

.promise-list li {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  column-gap: var(--sp-3);
  padding: var(--sp-4) 0;
  padding-inline-end: max(0px, calc(100% - var(--measure)));
  border-bottom: var(--rule) solid var(--line);
  color: var(--ink-body);
  counter-increment: promise;
}

.promise-list li::before {
  content: counter(promise);
  padding-top: 0.15em;
  color: var(--ink-3);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ 進め方：2 列 × 3 行（番号は左に小さく等幅） */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule) solid var(--line);
  counter-reset: flow;
}

.flow > li {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-4) 0;
  border-bottom: var(--rule) solid var(--line);
  counter-increment: flow;
}

.flow > li::before {
  content: counter(flow);
  grid-row: 1 / span 2;
  padding-top: 0.2em;
  color: var(--ink-3);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.flow__title {
  font-size: var(--fs-body);
}

.flow > li p {
  margin-top: var(--sp-1);
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.8;
}

@media (min-width: 768px) {
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .flow > li {
    padding: var(--sp-5) 0;
  }
}

/* ------------------------------------------------------------ つくっている人 */

.about-teaser .maker + p {
  margin-top: var(--sp-5);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-6);
  max-inline-size: none;
}

/* ------------------------------------------------------------ 相談の窓口：墨の帯（地は data-ground が塗る）。3 つの窓口を縦罫で分ける */

.contact-band {
  margin-top: var(--space-section);
  padding-block: var(--space-section);
}

.contact-band__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sp-4);
}

.contact-band__lead {
  max-inline-size: 34em;
  word-break: auto-phrase;
}

.methods--band {
  gap: 0;
  max-width: none;
  margin-top: var(--space-block);
  border-top: var(--rule) solid var(--line-strong);
}

.methods--band > li {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) 0;
  border-bottom: var(--rule) solid var(--line);
}

.methods--band .methods__title {
  font-size: var(--fs-body);
}

.methods--band .methods__desc {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.methods--band .btn {
  margin-top: auto;
  max-width: 22rem;
}

.contact-band__more {
  margin-top: var(--sp-6);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

@media (min-width: 1024px) {
  .contact-band__head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--col-gap);
    align-items: start;
  }

  .contact-band__lead {
    margin-top: 0.35em;
  }

  .methods--band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: var(--rule) solid var(--line);
  }

  .methods--band > li {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
    border-bottom: 0;
    border-left: var(--rule) solid var(--line);
  }

  .methods--band > li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .methods--band > li:last-child {
    padding-right: 0;
  }
}