/* =================================
   Base / Common
================================= */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
:root{
  --pink: #e8007f;
  --bg: #bababa;
  --white: #fff;
  --black: #000;
  --text: #222;

  --font-body: "BIZ UDPGothic", sans-serif;
  --font-heading: "M PLUS 1p", sans-serif;

  --base: 21px;
  --xs: 15px;
  --sm: 18px;
  --lg: 26px;
  --xl: 50px;

  --h2: 132px;
  --h1: 132px;

  --section-max: 1200px;
  --section-pad-x: 80px;
  --section-pad-y: 120px;

  --header-h: 80px;
  --header-pad-x: 40px;
}
html {scroll-behavior: smooth;}
body {background-color: var(--bg); color: var(--black); font-family: var(--font-body); font-size: var(--base); font-weight: normal; line-height: 1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a {color: inherit; text-decoration: none;}
.section-title, .hero-title, .logo {font-family: var(--font-heading);}
.sp{display: none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.info-list{list-style:none;font-size:var(--sm);line-height:1.7;text-align: justify;}
.info-list li{display:flex;align-items:flex-start;gap:calc(var(--xs) / 2);margin:.7em 0;}
.info-list li::before{content:"●";font-size:var(--xs);color:var(--pink);margin-top:0.15em;}
.info-list a {color: var(--pink); text-decoration: underline; text-underline-offset: 3px;}
.notice{font-size:var(--sm);line-height:1.7;color:#333;margin:.5em 0;}

/* =================================
   Header / Navigation
================================= */
header {position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--header-pad-x); transition: background 0.3s, backdrop-filter 0.3s;}
header.scrolled {background: rgba(193, 193, 193, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.logo {color: var(--pink); font-size: var(--lg); font-weight: 800; letter-spacing: 0.05em;}
.logo span {color: var(--black);}
.logo img {display: block; width: auto; height: 28px;}
.nav-wrapper {position: relative; display: flex; flex-direction: column; align-items: flex-end;}
.hamburger {position: relative; z-index: 3; width: 56px; height: 40px; cursor: pointer;}
.hamburger span {position: absolute; right: 0; display: block; height: 4px; background: var(--pink); transition: transform 0.3s, opacity 0.3s, background 0.3s, width 0.3s;}
.hamburger span:nth-child(1) {top: 0; width: 56px;}
.hamburger span:nth-child(2) {top: 18px; width: 40px;}
.hamburger span:nth-child(3) {top: 36px; width: 26px;}
.hamburger.is-open span:nth-child(1) {width: 56px; background: var(--white); transform: translateY(18px) rotate(45deg);}
.hamburger.is-open span:nth-child(2) {opacity: 0;}
.hamburger.is-open span:nth-child(3) {width: 56px; background: var(--white); transform: translateY(-18px) rotate(-45deg);}
.nav-menu {position: absolute; top: calc(-1 * (var(--header-h) / 2 + 10px)); right: calc(-1 * var(--header-pad-x)); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 200px; padding: calc(var(--header-h) / 2 + 70px) 55px 55px; list-style: none; background: var(--pink); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(20px); transform-origin: right top;}
.nav-menu.is-open{visibility:visible;pointer-events:auto;animation:menuIn 0.3s ease forwards;}
.nav-menu.is-closing{visibility:visible;pointer-events:none;animation:menuOut 0.26s ease forwards;}
.nav-menu li{opacity:0;transform:translateX(20px);}
.nav-menu.is-open li{animation:navItemIn 0.3s ease forwards;animation-delay:calc(var(--i) * 50ms);}
.nav-menu.is-closing li{animation:navItemOut 0.2s ease forwards;}
.nav-menu li a {color: var(--white); font-size: var(--lg); white-space: nowrap; transition: opacity 0.2s;font-weight: bold;padding:1em 0;}
.nav-menu li a:hover {color: var(--white); opacity: 0.7;}

/* =================================
   Layout / Common Sections
================================= */
.section {width: 100%; max-width: calc(var(--section-max) + var(--section-pad-x) * 2); margin: 0 auto; padding: var(--section-pad-y) var(--section-pad-x);}
.section-title {margin-bottom: 40px; color: var(--black); font-size: var(--h2); font-weight: 900; line-height: 1.15;}

/* =================================
   Hero
================================= */
#hero {text-align: center; padding: var(--header-h) var(--section-pad-x);}
.hero-title {margin-bottom: var(--header-h); font-size: clamp(52px, 9.9vw, 131px); font-weight: 900; line-height: 0;}
.hero-title span {position: relative; display: inline-block;}
.hero-svg { display: block; width: 100%; }
.hero-svg svg { display: block; width: 100%; height: auto; }
.hero-svg.sp { display: none; }
.subtitle {display: block; margin-bottom: var(--header-h); font-size: var(--xl); font-weight: bold; background: var(--pink); color: var(--white); line-height: 1.4; padding: var(--header-pad-x);}
.subtitle span{display:inline-block;}
.hero-intro {font-size: var(--lg); line-height: 1.5;margin:0 auto 1em;}
.hero-intro a {color: var(--pink); text-decoration: underline;}
.hero-quote {display: inline-block; margin: var(--lg) auto var(--sm); font-size: var(--xl); font-weight: bold;}
.hero-body p {font-size: var(--lg); line-height: 1.7;margin:0 auto 1em}
/* .three-col {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; text-align: center;}
.col-card {padding: 16px 14px; color: var(--white); font-size: var(--base); line-height: 1.6; background: var(--pink);}
.col-card .card-title {margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-size: var(--lg); font-weight: 800;} */
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--xl);margin:var(--xl) 0;align-items:stretch}
.col-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:176px;padding:24px 26px;
  text-align:center;isolation:isolate;background:none;overflow:visible;font-weight: bold;}
.col-card > *{position:relative;z-index:2}
.col-card::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(232,0,127,0.1);will-change:border-radius,transform;animation:moyaDitto 18s ease-in-out infinite}
.col-card:nth-child(1)::before{animation-delay:0s}
.col-card:nth-child(2)::before{animation-delay:-6s}
.col-card:nth-child(3)::before{animation-delay:-12.6s}

