/* =============================================================
   DOCUS REVOLUTION 2 LP  -  style.css （SVG方針・骨組み）
   ・デザイン部分はセクション単位のSVG（.ph-svg）で差し込み
   ・HTMLで残すのは：CTAボタン / USER's VOICE / SPEC・シャフト・PRICE
============================================================= */

/* ---------- カラー変数 ---------- */
:root{
  --red:      #d7002e;
  --red-dark: #9e0016;
  --blue:     #0068b7;
  --blue-dark:#00224f;
  --navy:     #001233;
  --ink:      #1a1a1a;
  --gray:     #6b7280;
  --line:     #d9dde3;
  --bg:       #ffffff;

  --grad-red: linear-gradient(90deg, var(--red-dark), var(--red));
  --grad-blue:linear-gradient(90deg, var(--blue), var(--blue-dark));
  --grad-br:  linear-gradient(90deg, var(--red) 0%, #6a2b8c 50%, var(--blue) 100%);

  --maxw: 100%;   /* 全画面表示（横幅いっぱい） */
}

/* ---------- リセット ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{ overflow-x:hidden; }

/* =============================================================
   ローディング画面（黒背景・テクノロジー調）
============================================================= */
#loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, #141416 0%, #000 70%);
  overflow:hidden;
  transition:opacity .6s ease, visibility .6s;
}
#loader.is-hidden{ opacity:0; visibility:hidden; }
/* 背景のテック・グリッド */
#loader::before{
  content:""; position:absolute; inset:-60% -20% -20%;
  background-image:
    linear-gradient(rgba(230,0,0,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,0,0,.10) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(420px) rotateX(58deg);
  transform-origin:50% 100%;
  animation:ldGrid 6s linear infinite;
  opacity:.5;
}
@keyframes ldGrid{ from{ background-position:0 0; } to{ background-position:0 46px; } }
/* 走査線 */
.loader__scan{
  position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg, transparent, rgba(255,40,40,.85), transparent);
  box-shadow:0 0 14px rgba(255,30,30,.7);
  animation:ldScan 2.6s linear infinite;
}
@keyframes ldScan{ 0%{ top:-2%; } 100%{ top:102%; } }
.loader__core{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  width:min(340px,64%);
}
.loader__logo{
  width:100%; height:auto; display:block;
  animation:ldPulse 1.8s ease-in-out infinite;
}
@keyframes ldPulse{
  0%,100%{ opacity:.82; filter:drop-shadow(0 0 8px rgba(230,0,0,.4)); }
  50%{ opacity:1; filter:drop-shadow(0 0 22px rgba(255,20,20,.85)); }
}
/* 回転リング（テック感） */
.loader__ring{
  position:absolute; top:50%; left:50%; width:150%; aspect-ratio:1;
  transform:translate(-50%,-60%); border-radius:50%;
  border:1px solid rgba(230,0,0,.12);
  border-top-color:rgba(255,40,40,.75);
  animation:ldSpin 1.1s linear infinite; pointer-events:none;
}
@keyframes ldSpin{ to{ transform:translate(-50%,-60%) rotate(360deg); } }
/* インジケータ・バー */
.loader__bar{
  position:relative; width:100%; height:3px; border-radius:2px;
  background:rgba(255,255,255,.10); overflow:hidden;
}
.loader__bar span{
  position:absolute; top:0; left:-40%; width:40%; height:100%; border-radius:2px;
  background:linear-gradient(90deg, transparent, #e60000, #ff4040, transparent);
  animation:ldBar 1.2s ease-in-out infinite;
}
@keyframes ldBar{ 0%{ left:-40%; } 100%{ left:100%; } }
.loader__text{
  font-family:"Oswald",sans-serif; letter-spacing:.42em; text-indent:.42em;
  font-size:11px; color:#9aa0a6;
}
.loader__text::after{ content:"..."; animation:ldDots 1.4s steps(4,end) infinite; }
@keyframes ldDots{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%,100%{ content:"..."; } }
@media (prefers-reduced-motion:reduce){
  #loader::before,.loader__scan,.loader__logo,.loader__ring,.loader__bar span,.loader__text::after{ animation:none; }
}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);
  line-height:1.8;
  background:#e9ebee;
  font-size:15px;
}
img{ display:block; width:100%; height:auto; }
ul{ list-style:none; }
a{ text-decoration:none; color:inherit; }

