@charset "UTF-8";
/* =========================================================
   Stella Edition LP
   PC : 768px〜（デザイン基準 1440px / フレーム「PC」）
   SP : 〜767px（デザイン基準 375px / フレーム「SP」）
   ========================================================= */

:root {
  --c-black: #030710;
  --c-navy: #14356c;
  --c-navy-dark: #162941;
  --c-teal: #009fb9;
  --c-blue-light: #c0d3eb;
  --c-blue-shadow: #6381a8;
  --c-blue-gray: #829dc0;
  --c-gray-text: #839bac;
  --c-yellow: #f8ffb8;
  --c-qa-bg: #183952;
  --font-base: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Oswald", "Inter", sans-serif;
  --header-h: 80px;
  --container: 1200px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-black); color: #fff; font-family: var(--font-base); line-height: 1.5; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }
section[id] { scroll-margin-top: var(--header-h); }

.sp-only { display: none !important; }
/* タブレット（1024〜1279px：iPad Pro 13 など）でだけ改行する */
.tb-only { display: none !important; }
@media (min-width: 1024px) and (max-width: 1279px) {
  br.tb-only { display: inline !important; }
}
.container { width: min(var(--container), calc(100% - 80px)); margin-inline: auto; }

/* ---------- icon（白い円アイコン。ボタンが白くなるホバー時は反転） ---------- */
.icon { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; background: var(--icon) center / contain no-repeat; transition: filter .25s; }
.icon--mail { --icon: url("../images/icon_mail.svg"); }
.icon--book { --icon: url("../images/icon_book.svg"); }

/* =========================================================
   header
   ========================================================= */
