/* 細かな動き（2026-10-06）。カーソルを合わせたときの変化、押したときの手応え、スクロールで出てくる表示、ヘッダーの出し入れ。
   最後に読み込む。動きを減らす設定（prefers-reduced-motion）のときは home-v3/v4.css が transition と animation をすべて止める。 */
.home-v5 {--ease-out: cubic-bezier(.23,1,.58,1);}

/* 1. 文字色・背景色・影は、どのリンクも 0.25 秒かけて変わる */
.home-v5 a, .home-v5 button, .home-v5 summary {transition: color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out), opacity .25s;}
.home-v5 .header nav a:hover {color: var(--green);}
.home-v5 .faq summary {transition: color .25s var(--ease-out), padding-left .3s var(--ease-out);}

/* 2. 文字リンクは下線が左からすっと伸びる */
.home-v5 .underlink, .home-v5 .text-button, .home-v5 .footer nav a, .home-v5 .journey-entry>a, .home-v5 .entry-ribbon>a {background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: left calc(100% - 1px); transition: background-size .35s var(--ease-out), color .25s var(--ease-out);}
.home-v5 .journey-entry>a {text-decoration: none; padding-bottom: 3px;}

/* 3. 押したときの手応え（タッチでも効く） */
.home-v5 .btn:active, .home-v5 .round-button:active, .home-v5 .header-entry:active, .home-v5 .mobile-entry a:active, .home-v5 .local-nav a:active, .home-v5 .voice-controls button:active, .home-v5 .course-switch a:active {transform: scale(.97); transition-duration: .1s;}

/* 4. ヘッダー：下に読み進めると隠れ、戻る・上にカーソルを寄せるとすっと降りてくる */
.home-v5 .header {transition: transform .45s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s;}
.home-v5 .header.is-hidden {transform: translateY(-100%);}
.home-v5 .header.is-scrolled {box-shadow: 0 6px 24px #12372b14;}

/* 5. スクロールで出てくる表示。motion.js が .reveal を付け、見えたら .is-inview、動き終わったら両方外す */
.motion-ready .reveal {opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: var(--reveal-delay, 0s);}
.motion-ready .reveal.is-inview {opacity: 1; transform: none;}

/* 6. 主役の写真：カーソルを近づけた向きへ、奥行きごとにわずかに寄る（--px/--py は motion.js が毎フレームなめらかに入れる） */
.home-v5 .collage-main {--depth: 5px;}
.home-v5 .collage-small {--depth: 9px;}
.home-v5 .collage-circle {--depth: 13px;}

@media (hover:hover) and (pointer:fine) {
  .home-v5 .underlink:hover, .home-v5 .text-button:hover, .home-v5 .footer nav a:hover, .home-v5 .journey-entry>a:hover, .home-v5 .entry-ribbon>a:hover {background-size: 100% 1px;}
  .home-v5 .collage-grid figure {transform: translate(calc(var(--px, 0) * var(--depth)), calc(var(--py, 0) * var(--depth)));}
  .home-v5 .collage-star {transform: translate(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -16px));}

  /* 7. ボタン：濃い色が左からすっと満ちて、少し浮き、矢印が先へ進む */
  .home-v5 .btn, .home-v5 .header-entry, .home-v5 .round-button {position: relative; overflow: hidden; isolation: isolate;}
  .home-v5 .btn::before, .home-v5 .header-entry::before, .home-v5 .round-button::before {content: ''; position: absolute; inset: 0; z-index: -1; background: var(--deep); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);}
  .home-v5 .btn.teal::before {background: #05564f;}
  .home-v5 .header-entry::before, .home-v5 .round-button::before {background: var(--green);}
  .home-v5 .btn:hover::before, .home-v5 .header-entry:hover::before, .home-v5 .round-button:hover::before {transform: scaleX(1);}
  .home-v5 .btn:hover {transform: translateY(-2px); box-shadow: 0 12px 26px #12372b26;}
  .home-v5 .btn:hover>span {transform: translateX(4px);}
  .home-v5 .round-button:hover, .home-v5 .header-entry:hover {background: var(--ink); transform: translateY(-2px);}
  .home-v5 .round-button:hover .arrow-circle {transform: translateY(3px);}
  .home-v5 .header-entry span {display: inline-block; transition: transform .3s var(--ease-out);}
  .home-v5 .header-entry:hover span {transform: translate(2px,-2px);}
  .home-v5 .btn.entry-pending:hover {transform: none; box-shadow: none;}
  .home-v5 .btn.entry-pending::before {display: none;}

  /* 8. 写真：カーソルを合わせると少し縮んで、周りにブランド色の縁が出る */
  .home-v5 .card-image {background: var(--lime);}
  .home-v5 .health .card-image {background: #d4f1e6;}
  .home-v5 .card-image>img {transition: transform .45s var(--ease-out), border-radius .45s var(--ease-out);}
  .home-v5 .course-card:hover .card-image>img {transform: scale(.93); border-radius: 10px;}
  .course-v5 .course-preview-art {background: var(--lime);}
  .course-v5 .course-preview-art>img {transition: transform .45s var(--ease-out), border-radius .45s var(--ease-out);}
  .course-v5 .course-switch a:hover .course-preview-art>img {transform: scale(.93); border-radius: 10px;}
  .home-v5 .collage-grid img, .home-v5 .moments-strip img {transition: transform .5s var(--ease-out), border-radius .5s var(--ease-out);}
  .home-v5 .moments-strip figure {background: #c9dd8a;}
  .home-v5 .collage-grid figure:hover img, .home-v5 .moments-strip figure:hover img {transform: scale(.96); border-radius: 10px;}
  .home-v5 .support-layout figure {overflow: hidden; border-radius: 100px 12px 12px 12px;}
  .home-v5 .support-layout figure>img {transition: transform .6s var(--ease-out);}
  .home-v5 .support-layout figure:hover>img {transform: scale(1.03);}

  /* 9. カード類：少し浮いて影が広がる */
  .home-v5 .course-card {transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .25s;}
  .home-v5 .course-card:hover {transform: translateY(-6px); box-shadow: 0 20px 44px #12372b1f;}
  .course-v5 .process-grid article, .home-v5 .flow-grid>li, .home-v5 .voice-card, .course-v5 .requirements, .course-v5 .deliverable, .home-v5 .journey-entry, .home-v5 .benefit-status {transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .3s;}
  .course-v5 .process-grid article:hover, .home-v5 .voice-card:hover, .home-v5 .journey-entry:hover, .home-v5 .benefit-status:hover {transform: translateY(-4px); box-shadow: 0 14px 30px #12372b14;}
  .home-v5 .flow-grid>li:hover {transform: translateY(-4px);}
  .course-v5 .requirements:hover {box-shadow: 0 14px 30px #12372b14;}
  .home-v5 .faq summary:hover {padding-left: 8px;}
  .home-v5 .support-list article>span {transition: transform .35s var(--ease-out), background-color .3s, color .3s;}
  .home-v5 .support-list article:hover>span {transform: scale(1.12) rotate(-8deg); background: var(--green); color: #fff;}
  .course-v5 .timeline-date {transition: color .25s;}
  .course-v5 .timeline li:hover .timeline-date {color: var(--green);}
  .course-v5 .health .timeline li:hover .timeline-date {color: var(--teal);}
  .home-v5 .tags span {transition: transform .3s var(--ease-out);}
  .home-v5 .course-card:hover .tags span {transform: translateY(-1px);}
}