/* =========================================================
   AEO対策支援 LP — page styles (DEFiDE palette, per LP制作_brief.md)
   Loaded AFTER the supplied module CSS (header / media_shorts / footer),
   which are used unmodified; only colours are mapped to the brief here.
   Backgrounds: white / pale orange only (CTA = orange gradient).
   ========================================================= */
:root {
  --c-coral: #ff7a45;
  /* main accent */
  --c-coral-d: #e65213;
  /* hover / text on white */
  --c-orange: #ffa162;
  /* sub accent */
  --c-navy: #263B50;
  /* main text */
  --c-gray: #64748B;
  /* sub text */
  --c-white: #FFFFFF;
  --c-pale: #FFF5EF;
  /* section bg */
  --c-warm: #FFFAF6;
  /* light bg */
  --c-line: #F1E6DF;
  /* border */
  --c-tint: #ffe5d5;
  /* icon tint (coral @ ~20%) */
  --radius: 22px;
  --shadow: 0 18px 40px -22px rgba(255, 112, 56, 0.45);
  --media-accent: var(--c-coral);
  --header-h: 72px;
  --ff: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --ff-num: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

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

body.aeo {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--ff);
  color: var(--c-navy);
  background: #fff;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

.aeo img {
  max-width: 100%;
  display: block
}

.aeo :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) {
  margin: 0;
  padding: 0;
  text-wrap: pretty
}

.aeo :where(ul, ol) {
  list-style: none
}

.aeo section[id] {
  scroll-margin-top: calc(var(--header-h) - 1px)
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px)
}

.nb {
  display: inline-block;
  white-space: nowrap
}

.ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block
}

.aeo a:focus-visible,
.aeo button:focus-visible,
.aeo summary:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 3px;
  border-radius: 8px
}

.cta a:focus-visible {
  outline-color: #fff
}

.pc {
  display: inline
}

.sp {
  display: none
}

@media (max-width:768px) {
  .pc {
    display: none
  }

  .sp {
    display: inline
  }
}

/* ---------- Header (module colours mapped to palette) ---------- */
.aeo .header {
  box-shadow: 0 1px 0 var(--c-line)
}

.aeo .header .header__plan a {
  color: var(--c-navy);
  font-size: .92rem;
  letter-spacing: .05em
}

.aeo .header .header__plan a:after {
  background-color: var(--c-coral)
}

.aeo .header__nav-sep {
  background-color: var(--c-line);
  height: 16px
}

.aeo .header__plan {
  padding: 10px 10px 10px 28px
}

.aeo .header__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-coral);
  border-color: var(--c-coral);
  color: #fff;
  padding: 9px 26px;
  line-height: 1.8
}

.aeo .header__contact:hover {
  background: #fff;
  color: var(--c-coral)
}

.aeo .hamburger-menu-button__line__inner {
  background: var(--c-navy)
}

.aeo .menu__contact p {
  color: var(--c-coral)
}

.aeo .menu__plan p {
  color: var(--c-navy)
}

.aeo .hover_blue1:hover {
  background-color: var(--c-coral)
}

.aeo .hover_blue2:hover {
  background-color: var(--c-orange)
}

.aeo .menu2-head {
  color: var(--c-gray)
}

@media (max-width:1023px) {
  .aeo .header__contact {
    padding: 7px 16px;
    font-size: .82rem;
    letter-spacing: .04em
  }

  .aeo .header__contact .ico {
    display: none
  }

  .aeo .header__contacts {
    gap: 10px
  }
}

/* ---------- Shared ---------- */
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--ff-num);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--c-coral-d)
}

.label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-coral)
}

.h2 {
  text-wrap: balance;
  font-size: clamp(1.55rem, .95rem + 2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--c-navy)
}

.sec-head {
  margin-bottom: clamp(36px, 5vw, 60px)
}

.sec-head--center {
  text-align: center
}

.sec-head--center .label {
  justify-content: center
}