.header { position: relative; z-index: 100; height: var(--header-h); background: var(--c-black); }
.header__bar {
  position: relative; display: flex; align-items: center; height: 80px;
  width: min(1200px, calc(100% - 40px)); margin-inline: auto; padding: 0 103px 0 102px;
  background: #fff; border-radius: 0 0 20px 20px; box-shadow: inset 0 -5px 0 #c8d2db;
}
.header__logo { font-family: var(--font-en); font-weight: 400; font-size: 22px; letter-spacing: .15em; color: var(--c-navy-dark); white-space: nowrap; }
.header__nav { margin-inline: auto; }
.header__nav-list { display: flex; align-items: center; gap: 0 28px; }
.header__nav-link {
  position: relative; display: flex; align-items: center; justify-content: center; height: 80px; padding: 0 12px;
  font-size: 14px; font-weight: 500; letter-spacing: .08em; line-height: 1.2; color: var(--c-gray-text); text-align: center; transition: color .2s;
}
.header__nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--c-teal); border-radius: 100px 100px 0 0; transform: scaleX(0); transition: transform .2s;
}
.header__nav-link:hover, .header__nav-link.is-current { color: var(--c-navy); font-weight: 700; }
.header__nav-link:hover::after, .header__nav-link.is-current::after { transform: scaleX(1); }
.header__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 204px; height: 40px;
  border: 1px solid var(--c-navy-dark); border-radius: 100px; background: var(--c-navy-dark);
  font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; transition: background .2s, color .2s;
}
.header__cta:hover { background: #fff; color: var(--c-navy-dark); }
.header__menu-btn { display: none; }
.sp-menu { display: none; }

/* =========================================================
   CTA button
   ========================================================= */
.cta-group { display: flex; justify-content: center; align-items: center; gap: 37px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 282px; border: 2px solid #fff; border-radius: 100px;
  font-size: 16px; font-weight: 600; color: #fff; transition: background .25s, color .25s;
}
.cta--mitu { height: 64px; letter-spacing: .05em;
  background: radial-gradient(ellipse 487px 163px at 53% -27%, #009fb9 0%, #0b7798 21.4%, #164e76 42.8%); }
.cta--book { height: 64px; letter-spacing: .2em; background: var(--c-black); }
.cta:hover { background: #fff; color: var(--c-navy); }
.cta:hover .icon, .header__cta:hover .icon { filter: invert(1) hue-rotate(180deg); }

/* =========================================================
   FV
   画面幅に合わせて全体を等比で拡縮（PC 1440×713 / SP 375×731 の比率を常に維持）
   --u = デザイン上の1px。子要素はすべて calc(数値 * var(--u)) で指定
   ========================================================= */
.fv { position: relative; container-type: inline-size; aspect-ratio: 1440 / 713; overflow: hidden; background: #030710; --u: calc(100cqw / 1440); }
.fv__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fv__stage { position: absolute; inset: 0; }
.fv__title { position: absolute; left: calc(117 * var(--u)); top: calc(123 * var(--u)); width: calc(602 * var(--u)); height: calc(183 * var(--u)); }
.fv__title img { position: absolute; max-width: none; height: auto; }
.fv__title-pc { left: calc(-52 * var(--u)); top: calc(-56 * var(--u)); width: calc(703 * var(--u)); }
.fv__title-sp { display: none; }
.fv__lead { position: absolute; left: calc(117 * var(--u)); top: calc(366 * var(--u)); width: calc(700 * var(--u));
  font-size: calc(24 * var(--u)); font-weight: 500; line-height: 2; letter-spacing: .2em; white-space: nowrap; }
.fv__cta { position: absolute; left: calc(419 * var(--u)); top: calc(569 * var(--u)); display: flex; align-items: flex-start; gap: calc(37 * var(--u)); }
.fv__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  width: calc(282 * var(--u)); border: max(1px, calc(2 * var(--u))) solid #fff; border-radius: 100px;
  font-size: calc(16 * var(--u)); font-weight: 600; color: #fff; white-space: nowrap; transition: background .25s, color .25s;
}
.fv__btn .icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.fv__btn--mitu { height: calc(64 * var(--u)); letter-spacing: .05em;
  background: radial-gradient(ellipse 173% 255% at 53% -27%, #009fb9 0%, #0b7798 21.4%, #164e76 42.8%); }
.fv__btn--book { height: calc(64 * var(--u)); letter-spacing: .2em; background: var(--c-black); }
.fv__btn:hover { background: #fff; color: var(--c-navy); }
.fv__btn:hover .icon { filter: invert(1) hue-rotate(180deg); }

/* =========================================================
   課題
   ========================================================= */
/* 背景：オーロラ（CSSアニメーション。画像は使用しない）
   動きの速さは animation の秒数で調整（小さいほど速い） */
.problem { position: relative; isolation: isolate; overflow: hidden; padding: 80px 0 85px;
  background: linear-gradient(180deg, #0b2240 0%, #061529 55%, #030710 100%); }
.problem::before, .problem::after { content: ""; position: absolute; inset: -50%; z-index: -1; pointer-events: none; will-change: translate, rotate, scale; }
.problem::before {
  background:
    radial-gradient(closest-side at 30% 40%, rgba(5, 168, 193, 0.45), transparent),
    radial-gradient(closest-side at 70% 60%, rgba(12, 38, 72, 0.7), transparent),
    radial-gradient(closest-side at 50% 20%, rgba(20, 53, 108, .8), transparent);
  /* 移動・回転・拡大を別々の周期で動かし、ランダムに見せる
     --aurora-speed：全体の速さの倍率（小さいほど速い。1＝標準、.5＝2倍速） */
  --aurora-speed: 1;
  animation:
    aurora-move-a   calc(10s  * var(--aurora-speed)) ease-in-out infinite alternate,
    aurora-rotate-a calc(7s   * var(--aurora-speed)) ease-in-out infinite alternate,
    aurora-scale-a  calc(5.5s * var(--aurora-speed)) ease-in-out infinite alternate;
}
.problem::after {
  background:
    radial-gradient(closest-side at 60% 30%, rgba(0, 159, 185, .25), transparent),
    radial-gradient(closest-side at 25% 75%, rgba(176, 196, 211, .18), transparent);
  /* 開始位置もずらす（マイナスの遅延＝途中から再生） */
  --aurora-speed: .3;
  animation:
    aurora-move-b   calc(13s  * var(--aurora-speed)) ease-in-out calc(-4s * var(--aurora-speed)) infinite alternate,
    aurora-rotate-b calc(9s   * var(--aurora-speed)) ease-in-out calc(-2s * var(--aurora-speed)) infinite alternate,
    aurora-scale-b  calc(6.5s * var(--aurora-speed)) ease-in-out calc(-3s * var(--aurora-speed)) infinite alternate;
}
/* 光A：不規則な経路 */
@keyframes aurora-move-a {
  0%   { translate: 0 0; }
  20%  { translate: 9% -6%; }
  45%  { translate: -4% -11%; }
  70%  { translate: -10% 5%; }
  100% { translate: 6% 9%; }
}
@keyframes aurora-rotate-a { 0% { rotate: 0deg; } 35% { rotate: 14deg; } 70% { rotate: -8deg; } 100% { rotate: 20deg; } }
@keyframes aurora-scale-a  { 0% { scale: 1; } 50% { scale: 1.12; } 100% { scale: .96; } }
/* 光B：Aとは違う経路 */
@keyframes aurora-move-b {
  0%   { translate: 0 0; }
  25%  { translate: -12% 4%; }
  50%  { translate: 5% 12%; }
  80%  { translate: 11% -7%; }
  100% { translate: -6% -10%; }
}
@keyframes aurora-rotate-b { 0% { rotate: 0deg; } 40% { rotate: -16deg; } 100% { rotate: 10deg; } }
@keyframes aurora-scale-b  { 0% { scale: 1.05; } 60% { scale: .94; } 100% { scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .problem::before, .problem::after { animation: none; } }
.problem__title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; text-align: center; }
.problem__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 25px; margin-top: 40px; }
.problem__item h3 { font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; }
.problem__item p { margin-top: 20px; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; }

/* =========================================================
   解決（構成図）
   ========================================================= */
.solution { padding: 84px 0 86px; /* background: radial-gradient(ellipse 780px 300px at 49% 50%, #0a4871 0%, #083859 9%, #072840 18%, #051728 27%, #030710 60%), var(--c-black);*/ } 
.solution__title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; text-align: center; }
.solution__body { display: grid; grid-template-columns: 308px 1fr 308px; grid-template-areas: "left diagram right"; align-items: start; margin-top: 78px; }
.feature { display: flex; flex-direction: column; gap: 49px; }
.feature--left { grid-area: left; }
.feature--right { grid-area: right; }
.feature li { height: 84px; padding-top: 5px; }
.feature--left li { border-right: 3px solid #fff; }
.feature--right li { border-left: 3px solid #fff; padding-left: 32px; }
.feature h3 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: .05em; color: var(--c-yellow); white-space: nowrap; }
.feature p { margin-top: 10px; font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; white-space: nowrap; }

.diagram { grid-area: diagram; position: relative; width: 412px; height: 390px; margin: -27px auto 0; }
.diagram__hq { position: absolute; top: 0; left: 171px; width: 88px; }
.diagram__hq-label { position: absolute; top: 82px; left: 0; right: 0; font-size: 20px; font-weight: 700; letter-spacing: .05em; text-align: center; }
.diagram__arrows { position: absolute; top: 111px; left: 45px; width: 332px; }
.diagram__stella {
  position: absolute; top: 134px; left: 68px; display: flex; align-items: center; gap: 16px; width: 290px; height: 70px; padding-left: 6px;
  background: linear-gradient(103.6deg, #e5edef 0%, #fff 56.6%, #e5edef 100%); box-shadow: inset -3px -3px 1px #a8b5ba;
}
.diagram__stella img { width: 56px; }
.diagram__stella span { font-size: 28px; font-weight: 700; letter-spacing: .05em; color: var(--c-black); }
.diagram__stores { position: absolute; top: 293px; left: 0; right: 0; display: flex; justify-content: space-between; }
.diagram__stores li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 69px; font-size: 20px; font-weight: 500; letter-spacing: .11em; white-space: nowrap; }
.diagram__stores img { width: 69px; }

/* =========================================================
   新機能スライダー（content1〜6）
   ========================================================= */
.func { padding: 43px 40px 37px; background: var(--c-black); }
.func__card { position: relative; width: min(1360px, 100%); margin-inline: auto; padding: 60px 80px 34px; background: #eee; border-radius: 20px; color: var(--c-navy); }
.func__title { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; text-align: center; }
.func__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 38px auto 0; }
.func__tab {
  display: flex; align-items: center; justify-content: center; height: 120px; padding: 0 20px 4px;
  border-radius: 20px; background: var(--c-blue-light); box-shadow: inset 0 -5px 0 var(--c-blue-shadow);
  font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; color: var(--c-navy); text-align: center;
  transition: background .2s, color .2s, box-shadow .2s;
}
.func__tab.is-active { background: var(--c-navy); color: #fff; box-shadow: inset 0 -5px 0 rgba(0,0,0,.25); }
@media (hover: hover) {
  .func__tab:hover { background: var(--c-navy); color: #fff; box-shadow: inset 0 -5px 0 rgba(0,0,0,.25); }
}

.slider { position: relative; max-width: 1200px; margin: 40px auto 0; }
.slider__viewport { overflow: hidden; touch-action: pan-y; }
.slider__track { display: flex; transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.slide { flex: 0 0 100%; display: flex; align-items: center; gap: 40px; }
.slide__img { flex: 0 0 588px; height: 470px; border-radius: 20px; overflow: hidden; background: #d9e3ee; }
/*.slide__img picture { display: block; width: 100%; height: 100%; }*/
.slide__img img { width: 100%; height: 100%; object-fit: cover; }
.slide__img-sp { display: none; }
@media (max-width: 767px) {
  .slide__img .slide__img-pc { display: none; }
  .slide__img .slide__img-sp { display: block; }
}
.slide__text { flex: 1; min-width: 0; padding-bottom: 20px; }
.slide__sub { font-size: 22px; font-weight: 700; line-height: 2; letter-spacing: .05em; }
.slide__heading { margin-top: 10px; font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; }
.slide__name { position: relative; margin-top: 43px; padding-left: 18px; font-size: 18px; font-weight: 700; color: var(--c-black); }
.slide__name::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 24px; background: var(--c-black); transform: translateY(-50%); }
.slide__desc { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 2; letter-spacing: .1em; color: var(--c-black); }

.slider__arrow { position: absolute; top: 50%; z-index: 2; width: 39px; height: 67px; transform: translateY(-50%); background: var(--c-blue-light); transition: background .2s; }
.slider__arrow--prev { left: -45px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.slider__arrow--next { right: -45px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.slider__arrow:hover { background: var(--c-navy); }
.slider__dots { display: flex; justify-content: center; gap: 20px; margin-top: 21px; }
.slider__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--c-blue-light); transition: background .2s; }
.slider__dots span.is-active { background: var(--c-navy); }

/* =========================================================
   CloudExaシリーズ
   ========================================================= */
.series { padding: 40px; background: var(--c-black); }
.series__panel { width: min(1360px, 100%); margin-inline: auto; padding: 72px 80px 69px; background: linear-gradient(180deg, #183952 4.65%, #2e5069 76.4%); text-align: center; }
.series__en { font-family: var(--font-en); font-weight: 200; font-size: 24px; line-height: 1.4; letter-spacing: .18em; }
.series__title { margin-top: 5px; font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.series__list { display: flex; justify-content: center; gap: 24px; margin-top: 64px; }
.series__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 15px; width: 180px; opacity: .5; transition: opacity .2s; }
.series__item.is-active, .series__item:hover { opacity: 1; }
.series__item img { width: 180px; aspect-ratio: 1; object-fit: cover; }
.series__name { font-size: 24px; font-weight: 600; letter-spacing: .05em; white-space: nowrap; }
.series__new { position: absolute; top: -34px; left: 62px; width: 56px; height: 24px; background: #fff; font-family: var(--font-en); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: .08em; color: var(--c-black); }
.series__detail { position: relative; display: flex; align-items: center; gap: 40px; min-height: 180px; max-width: 1200px; margin: 60px auto 0; padding: 33px 102px; border: 2px solid #fff; border-radius: 20px; text-align: left; }
.series__line { position: absolute; bottom: 100%; left: var(--line-x, 286px); width: 1px; height: 42px; background: #fff; transition: left .3s; }
.series__detail-main { flex: 1; min-width: 0; }
.series__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.series__detail-name { margin-right: 6px; font-size: 28px; font-weight: 700; letter-spacing: .1em; }
.series__tags { display: flex; gap: 10px; }
.series__tags li { min-width: 113px; height: 24px; padding: 0 14px; border: 1px solid #fff; border-radius: 100px; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: .05em; text-align: center; }
.series__points { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.series__points li { position: relative; padding-left: 26px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: .05em; }
.series__points li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; background: url("../images/icon_check.svg") center / contain no-repeat; }
.series__recommend { flex: 0 0 300px; padding-left: 40px; border-left: 1px solid rgba(255,255,255,.5); font-size: 16px; line-height: 1.7; }
.series__recommend dl { margin: 0; }
.series__recommend dt { font-weight: 700; color: var(--c-yellow); }
.series__recommend dd { margin: 4px 0 0; }

/* =========================================================
   CV / 資料（共通背景）
   ========================================================= */
.cv, .sample { position: relative; overflow: hidden; isolation: isolate; background: #06151E/* url("../images/cv_bg.svg") center top / cover no-repeat:*/; }
.cv::before, .sample::before {
  content: ""; position: absolute; inset: 0; z-index: -1; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 70% 115% at 50% 50%, rgba(0,159,185,0) 0%, rgba(2,83,101,.5) 50%, rgba(2,45,58,.75) 75%, rgba(3,26,37,.875) 87.5%, #030710 100%);
}
.cv__inner { display: flex; flex-direction: column; align-items: center; padding: 80px 20px 79px; text-align: center; }
.cv__title img { width: 441px; }
.cv__lead { margin-top: 30px; font-size: 20px; font-weight: 500; line-height: 2; letter-spacing: .2em; text-shadow: 0 0 3px #000, 0 0 5px #000; }
.cv .cta-group { margin-top: 30px; }

/* =========================================================
   Q&A
   ========================================================= */
.qa { padding: 80px 0 90px; background: var(--c-qa-bg); }
.qa__title { font-size: 40px; font-weight: 500; line-height: 1.2; letter-spacing: .1em; text-align: center; }
.qa__list { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }
.qa__item { border-radius: 20px; background: #fff; box-shadow: inset 0 -5px 0 var(--c-blue-shadow); color: var(--c-black); overflow: hidden; }
.qa__q { position: relative; display: flex; align-items: center; width: 100%; min-height: 88px; padding: 18px 70px 23px 101px; font-size: 20px; font-weight: 700; line-height: 1.4; text-align: left; color: var(--c-black); }
.qa__mark { position: absolute; left: 27px; top: 50%; transform: translateY(-55%); font-size: 48px; font-weight: 700; line-height: 1; color: var(--c-blue-gray); }
.qa__q::after { content: ""; position: absolute; right: 36px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 3px solid var(--c-blue-gray); border-bottom: 3px solid var(--c-blue-gray); transform: rotate(45deg); transition: transform .25s, margin .25s; }
.qa__item.is-open .qa__q::after { transform: rotate(-135deg); margin-top: -2px; }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.qa__item.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a-inner { overflow: hidden; padding: 0 101px; }
.qa__item.is-open .qa__a-inner { padding-bottom: 35px; }
.qa__a-inner p { font-size: 14px; line-height: 2; }
.qa__a-inner .qa__a-title { margin: 12px 0 16px; font-size: 20px; font-weight: 700; line-height: 1.4; }

/* =========================================================
   資料
   ========================================================= */
.sample__inner { display: flex; align-items: center; justify-content: center; gap: 125px; padding: 75px 20px 71px; }
.sample__thumb { width: 283px; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.sample__text { display: flex; flex-direction: column; align-items: center; gap: 37px; }
.sample__lead { font-size: 28px; font-weight: 600; line-height: 1.8; letter-spacing: .15em; text-align: center; }

/* =========================================================
   footer
   ========================================================= */
.footer { background: var(--c-black); }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-start; width: min(1200px, calc(100% - 80px)); min-height: 168px; margin-inline: auto; padding-top: 44px; border-bottom: 1px solid #fff; }
.footer__company img { width: 160px; }
.footer__name { margin-top: 8px; font-size: 16px; font-weight: 500; }
.footer__address { margin-top: 8px; font-size: 12px; letter-spacing: .05em; }
.footer__links { display: flex; flex-direction: column; gap: 20px; width: 180px; margin-top: -3px;}
.footer__links a { display: block; height: 32px; padding-top: 6px; border-bottom: 1px solid var(--c-blue-gray); font-size: 16px; font-weight: 500; color: var(--c-blue-gray); text-align: right; transition: color .2s; }
.footer__links a:hover { color: #fff; }
.footer__copy { padding: 6px 0 23px; font-size: 14px; text-align: center; }
.footer__copy small { font-size: inherit; }

/* =========================================================
   PC幅の可変対応（768〜1279px）
   ========================================================= */
@media (max-width: 1279px) and (min-width: 768px) {
  .header__bar { padding: 0 32px; }
  .header__nav-list { gap: 0 8px; }
  .problem__list { grid-template-columns: repeat(2, 1fr); }
  .solution__body { grid-template-columns: 1fr 1fr; grid-template-areas: "diagram diagram" "left right"; row-gap: 56px; }
  .feature li { height: auto; padding-bottom: 6px; }
  .func__card { padding-inline: 60px; }
  .func__tab { font-size: clamp(16px, 1.9vw, 24px); }
  .slide { gap: 32px; }
  .slide__img { flex-basis: 48%; height: auto; aspect-ratio: 588 / 470; }
  .slide__heading { font-size: clamp(24px, 2.6vw, 32px); }
  .series__panel { padding-inline: 40px; }
  .series__list { gap: 16px; }
  .series__item, .series__item img { width: min(180px, 18vw); }
  .series__name { font-size: clamp(16px, 1.9vw, 24px); }
  .series__new { left: 50%; transform: translateX(-50%); }
  .series__detail { flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 40px; }
  .series__recommend { flex-basis: auto; padding-left: 0; border-left: 0; }
  .sample__inner { gap: 60px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .header__logo { font-size: 18px; }
  .header__nav-link { padding: 0 6px; font-size: 12px; }
  .header__cta { width: 180px; }
  .feature h3, .feature p { white-space: normal; }
  .func__tabs { gap: 14px; }
  .func__tab { height: 104px; padding-inline: 10px; letter-spacing: .03em; }
  .slide { flex-direction: column; align-items: stretch; }
  .slide__img { flex-basis: auto; }
  .slider__arrow--prev { left: -48px; }
  .slider__arrow--next { right: -48px; }
  .cta-group { gap: 20px; }
}

/* =========================================================
   SP（〜767px）フレーム「SP」準拠
   ========================================================= */
@media (max-width: 767px) {
  :root { --header-h: 48px; } /* SPヘッダーの高さ：今後はここだけ変更すれば全体がそろう */
  .pc-only { display: none !important; }
  br.sp-only { display: inline !important; }
  img.sp-only { display: block !important; }
  body { padding-top: var(--header-h); }
  /* 横方向のはみ出しによる左右ブレ防止 */
  html, body { overflow-x: hidden; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  html, body { overscroll-behavior-x: none; }
  .container { width: calc(100% - 56px); }

  /* header（追従） */
  .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); }
  .header__bar { width: 100%; height: calc(var(--header-h) - 1px); padding: 0 13px; border-radius: 0 0 10px 10px; box-shadow: inset 0 -3px 0 #c8d2db; }
  .header__logo { font-size: 13px; letter-spacing: .15em; }
  .header__nav { display: none; }
  .header__cta { margin-left: auto; gap: 5px; width: 160px; height: calc(var(--header-h) - 12px); border: 0; font-size: 12px;
    background: radial-gradient(ellipse 276px 72px at 53% -27%, #009fb9 0%, #0b7798 24.3%, #164e76 48.6%); }
  .header__cta .icon { width: 20px; height: 20px; }
  /* SPはホバー時もグラデーションのまま。タップ（クリック）時のみ透明度70% */
  .header__cta { transition: opacity .15s; -webkit-tap-highlight-color: transparent; }
  .header__cta:hover { color: #fff;
    background: radial-gradient(ellipse 276px 72px at 53% -27%, #009fb9 0%, #0b7798 24.3%, #164e76 48.6%); }
  .header__cta:hover .icon { filter: none; }
  .header__cta:active { opacity: .7; }
  .header__menu-btn { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 16px; height: 14px; margin-left: 10px; }
  .header__menu-btn::before { content: ""; position: absolute; inset: -13px -10px; }
  .header__menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--c-teal); transition: transform .25s, opacity .25s; }
  .header__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* hamburger menu */
  .sp-menu { display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 90; padding: 24px 28px; background: rgba(3, 7, 16, .96);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .sp-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
  .sp-menu__list li { border-bottom: 1px solid rgba(130, 157, 192, .4); }
  .sp-menu__link { position: relative; display: block; padding: 20px 4px; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
  .sp-menu__link::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--c-teal); border-right: 2px solid var(--c-teal); transform: rotate(45deg); }
  body.is-menu-open { overflow: hidden; }

  /* CTA */
  .cta-group { flex-direction: column; gap: 20px; }
  .cta { width: min(330px, 100%); height: 60px; font-size: 18px; font-weight: 700; }
  .cta--book { letter-spacing: .25em; }

  /* FV（375×731 の比率で等比拡縮） */
  .fv { aspect-ratio: 375 / 731; --u: calc(100cqw / 375); }
  .fv__title { left: 0; top: calc(50 * var(--u)); width: 100%; height: calc(153 * var(--u)); }
  .fv__title-pc { display: none; }
  .fv__title-sp { display: block !important; left: 0; top: 0; width: 100%; }
  .fv__lead { left: calc(22 * var(--u)); top: calc(218 * var(--u)); width: calc(331 * var(--u));
    font-size: calc(15 * var(--u)); line-height: 1.6; letter-spacing: .15em; text-align: center; }
  .fv__cta { left: calc(23 * var(--u)); top: calc(541 * var(--u)); flex-direction: column; gap: calc(20 * var(--u)); }
  .fv__btn { width: calc(330 * var(--u)); height: calc(60 * var(--u)); gap: calc(12 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; }
  .fv__btn .icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .fv__btn--mitu { letter-spacing: .03em; }
  .fv__btn--book { letter-spacing: .35em; }

  /* 課題 */
  .problem { padding: 44px 0 48px; }
  .problem__title { font-size: 20px; letter-spacing: .03em; }
  .problem__list { grid-template-columns: 1fr; gap: 40px; margin-top: 27px; }
  .problem__item h3 { font-size: 18px; text-align: center; font-weight: bold;}
  .problem__item p { margin-top: 14px; font-size: 14px; line-height: 1.75; }

  /* 解決 */
  .solution { padding: 62px 0 60px; background: radial-gradient(ellipse 140% 40% at 100% 0%, #0a4871 0%, #083859 25%, #072840 45%, #030710 80%), var(--c-black); }
  .solution .container { width: calc(100% - 24px); }
  .solution__title { font-size: 20px; letter-spacing: .02em; }
  .solution__body { display: flex; flex-direction: column; align-items: center; margin-top: 48px; }
  .diagram { width: 350px; height: 349px; margin: 0 auto; transform-origin: top center; }
  .diagram__hq { left: 131px; }
  .diagram__hq-label { top: 86px; font-size: 13px; }
  .diagram__arrows { top: 105px; left: 32px; width: 287px; }
  .diagram__stella { top: 128px; left: 30px; }
  .diagram__stores { top: 285px; }
  .diagram__stores li { width: 58px; gap: 6px; font-size: 13px; letter-spacing: .05em; }
  .diagram__stores img { width: 58px; }
  .feature { width: calc(100% - 38px); gap: 34px; }
  .feature--left { margin-top: 50px; }
  .feature--right { margin-top: 34px; }
  .feature li, .feature--left li, .feature--right li { height: auto; padding: 0 0 0 18px; border: 0; border-left: 3px solid #fff; }
  .feature h3 { font-size: 18px; }
  .feature p { margin-top: 12px; font-size: 14px; line-height: 1.6; white-space: normal; }

  /* 新機能スライダー */
  .func { padding: 13px; }
  .func__card { padding: 30px 20px; background: #fff; }
  .func__title { font-size: 22px; line-height: 28px; }
  .func__tabs { grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 20px; }
  .func__tab { height: 88px; padding: 0 4px 4px; font-size: 14px; letter-spacing: 0; box-shadow: inset 0 -4.4px 0 var(--c-blue-shadow); }
  .func__tab.is-active { box-shadow: inset 0 -4.4px 0 rgba(0,0,0,.25); }
  .slider { margin-top: 20px; }
  .slider__arrow { display: none; }
  .slide { flex-direction: column; align-items: stretch; gap: 20px; }
  .slide__img { flex: none; width: 100%; height: auto; aspect-ratio: 308 / 203; border-radius: 12px; }
  .slide__text { padding: 0; }
  .slide__sub { font-size: 18px; line-height: 1.4; }
  .slide__heading { margin-top: 11px; font-size: 21px; line-height: 1.36; }
  .slide__name { margin-top: 22px; padding-left: 12px; font-size: 18px; }
  .slide__name::before { width: 2px; height: 20px; }
  .slide__desc { margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 25px; letter-spacing: 0; }
  .slider__dots { gap: 13px; margin-top: 20px; }
  .slider__dots span { width: 7px; height: 7px; }

  /* シリーズ */
  .series { padding: 13px 12px; }
  .series__panel { padding: 40px 21px 47px; }
  .series__en { font-size: 22px; }
  .series__title { font-size: 21px; }
  .series__list { display: grid; grid-template-columns: repeat(2, 134px); justify-content: center; gap: 24px 12px; margin-top: 62px; }
  .series__item { width: 134px; gap: 10px; }
  .series__item img { width: 134px; }
  .series__name { font-size: 16.5px; }
  .series__new { top: -32px; left: 39px; }
  .series__detail { display: block; min-height: 0; margin-top: 30px; padding: 20px 14px 26px; text-align: center; }
  .series__line { display: none; }
  .series__head { justify-content: center; gap: 8px; }
  .series__detail-name { width: 100%; margin: 0; font-size: 22px; }
  .series__tags li { min-width: 117px; font-size: 14px; }
  .series__points { margin-top: 18px; gap: 10px; text-align: left; }
  .series__points li { font-size: 14px; font-weight: 500; line-height: 1.9; }
  .series__points li::before { top: .4em; }
  .series__recommend { margin-top: 18px; padding: 16px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.5); font-size: 14px; text-align: left; }

  /* CV */
  .cv__inner { padding: 80px 20px 60px; }
  .cv__title img { width: 350px; max-width: none; }
  .cv__lead { margin-top: 16px; font-size: 15px; line-height: 1.75; letter-spacing: .1em; }
  .cv .cta-group { width: 100%; margin-top: 26px; }

  /* Q&A */
  .qa { padding: 60px 0; }
  .qa .container { width: calc(100% - 30px); }
  .qa__title { font-size: 22px; line-height: 1.3; }
  .qa__list { gap: 25px; margin-top: 20px; }
  .qa__q { min-height: 88px; padding: 16px 32px 20px 42px; font-size: 16px; }
  .qa__mark { left: 14px; font-size: 22px; }
  .qa__q::after { right: 16px; width: 9px; height: 9px; border-width: 2px; }
  .qa__a-inner { padding: 0 16px; }
  .qa__item.is-open .qa__a-inner { padding-bottom: 26px; }
  .qa__a-inner .qa__a-title { margin: 0 0 10px; font-size: 15px; }
  .qa__a-inner p { font-size: 14px; line-height: 1.75; letter-spacing: .03em; }

  /* 資料 */
  .sample__inner { flex-direction: column; gap: 0; padding: 64px 16px 60px; }
  .sample__text { display: contents; }
  .sample__lead { order: 1; font-size: 20px; line-height: 1.6; letter-spacing: .1em; }
  .sample__thumb { order: 2; width: 100%; max-width: 344px; margin-top: 30px; }
  .sample .cta { order: 3; margin-top: 40px; }

  /* footer */
  .footer__inner { flex-direction: column-reverse; align-items: center; width: 100%; min-height: 0; padding: 36px 0 45px; }
  .footer__links { flex-direction: row; gap: 19px; width: auto; margin: 0 0 29px;}
  .footer__links a { width: 145px; font-size: 14px; text-align: center;}
  .footer__company { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer__name { font-size: 14px; }
  .footer__copy { padding: 6px 0 13px; font-size: 12px; }
}

/* 375px未満：構成図を縮小 */
@media (max-width: 374px) {
  .diagram { zoom: .94; }
}
@media (max-width: 354px) {
  .diagram { zoom: .83; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}