/* =========================
   Base / Theme
   ========================= */
.sp { display: none; }
.pc { display: block; }

:root{
  --beige:#c9c5b8;
  --beige-light:#e7e5df;
  --paper:#ffffff;
  --ink:#111;
  --muted:#5a5a5a;
  --line:#ddd;
  --brand:#1e7aff;
  --brand-2:#5be0b3;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 6px 16px rgba(0,0,0,.08);
  --shadow:0 12px 32px rgba(0,0,0,.12);
  --wrap:1200px;
}

/* ダークモード対策：常にライト基準 */
html { color-scheme: light; }

html{
  scroll-behavior:smooth;
}
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  background:var(--paper);
  color:var(--ink);
  letter-spacing:.2px;
  overflow-x:hidden;
}

.container{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}

.nowrap{white-space:nowrap;}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================
   Header
   ========================= */
header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--line);
}
header .container{
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand .logo-img{
  height:32px;
  width:auto;
  display:block;
}
.nav .cta{
  display:flex;
  align-items:center;
  gap:12px;
}

/* =========================
   Buttons
   ========================= */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-weight:700;
  border-radius:14px;
  padding:16px 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:16px;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  box-shadow:var(--shadow-sm);
  transition:.25s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* 統一グラデCTA */
.btn-primary{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff;
  border:none;
  font-size:18px;
  padding:18px 32px;
  box-shadow:0 8px 20px rgba(30,122,255,.25);
  transition:transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  opacity:.92;
  box-shadow:0 10px 26px rgba(30,122,255,.32);
}

.btn-ghost{
  background:transparent;
  box-shadow:none;
  border-color:transparent;
  color:var(--muted);
}
.btn-outline{
  background:#fff;
  color:#111;
  border:2px solid #333;
  box-shadow:none;
  font-weight:700;
  transition:all .25s ease;
}
.btn-outline:hover{
  background:#f7f7f7;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.btn-big{
  font-size:18px;
  padding:18px 36px;
  border-radius:16px;
}

/* =========================
   Hero
   ========================= */
/* =========================
   Hero（背景アニメーション付き）
   ========================= */
/* =========================
   Hero（ドリフト＋キラキラ）
   ========================= */
.hero {
  position: relative;
  padding: 120px 0 90px;
  text-align: center;
  color: #111;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f5fbff 40%,
    #f0fbff 100%
  ); /* ベースは淡いグラデのみ */
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* ネットワーク画像：ゆっくり拡大＋左右に揺れながら流れる */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% 0 0; /* 少し大きめに取る */
  background-image: url("../images/fan-top-img2.png");
  background-repeat: no-repeat;
  background-position: center 10%;
  background-size: 1400px auto;          /* ここで大きさ調整。1200〜1800pxで好みを見る */
  opacity: 0.16;
  transform-origin: center top;
  animation: heroDrift 22s ease-in-out infinite;
  z-index: 0;
}

/* キラキラ粒子：小さいドットがじわっと明滅する */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(91,224,179,0.40) 0, transparent 55%),
    radial-gradient(circle, rgba(30,122,255,0.50) 0, transparent 55%);
  background-size: 220px 220px, 260px 260px;  /* ドット密度 */
  background-position: 5% 18%, 88% 8%;
  mix-blend-mode: screen;
  opacity: 0.0;
  animation: heroSparkle 2.4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Hero内コンテンツは前面 */
.hero > * {
  position: relative;
  z-index: 1;
}

