/* ==========================================================
   FlickBox — theme.css（ChatGPTサイト準拠のモノクロテーマ）

   style.css の後に読み込む上書き層。
   /check/ と /ops/ は読み込まない（送信済みの診断ページの見た目を
   変えないため）。コーポレート各ページとブログだけが読む。
   旧テーマ（白基調・紺）は flickbox-site-private/backups/css/ に退避済み。
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");


:root{
  --navy:#0d0d0d;
  --navy-deep:#000;
  --sky:#0d0d0d;
  --sky-light:#f3f3f3;
  --sky-pale:#f7f7f7;
  --ink:#0d0d0d;
  --sub:#5d5d5d;
  --line:rgba(0,0,0,.1);
  --white:#fff;

  --font: "Inter Tight","Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --radius:16px;
  --radius-sm:6px;

  --section-pad: 112px;
  --container-w: 1120px;
}

body{
  background:#fcfcfc;
  color:var(--ink);
  font-size:16px;
  line-height:1.8;
  font-feature-settings:"palt";
}

section + section{ border-top:none; }

/* ---------- 見出し：中央揃え・字間を詰めた太字 ---------- */
.section-head{
  text-align:center;
  margin:0 auto 56px;
  max-width:760px;
}
.section-tag{
  background:none;
  color:var(--sub);
  padding:0;
  border-radius:0;
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  margin-bottom:12px;
}
.section-title{
  font-size:clamp(28px,3.6vw,42px);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.03em;
  line-height:1.3;
  text-wrap:balance;
}
.section-lead{
  margin:18px auto 0;
  max-width:640px;
  color:var(--sub);
  font-size:16px;
  line-height:1.85;
}

/* ---------- ボタン：黒のピル型 ---------- */
.btn{
  border-radius:999px;
  font-weight:500;
  font-size:14.5px;
  letter-spacing:0;
  padding:12px 22px;
  box-shadow:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:none !important; }
