@charset "utf-8";
/* =========================================================================
   index.css — トップページ固有スタイル
   （FV / イントロ / 3サービス / FAQ導線 / 新着情報セクション）
   ヘッダー・フッター・CTA赤帯・色変数等は common.css 参照。
   ========================================================================= */

/* ============ 01 ファーストビュー ============ */
.fv{
  position:relative;
  background:var(--red);
  color:#fff;
  overflow:hidden;
  min-height: calc(100vh - var(--header-h));
  display:flex; flex-direction:column; justify-content:flex-end;
}
.fv-watermark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:0;
}
.fv-watermark span{
  font-family:var(--en); font-weight:900;
  font-size:clamp(180px, 28vw, 460px);
  letter-spacing:-0.02em;
  color:rgba(255,255,255,0.14);
  line-height:.85; transform:translateY(-2%);
}
.fv-mascot{
  position:absolute; left:50%; bottom:-2%;
  transform:translateX(-50%);
  height:92%; width:auto; max-width:none;
  z-index:1; user-select:none; pointer-events:none;
  filter: drop-shadow(0 12px 0 rgba(0,0,0,0.18));
}
.fv-copy{
  position:relative; z-index:2;
  padding: 0 var(--gutter) 96px;
  max-width:var(--maxw); margin-inline:auto; width:100%;
}
.fv-copy h1{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(64px, 11vw, 180px);
  line-height:.9; letter-spacing:-0.04em;
  margin:0; color:#fff;
  text-shadow: 6px 6px 0 #000;
}
.fv-copy h1 .br{display:block}
.fv-bottombar{
  position:relative; z-index:3;
  padding: 24px var(--gutter) 32px;
  max-width:var(--maxw); margin-inline:auto; width:100%;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
}
.fv-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  color:#fff; opacity:.85; line-height:1.6;
}
.fv-tag .dotred{display:inline-block; width:8px; height:8px; background:#fff; margin-right:8px; transform:translateY(-2px)}

/* ============ 02 イントロ ============ */
.intro{ background:var(--cream); color:#000; padding: 140px 56px; }
.intro h2{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(40px, 5.4vw, 88px);
  line-height:1.05; letter-spacing:-0.03em;
  margin:24px 0 0; max-width:18ch;
}
.intro h2 em{
  font-style:normal;
  background:linear-gradient(transparent 62%, var(--red) 62%, var(--red) 88%, transparent 88%);
  padding: 0 .04em;
}
.intro .meta{
  margin-top:48px; display:flex; gap:48px; flex-wrap:wrap;
  font-family:var(--en); font-weight:700; letter-spacing:.06em; font-size:16px;
}
.intro .meta span:not(:last-child)::after{ content:"／"; margin-left:48px; opacity:.4; font-family:var(--jp) }

/* ============ 03 サービス ============ */
.svc{ position:relative; padding: 140px 56px; overflow:hidden; }
.svc-inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap:48px; align-items:center;
}
.svc-num{ font-family:var(--en); font-weight:800; font-size:18px; letter-spacing:.15em; opacity:.7; }
.svc h3{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(56px, 8vw, 140px);
  line-height:.95; letter-spacing:-0.04em; margin:16px 0 24px;
}
.svc-en{
  font-family:var(--en); font-weight:800;
  font-size:clamp(40px, 6vw, 96px); letter-spacing:-0.01em;
  line-height:.9; opacity:.18; margin-bottom:24px;
}
.svc p.lead{ font-size:20px; line-height:1.7; max-width:36ch; margin:0 0 36px; font-weight:500; }
.svc-link{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 26px; border:2px solid currentColor;
  font-family:var(--jp); font-weight:800; font-size:16px;
  transition: background .15s, color .15s, transform .15s;
}
.svc-link .arrow{ font-family:var(--en); font-weight:800; transition:transform .25s }
.svc-link:hover .arrow{ transform: translateX(8px) }
/* セルに決定的な高さを与える（パーセント高さの解決を確実にし、
   img の width/height 属性へ膨張するのを防ぐ）。img はセルの110%＝上にはみ出し、
   .svc の overflow:hidden でクリップされる（design-source の挙動を再現）。 */
.svc-mascot{ position:relative; height: clamp(420px, 56vw, 820px); display:flex; align-items:flex-end; justify-content:center; }
.svc-mascot img{ height:110%; width:auto; max-width:none; filter: drop-shadow(8px 8px 0 rgba(0,0,0,0.2)); }

/* 巨大背景文字 */
.svc-bg{
  position:absolute; left:-2%; bottom:-8%;
  font-family:var(--en); font-weight:900;
  font-size:clamp(180px, 26vw, 420px);
  line-height:.85; letter-spacing:-0.03em;
  opacity:.08; pointer-events:none; user-select:none; white-space:nowrap;
}

/* 色面バリアント */
.svc--black{ background:#000; color:#fff; }
.svc--black .svc-link:hover{ background:#fff; color:#000 }
.svc--black .svc-en{ color:#fff }
.svc--black .svc-mascot img{ transform:rotate(-4deg) }

.svc--cream{ background:var(--cream); color:#000 }
.svc--cream .svc-link:hover{ background:#000; color:#fff }
.svc--cream .svc-en{ color:#000 }
.svc--cream .svc-bg{ color:#000 }
.svc--cream .svc-mascot img{ transform:rotate(3deg) scale(1.05) }

.svc--red{ background:var(--red); color:#fff }
.svc--red .svc-link:hover{ background:#fff; color:var(--red) }
.svc--red .svc-en{ color:#fff }
.svc--red .svc-mascot img{ transform:rotate(-6deg) scale(1.08) }

/* 非対称（左右反転ブロック） */
.svc--rev .svc-inner{ grid-template-columns: .9fr 1.1fr; }
.svc--rev .svc-text{ order:2 }
.svc--rev .svc-mascot{ order:1 }

/* ============ 04 FAQ導線 ============ */
.reasons{
  background:var(--white); color:#000; padding: 140px 56px;
  border-top:2px solid #000; border-bottom:2px solid #000;
}
.reasons-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:48px;
  margin-bottom:80px; flex-wrap:wrap;
}
.reasons-head h2{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(40px, 5.4vw, 88px);
  line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0; max-width:14ch;
}
.reasons-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5; }
.reasons-head p{ max-width:36ch; font-size:16px; line-height:1.8; opacity:.8 }
.stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:0; border-top:2px solid #000; }
.stat{
  padding:48px 32px 56px;
  border-bottom:2px solid #000; border-right:2px solid #000; position:relative;
}
.stat:last-child{ border-right:none }
.stat .label{ font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; opacity:.7; }

.faq-item{ display:block; color:#000; transition: background .15s ease, color .15s ease; cursor:pointer; }
.faq-item:hover{ background:var(--red); color:#fff }
.faq-item:hover .label{ opacity:1 }
.faq-item:hover .faq-arrow{ transform: translateX(8px) }
.faq-q{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(32px, 3.6vw, 56px);
  line-height:1.05; letter-spacing:-0.03em; margin:24px 0 16px; text-wrap:balance;
}
.faq-q::before{
  content:"Q."; font-family:var(--en); font-weight:900; color:var(--red);
  font-size:.7em; margin-right:.15em; letter-spacing:-0.02em;
  display:inline-block; transform:translateY(-.05em);
}
.faq-item:hover .faq-q::before{ color:#000 }
.faq-item .desc{ font-size:14px; line-height:1.7; opacity:.85; max-width:24ch }
.faq-arrow{ display:inline-block; font-family:var(--en); font-weight:800; transition: transform .25s ease; margin-left:6px; }
.faq-foot{ margin-top:64px; display:flex; justify-content:center; }
.faq-allbtn{
  display:inline-flex; align-items:center; gap:14px;
  background:#000; color:#fff;
  font-family:var(--jp); font-weight:900; font-size:18px;
  padding:20px 32px; border:2px solid #000; box-shadow: 6px 6px 0 var(--red);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.faq-allbtn:hover{ background:var(--red); color:#fff; transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; }
.faq-allbtn .arrow{ font-family:var(--en); font-weight:800; transition: transform .25s ease; }
.faq-allbtn:hover .arrow{ transform: translateX(8px) }

/* ============ 05 新着情報 ============ */
.news{ background:var(--cream); padding: 140px 56px; }
.news-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:64px; flex-wrap:wrap;
}
.news-head h2{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(40px, 5.4vw, 88px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0;
}
.news-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5; }
.news-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; }
.news-card{
  background:#fff; border:2px solid #000;
  display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 0 0 #000;
}
.news-card:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 #000 }
.news-thumb{
  aspect-ratio: 16/10; position:relative; overflow:hidden;
  border-bottom:2px solid #000; background:#EFEDE6;
}
.news-thumb img{ width:100%; height:100%; object-fit:cover; }
.news-thumb--default{
  background: repeating-linear-gradient(45deg, #f8274f 0 14px, #e21c41 14px 28px);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.news-thumb--default .placeholder{
  font-family:var(--en); font-weight:900; font-size:48px; letter-spacing:-0.02em;
  text-shadow: 3px 3px 0 #000; line-height:.95; text-align:center;
}
.news-thumb--default .placeholder small{
  display:block; font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.2em; margin-top:6px; text-shadow:none; opacity:.9;
}
.news-body{ padding:24px 24px 28px; }
.news-meta{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.05em }
.news-cat{ display:inline-flex; align-items:center; justify-content:center; min-width:88px; box-sizing:border-box; text-align:center; background:var(--red); color:#fff; padding:4px 8px; font-family:var(--en); font-weight:800; letter-spacing:.1em; font-size:11px; }
.news-cat.is-seo{ background:var(--red) }   /* 全カテゴリ共通でピンク統一（互換のため残置） */
.news-date{ opacity:.7 }
.news-title{
  font-family:var(--jp); font-weight:700; font-size:18px; line-height:1.5;
  margin:14px 0 0; letter-spacing:-0.005em; text-wrap:pretty;
}
.news-foot{ margin-top:48px; display:flex; justify-content:center }
.news-foot .ghost{
  display:inline-flex; align-items:center; gap:14px;
  border:2px solid #000; padding:18px 32px;
  font-family:var(--jp); font-weight:800; font-size:16px;
  transition: background .15s, color .15s;
}
.news-foot .ghost:hover{ background:#000; color:#fff }
.news-foot .ghost .arrow{ font-family:var(--en); font-weight:800; transition:transform .25s }
.news-foot .ghost:hover .arrow{ transform:translateX(8px) }

/* =========================================================================
   レスポンシブ（≤960px：SP最適値）
   ========================================================================= */
@media (max-width: 960px){
  /* FV */
  .fv{ min-height: calc(100vh - 64px); }
  .fv-watermark{ align-items:flex-start; padding-top:14px }
  .fv-watermark span{ font-size:38vw; color:rgba(255,255,255,0.16) }
  .fv-mascot{ bottom:150px; height:min(500px, 104vw); }
  .fv-copy{ padding: 0 18px 14px }
  .fv-copy h1{ font-size:21vw; text-shadow:5px 5px 0 #000 }
  .fv-bottombar{ padding:18px; flex-direction:column; align-items:stretch; gap:16px }
  .fv-tag{ font-size:11px }
  .fv-bottombar .cta{ width:100%; justify-content:center }

  /* イントロ */
  .intro{ padding:72px 18px }
  .intro h2{ font-size:34px; line-height:1.1; margin:18px 0 0; max-width:none }
  .pc-br{ display:none }   /* PC用の意図的改行をSPでは無効化（自然な折り返しに・design-source SP版に合わせる） */
  .intro .meta{ margin-top:32px; flex-direction:column; gap:10px; font-size:15px }
  .intro .meta span{ padding-left:18px; position:relative }
  .intro .meta span:not(:last-child)::after{ content:none }   /* SPでは項目区切り「／」を出さない（PC側ルールと同詳細度で上書き） */
  .intro .meta span::before{ content:""; position:absolute; left:0; top:9px; width:10px; height:2px; background:var(--red) }

  /* サービス（design-source SP順：番号→英字→見出し→マスコット→リード→ボタン）
     svc-text を display:contents で展開し、子要素＋マスコットを order で並べ替える（PCは不変） */
  .svc{ padding:72px 18px }
  .svc-inner,
  .svc--rev .svc-inner{ grid-template-columns:1fr; gap:0 }
  .svc-text{ display:contents }
  .svc-num{ order:1; font-size:14px }
  .svc-en{ order:2; font-size:48px; margin:8px 0 16px }
  .svc h3{ order:3; font-size:52px; margin:0 0 20px }
  .svc-mascot{ order:4; height:auto; margin:4px 0 16px }
  .svc--rev .svc-mascot{ order:4 }   /* PC用 order:1 がSPに漏れるのを打ち消す（svc2の見出し位置） */
  .svc p.lead{ order:5; font-size:17px; line-height:1.75; margin:0 0 28px; max-width:none }
  .svc-link{ order:6; justify-self:start }   /* gridアイテム化で全幅に伸びるのを防ぐ（内容幅・左寄せ） */
  .svc-mascot img{ height:240px; width:auto; max-width:100% }
  .svc-bg{ font-size:38vw; left:-3%; bottom:-4% }

  /* FAQ導線 */
  .reasons{ padding:72px 18px }
  .reasons-head{ margin-bottom:36px; gap:16px }
  .reasons-head h2{ font-size:40px; max-width:none }
  .reasons-head p{ font-size:15px; max-width:none }
  .stats{ grid-template-columns:1fr }
  .stat{ padding:28px 4px; border-right:none }
  .faq-item .label{ font-size:11px }
  .faq-q{ font-size:30px }
  .faq-item .desc{ max-width:none }
  .faq-foot{ margin-top:40px }
  .faq-allbtn{ width:100%; justify-content:center; font-size:17px; padding:18px; box-shadow:5px 5px 0 var(--red) }

  /* 新着情報 */
  .news{ padding:72px 18px }
  .news-head{ margin-bottom:28px }
  .news-head h2{ font-size:40px }
  .news-list{ grid-template-columns:1fr; gap:24px }
  .news-thumb--default .placeholder{ font-size:44px }
  .news-body{ padding:20px 20px 24px }
  .news-meta{ font-size:11px }
  .news-title{ font-size:17px; text-wrap:wrap }   /* SP：pretty解除＝カード幅いっぱいで素直に折り返す */
  .news-foot{ margin-top:32px }
  .news-foot .ghost{ width:100%; justify-content:center; padding:18px; font-size:15px }
}

/* ===== 基準線統一：バンド（背景帯）は横paddingを持たない。
   左右gutterは内側コンテナ（.container / .svc-inner / .fv-copy 等）が担う ===== */
.intro, .svc, .reasons, .news{ padding-left:0; padding-right:0 }