/* 動きと操作性（事業所サイト・会社サイト共通）。
   - html に .js-motion が付いたときだけ、動きが有効になる（/js/motion-init.js が付ける）。
   - 「動きを減らす」設定の端末では .js-motion を付けないので、内容はそのまま表示される。
   - 隠すのは、/js/motion.js が data-reveal を付けた要素だけ。JS が読めなくても、内容は消えない。 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- スクロールで現れる ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; }
.js-motion [data-reveal='left'] { transform: translateX(-26px); }
.js-motion [data-reveal='zoom'] { transform: scale(0.96); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* 見出しの下線が伸びる */
.js-motion .section-head[data-reveal] .title-underline,
.js-motion .section-head[data-reveal] .title-underline2 { transform: scaleX(0); transform-origin: left center; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }
.js-motion .section-head[data-reveal] .title-underline2 { transition-delay: 0.45s; }
.js-motion .section-head[data-reveal].is-in .title-underline,
.js-motion .section-head[data-reveal].is-in .title-underline2 { transform: scaleX(1); }

/* 手順をつなぐ線が、左から右へ伸びる */
.js-motion .step-row[data-steps] .step-connector { transform: scaleX(0); transform-origin: left center; transition: transform 0.5s ease; }
.js-motion .step-row[data-steps].is-in .step-connector { transform: scaleX(1); }

/* 強調の下線が引かれる（「そらいず」に込めた思い） */
.js-motion .yurai-box[data-reveal] .yurai-em { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 0.9s ease 0.4s; }
.js-motion .yurai-box[data-reveal].is-in .yurai-em { background-size: 100% 100%; }

/* ---------- 最初の画面 ---------- */
@keyframes mo-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes mo-show { to { opacity: 1; } }
.js-motion .hero-content > *, .js-motion .page-hero-content > *, .js-motion .site-top .hero .wrap > * { animation: mo-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js-motion .hero-content > :nth-child(1), .js-motion .page-hero-content > :nth-child(1), .js-motion .site-top .hero .wrap > :nth-child(1) { animation-delay: 0.1s; }
.js-motion .hero-content > :nth-child(2), .js-motion .page-hero-content > :nth-child(2), .js-motion .site-top .hero .wrap > :nth-child(2) { animation-delay: 0.25s; }
.js-motion .hero-content > :nth-child(3) { animation-delay: 0.4s; }
.js-motion .hero-content > :nth-child(4) { animation-delay: 0.55s; }
.js-motion .hero-content > :nth-child(5) { animation-delay: 0.7s; }
/* 飛行機雲: JS が線を描く準備をするまで隠す。JS が動かなくても、3秒後には必ず表示する。 */
.js-motion .hero-deco { opacity: 0; animation: mo-show 0.6s ease 3s forwards; }
.js-motion .hero-deco.is-ready { opacity: 1; animation: none; }
.js-motion .hero-deco .mo-line { transition: stroke-dashoffset 1.9s cubic-bezier(0.3, 0.6, 0.2, 1); }
.js-motion .hero-deco .mo-fly { opacity: 0; transition: opacity 0.7s ease; }
.js-motion .hero-deco.is-drawn .mo-fly { opacity: 1; }

/* ---------- 触れたときの反応 ---------- */
.btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(29, 78, 120, 0.18); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.card, .publish-card, .feature-row, .price-card, .jump, .fee, .group { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover, .publish-card:hover, .feature-row:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(29, 78, 120, 0.12); }
.nav-link { transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.namae-photo img, .tsunagari-image { transition: transform 0.9s ease; }
.namae-photo:hover img { transform: scale(1.04); }
.icon-circle { transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.icon-item:hover .icon-circle { transform: scale(1.12) rotate(-4deg); }
.step-num { transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.3s ease, color 0.3s ease; }
.step-card:hover .step-num { transform: scale(1.12); background: #1b78b8; color: #ffffff; }

/* ---------- メニューバー ---------- */
.site-header, .bar { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.is-scrolled .site-header, .is-scrolled .bar { box-shadow: 0 6px 20px rgba(29, 78, 120, 0.16); }
.mo-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 80; pointer-events: none; }
.mo-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #7cc6ee, #1b78b8); }

/* ---------- よくある質問（押すと開く） ---------- */
.qa-acc { align-items: flex-start; }
.qa-acc .qa-item { border-radius: 16px; background: #ffffff; box-shadow: 0 0 0 1px #d5e6f3; padding: 16px 18px; transition: box-shadow 0.25s ease; }
.qa-acc .qa-item.is-open { box-shadow: 0 0 0 2px #7cc6ee; }
.qa-acc .qa-question { cursor: pointer; margin-bottom: 0; align-items: center; position: relative; padding-right: 40px; border-radius: 10px; }
.qa-acc .qa-question:focus-visible { outline: 3px solid #1b78b8; outline-offset: 4px; }
.qa-acc .qa-question::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 3px solid #1b78b8; border-bottom: 3px solid #1b78b8; transform: rotate(45deg); transition: transform 0.3s ease, margin-top 0.3s ease; }
.qa-acc .qa-item.is-open .qa-question::after { transform: rotate(-135deg); margin-top: -3px; }
.qa-acc .qa-answer { overflow: hidden; height: 0; opacity: 0; visibility: hidden; transition: height 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s; }
.qa-acc .qa-item.is-open .qa-answer { opacity: 1; visibility: visible; transition: height 0.35s ease, opacity 0.35s ease, visibility 0s; }
.qa-acc .qa-answer-in { padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { .qa-acc .qa-answer, .qa-acc .qa-question::after { transition: none; } }

/* ---------- 上へ戻る ---------- */
.mo-top { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #1b78b8; color: #ffffff; cursor: pointer; box-shadow: 0 6px 16px rgba(29, 78, 120, 0.3); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, bottom 0.3s ease; }
.mo-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s, bottom 0.3s ease; }
.mo-top:hover { background: #1d4e78; }
.mo-top:focus-visible { outline: 3px solid #1d4e78; outline-offset: 3px; }
.mo-top svg { display: block; margin: 0 auto; }
.has-float-cta .mo-top { bottom: 88px; }

/* ---------- スマホ: 読み進めると出る「見学・お問い合わせ」 ---------- */
.mo-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); box-shadow: 0 -4px 14px rgba(29, 78, 120, 0.14); transform: translateY(110%); transition: transform 0.35s ease; }
.mo-cta.is-on { transform: none; }
.mo-cta .btn { display: block; width: 100%; }
@media (min-width: 901px) { .mo-cta { display: none; } .has-float-cta .mo-top { bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .mo-cta, .mo-top, .btn, .card, .publish-card, .feature-row { transition: none; } .btn:hover, .card:hover, .publish-card:hover, .feature-row:hover { transform: none; } }

/* スマホでは、上へ戻るボタンを少し小さく */
@media (max-width: 900px) { .mo-top { width: 46px; height: 46px; right: 12px; } }