/* =========================================================
   D-innovation 楽天市場運営代行 LP
   ========================================================= */

:root{
  --red:#C8102E;
  --red-dark:#9E0B24;
  --red-deep:#7d0a1c;
  --pink-bg:#FDECEF;
  --pink-soft:#FBE0E5;
  --ink:#2b2b2b;
  --gray:#666;
  --gray-line:#e7e7e7;
  --gray-label:#7a7a7a;
  --amber:#DD9933;
  --amber-dark:#c8842a;
  --cream:#FBF5EC;
  --radius:14px;
  --shadow:0 8px 26px rgba(0,0,0,.08);
  --max:1120px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;overflow-x:hidden;}

body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  line-height:1.8;
  font-size:16px;
  font-weight:400;                 /* テーマの body{font-weight:500} が漏れないよう明示 */
  letter-spacing:normal;           /* テーマの letter-spacing:.03em を打ち消す */
  font-feature-settings:normal;    /* テーマの palt を打ち消す */
  -webkit-font-feature-settings:normal;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.container.narrow{max-width:820px;}

.section{padding:80px 0;overflow-x:clip;}
/* SP専用の改行など（PC/タブレットでは非表示） */
.only-sp{display:none;}
.red{color:var(--red);}

/* ---------- CTA ボタン ---------- */
.btn-cta{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:700;
  text-align:center;
  border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 16px rgba(200,16,46,.35);
}
.btn-cta:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(200,16,46,.45);}