/* タイトル・テキスト */
.hero h1{
  font-size:clamp(32px, 6vw, 56px);
  line-height:1.3;
  margin:0 0 20px;
  font-weight:800;
}
.hero h1 .grad{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero .lead-sub{
  font-size:clamp(16px, 2.4vw, 20px);
  color:#444;
  max-width:760px;
  margin:0 auto;
}
.hero .actions{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:28px;
  flex-wrap:wrap;
}

/* Hero内の「レポートサンプルを見る」 */
.hero .link-underline{
  color:#111;
}
.hero .link-underline::before{
  background:linear-gradient(90deg,#1E7AFF,#5BE0B3);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero .link-underline::after{
  background:linear-gradient(90deg,#1E7AFF,#5BE0B3);
}

/* --- アニメーション定義 --- */

/* ネットワーク画像：横にゆらぎつつ少しズーム */
@keyframes heroDrift {
  0% {
    transform: translateX(0) scale(1);
    opacity: 0.14;
  }
  40% {
    transform: translateX(-2%) scale(1.03);
    opacity: 0.18;
  }
  80% {
    transform: translateX(3%) scale(1.06);
    opacity: 0.17;
  }
  100% {
    transform: translateX(0) scale(1.02);
    opacity: 0.16;
  }
}

/* キラキラ：じわっと点滅（やりすぎない程度） */
@keyframes heroSparkle {
  0%   { opacity: 0.0; }
  35%  { opacity: 0.18; }
  70%  { opacity: 0.05; }
  100% { opacity: 0.14; }
}

/* =========================
   中間キャッチ（Hero下）
   ========================= */
.catch-section{
  position:relative;
  padding:60px 20px 56px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 60%,#ffffff 100%);
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid #edf1f7;
}
.catch-section::before{
  content:"";
  position:absolute;
  top:-80px;
  left:50%;
  transform:translateX(-50%);
  width:120%;
  height:140px;
  background:
    radial-gradient(circle at center,
      rgba(94,205,255,0.13) 0%,
      rgba(91,224,179,0.04) 40%,
      transparent 75%);
  pointer-events:none;
}
.catch-main{
  font-size:clamp(26px,4.2vw,40px);
  font-weight:800;
  margin:0 0 10px;
  background:linear-gradient(90deg,#2f80ff,#2fd2b3);
  -webkit-background-clip:text;
  color:transparent;
}
.catch-main::after{
  content:"";
  display:block;
  width:86px;
  height:3px;
  margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,#2f80ff,#2fd2b3);
}
.catch-lead{
  font-size:clamp(15px,2.2vw,18px);
  color:#555;
  line-height:1.9;
  max-width:780px;
  margin:18px auto 0;
}

/* =========================
   Sections / Cards / Lists
   ========================= */
section{
  padding:70px 0;
}
.section-head{
  text-align:center;
  margin-bottom:30px;
}
.section-head h2{
  position:relative;
  font-size:clamp(26px,4vw,38px);
  font-weight:800;
  margin-bottom:36px;
  line-height:1.3;
  color:#111;             /* ← タイトル色を統一 */
}
.section-head h2::after{
  content:"";
  display:block;
  width:90px;
  height:4px;
  margin:14px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.sub{
  color:var(--muted);
  font-size:15px;
  margin-top:8px;
}

.section--problems,
.section--solution{
  background:#ffffff;
}

.list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-sm);
  text-align:left;
}
.card h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
}
.note{
  color:var(--muted);
  font-size:15px;
  margin-top:10px;
}
@media (max-width:900px){
  .list{grid-template-columns:1fr;}
}

/* Problem cards */
.card.problem{
  border:1px solid #e5e7eb;
  box-shadow:0 6px 18px rgba(10,20,40,.05);
}
.card.problem .lead{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.card.problem .lead .ico{
  width:24px;
  height:24px;
  border-radius:8px;
  background:#fff1f1;
  color:#d64b4b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.context-bottom{
  text-align:center;
  margin-top:14px;
}

/* =========================
   Steps
   ========================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.steps .card{
  background:linear-gradient(180deg,#ffffff,#fafcff);
  border:1px solid #dbe7ff;
}
.steps .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  font-weight:800;
  box-shadow:var(--shadow-sm);
}
.steps .card h3{
  display:flex;
  align-items:center;
  gap:10px;
}
.steps .card p{
  margin:10px 0 0;
  font-size:15px;
  color:var(--muted);
}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;}
}

/* =========================
   Pipeline
   ========================= */
.pipeline{
  position:relative;
  display:grid;
  grid-template-columns:1fr 40px 1fr 40px 1fr;
  align-items:stretch;
  gap:12px;
  padding:18px;
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#ffffff,#fbfbff);
  box-shadow:var(--shadow-sm);
}
.stage{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:0 6px 18px rgba(10,20,40,.05);
  position:relative;
}
.stage__cap{
  position:absolute;
  top:-12px;
  left:16px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.stage__arrow{position:relative;}
.stage__arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:4px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:4px;
}
.stage__arrow::after{
  content:"";
  position:absolute;
  top:50%;
  right:-2px;
  transform:translateY(-50%) rotate(45deg);
  width:10px;
  height:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
@media (max-width:900px){
  .pipeline{
    grid-template-columns:1fr;
    gap:16px;
    padding:14px;
  }
  .stage__arrow{height:18px;}
  .stage__arrow::before{
    left:24px;
    right:24px;
    height:2px;
  }
  .stage__arrow::after{right:24px;}
}

/* =========================
   Deliverables：タイムライン
   ========================= */
.deliverables-ux{
  display:grid;
  gap:24px;
}
.deliverables-timeline{
  position:relative;
  margin:0 auto;
  max-width:900px;
  border-left:2px dashed var(--line);
  padding-left:28px;
}
.deliverables-timeline .tl-item{
  position:relative;
  padding:6px 0 16px;
}
.deliverables-timeline .tl-item::before{
  content:"";
  position:absolute;
  left:-35px;
  top:10px;
  width:14px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:var(--shadow-sm);
}
.tl-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
}
.tl-title{
  margin:8px 0 6px;
  font-size:20px;
  font-weight:800;
}
.tl-list{
  margin:0 0 0 18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}
.tl-connector{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}
@media (max-width:900px){
  .deliverables-timeline{
    max-width:100%;
    padding-left:22px;
  }
  .deliverables-timeline .tl-item::before{left:-30px;}
}

/* =========================
   Report Mock（ダークUI）
   ========================= */
.ai-report-mock{
  color:#e8ecf3;
  background:#0f1115;
  padding:24px;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  border:1px solid #222736;
  max-width:1000px;
  margin:24px auto;
}
.ai-report-mock .airm-head{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:14px;
}
.ai-report-mock .airm-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(to right, rgba(75,163,255,.18), rgba(118,224,184,.18));
  border:1px solid #222736;
  font-size:12px;
  color:#a9b0bd;
}
.ai-report-mock .airm-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:.3px;
}
.ai-report-mock .airm-sub{
  color:#a9b0bd;
  font-size:13px;
  margin-top:2px;
}

/* KPI Grid */
.ai-report-mock .kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin:18px 0 8px;
}
.ai-report-mock .kpi{
  background:#151924;
  border:1px solid #222736;
  border-radius:12px;
  padding:14px;
}
.ai-report-mock .kpi h4{
  font-size:12px;
  color:#a9b0bd;
  margin:0 0 6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-report-mock .kpi .val{
  font-size:22px;
  font-weight:800;
}
.ai-report-mock .kpi .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#a9b0bd;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px dashed #222736;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* KPI Grid PC: 2 + 3 布置 */
@media (min-width:901px){
  .ai-report-mock .kpi-grid{
    grid-template-columns:repeat(6,1fr);
  }
  .ai-report-mock .kpi-grid .kpi:nth-child(-n+2){grid-column:span 3;}
  .ai-report-mock .kpi-grid .kpi:nth-child(n+3){grid-column:span 2;}
}

/* SP: 2列 */
@media (max-width:900px){
  .ai-report-mock .kpi-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Tabs */
.ai-report-mock .tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  align-items:end;
  gap:0;
  margin-top:16px;
  position:relative;
}
.ai-report-mock .tabs input{display:none;}
.ai-report-mock .tabs label{
  grid-row:1;
  text-align:center;
  padding:12px 0;
  border-radius:10px 10px 0 0;
  font-weight:700;
  font-size:14px;
  color:#c7cfda;
  background:#121722;
  border:1px solid rgba(255,255,255,.18);
  border-bottom:none;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-report-mock .tabs label:hover{
  color:#fff;
  background:#1a2230;
}
.ai-report-mock #tab1:checked + label,
.ai-report-mock #tab2:checked + label,
.ai-report-mock #tab3:checked + label,
.ai-report-mock #tab4:checked + label{
  color:#fff;
  background:#1b2331;
  border-color:rgba(255,255,255,.28);
  box-shadow:inset 0 -3px 0 #76e0b8;
}
.ai-report-mock .tab-panels{
  grid-row:2;
  grid-column:1 / -1;
  margin-top:-1px;
  border:1px solid rgba(255,255,255,.18);
  border-top:none;
  border-radius:0 12px 12px 12px;
}
.ai-report-mock .panel{
  display:none;
  background:#111722;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:16px;
}
.ai-report-mock #tab1:checked ~ .tab-panels #panel1,
.ai-report-mock #tab2:checked ~ .tab-panels #panel2,
.ai-report-mock #tab3:checked ~ .tab-panels #panel3,
.ai-report-mock #tab4:checked ~ .tab-panels #panel4{
  display:block;
}

