/* ============================================================
   制作の流れ
   (1) /flow/ 詳細ページ  … .fw-*
   (2) トップページの3ステップ要約 … .fw-brief
   ------------------------------------------------------------
   読み込み順の前提:
     下層ページ  style-home.css → other.css → hero-front.css → flow.css
     トップページ style-front.css → hero-front.css → flow.css
   --fph-* のトークンは hero-front.css の :root で定義しているので、
   このファイルは必ず hero-front.css より後に読み込むこと。

   このファイルには Sass の元ファイルが無いので直接編集してよい。
   (other.css / style-home.css / style-front.css / clinic-website.css は
    Sassからの生成物なので直接編集しないこと。)

   注意:このテーマには box-sizing:border-box の全体指定が無い。
   幅と余白を同時に持たせる箱には、その都度 box-sizing を書くこと。
   ============================================================ */

/* ------------------------------------------------------------
   ページ上部の帯は他の下層ページと共通の .top-header(other.css)を使う。
   /service/ や /about/ と同じ --message(img/messagebg.png)。
   このファイルには帯まわりのCSSを置かないこと。
------------------------------------------------------------ */

/* ------------------------------------------------------------
   本文の導入
------------------------------------------------------------ */
.fw-intro {
  background: #fff;
  padding-block: clamp(46px, 7vw, 84px) clamp(10px, 2vw, 20px);
}
/* パンくず(other.css)は margin-bottom:80px を持っている。
   その直後だと上が160px近く空いてしまうので、ここだけ詰める */
.breadcrumb + .fw-intro {
  padding-block-start: clamp(10px, 1.6vw, 20px);
}
.fw-intro__tx {
  margin: 0;
  max-width: 44em;
  font-size: clamp(15.5px, 1.7vw, 17px);
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--fph-ink-soft);
}
.fw-intro__tx + .fw-intro__tx {
  margin-block-start: 1.6em;
}
.fw-intro__tx b {
  font-weight: 500;
  color: var(--fph-ink);
}

/* 役割バッジの凡例。本文に入る前に、記号の意味を先に渡しておく */
.fw-legend {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-block-start: clamp(26px, 4vw, 40px);
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
  background: #faf9f6;
  border: 1px solid var(--fph-line);
}
.fw-legend__lb {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--fph-ink-soft);
  margin-inline-end: 2px;
}

/* ------------------------------------------------------------
   役割バッジ
   誰が動く工程なのかを3色で示す。ページ全体が紺＋金の硬い配色なので、
   ここだけ小児科・幼稚園サイトのような明るい色を丸ピンで置いて、
   長い工程一覧の中の目印にする。

   濃い色をベタ塗りして白抜きにすると、明るくするほど文字が読めなくなる。
   そのため「淡い地＋同系の濃い文字＋中間色の枠線」の組み合わせにしてある。
   文字色と地のコントラスト比は水色5.6 / 橙5.1 / 緑5.4(基準4.5以上)。
   色が判別しづらい人にも伝わるよう、バッジの中には必ず語
   (お客さま/弊所/両者)を入れること。色だけに意味を持たせない。
------------------------------------------------------------ */
.fw-role {
  box-sizing: border-box;
  display: inline-block;
  padding: 6px 16px 7px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: 999px;
}
/* お客さまに動いていただく工程 — 水色 */
.fw-role--client {
  background: #e4f2fc;
  border-color: #7fc4ea;
  color: #14608e;
}
/* 弊所が作業する工程 — 橙 */
.fw-role--uj {
  background: #fff0dd;
  border-color: #f3bd77;
  color: #9a5510;
}
/* 打ち合わせなど、両者で進める工程 — 緑 */
.fw-role--both {
  background: #e2f5e9;
  border-color: #85cfa5;
  color: #1f6b42;
}

