@charset "UTF-8";
/*
 * AhaGate 法人向けページ専用スタイル
 * すべて [data-page="ahagate-business"] の中だけに効くようにしています。
 * 他のページには影響しません。
 */

/* ---------------- カラー・フォントの上書き ---------------- */
body[data-page="ahagate-business"] {
  --brand: #147C74;
  --brand-ink: #0E5F59;
  --brand-soft: #DCEDEA;
  --accent: #F0855A;
  --accent-ink: #D9663A;
  --accent-soft: #FDE9DE;

  --ink: #22312F;
  --ink-2: #3E4C4A;
  --ink-3: #5A6866;
  --ink-mute: #7C8987;
  --line: #E2E0DA;
  --line-soft: #EDEAE3;

  --bg: #FBF7F1;
  --bg-soft: #F3F8F7;
  --bg-tint: #DCEDEA;
  --shadow-brand: 0 10px 26px rgba(20,124,116,.26);

  --r-lg: 26px;
  --r-xl: 32px;

  --font-round: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", sans-serif;

  background: var(--bg);
}

body[data-page="ahagate-business"] h1,
body[data-page="ahagate-business"] h2,
body[data-page="ahagate-business"] h3,
body[data-page="ahagate-business"] h4 {
  font-family: var(--font-round);
  font-weight: 700;
}
body[data-page="ahagate-business"] h1,
body[data-page="ahagate-business"] h2 {
  font-weight: 900;
  line-height: 1.45;
}

/* ヘッダー・チェックリストなど、共通パーツの色をこのページ用になじませる */
body[data-page="ahagate-business"] .hdr {
  background: rgba(251,247,241,.9);
  border-color: rgba(34,49,47,.08);
}
body[data-page="ahagate-business"] .nav-tag--biz {
  background: var(--brand);
  color: #fff;
}
body[data-page="ahagate-business"] .checks li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.4l2.6 2.6L12 5.4' stroke='%230E5F59' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
body[data-page="ahagate-business"] .sec-soft {
  background: #fff;
  border-top: 1px solid rgba(34,49,47,.06);
  border-bottom: 1px solid rgba(34,49,47,.06);
}

/* ---------------- 背景のぼかし円 ---------------- */
.ab-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ab-blob--teal { background: radial-gradient(circle, #DCEDEA 0%, rgba(220,237,234,0) 70%); }
.ab-blob--peach { background: radial-gradient(circle, #FDE9DE 0%, rgba(253,233,222,0) 70%); }

@media (prefers-reduced-motion: no-preference) {
  .ab-blob { animation: ab-breathe 10s ease-in-out infinite; }
  .ab-float { animation: ab-floaty 7s ease-in-out infinite; }
  .ab-float--b { animation: ab-floaty2 8.5s ease-in-out infinite; }
}
@keyframes ab-breathe {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.08); opacity: .8; }
}
@keyframes ab-floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes ab-floaty2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-2deg); }
}

/* ---------------- ヒーロー ---------------- */
.ab-hero { overflow: hidden; }
.ab-hero .container { position: relative; z-index: 1; }
.ab-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--brand-soft);
  color: var(--brand);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 22px;
}
.ab-hero__badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.ab-hero__art {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: 0 18px 44px rgba(34,49,47,.07);
}
.ab-hero__art svg { width: 100%; display: block; }
.ab-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ab-tags span {
  font-size: 12px;
  color: var(--ink-mute);
  background: #fff;
  border: 1px solid rgba(34,49,47,.08);
  padding: 7px 13px;
  border-radius: 999px;
}