/* SPタブ横スクロール */
@media (max-width:640px){
  .ai-report-mock .tabs{
    grid-template-columns:repeat(4, minmax(120px,1fr));
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ai-report-mock .tabs::-webkit-scrollbar{display:none;}
}

/* Panel内テキスト */
.ai-report-mock .sum-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}
.ai-report-mock .card{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:14px;
}
.ai-report-mock .card h5{
  margin:0 0 10px;
  font-size:14px;
}
.ai-report-mock .list{display:grid; gap:10px;}
.ai-report-mock .row{margin:0;}
.ai-report-mock .row .tag{
  font-size:12.5px;
  color:#b7c0cc;
  margin-bottom:6px;
}
.ai-report-mock .row .txt{
  font-size:14px;
  color:#e8ecf3;
  line-height:1.7;
}
.ai-report-mock .disclaimer{
  font-size:11px;
  color:#a9b0bd;
  margin-top:8px;
}

/* TOP50テーブル */
.ai-report-mock .table-wrap{
  overflow:auto;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
}
.ai-report-mock table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
  font-size:13px;
}
.ai-report-mock th,
.ai-report-mock td{
  padding:10px 12px;
  border-bottom:1px solid #222736;
  text-align:left;
}
.ai-report-mock th{
  position:sticky;
  top:0;
  background:#151924;
  z-index:1;
  font-weight:700;
  font-size:12px;
  color:#a9b0bd;
}
.ai-report-mock tbody tr:hover{
  background:rgba(75,163,255,.06);
}
.ai-report-mock .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #222736;
  font-size:11px;
}
.ai-report-mock .pill.line{border-color:rgba(118,224,184,.4);}
.ai-report-mock .pill.mail{border-color:rgba(75,163,255,.4);}
.ai-report-mock .footer-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  color:#a9b0bd;
  font-size:12px;
}

