/* ----------------------------------------------------------------
 * Generated by SoloptiLinkAI
 * (c) 2026 SoloptiLink Inc. - All rights reserved.
 * Redistribution / derivative-work / reverse-engineering prohibited
 * (著作権法 / 不正競争防止法 / 当社利用規約 第8条). Inquiries: support@soloptilink.com
 * ----------------------------------------------------------------*/

/* ============================================================
 * Guu! ウェイティングサイト
 * 2026-09-16 修正指示書に基づく カメラ起点 5画面スワイプ構成
 * スマートフォン縦画面を基準に設計。
 * ============================================================ */

:root {
  --blue: #1b44e4;
  --blue-dark: #1436b8;
  --lime: #b0d845;
  --navy: #081d4d;
  --navy-2: #0e2243;
  --ice: #dfebfc;
  --white: #ffffff;
  --text: #1a2340;
  --text-sub: #5a6a8c;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--navy);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ============ ヘッダー ============ */
.hd {
  position: fixed; z-index: 60;
  top: calc(var(--safe-t) + 14px); left: 18px;
  pointer-events: none;
}
.hd__logo { display: inline-block; pointer-events: auto; }
.hd__logo img { width: 112px; }
/* 背景が暗い画面ではロゴを白抜きにする */
body.on-dark .hd__logo img { filter: brightness(0) invert(1); }

/* ============ デッキ ============ */
.deck { position: fixed; inset: 0; overflow: hidden; }

.panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 66px) 22px calc(var(--safe-b) + 92px);
  opacity: 1; transform: none;
  transition: opacity .32s ease, transform .32s cubic-bezier(.2, .9, .3, 1);
}
.panel[hidden] { display: none; }
.panel.enter-right { transform: translateX(46px); opacity: 0; }
.panel.enter-left  { transform: translateX(-46px); opacity: 0; }
.panel.leave-left  { transform: translateX(-46px); opacity: 0; pointer-events: none; }
.panel.leave-right { transform: translateX(46px); opacity: 0; pointer-events: none; }

/* ============================================================
 * 1枚目: つかみ
 * ============================================================ */
.panel--open {
  background:
    radial-gradient(ellipse 95% 60% at 50% 10%, rgba(27, 68, 228, .55), transparent 68%),
    linear-gradient(180deg, #0a2159 0%, var(--navy) 100%);
}
.open {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; text-align: center; color: var(--white);
}
.open__kicker {
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; letter-spacing: .3em; color: var(--lime);
}
.open__title {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(30px, 8.6vw, 46px);
  line-height: 1.45; letter-spacing: .03em;
  margin-top: -6px;
}
.open__lead {
  font-size: 13.5px; line-height: 1.95;
  color: rgba(223, 235, 252, .86);
}
.open__note { font-size: 12px; color: rgba(223, 235, 252, .62); margin-top: -8px; }
.btn--open { margin-top: 2px; }

/* 6つのタイプのうち、あなたはどれ */
.eggs {
  list-style: none;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 3vw, 14px);
  padding: 0; margin: 2px 0;
}
.eggs__it { line-height: 0; }
.eggs__shell {
  display: grid; place-items: center;
  width: clamp(40px, 13vw, 56px);
  aspect-ratio: 8 / 10;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: rgba(223, 235, 252, .16);
  box-shadow: inset 0 -3px 8px rgba(3, 12, 36, .25);
}
.eggs__it--me .eggs__shell {
  width: clamp(58px, 19vw, 82px);
  background: linear-gradient(165deg, #3b6bff, #1436b8);
  box-shadow: 0 10px 26px rgba(27, 68, 228, .5), inset 0 0 0 2px var(--lime);
  animation: eggBob 2.8s ease-in-out infinite;
}
@keyframes eggBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(-2.5deg); }
}
.eggs__q {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(24px, 7.6vw, 33px);
  line-height: 1; color: var(--lime);
}

/* ============================================================
 * 2〜4枚目: サービス紹介カード
 * ============================================================ */