.btn-primary{ background:#0d0d0d; color:#fff; box-shadow:none; border:1px solid transparent; }
.btn-primary:hover{ background:#2f2f2f; box-shadow:none; }
.btn-outline{ background:#fff; color:#0d0d0d; border:1px solid rgba(0,0,0,.15); }
.btn-outline:hover{ background:#f3f3f3; color:#0d0d0d; }
.btn-outline-sky{ border:1px solid rgba(255,255,255,.35); }
.btn-sm{ padding:8px 16px; font-size:14px; }
.contact-cta-row .btn{ padding:14px 28px; font-size:15px; }

/* ---------- ヘッダー ---------- */
.site-header,
.site-header.is-scrolled{
  background:rgba(252,252,252,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  box-shadow:none;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.brand-name{ color:#0d0d0d; letter-spacing:-.01em; }
.brand-name span{ color:#0d0d0d; }
.main-nav{ gap:26px; }
.main-nav a{ font-weight:400; font-size:14px; color:#5d5d5d; }
.main-nav a:hover,
.main-nav a.is-active{ color:#0d0d0d; }
.main-nav a::after{ display:none; }
.header-cta .btn{ padding:8px 16px; font-size:14px; }
@media(min-width:901px) and (max-width:1080px){
  .main-nav{ gap:14px; }
  .main-nav a{ white-space:nowrap; }
  .header-cta .btn{ padding:8px 12px; font-size:13px; }
}
.nav-toggle span{ background:#0d0d0d; }

/* ---------- カード：薄い罫線と角丸、影なし ---------- */
.result-card,
.case-card,
.service-card,
.product-card,
.reason-card,
.worry-item,
.blog-card,
.pricing-card,
.contact-info-card,
.company-highlight,
.scene-card,
.ystream-card,
.ystream-flow-card,
.standalone-box,
.course-card,
.stat-item,
.mockup-window{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
}
.blog-card:hover,
.service-card:hover,
.product-card:hover{
  transform:none;
  box-shadow:none !important;
  background:#f7f7f7 !important;
}
.service-icon,
.product-card-icon{ background:#f3f3f3; border-radius:12px; }
.service-icon svg [stroke],
.product-card-icon svg [stroke]{ stroke:#0d0d0d; }
.service-icon svg [fill="#2e90d1"],
.product-card-icon svg [fill="#2e90d1"]{ fill:#0d0d0d; }
.service-title,
.product-card-title,
.blog-card-title{ color:#0d0d0d; font-weight:600; letter-spacing:-.01em; }
.product-badge{ background:#f3f3f3; color:#0d0d0d; font-weight:500; }

/* 濃色の帯（ystream）はChatGPTの黒い面に揃える */
.ystream-section{ background:#0d0d0d; }
.ystream-section .section-title{ color:#fff; }
.ystream-section .section-tag{ background:none; color:rgba(255,255,255,.6); }
.ystream-section .section-lead{ color:rgba(255,255,255,.7); }
.ystream-section .ystream-card,
.ystream-section .ystream-flow-card{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* 下層ページの見出し：中央揃えの大見出し */
.page-header{
  background:#fcfcfc;
  border-bottom:none;
  text-align:center;
  padding:calc(var(--header-h) + 88px) 0 72px;
}
.page-header .breadcrumb{ justify-content:center; }
.page-header .section-tag{ background:none; color:var(--sub); padding:0; font-weight:500; font-size:14px; }
.page-header-title{
  text-align:center;
  color:#0d0d0d;
  font-size:clamp(34px,5.2vw,60px);
  letter-spacing:-.04em;
  line-height:1.2;
  text-wrap:balance;
}
.page-header-lead{
  margin-left:auto; margin-right:auto;
  text-align:center;
  max-width:640px;
  font-size:16.5px;
}

/* ---------- 実績の数字 ---------- */
.result-card{ padding:32px 28px 28px; }
.result-title{ color:#0d0d0d; font-weight:600; }
.result-number,
.result-number.accent,
.stat-number{ color:#0d0d0d; letter-spacing:-.03em; font-weight:600; }
.result-foot{ border-top:1px solid var(--line); }
.stat-item{ text-align:left; padding:24px 22px 20px; }
.stat-number{ font-size:30px; }
.case-head{ background:#0d0d0d; }
.case-head .case-numbers .num.accent{ color:#fff; }
.reason-num,
.service-block-num{ color:var(--sub); }

/* 実績・会社概要へのリンク帯：グレーの面 */
.service-link-card{
  background:#f3f3f3;
  border:none;
  border-radius:var(--radius);
  padding:24px 28px;
}
.service-link-card-text strong{ color:#0d0d0d; font-weight:600; }

/* ---------- お問い合わせ帯：黒い面に大見出し ---------- */
.contact-section{
  background:#fcfcfc;
  padding:48px 0 var(--section-pad);
}
.contact-section > .container{
  background:#f3f3f3;
  border-radius:24px;
  padding:88px 40px;
  max-width:calc(var(--container-w) - 48px);
}
.contact-section .section-tag{ margin-bottom:14px; }
.contact-title{
  color:#0d0d0d;
  font-size:clamp(28px,4vw,46px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.3;
}
.contact-title{ text-wrap:balance; }
.contact-lead{ max-width:600px; }
.contact-lead br{ display:none; }
@media(min-width:721px){ .contact-lead br.pc-only{ display:inline; } }

/* ---------- フッター：白地に灰色の文字 ---------- */
.site-footer{
  background:#fcfcfc;
  color:#5d5d5d;
  border-top:1px solid var(--line);
}
.footer-top{ border-bottom-color:var(--line); }
.site-footer .brand-name,
.site-footer .brand-name span{ color:#0d0d0d; }
.site-footer .brand-mark rect{ stroke:#0d0d0d; }
.footer-nav a{ color:#5d5d5d; }
.footer-nav a:hover{ color:#0d0d0d; }
.footer-bottom{ color:#8f8f8f; }
.footer-bottom a:hover{ color:#0d0d0d; }

/* ==========================================================
   トップページ専用
   ========================================================== */

/* ---------- 名乗りのブロック（ChatGPTのヒーローに合わせて中央の大見出し） ---------- */
.lede{
  padding:128px 0 96px;
  text-align:center;
}
.lede-inner{ max-width:900px; margin:0 auto; }
.lede-corp{
  font-size:14px;
  color:var(--sub);
  margin-bottom:22px;
}
.lede-title{
  font-size:clamp(28px,3.5vw,44px);
  font-weight:700;
  line-height:1.3;
  color:#0d0d0d;
  letter-spacing:-.045em;
  max-width:1060px;
  margin:0 auto;
}
/* 文節の途中で折り返さない（折り返しは文節の境目だけ） */
.lede-title .nw{ display:inline-block; }
/* ChatGPTのヒーローの虹色の下線 */
.lede-title .u{
  background:linear-gradient(90deg,#3b82f6,#8b5cf6 30%,#ec4899 55%,#f97316 80%,#eab308) no-repeat left bottom / 100% 3px;
  padding-bottom:4px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.lede-body{
  margin:28px auto 0;
  font-size:16.5px;
  line-height:1.9;
  color:var(--sub);
  max-width:640px;
}
.lede-body + .lede-body{ margin-top:12px; }
.lede-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:36px;
}
.lede-cta .btn-outline{ border-color:transparent; background:transparent; }
.lede-cta .btn-outline:hover{ background:#f3f3f3; }
.lede-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  max-width:900px;
  margin:64px auto 0;
  font-size:13px;
  color:var(--sub);
  text-align:left;
}
.lede-facts div{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:#f3f3f3;
  border-radius:var(--radius);
  padding:18px 20px;
}
.lede-facts b{
  color:#0d0d0d;
  font-weight:600;
  font-size:18px;
  letter-spacing:-.02em;
  line-height:1.35;
}

/* ---------- 制作物ギャラリー ---------- */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 20px;
  align-items:start;
}
.pf-item{ display:block; }
/* ロゴを落とすためのトリミングで縦横比がまちまちなので、
   タイルの高さを固定せず、画像の比率のまま並べる（切れも余白も出ない）。 */
.pf-shot{
  background:#f3f3f3;
  border-radius:var(--radius);
  overflow:hidden;
}
.pf-shot img{
  width:100%;
  height:auto;
  display:block;
}
.pf-cap{
  margin-top:12px;
  font-size:13px;
  line-height:1.65;
  color:var(--sub);
}
.pf-cap b{
  display:block;
  color:#0d0d0d;
  font-weight:500;
  font-size:14.5px;
}
.pf-note{
  margin:36px auto 0;
  max-width:760px;
  text-align:center;
  font-size:13.5px;
  color:var(--sub);
  line-height:1.9;
}

/* ---------- 2本立て（強み・原因） ---------- */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.two-col > div{
  background:#f3f3f3;
  border-radius:var(--radius);
  padding:40px 36px;
}
.two-col h3{
  font-size:21px;
  font-weight:600;
  color:#0d0d0d;
  letter-spacing:-.02em;
  line-height:1.5;
  margin-bottom:16px;
}
.two-col p{
  font-size:15px;
  line-height:1.95;
  color:#3d3d3d;
}
.two-col p + p{ margin-top:12px; }
.two-col .kicker{
  font-size:13px;
  color:var(--sub);
  margin-bottom:14px;
}

/* ---------- 会社の事実 ---------- */
.facts-table{
  width:100%;
  max-width:880px;
  margin:0 auto;
  border-top:1px solid var(--line);
  font-size:15px;
}
.facts-table th,
.facts-table td{
  border-bottom:1px solid var(--line);
  padding:18px 4px;
  text-align:left;
  vertical-align:top;
  line-height:1.85;
}
.facts-table th{
  width:180px;
  font-weight:500;
  color:var(--sub);
  font-size:14px;
}

/* ---------- トップのインライン部品（index.html内のstyleを上書き） ---------- */
.course-form{ background:#f3f3f3 !important; border-radius:12px !important; }
.course-form input[type=text],
.course-form input[type=email]{ border-radius:10px !important; border:1px solid rgba(0,0,0,.15) !important; }
.course-form input:focus{ outline:2px solid #0d0d0d !important; }
.mat-tag,
.rc-n{ background:#f3f3f3 !important; color:#0d0d0d !important; border-radius:999px !important; font-weight:500 !important; }
.course-step .n{ background:#0d0d0d !important; color:#fff !important; }
.guide-dl-card{ background:#0d0d0d !important; border-radius:var(--radius) !important; }
.blog-card-date{ color:#8f8f8f; }
.blog-teaser-more{ text-align:center; }

@media(max-width:900px){
  .pf-grid{ grid-template-columns:repeat(2,1fr); }
  .lede-facts{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  :root{ --section-pad:72px; }
  .section-head{ margin-bottom:36px; }
  .section-lead,
  .lede-body,
  .pf-note,
  .contact-lead{ text-align:left; }
  .lede{ padding:112px 0 56px; }
  .lede-title{ font-size:28px; line-height:1.35; }
  .lede-title .nw{ display:inline; }
  .lede-body{ font-size:15px; line-height:1.9; }
  .lede-cta .btn{ width:100%; }
  .lede-facts{ margin-top:40px; gap:8px; }
  .lede-facts div{ padding:14px 16px; }
  .lede-facts b{ font-size:16px; }
  .pf-grid{ grid-template-columns:repeat(2,1fr); gap:20px 12px; }
  .two-col{ grid-template-columns:1fr; gap:12px; }
  .two-col > div{ padding:28px 22px; }
  .facts-table th{ width:110px; }
  .contact-section{ padding:24px 0 64px; }
  .contact-section > .container{ border-radius:20px; padding:56px 22px; margin:0 16px; width:auto; }
  .page-header{ padding:calc(var(--header-h) + 48px) 0 48px; }
}

/* ==========================================================
   トップページの演出（2026-09-19 第2版）
   ========================================================== */

/* 英数字は Inter Tight、和文は Zen Kaku Gothic New。数字だけ詰めて大きく見せる */
.lede-facts b,
.result-number,
.stat-number,
.two-col .kicker,
.course-step .n{
  font-family:"Inter Tight","Zen Kaku Gothic New",sans-serif;
  font-variant-numeric:tabular-nums;
}

/* ヒーロー背景：上からかかる淡い色のにじみ */
.lede{ position:relative; overflow:hidden; padding-bottom:88px; }
.lede::before{
  content:"";
  position:absolute;
  inset:-240px -10% auto;
  height:760px;
  background:
    radial-gradient(420px 300px at 22% 40%, rgba(147,197,253,.38), transparent 70%),
    radial-gradient(420px 300px at 50% 22%, rgba(196,181,253,.32), transparent 70%),
    radial-gradient(420px 300px at 78% 42%, rgba(253,186,116,.28), transparent 70%);
  filter:blur(24px);
  pointer-events:none;
  z-index:0;
}
.lede > .container{ position:relative; z-index:1; }

/* 数字のタイル：白い面で並べる */
.lede-facts{ margin-top:56px; }
.lede-facts div{
  background:rgba(255,255,255,.8);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.lede-facts b{ font-size:18px; white-space:nowrap; font-weight:600; letter-spacing:-.03em; }

/* 実績：黒い帯に白い大きな数字 */
section.is-dark{ background:#0d0d0d; color:#fff; }
.is-dark .section-title{ color:#fff; }
.is-dark .section-tag,
.is-dark .section-lead,
.is-dark .results-note{ color:rgba(255,255,255,.6); }
.is-dark .result-card,
.is-dark .stat-item{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.12) !important;
}
.is-dark .result-label,
.is-dark .result-unit,
.is-dark .result-arrow,
.is-dark .stat-desc{ color:rgba(255,255,255,.6); }
.is-dark .result-title{ color:#fff; }
.is-dark .result-number,
.is-dark .stat-number{ color:#fff; }
.is-dark .result-number{ font-size:44px; font-weight:600; letter-spacing:-.04em; }
.is-dark .result-number-row{ flex-wrap:nowrap; white-space:nowrap; }
.is-dark .result-number.accent{
  background:linear-gradient(90deg,#93c5fd,#c4b5fd 45%,#fdba74);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.is-dark .result-foot{ color:rgba(255,255,255,.6); border-top-color:rgba(255,255,255,.12); }
.is-dark .service-link-card{ background:rgba(255,255,255,.08); }
.is-dark .service-link-card-text{ color:rgba(255,255,255,.7); }
.is-dark .service-link-card-text strong{ color:#fff; }
.is-dark .btn-outline{ background:#fff; border-color:#fff; }

/* 2本立ての番号を大きな数字に */
.two-col .kicker{
  font-size:44px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.04em;
  color:#c4c4c4;
  margin-bottom:22px;
}

/* サービスのカード：右上に矢印、ホバーで動く */
.service-card{ position:relative; height:100%; }
.service-card-link{ height:100%; }
.service-card::after{
  content:"↗";
  position:absolute;
  top:26px;
  right:24px;
  font-size:18px;
  color:#b0b0b0;
  transition:transform .2s ease, color .2s ease;
}
.service-card-link:hover .service-card::after{ color:#0d0d0d; transform:translate(2px,-2px); }

/* 制作物：ホバーで少し持ち上げる */
.pf-shot{ transition:transform .3s ease, box-shadow .3s ease; }
.pf-item:hover .pf-shot{ transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(0,0,0,.3); }

/* お問い合わせ：グレーの面にヒーローと同じにじみを入れる */
.contact-section > .container{ position:relative; overflow:hidden; }
.contact-section > .container::before{
  content:"";
  position:absolute;
  inset:auto -10% -260px;
  height:520px;
  background:
    radial-gradient(360px 240px at 30% 50%, rgba(147,197,253,.4), transparent 70%),
    radial-gradient(360px 240px at 70% 50%, rgba(253,186,116,.34), transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}
.contact-section > .container > *{ position:relative; }

@media(max-width:900px){
}
@media(max-width:768px){
  .lede-facts b{ font-size:16px; }
  .is-dark .result-number{ font-size:40px; }
  .two-col .kicker{ font-size:36px; }
}
@media(prefers-reduced-motion:reduce){
  .pf-shot{ transition:none; }
}

/* ==========================================================
   トップページ（2026-09-19 第3版）
   ========================================================== */

/* 見出し：左に見出し、右に説明文。説明文のない見出しは左揃えで全幅 */
.home .section-head{
  text-align:left;
  max-width:none;
  margin:0 0 56px;
}
.home .section-head:has(.section-lead){
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:56px;
  align-items:end;
}
.home .section-head:has(.section-lead) .section-tag{ grid-column:1; grid-row:1; }
.home .section-head:has(.section-lead) .section-title{ grid-column:1; grid-row:2; }
.home .section-head:has(.section-lead) .section-lead{
  grid-column:2; grid-row:1 / span 2;
  align-self:end;
  margin:0;
  max-width:none;
  font-size:15px;
}
.home .section-tag{ display:inline-block; }
.home .section-title{
  font-size:clamp(26px,3vw,38px);
  text-wrap:wrap;
  word-break:auto-phrase;
}
.home .blog-teaser-more{ text-align:left; }
.home .section-lead br{ display:none; }
.home .facts-table{ max-width:none; margin:0; }

/* セクションの背景を交互にする */
.home section.alt{ background:#f3f3f3; }
.home section.alt .two-col > div,
.home section.alt .service-card{ background:#fff !important; }
.home section.alt .service-link-card{ background:#fff; }
.home section.alt .service-card:hover{ background:#fafafa !important; }
.home #strength{ padding-top:32px; }

/* 制作物：同じ高さのカードを一列に並べて、ゆっくり横に流す */
.home #works{ padding-top:24px; }
.pf-marquee{
  overflow:hidden;
  padding:4px 0 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.pf-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:pf-scroll 60s linear infinite;
}
.pf-marquee:hover .pf-track{ animation-play-state:paused; }
@keyframes pf-scroll{ to{ transform:translateX(calc(-50% - 10px)); } }
.pf-track .pf-item{ flex:none; }
.pf-track .pf-shot{ height:380px; }
.pf-track .pf-shot img{ height:100%; width:auto; }
.pf-track .pf-cap{ text-align:left; }
.home .pf-note{ text-align:left; margin:28px 0 0; max-width:760px; }

@media(max-width:900px){
  .home .section-head:has(.section-lead){ display:block; }
  .home .section-head:has(.section-lead) .section-lead{ margin-top:16px; }
}
@media(max-width:768px){
  .pf-track{ gap:12px; animation-duration:45s; }
  @keyframes pf-scroll{ to{ transform:translateX(calc(-50% - 6px)); } }
  .pf-track .pf-shot{ height:260px; }
  .home .section-head{ margin-bottom:32px; }
}
@media(prefers-reduced-motion:reduce){
  .pf-marquee{ overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none; }
  .pf-marquee::-webkit-scrollbar{ display:none; }
  .pf-track{ padding:0 24px; }
  .pf-track .pf-item{ scroll-snap-align:start; }
  .pf-track{ animation:none; }
  .pf-track .pf-item[aria-hidden]{ display:none; }
}

/* ==========================================================
   実績ページ：イベント・番組・サロンの実績一覧
   ========================================================== */
.past-groups{ border-top:1px solid var(--line); }
.past-group{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:40px;
  padding:36px 0;
  border-bottom:1px solid var(--line);
}
.past-group-head h3{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.5;
  color:#0d0d0d;
}
.past-group-head span{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--sub);
}
.past-list li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-size:15px;
  line-height:1.6;
}
.past-list li:first-child{ padding-top:0; }
.past-list li:last-child{ border-bottom:none; padding-bottom:0; }
.past-name{ color:#0d0d0d; }
.past-year{
  flex:none;
  font-family:"Inter Tight",sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:13.5px;
  color:#8f8f8f;
}
@media(max-width:768px){
  .past-group{ grid-template-columns:1fr; gap:16px; padding:28px 0; }
  .past-list li{ font-size:14px; gap:16px; }
}
/* トップの補足：1文が1行に収まる幅のときだけ文の切れ目で改行する */
.br-wide{ display:none; }
@media(min-width:1100px){ .br-wide{ display:inline; } }

/* ---------- トップ：よくある運用代行との違い ---------- */
.df-compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.df-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 28px 24px; }
.df-card.is-ours{ border:1.5px solid #0d0d0d; }
.df-name{ font-size:17px; font-weight:700; color:#6b6b6b; padding-bottom:12px; border-bottom:2px solid #e6e6e6; margin-bottom:24px; }
.is-ours .df-name{ color:#0d0d0d; border-bottom-color:#0d0d0d; }
.df-funnel,.df-labels{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.df-funnel{ height:200px; align-items:end; }
.df-step{ height:100%; display:flex; align-items:flex-end; grid-row:1; }
.df-step:nth-child(1){ grid-column:1; }
.df-step:nth-child(2){ grid-column:2; }
.df-step:nth-child(3){ grid-column:3; }
.df-step:nth-child(4){ grid-column:4; }
.df-fixnote{ grid-row:1; grid-column:2 / 4; align-self:end; height:49%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.df-fixnote span{ background:#fff; color:#0d0d0d; font-size:13px; font-weight:700; line-height:1.4; padding:5px 12px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.df-bar{ width:100%; border-radius:6px; background:#8f8f8f; display:flex; align-items:center; justify-content:center; text-align:center; }
.df-bar span{ font-size:12.5px; font-weight:700; line-height:1.4; color:#fff; }
.df-step.is-off .df-bar{ background:none; border:1.5px dashed #cfcfcf; }
.df-step.is-off .df-bar span{ color:#8a8a8a; font-weight:500; }
.is-ours .df-bar{ background:#0d0d0d; }
.is-ours .df-step.is-fix .df-bar{ background:linear-gradient(160deg,#8b5cf6,#ec4899 60%,#f97316); }
.df-labels{ margin-top:12px; text-align:center; font-size:11.5px; line-height:1.5; color:var(--sub); }
.df-labels b{ display:block; font-size:13px; color:#0d0d0d; }
.df-labels .is-off b,.df-labels .is-off{ color:#8a8a8a; }
.df-monthly{ margin-top:22px; padding:12px 16px; border-radius:10px; background:#f3f3f3; text-align:center; font-size:14px; font-weight:700; line-height:1.6; color:#6b6b6b; }
.is-ours .df-monthly{ color:#0d0d0d; background:#f3f3f3; box-shadow:inset 0 0 0 1.5px #0d0d0d; }

.df-case{ margin-top:32px; display:grid; grid-template-columns:5fr 6fr; gap:40px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 40px; }
.df-case-tag{ display:inline-block; font-size:12.5px; font-weight:700; color:#fff; background:#0d0d0d; border-radius:999px; padding:2px 12px; }
.df-case h3{ margin-top:12px; font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.4; }
.df-case p{ margin-top:12px; font-size:15px; line-height:1.85; color:var(--sub); }
.df-route{ margin-top:18px; display:grid; gap:8px; }
.df-route > div{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.df-month{ width:5em; font-size:13px; font-weight:700; color:#6b6b6b; }
.df-pill{ font-size:12.5px; font-weight:700; padding:3px 12px; border-radius:999px; background:#f3f3f3; color:#5d5d5d; border:1px solid #dcdcdc; }
.df-pill.is-on{ background:#0d0d0d; color:#fff; border-color:#0d0d0d; }
.df-arrow{ font-size:12px; color:#8a8a8a; }
.df-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.df-metric{ text-align:center; display:flex; flex-direction:column; }
.df-metric-name{ font-size:14px; font-weight:700; line-height:1.45; min-height:2.9em; display:flex; flex-wrap:wrap; align-content:flex-end; justify-content:center; }
.df-pair{ margin-top:10px; height:170px; display:flex; justify-content:center; gap:10px; border-bottom:1.5px solid #e6e6e6; }
.df-col{ width:52px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
.df-col em{ font-style:normal; font-size:13px; font-weight:700; color:#6b6b6b; white-space:nowrap; margin-bottom:4px; }
.df-col i{ display:block; width:100%; min-height:3px; border-radius:4px 4px 0 0; background:#d4d4d4; }
.df-col.is-after em{ color:#0d0d0d; }
.df-col.is-after i{ background:#0d0d0d; }
.df-col small{ position:absolute; bottom:-24px; font-size:12px; color:var(--sub); white-space:nowrap; }
.df-result{ margin-top:30px; font-family:"Inter Tight",sans-serif; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.contact-title .nw,.df-case h3 .nw{ display:inline-block; }
.df-legend{ display:none; grid-column:1 / -1; justify-content:center; gap:16px; font-size:12px; color:var(--sub); }
.df-legend span::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:2px; background:#d4d4d4; margin-right:5px; vertical-align:-1px; }
.df-legend .is-after::before{ background:#0d0d0d; }
.df-cta{ margin-top:32px; text-align:center; }

@media(max-width:900px){
  .df-compare{ grid-template-columns:1fr; }
  .df-card.is-ours{ order:-1; }
  .df-case{ grid-template-columns:1fr; gap:32px; padding:28px 24px; }
}
@media(max-width:480px){
  .df-card{ padding:22px 16px 18px; }
  .df-funnel,.df-labels{ gap:6px; }
  .df-funnel{ height:160px; }
  .df-bar span{ font-size:12px; }
  .df-fixnote span{ font-size:12px; padding:4px 10px; }
  .df-labels{ font-size:12px; }
  .df-labels b{ font-size:12px; }
  .df-monthly{ font-size:13px; }
  .df-case{ padding:24px 16px; }
  .df-metrics{ gap:8px; }
  .df-pair{ height:140px; gap:6px; }
  .df-col{ width:40px; }
  .df-col em{ font-size:11.5px; }
  .df-result{ font-size:18px; }
}
.df-labels .nw,.df-monthly .nw,.df-metric-name .nw .nw{ display:inline-block; }
@media(max-width:480px){
  .df-labels b{ font-size:12px; }
  .df-card{ padding-left:10px; padding-right:10px; }
  .df-funnel,.df-labels{ gap:4px; }
  .df-labels .nw{ white-space:nowrap; }
  .df-month{ width:4.6em; font-size:12px; }
  .df-route > div{ gap:4px; }
  .df-pill{ font-size:12px; padding:2px 9px; }
  .df-metric-name{ font-size:12px; min-height:4.35em; }
  .df-col small{ display:none; }
  .df-result{ margin-top:12px; }
  .df-legend{ display:flex; margin-top:4px; }
}