.sec-head__lead {
  margin-top: 16px;
  max-width: 44em;
  font-size: clamp(.95rem, .88rem + .3vw, 1.08rem);
  line-height: 1.9;
  color: var(--c-gray)
}

.mock-note {
  margin-top: 18px;
  font-size: .72rem;
  line-height: 1.6;
  color: var(--c-gray);
  text-align: center
}

.mock-note--left {
  text-align: left;
  margin-top: 12px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .25s, color .25s, box-shadow .25s, border-color .25s;
  cursor: pointer
}

.btn--primary {
  background: var(--c-coral);
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(233, 120, 75, .6)
}

.btn--primary:hover {
  background: var(--c-coral-d)
}

.btn--ghost,
.btn--outline {
  background: #fff;
  color: var(--c-coral-d);
  border-color: var(--c-orange)
}

.btn--ghost:hover,
.btn--outline:hover {
  background: var(--c-coral);
  border-color: var(--c-coral);
  color: #fff
}

.btn--white {
  background: #fff;
  color: var(--c-coral-d);
  padding: 20px 40px;
  font-size: 1.12rem;
  box-shadow: 0 18px 36px -14px rgba(120, 40, 10, .45)
}

.btn--white:hover {
  background: var(--c-navy);
  color: #fff
}

.inline-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 5vw, 56px)
}

