@charset "UTF-8";

/*
  オープニングの装飾（細い軌道・走査線・点・角のフレーム・等幅ラベル）を、
  通常TOPとモードチェンジへ引き継ぐ。装飾はすべて読み上げ・操作の対象外。
  動くのは「Heroの受け渡し」「章ラベルの線」「モード入室時の走査線」「俯瞰図の見出し線」のみで、いずれも1回だけ再生する。

  2026-09-28 第2弾: 1pxの線だけでは見えにくかったため、
  章見出しを「側線＋角のフレーム＋方眼」の見出し板に、カード類を「緑の縁＋角」のパネルにした。
  モードチェンジは粒データ（制作時の画面の写し）とずれないよう、余白・寸法を変えず、
  背景・内側の影・outline・疑似要素だけで枠を描く。
*/

.concept-a {
  /* Hero本文の左端から22px外側を「糸」の位置にする。% は使う要素の幅（mainと同じ幅）で解決される。 */
  --ct-thread-x: calc(max(44px, (100% - 1390px) / 2) - 22px);
  --ct-shell-x: max(44px, (100% - 1360px) / 2);
  --ct-pad: clamp(88px, 9vw, 144px);
  --ct-line: rgba(42, 147, 87, .32);
  --ct-ring: #2a9357;
  --ct-fill: #2a9357;
  --ct-mint: #a6d9af;
  /* パネル共通の色。縁は濃い緑、面は白・生成り・薄いミントの3種類だけを使う。 */
  --ct-edge: #2a9357;
  --ct-edge-deep: #1c6b40;
  --ct-panel-line: #b3cfb9;
  --ct-mint-surface: #eef7ef;
  --ct-head-pad: clamp(22px, 2.6vw, 38px);
  --ct-head-bg: #fff;
  --ct-head-grid: rgba(42, 147, 87, .1);
  --ct-chip-bg: #e8f4ea;
}

/* ---------- 通常TOP: Hero ---------- */