/* ------------------------------------------------------------
   工程一覧(縦のタイムライン)
   トップページの .fp-flow と同じ語彙(紺の丸数字＋細い縦線)を使う。
   別の見た目にすると、同じ「制作の流れ」が2つあるように見えるため。
------------------------------------------------------------ */
.fw-steps {
  background: #fff;
  padding-block: clamp(40px, 6vw, 70px) clamp(60px, 9vw, 110px);
}
.fw-steps__list {
  position: relative;
  padding-inline-start: clamp(58px, 7.6vw, 84px);
}
.fw-steps__list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 縦線。丸数字と同じ幅の枠を同じ位置に置き、その中央に1px引く
   (半分の値を手で計算するとズレるので 50% で出す) */
.fw-steps__line {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: clamp(42px, 5.6vw, 56px);
  pointer-events: none;
}
.fw-steps__line::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fph-line);
}
/* スクロールで伸びる紺の線。伸ばすのは js/flow.js。
   既定を scaleY(1) にしてあるので、JSが動かなくても線は全長で出る
   (0から始めるのは flow.js が動いたときだけ) */
.fw-steps__line-fill {
  position: absolute;
  left: 50%;
  margin-left: -0.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fph-navy);
  transform: scaleY(1);
  transform-origin: top center;
  will-change: transform;
}
.fw-step {
  position: relative;
  margin: 0;
  padding-block: clamp(26px, 3.6vw, 40px);
}
.fw-step + .fw-step {
  border-block-start: 1px solid var(--fph-line);
}
.fw-step__num {
  box-sizing: border-box;
  position: absolute;
  left: calc(-1 * clamp(58px, 7.6vw, 84px));
  top: clamp(26px, 3.6vw, 40px);
  width: clamp(42px, 5.6vw, 56px);
  height: clamp(42px, 5.6vw, 56px);
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--fph-navy);
  border-radius: 50%;
  color: var(--fph-navy);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(14px, 1.8vw, 17px);
  letter-spacing: 0.08em;
  z-index: 1;
  transition: background-color 0.4s var(--fph-ease), color 0.4s var(--fph-ease),
    box-shadow 0.4s var(--fph-ease);
}
/* 紺の線が到達した番号を点灯(トップページの .fp-flow__num と同じ挙動) */
.fw-step__num.is-active {
  background: var(--fph-navy);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(36, 59, 101, 0.08);
}
.fw-step__ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 14px;
  font-size: clamp(19px, 2.5vw, 24px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--fph-ink);
}
/* 本文は1行が長くなりすぎると目が戻れなくなるので、
   コンテナ幅いっぱいにせず40字強で折り返す */
.fw-step__tx {
  margin: 0;
  max-width: 44em;
  font-size: clamp(15.5px, 1.7vw, 16.5px);
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--fph-ink-soft);
}
.fw-step__tx + .fw-step__tx,
.fw-note + .fw-step__tx {
  margin-block-start: 1.3em;
}
.fw-step__tx b {
  font-weight: 500;
  color: var(--fph-ink);
}

/* 工程の中の補足箱(ご用意いただくもの・お支払いなど)
   本文と同じ見た目だと読み飛ばされるので、地を敷いて金の縦線で留める */
.fw-note {
  box-sizing: border-box;
  margin-block-start: clamp(16px, 2.4vw, 22px);
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 24px);
  background: #faf9f6;
  border-inline-start: 2px solid var(--fph-gold);
}
.fw-note__ttl {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fph-ink);
}
.fw-note ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fw-note li {
  list-style: none;
  margin: 0;
  padding-inline-start: 20px;
  position: relative;
  font-size: 15px;
  line-height: 1.95;
  color: var(--fph-ink-soft);
}
.fw-note li + li {
  margin-block-start: 6px;
}
.fw-note li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: var(--fph-gold);
}

/* 工程の中の小工程(打ち合わせ→制作→確認)。
   ワイヤーフレーム・デザイン・デモサイトはどれも同じ回し方なので、
   同じ形の帯で3回見せて「毎回この順で進む」と分からせる */