.ab-float {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 12px 28px rgba(34,49,47,.1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.ab-float b {
  display: block;
  font-family: var(--font-round);
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.ab-float small {
  font-size: 10.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.ab-float__ico {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ab-float__ico svg { width: 17px; height: 17px; }
.ab-float--a { top: -18px; left: -14px; }
.ab-float--b { bottom: -20px; right: -10px; }

@media (max-width: 560px) {
  .ab-float { display: none; }
}

/* ---------------- 丸いカード（やること4つ） ---------------- */
.ab-card {
  background: var(--bg);
  border: 1px solid rgba(34,49,47,.07);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(34,49,47,.08);
}
.ab-card__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 18px;
}
.ab-card__ico svg { width: 23px; height: 23px; }
.ab-card h3 { font-size: 17px; margin-bottom: 10px; }
.ab-card p { font-size: 13.5px; line-height: 1.9; }

.ab-card--accent {
  background: linear-gradient(160deg, #FFF6F1 0%, #FDE9DE 100%);
  border-color: rgba(240,133,90,.28);
}
.ab-card--accent:hover { box-shadow: 0 16px 32px rgba(217,102,58,.14); }
.ab-card--accent .ab-card__ico { background: #fff; color: var(--accent-ink); }
.ab-card--accent p { color: #7A5F53; }
.ab-card__only {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------------- はじめ / とちゅう / そのあと ---------------- */
.ab-stage {
  background: #fff;
  border: 1px solid rgba(34,49,47,.07);
  border-radius: var(--r-lg);
  padding: 22px 22px 26px;
  text-align: center;
}
.ab-stage__art {
  background: var(--bg);
  border-radius: 20px;
  padding: 8px;
  margin-bottom: 16px;
}
.ab-stage__art svg { width: 100%; display: block; }
.ab-stage__label {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 6px;
}
.ab-stage p { font-size: 13px; line-height: 1.85; }
.ab-stage--goal {
  background: linear-gradient(160deg, #FFF9F5 0%, #FFF1E8 100%);
  border-color: rgba(240,133,90,.28);
}
.ab-stage--goal .ab-stage__art { background: #fff; }
.ab-stage--goal p { color: #7A5F53; }

/* ---------------- プラン診断 ---------------- */
.ab-quiz-sec { overflow: hidden; }
.ab-quiz-sec .container { position: relative; z-index: 1; }
.ab-quiz {
  background: #fff;
  border: 1px solid rgba(34,49,47,.08);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: 0 20px 50px rgba(34,49,47,.07);
}
.ab-quiz__bars { display: flex; gap: 6px; margin-bottom: 26px; }
.ab-quiz__bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(34,49,47,.08);
  transition: background .2s ease;
}
.ab-quiz__bar.is-done { background: var(--brand); }

.ab-q { margin-bottom: 26px; }
.ab-q__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.ab-q__no {
  font-family: var(--font-round);
  font-weight: 900;
  color: var(--brand);
  font-size: 13px;
}
.ab-q h3 { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; }
.ab-q__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-opt {
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(34,49,47,.12);
  background: var(--bg);
  color: var(--ink-2);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.ab-opt:hover { transform: translateY(-2px); }
.ab-opt.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.ab-quiz__hint {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
}
.ab-result {
  margin-top: 30px;
  padding: 26px;
  border-radius: 24px;
  background: var(--bg-soft);
  border: 1.5px solid #CBE0DD;
}
.ab-result__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 8px;
}
.ab-result h3 {
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 26px);
  margin-bottom: 12px;
}
.ab-result p { font-size: 14px; line-height: 1.95; margin-bottom: 20px; }
.ab-result__btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ab-result__reset {
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 13px;
  text-decoration: underline;
}
.ab-result.is-mental {
  background: linear-gradient(160deg, #FFF9F5 0%, #FFF1E8 100%);
  border-color: var(--accent);
}
.ab-result.is-mental .ab-result__label { color: var(--accent-ink); }
.ab-result[hidden] { display: none; }

/* ---------------- 料金プラン ---------------- */
.ab-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}
.ab-plan {
  flex: 1 1 320px;
  max-width: 470px;
  background: var(--bg);
  border: 1px solid rgba(34,49,47,.09);
  border-radius: 30px;
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.ab-plan h3 { font-size: 18px; margin-bottom: 6px; }
.ab-plan__sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 22px;
  line-height: 1.8;
}
.ab-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.ab-plan__num {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 46px);
}
.ab-plan__per { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.ab-plan__tax { font-size: 12px; color: var(--ink-mute); margin-bottom: 26px; }
.ab-plan__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ab-plan__list li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.ab-plan__list li .mk { color: var(--brand); font-weight: 700; flex-shrink: 0; }
.ab-plan__list li.is-off { color: #B5BFBD; }

.ab-plan--best {
  background: linear-gradient(170deg, #FFF9F5 0%, #FFF1E8 100%);
  border: 2px solid var(--accent);
  box-shadow: 0 24px 56px rgba(217,102,58,.16);
}
.ab-plan__tag {
  position: absolute;
  top: -15px;
  left: clamp(26px, 3vw, 36px);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(217,102,58,.3);
}
.ab-plan--best .ab-plan__sub { color: #8A6B5C; }
.ab-plan--best .ab-plan__num { color: #B5451F; }
.ab-plan--best .ab-plan__per { color: #8A6B5C; }
.ab-plan--best .ab-plan__tax { color: #B09384; }
.ab-plan--best .ab-plan__list li { color: #4A3B33; }
.ab-plan--best .ab-plan__list li .mk { color: var(--accent-ink); }
.ab-plan__memo {
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 24px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #7A5F53;
}
.ab-plan .btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 26px rgba(217,102,58,.32);
}
.ab-plan .btn--accent:hover { background: var(--accent-ink); transform: translateY(-2px); }

/* ---------------- はじめ方 3ステップ ---------------- */
.ab-step {
  background: #fff;
  border: 1px solid rgba(34,49,47,.07);
  border-radius: var(--r-lg);
  padding: 30px 26px;
}
.ab-step__no {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 34px;
  color: var(--brand-soft);
  line-height: 1;
  margin-bottom: 14px;
}
.ab-step h3 { font-size: 16.5px; margin-bottom: 10px; }
.ab-step p { font-size: 13.5px; line-height: 1.9; }

/* ---------------- CONTACT ---------------- */
.ab-cta {
  background: var(--brand);
  border-radius: 36px;
  padding: clamp(34px, 5vw, 64px) clamp(24px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  text-align: center;
}
/* ぼかし円だけ背面に置き、それ以外の中身は前面に出す */
.ab-cta > *:not(.ab-blob) { position: relative; z-index: 1; }
.ab-cta h2 { color: #fff; margin-bottom: 16px; }
.ab-cta .lead {
  color: rgba(255,255,255,.84);
  margin: 0 auto;
  max-width: 34em;
}
/* 共通の .note は薄い背景ボックスが付くので、ティール地では箱を外して文字だけにする */
.ab-cta .note {
  background: none;
  border: none;
  border-left: none;
  padding: 0;
  margin-top: 24px;
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
}
.ab-cta .btn--ghost { background: #fff; color: var(--brand); border-color: #fff; }
.ab-cta .btn--ghost:hover { color: var(--brand-ink); transform: translateY(-2px); }
.ab-cta .btn--primary { background: #fff; color: var(--brand); box-shadow: none; }
.ab-cta .btn--primary:hover { background: #fff; color: var(--brand-ink); }
.ab-cta__blob--w { background: rgba(255,255,255,.08); }
.ab-cta__blob--p { background: rgba(240,133,90,.22); }

body[data-page="ahagate-business"] .ab-note {
  max-width: 760px;
  margin: 26px auto 0;
  font-size: 12px;
  line-height: 2;
  color: var(--ink-mute);
  text-align: center;
}