/* =========================
   AI × Human（背景右寄せ）
   ========================= */
#fan-ai-vs-human{
  position:relative;
  background:#f8fafc;
  overflow:hidden;
}
#fan-ai-vs-human::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:65%;
  height:100%;
  background:url("../images/fan-top-img2.png") right center / contain no-repeat;
  opacity:0.22;
  filter:brightness(1.1);
  pointer-events:none;
  z-index:0;
}
#fan-ai-vs-human .container,
#fan-ai-vs-human .roles-grid{
  position:relative;
  z-index:1;
}
.roles-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.role{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow-sm);
}
.role h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
}
.role ul{
  margin:0;
  padding-left:18px;
  color:#555;
  font-size:15px;
  line-height:1.7;
}
.roles-grid.with-x{
  grid-template-columns:1fr 60px 1fr;
  gap:24px;
  align-items:center;
  text-align:center;
}
.role-sep{
  font-size:32px;
  font-weight:800;
  color:var(--brand);
}
/* アクセントライン＋影 */
#fan-ai-vs-human .roles-grid .role:first-child{
  border-top:4px solid var(--brand);
}
#fan-ai-vs-human .roles-grid .role:last-child{
  border-top:4px solid var(--brand-2);
}
#fan-ai-vs-human .role{
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

