/* ==========================================================
   アフターケアの流れの図（inc/aftercare-timeline.php、js/aftercare-timeline.js）
   トップページと物件ページ v2 で共通。見た目は親ページの図、並びと配置は元の画像（/img/lp/workflow.png）に合わせる
   位置（--from・--to・--x・--tail）は、図の幅に対する %（単位なしの数値）
   ========================================================== */
.care-timeline{
  --pace:.05s;
  --care-ink:#111211;--care-green:#4b513d;--care-note:#111211;--care-accent:#7bd100;--care-line:rgba(75,81,61,.35);
  font-family:'Shippori Mincho','Noto Serif JP','YuMincho','游明朝',serif;color:var(--care-ink);
}
.care-timeline__stage{position:relative}

/* 説明枠（墨色の吹き出し）: 2本目の矢印の上に置き、下の三角で10年目の点を指す */
.care-timeline__callout{position:relative;width:calc((var(--to) - var(--from)) * 1%);margin:0 0 30px calc(var(--from) * 1%);padding:15px 20px 17px 54px;border-left:4px solid var(--care-note);background:var(--care-note);color:#fff}
.care-timeline__callout::after{content:'';position:absolute;top:100%;left:calc((var(--tail) - var(--from)) / (var(--to) - var(--from)) * 100%);border-top:16px solid var(--care-note);border-left:10px solid transparent;border-right:10px solid transparent;transform:translateX(-50%)}
.care-timeline__callout i{position:absolute;left:18px;top:17px;font-size:1.45rem;line-height:1;color:#dce9ba}
.care-timeline__callout b{display:block;margin-bottom:6px;font-size:.95rem;font-weight:500;line-height:1.5;letter-spacing:.14em}
/* 説明文はゴシック体（ページの --font-gothic）。見出し・時期ラベルは明朝 500 */
.care-timeline__callout p{margin:0;font-family:var(--font-gothic,'Zen Kaku Gothic New','Noto Sans JP',sans-serif);font-size:.82rem;line-height:1.7;letter-spacing:.04em}

/* 矢印の段: 左端にお引き渡し、3本の矢印、連絡・点検の点と時期 */
.care-timeline__track{position:relative;height:172px}
.care-timeline__start{position:absolute;left:0;top:0;width:58px;display:flex;flex-direction:column;align-items:center}
.care-timeline__icon{width:58px;height:58px;display:grid;place-items:center;border:1px solid var(--care-line);border-radius:50%;background:#f5f6ef;color:var(--care-green);font-size:1.4rem;line-height:1}
.care-timeline__start-label{margin-top:12px;writing-mode:vertical-rl;font-size:.95rem;font-weight:500;line-height:1;letter-spacing:.2em;color:var(--care-green)}
.care-timeline__segment{--c:var(--care-accent);position:absolute;top:24px;left:calc(var(--from) * 1%);width:calc((var(--to) - var(--from)) * 1% - 18px);height:10px;background:rgba(123,209,0,.14)}
.care-timeline__segment--2{--c:#b0e366}
.care-timeline__segment--3{--c:#d1efa6}
.care-timeline__segment i{position:absolute;inset:0;background:var(--c);transform-origin:left center}
.care-timeline__segment::after{content:'';position:absolute;left:100%;top:-8px;border-left:18px solid var(--c);border-top:13px solid transparent;border-bottom:13px solid transparent}
.care-timeline__points{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.care-timeline__point{position:absolute;left:calc(var(--x) * 1%);top:0;padding-top:96px;transform:translateX(-50%);font-size:clamp(.9rem,1.1vw,1.05rem);font-weight:500;line-height:1.3;letter-spacing:.06em;white-space:nowrap;color:var(--care-green)}
.care-timeline__point::before{content:'';position:absolute;left:50%;top:19px;width:20px;height:20px;border:5px solid #fff;border-radius:50%;background:var(--care-green);box-shadow:0 0 0 1px rgba(17,18,17,.12);transform:translateX(-50%)}
.care-timeline__point::after{content:'';position:absolute;left:50%;top:39px;width:1px;height:48px;background:var(--care-line)}

/* 画面に入ったら、左から一定の速さで線を伸ばし、線が届いた点から順に出す（JS が is-armed と is-visible を付ける） */
.care-timeline.is-armed .care-timeline__segment i{transform:scaleX(0)}
.care-timeline.is-armed .care-timeline__segment::after,.care-timeline.is-armed .care-timeline__start{opacity:0}
.care-timeline.is-armed .care-timeline__point{opacity:0;transform:translate(-50%,12px)}
.care-timeline.is-armed .care-timeline__callout{opacity:0;transform:translateY(12px)}
.care-timeline.is-visible .care-timeline__start{opacity:1;transition:opacity .6s ease .1s}
.care-timeline.is-visible .care-timeline__segment i{transform:scaleX(1);transition:transform calc((var(--to) - var(--from)) * var(--pace)) linear calc(var(--from) * var(--pace) + .3s)}
.care-timeline.is-visible .care-timeline__segment::after{opacity:1;transition:opacity .25s ease calc(var(--to) * var(--pace) + .2s)}
.care-timeline.is-visible .care-timeline__point{opacity:1;transform:translate(-50%,0);transition:opacity .6s cubic-bezier(.16,1,.3,1) calc(var(--x) * var(--pace) + .3s),transform .6s cubic-bezier(.16,1,.3,1) calc(var(--x) * var(--pace) + .3s)}
.care-timeline.is-visible .care-timeline__callout{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1) calc(var(--tail) * var(--pace) + .7s),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--tail) * var(--pace) + .7s)}

/* スマホ: 図の幅を保ったまま横にスクロールする（親ページと同じ） */
@media (max-width:720px){
  .care-timeline{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .care-timeline__stage{min-width:760px;padding-bottom:4px}
}
@media (prefers-reduced-motion:reduce){
  .care-timeline *{transition:none!important}
}