.fw-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}
.fw-sub__i {
  box-sizing: border-box;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 7px 14px 8px;
  background: #fff;
  border: 1px solid var(--fph-line);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--fph-ink);
}
.fw-sub__i + .fw-sub__i {
  margin-inline-start: 30px;
}
.fw-sub__i + .fw-sub__i::before {
  content: "→";
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--fph-gold);
}
.fw-sub__i em {
  font-style: normal;
  color: var(--fph-navy);
}

/* 所要期間などの1行メモ */
.fw-term {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-block-start: clamp(14px, 2vw, 18px);
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--fph-ink-soft);
}
.fw-term__k {
  color: var(--fph-navy);
  border-block-end: 1px solid var(--fph-line);
  padding-block-end: 2px;
}

/* ------------------------------------------------------------
   ページ末の補足(お支払いについて 等)
------------------------------------------------------------ */
.fw-after {
  background: #faf9f6;
  border-block-start: 1px solid var(--fph-line);
  padding-block: clamp(56px, 8vw, 96px);
}
.fw-after__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
.fw-card {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--fph-line);
  padding: clamp(22px, 3vw, 32px);
}
.fw-card__ttl {
  margin: 0 0 14px;
  font-size: clamp(16.5px, 2vw, 18.5px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--fph-ink);
}
.fw-card__tx {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--fph-ink-soft);
}

/* ------------------------------------------------------------
   トップページに置く3ステップ要約
   詳細は /flow/ に送り、ここでは「相談 → 制作 → 公開後」だけ見せる。
   .fp-flow(7工程)と入れ替えて使うこと。両方出すと同じ話が2度出る。
------------------------------------------------------------ */
.fw-brief {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 3つの丸をつなぐ横線。丸の中心(=上から27px)に引き、
   1つ目と3つ目の丸の中心どうしを結ぶので left/right は列幅の半分 */
.fw-brief::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 16.666%;
  right: 16.666%;
  height: 1px;
  background: var(--fph-line);
  pointer-events: none;
}
.fw-brief__item {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.fw-brief__num {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  background: #fff;
  border: 1px solid var(--fph-navy);
  border-radius: 50%;
  color: var(--fph-navy);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 16px;
  letter-spacing: 0.08em;
}
.fw-brief__ttl {
  margin: 0 0 12px;
  font-size: clamp(17px, 2.1vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--fph-ink);
}
.fw-brief__tx {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--fph-ink-soft);
}

/* ------------------------------------------------------------
   スマホ
------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  /* SPではパンくずの margin-bottom が 20px まで縮むので(other.css)、
     PC向けに詰めた分をここで戻す */
  .breadcrumb + .fw-intro {
    padding-block-start: 30px;
  }
  .fw-steps__list {
    padding-inline-start: 58px;
  }
  .fw-step__num {
    left: -58px;
    width: 42px;
    height: 42px;
  }
  .fw-steps__line {
    width: 42px;
  }
  .fw-step__ttl {
    font-size: 18px;
    gap: 8px 10px;
  }

  /* 小工程は横に並べると折り返しの行頭に矢印が残るので、縦積みにして矢印も下向きへ */
  .fw-sub {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .fw-sub__i + .fw-sub__i {
    margin-inline-start: 0;
    margin-block-start: 26px;
  }
  .fw-sub__i + .fw-sub__i::before {
    content: "↓";
    left: 16px;
    top: -21px;
    transform: none;
  }

  /* 3ステップは横に並べると1つあたりが狭くなりすぎるので、
     縦積みにして丸数字を左へ出す(線は消す) */
  .fw-brief {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fw-brief::before {
    display: none;
  }
  .fw-brief__item {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    padding-block: 20px;
  }
  .fw-brief__item + .fw-brief__item {
    border-block-start: 1px solid var(--fph-line);
  }
  .fw-brief__num {
    width: 42px;
    height: 42px;
    margin: 0;
    font-size: 14px;
    grid-row: span 2;
  }
  .fw-brief__ttl {
    font-size: 17px;
    margin-block-start: 8px;
  }
}