.scoring-note{
  text-align:center;
  max-width:800px;
  margin:32px auto;
}
.scoring-note .comment-head{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  font-weight:700;
  margin-bottom:10px;
  font-size:16px;
}
.scoring-note p{
  line-height:1.9;
  font-size:15px;
  color:var(--muted);
}

/* SPで背景画像非表示 */
@media (max-width:768px){
  #fan-ai-vs-human::after{display:none;}
  .roles-grid,
  .roles-grid.with-x{
    grid-template-columns:1fr;
  }
  .role-sep{display:none;}
}

/* =========================
   Deliverables 背景（左寄せ）
   ========================= */
#fan-deliverables{
  position:relative;
  background:#f8fafc;
  overflow:hidden;
}
#fan-deliverables::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:65%;
  height:100%;
  background:url("../images/fan-top-img2.png") left center / contain no-repeat;
  opacity:0.22;
  filter:brightness(1.1) saturate(0.95);
  pointer-events:none;
  z-index:0;
}
#fan-deliverables .container,
#fan-deliverables .deliverables-ux{
  position:relative;
  z-index:1;
}
@media (max-width:768px){
  #fan-deliverables::before{display:none;}
}

/* =========================
   Results
   ========================= */
.results{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
@media (max-width:900px){
  .results{grid-template-columns:1fr;}
}

/* =========================
   Pricing
   ========================= */
.plan-cards{
  display:flex;
  gap:20px;
}
.plan-card{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.plan-content{flex:1;}
.plan-card .btn{
  margin-top:16px;
  align-self:center;
}

/* PC: 3カラム */
@media (min-width:901px){
  #fan-pricing .plan-cards{
    display:grid;
    grid-template-columns:repeat(3, minmax(260px,1fr));
    gap:20px;
    align-items:stretch;
  }
}

/* SP: 縦1カラム */
@media (max-width:900px){
  .plan-cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    padding-left:16px;
    padding-right:16px;
  }
  .plan-card{
    width:100%;
    max-width:100%;
    padding:18px 16px;
    border-radius:16px;
    box-sizing:border-box;
  }
  .plan-card .btn{
    width:100%;
    max-width:420px;
  }
}

