@charset "UTF-8";
/* 面の構成。bonx.co/work の組み方に合わせてある。
   緑 → 白 → 緑 → 近黒 → 薄灰 を交互に敷き、節の見出しは中央に置いて
   下に緑の短い罫を引く。styles.css と hero-intercept.css の後に読み込む。 */

body{color:var(--ink)}

/* ── 節の見出し ──────────────────────────────────────── */
.section-head,.industry-heading,.plan-intro,.support-head,.choice-incident,.faq-head,
.dashboard-overview>.hero-inner,.explainer-copy{text-align:center}
.section-head,.industry-heading,.plan-intro,.support-head{display:block;margin-bottom:56px}
.section-head>*,.industry-heading>*,.plan-intro>*,.support-head>*,.choice-incident>*{grid-column:auto;grid-row:auto}
.kicker{font-size:13px;font-weight:700;letter-spacing:.06em;color:inherit;margin-bottom:14px;text-transform:none}
.section-head h2,.industry-heading h2,.plan-intro h2,.support-head h2,.faq-head h2,
.dashboard-overview h2,.choice-incident h2{margin:0 auto}
/* 見出しの下の短い罫。bonx はどの節にもこれを置いている */
.section-head h2:after,.industry-heading h2:after,.plan-intro h2:after,.support-head h2:after,
.faq-head h2:after,.dashboard-overview h2:after,.contact-copy h2:after{
  content:'';display:block;width:40px;height:3px;background:var(--field);margin:28px auto 0}
.section-head>p:not(.kicker),.industry-heading>p,.plan-intro>p:not(.kicker),.support-head p,
.dashboard-description,.choice-incident>p{margin:24px auto 0;max-width:46em}
.support-head>div{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:28px}

