@charset "UTF-8";
/* ==========================================================================
   pages/about-sections.css — /about/（西辻さんの構成案 2026-10-08）の各セクション（p-d系）
   about.css（KV・WHO WE ARE）の上に重ねて読む
   ========================================================================== */

/* 地の色：WHO（白）→ 対応範囲（グレー）→ 強み（白）→ 実績（グレー）→ 相談（白）。
   強みの図（パンフの街並み・地図）が白地で描かれているので、強みを白に置くための並び */
.p-who { background-color: var(--cl-wh); }

/* ② 対応範囲：5工程のイラスト（既存の線画を、明るい地に濃い緑の太めの線で大きく）
   ========================================================================== */
.p-dProc {
  padding-block: var(--sp-sec);
  background-color: var(--cl-bggr);
}

.p-dProc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-block-start: 3.2rem;

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.4rem;
    margin-block-start: 4.8rem;
  }

  & li {
    position: relative;
    display: grid;
    align-content: start;
    gap: 1.2rem;
    padding: 1.6rem 1.2rem 2rem;
    border: 1px solid var(--cl-ln-card);
    background-color: var(--cl-wh);
    text-align: center;
    opacity: 0;
    translate: 0 2rem;
    transition: opacity 0.8s, translate 0.8s var(--ease-out);
    transition-delay: calc(var(--i) * 0.15s);

    @media print, screen and (min-width: 1024px) { padding: 2rem 1.6rem 2.4rem; }
  }

  /* SP：5つ目は下の段の中央に、ほかと同じ大きさで */
  & li:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc(50% - 0.6rem);
  }

  @media print, screen and (min-width: 1024px) {
    & li:last-child { grid-column: auto; justify-self: stretch; inline-size: auto; }

    /* 工程の流れ：カードの間に金の矢印 */
    & li:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-end: -1.9rem;
      inline-size: 1.4rem;
      block-size: 1.4rem;
      translate: 0 -50%;
      background-color: var(--cl-gold);
      mask: url(/assets/images/common/ico_arrow_s.svg) no-repeat center / contain;
    }
  }

  &.is-play li { opacity: 1; translate: 0 0; }
}

.p-dProc-num {
  justify-self: start;
  color: var(--cl-gold);
  font-family: var(--ff-num);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;

  @media print, screen and (min-width: 1024px) { font-size: 2.8rem; }
}

.p-dProc-img img { inline-size: 100%; }

.p-dProc-name {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: 1.5;

  @media print, screen and (min-width: 1024px) { font-size: 2rem; }
}

.p-dProc-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-block-start: 2.4rem;
  font-size: var(--fs-s);
  line-height: 1.8;

  & strong {
    padding: 0.6rem 1.2rem;
    background-color: var(--cl-green-dk);
    color: var(--cl-wh);
  }

  & span { flex: 1 1 32rem; }

  @media print, screen and (min-width: 1024px) { margin-block-start: 3.2rem; font-size: var(--fs-m); }
}

/* ③ 3つの強み
   ========================================================================== */
.p-dStr { padding-block: var(--sp-sec); }

.p-dStr-list {
  display: grid;
  gap: 6.4rem;
  margin-block-start: 4rem;

  @media print, screen and (min-width: 1024px) {
    gap: 12rem;
    margin-block-start: 6.4rem;
  }
}

.p-dStr-item {
  display: grid;
  gap: 3.2rem;
  align-items: center;

  &._wide { gap: 2rem; }

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8rem;

    &._rev > figure { order: -1; }
    &._wide { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }   /* 01：ボタンと街並み図の間は詰める */
  }
}

/* 02：PCは地図を絶対配置で大きく。01の街並み図の下端にすき間なく付け、03の領域まで下にはみ出させる
   （地図の下半分は白くフェードしているので、03の写真・文字は地図の上に重ねる） */
@media print, screen and (min-width: 1024px) {
  .p-dStr { overflow-x: clip; }   /* 地図を画面の右端まで出すので、横スクロールを出さない */

  #strength-procurement {
    --net-w: min(120rem, 78vw);

    position: relative;
    /* 地図の陸地（上から約55%）が 02 の中に収まる高さ。下の白いフェード部分だけ 03 に重なる */
    min-block-size: calc(var(--net-w) * 853 / 757 * 0.55 - 12rem);

    & .p-dStr-text { position: relative; z-index: 1; }
  }

  #strength-support { position: relative; z-index: 1; }
}

.p-dStr-text {
  & h3 {
    margin-block: 1.6rem 2rem;
    color: var(--cl-key);
    font-family: var(--ff-serif);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
  }

  & p {
    max-inline-size: 64rem;
    font-size: var(--fs-m);
    line-height: 1.9;
  }

  & .c-btn { margin-block-start: 3.2rem; }   /* /about/ と同じプライマリーボタン（明るい地なので紺） */
}