/* 無料コンサル相談カード強調 */
.plan-cards .plan-card:first-child{
  position:relative;
  background:linear-gradient(180deg,#f5fbff,#ffffff);
  border-radius:22px;
  border:1px solid rgba(30,122,255,0.14);
  box-shadow:0 16px 40px rgba(30,122,255,0.12);
  transform:translateY(-4px);
}
.plan-cards .plan-card:first-child::before{
  content:"まずはここから相談";
  position:absolute;
  top:16px;
  right:18px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  color:#1e7aff;
  background:rgba(226,239,255,0.95);
  border-radius:999px;
}
.plan-cards .plan-card:first-child h3,
.plan-cards .plan-card:first-child h2{
  font-weight:800;
}
.plan-cards .plan-card:first-child .btn{
  background:linear-gradient(90deg,#1e7aff,#5be0b3);
  color:#fff;
  border:none;
  font-weight:700;
  box-shadow:0 10px 24px rgba(30,122,255,0.25);
  width:100%;
  max-width:420px;
  margin:24px auto 4px;
}
.plan-cards .plan-card:first-child .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(30,122,255,0.32);
}
@media (max-width:900px){
  .plan-cards .plan-card:first-child{
    transform:translateY(0);
    margin-top:4px;
  }
  .plan-cards .plan-card:first-child::before{
    top:14px;
    right:14px;
    font-size:10px;
  }
}

/* =========================
   Low Cost
   ========================= */
.lowcost-lead{
  text-align:center;
  max-width:760px;
  margin:0 auto 30px;
  color:var(--muted);
  line-height:1.9;
}

/* =========================
   CTAリンク
   ========================= */
.actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:24px;
  flex-wrap:wrap;
}
.link-underline{
  background:none;
  border:none;
  box-shadow:none;
  color:#333;
  font-weight:700;
  padding:0 4px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all 0.25s ease;
}
.link-underline::after{
  content:"";
  position:absolute;
  bottom:-3px;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#1E7AFF,#5BE0B3);
  border-radius:2px;
  transition:all 0.3s ease;
}
.link-underline::before{
  content:"→";
  font-weight:900;
  margin-right:6px;
  background:linear-gradient(90deg,#1E7AFF,#5BE0B3);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:transform 0.3s ease;
}
.link-underline:hover{
  transform:translateY(-2px);
}
.link-underline:hover::after{
  opacity:0.6;
}
.link-underline:hover::before{
  transform:translateX(3px);
}

/* =========================
   導入の流れ（PC版：矢印タイムライン）
   ========================= */
@media (min-width:901px){
  #fan-flow .steps{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:28px;
    align-items:stretch;
    margin-top:40px;
  }
  #fan-flow .steps .card{
    position:relative;
    margin:0;
    border-radius:32px;
    padding:26px 28px;
    box-shadow:0 14px 40px rgba(26,115,232,0.06);
    border:1px solid rgba(142,197,252,0.35);
    background:radial-gradient(circle at top left,#f6fbff 0%,#ffffff 40%,#ffffff 100%);
  }
  #fan-flow .steps .badge{
    width:54px;
    height:54px;
    font-size:20px;
    margin-right:10px;
  }
  #fan-flow .steps .card h3{
    font-size:20px;
    margin-bottom:8px;
  }
  #fan-flow .steps .card p{
    margin:6px 0 0;
    font-size:15px;
    color:#555;
  }
  #fan-flow .steps .card::after{
    content:"";
    position:absolute;
    top:50%;
    right:-22px;
    transform:translateY(-50%);
    width:34px;
    height:3px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    border-radius:999px;
  }
  #fan-flow .steps .card::before{
    content:"";
    position:absolute;
    top:50%;
    right:-22px;
    transform:translateY(-50%) translateX(18px) rotate(45deg);
    width:9px;
    height:9px;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    border-radius:2px;
  }
  #fan-flow .steps .card:last-child::after,
  #fan-flow .steps .card:last-child::before{
    content:none;
  }
}

/* =========================
   Contact
   ========================= */
.contact{
  background:var(--beige);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
form{
  display:grid;
  gap:14px;
  max-width:760px;
  margin:0 auto;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
label{
  font-size:14px;
  color:var(--muted);
  margin:0 0 6px;
}
input,
textarea,
select{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  padding:14px;
  border-radius:14px;
  font:inherit;
  font-size:15px;
}
textarea{
  min-height:180px;
  resize:vertical;
}
#fan-contact .form-actions{
  display:flex;
  justify-content:center;
  margin-top:6px;
}
#fan-contact input:focus,
#fan-contact textarea:focus,
#fan-contact select:focus{
  outline:3px solid rgba(30,122,255,.20);
  border-color:#bcd6ff;
}

/* =========================
   Footer
   ========================= */
footer{
  padding:32px 0;
  background:#363636;
}
#foot_container{
  display:flex;
  text-align:left;
  justify-content:space-between;
  width:80%;
  margin:0 auto;
  padding:100px 0;
}
.f-col{max-width:33%;}
footer p{
  font-family:'Hind', sans-serif;
  color:#fff;
  line-height:20px;
  font-weight:400;
  font-size:13px;
}
footer a{color:#fff;}
.foot_spn1{font-size:13px;}
.foot_spn2{
  color:#BCB8AA;
  font-weight:700;
  font-size:18px;
}

/* =========================
   共通：container外の幅調整
   ========================= */
.ai-why,
#fan-solution .steps,
#fan-problems > .list,
#fan-flow,
.section--solution > .steps,
.section--problems > .list,
#fan-pricing .plan-cards,
#fan-results-summary .results{
  max-width:var(--wrap);
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}