/* =========================================================
   02. FIRST VIEW
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(55% 75% at 80% 40%, rgba(243, 163, 111, .38), transparent 70%),
    radial-gradient(45% 55% at 5% 100%, rgba(233, 120, 75, .08), transparent 70%),
    linear-gradient(105deg, #fff 0%, var(--c-warm) 45%, var(--c-pale) 100%)
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(640px, calc(100vh - var(--header-h)), 820px);
  padding-top: 56px;
  padding-bottom: 56px
}

.hero__copy {
  position: relative;
  z-index: 3;
  max-width: 640px
}

.hero__kicker {
  font-family: var(--ff-num);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--c-coral-d);
  margin-bottom: 20px
}

.hero__title {
  font-size: clamp(1.85rem, 1.1rem + 3.4vw, 4.2rem);
  font-weight: 900;
  line-height: 1.22;
  color: var(--c-navy)
}

.hero__title .nb {
  display: block
}

.hero__title em {
  font-style: normal;
  color: var(--c-coral)
}

.hero__title-em {
  margin-top: .06em
}

.hero__lead {
  margin-top: 24px;
  font-size: clamp(.95rem, .88rem + .35vw, 1.12rem);
  font-weight: 500;
  line-height: 1.95;
  color: var(--c-navy)
}

.hero__lead2 {
  margin-top: 10px;
  font-size: clamp(.95rem, .88rem + .35vw, 1.12rem);
  line-height: 1.9;
  color: var(--c-gray)
}

.hero__lead2 b {
  color: var(--c-coral-d);
  font-weight: 700
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px
}

.hero__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: .8rem;
  font-weight: 500;
  color: var(--c-navy)
}

.hero__sub .ico {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--c-coral);
  color: #fff
}

.hero__visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(64vw, 1220px);
  z-index: 1
}

.hero__person {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36%, #000 100%)
}

.hero__ai {
  position: absolute;
  z-index: 2;
  top: 14%;
  right: clamp(16px, 4.5vw, 72px);
  width: min(330px, 34vw);
  display: flex;
  flex-direction: column;
  gap: 14px
}

.ai-card {
  padding: 20px 22px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 24px 50px -20px rgba(180, 80, 40, .35)
}

.ai-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--c-coral-d);
  margin-bottom: 12px
}

.ai-card__head .ico {
  width: 16px;
  height: 16px
}

.ai-card__q {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--c-pale);
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-navy)
}

.ai-card__q .ico {
  width: 16px;
  height: 16px;
  color: var(--c-coral)
}

.ai-card__body {
  margin-top: 12px;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--c-navy)
}

.ai-line {
  display: block;
  opacity: 0;
  transform: translateY(8px);
  animation: ai-in .6s var(--d, 0s) cubic-bezier(.2, .7, .2, 1) forwards
}

@keyframes ai-in {
  to {
    opacity: 1;
    transform: none
  }
}

.ai-card__src {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-family: var(--ff-num);
  font-weight: 700;
  color: var(--c-coral-d);
  font-size: .8rem
}

.ai-card__src .ico {
  width: 15px;
  height: 15px
}

.flowchips {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px
}

.flowchips li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 14px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--c-navy);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 14px 30px -18px rgba(180, 80, 40, .4);
  opacity: 0;
  animation: ai-in .5s cubic-bezier(.2, .7, .2, 1) forwards
}

.flowchips li .ico {
  color: var(--c-coral)
}

.flowchips li:nth-child(1) {
  width: 86%;
  animation-delay: 1.9s
}

.flowchips li:nth-child(2) {
  width: 80%;
  animation-delay: 2s
}

.flowchips li:nth-child(3) {
  width: 74%;
  animation-delay: 2.1s
}

.flowchips li:nth-child(4) {
  width: 68%;
  animation-delay: 2.2s
}

.hero__note {
  text-align: right;
  font-size: .68rem;
  line-height: 1.5;
  color: var(--c-gray)
}

@media (prefers-reduced-motion:reduce) {

  .ai-line,
  .flowchips li {
    animation: none;
    opacity: 1;
    transform: none
  }
}

@media (max-width:1100px) {
  .hero__visual {
    width: 64vw
  }

  .hero__ai {
    width: min(310px, 38vw)
  }

  .ai-card {
    padding: 16px 16px 14px
  }
}

@media (max-width:860px) {
  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 44px
  }

  .hero__visual {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: calc(100% + 2*clamp(20px, 4vw, 48px));
    margin: 0 calc(-1*clamp(20px, 4vw, 48px));
    order: -1
  }

  .hero__person {
    height: min(92vw, 400px);
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 100%)
  }

  .hero__ai {
    position: relative;
    inset: auto;
    width: auto;
    margin: -72px 20px 0;
    gap: 0
  }

  .ai-card {
    padding: 14px 16px;
    border-radius: 18px
  }

  .ai-card__body {
    font-size: .82rem;
    margin-top: 8px
  }

  .ai-card__q {
    font-size: .78rem
  }

  .flowchips {
    display: none
  }

  .hero__note {
    margin-top: 8px;
    text-align: left
  }

  .hero__copy {
    margin-top: 22px;
    max-width: none
  }

  .hero__kicker {
    margin-bottom: 14px
  }

  .hero__cta .btn {
    flex: 1 1 100%
  }
}

/* =========================================================
   03. PROBLEM (pale orange)
   ========================================================= */
.problem {
  padding: clamp(64px, 9vw, 110px) 0;
  background: var(--c-pale)
}

.problem__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px)
}

.problem__lead {
  font-size: clamp(.92rem, .86rem + .3vw, 1.05rem);
  line-height: 2;
  color: var(--c-gray)
}

.versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.06fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: stretch
}

.vs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--c-line)
}

.vs--new {
  border: 2px solid var(--c-coral);
  box-shadow: var(--shadow)
}

.vs__tag {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--c-warm);
  border: 1px solid var(--c-line);
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-gray)
}

.vs__tag--new {
  background: var(--c-coral);
  border-color: var(--c-coral);
  color: #fff
}

.vs__steps {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.vs__steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.55
}

.vs__steps small {
  display: block;
  font: 800 .66rem var(--ff-num);
  letter-spacing: .14em;
  color: var(--c-gray);
  margin-bottom: 1px
}

.vs--new .vs__steps small {
  color: var(--c-coral-d)
}

.vs__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--c-warm);
  border: 1px solid var(--c-line)
}

.vs--new .vs__ic {
  background: var(--c-tint);
  border-color: transparent
}