/* ---------- 見出し共通 ---------- */
.block-title{
  text-align:center;
  font-size:clamp(24px,4.4vw,44px);
  font-weight:900;
  line-height:1.4;
  margin-bottom:34px;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.block-title.big{font-size:clamp(28px,5vw,44px);}
.block-title.point-bgtitle {
  margin-bottom:80px;
}

.deco-title{
  text-align:center;
  font-size:clamp(22px,3.8vw,34px);
  font-weight:900;
  margin-bottom:26px;
  position:relative;
  display:block;
}
.deco-title::before,.deco-title::after{
  content:"";
  display:inline-block;
  width:34px;height:2px;
  background:black;
  vertical-align:middle;
  margin:0 18px;
}
.deco-title::before{transform:rotate(45deg);}
.deco-title::after{transform:rotate(-45deg);}

.deco-mini{
  text-align:center;
  font-weight:700;
  font-size:32px;
  margin-bottom:14px;
  position:relative;
}
.deco-mini::before,.deco-mini::after{
  content:"";display:inline-block;width:39px;height:2px;background:black;vertical-align:middle;margin:0 12px;
}
.deco-mini::before{transform:rotate(45deg);}
.deco-mini::after{transform:rotate(-45deg);}

.section-desc{color:black;font-size:27px;margin-bottom:35px;font-weight:700;}
.section-desc.center{text-align:center;}
.section-desc.jisseki{font-size:18px;}

/* =========================================================
   HEADER（dinnovation.jp 準拠：クリーム背景＋白フローティングピル）
   ========================================================= */
.dj-header{
  position:sticky;top:0;z-index:200;
  background:var(--cream);
  padding:14px 20px;
}
.dj-header-bar{
  max-width:1200px;margin:0 auto;
  background:#fff;border-radius:60px;
  box-shadow:0 8px 22px rgba(150,110,40,.12);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 18px 12px 32px;
}
.dj-logo img{height:30px;width:auto;display:block;}
.dj-nav{display:flex;align-items:center;gap:36px;}
.dj-nav a{color:#3a3a3a;font-weight:700;font-size:15px;transition:color .2s;}
.dj-nav a:hover{color:var(--amber);}
.dj-contact,.dj-contact-sp{
  background:var(--amber);color:#fff !important;
  border-radius:60px;padding:13px 30px;font-weight:700;font-size:15px;
  box-shadow:0 6px 16px rgba(221,153,51,.35);transition:background .2s;
}
.dj-contact:hover,.dj-contact-sp:hover{background:var(--amber-dark);}
.dj-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.dj-burger span{display:block;width:26px;height:3px;background:#3a3a3a;border-radius:2px;transition:.3s;}
.dj-nav-sp{display:none;}

/* =========================================================
   FIRST VIEW
   ========================================================= */
.fv{
  background:radial-gradient(125% 135% at 22% 12%, #d81222 0%, #c60a1d 55%, #a80819 100%);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.fv-inner{
  max-width:var(--max);margin:0 auto;padding:60px 24px 64px;
  display:flex;align-items:center;gap:20px;
}
.fv-copy{flex:1 1 54%;min-width:0;}
.fv-lead{
  margin-bottom:26px;
  line-height:2.05;
}
.fv-lead-hl{
  background:#fff;
  color:var(--red);
  font-weight:700;
  font-size:26px;
  line-height:2.15;
  padding:0px 16px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  letter-spacing:4px;
}
.fv-price{
  font-weight:700;
  font-size:38px;
  margin-bottom:8px;
}
.fv-title{
  font-weight:900;
  font-size:70px;
  line-height:1.2;
  margin-bottom:32px;
  text-shadow:0 3px 12px rgba(0,0,0,.2);
  font-weight:900;
}
.fv-btn{
  display:block;width:fit-content;margin:8px auto 0;
  position:relative;
  left:90px;
  top: -6px;
  background:#fff;
  color:var(--red);
  border:none;
  border-radius:999px;
  padding:7px 45px;
  font-size:25px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.fv-btn:hover{background:#fff;color:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.28);}

.fv-visual{flex:1 1 46%;position:relative;display:flex;justify-content:center;align-items:center;min-width:0;}
.fv-phone{width:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.4));}
.fv-badge{
  position:absolute;top:-6px;left:-22%;z-index:3;
  width:150px;height:132px;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.fv-badge-star{position:absolute;inset:0;width:100%;height:100%;}
.fv-badge-text{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);
  color:#fff;font-weight:700;font-size:13px;line-height:1.3;
}
.fv-badge-text strong{display:block;font-size:23px;color:#fff;margin-top:1px;}

/* =========================================================
   実績 500社
   ========================================================= */
.results{background:#fff;}
.genre-tags{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;column-gap:30px;
  max-width:846px;margin:0 auto 46px;
}
.genre-tags li{
  background:var(--red);color:#fff;font-weight:700;font-size:14px;
  padding:0px 26px;border-radius:20px;min-width:150px;text-align:center;width:187px;
}
/* ロゴ 無限スクロール（dinnovation.jp/ec-support .logo_zisseki 準拠） */
.logo_zisseki{
  position:relative;
  /* コンテナ幅を超えて画面幅いっぱいに表示（フルブリード） */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  height:190px;
  background-color:#fff;
  padding-top:20px;
  margin-top:24px;
}
.logo_zisseki .inner01 ul{
  -webkit-animation:scroll_text 30s linear infinite;
  animation:scroll_text 30s linear infinite;
  position:absolute;
  top:14px;
  white-space:nowrap;
  will-change:transform;
}
.logo_zisseki .inner02 ul{
  -webkit-animation:scroll_text 30s linear infinite;
  animation:scroll_text 30s linear infinite;
  position:absolute;
  top:104px;
  white-space:nowrap;
  will-change:transform;
}
.logo_zisseki ul{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;padding:0;
}
.logo_zisseki ul li{
  width:200px;
  margin:0 50px;
  flex:0 0 auto;
}
.logo_zisseki ul li.square{
  width:60px;
}
.logo_zisseki ul li img{
  width:100%;
  height:auto;
  object-fit:contain;
}
@keyframes scroll_text{
  0%{-webkit-transform:translateX(0);transform:translateX(0);}
  100%{-webkit-transform:translateX(-50%);transform:translateX(-50%);}
}

/* =========================================================
   お悩み
   ========================================================= */
.worry-sec{background:var(--pink-bg);}
.worry-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.worry-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.worry-head{background:var(--red);color:#fff;font-weight:800;text-align:center;padding:12px;font-size:21px;}
.worry-img{padding:20px 20px 6px;}
.worry-img img{height:160px;width:auto;margin:0 auto;object-fit:contain;}
.worry-text{padding:6px 16px 24px;text-align:center;font-size:17.5px;color:#444;line-height:1.6;font-weight:800;}

/* =========================================================
   販路
   ========================================================= */
.channel-sec{background:#fff;}
.channel-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
}
.channel-phone img{width:445px;margin:0 auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.28));}
.channel-item{margin-bottom:44px;}
.channel-item:last-child{margin-bottom:0;}
.channel-h{
  display:inline-block;position:relative;z-index:0;
  font-size:32px;font-weight:900;line-height:1.35;letter-spacing:.03em;
  margin-bottom:12px;padding:8px 4px 0 10px;color:#2b2b2b;
}
.channel-h::before{
  content:"";position:absolute;top:-3px;left:-20px;z-index:-1;
  width:65px;height:65px;background:#ffe3e3;border-radius:50%;
}
.channel-item p{font-size:20px;color:#333;font-weight:800;line-height:1.9;}
.but-text{text-align:center;font-size:clamp(28px,4.4vw,44px);font-weight:900;margin-top:44px;}

/* =========================================================
   だけど（課題）
   ========================================================= */
.problem-sec{background:#fff;padding-top:20px;}
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px;}
.problem-card{text-align:center;}
.problem-q{font-weight:900;font-size:24px;margin-bottom:12px;line-height:1.4;}
.problem-img{
  position:relative;
  width:150px;height:150px;margin:53px auto 0;border-radius:50%;
  background:#f3b5b5;
}
/* 画像は円より大きく表示し、円からはみ出して見せる */
.problem-img img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:152%;height:152%;max-width:none;object-fit:contain;
}
.problem-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;margin-bottom:44px;}
.problem-labels span{
  background:#8f8f8f;color:#fff;font-weight:700;font-size:23px;line-height:1.5;
  padding:12px 46px;border-radius:6px;text-align:center;
  position:relative;
}
.problem-labels span::after{
  content:"";position:absolute;top:100%;
  border:14px solid transparent;border-top-color:#8f8f8f;
}
.problem-labels span:nth-child(1){width:691px;max-width:100%;}
.problem-labels span:nth-child(1)::after{left:50%;transform:translateX(-50%);}
.problem-labels span:nth-child(2)::after{left:52%;transform:translateX(-50%);}
.problem-concl{text-align:center;font-weight:900;font-size:30px;}

/* =========================================================
   ポイント
   ========================================================= */
.point-sec{background:#fff;}
.point-row{
  display:flex;align-items:center;gap:21px;
}
.point-row.reverse{flex-direction:row-reverse;}
.point-body{flex:1 1 52%;}
.point-num{
  display:block;color:var(--red);font-size:52px;font-weight:900;line-height:1;margin-bottom:6px;
  font-family:Arial,sans-serif;
}
.point-h{font-size:clamp(20px,2.8vw,26px);font-weight:900;padding-bottom:12px;}
.point-body p{font-size:18.5px;color:#4b4b4b;font-weight:800}
.point-img{flex:1 1 44%;}
.point-img img{width:333px;margin:0 auto;}

/* =========================================================
   CTA バンド
   ========================================================= */
.cta-band{background:#fff;padding:26px 0 46px;}
.cta-band .container{text-align:center;}
.cta-lead{
  font-weight:800;font-size:25px;margin-bottom:16px;position:relative;display:inline-block;
}
.cta-lead::before,.cta-lead::after{content:"";display:inline-block;width:22px;height:2px;background:var(--ink);vertical-align:middle;margin:0 14px;}
.cta-lead::before{transform:rotate(50deg);}
.cta-lead::after{transform:rotate(-50deg);}
.cta-pill{display:block;max-width:700px;margin:0 auto;padding:20px;font-size:34px;letter-spacing:6px;font-weight:900;}

/* =========================================================
   成果報酬型コンサルとは
   ========================================================= */
.about-sec{background:#ffe4e3;}
.about-grid{display:flex;align-items:center;gap:20px;justify-content:center;flex-wrap:wrap;}
.about-team{flex:1 1 300px;max-width:420px;text-align:center;}
.about-roles{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:8px;}
.about-roles li{background:#fff;border:1px solid var(--gray-line);font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.about-arrow{color:var(--red);font-size:80px;font-weight:900;flex:0 0 auto;}
.about-table{flex:1 1 380px;max-width:560px;}
.about-table table{width:100%;border-collapse:separate;border-spacing:6px;}
.about-table th{color:#fff;font-weight:700;padding:12px;font-size:20px;}
.th-strategy{background:#bf0000;}
.th-action{background:var(--red);}
.about-table td{background:#fff;text-align:center;padding:6px 6px;font-size:20px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.about-note{
  text-align:center;font-weight:900;font-size:28px;margin-top:34px;
  display:inline-block;width:100%;
}
.about-note::after{content:"";display:block;width:784px;height:8px;background:#e3888c;margin:-9px auto 0;}

/* =========================================================
   ここが違う
   ========================================================= */
.diff-sec{background:#fff;}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.diff-card{
  border:1px solid var(--gray-line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.diff-head{background:var(--red);color:#fff;font-weight:700;text-align:center;padding:14px;font-size:25px;}
.diff-card p{padding:22px 20px 6px;text-align:center;font-size:19px;font-weight:800;color:#444;flex:1;}
.diff-img{padding:0 24px 26px;}
.diff-img img{height:208px;width:auto;margin:0 auto;object-fit:contain;}


/* =========================================================
   メンバー
   ========================================================= */
.member-sec{background:#fff;}
.member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;margin-top:10px;}
.member-card{display:flex;flex-direction:column;}
.member-row{display:flex;align-items:center;gap:18px;}
.member-photo{
  flex:0 0 auto;width:110px;height:110px;border-radius:50%;overflow:hidden;
  background:#eee;box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.member-photo img{width:100%;height:100%;object-fit:cover;}
.member-tags{font-size:18.5px;font-weight:800;color:#333;line-height:1.7;}
.member-name{font-weight:900;color:var(--red);font-size:20px;letter-spacing:.03em;margin-top:14px;margin-left:6px;}

/* =========================================================
   カルーセル 共通
   ========================================================= */
.carousel{position:relative;padding:0 8px;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:flex;gap:22px;transition:transform .45s cubic-bezier(.4,.2,.2,1);}
.carousel-track>*{flex:0 0 auto;}
.carousel-arrow{
  position:absolute;top:44%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--red);font-size:28px;line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.carousel-arrow:hover{background:var(--red);color:#fff;}
.carousel-arrow.prev{left:-6px;}
.carousel-arrow.next{right:-6px;}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:26px;}
.carousel-dots button{
  width:11px;height:11px;border-radius:50%;border:none;background:#d9c6c9;cursor:pointer;padding:0;transition:background .2s,transform .2s;
}
.carousel-dots button.active{background:var(--red);transform:scale(1.2);}

/* 実績事例 カード（タイトルバー＋左スマホ／右2ボックス・幅470px） */
.case-sec{background:#fff;}
.case-card{
  width:100%;background:transparent;
}
/* Splide カルーセル（loop／peek／画面幅いっぱい・固定幅470px） */
.case-splide{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:16px;
  padding:0;
}
.case-splide .splide__arrow{
  background:#fff;width:46px;height:46px;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:1;z-index:10;
}
.case-splide .splide__arrow svg{fill:var(--red);width:18px;height:18px;}
.case-splide .splide__arrow:hover{background:var(--red);}
.case-splide .splide__arrow:hover svg{fill:#fff;}
/* 中央カード（幅470px）の左右端に配置 */
.case-splide .splide__arrow--prev{left:calc(50% - 278px);right:auto;}
.case-splide .splide__arrow--next{right:calc(50% - 280px);left:auto;}
.case-splide .splide__pagination{bottom:-54px;}
.case-splide .splide__pagination__page{background:#d9c6c9;width:11px;height:11px;margin:0 5px;opacity:1;}
.case-splide .splide__pagination__page.is-active{background:var(--red);transform:scale(1.2);}
.case-title{
  background:var(--red);color:#fff;font-weight:bold;text-align:center;
  padding:2px;font-size:23px;border-radius:8px;letter-spacing:.02em;
}
.case-body{display:flex;align-items:center;gap:14px;margin-top:16px;}
.case-phone{flex:0 0 138px;}
.case-phone img{width:100%;height:auto;object-fit:contain;}
.case-boxes{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px;}
.case-box{padding:0 0 12px;border-radius:10px;overflow:hidden;}
.case-box.gray{background:#efefef;}
.case-box.red{background:var(--pink-soft);}
.case-label{
  display:block;text-align:center;font-weight:700;color:#fff;
  padding:7px;margin-bottom:9px;font-size:19px;
}
.case-box.gray .case-label{background:#8a8a8a;}
.case-box.red .case-label{background:var(--red);}
.case-box p{font-size:12.5px;color:#3a3a3a;line-height:1.65;font-weight:bold;padding:0 12px;text-align:center;}

/* クライアント事例 カード */
.client-sec{background:#fff;}
.client-eyebrow{text-align:center;color:var(--red);font-weight:700;letter-spacing:.08em;margin-bottom:6px;}
.client-sub{text-align:center;font-weight:700;color:#444;margin-bottom:34px;}
.client-card{
  width:320px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  border:1px solid var(--gray-line);
}
.client-visual{height:180px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:26px;letter-spacing:.05em;}
.client-visual.v1{background:linear-gradient(135deg,#1a1a1a,#444);}
.client-visual.v2{background:linear-gradient(135deg,#1428A0,#2f56c9);}
.client-visual.v3{background:linear-gradient(135deg,#0b0b0b,#333);}
.client-visual.v4{background:linear-gradient(135deg,#0aa,#0c7c86);}
.client-visual.v5{background:linear-gradient(135deg,#111,#3a3a3a);}
.client-body{padding:18px 20px 22px;}
.client-body h3{font-size:17px;font-weight:900;margin-bottom:8px;}
.client-mall{display:inline-block;background:var(--pink-soft);color:var(--red);font-weight:700;font-size:12px;padding:3px 12px;border-radius:5px;margin-bottom:10px;}
.client-tags{font-size:13px;color:#666;line-height:1.6;}

/* =========================================================
   対応領域
   ========================================================= */
.area-sec{background:#fff;}
.area-funnel{margin-top:20px;}
.area-funnel img{width:100%;height:auto;display:block;}

/* =========================================================
   運用の流れ
   ========================================================= */
.flow-sec{background:#fff;}
.flow-diagram{max-width:1000px;margin:26px auto 0;}
/* シェブロン行（フェーズ／月）：2つの矢印を入れ子に噛み合わせる */
.flow-row{display:flex;align-items:stretch;}
.flow-chev{
  position:relative;height:67px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:32px;letter-spacing:.03em;
}
/* 左カラム（戦略／1ヵ月目）：赤・白文字・左フラット右三角 */
.flow-chev.h-strategy,.flow-chev.m1{
  background:#BF0000;color:#fff;
  width:54.2%;
  padding-right:85px;
  clip-path:polygon(0 0, calc(100% - 85px) 0, 100% 50%, calc(100% - 85px) 100%, 0 100%);
}
/* 右カラム（施策／2ヵ月目）：ペーチ・#333文字・左ノッチ＋右三角、左端を重ねて噛み合わせ */
.flow-chev.h-action,.flow-chev.m2{
  background:#FFDDCD;color:#333;
  width:52.5%;
  margin-left:-6.5%;
  padding-left:86px;padding-right:85px;
  clip-path:polygon(0 0, calc(100% - 85px) 0, 100% 50%, calc(100% - 85px) 100%, 0 100%, 86px 50%);
}
/* ボックス */
.flow-boxrow{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:14px 0;align-items:stretch;}
.flow-box{
  padding:24px 22px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-content:center;
}
.flow-box.red{background:#BF0000;}                  /* 戦略ボックス：ヘッダーと同じ赤 */
.flow-box.pink{background:#FFEAE0;}                 /* 施策ボックス：淡いペーチ */
.flow-pill{
  background:#fff;border-radius:999px;color:#333;
  font-weight:900;font-size:17px;line-height:1.3;
  text-align:center;padding:13px 8px;
}

/* =========================================================
   料金
   ========================================================= */
.price-sec{background:#fff;}
.price-box-wrap{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;}
.price-box{
  background:var(--pink-bg);border-radius:16px;padding:34px 46px;text-align:center;min-width:260px;width:375px;
}
.price-label{display:block;font-weight:800;font-size:32px;margin-bottom:1px;}
.price-value{font-weight:800;font-size:31px;}
.price-value strong{color:var(--red);font-size:52px;margin:0 4px;line-height:1;}
.price-plus{font-size:44px;font-weight:900;color:var(--ink);}
.price-note{text-align:center;font-weight:800;margin-top:26px;font-size:25px;letter-spacing:3px;}

/* =========================================================
   契約期間
   ========================================================= */
.term-sec{background:#fff;}
.term-diagram{margin-top:40px;text-align:center;overflow-x:auto;overflow-y:visible;padding-bottom:6px;}
.term-scroll{display:inline-block;text-align:left;min-width:820px;padding-top:56px;}

/* 上段：月ボックス */
.term-boxes{display:flex;align-items:center;gap:9px;}
.term-contract{
  flex:0 0 auto;width:84px;height:84px;border-radius:50%;
  background:#bf0000;color:#fff;font-weight:900;font-size:17px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
}
.term-box{
  flex:0 0 auto;width:60px;height:80px;border-radius:12px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.term-box b{font-size:23px;font-weight:900;line-height:1;}
.term-box span{font-size:11px;font-weight:700;margin-top:4px;}
.term-box.t1{background:#F8DDE2;color:#333;}
.term-box.t2{background:#EDB1BB;color:#fff;}
.term-box.t3{background:#e84545;color:#fff;}
.term-box.t4{background:#AF3441;color:#fff;}
.term-dots{
  flex:0 0 auto;width:74px;height:8px;color:#c7c7c7;
  background-image:radial-gradient(currentColor 2px,transparent 2px);
  background-size:12px 8px;background-repeat:repeat-x;background-position:left center;
}
/* 更新ラベル（吹き出し）：対象ボックス中央（＝矢印の接続部）を指す */
.term-flag{
  position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--red-dark);color:#fff;font-size:14px;font-weight:700;
  padding:7px 15px;border-radius:8px;white-space:nowrap;font-style:normal;
}
.term-flag::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--red-dark);
}

/* 下段：矢印ブロック（上段チップ群の直下にピクセル整合させる）
   チップ座標: 契約84 / ボックス60 / ドット74 / gap9
   各矢印は「左フラット＋右三角」の五角形。矢印同士は重ねず、
   前の矢印の先端が次の矢印のフラット面へ向かい、白い三角スキマで接続する。
   接続部（先端＝フラット面）は 4/16/28ヶ月目 の中央直下に来る。
   a1=1〜3ヶ月目下, a2=4〜15下, a3=16〜27下, a4=28〜 下 */
.term-arrows{display:flex;margin-top:22px;align-items:stretch;}
.term-arrow{
  flex:0 0 auto;
  height:76px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:21px;padding-right:36px;
  clip-path:polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%);
}
.term-arrow.a1{background:#F5CDD4;color:#8a2b36;margin-left:93px;width:200px;}
.term-arrow.a2{background:#EDB1BB;color:#fff;margin-left:8px;width:213px;}
.term-arrow.a3{background:#e84545;color:#fff;margin-left:8px;width:282px;}
.term-arrow.a4{background:#AF3441;color:#fff;margin-left:8px;width:145px;}

.term-note{text-align:center;color:#555;font-size:20px;margin-top:40px;font-weight:800;}

/* =========================================================
   サービス開始までの流れ
   ========================================================= */
.step-sec{background:var(--pink-bg);}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:34px 20px 24px;text-align:center;position:relative;margin-top:22px;
}
.step-badge{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;background:var(--red);color:#fff;
  font-weight:900;font-size:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 5px 14px rgba(200,16,46,.4);
}
.step-badge small{font-size:10px;font-weight:700;letter-spacing:.05em;}
.step-h{font-size:20px;font-weight:900;margin:27px 0;}
.step-img{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:27px;}
.step-img img{width:auto;}
.step-card p{font-size:15.5px;color:#4b4b4b;text-align:left;line-height:1.7;font-weight:800;}

.diff-card.point-bgcard {
    overflow: visible;
    position: relative;
}
.point-badge {
    top: -51px;
    z-index: 999;
}

/* =========================================================
   コミュニケーション体制
   ========================================================= */
.comm-sec{background:#fff;}
.comm-group{
  display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:start;
  padding:36px 0;border-bottom:1px solid var(--gray-line);
}
.comm-group:last-child{border-bottom:none;}
.comm-label{font-weight:900;font-size:28px;padding-top:4px;padding-left:70px;}
.comm-rows{display:flex;flex-direction:column;gap:34px;}
.comm-row{display:flex;gap:28px;align-items:center;}
.comm-icon{flex:0 0 auto;width:130px;display:flex;align-items:center;justify-content:center;}
.comm-icon img{max-width:115%px;width:110%;}
.comm-body h3{font-size:28px;font-weight:900;margin-bottom:8px;}
.comm-body p{font-size:18px;color:#4b4b4b;line-height:1.9;font-weight:800;}

/* =========================================================
   FAQ
   ========================================================= */
.faq-sec{background:#fff;}
.faq-list{list-style:none;}
.faq-item{margin-bottom:34px;}
.faq-item:last-child{margin-bottom:0;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:default;
  display:flex;align-items:flex-start;gap:16px;padding:0 0 12px;font-size:21px;font-weight:800;color:var(--ink);
  font-family:inherit;line-height:1.7;
}
.faq-mark{color:#e0a83c;font-weight:900;font-size:24px;line-height:1.4;flex:0 0 24px;}
.faq-mark.a{color:var(--red);}
.faq-toggle{display:none;}
.faq-a{
  display:grid;grid-template-columns:24px 1fr;gap:16px;align-items:start;padding:0;
}
.faq-a p{font-size:21px;font-weight:800;color:var(--ink);line-height:1.95;}

/* =========================================================
   最終CTA / フッター
   ========================================================= */
.final-cta{
  background:linear-gradient(120deg,var(--red),var(--red-dark));
  color:#fff;text-align:center;padding:70px 0;
}
.final-cta-title{font-size:clamp(24px,4vw,36px);font-weight:900;margin-bottom:14px;}
.final-cta-sub{font-size:15px;margin-bottom:30px;opacity:.95;}
.final-btn{background:#fff;color:var(--red);padding:20px 60px;font-size:clamp(18px,2.6vw,24px);box-shadow:0 8px 22px rgba(0,0,0,.25);}
.final-btn:hover{background:#fff;color:var(--red-dark);}

/* dinnovation.jp 準拠フッター */
.dj-footer{background:#fff;border-top:1px solid #efe7d8;padding:56px 0 0;}
.dj-footer-inner{
  max-width:1120px;margin:0 auto;padding:0 24px;
  display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap;
}
.dj-footer-logo img{height:44px;width:auto;}
.dj-footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.dj-footer-h{font-weight:900;font-size:16px;color:#2b2b2b;margin-bottom:16px;letter-spacing:.02em;}
.dj-footer-h span{font-weight:500;font-size:11px;color:#999;margin-left:6px;}
.dj-footer-col ul{list-style:none;}
.dj-footer-col li{margin-bottom:11px;}
.dj-footer-col a{color:#555;font-size:13.5px;transition:color .2s;}
.dj-footer-col a:hover{color:var(--amber);}
.dj-footer-company li{margin-bottom:14px;}
.dj-footer-company a{font-weight:900;color:#2b2b2b;font-size:15px;}
.dj-footer-company a span{display:inline-block;font-weight:500;color:#999;font-size:11px;margin-left:6px;}
.dj-copy{text-align:center;color:#aaa;font-size:12px;padding:40px 0 24px;letter-spacing:.03em;}

/* 固定CTA（SPのみ表示） */
.fixed-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--red);color:#fff;text-align:center;font-weight:900;font-size:17px;
  padding:16px;box-shadow:0 -4px 14px rgba(0,0,0,.2);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1024px){
  .worry-grid,.problem-grid,.step-grid{grid-template-columns:repeat(2,1fr);}
  .member-grid{grid-template-columns:repeat(2,1fr);}
  /* タブレット(2カラム)：STEP画像が縦にはみ出しタイトルに重なるのを防ぐ */
  .step-img{height:auto;margin-bottom:16px;}
  .step-img img{max-width:min(240px,52%);max-height:170px;height:auto;}
}

/* タブレット〜小型ラップトップ：FVの見出しが横幅に対して大きすぎて崩れるため縮小。
   1121px以上（＝コンテナ最大1120pxに収まる幅・PC）は 70px のまま不変。 */
@media (max-width:1120px){
  .fv-title{font-size:clamp(38px,5.3vw,64px);}
  .fv-price{font-size:clamp(23px,3vw,36px);}
  .fv-lead-hl{font-size:clamp(18px,2.4vw,25px);letter-spacing:2px;}
  .fv-badge{left:-14%;}

  /* タブレット以下：3カラム（テキスト｜スマホ｜テキスト）だとテキスト列が狭く
     読みづらいので、スマホを上・テキストを下に縦積みする */
  .channel-grid{grid-template-columns:1fr;gap:12px;}
  .channel-col:first-child,.channel-col:last-child{text-align:center;}
  .channel-col:first-child{order:2;}
  .channel-phone{order:1;}
  .channel-col:last-child{order:3;}
  .channel-item{margin-bottom:26px;}
  .channel-h{font-size:clamp(21px,3.2vw,28px);padding-top:6px;        width:215px;}
  .channel-h::before{width:46px;height:46px;top:-2px;left:-9px;}
  .channel-item p{font-size:clamp(14px,2.2vw,18px);line-height:1.85;}
}

@media (max-width:900px){
  .dj-nav{display:none;}
  .dj-burger{display:flex;}
  .dj-header-bar{padding:12px 16px 12px 22px;border-radius:44px;}
  .dj-nav-sp{
    display:flex;flex-direction:column;gap:6px;
    max-width:1200px;margin:8px auto 0;padding:0 4px;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .dj-header.open .dj-nav-sp{max-height:260px;}
  .dj-nav-sp a{background:#fff;border-radius:14px;padding:14px 20px;font-weight:700;color:#3a3a3a;box-shadow:0 3px 10px rgba(150,110,40,.1);}
  .dj-nav-sp .dj-contact-sp{text-align:center;}
  .dj-header.open .dj-burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .dj-header.open .dj-burger span:nth-child(2){opacity:0;}
  .dj-header.open .dj-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}

@media (max-width:768px){
  .section{padding:56px 0;}
  .container{padding:0 18px;}
  .dj-footer-inner{flex-direction:column;gap:32px;}
  .dj-footer-cols{gap:36px;}

  /* ============ SP：全体的に文字サイズを縮小 ============ */
  .worry-head{font-size:16px;padding:10px;}
  .worry-text{font-size:14px;}
  .point-h{font-size:clamp(17px,4.6vw,22px);}
  .point-body p{font-size:14.5px;text-align:left;}
  .point-num{font-size:40px;}
  .about-table th,.about-table td{font-size:14px;padding:8px 6px;}
  .about-note{font-size:clamp(18px,5vw,24px);}
  .about-note::after{display:none;}
  .cta-pill{font-size:clamp(18px,5vw,26px);letter-spacing:3px;padding:16px;}
  .diff-head{font-size:18px;padding:11px;}
  .diff-card p{font-size:14.5px;}
  .member-tags{font-size:13.5px;}
  .member-name{font-size:16px;}
  .case-label{font-size:15px;}
  .case-box p{font-size:12px;}
  .client-visual{font-size:20px;}
  .term-note{font-size:14px;}
  .step-h{font-size:17px;margin:18px 0 14px;}
  /* SP：画像が縦にはみ出してタイトル/バッジに重なるのを防ぐ */
  .step-img{height:auto;margin-bottom:16px;}
  .step-img img{max-width:min(230px,62%);max-height:150px;height:auto;}
  .step-card p{font-size:13.5px;}
  /* CTAリード文を1行に収める */
  .cta-lead{font-size:14px;}
  .cta-lead::before,.cta-lead::after{width:14px;margin:0 7px;}
  .comm-label{font-size:19px;padding-left:12px;}
  .comm-body h3{font-size:17px;}
  .comm-body p{font-size:14px;}
  .faq-q{font-size:15.5px;gap:12px;}
  .faq-mark{font-size:19px;flex-basis:20px;}
  .faq-a{grid-template-columns:20px 1fr;gap:12px;}
  .faq-a p{font-size:14.5px;line-height:1.85;}
  .final-cta-title{font-size:clamp(20px,5.4vw,30px);}
  .final-cta-sub{font-size:14px;}

  .block-title{font-size:clamp(21px,5.8vw,30px);margin-bottom:26px;}
  .block-title.big{font-size:clamp(23px,6.4vw,32px);}
  .deco-title{font-size:clamp(18px,5.2vw,26px);}
  .deco-title::before,.deco-title::after{width:18px;margin:0 8px;}
  .deco-mini{font-size:14px;}
  .deco-mini::before,.deco-mini::after{width:14px;margin:0 8px;}

  .fv-inner{flex-direction:column;text-align:center;padding:40px 20px 46px;}
  .fv-copy{flex-basis:auto;}
  .fv-lead{text-align:left;}
  .fv-lead-hl{font-size:clamp(16px,4.6vw,22px);line-height:2;letter-spacing:1px;padding:0 12px;}
  .fv-price{font-size:clamp(19px,5vw,30px);}
  .fv-title{font-size:clamp(30px,8.5vw,46px);}
  .fv-btn{left:0;top:0;font-size:clamp(17px,4.6vw,22px);padding:13px 40px;margin-top:14px;}
  .fv-visual{margin-top:10px;}
  .fv-phone{width:min(240px,64%);}
  .fv-badge{width:96px;height:96px;top:-6px;left:6%;}

  /* 本文リード文（大きすぎる見出し説明をSP向けに縮小） */
  .section-desc{font-size:clamp(15px,3.8vw,18px);margin-bottom:24px;}
  /* SP専用改行を有効化 */
  br.only-sp{display:inline;}
  /* 対応領域の図：SPでは画面幅いっぱいの領域内で画像を大きめに表示し、横スクロール（契約期間の図と同様） */
  .area-funnel{
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:16px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  .area-funnel img{width:820px;max-width:none;height:auto;display:block;}
  /* SP：実績／メンバー／コミュニケーションの説明文を左寄せ */
  .results .section-desc.center,
  .member-sec .section-desc.center,
  .comm-sec .section-desc.center{text-align:left;}
  /* SP：「だけど...」と課題セクションの間の余白を詰める */
  .channel-sec{padding-bottom:18px;}
  .but-text{margin-top:22px;}
  .problem-sec{padding-top:6px;}

  /* 料金：固定報酬 ＋ 成果報酬 を縦積みに */
  .price-box-wrap{flex-direction:column;gap:10px;}
  .price-box{width:100%;max-width:360px;min-width:0;padding:24px 20px;}
  .price-label{font-size:clamp(20px,5.4vw,28px);}
  .price-value{font-size:clamp(18px,5vw,26px);}
  .price-value strong{font-size:clamp(34px,9vw,48px);}
  .price-plus{font-size:34px;}
  .price-note{font-size:clamp(15px,4vw,20px);letter-spacing:1px;}


  /* だけど（課題）SP調整 */
  .problem-q{font-size:clamp(16px,4.4vw,20px);margin-bottom:8px;}
  .problem-img{margin-top:40px;}
  .problem-concl{font-size:clamp(19px,5vw,26px);line-height:1.65;}
  .problem-labels{gap:22px;margin-bottom:32px;}
  .problem-labels span{font-size:clamp(14px,3.8vw,17px);padding:14px 22px;}
  .problem-labels span:nth-child(1){width:auto;max-width:100%;}
  .problem-labels span::after{border-width:11px;}

  .point-row,.point-row.reverse{flex-direction:column;gap:14px;text-align:center;}
  .point-h{border-bottom:none;}
  .point-num{margin:0 auto;}

  .about-grid{flex-direction:column;gap:10px;}
  .about-arrow{transform:rotate(90deg);}
  /* SP：縦積み時に flex-basis が最小高さになり余白が出るのを解消 */
  .about-team,.about-table{flex:0 0 auto;width:100%;max-width:420px;}
  .about-table{max-width:560px;}

  .diff-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
.diff-grid.point-bggrid{
    gap: 80px;
}
  .case-card{width:100%;}
  .case-body{flex-direction:column;gap:14px;margin-top:18px;}
  .case-phone{flex:0 0 auto;}
  .case-phone img{height:auto;width:min(210px,58%);margin:0 auto;}
  .case-title{font-size:17px;}
  .case-splide .splide__arrow--prev{left:calc(50% - 210px);}
  .case-splide .splide__arrow--next{right:calc(50% - 210px);}

  /* 運用の流れ：SPは説明文を左寄せ、図のテキストは各1行に収める */
  .flow-sec .section-desc.center{text-align:left;}
  .flow-chev{font-size:12px;height:46px;}
  .flow-chev.h-strategy,.flow-chev.m1{padding-right:34px;white-space:nowrap;
    clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%);}
  .flow-chev.h-action,.flow-chev.m2{padding-left:34px;padding-right:34px;white-space:nowrap;
    clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 34px 50%);}
  .flow-boxrow{gap:12px;margin:10px 0;}
  /* ボックス内のピルは1列にして各テキストを1行表示 */
  .flow-box{padding:12px 9px;grid-template-columns:1fr;gap:7px;}
  .flow-pill{font-size:12px;padding:8px 6px;white-space:nowrap;}

  .comm-group{grid-template-columns:1fr;gap:10px;}
  .comm-label{border-left:4px solid var(--red);padding-left:12px;}

  .fixed-cta{display:block;}
  body{padding-bottom:56px;}
  .carousel-arrow.prev{left:-2px;}
  .carousel-arrow.next{right:-2px;}
  .carousel-arrow{width:40px;height:40px;font-size:24px;}
}
@media (max-width: 700px) {
    .channel-h {
        width: 190px;
    }
}
@media (max-width:576px){
  .case-splide .splide__arrow--prev{left:calc(50% - 162px);}
  .case-splide .splide__arrow--next{right:calc(50% - 162px);}
}

@media (max-width:520px){
  .step-grid{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto;}
  /* お悩みはSPでも2列。カードを詰めて狭幅に収める */
  .worry-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .worry-img{padding:14px 10px 2px;}
  .worry-img img{height:104px;}
  .worry-text{padding:4px 8px 16px;font-size:13px;}
  .worry-head{font-size:14px;padding:9px;}
  /* 課題（だけど...）はSPでも2列。円と画像を小さくして収める */
  .problem-grid{grid-template-columns:repeat(2,1fr);gap:18px 12px;}
  .problem-img{width:96px;height:96px;margin-top:24px;}
  .problem-q{font-size:14px;}
  /* メンバーはSPでも2列。カードはアバターを上、タグ・氏名を下に縦積みして幅を圧縮 */
  .member-grid{grid-template-columns:repeat(2,1fr);gap:26px 14px;}
  .member-card{max-width:none;}
  .member-row{flex-direction:column;align-items:center;gap:10px;text-align:center;}
  .member-photo{width:84px;height:84px;}
  .member-tags{text-align:center;font-size:12.5px;line-height:1.6;}
  .member-name{margin-left:0;font-size:15px;margin-top:10px;text-align:center;}
  .genre-tags li{min-width:120px;flex:1 1 40%;}
  .price-plus{transform:rotate(90deg);}
  .about-roles li{font-size:11px;}
}