/* =========================
   SPビュー調整
   ========================= */
@media (max-width:900px){
  .sp{display:block;}
  .pc{display:none;}

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  header .nav .cta .btn-consult{
    position:absolute;
    top:12px;
    right:16px;
    z-index:200;
    background:#111;
    color:#fff;
    font-size:13px;
    line-height:1.4;
    padding:8px 14px;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    white-space:pre-line;
    text-align:center;
  }
  header .container{
    position:relative;
  }
  .brand .logo-img{
    height:28px;
  }

  .grid-2{
    grid-template-columns:1fr;
  }

  .note,
  .sub{
    color:#444;
    font-size:15.5px;
  }

  #foot_container{
    flex-direction:column;
    align-items:flex-start;
    width:90%;
    padding:40px 0;
    gap:20px;
  }
  .f-col{max-width:100%;}
  footer p{
    font-size:12px;
    line-height:1.6;
  }
  .foot_spn1{font-size:12px;}
  .foot_spn2{font-size:16px;}
}

/* =========================
   Scroll Reveal & Hover Motion
   ========================= */
@media (prefers-reduced-motion: no-preference) {
  /* スクロール時フェードアップ用 */
  .reveal-up{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal-up.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* 子要素を順番に出す用 */
  .reveal-stagger > *{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal-up.is-visible .reveal-stagger > *{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-up.is-visible .reveal-stagger > *:nth-child(1){transition-delay:.05s;}
  .reveal-up.is-visible .reveal-stagger > *:nth-child(2){transition-delay:.12s;}
  .reveal-up.is-visible .reveal-stagger > *:nth-child(3){transition-delay:.19s;}
  .reveal-up.is-visible .reveal-stagger > *:nth-child(4){transition-delay:.26s;}
}

/* hover時のわずかな浮き上がり */
@media (hover:hover){
  .card,
  .plan-card,
  .role,
  .kpi,
  .stage{
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .card:hover,
  .plan-card:hover,
  .role:hover,
  .kpi:hover,
  .stage:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 35px rgba(15,37,74,0.12);
  }
}

/* =========================================================
   BLOG PREVIEW（index footer 上）
========================================================= */
#blog_preview{
  width:100%;
  background-color:#F3F1EC; /* footerより薄い、全体調和 */
  text-align:center;
  padding:100px 0 120px;
  border-top:1px solid #d0ccc4;
}

#blog_preview h2{
  font-size:40px;
  font-weight:900;
  color:#333;
  letter-spacing:0.06em;
  margin-bottom:14px;
}

.blog_pre_lead{
  font-size:18px;
  font-weight:700;
  color:#000;
  margin-bottom:60px;
}

/* カード一覧 */
.blog_pre_list{
  width:80%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:28px;
  flex-wrap:nowrap;
}

/* カード */
.blog_pre_card{
  display:block;
  width:24%;
  background:#fff;
  border:1px solid #000;
  border-radius:16px;
  text-align:left;
  padding:26px 28px;
  text-decoration:none;
  color:#000;
  transition:all .3s ease;
}

.blog_pre_card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}

/* カテゴリ */
.blog_pre_cat{
  display:inline-block;
  font-size:12px;
  border:1px solid #000;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:12px;
  font-family:'Hind',sans-serif;
}

/* タイトル */
.blog_pre_card h3{
  font-size:18px;
  font-weight:700;
  line-height:1.6;
  margin-bottom:10px;
}

/* 本文 */
.blog_pre_txt{
  font-size:14px;
  line-height:1.8;
  color:#333;
}

/* SEE MORE */
.blog_pre_more{
  margin-top:60px;
}