.vs__ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--c-gray);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.vs--new .vs__ic svg {
  stroke: var(--c-coral-d)
}

.versus__mid {
  align-self: center;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-orange);
  font: 800 .78rem/1.15 var(--ff-num);
  text-align: center;
  color: var(--c-coral-d);
  box-shadow: var(--shadow)
}

.serp {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--c-warm);
  border: 1px solid var(--c-line)
}

.serp__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-gray)
}

.serp__bar .ico {
  width: 14px;
  height: 14px
}

.serp__bar i {
  display: block;
  width: 46%;
  height: 6px;
  border-radius: 3px;
  background: var(--c-line)
}

.serp__row {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.serp__row b {
  width: 58%;
  height: 8px;
  border-radius: 4px;
  background: #CBD5E1
}

.serp__row u {
  height: 6px;
  border-radius: 3px;
  background: var(--c-line)
}

.serp__row u:nth-child(2) {
  width: 94%
}

.serp__row u:nth-child(3) {
  width: 72%
}

.answer {
  margin-top: auto;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--c-pale);
  border: 1px solid var(--c-line)
}

.answer__q {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-gray)
}

.answer__q .ico {
  width: 16px;
  height: 16px;
  color: var(--c-coral)
}

.answer__a {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: var(--c-navy)
}

.answer__a b {
  color: var(--c-coral-d);
  background: linear-gradient(transparent 62%, rgba(243, 163, 111, .45) 62%)
}

.answer__src {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font: 700 .78rem var(--ff-num);
  color: var(--c-coral-d)
}

.answer__src .ico {
  width: 14px;
  height: 14px
}

.problem__close {
  margin-top: clamp(32px, 4.5vw, 52px);
  text-align: center;
  font-size: clamp(1rem, .9rem + .6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.9;
  color: var(--c-navy)
}

.problem__close strong {
  font-weight: 900;
  color: var(--c-coral-d);
  background: linear-gradient(transparent 66%, rgba(255, 172, 116, 0.3) 66%)
}

@media (max-width:900px) {
  .problem__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start
  }

  .versus {
    grid-template-columns: minmax(0, 1fr)
  }

  .versus__mid {
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: 8px 22px;
    justify-self: center
  }

  .versus__mid br {
    display: none
  }
}

/* =========================================================
   04. SERVICE (white)
   ========================================================= */
.service {
  padding: clamp(64px, 9vw, 110px) 0;
  background: #fff
}

.flowcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px)
}

.fc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  border-radius: var(--radius);
  background: var(--c-warm);
  border: 1px solid var(--c-line);
  transition: transform .3s, box-shadow .3s
}

.fc:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow)
}

.fc:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(-1*clamp(14px, 2vw, 26px)/2 - 13px);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
  transform: translateY(-50%);
  box-shadow: 0 6px 14px -6px rgba(233, 120, 75, .7)
}

.fc__no {
  position: absolute;
  top: 16px;
  right: 20px;
  font: 800 2.6rem/1 var(--ff-num);
  color: var(--c-tint)
}

.fc__ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--c-tint)
}

.fc__ic svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--c-coral-d);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fc h3 {
  margin-top: 20px;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
  font-weight: 900
}

.fc p {
  margin-top: 10px;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--c-gray)
}

@media (max-width:1000px) {
  .flowcards {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .fc:nth-child(2)::after {
    display: none
  }

  .fc:nth-child(1)::after {
    right: -20px
  }
}

@media (max-width:600px) {
  .flowcards {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px
  }

  .fc:not(:last-child)::after,
  .fc:nth-child(1)::after {
    top: auto;
    bottom: -24px;
    right: 50%;
    transform: translateX(50%) rotate(90deg);
    display: block
  }

  .fc:nth-child(2)::after {
    display: block
  }
}

/* =========================================================
   05. HUBSPOT / MARKETING (pale orange)
   ========================================================= */
.hs {
  position: relative;
  overflow: hidden;
  background: var(--c-pale)
}

.hs__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3vw, 40px);
  grid-row-gap: inherit;
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(64px, 8vw, 104px);
  grid-template-rows   : auto 1fr ;
  align-items: stretch;
}