.lp{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--bg);
  overflow:hidden;
}

/* =============================================================
   プレースホルダ
   ・.ph-svg    … セクション単位のSVGが入る枠
   ・その他 .ph … 写真（jpg/png）が入る枠
   差し込み時は <div class="ph..."> を <img> に置き換えます。
============================================================= */
.ph{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:4px;
  background:repeating-linear-gradient(45deg,#eef0f3 0 12px,#e6e9ee 12px 24px);
  color:#8a93a0;
  font-size:12px;
  border:1px dashed #b9c0cb;
  min-height:120px;
  padding:8px;
}
.ph small{ font-size:10.5px; color:#a2abb6; }

/* セクションSVG枠：横幅いっぱい、高さはSVG差し込み後に自動 */
.ph-svg{
  width:100%;
  min-height:340px;
  background:repeating-linear-gradient(45deg,#e7ebf1 0 16px,#dfe4ec 16px 32px);
  color:#7a8492;
  font-family:"Oswald",sans-serif;
  letter-spacing:.06em;
  font-size:15px;
}
.ph-svg--ribbon{ min-height:60px; }

.ph-sq{ aspect-ratio:1/1; min-height:0; }
.ph-shaft{ min-height:60px; }
.ph-voice{ min-height:200px; }
.ph-video{ min-height:100%; background:#111; color:#888; border-color:#333; }

/* SVGセクションの外枠（余白なし・詰めて並べる） */
.svgsec{ display:block; font-size:0; line-height:0; }
.svgsec .cta{ font-size:15px; line-height:1.8; }
/* セクションSVG／帯画像：横幅いっぱいのブロック */
.secimg{ display:block; width:100%; height:auto; }

/* 透過SVGセクションの背景（カンプ実測色）
   ※これらのSVGは文字・グラフィックのみ透過書き出し。背景はCSSで敷く。 */
.sec-question{ background:linear-gradient(180deg,#12233e 0%,#0d68af 100%); }  /* QUESTION：青系グラデ */
/* ANSWER：支給の背景画像（下向きの尖り／両下隅が透過）。尖りは下のBRANDに食い込む */
.sec-answer{ position:relative; z-index:2;
  background:url(images/answer_back.png) center top / 100% 100% no-repeat; }
.sec-black{    background:#0a0b0d; }                                          /* TECHNOLOGY：黒 */
.sec-white{    background:#ffffff; }                                          /* 月間30本：白 */
.sec-light{    background:linear-gradient(180deg,#ffffff 0%,#eef1f5 100%); }  /* HEAD COVER：白〜淡グレー */
/* BRANDをANSWERの尖りの分だけ上に重ねる（marginは幅基準＝レスポンシブで比率維持） */
.sec-brand{ position:relative; z-index:1; margin-top:-7.3%; }

/* =============================================================
   HERO（背景画像／テキストSVG／ボタンの3レイヤー）
   ・hero__bg を全面カバー、テキストSVGが高さを決め、ボタンは下部余白に重ねる
============================================================= */
.hero{ position:relative; background:#050608; overflow:hidden; line-height:0; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__text{ position:relative; z-index:1; display:block; width:100%; height:auto;
  /* 焼き込みの「SCROLL」を穴あきマスクで消す（背景を透かす）→ 上に動くscroll.pngを重ねる */
  -webkit-mask:radial-gradient(ellipse 4.6% 3.7% at 48.72% 52.58%, transparent 66%, #000 90%);
          mask:radial-gradient(ellipse 4.6% 3.7% at 48.72% 52.58%, transparent 66%, #000 90%);
}
/* SCROLL（上下に動く・押すと次のセクションへ） */
.hero__scroll{ position:absolute; left:48.72%; top:52.58%; transform:translate(-50%,-50%);
  width:5.4%; min-width:34px; z-index:3; cursor:pointer; line-height:0; }
.hero__scroll img{ display:block; width:100%; animation:scrollBounce 1.6s ease-in-out infinite; }
@keyframes scrollBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(32%); } }
@media (prefers-reduced-motion:reduce){ .hero__scroll img{ animation:none; } }
/* ボタンはコピー下の余白帯（高さ約77〜100%）に配置。
   .cta.hero__cta と2クラス指定で、共通.ctaの白背景に勝たせる */
.cta.hero__cta{
  position:absolute; left:0; right:0; bottom:3.5%;
  z-index:2; background:transparent; padding:0;
  line-height:1.8;
}

/* =============================================================
   共通：バータイトル（SPEC / PRICE）／ CTAボタン
============================================================= */
.bar-title{
  font-family:"Oswald",sans-serif;
  letter-spacing:.35em;
  text-indent:.35em;
  font-size:20px;
  text-align:center;
  color:#fff;
  padding:12px 0;
  background:var(--grad-br);
}

.cta{ display:flex; flex-direction:column; gap:14px; align-items:center; padding:24px 20px; background:#fff; }
.btn{
  width:min(420px,86%);
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size:17px;
  letter-spacing:.04em;
  padding:16px 20px;
  border-radius:40px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn span{ margin-left:6px; }
.btn--red{ background:var(--grad-red); }
.btn--blue{ background:var(--grad-blue); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.25); }

/* =============================================================
   VIDEO
============================================================= */
.video{ background:#000; }
.video__frame{ position:relative; aspect-ratio:16/9; background:#000; }
.video__frame .ph-video{ position:absolute; inset:0; }
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* =============================================================
   TOPへ戻るボタン
============================================================= */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:50;
  width:60px; height:60px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.to-top:hover{ transform:translateY(-3px); }
@media (max-width:560px){ .to-top{ width:50px; height:50px; right:12px; bottom:12px; } }

/* =============================================================
   画像拡大ライトボックス
============================================================= */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.88); padding:24px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
  cursor:zoom-out;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:96%; max-height:92%; width:auto; height:auto;
  border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.lightbox__close{ position:absolute; top:16px; right:22px; color:#fff;
  font-size:38px; line-height:1; cursor:pointer; font-family:sans-serif; }

/* =============================================================
   USER's VOICE（HTMLテキスト維持）
============================================================= */
.voice{ color:#fff; padding:0; }
/* 写真は左右とも約33%幅・カード全高。背景は 写真左=黒／写真右=濃グレー */
.voice-card{ display:grid; grid-template-columns:33% 1fr; align-items:stretch; background:#020202; min-height:360px; }
.voice-card--rev{ grid-template-columns:1fr 33%; background:#191919; }
.voice-card--rev .ph-voice,
.voice-card--rev .voice-photo{ order:2; }
.voice-card--rev .voice-card__body{ order:1; }
.voice-card__body{ padding:28px 30px; align-self:center; }
.ph-voice{ min-height:240px; height:100%; }
.voice-card img.voice-photo{ display:block; width:100%; height:100%; object-fit:cover; }
.voice-card__label{ display:block; width:min(300px,72%); height:auto; margin-bottom:6px; }
.voice-card__name{ font-size:18px; font-weight:700; margin:2px 0 10px; }
.voice-card__name span{ font-size:13px; font-weight:400; color:#c9ced4; }
.voice-card__text{ font-size:13px; line-height:1.9; color:#d7dbe0; }

/* =============================================================
   SPEC（HTMLテキスト維持）
============================================================= */
.spec{ background:#fff; }
.spec__inner{ padding:26px 20px 34px; max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:minmax(200px,32%) 1fr; gap:22px; align-items:start; }
.spec__imgs{ display:flex; flex-direction:column; gap:8px; }
.spec__imgs img{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:4px; background:#fff; }
.spec__img-sub{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* タップで拡大できる画像 */
.zoomable{ cursor:zoom-in; transition:opacity .15s ease; }
.zoomable:hover{ opacity:.85; }
.spec__table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.spec__table th,.spec__table td{ border:1px solid #3a3a3a; padding:9px 12px; vertical-align:middle; text-align:center; }
.spec__table th{ background:#2b2b2b; color:#fff; white-space:nowrap; font-weight:500; }
.spec__table td{ background:#fff; color:#1a1a1a; }
.spec__table .spec__cat{ background:#141414; width:40px; writing-mode:vertical-rl; letter-spacing:.25em; }
.spec__note-cell{ font-size:11px; line-height:1.75; }

/* =============================================================
   SHAFT（HTMLテキスト維持）
============================================================= */
.shaft{ background:#fff; padding:14px 20px 30px; max-width:1000px; margin:0 auto; }
.shaft-block{ margin-bottom:26px; }
.shaft__catch{ text-align:center; color:#fff; font-weight:700; font-size:clamp(14px,3.6vw,17px); padding:11px 12px; letter-spacing:.02em; }
.shaft__catch--red{ background:#e0192a; }
.shaft__catch--blue{ background:#0a63b0; }
.shaft-item{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; margin-top:14px; }
.shaft-item--rev .shaft-item__img{ order:2; }
.shaft-item__img{ position:relative; }
/* 画像プレースホルダ／実画像は横のテーブルと同じ高さに */
.shaft-item__img .ph-shaft{ position:absolute; inset:0; height:100%; min-height:0; }
.shaft-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:2px; }
.shaft-item__name{ position:absolute; top:12px; right:16px;
  font-family:"Oswald",sans-serif; font-size:clamp(18px,3.4vw,26px);
  color:#fff; letter-spacing:.03em; text-shadow:0 1px 5px rgba(0,0,0,.65); }
.shaft__table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.shaft__table th,.shaft__table td{ border:1px solid #3a3a3a; padding:7px 10px; }
.shaft__table th{ background:#2b2b2b; color:#fff; white-space:nowrap; text-align:center; font-weight:500; width:46%; }
.shaft__table td{ background:#fff; color:#1a1a1a; text-align:center; }

/* =============================================================
   PRICE（HTMLテキスト維持）
============================================================= */
.price{ background:#fff; padding-bottom:28px; }
.price__list{ padding:20px; display:flex; flex-direction:column; gap:10px; max-width:760px; margin:0 auto; }
.price__row{ display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--line); border-radius:4px; padding:13px 18px; font-size:14px; }
.price__name{ color:#333; }
.price__val{ font-weight:700; white-space:nowrap; }

/* =============================================================
   レスポンシブ
============================================================= */
@media (max-width:560px){
  body{ font-size:14px; }
  /* CTAボタンをモバイルで小さく */
  .cta{ padding:18px 16px; gap:10px; }
  .btn{ width:min(320px,84%); font-size:14px; padding:12px 16px; border-radius:30px; }
  .cta.hero__cta{ bottom:4%; }
  .voice-card,.voice-card--rev{ grid-template-columns:1fr; align-items:start; min-height:0; }
  .voice-card--rev .ph-voice,
  .voice-card--rev .voice-photo{ order:0; }
  .voice-photo{ height:auto; }   /* 1カラム時は自然高さで表示 */
  .spec__inner{ grid-template-columns:1fr; }
  .shaft-item,.shaft-item--rev{ grid-template-columns:1fr; align-items:start; }
  .shaft-item--rev .shaft-item__img{ order:0; }
  /* 1カラム時：画像を通常フロー配置にして確実に表示（絶対配置＋stretchだと高さ0で消える） */
  .shaft-item__img{ aspect-ratio:auto; }
  .shaft-photo{ position:static; width:100%; height:auto; }
  .ph-svg{ min-height:220px; }
}

/* =============================================================
   スマホ版 HERO（背景=hero-bg-sp.jpg／ロゴ・コピーは背景に焼き込み想定）
   ・キャンバス 750×1334px(@2x) ＝ CSS 375×667・比率0.562
   ・ボタン：上から75%、スクロール：上から94%
============================================================= */
@media (max-width:767px){
  .hero{
    aspect-ratio:750 / 1334; height:auto; overflow:hidden;
    background:#050608 url(images/hero-bg-sp.jpg) center/cover no-repeat;
  }
  .hero__bg{ display:none; }   /* PC用の背景imgは非表示（背景はCSSのSP画像） */
  /* SP用の文字SVG（svg-hero-text-sp.svg）を全面オーバーレイ。PC用マスクは無効化 */
  .hero__text{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    -webkit-mask:none; mask:none; }
  .cta.hero__cta{ top:75%; bottom:auto; padding:0; }
  .hero__scroll{ top:94%; left:50%; width:40px; min-width:0; }

  /* ANSWER（SP）：赤バナーanswer_back-sp(750×748)基準の高さにし、文字SVG(750×579)を上部配置。
     尖りは下のBRANDに食い込ませる */
  .sec-answer{ background-image:url(images/answer_back-sp.png); aspect-ratio:750 / 748; }
  .sec-answer .secimg{ position:absolute; top:0; left:0; width:100%; height:auto; }
  .sec-brand{ margin-top:-10.5%; }

  /* 表のnowrapによる横はみ出しを防止（スマホ・タブレット） */
  .spec__table th, .shaft__table th{ white-space:normal; }
  .secimg{ max-width:100%; }
}