.panel--card { background: linear-gradient(180deg, #f4f8fe 0%, #e8f0fd 100%); }
.panel--c2 { background: linear-gradient(180deg, #eef4fd 0%, #dfeafb 100%); }
.panel--c3 {
  background: radial-gradient(ellipse 80% 55% at 50% 8%, rgba(27, 68, 228, .40), transparent 62%), var(--navy);
}
.panel--c3 .card__title { color: var(--white); }
.panel--c3 .card__line { color: rgba(223, 235, 252, .82); }
.panel--c3 .btn--more { color: var(--lime); border-color: rgba(176, 216, 69, .5); }

.card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; text-align: center;
}
.card__art { width: min(300px, 80vw); }
.card__art svg { width: 100%; height: auto; overflow: visible; }

.card__title {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(26px, 7.2vw, 36px);
  line-height: 1.55; letter-spacing: .03em;
  color: var(--navy);
}
.card__line {
  font-size: 14px; color: var(--text-sub);
}

/* --- 2枚目のイラスト: すれ違う吹き出し --- */
.bub { fill: var(--white); stroke: rgba(8, 29, 77, .1); stroke-width: 2; }
.bub--b { fill: var(--blue); stroke: none; }
.bub__tail--a { fill: var(--white); }
.bub__tail--b { fill: var(--blue); }
.bub--a, .bub__tail--a { animation: bubA 3.4s ease-in-out infinite; transform-box: fill-box; }
.bub--b, .bub__tail--b { animation: bubB 3.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes bubA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bubB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.miss path {
  stroke: #ff6b6b; stroke-width: 7; stroke-linecap: round; fill: none;
  animation: missIn 3.4s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes missIn {
  0%, 30% { opacity: 0; transform: scale(.5); }
  50%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.5); }
}

/* --- 3枚目のイラスト: ミッションカード --- */
.mc { fill: var(--white); stroke: rgba(8, 29, 77, .1); stroke-width: 2; }
.mc--3 { fill: #cfe0fa; stroke: none; }
.mc--2 { fill: #e6effc; stroke: none; }
.mc--1 { animation: mcPop 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mcPop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.mc__bar { fill: #d5e2f7; }
.mc__bar--lime { fill: var(--lime); }

/* --- 4枚目のイラスト: 認定バッジ --- */
.bd__ring {
  fill: none; stroke: var(--lime); stroke-width: 3; opacity: .7;
  animation: bdRing 3s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes bdRing { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.bd__core { fill: var(--blue); }
.bd__check { fill: none; stroke: var(--white); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.bd__rib { fill: var(--lime); }
.bd__rib--r { fill: #8fc72c; }

/* ============================================================
 * 5枚目: 診断へ
 * ============================================================ */
.panel--go {
  background: radial-gradient(ellipse 95% 60% at 50% 18%, rgba(27, 68, 228, .5), transparent 66%), var(--navy);
}
.go {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px; text-align: center; color: var(--white);
}
.go__art { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.go__art img { width: 104px; height: 104px; position: relative; z-index: 1; }
.go__pulse {
  position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(176, 216, 69, .6);
  animation: lensPulse 2.6s ease-out infinite;
}
.go__title {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.55; letter-spacing: .03em;
}
.go__note { font-size: 12px; color: rgba(223, 235, 252, .7); margin-top: -6px; }
.go__line {
  font-size: 13px; color: var(--lime);
  text-decoration: underline; text-underline-offset: 4px;
  padding: 6px 4px;
}
.go__org { font-size: 11px; color: rgba(223, 235, 252, .55); margin-top: 6px; }

/* ============================================================
 * ボタン
 * ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700;
  text-align: center;
  border-radius: 999px;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn--main {
  background: var(--blue); color: var(--white);
  font-size: 16px; padding: 15px 38px; min-height: 52px;
  box-shadow: 0 10px 28px rgba(27, 68, 228, .42);
}
.btn--main:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(27, 68, 228, .5); }
.btn--go {
  background: linear-gradient(135deg, var(--lime), #8fc72c);
  color: #14300a; font-weight: 900; font-size: 18px;
  padding: 17px 46px; min-height: 58px;
  box-shadow: 0 12px 32px rgba(176, 216, 69, .38);
}
.btn--text {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12.5px; color: rgba(255, 255, 255, .82);
  text-decoration: underline; text-underline-offset: 4px;
  padding: 8px 12px;
}
.btn--more {
  font-size: 13px; color: var(--blue);
  border: 1.5px solid rgba(27, 68, 228, .34);
  padding: 10px 26px; min-height: 44px;
}
.btn--more:hover { background: rgba(27, 68, 228, .07); }

/* ============================================================
 * 進捗インジケーター
 * ============================================================ */
.dots {
  position: fixed; z-index: 55;
  left: 0; right: 0; bottom: calc(var(--safe-b) + 20px);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  pointer-events: none;
}
.dots__list {
  list-style: none; display: flex; align-items: center; gap: 9px;
  pointer-events: auto;
}
.dot {
  display: block; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(8, 29, 77, .24);
  transition: width .28s, background .28s;
}
.dot.is-on { width: 26px; background: var(--blue); }
body.on-dark .dot { background: rgba(255, 255, 255, .32); }
body.on-dark .dot.is-on { background: var(--lime); }

.dots__back, .dots__next {
  width: 40px; height: 40px; border-radius: 50%;
  position: relative; pointer-events: auto;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 4px 14px rgba(8, 29, 77, .12);
  transition: opacity .2s, transform .2s;
}
body.on-dark .dots__back, body.on-dark .dots__next {
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.dots__back::before, .dots__next::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-top: 2.2px solid var(--navy); border-right: 2.2px solid var(--navy);
}
body.on-dark .dots__back::before, body.on-dark .dots__next::before {
  border-color: var(--white);
}
.dots__next::before { transform: translate(-65%, -50%) rotate(45deg); }
.dots__back::before { transform: translate(-35%, -50%) rotate(-135deg); }
.dots__back:disabled, .dots__next:disabled { opacity: .22; }

.swipe-hint {
  position: fixed; z-index: 54;
  left: 0; right: 0; bottom: calc(var(--safe-b) + 62px);
  text-align: center;
  font-size: 11px; letter-spacing: .24em;
  color: rgba(255, 255, 255, .6);
  animation: hintFade 2.6s ease-in-out infinite;
  transition: opacity .4s;
}
.swipe-hint.is-hidden { opacity: 0; animation: none; }
body:not(.on-dark) .swipe-hint { color: rgba(8, 29, 77, .38); }
@keyframes hintFade { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ============================================================
 * くわしく見る (ボトムシート)
 * ============================================================ */
.sheet { position: fixed; inset: 0; z-index: 130; }
.sheet[hidden] { display: none; }
.sheet__overlay {
  position: absolute; inset: 0;
  background: rgba(8, 29, 77, .55);
  opacity: 0; transition: opacity .28s;
}
.sheet.is-open .sheet__overlay { opacity: 1; }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 84vh; overflow-y: auto;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  padding: 34px 24px calc(var(--safe-b) + 30px);
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.2, .9, .3, 1);
  box-shadow: 0 -10px 40px rgba(8, 29, 77, .2);
}
.sheet.is-open .sheet__panel { transform: translateY(0); }
.sheet__close {
  position: absolute; top: 14px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(8, 29, 77, .06);
}
.sheet__close::before, .sheet__close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 2px; background: var(--navy);
}
.sheet__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sheet__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet__title {
  font-family: var(--font-head); font-weight: 900;
  font-size: 19px; color: var(--navy); margin-bottom: 14px;
  padding-right: 42px;
}
.sheet__panel p { font-size: 14px; line-height: 1.95; color: var(--text-sub); margin-bottom: 12px; }
.sheet__list { list-style: none; margin: 0 0 14px; }
.sheet__list li {
  font-size: 13.5px; color: var(--text-sub);
  padding-left: 20px; position: relative; line-height: 1.9;
}
.sheet__list li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
}
.sheet__link {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700;
  font-size: 14px; color: var(--blue);
}

/* ============================================================
 * PC (崩れなければ可)
 * ============================================================ */
@media (min-width: 720px) {
  .panel { padding: 110px 40px 120px; }
  .card { max-width: 480px; }
  .hd__logo img { width: 130px; }
}

/* 横向き・背の低い画面 */
@media (max-height: 620px) {
  .open__title { font-size: clamp(22px, 5.4vw, 28px); }
  .eggs { gap: 7px; }
  .card__art { width: min(180px, 44vw); }
  .go__art { width: 72px; height: 72px; }
  .go__art img { width: 64px; height: 64px; }
}

/* ============================================================
 * 動きを減らす設定
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
  .eggs__it--me .eggs__shell, .go__pulse, .bub--a, .bub--b, .bub__tail--a, .bub__tail--b,
  .miss path, .mc--1, .bd__ring, .swipe-hint {
    animation: none !important;
  }
  .miss path { opacity: 1; }
}