.title {
  grid-column: 1 / 4;
  grid-row   : 1 / 2;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.hs__lead {
  margin-top: 20px;
  max-width: 34em;
  font-size: clamp(.95rem, .88rem + .3vw, 1.06rem);
  line-height: 1.95;
  color: var(--c-gray)
}

.hs .btn {
  margin-top: 30px
}

.hs__device {
  position: relative
}

.hs__device img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -32px rgba(180, 80, 40, .5)
}

@media (max-width:900px) {
  .hs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .title {
    grid-column: initial;
  }
  .hs__device {
    margin-top: 30px;
  }
}

/* =========================================================
   06. KNOW-HOW (white)
   ========================================================= */
.results {
  padding: clamp(64px, 9vw, 110px) 0;
  background: #fff
}

.results__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px)
}

.results__lead {
  font-size: clamp(.92rem, .86rem + .3vw, 1.05rem);
  line-height: 2;
  color: var(--c-gray)
}

.results__body {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch
}

.cycle {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-pale);
  border: 1px solid var(--c-line)
}

.cycle img {
  width: 100%;
  height: auto;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  object-position: center
}

.cycle figcaption {
  padding: 16px 22px 20px;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--c-gray)
}

.cycle figcaption b {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  color: var(--c-navy);
  margin-bottom: 2px
}

.analysis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px)
}

.analysis li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px;
  border-radius: var(--radius);
  background: var(--c-warm);
  border: 1px solid var(--c-line)
}

.analysis__wide {
  grid-column: 1 / -1
}

.analysis__ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--c-tint)
}

.analysis__ic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--c-coral-d);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.analysis h3 {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5
}

.analysis p {
  margin-top: 6px;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--c-gray)
}

@media (max-width:980px) {

  .results__head,
  .results__body {
    grid-template-columns: minmax(0, 1fr)
  }
}

@media (max-width:620px) {
  .analysis {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* =========================================================
   07. WHY (pale orange)
   ========================================================= */
.why {
  padding: clamp(64px, 9vw, 110px) 0;
  background: var(--c-pale)
}

.why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px)
}

.reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: 0 20px 40px -30px rgba(233, 120, 75, .5)
}

.reason__no {
  font: 800 .74rem var(--ff-num);
  letter-spacing: .16em;
  color: var(--c-coral-d)
}

.reason__ic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 18px 0 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-tint), #fff);
  border: 1px solid var(--c-line)
}

.reason__ic svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--c-coral-d);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.reason h3 {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  font-weight: 900;
  line-height: 1.55
}

.reason p {
  margin-top: 12px;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--c-gray)
}

@media (max-width:860px) {
  .why__list {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* =========================================================
   08. FLOW (white, timeline)
   ========================================================= */
.flow {
  padding: clamp(64px, 9vw, 110px) 0;
  background: #fff
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px)
}

.timeline::before {
  content: "";
  position: absolute;
  top: 86px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-orange) 0 8px, transparent 8px 16px)
}

.tl {
  position: relative;
  padding-top: 0
}

.tl__step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 800 .8rem var(--ff-num);
  letter-spacing: .2em;
  color: var(--c-coral-d)
}

.tl__step b {
  font-size: clamp(3.2rem, 2rem + 3vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--c-coral), var(--c-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.tl::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 80px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-coral);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--c-orange)
}

.tl h3 {
  margin-top: 44px;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
  font-weight: 900
}

.tl p:not(.tl__step) {
  margin-top: 8px;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--c-gray)
}

@media (max-width:860px) {
  .timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 0
  }

  .timeline::before {
    top: 20px;
    bottom: 20px;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--c-orange) 0 8px, transparent 8px 16px)
  }

  .tl {
    padding: 0 0 30px 40px
  }

  .tl::before {
    top: 12px;
    left: 0
  }

  .tl h3 {
    margin-top: 6px
  }

  .tl__step b {
    font-size: 2.8rem
  }
}