.p-dStr-num {
  color: var(--cl-gold);
  font-family: var(--ff-num);
  font-size: 4.8rem;
  font-weight: 300;
  line-height: 1;

  @media print, screen and (min-width: 1024px) { font-size: 6.4rem; }
}

/* 01：街並みの図が左から現れる（clip-path は画像に。figure に付けると IntersectionObserver が見えていないと判定する） */
.p-dStr-city {
  & img {
    inline-size: 100%;
    clip-path: inset(0 100% 0 0);
    /* ease-out だと最初の一瞬でほぼ出きって「パッと」見えるので、左から右へ一定に近い速さで流す */
    transition: clip-path 2.4s cubic-bezier(0.45, 0, 0.25, 1);
  }

  &.is-play img { clip-path: inset(0 0 0 0); }
}

/* 03：写真が少し引きながら出る */
.p-dStr-photo {
  overflow: hidden;

  & img {
    inline-size: 100%;
    opacity: 0;
    scale: 1.08;
    transition: opacity 1s, scale 1.6s var(--ease-out);
  }

  &.is-play img { opacity: 1; scale: 1; }
}

/* 02：拠点ネットワーク（地図は画像、線とピンはSVG） */
/* 地図の絵は上半分に寄っているので、下の余白（海）を切って見せる */
.p-dNet {
  position: relative;
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 64rem;
  aspect-ratio: 757 / 500;
  overflow: hidden;

  & .p-dNet-base { inline-size: 100%; }

  /* PC：絶対配置。上端は 01 の街並み図の下端（= リストの行間ぶん上）、右は余白まで広げる。下は切らずに全体を見せる */
  @media print, screen and (min-width: 1024px) {
    position: absolute;
    z-index: 0;
    inset-block-start: -12rem;
    inset-inline-end: calc((100% - 100vw) / 2);   /* 画面の右端まで */
    inline-size: var(--net-w);
    max-inline-size: none;
    aspect-ratio: 757 / 853;
    overflow: visible;
    pointer-events: none;
  }
}

.p-dNet-over {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 757 / 853;
  overflow: visible;
}

.p-dNet-arc {
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out) calc(0.6s + var(--i) * 0.2s);
}

.p-dNet-pin {
  opacity: 0;
  translate: 0 -14px;
  transition: opacity 0.4s, translate 0.6s var(--ease-out);
  transition-delay: calc(1.6s + var(--i) * 0.15s);

  &._hq { transition-delay: 0.2s; }
}

.p-dNet-pulse {
  fill: var(--cl-gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.p-dNet.is-play {
  & .p-dNet-arc { stroke-dashoffset: 0; }
  & .p-dNet-pin { opacity: 1; translate: 0 0; }
  & .p-dNet-pulse { animation: dNetPulse 2.4s ease-out 1s infinite; }
}

@keyframes dNetPulse {
  0% { opacity: 0.45; scale: 1; }
  100% { opacity: 0; scale: 3.2; }
}

/* ④ 実績・許認可
   ========================================================================== */
.p-dRec {
  padding-block: var(--sp-sec);
  background-color: var(--cl-bggr);
}

.p-dRec-grid {
  display: grid;
  gap: 4.8rem;
  margin-block-start: 4rem;

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 8rem;
    align-items: center;
    margin-block-start: 6.4rem;
  }
}

.p-dSales-label {
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 0.06em;

  @media print, screen and (min-width: 1024px) { font-size: 2rem; }
}

.p-dSales-num {
  margin-block-start: 0.4rem;
  color: var(--cl-green-dk);
  line-height: 1;

  /* 数字も明朝（2026-10-08 ユーザー提案）。等幅数字にすると「7」と「.」の間が空きすぎるので、プロポーショナルのまま */
  & b {
    font-family: var(--ff-serif);
    font-size: 9.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;

    @media print, screen and (min-width: 1024px) { font-size: 16rem; }
  }

  & small {
    margin-inline-start: 0.6rem;
    font-family: var(--ff-serif);
    font-size: var(--fs-2xl);
    font-weight: 600;
  }
}

.p-dSales-ratio {
  display: inline-block;
  margin-block-start: 1.6rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--cl-gold);
  color: var(--cl-gold-dk);
  font-size: var(--fs-m);
  font-weight: 700;
}

.p-dSales-chart {
  display: block;
  inline-size: 100%;
  /* グラフの左上（古い年）は低くて空いているので、数字・比率の下に少し潜らせて詰める。
     右上の矢印と「57.4」は右側なので、左に寄った数字・比率とは重ならない */
  margin-block-start: -2.4rem;
  overflow: visible;

  @media print, screen and (min-width: 1024px) { margin-block-start: -9.6rem; }
}

.p-dSales-axis { stroke: var(--cl-ln-tag); }

/* 面（パンフ p.3 と同じ、区間ごとに左が濃く右が明るい緑）。区間ごとに下から順にせり上がる
   → 金の線が左から引かれる → 点と数字 → 最後に矢印 */