/* オープニングの上部ラベルと角のフレームが、Heroの左端に残って縦の糸になる。 */
.concept-a .ct-hero-mark { display: none; }
@media (min-width: 851px) {
  .concept-a .ct-hero-mark { position: absolute; z-index: 1; top: 20px; bottom: 0; left: var(--ct-thread-x); display: block; width: 1px; pointer-events: none; }
  .concept-a .ct-hero-mark::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-top: 2px solid #8fd6a0; border-left: 2px solid #8fd6a0; }
  .concept-a .ct-hero-mark::after { content: ""; position: absolute; top: 262px; bottom: 0; left: 0; width: 1px; background: linear-gradient(rgba(150, 200, 160, 0), rgba(150, 200, 160, .55) 22%, rgba(150, 200, 160, .55)); transform-origin: top; }
  .concept-a .ct-hero-caption { position: absolute; top: 36px; left: -5px; color: #a4c7ad; font: 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .22em; white-space: nowrap; writing-mode: vertical-rl; opacity: .9; }

  /* 写真と進め方の図解を、少し外側の細い枠と明るい角で囲む。枠は写真の外側だけに置く。 */
  .concept-a .a-live-visual::before,
  .concept-a .a-live-visual::after { content: ""; position: absolute; inset: -14px; pointer-events: none; }
  .concept-a .a-live-visual::before { z-index: 0; border: 1px solid rgba(166, 217, 175, .34); }
  .concept-a .a-live-visual::after {
    z-index: 7;
    background:
      linear-gradient(#8fd6a0, #8fd6a0) 0 0 / 30px 2px no-repeat,
      linear-gradient(#8fd6a0, #8fd6a0) 0 0 / 2px 30px no-repeat,
      linear-gradient(#8fd6a0, #8fd6a0) 100% 100% / 30px 2px no-repeat,
      linear-gradient(#8fd6a0, #8fd6a0) 100% 100% / 2px 30px no-repeat,
      linear-gradient(rgba(166, 217, 175, .7), rgba(166, 217, 175, .7)) 100% 0 / 12px 1px no-repeat,
      linear-gradient(rgba(166, 217, 175, .7), rgba(166, 217, 175, .7)) 0 100% / 1px 12px no-repeat;
  }
}
/* 狭い画面では写真が背景になるため、本文の左に側線を引いて見出しのまとまりを示す。 */
@media (max-width: 850px) {
  .concept-a .a-hero-copy { padding-left: 16px; border-left: 2px solid rgba(143, 214, 160, .6); }
}
.concept-a .a-hero .eyebrow { display: inline-block; padding: 6px 12px; border: 1px solid rgba(166, 217, 175, .42); background: rgba(166, 217, 175, .07); }
.concept-a .a-hero-foot { padding-top: 18px; border-top: 1px solid rgba(166, 217, 175, .32); }
.concept-a .a-live { border-color: rgba(166, 217, 175, .42); border-top: 2px solid #8fd6a0; }

/* 「SCROLL TO EXPLORE」と矢印の間に、オープニングの横の走査線と2つの点を置く。 */
.concept-a .a-scroll > span:last-child { order: 2; }
.concept-a .a-scroll::before {
  content: "";
  order: 1;
  flex: 1 1 auto;
  height: 7px;
  margin: 0 18px;
  background:
    radial-gradient(circle closest-side, #b8dfbd 58%, transparent 72%) left center / 7px 7px no-repeat,
    radial-gradient(circle closest-side, rgba(184, 223, 189, .55) 58%, transparent 72%) right center / 7px 7px no-repeat,
    linear-gradient(90deg, rgba(166, 217, 175, .6), rgba(166, 217, 175, .18) 55%, rgba(166, 217, 175, .5)) center / calc(100% - 14px) 1px no-repeat;
  transform-origin: left center;
  pointer-events: none;
}

/* オープニングが閉じた直後にだけ、糸・枠・走査線が引き継がれるように描かれる。再生中は隠しておく。 */
.intro-ready .concept-a .ct-hero-mark,
.intro-ready .concept-a .a-live-visual::before,
.intro-ready .concept-a .a-live-visual::after,
.intro-ready .concept-a .a-scroll::before { opacity: 0; }
.intro-done .concept-a .ct-hero-mark::before,
.intro-done .concept-a .ct-hero-caption { animation: ct-fade-in .8s .15s ease both; }
.intro-done .concept-a .ct-hero-mark::after { animation: ct-draw-y 1.3s .35s cubic-bezier(.16, 1, .3, 1) both; }
.intro-done .concept-a .a-live-visual::before,
.intro-done .concept-a .a-live-visual::after { animation: ct-fade-in .9s .3s ease both; }
.intro-done .concept-a .a-scroll::before { animation: ct-draw-x 1.2s .6s cubic-bezier(.16, 1, .3, 1) both; }

/* ---------- 通常TOP: 章見出しの板 ---------- */

/*
  各章の見出しを、緑の側線・右の角のフレーム・右側だけに出る方眼で囲んだ「見出し板」にする。
  面の色は章の背景と入れ替えて、章ごとの区切りがはっきり見えるようにする。
*/
.concept-a main .section-heading,
.concept-a .faq-grid > div:first-child,
.concept-a .a-about-grid > div:first-child {
  position: relative;
  padding: var(--ct-head-pad) clamp(22px, 3vw, 48px) var(--ct-head-pad) clamp(22px, 3.2vw, 48px);
  border: 1px solid var(--ct-panel-line);
  border-left: 4px solid var(--ct-edge);
  background:
    linear-gradient(90deg, var(--ct-head-bg) 46%, transparent 94%),
    linear-gradient(var(--ct-head-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--ct-head-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--ct-head-bg);
}
.concept-a main .section-heading::before,
.concept-a main .section-heading::after,
.concept-a .faq-grid > div:first-child::before,
.concept-a .faq-grid > div:first-child::after,
.concept-a .a-about-grid > div:first-child::before,
.concept-a .a-about-grid > div:first-child::after { content: ""; position: absolute; right: 10px; width: 18px; height: 18px; pointer-events: none; }
.concept-a main .section-heading::before,
.concept-a .faq-grid > div:first-child::before,
.concept-a .a-about-grid > div:first-child::before { top: 10px; border-top: 2px solid var(--ct-edge); border-right: 2px solid var(--ct-edge); }
.concept-a main .section-heading::after,
.concept-a .faq-grid > div:first-child::after,
.concept-a .a-about-grid > div:first-child::after { bottom: 10px; border-bottom: 2px solid var(--ct-edge); border-right: 2px solid var(--ct-edge); }

/* 章ごとの面。白い章には薄いミント、色のある章には白を置く。 */
.concept-a .a-ai,
.concept-a .a-works,
.concept-a .a-process { --ct-head-bg: var(--ct-mint-surface); --ct-chip-bg: #fff; }
/* 04 事例は、上の太い罫で始まる雑誌の扉のような板にする。 */
.concept-a .a-works .section-heading { border-left-width: 1px; border-top: 5px solid var(--ct-edge-deep); }
/* 05 運営サービスは、オープニングと同じ濃い緑の板にする（ページの中ほどで一度だけ）。 */
.concept-a .a-products { --ct-head-bg: #143f28; --ct-head-grid: rgba(166, 217, 175, .13); --ct-chip-bg: rgba(166, 217, 175, .1); }
.concept-a .a-products .section-heading { border-color: #1d5a37; border-left-color: #8fd6a0; color: #eef8ef; }
.concept-a .a-products .section-heading::before,
.concept-a .a-products .section-heading::after { border-color: #8fd6a0; }
.concept-a .a-products .section-heading h2 { color: #f2f8f2; }
.concept-a .a-products .section-heading > p { color: #cfe3d3; }
/* 08 拠点は背景の同心円が見えるよう、面を塗らず線だけの板にする。 */
.concept-a .a-about-grid > div:first-child { background: none; border-color: #8fb79a; }

/* 章番号は等幅の札にし、先頭に四角い節点、後ろに伸びる線を置く。 */
.concept-a main .section-index,
.concept-a .top-contact-form-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgba(39, 116, 71, .42);
  background: var(--ct-chip-bg);
  color: #1c6b40;
  font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}
.concept-a main .section-index::before,
.concept-a .top-contact-form-kicker::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ct-edge); pointer-events: none; }
.concept-a main .section-index::after {
  content: "";
  flex: 0 0 clamp(28px, 4vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: .7;
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) .2s;
  pointer-events: none;
}
.ct-armed .concept-a main section:not(.is-ct-reached) .section-index::after { transform: scaleX(0); }
.concept-a .a-products .section-index,
.concept-a .a-contact .section-index { border-color: rgba(166, 217, 175, .5); color: #bfe6c7; }
.concept-a .a-products .section-index::before,
.concept-a .a-contact .section-index::before { background: #8fd6a0; }
.concept-a .a-contact .section-index { background: rgba(166, 217, 175, .1); }

/* 広い画面では、Heroから相談窓口まで左余白に1本の糸を通し、各章の番号の高さに点を置く。点から出る線は見出し板の側線まで届く。 */
@media (min-width: 851px) {
  .concept-a main > .section-space:not(.top-contact-form-section) { position: relative; --ct-dot-y: calc(var(--ct-head-pad) + 13px); }
  .concept-a main > .a-contact.section-space { --ct-dot-y: 13px; }
  .concept-a main > .section-space:not(.top-contact-form-section)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ct-thread-x);
    width: 1px;
    background: var(--ct-line);
    pointer-events: none;
  }
  .concept-a main > .section-space:not(.top-contact-form-section)::after {
    content: "";
    position: absolute;
    top: calc(var(--ct-pad) + var(--ct-dot-y));
    left: calc(var(--ct-thread-x) - 4px);
    width: calc(var(--ct-shell-x) - max(44px, (100% - 1390px) / 2) + 26px);
    height: 9px;
    background:
      radial-gradient(circle at 4.5px 50%, var(--ct-fill) 0 2.8px, var(--ct-ring) 3.2px 4.3px, transparent 4.7px) 0 0 / 10px 100% no-repeat,
      linear-gradient(90deg, var(--ct-ring), rgba(42, 147, 87, .45)) 10px 50% / calc(100% - 10px) 1px no-repeat;
    pointer-events: none;
  }
  /* まだ読んでいない章は中空の点。通過すると塗られる。 */
  .ct-armed .concept-a main > .section-space:not(.is-ct-reached) { --ct-fill: #f8fbf6; }
}

/* ---------- 通常TOP: カードとパネル ---------- */

/* パネル共通の角。右上に短い2本線を置く。 */
.concept-a .a-scope .scope-list article::after,
.concept-a .a-ai .ai-path article::after,
.concept-a .ai-sample-card::after,
.concept-a .ai-usecase-shell::after,
.concept-a .top-contact-form-section .linker-contact-form::after,
.concept-a .contact-first-note::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--ct-edge);
  border-right: 2px solid var(--ct-edge);
  pointer-events: none;
}

/* 01 支援領域: 罫線の行を、左に緑の縁がある独立したパネルにする。番号は四角い札。 */
.concept-a .a-scope .scope-list { display: grid; gap: 12px; border-top: 0; }
.concept-a .a-scope .scope-list article,
.concept-a .a-scope .scope-list article:hover {
  position: relative;
  padding: clamp(26px, 3vw, 36px) clamp(22px, 2.8vw, 38px);
  border: 1px solid var(--ct-panel-line);
  border-left: 4px solid var(--ct-edge);
  background: #fff;
}
.concept-a .a-scope .scope-list article:hover { border-color: #86b893; border-left-color: var(--ct-edge-deep); background: #f7fcf7; }
.concept-a .a-scope .scope-list article > span:first-child {
  display: grid;
  place-items: center;
  width: min(100%, 48px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--ct-edge);
  background: var(--ct-mint-surface);
  color: var(--ct-edge-deep);
  font: 700 13px/1 ui-monospace, SFMono-Regular, monospace;
}
.concept-a .a-scope .scope-end { justify-self: end; padding: 6px 10px; border: 1px solid var(--ct-panel-line); background: var(--ct-mint-surface); color: #2d6e47; }

/* 01 の濃い緑の案内帯に、オープニングの角のフレーム。 */
.concept-a .scope-cta,
.concept-a .ai-samples-contact { position: relative; }
.concept-a .scope-cta::before,
.concept-a .scope-cta::after,
.concept-a .ai-samples-contact::before,
.concept-a .ai-samples-contact::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.concept-a .scope-cta::before,
.concept-a .ai-samples-contact::before { top: 8px; left: 8px; border-top: 2px solid #a6d9af; border-left: 2px solid #a6d9af; }
.concept-a .scope-cta::after,
.concept-a .ai-samples-contact::after { right: 8px; bottom: 8px; border-right: 2px solid #a6d9af; border-bottom: 2px solid #a6d9af; }
.concept-a .a-deep-links a { border-color: var(--ct-panel-line); border-left: 4px solid var(--ct-edge); }

/* 02 AI活用: 3枚のカードを離し、上に緑の帯。学ぶ → 試す → 組み込む は、カードの間の点でつながる1本の経路。 */
.concept-a .a-ai .ai-path { gap: clamp(12px, 1.4vw, 18px); border: 0; background: transparent; }
.concept-a .a-ai .ai-path article {
  position: relative;
  border: 1px solid var(--ct-panel-line);
  border-top: 4px solid var(--ct-edge);
  background: var(--ct-mint-surface);
}
.concept-a .ai-path article > span { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.concept-a .ai-path article > span::after {
  content: "";
  flex: 1 1 auto;
  height: 7px;
  margin-right: calc(-1 * (clamp(24px, 3vw, 42px) + clamp(6px, .7vw, 9px) + 1px));
  background:
    radial-gradient(circle closest-side, #2a9357 70%, transparent 85%) right center / 7px 7px no-repeat,
    linear-gradient(90deg, rgba(42, 147, 87, .7), rgba(42, 147, 87, .3)) left center / calc(100% - 7px) 1px no-repeat;
  pointer-events: none;
}
.concept-a .ai-path article:last-child > span::after { margin-right: 0; }
.concept-a .ai-path-cta { margin-top: 22px; border-top: 1px solid var(--ct-panel-line); }
@media (max-width: 850px) {
  .concept-a .ai-path article > span::after { flex: 0 0 56px; margin-right: 0; }
}

/* 03 AIの業務例とサンプル: 大きな枠に上の帯、手順は小さな面、サンプルは上に帯のあるカード。 */
.concept-a .ai-usecase-shell { position: relative; border-color: #9fc4a8; border-top: 4px solid var(--ct-edge); }
.concept-a .ai-usecase-button.is-active { box-shadow: inset 5px 0 0 #8fd6a0; }
.concept-a .ai-usecase-steps > div { padding: 14px 16px 16px; border: 1px solid #cfe2d3; border-top: 3px solid var(--ct-edge); background: #f5faf5; }
.concept-a .ai-sample-card { position: relative; border-color: var(--ct-panel-line); border-top: 4px solid var(--ct-edge); }
.concept-a .ai-sample-card::after { z-index: 1; }
.concept-a .ai-sample-image { border-bottom: 1px solid var(--ct-panel-line); }

/* 04 事例: 共有の罫線をやめ、間隔のあるカードにする（元の枠は !important 指定のため同じ強さで上書き）。 */
.concept-a .a-works .a-work-cards { gap: clamp(14px, 1.6vw, 22px); border: 0; }
.concept-a .a-works .a-work-cards article,
.concept-a .a-works .a-work-cards article:last-child,
.concept-a .a-works .a-work-cards article:nth-child(2n),
.concept-a .a-works .a-work-cards article:nth-last-child(-n+2) {
  border: 1px solid var(--ct-panel-line) !important;
  border-top: 4px solid var(--ct-edge) !important;
  background: #fff;
}
.concept-a .a-works .case-photo { border-bottom: 1px solid var(--ct-panel-line); }
/* 事例の画面の上の角には常に薄いフレーム。カーソルやフォーカスが来ると角に寄って明るくなる。 */
.concept-a .case-photo::before,
.concept-a .case-photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 14px;
  width: 20px;
  height: 20px;
  border-top: 2px solid rgba(236, 250, 239, .95);
  opacity: .6;
  pointer-events: none;
  transition: opacity .3s ease, translate .45s cubic-bezier(.16, 1, .3, 1);
}
.concept-a .case-photo::before { left: 14px; border-left: 2px solid rgba(236, 250, 239, .95); translate: 6px 6px; }
.concept-a .case-photo::after { right: 14px; border-right: 2px solid rgba(236, 250, 239, .95); translate: -6px 6px; }
.concept-a .a-work-cards article:hover .case-photo::before,
.concept-a .a-work-cards article:hover .case-photo::after,
.concept-a .a-work-cards article:focus-within .case-photo::before,
.concept-a .a-work-cards article:focus-within .case-photo::after { opacity: 1; translate: 0 0; }

/* 章末の相談導線は、左に縁のある横長の板にする。 */
.concept-a .a-section-next,
.concept-a .process-cta {
  margin-top: 26px;
  padding: 20px clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--ct-panel-line);
  border-left: 4px solid var(--ct-edge);
  background: #fff;
}

/* 05 運営サービス: 行を、左の縁と番号の札を持つパネルの一覧にする。 */
.concept-a .a-products .a-product-list { display: grid; gap: 10px; border-top: 0; }
.concept-a .a-products .a-product-list a {
  padding: 20px clamp(18px, 2.4vw, 30px);
  border: 1px solid #a9c8b0;
  border-left: 4px solid var(--ct-edge);
  background: #fbfdf8;
}
.concept-a .a-products .a-product-list a:hover { border-color: var(--ct-edge); background: #fff; }
.concept-a .a-products .a-product-list a:focus-visible { outline: 3px solid var(--ct-edge-deep); outline-offset: 3px; }
.concept-a .a-products .a-product-list a > span:first-child {
  display: grid;
  place-items: center;
  width: min(100%, 44px);
  aspect-ratio: 1;
  border: 1px solid var(--ct-edge);
  background: var(--ct-mint-surface);
  color: var(--ct-edge-deep);
  font-weight: 700;
}
.concept-a .a-products .a-product-list a > span:last-child { color: var(--ct-edge); }

/* 06 流れ: 各手順をカードにし、左の進行線から短い枝でつなぐ。 */
.concept-a .a-process .process-list { display: grid; gap: 12px; border-top: 0; }
.concept-a .a-process .process-list article {
  padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--ct-panel-line);
  border-top: 3px solid var(--ct-edge);
  background: #fff;
}
.concept-a .a-process .process-list.is-live { --ct-proc-indent: 36px; }
.concept-a .a-process .process-list.is-live article { margin-left: var(--ct-proc-indent); padding-left: clamp(20px, 2.6vw, 32px); }
.concept-a .a-process .process-list.is-live article::before { left: calc(var(--process-rail-x) - 7px - var(--ct-proc-indent)); }
.concept-a .a-process .process-list.is-live article::after {
  content: "";
  position: absolute;
  top: calc(var(--process-node-top) + 5px);
  left: calc(var(--process-rail-x) + 5px - var(--ct-proc-indent));
  width: calc(var(--ct-proc-indent) - var(--process-rail-x) - 5px);
  height: 2px;
  background: #b9d4bf;
  pointer-events: none;
  transition: background-color .35s ease;
}
.concept-a .a-process .process-list.is-live article.is-step-done::after,
.concept-a .a-process .process-list.is-live article.is-step-active::after { background: var(--ct-edge); }
.concept-a .a-process .process-list.is-live article.is-step-active { border-color: #86b893; border-top-color: var(--ct-edge-deep); }

/* 07 よくある質問: 各質問を独立した行パネルにし、開いた質問は縁を濃くする。 */
.concept-a .a-faq .faq-list { display: grid; gap: 8px; align-content: start; border-top: 0; }
.concept-a .a-faq .faq-list details {
  padding-inline: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--ct-panel-line);
  border-left: 4px solid #9cc5a6;
  background: #fff;
}
.concept-a .a-faq .faq-list details[open] { border-left-color: var(--ct-edge); background: #fbfdf8; }
.concept-a .a-faq .faq-list summary:focus-visible { outline: 3px solid var(--ct-edge-deep); outline-offset: 2px; }

/* 08 拠点: 3つの考え方は四角い節点の箇条、対応地域は枠のある帯。 */
.concept-a .about-reasons { padding-left: 0; list-style: none; }
.concept-a .about-reasons li { position: relative; padding-left: 24px; }
.concept-a .about-reasons li::before { content: ""; position: absolute; top: .72em; left: 2px; width: 8px; height: 8px; border: 2px solid var(--ct-edge); pointer-events: none; }
.concept-a .about-regions { padding: 14px 18px; border: 1px solid #8fb79a; border-left: 4px solid var(--ct-edge); background: rgba(255, 255, 255, .55); }

/* 拠点の鶴岡を中心に、地域の広がりを同心の軌道で示す。 */
@media (min-width: 1280px) {
  .concept-a .a-about-grid { position: relative; isolation: isolate; }
  .concept-a .a-about-grid::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20px;
    right: 0;
    width: 360px;
    height: 360px;
    background:
      radial-gradient(circle closest-side, #2a9357 0 3px, rgba(42, 147, 87, .18) 3.5px 8px, transparent 8.5px),
      radial-gradient(circle closest-side, transparent calc(33% - 1px), rgba(42, 147, 87, .34) 33%, transparent calc(33% + 1px), transparent calc(66% - 1px), rgba(42, 147, 87, .24) 66%, transparent calc(66% + 1px), transparent calc(99% - 1px), rgba(42, 147, 87, .16) 99%, transparent 100%);
    pointer-events: none;
  }
  .concept-a .a-about-grid::before {
    content: "BASE / TSURUOKA";
    position: absolute;
    z-index: -1;
    top: 176px;
    right: 180px;
    translate: 50% 0;
    color: #3f7a54;
    font: 10px/1 ui-monospace, SFMono-Regular, monospace;
    letter-spacing: .18em;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* 09 相談窓口はオープニングと対になる終点。見出しの側線、明るい縁の窓口、軌道・糸の終端・下部ラベルで締める。 */
.concept-a .a-contact { position: relative; isolation: isolate; overflow: hidden; overflow: clip; --ct-line: rgba(166, 217, 175, .3); --ct-ring: #96c8a0; --ct-fill: #b8dfbd; }
.ct-armed .concept-a main > .a-contact:not(.is-ct-reached) { --ct-fill: #0e2116; }
@media (min-width: 851px) {
  .concept-a main > .a-contact.section-space::before { bottom: auto; height: calc(var(--ct-pad) + var(--ct-dot-y) + 4px); }
}
.concept-a .a-contact h2 { padding-left: clamp(16px, 2vw, 26px); border-left: 4px solid #8fd6a0; }
.concept-a .a-contact .contact-layout { border-top: 2px solid rgba(166, 217, 175, .45); }
.concept-a .contact-first-note { position: relative; border-color: rgba(166, 217, 175, .55); border-left: 4px solid #8fd6a0; background: rgba(166, 217, 175, .07); }
.concept-a .contact-first-note::after { border-color: #8fd6a0; }
.concept-a .contact-methods a { border-color: rgba(166, 217, 175, .55); border-left: 4px solid #8fd6a0; }
.concept-a .contact-methods .contact-line { border-left-color: var(--ct-edge); }
.concept-a .a-contact > .shell { position: relative; }
.concept-a .a-contact > .shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34%;
  right: -26%;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  border: 1px solid rgba(135, 187, 148, .28);
  border-left-color: rgba(157, 211, 168, .08);
  border-radius: 50%;
  transform: rotate(-16deg);
  pointer-events: none;
}
.concept-a .a-contact > .shell::after {
  content: "LISTEN — DESIGN — IMPROVE";
  position: absolute;
  left: 0;
  bottom: calc(-1 * clamp(40px, 5vw, 72px));
  padding-left: 96px;
  color: #a4c7ad;
  font: 10px/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .22em;
  white-space: nowrap;
  opacity: .9;
  background: linear-gradient(90deg, rgba(166, 217, 175, 0), rgba(166, 217, 175, .7)) left center / 84px 1px no-repeat;
  transition: background-size 1.1s cubic-bezier(.16, 1, .3, 1) .35s;
  pointer-events: none;
}
.ct-armed .concept-a .a-contact:not(.is-ct-reached) > .shell::after { background-size: 0 1px; }

/* お問合せフォーム: 説明に側線、フォームに上の帯と角。モードチェンジ内のフォームには適用しない。 */
.concept-a .top-contact-form-section .contact-form-intro { padding-left: clamp(16px, 2vw, 26px); border-left: 4px solid var(--ct-edge); }
.concept-a .top-contact-form-section .linker-contact-form { border-color: #9fc4a8; border-top: 4px solid var(--ct-edge); }

@media (max-width: 600px) {
  .concept-a main .section-heading,
  .concept-a .faq-grid > div:first-child,
  .concept-a .a-about-grid > div:first-child { padding: 20px 18px 22px 16px; border-left-width: 3px; }
  .concept-a main .section-heading::before,
  .concept-a main .section-heading::after,
  .concept-a .faq-grid > div:first-child::before,
  .concept-a .faq-grid > div:first-child::after,
  .concept-a .a-about-grid > div:first-child::before,
  .concept-a .a-about-grid > div:first-child::after { right: 7px; width: 13px; height: 13px; }
  .concept-a main .section-heading::before,
  .concept-a .faq-grid > div:first-child::before,
  .concept-a .a-about-grid > div:first-child::before { top: 7px; }
  .concept-a main .section-heading::after,
  .concept-a .faq-grid > div:first-child::after,
  .concept-a .a-about-grid > div:first-child::after { bottom: 7px; }
  .concept-a main .section-index,
  .concept-a .top-contact-form-kicker { padding: 6px 10px 6px 9px; font-size: 10px; letter-spacing: .12em; }
  .concept-a .a-scope .scope-list article,
  .concept-a .a-scope .scope-list article:hover { padding: 22px 16px 22px 14px; border-left-width: 3px; }
  .concept-a .a-scope .scope-list article > span:first-child { font-size: 11px; }
  .concept-a .a-products .a-product-list a { padding: 16px 14px; border-left-width: 3px; }
  .concept-a .a-products .a-product-list a > span:first-child { font-size: 11px; }
  .concept-a .a-process .process-list article { padding: 20px 16px; }
  .concept-a .a-process .process-list.is-live { --ct-proc-indent: 26px; }
  .concept-a .a-process .process-list.is-live article { padding-left: 16px; }
  .concept-a .a-faq .faq-list details { padding-inline: 16px 14px; border-left-width: 3px; }
  .concept-a .a-section-next,
  .concept-a .process-cta { padding: 18px 16px; border-left-width: 3px; }
  .concept-a .ai-usecase-steps > div { padding: 12px 14px 14px; }
  .concept-a .a-contact h2 { padding-left: 14px; border-left-width: 3px; }
  .concept-a .contact-methods a { padding-inline: 18px; }
  .concept-a .a-contact > .shell::before { top: -12%; right: -70%; width: 120vw; }
  .concept-a .a-contact > .shell::after { bottom: -44px; padding-left: 40px; font-size: 9px; letter-spacing: .14em; background-size: 28px 1px; }
}

/* ---------- モードチェンジ ---------- */

/* 画面の四隅を、オープニングと同じ暗い縁取りで少し締める。以前の小さな角の印は、下の章の枠に置き換えた。 */
.concept-a .experience-depth { background: radial-gradient(ellipse 78% 72% at 50% 48%, transparent 58%, rgba(5, 10, 7, .42) 100%); }

/*
  章ごとの枠: 概要と横の詳細の両方を同じ1枚の枠で囲み、スライドが替わっても枠は動かない。
  右側は章の移動ボタンの内側、下辺は中央の横移動の点を避けて途切れさせる。
  枠線は本文の余白の中だけを通り、要素の寸法は変えない（粒データとずれないため）。
*/
.concept-a .experience-scene {
  --xf-top: clamp(10px, 1.8vh, 18px);
  --xf-bottom: clamp(10px, 1.8vh, 18px);
  --xf-left: clamp(12px, 2vw, 34px);
  --xf-right: calc(clamp(12px, 2vw, 30px) + 54px);
  --xf-line: rgba(159, 220, 175, .24);
  --xf-mark: #9fe0b0;
  --xf-arm: 26px;
}
.concept-a .experience-scene::before,
.concept-a .experience-scene::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: var(--xf-top);
  right: var(--xf-right);
  bottom: var(--xf-bottom);
  left: var(--xf-left);
  color: #a4c7ad;
  font: 10px/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .22em;
  white-space: nowrap;
  pointer-events: none;
}
.concept-a .experience-scene::before {
  box-sizing: border-box;
  padding: 10px 0 0 38px;
  background:
    linear-gradient(var(--xf-line), var(--xf-line)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--xf-line), var(--xf-line)) 0 100% / 32% 1px no-repeat,
    linear-gradient(var(--xf-line), var(--xf-line)) 100% 100% / 32% 1px no-repeat,
    linear-gradient(var(--xf-line), var(--xf-line)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--xf-line), var(--xf-line)) 100% 0 / 1px 100% no-repeat;
}
.concept-a .experience-scene::after {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 38px 10px 0;
  background:
    linear-gradient(var(--xf-mark), var(--xf-mark)) 0 0 / var(--xf-arm) 2px no-repeat,
    linear-gradient(var(--xf-mark), var(--xf-mark)) 0 0 / 2px var(--xf-arm) no-repeat,
    linear-gradient(var(--xf-mark), var(--xf-mark)) 100% 0 / var(--xf-arm) 2px no-repeat,
    linear-gradient(var(--xf-mark), var(--xf-mark)) 100% 0 / 2px var(--xf-arm) no-repeat,
    linear-gradient(var(--xf-mark), var(--xf-mark)) 0 100% / var(--xf-arm) 2px no-repeat,
    linear-gradient(var(--xf-mark), var(--xf-mark)) 0 100% / 2px var(--xf-arm) no-repeat,
    linear-gradient(var(--xf-mark), var(--xf-mark)) 100% 100% / var(--xf-arm) 2px no-repeat,
    linear-gradient(var(--xf-mark), var(--xf-mark)) 100% 100% / 2px var(--xf-arm) no-repeat;
}
/* 高さに余裕のある広い画面だけ、枠の内側にオープニングと同じ等幅ラベルを置く。 */
@media (min-width: 1100px) and (min-height: 760px) {
  .concept-a .experience-scene::before { content: "LINKER / WORKFLOW"; }
  .concept-a .experience-scene::after { content: "LISTEN — DESIGN — IMPROVE"; }
}
@media (max-width: 600px) {
  .concept-a .experience-scene { --xf-top: 8px; --xf-bottom: 8px; --xf-left: 8px; --xf-right: 54px; --xf-arm: 16px; }
  .concept-a .experience-scene::before { display: none; }
}
/* 高さの低い画面では章が縦にスクロールするため、枠は出さない。 */
@media (max-height: 620px) {
  .concept-a .experience-scene::before,
  .concept-a .experience-scene::after { display: none; }
}

/* 入室時に一度だけ、オープニングの中央の走査線が背景を横切る（本文の後ろ、操作は妨げない）。 */
.concept-a .experience-geometry::before,
.concept-a .experience-geometry::after { content: ""; position: absolute; top: 50%; pointer-events: none; }
.concept-a .experience-geometry::before {
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130, 185, 144, .34) 18%, rgba(170, 223, 179, .12) 50%, rgba(130, 185, 144, .34) 82%, transparent);
  transform-origin: left center;
  animation: ct-xp-trace 1.8s ease both;
}
.concept-a .experience-geometry::after {
  left: 8%;
  width: 14%;
  height: 3px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, #b8dfbd, transparent);
  filter: blur(1px);
  animation: ct-xp-scan 1.8s ease-in-out both;
}

/* 進行バーの先端に、オープニングと同じ光る点。 */
.concept-a .experience-progress span { position: relative; }
.concept-a .experience-progress span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #d8f5dc;
  box-shadow: 0 0 0 3px rgba(153, 215, 166, .16), 0 0 12px rgba(153, 215, 166, .55);
}

/* 章番号の前に、オープニングの節点。そこから本文の左に縦の側線が下りる。どちらも余白内の絶対配置。 */
.concept-a .experience .scene-index { position: relative; }
.concept-a .experience .scene-index::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  box-sizing: border-box;
  border: 1px solid #a6dfb4;
  border-radius: 50%;
  background: #8fd6a0;
  box-shadow: 0 0 0 4px rgba(121, 178, 133, .14), 0 0 14px rgba(143, 208, 157, .4);
}
.concept-a .experience .scene-copy::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 0;
  left: -13px;
  width: 1px;
  background: linear-gradient(#9fe0b0 0 56px, rgba(159, 224, 176, .4) 56px, rgba(159, 224, 176, 0));
  pointer-events: none;
}
@media (max-width: 600px) {
  .concept-a .experience .scene-index::before { left: -13px; width: 6px; height: 6px; margin-top: -3px; }
  .concept-a .experience .scene-copy::before { left: -10px; }
}

/* 概要の図・デモ・事例画面は、上の帯と外側の2本目の枠で「パネル」として揃える。 */
.concept-a .experience .scene-visual-summary {
  border-color: rgba(176, 231, 187, .62);
  background:
    linear-gradient(#8fd6a0, #8fd6a0) 0 0 / 100% 3px no-repeat,
    linear-gradient(145deg, rgba(206, 247, 213, .13), rgba(8, 36, 23, .52));
}
.concept-a .experience .scene-visual-summary::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 16px;
  height: 16px;
  border-right: 2px solid #9fe0b0;
  border-bottom: 2px solid #9fe0b0;
  pointer-events: none;
}
.concept-a .experience .scene-visual-summary,
.concept-a .experience .scene-ai-demo,
.concept-a .experience .scene-case-display { outline: 1px solid rgba(166, 223, 180, .3); outline-offset: 6px; }
.concept-a .experience .scene-ai-demo { box-shadow: inset 0 3px 0 #8fd6a0, 0 24px 55px rgba(0, 0, 0, .22); }
.concept-a .experience .scene-summary-label { color: #cdeed4; }
.concept-a .experience .scene-summary-list,
.concept-a .experience .scene-highlights { border-color: rgba(183, 231, 194, .45); }
.concept-a .experience .scene-summary-list > div,
.concept-a .experience .scene-highlights > div { box-shadow: inset 3px 0 0 rgba(143, 214, 160, .85); }
@media (max-width: 600px) {
  .concept-a .experience .scene-visual-summary,
  .concept-a .experience .scene-ai-demo,
  .concept-a .experience .scene-case-display { outline-offset: 4px; }
  .concept-a .experience .scene-visual-summary::after { right: 5px; bottom: 5px; width: 12px; height: 12px; }
}

/* 詳細スライドの中の小さな面は、上に緑の帯。サービス一覧は左の帯。 */
.concept-a .experience .scene-topic {
  border-color: rgba(180, 231, 192, .5);
  background: linear-gradient(#8fd6a0, #8fd6a0) 0 0 / 100% 2px no-repeat, rgba(5, 31, 18, .62);
}
.concept-a .experience .has-horizontal-slides .scene-detail-example { background: linear-gradient(#8fd6a0, #8fd6a0) 0 0 / 100% 2px no-repeat, rgba(9, 43, 25, .4); }
.concept-a .experience .scene-product-item { box-shadow: inset 3px 0 0 #8fd6a0; }
.concept-a .experience .has-horizontal-slides .scene-detail-card > span { color: #bfe9c8; }

/* 横スライドの点の左右に短い走査線。点の位置は左右対称なので動かない。 */
.concept-a .scene-swipe-dots::before,
.concept-a .scene-swipe-dots::after { content: ""; flex: 0 0 clamp(22px, 4vw, 56px); height: 1px; margin-inline: 4px; pointer-events: none; }
.concept-a .scene-swipe-dots::before { background: linear-gradient(90deg, transparent, rgba(167, 216, 178, .6)); }
.concept-a .scene-swipe-dots::after { background: linear-gradient(90deg, rgba(167, 216, 178, .6), transparent); }

/* 俯瞰図: 見出しの下の線が開いた時に伸び、広い画面では四隅に角のフレーム。 */
.concept-a .experience-overview-head { position: relative; }
.concept-a .experience-overview-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * clamp(9px, 1.5vh, 15px));
  height: 1px;
  background: linear-gradient(90deg, rgba(166, 217, 175, .7), rgba(166, 217, 175, .12) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) .12s;
  pointer-events: none;
}
.concept-a .experience.is-overview-open .experience-overview-head::after { transform: scaleX(1); }
@media (max-width: 650px) {
  .concept-a .experience-overview-head::after { bottom: -8px; }
}
@media (min-width: 1051px) {
  .concept-a .experience-overview::before,
  .concept-a .experience-overview::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; }
  .concept-a .experience-overview::before { top: 10px; left: 10px; border-top: 2px solid #9fe0b0; border-left: 2px solid #9fe0b0; }
  .concept-a .experience-overview::after { right: 10px; bottom: 10px; border-right: 2px solid #9fe0b0; border-bottom: 2px solid #9fe0b0; }
}

/* 俯瞰図のカード: 左上に小さな角。選んだ章は明るい縁・上の帯・外側の光で、ひと目で分かるようにする。 */
.concept-a .experience-overview-card {
  background:
    linear-gradient(rgba(166, 223, 180, .6), rgba(166, 223, 180, .6)) 7px 7px / 12px 1px no-repeat,
    linear-gradient(rgba(166, 223, 180, .6), rgba(166, 223, 180, .6)) 7px 7px / 1px 12px no-repeat,
    linear-gradient(150deg, rgba(35, 85, 51, .76), rgba(8, 38, 22, .94));
}
.concept-a .experience-overview-card[aria-pressed="true"] {
  border-color: #c4f3cc;
  background:
    linear-gradient(#d2f7d8, #d2f7d8) 7px 7px / 16px 2px no-repeat,
    linear-gradient(#d2f7d8, #d2f7d8) 7px 7px / 2px 16px no-repeat,
    linear-gradient(145deg, rgba(55, 127, 76, .95), rgba(14, 62, 33, .97));
  box-shadow: inset 0 4px 0 #baf0c3, inset 0 0 0 1px rgba(186, 240, 195, .55), 0 0 0 3px rgba(186, 240, 195, .18), 0 14px 30px rgba(0, 0, 0, .2);
}
.concept-a .experience-overview-detail {
  border-color: rgba(174, 226, 184, .7);
  background:
    linear-gradient(#9fe0b0, #9fe0b0) right 8px bottom 8px / 18px 2px no-repeat,
    linear-gradient(#9fe0b0, #9fe0b0) right 8px bottom 8px / 2px 18px no-repeat,
    linear-gradient(160deg, rgba(30, 78, 45, .86), rgba(7, 36, 21, .94));
  box-shadow: inset 0 3px 0 #a6dfb4;
}
.concept-a .experience-overview-slides button.is-current-slide { box-shadow: inset 3px 0 0 #aee8ba; }
@media (max-width: 650px) {
  .concept-a .experience-overview-detail { box-shadow: inset 0 3px 0 #a6dfb4, 0 -12px 28px rgba(0, 0, 0, .25); }
}

/* ---------- カーソル・キーボードに応じた枠の動き ---------- */
/* 装飾だけが反応する。本文やカードの寸法を動かさず、触っていない面は静止させる。 */
@media (hover: hover) and (pointer: fine) {
  .concept-a main .section-heading,
  .concept-a .faq-grid > div:first-child,
  .concept-a .a-about-grid > div:first-child {
    transition: border-color .35s ease, box-shadow .45s ease;
  }
  .concept-a main .section-heading::before,
  .concept-a main .section-heading::after,
  .concept-a .faq-grid > div:first-child::before,
  .concept-a .faq-grid > div:first-child::after,
  .concept-a .a-about-grid > div:first-child::before,
  .concept-a .a-about-grid > div:first-child::after {
    transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
  }
  .concept-a main .section-heading:is(:hover, :focus-within),
  .concept-a .faq-grid > div:first-child:is(:hover, :focus-within),
  .concept-a .a-about-grid > div:first-child:is(:hover, :focus-within) {
    border-color: #68a77b;
    box-shadow: 0 16px 38px rgba(20, 73, 40, .09), inset 0 0 0 1px rgba(42, 147, 87, .12);
  }
  .concept-a .a-products .section-heading:is(:hover, :focus-within) {
    border-color: #9ddfac;
    box-shadow: 0 18px 40px rgba(7, 37, 19, .22), inset 0 0 0 1px rgba(166, 217, 175, .28);
  }
  .concept-a main .section-heading:is(:hover, :focus-within)::before,
  .concept-a .faq-grid > div:first-child:is(:hover, :focus-within)::before,
  .concept-a .a-about-grid > div:first-child:is(:hover, :focus-within)::before { transform: translate(-6px, 6px); }
  .concept-a main .section-heading:is(:hover, :focus-within)::after,
  .concept-a .faq-grid > div:first-child:is(:hover, :focus-within)::after,
  .concept-a .a-about-grid > div:first-child:is(:hover, :focus-within)::after { transform: translate(-6px, -6px); }

  /* 背景色の切り替えや登場フェードに埋もれないよう、線を独立した層に描く。 */
  .concept-a .a-scope .scope-list article,
  .concept-a .a-ai .ai-path article,
  .concept-a .a-products .a-product-list a,
  .concept-a .a-process .process-list article,
  .concept-a .a-faq .faq-list details {
    transition: border-color .35s ease, box-shadow .45s ease;
  }
  .concept-a .a-scope .scope-list article:is(:hover, :focus-within),
  .concept-a .a-ai .ai-path article:is(:hover, :focus-within),
  .concept-a .a-products .a-product-list a:is(:hover, :focus-visible),
  .concept-a .a-process .process-list article:is(:hover, :focus-within),
  .concept-a .a-faq .faq-list details:is(:hover, :focus-within) {
    box-shadow: 0 15px 32px rgba(20, 73, 40, .1);
  }
  .concept-a .a-scope .scope-list article > span:first-child,
  .concept-a .a-products .a-product-list a > span:first-child {
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  }
  .concept-a .a-scope .scope-list article:is(:hover, :focus-within) > span:first-child,
  .concept-a .a-products .a-product-list a:is(:hover, :focus-visible) > span:first-child {
    transform: translateY(-4px);
    box-shadow: 4px 4px 0 rgba(42, 147, 87, .2);
  }
  .concept-a .a-scope .scope-list article::after,
  .concept-a .a-ai .ai-path article::after,
  .concept-a .ai-sample-card::after,
  .concept-a .ai-usecase-shell::after,
  .concept-a .contact-first-note::after {
    transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
  }
  .concept-a .a-scope .scope-list article:is(:hover, :focus-within)::after,
  .concept-a .a-ai .ai-path article:is(:hover, :focus-within)::after,
  .concept-a .ai-sample-card:is(:hover, :focus-within)::after,
  .concept-a .ai-usecase-shell:is(:hover, :focus-within)::after,
  .concept-a .contact-first-note:is(:hover, :focus-within)::after {
    transform: translate(-6px, 6px);
    border-color: #17683c;
  }
  .concept-a .a-section-next,
  .concept-a .contact-methods a.contact-line,
  .concept-a .contact-methods a.contact-email,
  .concept-a .contact-methods a.contact-phone {
    background-image: linear-gradient(90deg, #8fd6a0, #c7efd0);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 0 3px;
    transition: background-size .58s cubic-bezier(.2,.8,.2,1), border-color .35s ease, transform .3s ease;
  }
  .concept-a .a-section-next:is(:hover, :focus-within),
  .concept-a .contact-methods a.contact-line:is(:hover, :focus-visible),
  .concept-a .contact-methods a.contact-email:is(:hover, :focus-visible),
  .concept-a .contact-methods a.contact-phone:is(:hover, :focus-visible) { background-size: 100% 3px; }

  /* モード内は細い緑の光と角だけを動かし、粒子の基準となる寸法は変えない。 */
  .concept-a .experience .scene-visual-summary,
  .concept-a .experience .scene-topic,
  .concept-a .experience .scene-detail-example,
  .concept-a .experience .scene-product-item {
    transition: outline-color .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  .concept-a .experience .scene-visual-summary:is(:hover, :focus-within) {
    outline-color: rgba(183, 246, 198, .9);
    box-shadow: inset 0 0 0 1px rgba(176, 235, 188, .45), 0 0 26px rgba(143, 214, 160, .17);
  }
  .concept-a .experience .scene-visual-summary::after { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .concept-a .experience .scene-visual-summary:is(:hover, :focus-within)::after { transform: translate(-6px, -6px); }
  .concept-a .experience .scene-topic:is(:hover, :focus-within),
  .concept-a .experience .scene-detail-example:is(:hover, :focus-within),
  .concept-a .experience .scene-product-item:is(:hover, :focus-within) {
    border-color: rgba(190, 246, 201, .9);
    box-shadow: inset 0 3px 0 #b5edc1, 0 0 22px rgba(143, 214, 160, .14);
  }
  .concept-a .experience-overview-card {
    transition: transform .3s ease, border-color .3s ease, background-size .48s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .concept-a .experience-overview-card:is(:hover, :focus-visible) {
    background-size: 22px 2px, 2px 22px, auto;
    box-shadow: inset 0 0 0 1px rgba(190, 246, 201, .28), 0 0 20px rgba(143, 214, 160, .17);
  }
  .concept-a .experience-overview-card[aria-pressed="true"]:is(:hover, :focus-visible) {
    box-shadow: inset 0 4px 0 #baf0c3, inset 0 0 0 1px rgba(186, 240, 195, .65), 0 0 0 3px rgba(186, 240, 195, .22), 0 0 24px rgba(143, 214, 160, .28);
  }

  /* 登場後のホバーに合わせ、上辺から右・下・左へ順に枠をなぞる。 */
  .concept-a .a-scope .scope-list article,
  .concept-a .a-ai .ai-path article,
  .concept-a .a-products .a-product-list a,
  .concept-a .a-faq .faq-list details,
  .concept-a .ai-usecase-steps > div,
  .concept-a .experience .scene-summary-list > div,
  .concept-a .experience .scene-highlights > div,
  .concept-a .experience .scene-topic,
  .concept-a .experience .scene-detail-example,
  .concept-a .experience .scene-product-item { position: relative; }

  .concept-a .a-scope .scope-list article::before,
  .concept-a .a-ai .ai-path article::before,
  .concept-a .a-products .a-product-list a::before,
  .concept-a .a-faq .faq-list details::before,
  .concept-a .ai-usecase-steps > div::before,
  .concept-a .experience .scene-summary-list > div::before,
  .concept-a .experience .scene-highlights > div::before,
  .concept-a .experience .scene-topic::before,
  .concept-a .experience .scene-detail-example::before,
  .concept-a .experience .scene-product-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    --ct-trace: #299957;
    background:
      linear-gradient(var(--ct-trace), var(--ct-trace)) left top / 0 3px no-repeat,
      linear-gradient(var(--ct-trace), var(--ct-trace)) right top / 2px 0 no-repeat,
      linear-gradient(var(--ct-trace), var(--ct-trace)) right bottom / 0 2px no-repeat,
      linear-gradient(var(--ct-trace), var(--ct-trace)) left bottom / 2px 0 no-repeat;
    opacity: 0;
    transition: opacity .24s ease;
  }
  .concept-a .experience .scene-summary-list > div::before,
  .concept-a .experience .scene-highlights > div::before,
  .concept-a .experience .scene-topic::before,
  .concept-a .experience .scene-detail-example::before,
  .concept-a .experience .scene-product-item::before { --ct-trace: #b2f1c0; }

  .concept-a .a-scope .scope-list article:is(.is-visible, :not([data-reveal])):is(:hover, :focus-within)::before,
  .concept-a .a-ai .ai-path article:is(.is-visible, :not([data-reveal])):is(:hover, :focus-within)::before,
  .concept-a .a-products .a-product-list a:is(.is-visible, :not([data-reveal])):is(:hover, :focus-visible)::before,
  .concept-a .a-faq .faq-list details:is(:hover, :focus-within)::before,
  .concept-a .ai-usecase-steps > div:is(:hover, :focus-within)::before,
  .concept-a .experience .scene-summary-list > div:is(:hover, :focus-within)::before,
  .concept-a .experience .scene-highlights > div:is(:hover, :focus-within)::before,
  .concept-a .experience .scene-topic:is(:hover, :focus-within)::before,
  .concept-a .experience .scene-detail-example:is(:hover, :focus-within)::before,
  .concept-a .experience .scene-product-item:is(:hover, :focus-within)::before {
    opacity: 1;
    animation: ct-clockwise-frame .96s linear .18s both;
  }

  /* 工程カードの ::before は進行ノードなので、従来の上辺ラインを維持する。 */
  .concept-a .a-process .process-list article {
    background-image: linear-gradient(90deg, #2a9357, #9eddb0);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 0 3px;
    transition: background-size .58s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .45s ease;
  }
  .concept-a .a-process .process-list article:is(:hover, :focus-within) { background-size: 100% 3px; }
}
@keyframes ct-clockwise-frame {
  0% { background-size: 0 3px, 2px 0, 0 2px, 2px 0; }
  29% { background-size: 100% 3px, 2px 0, 0 2px, 2px 0; }
  53% { background-size: 100% 3px, 2px 100%, 0 2px, 2px 0; }
  77% { background-size: 100% 3px, 2px 100%, 100% 2px, 2px 0; }
  100% { background-size: 100% 3px, 2px 100%, 100% 2px, 2px 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .concept-a .a-scope .scope-list article::before,
  .concept-a .a-ai .ai-path article::before,
  .concept-a .a-products .a-product-list a::before,
  .concept-a .a-faq .faq-list details::before,
  .concept-a .ai-usecase-steps > div::before,
  .concept-a .experience .scene-summary-list > div::before,
  .concept-a .experience .scene-highlights > div::before,
  .concept-a .experience .scene-topic::before,
  .concept-a .experience .scene-detail-example::before,
  .concept-a .experience .scene-product-item::before { animation: none; transition: none; }
  .concept-a main .section-heading,
  .concept-a main .section-heading::before,
  .concept-a main .section-heading::after,
  .concept-a .faq-grid > div:first-child,
  .concept-a .faq-grid > div:first-child::before,
  .concept-a .faq-grid > div:first-child::after,
  .concept-a .a-about-grid > div:first-child,
  .concept-a .a-about-grid > div:first-child::before,
  .concept-a .a-about-grid > div:first-child::after,
  .concept-a .a-scope .scope-list article,
  .concept-a .a-ai .ai-path article,
  .concept-a .a-products .a-product-list a,
  .concept-a .a-process .process-list article,
  .concept-a .a-faq .faq-list details,
  .concept-a .a-scope .scope-list article > span:first-child,
  .concept-a .a-products .a-product-list a > span:first-child,
  .concept-a .a-scope .scope-list article::after,
  .concept-a .a-ai .ai-path article::after,
  .concept-a .ai-sample-card::after,
  .concept-a .ai-usecase-shell::after,
  .concept-a .contact-first-note::after,
  .concept-a .a-section-next,
  .concept-a .contact-methods a.contact-line,
  .concept-a .contact-methods a.contact-email,
  .concept-a .contact-methods a.contact-phone,
  .concept-a .experience .scene-visual-summary,
  .concept-a .experience .scene-visual-summary::after,
  .concept-a .experience .scene-topic,
  .concept-a .experience .scene-detail-example,
  .concept-a .experience .scene-product-item,
  .concept-a .experience-overview-card { transition: none; }
}

@keyframes ct-fade-in { from { opacity: 0; } }
@keyframes ct-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ct-draw-x { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ct-xp-trace { 0% { opacity: 0; transform: scaleX(0); } 35% { opacity: 1; transform: scaleX(1); } 72% { opacity: .8; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes ct-xp-scan { 0%, 18% { opacity: 0; transform: translateX(0); } 30%, 72% { opacity: .9; } 100% { opacity: 0; transform: translateX(510%); } }

@media (prefers-reduced-motion: reduce) {
  .intro-done .concept-a .ct-hero-mark::before,
  .intro-done .concept-a .ct-hero-caption,
  .intro-done .concept-a .ct-hero-mark::after,
  .intro-done .concept-a .a-live-visual::before,
  .intro-done .concept-a .a-live-visual::after,
  .intro-done .concept-a .a-scroll::before { animation: none; }
  .concept-a main .section-index::after,
  .concept-a .a-contact > .shell::after,
  .concept-a .case-photo::before,
  .concept-a .case-photo::after,
  .concept-a .a-process .process-list.is-live article::after,
  .concept-a .experience-overview-head::after { transition: none; }
  .concept-a .experience-geometry::before,
  .concept-a .experience-geometry::after { display: none; }
}
/* 支援内容から個別の掲載例へ移動したとき、見出しが固定ヘッダーの下に隠れないようにする。 */
.a-work-cards article[id] { scroll-margin-top: 170px; }