@charset "UTF-8";

/* Hero: 写真の上に「聞く → 選ぶ → 整える」を順に示す説明用の図解。写真はイメージ画像のまま。 */
.concept-a .a-live-visual { position: relative; min-width: 0; }
.concept-a .a-live { --a-live-duration: 4800ms; position: relative; z-index: 6; box-sizing: border-box; padding: 14px 16px 16px; color: #f2f8f2; background: rgba(10,29,19,.84); border: 1px solid rgba(204,238,211,.22); border-radius: 2px; box-shadow: 0 22px 60px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.concept-a .a-live-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.concept-a .a-live-label { display: grid; gap: 3px; min-width: 0; margin: 0; }
.concept-a .a-live-label span { color: #a6d9af; font: 10px ui-monospace,monospace; letter-spacing: .14em; }
.concept-a .a-live-label small { color: #b8cfbd; font-size: 11px; line-height: 1.5; }
.concept-a .a-live-toggle { display: inline-flex; flex: none; align-items: center; gap: 7px; min-width: 44px; min-height: 36px; padding: 0 11px; color: #d2efd6; background: transparent; border: 1px solid rgba(204,238,211,.32); border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.concept-a .a-live-toggle:hover { color: #10351f; background: #d2efd6; }
.concept-a .a-live-toggle[hidden] { display: none; }
.concept-a .a-live-toggle-icon { position: relative; width: 9px; height: 10px; }
.concept-a .a-live-toggle-icon::before,
.concept-a .a-live-toggle-icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 100%; background: currentColor; }
.concept-a .a-live-toggle-icon::before { left: 0; }
.concept-a .a-live-toggle-icon::after { right: 0; }
.concept-a .a-live.is-paused .a-live-toggle-icon::before { width: 100%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.concept-a .a-live.is-paused .a-live-toggle-icon::after { display: none; }
.concept-a .a-live:not(.is-ready) .a-live-toggle { display: none; }

.concept-a .a-live-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin: 12px 0 0; }
.concept-a .a-live-tab { position: relative; display: flex; align-items: baseline; gap: 7px; min-width: 0; min-height: 44px; padding: 8px 4px 10px; color: rgba(242,248,242,.6); background: transparent; border: 0; text-align: left; cursor: pointer; transition: color .3s ease; }
.concept-a .a-live-tab b { color: inherit; font: 10px ui-monospace,monospace; letter-spacing: .1em; }
.concept-a .a-live-tab span { font-size: 14px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.concept-a .a-live-tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: rgba(204,238,211,.2); }
.concept-a .a-live-tab i::after { content: ""; position: absolute; inset: 0; background: #a6d9af; transform: scaleX(0); transform-origin: left; }
.concept-a .a-live-tab:hover { color: #f2f8f2; }
.concept-a .a-live-tab.is-active { color: #fff; }
.concept-a .a-live-tab.is-done i::after { transform: scaleX(1); opacity: .45; }
.concept-a .a-live-tab.is-active i::after { animation: a-live-progress var(--a-live-duration) linear both; }
.concept-a .a-live.is-holding .a-live-tab.is-active i::after { animation-play-state: paused; }
.concept-a .a-live.is-static .a-live-tab.is-active i::after { animation: none; transform: scaleX(1); }
.concept-a .a-live button:focus-visible { outline: 2px solid #d2efd6; outline-offset: 2px; }

.concept-a .a-live-stage { display: grid; margin-top: 12px; }
.concept-a .a-live-pane { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .5s ease, translate .6s cubic-bezier(.16,1,.3,1), visibility 0s .5s; }
.concept-a .a-live-pane.is-active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .5s ease, translate .6s cubic-bezier(.16,1,.3,1), visibility 0s; }
.concept-a .a-live-title { margin: 0; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.concept-a .a-live-text { margin: 5px 0 0; color: #c6dccb; font-size: 13px; line-height: 1.7; }

/* 手順ごとの小さな図。仕事の流れの順番を表し、実際の画面やAI処理ではない。 */
.concept-a .a-live-figure { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.concept-a .a-live-figure span { padding: 4px 9px; color: #d8ecdc; border: 1px solid rgba(166,217,175,.38); border-radius: 999px; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.concept-a .a-live-figure i { color: #a6d9af; font-style: normal; font-size: 12px; }
.concept-a .a-live-figure .a-live-loop { display: inline-block; margin-left: 2px; color: #a6d9af; font-size: 15px; line-height: 1; }
.concept-a .a-live-pane.is-active .a-live-figure-listen span { animation: a-live-chip-in .55s cubic-bezier(.16,1,.3,1) both; }
.concept-a .a-live-pane.is-active .a-live-figure-listen span:nth-child(2) { animation-delay: .22s; }
.concept-a .a-live-pane.is-active .a-live-figure-listen span:nth-child(3) { animation-delay: .44s; }
.concept-a .a-live-pane.is-active .a-live-figure-listen span:nth-child(4) { animation-delay: .66s; }
.concept-a .a-live-pane.is-active .a-live-figure-choose span { animation: a-live-compare 1s ease both; }
.concept-a .a-live-pane.is-active .a-live-figure-choose span:nth-child(2) { animation-delay: .55s; }
.concept-a .a-live-pane.is-active .a-live-figure-choose span:nth-child(3) { animation-delay: 1.1s; }
.concept-a .a-live-pane.is-active .a-live-figure-choose span:nth-child(4) { animation-delay: 1.65s; }
.concept-a .a-live-pane.is-active .a-live-figure-improve > * { animation: a-live-chip-in .5s cubic-bezier(.16,1,.3,1) both; }
.concept-a .a-live-pane.is-active .a-live-figure-improve > :nth-child(2) { animation-delay: .2s; }
.concept-a .a-live-pane.is-active .a-live-figure-improve > :nth-child(3) { animation-delay: .4s; }
.concept-a .a-live-pane.is-active .a-live-figure-improve > :nth-child(4) { animation-delay: .6s; }
.concept-a .a-live-pane.is-active .a-live-figure-improve > :nth-child(5) { animation-delay: .8s; }
.concept-a .a-live-pane.is-active .a-live-figure-improve .a-live-loop { animation: a-live-chip-in .5s 1s both, a-live-turn 1.1s 1.3s cubic-bezier(.65,0,.35,1) both; }

.intro-done .concept-a .a-live { animation: a-live-enter .9s .45s cubic-bezier(.16,1,.3,1) both; }

@keyframes a-live-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes a-live-chip-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes a-live-compare { 0%, 100% { color: #d8ecdc; background: transparent; } 35%, 60% { color: #10351f; background: #d2efd6; border-color: #d2efd6; } }
@keyframes a-live-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes a-live-enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* 広い画面: 写真の右下に重ね、キャプションと左上のラベルを避ける。 */
@media (min-width: 851px) {
  .concept-a .a-live-visual .a-hero-visual-corner { top: 26px; bottom: auto; }
}
@media (min-width: 601px) {
  .concept-a .mode-switch-floating.is-hero-visible { top: calc(env(safe-area-inset-top) + 78px); bottom: auto; }
}
@media (min-width: 1101px) {
  .concept-a .a-live { position: absolute; right: 18px; bottom: 50px; width: min(318px, calc(100% - 36px)); transform: translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0); transition: transform .45s ease-out; }
}
/* 中間幅: 写真を隠さないよう、写真の下に置く。 */
@media (min-width: 851px) and (max-width: 1100px) {
  .concept-a .a-live { margin-top: 14px; }
}
/* 狭い画面: 写真は背景として薄く表示されるため、図解は本文の下に並べる。 */
@media (max-width: 850px) {
  .concept-a .a-live-visual { position: static; }
  .concept-a .a-live { z-index: 2; width: 100%; max-width: 650px; margin: 0 auto; }
  .concept-a .a-live-toggle { min-height: 44px; }
}
@media (max-width: 380px) {
  .concept-a .a-live { padding-inline: 13px; }
  .concept-a .a-live-tab { gap: 5px; }
  .concept-a .a-live-tab span { font-size: 13px; }
}

/* Process: スクロール位置に合わせて線を伸ばし、今読んでいる手順を示す。 */
.concept-a .process-list.is-live { --process-rail-x: 12px; --process-node-top: 43px; position: relative; }
.concept-a .process-list.is-live::before,
.concept-a .process-list.is-live::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--process-rail-x); width: 2px; margin-left: -1px; pointer-events: none; }
.concept-a .process-list.is-live::before { background: rgba(53,129,86,.16); }
.concept-a .process-list.is-live::after { background: linear-gradient(#2a9357, #5fb582); transform: scaleY(var(--process-progress, 0)); transform-origin: top; transition: transform .2s linear; }
.concept-a .process-list.is-live article { position: relative; padding-left: 40px; }
.concept-a .process-list.is-live article::before { content: ""; position: absolute; z-index: 1; left: calc(var(--process-rail-x) - 6px); top: var(--process-node-top); box-sizing: border-box; width: 12px; height: 12px; background: #f9fbf6; border: 2px solid #a8c4ae; border-radius: 50%; transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.concept-a .process-list.is-live article > span { transition: color .35s ease; }
.concept-a .process-list.is-live article h3 { transition: color .35s ease; }
.concept-a .process-list.is-live article.is-step-done::before { background: #2a9357; border-color: #2a9357; }
.concept-a .process-list.is-live article.is-step-active::before { background: #fff; border-color: #2a9357; box-shadow: 0 0 0 5px rgba(42,147,87,.16); }
.concept-a .process-list.is-live article.is-step-active > span { color: #176a41; font-weight: 700; }
.concept-a .process-list.is-live article.is-step-active h3 { color: #0f4a2a; }
@media (max-width: 600px) {
  .concept-a .process-list.is-live { --process-rail-x: 8px; --process-node-top: 38px; }
  .concept-a .process-list.is-live article { padding-left: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-a .a-live, .intro-done .concept-a .a-live, .concept-a .a-live *, .concept-a .a-live *::before, .concept-a .a-live *::after { animation: none !important; transition: none !important; }
  .concept-a .a-live { transform: none !important; }
  .concept-a .a-live-pane { translate: none; }
  .concept-a .a-live-tab.is-active i::after { transform: scaleX(1); }
  .concept-a .process-list.is-live::after,
  .concept-a .process-list.is-live article::before,
  .concept-a .process-list.is-live article > span,
  .concept-a .process-list.is-live article h3 { transition: none; }
}