/* 168（2026-10-09）AIKATA 下層ページ：案内役のひとこと／トップの仕掛けの再利用／サービスの地図 */

/* ── ページ見出しの下：案内役のひとこと（濃い背景の上） ── */
html body.aikata .mate168{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:14px;max-width:720px;margin:20px auto 36px;animation:mate168in .7s .35s cubic-bezier(.22,1,.36,1) both}
html body.aikata[data-ak168] main .mate168 img{flex:none;width:64px!important;height:64px!important;aspect-ratio:1/1!important;max-width:none!important;border-radius:50%;border:3px solid #f3c876;background:#fff;animation:mate166wave 1.2s 1.1s ease-in-out}
html body.aikata[data-ak168] main .mate168 p{position:relative;margin:0!important;padding:14px 18px;border-radius:18px 18px 18px 4px;background:#fff;color:#29243c!important;font-size:16px!important;line-height:1.75;text-align:left}
html body.aikata[data-ak168] main .mate168 .mate168-who{display:block;margin-bottom:2px;font:700 16px/1 Arial,sans-serif!important;letter-spacing:.12em;color:#4b3bd0!important}
@keyframes mate168in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mate166wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}

/* ── トップの部品を置く帯 ── */
html body.aikata .lw168{padding-top:96px;padding-bottom:24px}
html body.aikata .lw168-head{max-width:760px;margin:0 auto 8px;text-align:center}
html body.aikata .lw168-eyebrow{margin:0 0 10px!important;font:700 16px/1.2 Arial,sans-serif;letter-spacing:.18em;color:#4b3bd0}
html body.aikata[data-ak168] main .lw168-head h2{margin:0 0 14px!important;font-size:clamp(26px,2.6vw,38px)!important;line-height:1.5!important;color:#29243c!important;text-align:center}
html body.aikata .lw168-head>p:last-child{margin:0!important;font-size:16px;line-height:1.9;color:#5d5776}
html body.aikata .lw168 .dial165,html body.aikata .lw168 .card165,html body.aikata .lw168 .ak150-cases{max-width:1120px;margin-left:auto;margin-right:auto}
html body.aikata .lw168 .ak150-cases{margin-top:36px}
html body.aikata .lw168 .card165{margin-bottom:0!important}
html body.aikata[data-ak168] .value151{margin-top:24px}

/* チャット：画面に入ってから会話が始まる */
html body.aikata .lw168-chat .chat165{margin:36px auto 0;max-width:560px;border:1px solid #ddd5f3}
html body.aikata .lw168-chat .c165{animation-play-state:paused}
html body.aikata .lw168-chat.is-play .c165,html body.aikata .lw168-chat.is-play .c165 i{animation-play-state:running}
html body.aikata[data-ak168] .lw168-chat .c165,html body.aikata[data-ak168] .lw168-chat .c165.ai p,html body.aikata[data-ak168] .lw168-chat .chat165-chips a{font-size:16px}

/* ── 支援内容：サービスの地図 ── */
html body.aikata .orbit168{--r:min(300px,40vw);position:relative;width:calc(var(--r) * 2 + 200px);max-width:100%;aspect-ratio:1/1;margin:28px auto 0}
html body.aikata .orbit168-ring{position:absolute;inset:100px;border-radius:50%;border:2px dashed #cfc5f5;animation:orbit168spin 60s linear infinite}
html body.aikata .orbit168-ring::before{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,#f6f3ff 0,#efe9ff 60%,rgba(239,233,255,0) 72%)}
@keyframes orbit168spin{to{transform:rotate(360deg)}}
html body.aikata .orbit168-core{position:absolute;left:50%;top:50%;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(300px,48%);transform:translate(-50%,-50%);text-align:center}
html body.aikata[data-ak168] main .orbit168-core img{width:88px!important;height:88px!important;aspect-ratio:1/1!important;max-width:none!important;border-radius:50%;border:4px solid #fff;background:#fff}
html body.aikata .orbit168-label{margin:10px 0 6px!important;font:700 20px/1.3 Arial,'Noto Sans JP',sans-serif;letter-spacing:.06em;color:#4b3bd0}
html body.aikata .orbit168-worry{min-height:3.6em;margin:0!important;font-size:16px;font-weight:700;line-height:1.8;color:#29243c}
html body.aikata .orbit168-core.is-swap .orbit168-label,html body.aikata .orbit168-core.is-swap .orbit168-worry{animation:orbit168swap .35s ease both}
@keyframes orbit168swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html body.aikata .orbit168-list{position:absolute;inset:0;margin:0!important;padding:0!important;list-style:none}
html body.aikata .orbit168-list li{position:absolute;left:50%;top:50%;margin:0!important;transform:rotate(calc(var(--i) * 360deg / 11 - 90deg)) translate(calc(var(--r) + 0px)) rotate(calc(90deg - var(--i) * 360deg / 11))}
html body.aikata .orbit168-list li::before{display:none!important}
html body.aikata[data-ak168] main .orbit168-list a{position:relative;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;border:2px solid #ddd5f3;color:#29243c!important;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap;text-decoration:none!important;transform:translate(-50%,-50%);transition:background-color .25s,border-color .25s,color .25s,transform .25s cubic-bezier(.22,1,.36,1)}
html body.aikata .orbit168-dot{width:10px;height:10px;border-radius:50%;background:#8f7dff;transition:background-color .25s}
html body.aikata[data-ak168] main .orbit168-list a:hover,html body.aikata[data-ak168] main .orbit168-list a:focus-visible,html body.aikata[data-ak168] main .orbit168-list a.is-on{background:#4b3bd0;border-color:#4b3bd0;color:#fff!important;transform:translate(-50%,-50%) scale(1.08)}
html body.aikata .orbit168-list a:hover .orbit168-dot,html body.aikata .orbit168-list a:focus-visible .orbit168-dot,html body.aikata .orbit168-list a.is-on .orbit168-dot{background:#f3c876}
html body.aikata .orbit168-note{max-width:640px;margin:8px auto 0!important;font-size:16px;line-height:1.8;color:#5d5776;text-align:center}
/* 画面に入ると、支援が順に現れる */
html.mo161 body.aikata .orbit168 .orbit168-list li{opacity:0;transition:opacity .5s calc(var(--i) * .08s)}
html.mo161 body.aikata .orbit168.is-in .orbit168-list li{opacity:1}
html.mo161 body.aikata .orbit168 .orbit168-core{opacity:0;transition:opacity .6s .2s}
html.mo161 body.aikata .orbit168.is-in .orbit168-core{opacity:1}

@media(max-width:860px){
  html body.aikata .orbit168{width:auto;aspect-ratio:auto}
  html body.aikata .orbit168-ring{display:none}
  html body.aikata .orbit168-core{position:relative;left:auto;top:auto;width:auto;max-width:420px;margin:0 auto 20px;padding:20px 18px;border-radius:20px;background:#f6f3ff;transform:none}
  html body.aikata .orbit168-list{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html body.aikata .orbit168-list li{position:static;transform:none}
  html body.aikata[data-ak168] main .orbit168-list a{justify-content:center;white-space:normal;text-align:center;transform:none}
  html body.aikata[data-ak168] main .orbit168-list a:hover,html body.aikata[data-ak168] main .orbit168-list a:focus-visible,html body.aikata[data-ak168] main .orbit168-list a.is-on{transform:scale(1.03)}
}
@media(max-width:600px){
  html body.aikata .lw168{padding-top:64px}
  html body.aikata .mate168{margin:12px auto 28px;gap:10px}
  html body.aikata[data-ak168] main .mate168 img{width:48px!important;height:48px!important}
  html body.aikata[data-ak168] main .mate168 p{font-size:14px!important;padding:10px 12px}
  html body.aikata[data-ak168] main .mate168 .mate168-who{font-size:14px!important}
  html body.aikata .lw168-eyebrow,html body.aikata .lw168-head>p:last-child,html body.aikata .orbit168-worry,html body.aikata .orbit168-note{font-size:14px}
  html body.aikata[data-ak168] main .orbit168-list a{padding:10px 8px;font-size:14px}
  html body.aikata[data-ak168] .lw168-chat .c165,html body.aikata[data-ak168] .lw168-chat .c165.ai p,html body.aikata[data-ak168] .lw168-chat .chat165-chips a{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  html body.aikata .mate168,html body.aikata[data-ak168] main .mate168 img,html body.aikata .orbit168-ring{animation:none!important}
  html body.aikata .lw168-chat .c165{animation:none!important;opacity:1}
  html body.aikata .lw168-chat .c165.typing{display:none}
  html.mo161 body.aikata .orbit168 .orbit168-list li,html.mo161 body.aikata .orbit168 .orbit168-core{opacity:1;transition:none}
}

/* 下層ページでの崩れ対策（下層の img・h2 の共通指定に負けないように） */
html body.aikata[data-ak168] main .chat165-head img{flex:none!important;width:44px!important;height:44px!important;aspect-ratio:1/1!important;max-width:none!important}
html body.aikata[data-ak168] main .c165.ai img{flex:none!important;width:40px!important;height:40px!important;aspect-ratio:1/1!important;max-width:none!important}
html body.aikata[data-ak168] main .chat165-head{justify-content:flex-start}
html body.aikata[data-ak168] .value151 .v151-head{max-width:980px;margin-left:auto;margin-right:auto}
html body.aikata[data-ak168] main .value151 .v151-head h2{font-size:clamp(26px,2.8vw,40px)!important;line-height:1.5!important}
html body.aikata .lw168#try-hours{padding-top:72px}
html body.aikata .lw168#try-hours .dial165{margin-top:0}
html body.aikata[data-ak168] main .chat165 img{margin:0!important}
html body.aikata[data-ak168] .value151 .v151-head{text-align:center}
html body.aikata[data-ak168] .value151 .v151-head>*{margin-left:auto!important;margin-right:auto!important}
/* 170：下層のひとことも上下30px・中央 */
html body.aikata .mate168{margin:30px auto!important}
html body.aikata .mate168{gap:10px!important}
html body.aikata[data-ak168] main .mate168 p{border-radius:18px!important}
html body.aikata .mate168 p::before{content:'';position:absolute;left:-6px;bottom:16px;width:12px;height:12px;background:#fff;transform:rotate(45deg)}