@keyframes moyaDitto{
0%{border-radius:62% 38% 46% 54% / 60% 44% 56% 40%;transform:scale(1) rotate(0deg)}
12%{border-radius:38% 62% 71% 29% / 45% 66% 34% 55%;transform:scale(1.03) rotate(1.2deg)}
25%{border-radius:70% 30% 38% 62% / 55% 35% 65% 45%;transform:scale(0.97) rotate(-1deg)}
38%{border-radius:30% 70% 62% 38% / 68% 48% 52% 32%;transform:scale(1.04) rotate(0.8deg)}
50%{border-radius:55% 45% 29% 71% / 38% 60% 40% 62%;transform:scale(0.96) rotate(-1.5deg)}
63%{border-radius:42% 58% 68% 32% / 58% 32% 68% 42%;transform:scale(1.02) rotate(1deg)}
75%{border-radius:68% 32% 44% 56% / 46% 70% 30% 54%;transform:scale(0.98) rotate(-0.6deg)}
88%{border-radius:36% 64% 58% 42% / 64% 42% 58% 36%;transform:scale(1.03) rotate(1.3deg)}
100%{border-radius:62% 38% 46% 54% / 60% 44% 56% 40%;transform:scale(1) rotate(0deg)}
}

/* =================================
   About
================================= */
.concept-grid {display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; margin: 32px 0;}
.concept-blockquote {margin-top: 24px; padding-left: 30px; border-left: 15px solid var(--pink); font-size: var(--base); line-height: 1.9;}
.concept-blockquote p {text-align: justify;margin-bottom: var(--base);}
.pink {color: var(--pink);}
.pink-link {display: block; margin-top: 20px; color: var(--pink); font-size: 19px;}
.concept-circle {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 210px; height: 210px; overflow: hidden; border-radius: 50%;margin:auto;}
.concept-circle svg {width: 100px; height: 100px;}
.concept-circle img {display: block; width: 100%; height: 100%; object-fit: cover;}
.concept-caption {margin-top: 8px; font-size: var(--xs); line-height: 1.5; text-align: center;}
.concept-profile {margin-top: 10px; text-align: center;}
.profile-head {display: grid; grid-template-columns: 1fr auto; align-items: end; justify-content: center; column-gap: 10px; row-gap: 6px; margin-bottom: 7px;}
.profile-stack {display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2;}
.profile-ruby {margin-bottom: 6px; color: var(--pink); font-size: 14px; font-weight: 700; white-space: nowrap;}
.profile-logo {display: block; width: auto; height: 30px;}
.profile-title {margin-bottom: 6px; margin-left: 30px; color: var(--pink); font-size: 14px; font-weight: 700; white-space: nowrap;}
.profile-name {color: var(--pink); font-family: var(--font-heading); font-size: 30px; font-weight: 900; line-height: 1; white-space: nowrap;}
.profile-lines {color: #000; font-size: 13px; font-weight: 700; line-height: 1.9;}
.btn-outline {display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 0; margin: 2px auto 6px; color: var(--pink); font-size: var(--sm); font-weight: bold; border: 2px solid var(--pink); border-radius: 12px; transition: color .2s, background .2s;}
.btn-outline:hover {color: var(--white); background: var(--pink);}
.btn-outline__icon {flex-shrink: 0; width: var(--sm); height: auto;}

/* =================================
   Pricing
================================= */
.pricing-range {display: flex; align-items: center; gap: 12px;}
.range-label {font-size: var(--sm); font-weight: 800; white-space: nowrap;}
.range-track {display: flex; flex: 1; align-items: center;}
.range-dot {flex-shrink: 0; width: 10px; height: 10px; background: var(--pink); border-radius: 50%;}
.range-line {flex: 1; height: 2px; background: var(--pink);}
.pricing-range-names {display: flex; justify-content: space-between; margin-bottom: 40px;}
.pricing-range-names span {color: var(--pink); font-size: var(--xs); font-weight: 800;}
.pricing-range-names span:nth-child(2) {text-align: center;}
.pricing-range-names span:last-child {text-align: right;}
.pricing-lead {margin-bottom: 40px; font-size: var(--base); line-height: 1.9;}
.pricing-lead a {color: var(--pink); text-decoration: underline; text-underline-offset: 3px;}
.pricing-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px;}
.pricing-card {display: flex; flex-direction: column; gap: 0; padding: 28px 24px; background: var(--pink); color: #fff;}
.pricing-card.is-featured {border: 2px solid var(--pink);}
.pricing-card-name {font-size: var(--xl); font-weight: bold; color: #fff;}
.pricing-card-price {font-family: var(--font-heading); font-size: clamp(30px,4vw,40px); font-weight: 900; line-height: 1; color: #fff;}
.pricing-card-price span{font-size: 70%;}
.pricing-card-divider {height: 1px; margin: .7em 0; background: rgba(255,255,255,0.35);}
.pricing-card-tagline {font-family: var(--font-body); font-size: var(--base); font-weight: bold; color: #fff;}
.pricing-asterisk {color: #333; font-size: var(--sm); line-height: 1.8;}
.pricing-info-box{margin:24px 0 20px;padding:20px 24px;background:var(--white);}
.pricing-info-title{margin-bottom:10px;color:var(--pink);font-size:var(--lg);font-weight:800;}
.pricing-card-list{list-style:none;line-height:1.8;font-size:var(--sm);}
.pricing-card-list li{margin:.6em 0; color:#fff;}
.report-sample-box {margin: 32px 0; padding: 20px 24px; background: var(--white); border-left: 8px solid var(--pink);}
.report-sample-text {margin-bottom: 14px; font-size: var(--sm); line-height: 1.8;}
.report-sample-box .btn-outline {margin-left: 0; max-width: 360px; padding: 5px 16px;}

/* =================================
   Trial
================================= */
.trial-lead {margin-bottom: 40px; font-size: var(--base); line-height: 1.9;}
.trial-card {
  padding: 40px 48px;
  background: var(--pink);
  color: var(--white);
}
.trial-card__header {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 0;
}
.trial-card__title-block {
  flex-shrink: 0;
}
.trial-card__name {
  font-size: var(--base);
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}
.trial-card__price {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1;
  margin-top: 6px;
  font-size: var(--xs);
}
.trial-card__price span {
  font-size: clamp(36px, 4.5vw, 52px);
}
.trial-card__summary {
  font-size: var(--sm);
  line-height: 1.8;
  padding-top: 4px;
  text-align: justify;
}
.trial-card__divider {
  height: 1px;
  margin: 1.4em 0;
  background: rgba(255,255,255,0.3);
}
.trial-card__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.trial-card__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sm);
  font-weight: 700;
}
.trial-card__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}
.trial-card__note {
  font-size: var(--sm);
  line-height: 1.8;
  opacity: 0.85;
  margin-top:var(--sm);
}
.trial-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top:var(--sm);
  padding: 5px 16px;
  background: transparent;
  color: var(--white);
  font-size: var(--sm);
  font-weight: bold;
  border: 2px solid var(--white);
  border-radius: 12px;
  transition: color .2s, background .2s;
  width: 100%;
  max-width: 360px;
}
.trial-card__btn:hover { color: var(--pink); background: var(--white); }

.pricing-trial-guide {
  margin-top: 24px;
  padding: 18px 24px;
  background: var(--white);
  border-left: 6px solid var(--pink);
  font-size: var(--sm);
  line-height: 1.9;
}
.pricing-trial-guide a {
  color: var(--pink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767.9px) {
  .trial-card__btn{font-size: var(--lg);}
  .trial-card { padding: 28px var(--header-pad-x); }
  .trial-card__header { flex-direction: column; gap: 12px; }
  .trial-card__name { white-space: normal; }
}
/* =================================
   Cases
================================= */
.cases-check-list {display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px;}
.cases-check-list span{display:flex;align-items:center;gap:0.55em;font-size:var(--lg);font-weight:800;}
.cases-check-list span::before{content:"";flex:0 0 auto;width:0.5em;height:1em;margin-top:-0.2em;border-right:0.2em solid var(--pink);border-bottom:0.2em solid var(--pink);transform:rotate(45deg);}
.cases-lead {margin-bottom: 8px; font-size: var(--base);text-align: justify;}
.cases-lead .pink-tag {display: inline; padding: 1px 10px; color: var(--black); white-space: nowrap; border: 2px solid var(--pink); border-radius: 8px;}
.case-card {margin-top: 32px; overflow: hidden;}
.case-card-header {display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: var(--header-pad-x) var(--header-pad-x) 0 0; background: var(--white);}
.case-num {display: inline-block; padding: 5px var(--header-pad-x); color: var(--white); font-size: var(--base); font-weight: 800; background: var(--pink);}
.case-price {color: var(--pink); font-size: var(--sm); font-weight: 800; white-space: nowrap;}
.case-card-body {padding: var(--header-pad-x); background: var(--white);}
.case-label {display: inline-block; margin-bottom: 6px; color: var(--black); font-size: var(--sm); font-weight: bold;}
.case-label.after {color: var(--pink);}
.case-text {margin-bottom: 14px; font-size: var(--base); line-height: 1.8; text-align: justify;}
.case-tags {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;}
.case-tag {padding: 2px 8px; color: var(--black); font-size: var(--xs); background: transparent; border: 2px solid var(--black); border-radius: 10px;}
.case-tag.is-pink {border-color: var(--pink);}
.cases-subsection {margin: 44px 0 0;}
.cases-subtitle {font-family: var(--font-heading); margin: 0 0 16px; font-size: var(--xl); font-weight: 700; line-height: 1.6;}

@media (max-width: 767px) {
  .cases-subsection {margin-top: 34px; padding-top: 22px;}
  .cases-subtitle {margin-bottom: 14px;}
}

/* =================================
   Flow
================================= */
.flow-lead {margin-bottom: 28px; font-size: var(--base);}
.flow-highlight-box {margin-bottom: 40px; padding: 20px var(--header-pad-x); background: var(--white);}
.fh-title {margin-bottom: 10px; color: var(--pink); font-size: var(--lg); font-weight: 800;}
.flow-phases {display: flex; flex-direction: column;}
.flow-phase {display: flex; align-items: stretch;}
.flow-arrow {display: flex; align-items: center; padding: 4px 0;}
.flow-arrow::before {content: ""; display: block; width: 0; height: 0; margin-left: calc(200px / 2 - 14px); border-top: 20px solid var(--pink); border-right: 14px solid transparent; border-left: 14px solid transparent;}
.phase-box {display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; width: 200px; padding: 20px 12px; color: var(--white); text-align: center; background: var(--pink);}
.phase-label {font-size: var(--xs); opacity: 0.85;}
.phase-name {margin-top: 4px; font-size: var(--lg); font-weight: 800;}
.phase-sub {margin-top: 4px; font-size: var(--xs); opacity: 0.8;}
.phase-content {flex: 1; padding: 20px 0 20px 28px; font-size: var(--base); line-height: 1.9;text-align: justify;}
.phase-content p {line-height:1.7;margin: .5em 0;}

/* =================================
   FAQ
================================= */
.faq-list {list-style: none;text-align: justify;}
.faq-item {overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
.faq-q {display: flex; align-items: center; gap: 12px; padding: 18px 0; font-size: var(--base); font-weight: 700; cursor: pointer; transition: color 0.2s;}
.faq-q:hover {color: var(--pink);}
.q-icon {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 1px; color: var(--white); font-size: var(--sm); font-weight: 800; background: var(--pink); border-radius: 50%;}
.q-plus {flex-shrink: 0; margin-left: auto; color: var(--pink); font-size: 22px; line-height: 1; transition: transform 0.3s;}
.faq-item.open .q-plus {transform: rotate(45deg);}
.faq-a {display: none; padding: 0 0 18px 36px; color: var(--black); font-size: var(--base); line-height: 1.7;}
.faq-item.open .faq-a {display: flex;}
.faq-a-inner {display: flex; align-items: flex-start; gap: 8px;}
.a-icon {flex-shrink: 0; padding-right: 15px; color: var(--pink); font-weight: 700;}

/* =================================
   Contact
================================= */
.contact-lead {margin-bottom: 10px; font-size: var(--base); line-height: 1.9;}
.notice {margin-bottom: var(--sm); font-size: var(--sm);}
.cta-area {display: flex; flex-direction: column; align-items: center; margin-top: 28px;}
.cta-balloon {position: relative; display: inline-block; margin-bottom: 14px; padding: 8px 16px; font-size: var(--sm); font-weight: 700; line-height: 1.4; background: #fff; border: 2px solid var(--pink); border-radius: 999px;}
.cta-balloon::after {content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border-width: 8px 8px 0; border-style: solid; border-color: var(--pink) transparent transparent transparent;}
.btn-pink {display: inline-block; padding: 20px 48px; color: var(--white); font-size: var(--lg); font-weight: 800; background: var(--pink); border-radius: 12px; transition: color .2s, background .2s, transform .2s;}
.btn-pink:hover {color: var(--pink); background: var(--white);}

/* =================================
   Footer
================================= */
footer {padding: 32px; color: #333; font-size: var(--sm); text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.1);}
.footer-logo {margin-bottom: 10px; color: var(--pink); font-size: 28px; font-weight: 900;}
.footer-logo img {display: inline-block; width: auto; height: 32px;}
.footer-links {display: flex; justify-content: center; gap: 16px; margin-bottom: 8px;}
.footer-links a:hover {color: var(--pink);}

/* =================================
   Loading
================================= */
#loading {position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--pink); pointer-events: none;}
#loading .loading-logo {opacity: 0; animation: logoFadeIn 0.4s ease 0.2s forwards;}
#loading .loading-logo img {display: block; width: 180px; max-width: 60vw; height: auto;}
#loading.wipe-out {animation: wipeOut 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;}

/* =================================
   Animations
================================= */

@keyframes menuIn {
  from {opacity: 0; transform: translateX(20px);}
  to {opacity: 1; transform: translateX(0);}
}
@keyframes menuOut {
  from {opacity: 1; transform: translateX(0);}
  to {opacity: 0; transform: translateX(20px);}
}
@keyframes navItemIn {
  to {opacity: 1; transform: translateX(0);}
}
@keyframes navItemOut {
  from {opacity: 1; transform: translateX(0);}
  to {opacity: 0; transform: translateX(20px);}
}

@keyframes logoFadeIn {
  from {opacity: 0; transform: translateY(8px);}
  to {opacity: 1; transform: translateY(0);}
}
@keyframes wipeOut {
  from {transform: translateY(0);}
  to {transform: translateY(-100%);}
}

@keyframes heroFadeIn {
  from {opacity: 0; transform: translateY(-12px);}
  to   {opacity: 1; transform: translateY(0);}
}
@keyframes lineDraw {
  from {transform: scaleX(0);}
  to   {transform: scaleX(1);}
}

header {animation: heroFadeIn 0.5s ease 2.1s both;}

.hero-char {animation: heroFadeIn 0.4s ease both; opacity: 0;}
.pc-char-0,  .sp-char-0  {animation-delay: 1.20s;}
.pc-char-1,  .sp-char-1  {animation-delay: 1.24s;}
.pc-char-2,  .sp-char-2  {animation-delay: 1.28s;}
.pc-char-3,  .sp-char-3  {animation-delay: 1.32s;}
.pc-char-4,  .sp-char-4  {animation-delay: 1.36s;}
.pc-char-5,  .sp-char-5  {animation-delay: 1.40s;}
.pc-char-6,  .sp-char-6  {animation-delay: 1.44s;}
.pc-char-7,  .sp-char-7  {animation-delay: 1.48s;}
.pc-char-8,  .sp-char-8  {animation-delay: 1.52s;}
.pc-char-9,  .sp-char-9  {animation-delay: 1.56s;}
.pc-char-10, .sp-char-10 {animation-delay: 1.60s;}
.pc-char-11, .sp-char-11 {animation-delay: 1.64s;}
.pc-char-12, .sp-char-12 {animation-delay: 1.68s;}
.pc-char-13, .sp-char-13 {animation-delay: 1.72s;}
.pc-char-14, .sp-char-14 {animation-delay: 1.76s;}
.pc-char-15, .sp-char-15 {animation-delay: 1.80s;}

.hero-line {transform-origin: left center; animation: lineDraw 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.4s both;}
.hero-line--delay  {animation-delay: 1.55s;}
.hero-line--delay2 {animation-delay: 1.70s;}

/* =================================
   Fixed Trial Button
================================= */
.fixed-trial {
  line-height: 1;
  flex-direction: column;
  gap: 2px;
  position: fixed;
  z-index: 89;
  display: flex;
  align-items: center;
  background: var(--white);
  color: var(--pink);
  font-family: var(--font-body);
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.25s ease;
  border: 2px solid var(--pink);
}
.fixed-trial.is-visible { opacity: 1; pointer-events: auto; }
.fixed-trial.is-hidden { opacity: 0; pointer-events: none; }
.fixed-trial__sub { font-size: var(--xs); font-weight: bold; padding: 0 0 3px; }
.fixed-trial__text { display: flex; align-items: center; }
@media (hover: hover) and (min-width: 1024px) {
  .fixed-trial:hover { transform: translateY(-3px); }
  .fixed-trial:active { transform: translateY(0); }
}
@media (min-width: 768px) {
  .fixed-trial {
    bottom: calc(var(--header-pad-x) + 64px + 16px);
    right: var(--header-pad-x);
    padding: 12px 19px;
    border-radius: 50px;
    font-size: var(--sm);
  }
}
@media (max-width: 767.9px) {

  .fixed-cta-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 90;
    padding-bottom: env(safe-area-inset-bottom);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .fixed-cta-wrap.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .fixed-cta-wrap.is-hidden {
    opacity: 0;
    pointer-events: none;
  }

  .fixed-trial,
  .fixed-cta {
    position: static;
    justify-content: center;
    align-items: center;
    padding: 14px 10px;
    text-align: center;
    border-radius: 0;
    min-height: 0;
  }

  .fixed-trial {
    width: 40%;
    border-right: 1px solid var(--pink);
    border-top: 2px solid var(--pink);
  }

  .fixed-cta {
    width: 60%;
    border-top: none;
  }

  footer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

/* =================================
   Fixed CTA Button
================================= */
.fixed-cta {line-height: 1; flex-direction: column; gap: 2px; display: flex; align-items: center; background: var(--pink); color: var(--white); font-family: var(--font-body); font-weight: bold; text-decoration: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.25s ease;}
.fixed-cta.is-visible {opacity: 1; pointer-events: auto;}
.fixed-cta.is-hidden {opacity: 0; pointer-events: none;}
.fixed-cta__arrow {display: inline-block; transition: transform 0.2s ease;}
.fixed-cta__sub {font-size: var(--xs); font-weight: bold;padding:0 0 5px;}
.fixed-cta__text {display: flex; align-items: center;}
@media (hover: hover) {
  .fixed-cta:hover .fixed-cta__arrow {transform: translateY(4px);}
}
@media (min-width: 768px) {
.fixed-cta {position: fixed; z-index: 90; bottom: var(--header-pad-x); right: var(--header-pad-x); padding: 16px 28px; border-radius: 50px;}
@media (hover: hover) {
.fixed-cta:hover {transform: translateY(-3px);}
.fixed-cta:active {transform: translateY(0);}
}
}

/* =================================
   Smartphone
   max-width: 767.9px
================================= */
@media (max-width: 767.9px) {
.fixed-cta {bottom: 0; left: 0; right: 0; justify-content: center; border-radius: 0; font-size: var(--xl);}
.fixed-cta__sub {padding:0 0 5px;font-size: var(--sm);}
.btn-pink {font-size: var(--xl);}
footer {padding-bottom: calc(60px + env(safe-area-inset-bottom));}
:root{
  --base: 15px;
  --xs: 11px;
  --sm: 14px;
  --lg: 17px;
  --xl: 22px;

  --h2: 47px;
  --h1: 50px;

  --section-pad-x: 15px;
  --section-pad-y: 60px;

  --header-h: 60px;
  --header-pad-x: 15px;
}
.sp{display:inherit;}
.pc{display: none;}
.logo img {height: 24px;}
.hamburger {width: 46px; height: 40px;}
.hamburger span:nth-child(1) {top: 3px; width: 46px;}
.hamburger span:nth-child(2) {top: 18px; width: 30px;}
.hamburger span:nth-child(3) {top: 33px; width: 16px;}
.hamburger.is-open span:nth-child(1) {width: 46px; transform: translateY(13px) rotate(45deg);}
.hamburger.is-open span:nth-child(3) {width: 46px; transform: translateY(-18px) rotate(-45deg);}
.nav-menu {min-width: 150px; padding: calc(var(--header-h) / 2 + 70px) 30px 30px;}
.hero-title {font-size: clamp(36px, 9vw, 132px); margin: 30px 0;}
.hero-title span:nth-child(1){font-size:clamp(18px,5vw,32px);}
.hero-title span:nth-child(2){font-size:clamp(42px,12vw,90px);}
.hero-title span:nth-child(3){font-size:clamp(34px,12vw,70px);}
.hero-svg.pc {display: none;}
.hero-svg.sp {display: block;}
.hero-body p {line-height: 1.5;}
.subtitle{margin-bottom: 30px;}
.hero-quote{margin:60px auto 20px;}
.three-col{grid-template-columns:1fr;gap:16px;margin:28px 0 36px}
.col-card{min-height:138px;padding:18px 20px}
.concept-grid {grid-template-columns: 1fr;}
.concept-grid > div:last-child {display: flex; flex-direction: column; align-items: center;}
.pink-link {font-size: 15px;}
.concept-circle {width: 200px; height: 200px;}
.concept-blockquote{padding-left:12px;border-left-width:8px;font-size:var(--lg);line-height:1.9;margin:0 0 0 calc(-1 * var(--section-pad-x));}
.btn-outline {font-size: var(--lg);}
.btn-outline__icon {width: var(--lg);}
.report-sample-box .btn-outline {max-width: 100%;}
.pricing-cards {grid-template-columns: 1fr; gap: 16px;}
.pricing-card {padding:var(--header-pad-x);}
.pricing-card-tagline {font-size: var(--lg);}
.pricing-info-box {padding:28px var(--header-pad-x);}
.case-card-header {display: block;padding: var(--header-pad-x) var(--header-pad-x) 0 0;background: var(--white);}
.case-price{margin:10px var(--header-pad-x) 0;display: block;}
.case-num {padding: 5px var(--header-pad-x);}
.flow-arrow::before {margin-left: calc(120px / 2 - 14px);}
.phase-box {width: 120px;}
.phase-content{padding: 15px 0 15px 10px;}
.footer-logo img {height: 28px;}
}

/* =================================
  Tablet
  768px - 1360px
================================= */
@media (min-width: 768px) and (max-width: 1360px) {
:root{
  --base: 17px;
  --sm: 15px;
  --xs: 13px;
  --lg: 21px;
  --xl: 45px;

  --h2: 72px;
  --h1: 72px;

  --section-pad-x: 24px;
  --section-pad-y: 80px;

  --header-h: 72px;
  --header-pad-x: 24px;
}
.logo img {height: 24px;}
.pricing-cards {gap: 12px;}
}
@media (min-width: 768px) and (max-width: 905px) {
.three-col{gap:10px;}
.col-card{padding:24px 0;}
.profile-head {column-gap: 0; row-gap: 10px;}
.profile-logo {height: 30px;}
.profile-name {font-family: var(--font-heading); font-size: 30px; font-weight: 900;}
.profile-lines {font-size: 12px;}
.concept-grid{gap:20px;}
.concept-blockquote {padding-left: 15px; border-left-width: 10px; font-size: var(--lg); line-height: 1.9;margin:0 0 0 calc(-1 * var(--section-pad-x))}
}