/* スマホ・タブレット */
@media screen and (max-width:1024px){
  .blog_pre_list{
    width:88%;
    overflow-x:scroll;
    justify-content:flex-start;
  }

  .blog_pre_card{
    width:260px;
    flex:0 0 auto;
    margin-right:20px;
  }
}

@media screen and (max-width:480px){
  #blog_preview{
    padding:70px 0 90px;
  }

  #blog_preview h2{
    font-size:32px;
  }

  .blog_pre_lead{
    font-size:15px;
    margin-bottom:40px;
  }
}

/* =========================================================
   BLOG / NOTE PREVIEW（index footer直前）
   カードデザインは blog.html と同テイスト
========================================================= */

#blog_preview{
  width:100%;
  background:#f6f4ef; /* footerより少し明るめのベージュ */
  border-top:1px solid #ded9cf;
  padding:90px 0 110px;
}

.blog_pre_inner{
  width:86%;
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

/* 見出し */
.blog_pre_ttl{
  font-size:40px;
  font-weight:900;
  letter-spacing:0.06em;
  color:#333;
  margin:0 0 18px;
}

.blog_pre_lead{
  font-size:18px;
  font-weight:700;
  line-height:1.9;
  margin:0 0 60px;
}

/* カード一覧：PC 4列 */
.blog_pre_list{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  gap:24px;
}

/* カード本体 */
.blog_pre_card{
  display:block;
  flex:1 1 0;
  background:#fff;
  border:1px solid #000;
  border-radius:28px;
  padding:24px 24px 26px;
  text-align:left;
  color:#000;
  text-decoration:none;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.blog_pre_card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  background:#fdfbf7;
}

/* 上部メタ（日付＋チップ） */
.blog_pre_meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-size:14px;
  font-family:'Hind',sans-serif;
}

.blog_pre_date{
  font-weight:700;
}

.blog_pre_chip{
  padding:4px 14px;
  border-radius:999px;
  border:1px solid #000;
  font-size:13px;
}

/* タイトル */
.blog_pre_card_ttl{
  font-size:20px;
  font-weight:900;
  line-height:1.7;
  margin:4px 0 14px;
}

/* 本文 */
.blog_pre_card_txt{
  font-size:15px;
  line-height:1.9;
  margin:0 0 20px;
}

/* NOTEで続きを読む */
.blog_pre_more{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.08em;
  border-bottom:1px solid #000;
  padding-bottom:2px;
}

/* 「記事をもっと見る」 */
.blog_pre_more_wrap{
  margin-top:56px;
}

.blog_pre_see{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.12em;
  text-decoration:none;
  color:#000;
  border-bottom:1px solid #000;
  padding-bottom:4px;
}

/* ================== レスポンシブ ================== */

/* タブレット：2列×2段 */
@media screen and (max-width:1024px){
  .blog_pre_list{
    flex-wrap:wrap;
  }
  .blog_pre_card{
    flex:0 0 calc(50% - 12px);
  }
}

/* スマホ：横スライド式 */
@media screen and (max-width:600px){
  #blog_preview{
    padding:70px 0 80px;
  }

  .blog_pre_inner{
    width:92%;
  }

  .blog_pre_ttl{
    font-size:28px;
  }

  .blog_pre_lead{
    font-size:15px;
    margin-bottom:32px;
  }

  /* 横スクロールスライダー化 */
  .blog_pre_list{
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
  }

  .blog_pre_card{
    flex:0 0 82%;         /* 画面の8〜9割くらいの幅で1枚ずつ見せる */
    border-radius:22px;
    scroll-snap-align:start;
  }

  .blog_pre_card_ttl{
    font-size:18px;
  }

  .blog_pre_card_txt{
    font-size:14px;
  }

  /* スクロールバーを目立たなくする（必要なければ削除OK） */
  .blog_pre_list::-webkit-scrollbar{
    height:4px;
  }
  .blog_pre_list::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:10px;
  }
}