/* ── ヒーロー: 角丸の緑の面 ──────────────────────────── */
.hero-first{background:#fff;border-bottom:0;padding:20px 20px 0}
.hero-first>.hero-inner{width:min(1440px,100%);background:var(--field);border-radius:36px;
  overflow:hidden;color:#fff;padding:72px 60px 64px;gap:48px;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-areas:'copy demo' 'actions demo';
  align-items:start}
.hero-first h1,.hero-first .hero-description,.hero-first .hero-lockup>span{color:#fff}
.hero-first h1>span{color:#fff}
.hero-first h1{font-size:clamp(31px,3.9vw,56px);line-height:1.45;font-weight:800}
.hero-first .hero-description{color:#e6f7ec;font-size:16px;max-width:30em}
.hero-message{margin-bottom:38px;padding-right:48px}
.hero-lockup{margin-bottom:22px}
.hero-lockup>span{color:#d8f3e3;font-weight:600}
.hero-conversion{padding-bottom:76px;padding-right:48px}
.hero-first .hero-actions .button{background:#fff;color:var(--brand);border-color:#fff;min-height:58px;padding-inline:30px;font-size:15px}
.hero-first .hero-actions .button:hover{background:#eaf7ef}
.hero-first .hero-actions .button>.icon{filter:none}
.hero-first .hero-actions .button-secondary{background:transparent;border:1px solid #ffffff5c;color:#fff;min-height:58px;padding-inline:26px}
.hero-first .hero-actions .button-secondary:hover{background:#ffffff1f;color:#fff}
.hero-first .waitlist-benefit strong{color:#fff}
.hero-first .waitlist-benefit span{color:#d8f3e3}
/* 製品の画面は面の内側に置き、角丸で切る */
.hero-intercept{margin:0;align-self:center}
/* 面の文字色が製品の画面に流れ込まないようにする */
.hero-first .intercept-window{border-radius:13px;border:1px solid #cee2d5;color:var(--ink)}
.hero-first .intercept-window p,.hero-first .intercept-window h3,.hero-first .intercept-window span,
.hero-first .intercept-window b{color:inherit}
.hero-first .intercept-chat>h3{color:#1d2b22}
.hero-first .intercept-prompt{color:#273549}
.hero-first .intercept-address{color:#718096}
.hero-first .intercept-document{color:#6b7c92}
.hero-first .intercept-result{right:16px;bottom:16px}
.intercept-visual{padding:0}

/* ── ヒーロー直下の対応サービス ──────────────────────── */
.coverage-strip{padding:34px 0 10px;background:#fff}
.coverage-strip .browser-integrations{margin:0}

/* ── 面の割り当て ────────────────────────────────────── */
.dashboard-overview,.explainer-section,.workflow,.faq{background:#fff}
.industry-section,.consultation-plans{background:var(--mist)}




/* 機能の3行は、bonx の「特徴・機能」にあたる一番大きな塊。近黒の面に置く */
.feature-story{background:var(--field-ink);color:#fff;padding:112px 0 96px}
.feature-story .story-copy h2,.feature-story .story-copy .kicker{color:#fff}
.feature-story .story-copy>p:not(.story-kicker):not(.story-note){color:#c9c6cb}
.feature-story .story-copy .story-note{color:#9a949c}
.feature-story .motion-demo figcaption{color:#9a949c}
.feature-story .story-row{padding-block:72px}
.feature-story .story-row:first-of-type{padding-top:0}
/* 近黒の上では、節の見出しも白で中央に置く */
.feature-story>.feature-head{text-align:center;margin-bottom:72px}
.feature-story>.feature-head .kicker{color:#fff}
.feature-story>.feature-head h2{color:#fff;margin:0 auto}

/* 導入支援は緑の面のまま、見出しだけ中央へ */
.support-section{background:var(--field)}
.support-section .kicker{color:#cdf3dd}
.support-section .support-steps{border-top-color:#ffffff4d}
.support-section .support-steps li{border-left-color:#ffffff4d}
.support-head .pill-cta{color:var(--brand)}

/* 問い合わせも緑の面 */
.contact-section{background:var(--field)}
.contact-section .kicker{color:#cdf3dd}

/* ── 囲い ────────────────────────────────────────────── */
/* bonx の白いカードは、影なし・1px の罫・小さめの角丸 */
.consultation-plan-grid article,.industry-cases article{background:none}
.plan-mock,.contact-form-card{border-radius:8px}
.button{border-radius:999px}
.footer{background:var(--field-ink);color:#fff;padding:56px 0}
.footer a,.footer small,.footer nav,.footer .company{color:#b4b0b6}
.footer a:hover{color:#fff}

@media(max-width:900px){
  .hero-first{padding:12px 12px 0}
  .hero-first>.hero-inner{border-radius:22px;padding:40px 0 0;grid-template-columns:1fr;
    grid-template-areas:'copy' 'demo' 'actions';gap:26px}
  .hero-message,.hero-conversion{padding-inline:22px}
  .hero-conversion{padding-bottom:40px}
  .hero-intercept{padding-left:22px}
  .hero-first .intercept-window{border-radius:12px 0 0 0}
  .section-head,.industry-heading,.plan-intro,.support-head{margin-bottom:32px}
  .section-head h2:after,.industry-heading h2:after,.plan-intro h2:after,.support-head h2:after,
  .faq-head h2:after,.dashboard-overview h2:after,.contact-copy h2:after{margin-top:20px}
  .feature-story{padding:60px 0 50px}
  .feature-story .story-row{padding-block:40px}
  .feature-story>.feature-head{margin-bottom:38px}
  .coverage-strip{padding:26px 0 6px}
}

/* 近黒の面の上では、行ごとの淡い下地をやめる。
   製品の画面は面の文字色を継がず、白い画面として立たせる。 */
.feature-story .story-row,.feature-story .block-demo,.feature-story .motion-demo{background:none;border-color:transparent}
.feature-story .detail-window,.feature-story .ledger-window,.feature-story .email-envelope,
.feature-story .summary-window,.feature-story .composer-window,.feature-story .check-window{
  background:#fff;color:var(--ink);border-radius:10px}
.feature-story .detail-window *,.feature-story .ledger-window *,.feature-story .email-envelope *,
.feature-story .summary-window *{color:inherit}
.feature-story .detail-window .ui-service,.feature-story .chat-detail-body h3{color:#1d2b22}
.feature-story .demo-badge{color:#4a5a52}
.feature-story .chat-compose p,.feature-story .attachment b{color:#273549}
.feature-story .attachment small,.feature-story .chat-date{color:#73827b}
.feature-story .loguard-toast,.feature-story .loguard-toast p,.feature-story .loguard-toast .toast-close{color:#1a1a1a}
.feature-story .ui-table td,.feature-story .ui-table th{color:#4e6a5d}
.feature-story .ui-person b,.feature-story .ledger-window h3{color:#1d2b22}
.feature-story .story-band{background:none}
/* 概要の一覧は左揃えのまま。中央に置くのは節の見出しだけ */
.explainer-copy{text-align:left}
.explainer-layout{align-items:start}
/* 緑と近黒の面では、見出しの下の罫は白にする */
.support-section h2:after,.contact-copy h2:after,
.feature-story .feature-head h2:after{background:#fff}

@media(max-width:900px){
  /* ロゴは単色なので、緑の面の上では白く抜く */
  .hero-first .hero-actions .button,.hero-first .hero-actions .button-secondary{padding-inline:12px;min-height:52px;font-size:13px}
}
@media(max-width:600px){
  .hero-first .hero-description{font-size:14px;line-height:1.9}
}
@media(max-width:600px){.hero-first .intercept-result{right:12px;bottom:12px}}

/* ── ヒーローを高くし、名乗りを強く出す ─────────────── */
.hero-first>.hero-inner{min-height:min(650px,calc(100svh - 120px));
  grid-template-areas:'copy demo' 'actions demo';
  grid-template-rows:auto 1fr;align-content:start}
.hero-first .hero-mark{display:block;width:176px}
.hero-lockup{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.hero-lockup>span{position:relative;padding-left:19px;font-size:15px;letter-spacing:.1em;
  font-family:var(--font);font-weight:700;color:#fff}
.hero-lockup>span:before{content:'';position:absolute;left:0;top:50%;width:1px;height:20px;
  margin-top:-10px;background:#ffffff66}
.hero-conversion{padding-bottom:0}

@media(max-width:900px){
  .hero-first>.hero-inner{min-height:0;grid-template-areas:'copy' 'demo' 'actions';grid-template-rows:none}
  .hero-first .hero-mark{width:152px}
  .hero-lockup{flex-direction:column;gap:10px;margin-bottom:18px}
  .hero-lockup>span{padding-left:0;font-size:13px}
  .hero-lockup>span:before{display:none}
}


/* ══ 事例と3つの選択肢 ══════════════════════════════════
   事例は白、選択肢は緑の面。どちらもイラストを添える。 */
.ai-choice{background:#fff;padding:0}
.choice-incident{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:48px;align-items:center;padding:96px 0 88px;margin-inline:auto;
  background:none;box-shadow:none;clip-path:none;color:var(--ink);text-align:left;border-radius:0}
.choice-incident h2{color:var(--ink);text-align:left;margin:0;font-size:clamp(25px,2.7vw,38px)}
.choice-incident h2:after{display:none}
.choice-incident .kicker{color:var(--brand);text-align:left;margin-bottom:16px}
.incident-copy>p{color:#53605a;font-size:16px;line-height:1.95;margin:22px 0 0;max-width:34em;text-align:left}
.incident-copy .incident-note{font-size:14px;color:#79847f;margin-top:10px}
.incident-copy .incident-source{font-size:12px;color:#9aa39f;margin-top:18px;
  border-top:1px solid var(--line);padding-top:14px;display:inline-block}
.incident-art{width:100%;height:auto;max-width:560px;justify-self:end}

.choice-band{background:var(--field);color:#fff;padding:88px 0 96px}
.choice-band .choice-statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:start;margin:0 0 56px;padding:0;background:none;text-align:left}
.choice-band .choice-statement h3{color:#fff;font-size:clamp(26px,3vw,42px);line-height:1.5;margin:0;position:relative;padding-top:30px}
.choice-band .choice-statement h3:before{content:'';position:absolute;left:0;top:0;width:40px;height:3px;background:#fff}
.choice-band .choice-statement h3>span{color:#fff}
.choice-band .choice-statement>p{color:#e6f7ec;font-size:16px;line-height:2;margin:30px 0 0}
.choice-band .choice-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border:0}
.choice-band .choice-options article{background:none;border:0;padding:0;text-align:left}
.choice-band .option-tag{display:inline-flex;background:#ffffff26;color:#fff;border-radius:999px;
  padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:.04em;margin:0 0 18px}
.choice-band .option-answer .option-tag{background:#fff;color:var(--brand)}
.choice-band .choice-options img{display:block;width:100%;height:auto;margin-bottom:20px}
.choice-band .choice-options h4{color:#fff;font-size:19px;line-height:1.65;margin:0 0 12px}
.choice-band .option-answer h4{color:#fff}
.choice-band .choice-options p{color:#dcf4e6;font-size:14px;line-height:1.95;margin:0}
/* 選択肢のあいだに進む向きを置く */
.choice-band .choice-options article+article{position:relative}
.choice-band .choice-options article+article:before{content:'';position:absolute;left:-26px;top:50px;
  width:11px;height:11px;border-top:2px solid #ffffff8c;border-right:2px solid #ffffff8c;transform:rotate(45deg)}

@media(max-width:900px){
  .choice-incident{grid-template-columns:1fr;gap:26px;padding:54px 0 48px}
  .incident-art{max-width:none;justify-self:center}
  .choice-band{padding:52px 0 56px}
  .choice-band .choice-statement{grid-template-columns:1fr;gap:16px;margin-bottom:34px}
  .choice-band .choice-statement>p{margin-top:0}
  .choice-band .choice-statement>p br{display:none}
  .choice-band .choice-options{grid-template-columns:1fr;gap:34px}
  .choice-band .choice-options article+article:before{display:none}
}

/* ══ 動画の節 ═══════════════════════════════════════════
   動画を中央に置き、左右に 01/02/03 の手順を振り分ける。 */
.explainer-section{background:var(--mist);padding:104px 0 112px}
.explainer-section .section-head{margin-bottom:56px}
.explainer-section .section-head>p{color:#53605a;font-size:16px;margin-top:22px}
.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr) minmax(0,1fr);
  gap:48px;align-items:center}
.ov-side{display:flex;flex-direction:column;gap:38px}
.ov-step{display:block}
.ov-step .ov-num{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.1em;
  color:var(--brand);margin:0 0 10px}
.ov-step h3{font-size:24px;margin:0 0 12px;letter-spacing:.012em}
.ov-step .ov-text>p{color:#53605a;font-size:15px;line-height:1.95;margin:0}
.ov-step>img{display:block;width:100%;height:auto;margin-top:18px}
/* 右側は文章の横にイラストを置き、2件を罫線で分ける */
.ov-step-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:18px;align-items:center}
.ov-step-row>img{margin-top:0}
.ov-side>.ov-step-row+.ov-step-row{border-top:1px solid #dde5e2;padding-top:38px}
.video-stage{justify-content:center}
#explainer-video{width:100%;max-width:340px;height:auto;border-radius:10px;background:#fff}

@media(max-width:900px){
  .explainer-section{padding:56px 0 60px}
  .explainer-section .section-head{margin-bottom:30px}
  .overview-grid{grid-template-columns:1fr;gap:30px}
  .ov-side{gap:26px}
  .ov-side:first-of-type{order:2}
  .video-stage{order:1}
  .ov-side:last-of-type{order:3}
  /* 01 だけ縦並びで画像が倍の大きさだった。3つとも同じ横並びにする */
  .ov-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:18px;align-items:center}
  .ov-step>img{margin-top:0}
  .ov-side>.ov-step-row+.ov-step-row{padding-top:26px}
}

/* ══ 業務での利用例 ═════════════════════════════════════ */
.industry-section{background:#edf5f1;padding:104px 0 112px}
.industry-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:48px;align-items:center;text-align:left;margin-bottom:48px}
.industry-copy h2{margin:0;text-align:left;position:relative;padding-top:30px;font-size:clamp(27px,3vw,42px)}
.industry-copy h2:after{content:'';position:absolute;left:0;top:0;width:40px;height:3px;background:var(--field);margin:0}
.industry-copy>p{margin:22px 0 0;max-width:36em;color:#53605a;font-size:16px;line-height:1.95;text-align:left}
.industry-lead{position:relative;margin:0}
.industry-lead>img{display:block;width:100%;height:auto}
.lead-bubble{position:absolute;left:0;top:4%;z-index:1;max-width:62%;
  background:#fff;border-radius:16px;padding:16px 20px 18px;box-shadow:0 10px 26px #12331f14}
.lead-bubble:after{content:'';position:absolute;right:30px;bottom:-11px;width:22px;height:22px;
  background:#fff;transform:rotate(45deg);border-radius:0 0 4px 0}
.lead-bubble>p{margin:10px 0 0;font-size:17px;font-weight:700;line-height:1.75;color:var(--ink)}
.lead-bubble mark{background:#fdf0a8;color:inherit;padding:1px 3px;border-radius:3px}

.industry-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  border:0;margin:0}
.industry-cases article{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;
  align-items:center;background:#fff;border:0;border-radius:14px;padding:22px 24px;
  grid-template-rows:none}
.case-art{grid-area:auto;width:100%;height:auto}
.case-body{min-width:0}
.industry-cases .case-tag{display:inline-flex;font-size:14px;font-weight:700;color:var(--brand);margin-bottom:8px;background:none;padding:0}
.industry-cases h3{grid-area:auto;font-size:16px;line-height:1.6;margin:0 0 8px}
.industry-cases p{grid-area:auto;font-size:13px;line-height:1.85;color:#64706b;margin:0}
.industry-note{margin-top:26px;font-size:12px;color:#7d8782}

@media(max-width:1100px){.industry-cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .industry-section{padding:56px 0 60px}
  .industry-heading{grid-template-columns:1fr;gap:24px;margin-bottom:28px}
  .lead-bubble{max-width:70%;padding:13px 15px 14px}
  .lead-bubble>p{font-size:14px}
  .industry-cases{grid-template-columns:1fr;gap:14px}
  .industry-cases article{padding:18px;gap:14px;grid-template-columns:84px minmax(0,1fr)}
  .industry-cases[data-switchable] article{background:#fff;border-radius:14px;padding:18px}
}

/* ══ 導入支援 ═══════════════════════════════════════════ */
.support-section{background:#fff;color:var(--ink);padding:104px 0 112px}
.support-section .support-head{display:block;text-align:left;margin-bottom:56px}
.support-section .support-head h2{color:var(--ink);text-align:left;margin:0;font-size:clamp(26px,2.9vw,40px)}
.support-section .support-head h2:after{display:none}
.support-section .support-head>p{color:#53605a;font-size:16px;margin:20px 0 0;max-width:46em;text-align:left}
.support-section .pill-cta{display:inline-flex;align-items:center;margin-top:26px;
  background:var(--field);color:#fff;border:0;border-radius:999px;padding:15px 30px;font-weight:700;font-size:15px}
.support-section .pill-cta:hover{background:#1ba34b}
.support-section .support-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:0;border:0;list-style:none;padding:0}
.support-section .support-steps li{background:none;border:0;border-left:1px solid var(--line);
  border-radius:0;padding:0 40px;display:block}
.support-section .support-steps li:first-child{border-left:0;padding-left:0}
.support-section .support-steps li:last-child{padding-right:0}
.step-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.step-num{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%;
  border:1px solid var(--field);color:var(--ink);font-family:var(--mono);font-weight:600;font-size:17px}
.support-section .support-steps h3{color:var(--ink);font-size:19px;margin:0}
.support-section .support-steps p{color:#53605a;font-size:15px;line-height:1.95;margin:0}
.support-section .support-steps img{display:block;width:100%;height:auto;margin-top:22px}

/* ══ 料金プラン ═════════════════════════════════════════ */
.consultation-plans{background:var(--field-ink);color:#fff;padding:104px 0 112px}
.consultation-plans .plan-intro{text-align:left;margin-bottom:48px}
.consultation-plans .plan-intro .kicker{color:#4ecb7b}
.consultation-plans .plan-intro h2{color:#fff;text-align:left;margin:0;font-size:clamp(27px,3.1vw,44px)}
.consultation-plans .plan-intro h2:after{display:none}
.consultation-plans .plan-intro>p:not(.kicker){color:#c9c6cb;margin:18px 0 0;text-align:left;font-size:16px}
.consultation-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border:0}
.consultation-plan-grid article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:20px;align-items:center;border:0;border-radius:18px;padding:34px 36px}
.plan-detect{background:#f4f7f5}
.plan-block{background:#e8f6ed}
.consultation-plan-grid h3{color:var(--brand);font-size:25px;margin:0 0 10px}
.consultation-plan-grid .plan-head>p{color:#53605a;font-size:15px;line-height:1.85;margin:0 0 22px}
.consultation-plan-grid ul{border-top:1px solid #d7e2db;padding-top:20px;gap:13px;font-size:15px;color:var(--ink)}
.consultation-plan-grid li:before{width:18px;height:18px;border-radius:50%;background:var(--field);
  position:relative;content:'';flex:none;
  background-image: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:12px 12px;background-position:center;background-repeat:no-repeat}
.consultation-plan-grid article>img{display:block;width:100%;height:auto}
.consultation-plans .plan-quote{display:flex;flex-direction:column;align-items:center;gap:22px;
  border:0;border-top:0;margin-top:48px;padding:0;text-align:center}
.consultation-plans .plan-quote p{color:#a9a4ab;font-size:14px;margin:0}
.consultation-plans .plan-quote-cta{background:var(--field);color:#fff}
.consultation-plans .plan-quote-cta:hover{background:#1ba34b}

@media(max-width:900px){
  .support-section{padding:56px 0 60px}
  .support-section .support-head{margin-bottom:30px}
  .support-section .support-steps{grid-template-columns:1fr;gap:34px}
  .support-section .support-steps li{border-left:0;padding:0}
  .step-num{width:46px;height:46px;font-size:15px}
  .support-section .support-steps img{max-width:360px}
  .consultation-plans{padding:56px 0 60px}
  .consultation-plans .plan-intro{margin-bottom:26px}
  .consultation-plan-grid{grid-template-columns:1fr;gap:16px}
  .consultation-plan-grid article{grid-template-columns:1fr;padding:24px 22px;gap:14px}
  .consultation-plans .plan-quote{margin-top:30px}
}
/* カードの面と文字色。前の層の .consultation-plan-grid article より強く指定する */
.consultation-plan-grid .plan-detect{background:#f4f7f5;color:var(--ink)}
.consultation-plan-grid .plan-block{background:#e8f6ed;color:var(--ink)}
.consultation-plan-grid .plan-detect li,.consultation-plan-grid .plan-block li{color:var(--ink)}
.consultation-plan-grid .plan-detect .plan-head>p,.consultation-plan-grid .plan-block .plan-head>p{color:#53605a}

/* ══ 読ませたいものを大きく ═════════════════════════════
   サービス名、事例の本文、各節の補足。小さく薄い字をやめる。 */
.consultation-plan-grid article{padding:34px 36px}

/* 名乗り。AIセキュリティサービスであることを最初に読ませる */
.hero-lockup{display:block;margin-bottom:34px}
.hero-first .hero-mark{width:200px;margin-bottom:18px}
.hero-lockup>span{display:inline-flex;align-items:center;padding:10px 22px;border-radius:999px;
  background:#fff;color:var(--brand);font-family:var(--font);font-weight:700;
  font-size:clamp(16px,1.4vw,20px);letter-spacing:.02em}
.hero-lockup>span:before{display:none}

.incident-copy>p{font-size:clamp(17px,1.5vw,21px);line-height:1.9;color:#3c4a44;max-width:28em;margin-top:26px}

/* 補足説明。各節とも一段大きく、濃くする */
.choice-band .choice-statement>p{font-size:clamp(17px,1.4vw,19px);line-height:1.95;color:#fff}
.choice-band .choice-options p{font-size:16px;line-height:1.95;color:#eafaf0}
.choice-band .choice-options h4{font-size:21px}
.industry-copy>p{font-size:17px;color:#45534d}
.industry-cases p{font-size:14px;color:#55615c}
.explainer-section .section-head>p{font-size:17px;color:#45534d}
.ov-step .ov-text>p{font-size:16px;color:#45534d}
.support-section .support-head>p{font-size:17px;color:#45534d}
.support-section .support-steps p{font-size:16px;color:#45534d}
.consultation-plans .plan-intro>p:not(.kicker){font-size:17px;color:#ddd9df}
.consultation-plan-grid .plan-detect .plan-head>p,
.consultation-plan-grid .plan-block .plan-head>p{font-size:16px;color:#45534d}
.consultation-plans .plan-quote p{font-size:16px;color:#c4c0c7}
.hero-first .hero-description{font-size:clamp(16px,1.3vw,18px);color:#f0fbf4}
.dashboard-description,.section-head>p:not(.kicker){color:#45534d}

@media(max-width:900px){
  .hero-lockup{margin-bottom:20px}
  .hero-first .hero-mark{width:168px;margin-bottom:14px}
  .hero-lockup>span{font-size:15px;padding:8px 18px}
  .incident-copy>p{font-size:17px;margin-top:20px}
}

/* ══ FEATURES: 左に説明、右に重なるカード ═══════════════
   コーポレートの OUR*PROJECT と同じ組み。純CSSの sticky で、
   間隔はスペーサー（.gap）に持たせる。sticky は margin box で
   拘束されるため、カードに margin を置くと最後の1枚が止まらない。 */
.feature-story{--header-h:80px;--head-h:97px;--head-top:calc(var(--header-h) + 20px);
  --deck-top:calc(var(--head-top) + var(--head-h) + 28px);
  --card-h:min(600px,calc(100svh - var(--deck-top) - 28px));
  /* デッキに下余白を持たせると、その分だけ見出しの解放が遅れる。0 にしてある。 */
  --lag:calc(var(--deck-top) + var(--card-h) - var(--head-top) - var(--head-h));
  background:var(--field-ink);color:#fff;padding:96px 0 0}
.feature-story .stack-head{position:sticky;top:var(--head-top);z-index:3;
  padding-bottom:var(--lag);pointer-events:none;margin-bottom:0;text-align:center}
.feature-story .stack-head>*{pointer-events:auto}
.feature-story .stack-head .kicker{color:#fff}
.feature-story .stack-head h2{color:#fff;margin:0 auto}
/* 相殺は自分の負 margin ではなく、次の要素の margin-top に置く */
.feat-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;
  align-items:start;margin-top:calc(28px - var(--lag))}
.feat-list{position:sticky;top:var(--deck-top);display:flex;flex-direction:column;gap:0}
.feat-item{display:block;padding:24px 0;color:inherit}
.feat-item:first-child{padding-top:0}
.feat-n{display:block;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;
  color:#8b868f;transition:color .3s}
.feat-title{display:block;font-size:22px;font-weight:700;line-height:1.55;letter-spacing:.012em;
  color:#6f6a73;margin:10px 0 0;transition:color .3s}
.feat-note{display:block;font-size:15px;line-height:1.9;color:#6f6a73;margin:10px 0 0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s,margin .3s}
/* 罫線は引かない。いまの項目を指す緑のバーだけ */
.feat-bar{display:block;height:2px;background:transparent;margin-top:18px;overflow:hidden}
.feat-bar>i{display:block;height:100%;background:var(--field);transform:scaleX(0);
  transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.feat-item.is-on .feat-n{color:#4ecb7b}
.feat-item.is-on .feat-title{color:#fff}
.feat-item.is-on .feat-note{max-height:8em;opacity:1;margin-top:12px;color:#c9c6cb}
.feat-item.is-on .feat-bar>i{transform:scaleX(1)}

.deck{width:auto;margin:0;padding-bottom:0;min-width:0}
.deck>.gap{display:block;height:34vh}
.deck>article{position:sticky;height:var(--card-h);margin:0;padding:0;
  background:#fff;border-radius:18px;overflow:hidden;display:block;
  opacity:0;transform:translateY(30px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.deck>article:nth-of-type(1){top:var(--deck-top);z-index:1}
.deck>article:nth-of-type(2){top:calc(var(--deck-top) + 14px);z-index:2}
.deck>article:nth-of-type(3){top:calc(var(--deck-top) + 28px);z-index:3}
.deck>article.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.deck>article{opacity:1;transform:none;transition:none}}
/* 製品の画面はカードの下端で切る */
.deck .motion-demo{height:100%;overflow:hidden;margin:0;padding:34px 0 0 34px;
  background:#f3f6f4;border-radius:0}
.deck .motion-demo figcaption{display:none}
.deck .motion-demo>*{color:var(--ink)}

@media(max-width:900px){
  /* 狭い画面では重ねをやめ、説明と画面を交互に積む */
  .feature-story{padding:56px 0 50px}
  .feature-story .stack-head{position:static;padding-bottom:0;margin-bottom:30px}
  .feat-grid{grid-template-columns:1fr;gap:26px;margin-top:0}
  .feat-list{position:static}
  .feat-item{padding:20px 0}
  .feat-note{max-height:none;opacity:1;margin-top:10px;color:#c9c6cb}
  .feat-title{color:#fff}
  .feat-n{color:#4ecb7b}
  /* 重ねをやめた画面では現在地が無いので、緑の線は区切りとして全部に出す */
  .feat-bar{margin-top:14px}
  .feat-bar>i{transform:scaleX(1)}
  .deck>.gap{height:0}
  .deck>article{position:static;height:auto;border-radius:14px;margin-bottom:16px;
    opacity:1;transform:none}
  .deck .motion-demo{height:auto;padding:14px 0 0 14px}
}
/* 面の白文字指定より強くしないと、白地のピルで字が消える */
.hero-first .hero-lockup>span{color:var(--brand)}

/* ══ 狭い画面の縦を詰める ═══════════════════════════════
   イラストは幅いっぱいに置くと1枚で画面の4割を使う。横幅で止めて
   中央に置き、各節の上下も落とす。節の中の既存指定より強くする。 */
@media(max-width:900px){
  .incident-art,
  .choice-band .choice-options img,
  .industry-heading .industry-lead>img,
  .support-section .support-steps img,
  .consultation-plan-grid img{width:100%;max-width:210px;margin-inline:auto}
  .choice-incident{padding:44px 0 36px;gap:16px}
  .choice-band{padding:44px 0 46px}
  .choice-band .choice-statement{margin-bottom:26px}
  .choice-band .choice-options{gap:24px}
  .choice-band .choice-options img{margin-bottom:12px}
  .choice-band .choice-options h4{font-size:19px}
  .industry-section{padding:44px 0 46px}
  .industry-heading{gap:18px}
  .support-section{padding:44px 0 46px}
  .support-section .support-steps{gap:26px;margin-top:30px}
  .support-section .support-steps img{margin-top:12px}
  .consultation-plans{padding:44px 0 46px}
  .consultation-plan-grid article{padding:24px 22px}
  .explainer-section{padding:44px 0 46px}
  .coverage-strip{padding:24px 0 6px}
  /* 重ねをやめた FEATURES は、説明と製品の画面が3組ぶん縦に並ぶ */
  .feature-story{padding:44px 0 42px}
  .feat-item{padding:16px 0}
  .deck>article{margin-bottom:12px}
  .deck .motion-demo{padding:12px 0 0 12px}
}
@media(max-width:600px){
  .incident-art,
  .choice-band .choice-options img,
  .industry-heading .industry-lead>img,
  .support-section .support-steps img,
  .consultation-plan-grid img{max-width:184px}
}
@media(max-width:700px){
  /* 仕組みの図は 900px 幅のまま zoom で縮めていた。電話では 0.38 倍になり
     読めないので、横並びをやめて縦に積む。 */
  .workflow .workflow-figure{grid-template-columns:1fr;width:auto;max-width:420px;
    margin-inline:auto;gap:20px;zoom:1}
  .workflow .flow-connector{display:none}
  .workflow .flow-title{font-size:19px;margin-bottom:14px}
  .workflow .flow-title>span{font-size:21px}
  .workflow .flow-panel>.composer-window,
  .workflow .flow-panel>.check-window,
  .workflow .flow-panel>.summary-window{min-height:0}
}

/* ══ 狭い画面でも管理画面の図は PC と同じ組みで ═══════════
   折り返すと表が横スクロールになり、実物と違う画面に見える。
   PC の組みのまま幅に合わせて縮める。メディアクエリはビューポートを
   見るので、縮小した中では PC 側の指定に戻してやる必要がある。 */
@media(max-width:900px){
  .dashboard-overview .hero-figure{container-type:inline-size}
  .dashboard-overview .dashboard-window{width:1000px;zoom:calc(100cqw / 1000px)}
  .dashboard-overview .dashboard-body{display:grid;grid-template-columns:216px minmax(0,1fr)}
  .dashboard-overview .dashboard-content{padding:0 0 22px}
  .dashboard-overview .ui-sample{display:inline-block}
  .dashboard-overview .ui-avatar{display:inline-flex;width:26px;height:26px;font-size:11px}
  .dashboard-overview .dashboard-sidebar{display:block}
  .dashboard-overview .ui-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:18px 22px 0}
  .dashboard-overview .ui-kicker{margin:22px 22px 6px;font-size:10px}
  .dashboard-overview .dashboard-content>h3{margin:0 22px;font-size:24px}
  .dashboard-overview .ui-lede{margin:6px 22px 0;font-size:13px}
  .dashboard-overview .recent-events{margin:18px 22px 0}
  .dashboard-overview .dashboard-toolbar{padding:14px 22px}
  .dashboard-overview .ui-metric strong{font-size:28px}
  .dashboard-overview .ui-table{min-width:0}
  .dashboard-overview .ui-table th{font-size:11px}
  .dashboard-overview .ui-person small,.dashboard-overview .ui-metric>small,
  .dashboard-overview .ui-footnote,.dashboard-overview .ui-sample{font-size:10px}
  .dashboard-overview .ui-table-scroll{-webkit-mask-image:none;mask-image:none}
}

/* 事例は、読む前に絵が目に入るほうが早い */
@media(max-width:900px){
  .choice-incident{display:flex;flex-direction:column;align-items:center}
  .incident-art{order:-1;max-width:170px;margin:0 auto 6px}
  .incident-copy{width:100%}
}
@media(max-width:600px){.incident-art{max-width:148px}}

/* 選択肢は タイトル → イラスト → 説明 の順で読ませる */
.choice-band .choice-options article{display:flex;flex-direction:column}
.choice-band .option-tag{order:1}
.choice-band .choice-options h4{order:2}
.choice-band .choice-options img{order:3;margin-block:0 18px}
.choice-band .choice-options p{order:4}