/* =========================================================
   FAQ (warm white)
   ========================================================= */
.faq {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--c-warm)
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.qa {
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--c-line);
  overflow: hidden
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  list-style: none
}

.qa summary::-webkit-details-marker {
  display: none
}

.qa summary .ico {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-coral-d);
  transition: transform .25s
}

.qa[open] summary .ico {
  transform: rotate(45deg)
}

.qa p {
  padding: 0 24px 22px;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--c-gray)
}

@media (max-width:860px) {
  .faq__grid {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* =========================================================
   09. CTA (only orange section)
   ========================================================= */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(120deg, #ff5e1f 0%, #fe7944 45%, #fe9560 100%)
}

.cta__deco i {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .28)
}

.cta__deco i:nth-child(1) {
  width: 520px;
  height: 520px;
  right: -120px;
  top: -200px
}

.cta__deco i:nth-child(2) {
  width: 340px;
  height: 340px;
  right: 40px;
  top: -110px;
  border-color: rgba(255, 255, 255, .2)
}

.cta__deco i:nth-child(3) {
  width: 260px;
  height: 260px;
  left: -90px;
  bottom: -130px;
  background: rgba(255, 255, 255, .08);
  border: 0
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(64px, 9vw, 104px);
  padding-bottom: clamp(64px, 9vw, 104px)
}

.cta__title {
  font-size: clamp(1.55rem, .9rem + 2.4vw, 2.7rem);
  font-weight: 900;
  line-height: 1.4
}

.cta__title .nb {
  display: block
}

.cta__lead {
  margin-top: 18px;
  font-size: clamp(.95rem, .88rem + .3vw, 1.1rem);
  font-weight: 500;
  line-height: 1.95;
  color: #fff
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.cta__sub {
  font-size: .92rem;
  font-weight: 500;
  color: #fff
}

@media (max-width:860px) {
  .cta__grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .cta__actions {
    align-items: stretch;
    text-align: center
  }

  .cta__actions .btn {
    width: 100%
  }
}

/* ---------- Footer (module colours mapped to palette) ---------- */
.aeo .footer{background:var(--c-pale);border-top:1px solid var(--c-line)}
.footer__inner{width:100%;max-width:1200px;margin:0 auto;padding:36px clamp(20px,4vw,48px) 28px}
.footer__note{font-size:.75rem;line-height:1.9;color:var(--c-gray);padding-bottom:22px;border-bottom:1px solid var(--c-line)}
.footer__row{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-top:18px}
.aeo .footer__contents{padding:0}
.aeo .footer .footer__contents__item.footer__links{flex-direction:row;flex-wrap:wrap;gap:6px 28px}
.aeo .footer .footer__contents__item.footer__links>a{min-height:0;display:inline-flex;align-items:center}
.aeo .footer__contents a{color:var(--c-navy);text-transform:none;font-size:.88rem;letter-spacing:.04em}
.aeo .footer__contents a:hover{color:var(--c-coral-d)}
.aeo .footer__bottom{padding:0}
.aeo .footer__bottom p{color:var(--c-gray);text-align:right;font-size:.75rem}
@media (max-width:768px){
  .footer__row{flex-direction:column;align-items:flex-start}
  .aeo .footer .footer__contents__item.footer__links>a{min-height:44px}
  .aeo .footer__bottom p{text-align:left}
}

/* long Japanese headings: let phrases wrap on narrow screens */
@media (max-width:520px) {

  .h2 .nb,
  .cta__title .nb {
    white-space: normal;
    display: inline-block
  }

  .hero__title .nb {
    display: block;
    white-space: nowrap
  }
}

@media (max-width:600px) {

  .hero__lead br,
  .problem__lead br,
  .sec-head__lead br,
  .hs__lead br,
  .cta__lead br {
    display: none
  }
}