.p-dSales-area {
  fill: url(#dSalesSeg);

  & polygon {
    stroke: rgb(255 255 255 / 0.12);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: bottom;
    scale: 1 0;
    transition: scale 0.9s var(--ease-out) calc(var(--i) * 0.18s);
  }
}

.p-dSales-line {
  fill: none;
  stroke: var(--cl-gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s ease-in-out 1.2s;
}

/* 点：白に金のふち、うっすら光らせる */
.p-dSales-dot {
  fill: var(--cl-wh);
  stroke: var(--cl-gold);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 4px rgb(168 144 88 / 0.7));
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
  transition: scale 0.4s var(--ease-out) calc(1.2s + var(--i) * 0.3s);
}

.p-dSales-val {
  fill: var(--cl-gold-dk);
  font-family: var(--ff-serif);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.6s calc(1.3s + var(--i) * 0.3s);
}

.p-dSales-year {
  fill: var(--cl-gr);
  font-family: var(--ff-num);
  font-size: 14px;
  text-anchor: middle;
}

.p-dSales-arrow {
  fill: none;
  stroke: var(--cl-gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  translate: -8px 10px;
  transition: opacity 0.5s 2.6s, translate 0.8s var(--ease-out) 2.6s;
}

.p-dSales.is-play {
  & .p-dSales-area polygon { scale: 1 1; }
  & .p-dSales-line { stroke-dashoffset: 0; }
  & .p-dSales-dot { scale: 1; }
  & .p-dSales-val { opacity: 1; }
  & .p-dSales-arrow { opacity: 1; translate: 0 0; }
}

.p-dLic {
  display: grid;
  border-block-start: 1px solid var(--cl-ln);

  & li {
    padding-block: 2.4rem;
    border-block-end: 1px solid var(--cl-ln);
  }
}

.p-dLic-label {
  color: var(--cl-gold-dk);
  font-size: var(--fs-s);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.p-dLic-val {
  margin-block-start: 0.8rem;
  color: var(--cl-green-dk);
  font-family: var(--ff-serif);
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.6;
}

/* ⑤ 相談内容から探す
   ========================================================================== */
.p-dConsult { padding-block: var(--sp-sec); }

/* PC：上の段に2つ、下の段に3つ（6列のグリッドで 3+3 / 2+2+2）。タブレットは2列で最後の1つを横長に */
.p-dConsult-list {
  display: grid;
  gap: 1.6rem;
  margin-block-start: 3.2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    & li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2.4rem;
    margin-block-start: 4.8rem;

    & li { grid-column: span 2; }
    & li:nth-child(-n + 2) { grid-column: span 3; }
    & li:last-child:nth-child(odd) { grid-column: span 2; }
  }

  & li { display: grid; }
}

/* カード：上に行き先ページのKV、下に相談内容と行き先 */
.p-dConsult-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  overflow: hidden;
  transition: border-color var(--ease-t), translate var(--ease-t) var(--ease-out), box-shadow var(--ease-t);

  @media (any-hover: hover) {
    &:hover {
      border-color: var(--cl-gold);
      opacity: 1;
      translate: 0 -0.3rem;
      box-shadow: 0 1.2rem 2.4rem rgb(5 47 36 / 0.08);
    }

    &:hover .p-dConsult-img img { scale: 1.05; }
    &:hover .p-dConsult-to::after { translate: 0.4rem 0; }
  }
}

.p-dConsult-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;

  /* PC の上の段（2つ）は幅が広いぶん、下の段（3つ）と写真の高さが近くなるよう横長に */
  @media print, screen and (min-width: 1024px) {
    li:nth-child(-n + 2) > .p-dConsult-card > & { aspect-ratio: 21 / 9; }
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--ease-t-slow) var(--ease-out);
  }
}

.p-dConsult-q {
  padding: 2rem 2.4rem 1.6rem;
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.6;

  @media print, screen and (min-width: 1024px) { padding: 2.4rem 2.8rem 2rem; font-size: 2rem; }
}

.p-dConsult-to {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: 2.4rem;
  padding-block: 1.4rem 2rem;
  border-block-start: 1px solid var(--cl-ln);
  color: var(--cl-blue);

  @media print, screen and (min-width: 1024px) { margin-inline: 2.8rem; padding-block-end: 2.4rem; }
  font-size: var(--fs-s);
  font-weight: 700;

  &::after {
    content: "";
    flex: none;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    background-color: currentColor;
    mask: url(/assets/images/common/ico_arrow_s.svg) no-repeat center / contain;
    transition: translate var(--ease-t) var(--ease-out);
  }
}

/* 動きを減らす設定：最初から完成形 */
@media (prefers-reduced-motion: reduce) {
  .p-dStr-city img,
  .p-dStr-photo img,
  .p-dNet-arc,
  .p-dNet-pin,
  .p-dSales-area polygon,
  .p-dSales-val,
  .p-dSales-line,
  .p-dSales-dot,
  .p-dSales-arrow,
  .p-dProc-list li {
    transition: none !important;
    animation: none !important;
  }
}