/* 自動生成ファイル — 直接編集しないこと。
   scripts/build-lp-css.sh が assets/css/lp/*.css を結合して出力する。 */

/* ===== base.css ===== */
/* ==============================================
   LP Base（共通）
============================================== */

/* 英字の見出しフォント（Oswald）。
   Google Fonts から読むと外部ドメインへの接続（DNS→TLS→CSS）が
   そのままレンダリング待ちになるため、自己ホストに切り替えている。
   可変フォントなので 400〜600 をこの1ファイルで賄う。 */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../../fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 変数定義（デザインから抽出したカラー） */
:root {
  --lp-color-text-main: #333333; /* メインテキスト色 */
  --lp-color-accent-orange: #F3704B; /* ボタンのオレンジ色（近似値） */
  --lp-font-family-base: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  /* ReStart の alternate-gothic-atf に近いコンデンス英字 */
  --lp-font-family-en: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
}

/* LP全体のベーススタイル設定 */
.lp-main-wrap {
  background-color: #fff;
  color: var(--lp-color-text-main);
  font-family: var(--lp-font-family-base);
  line-height: 1.6;
  overflow-x: hidden; /* 横スクロール防止 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 共通コンテナ（コンテンツ幅の制御） */
.lp-container {
  width: 100%;
  max-width: 1200px; /* PCでの最大幅 */
  margin: 0 auto;
  padding: 0 24px; /* スマホでの左右余白 */
  box-sizing: border-box;
}

/* 画像のレスポンシブ化 */
.lp-main-wrap img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* vLive 遷移：PC / スマホ共通で右下固定（movevlive.webp） */
.lp-vlive-fab {
  display: block;
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  left: auto;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 1190;
  line-height: 0;
  padding: 6px;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lp-vlive-fab:hover {
  opacity: 0.95;
}

.lp-vlive-fab:active {
  transform: scale(0.96);
  opacity: 0.9;
}

.lp-vlive-fab:focus-visible {
  outline: 2px solid var(--lp-color-accent-orange);
  outline-offset: 3px;
  border-radius: 12px;
}

.lp-vlive-fab img {
  display: block;
  width: auto;
  max-width: min(200px, 18vw);
  height: auto;
  vertical-align: bottom;
}

@media screen and (max-width: 768px) {
  .lp-vlive-fab img {
    max-width: min(44vw, 168px);
  }
}

/* セクション見出し（共通） */
.lp-section-head {
  margin-bottom: 18px;
}
.lp-section-title {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--lp-font-family-base);
  font-size: 1.6rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.04em;
}

.lp-section-title::before {
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 66, 66, 0.75) 0%, rgba(243, 112, 75, 0.55) 55%, rgba(104, 70, 255, 0.5) 100%);
  transform-origin: left center;
}

/* Section label (ReStart風の英字) */
.lp-featured .lp-section-title::after {
  content: 'おすすめ記事';
  order: -1;
  font-family: var(--lp-font-family-base);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.6);
}

/* Featured: 日本語ラベルだけ表示（h2本文は視覚的に隠す） */
.lp-featured .lp-section-title {
  font-size: 0;
  letter-spacing: 0;
  gap: 10px;
}

/* News: 日本語ラベルだけ表示（h2本文は視覚的に隠す） */
.lp-news .lp-section-title::after {
  content: 'ニュース';
  order: -1;
  font-family: var(--lp-font-family-base);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.6);
}

.lp-news .lp-section-title {
  font-size: 0;
  letter-spacing: 0;
  gap: 10px;
}

/* Partners: 日本語ラベルだけ表示（h2本文は視覚的に隠す） */
.lp-partners .lp-section-title::after {
  content: 'パートナー事務所';
  order: -1;
  font-family: var(--lp-font-family-base);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.6);
}

.lp-partners .lp-section-title {
  font-size: 0;
  letter-spacing: 0;
  gap: 10px;
}

/* Articles: 日本語ラベルだけ表示（h2本文は視覚的に隠す） */
.lp-articles .lp-section-title::after {
  content: '記事一覧';
  order: -1;
  font-family: var(--lp-font-family-base);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.6);
}

.lp-articles .lp-section-title {
  font-size: 0;
  letter-spacing: 0;
  gap: 10px;
}

/* Updates: 日本語ラベルだけ表示（h2本文は視覚的に隠す） */
.lp-updates .lp-section-title::after {
  content: '更新情報';
  order: -1;
  font-family: var(--lp-font-family-base);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.6);
}

.lp-updates .lp-section-title {
  font-size: 0;
  letter-spacing: 0;
  gap: 10px;
}

/* Diagnosis: 日本語ラベルだけ表示（h2本文は視覚的に隠す） */
.lp-diagnosis .lp-section-title::after {
  content: '解決したい悩み診断';
  order: -1;
  font-family: var(--lp-font-family-base);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.6);
}

.lp-diagnosis .lp-section-title {
  font-size: 0;
  letter-spacing: 0;
  gap: 10px;
}

/* Editor: 日本語ラベルだけ表示（h2本文は視覚的に隠す） */
.lp-editor .lp-section-title::after {
  content: '編集者情報';
  order: -1;
  font-family: var(--lp-font-family-base);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.6);
}

.lp-editor .lp-section-title {
  font-size: 0;
  letter-spacing: 0;
  gap: 10px;
}

@media screen and (max-width: 768px) {
  .lp-section-title {
    font-size: 1.45rem;
    gap: 8px;
  }
  .lp-section-title::before {
    width: 40px;
  }
  .lp-featured .lp-section-title::after,
  .lp-news .lp-section-title::after,
  .lp-partners .lp-section-title::after,
  .lp-articles .lp-section-title::after,
  .lp-updates .lp-section-title::after,
  .lp-diagnosis .lp-section-title::after,
  .lp-editor .lp-section-title::after {
    font-size: 0.86rem;
  }
}

/* CTAボタンのスタイリング（共通） */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, filter 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.lp-btn--orange {
  /* Live配信UIっぽい：ライト基調＋ガラス感＋控えめ発光 */
  background:
    radial-gradient(120% 140% at 18% 12%, rgba(255, 66, 66, 0.14) 0%, rgba(255, 66, 66, 0) 58%),
    radial-gradient(120% 140% at 85% 10%, rgba(104, 70, 255, 0.12) 0%, rgba(104, 70, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 248, 248, 0.92) 100%);
  color: #111 !important; /* SWELLの文字色指定を強制上書き */
  padding: 16px 54px 16px 46px;
  border-radius: 18px;
  font-size: clamp(0.82rem, 2.2vw, 1.05rem);
  white-space: nowrap;
  border: 1px solid rgba(17, 17, 17, 0.18);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 14px 38px rgba(255, 66, 66, 0.12),
    0 12px 34px rgba(104, 70, 255, 0.1);
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-height: 52px;
}

.lp-btn--orange::after {
  content: '→';
  margin-left: 12px;
  font-family: var(--lp-font-family-en);
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.9;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.lp-btn--orange::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 10px;
  background: #ff4242;
  box-shadow: 0 0 0 3px rgba(255, 66, 66, 0.22);
  animation: lp-live-pulse 1.35s ease-out infinite;
  flex: 0 0 auto;
}

/* ボタンのホバーエフェクト */
.lp-btn--orange:hover {
  filter: none;
  transform: translateY(-1px);
  border-color: rgba(243, 112, 75, 0.5);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 18px 50px rgba(255, 66, 66, 0.16),
    0 16px 44px rgba(104, 70, 255, 0.12);
}

.lp-btn--orange:hover::after {
  transform: translateX(4px);
  opacity: 1;
}

.lp-btn--orange:active {
  transform: translateY(0);
  filter: none;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.lp-btn--orange:focus-visible {
  outline: 2px solid rgba(255, 66, 66, 0.45);
  outline-offset: 3px;
}

/* box-shadow を動かすと毎フレーム再描画が必要になり、
   「合成されていないアニメーション」としてメインスレッドを使う。
   transform と opacity だけなら GPU 側で完結する。
   （静的な box-shadow は transform:scale と一緒に拡縮するのでリングは残る） */
@keyframes lp-live-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.45);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn--orange {
    transition: none;
  }
  .lp-btn--orange::before {
    animation: none;
    box-shadow: none;
  }
  .lp-btn--orange::after {
    transition: none;
  }
}

@media screen and (max-width: 480px) {
  .lp-container {
    padding: 0 18px;
  }
  .lp-btn--orange {
    width: auto;
    max-width: 100%;
    padding: 12px 18px 12px 14px;
    font-size: clamp(0.72rem, 3vw, 0.88rem);
    letter-spacing: 0.02em;
    border-radius: 16px;
    min-height: 46px;
  }

  .lp-btn--orange::before {
    width: 8px;
    height: 8px;
    margin-right: 8px;
  }

  .lp-btn--orange::after {
    margin-left: 8px;
  }
}

/* 最新更新情報（ニュース直下） */
.lp-updates {
  background: #fff;
  padding: 22px 0 56px;
}

.lp-updates__box {
  border-radius: 22px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background:
    radial-gradient(900px 240px at 18% 20%, rgba(255, 66, 66, 0.05) 0%, rgba(255, 66, 66, 0) 65%),
    radial-gradient(820px 220px at 85% 25%, rgba(104, 70, 255, 0.04) 0%, rgba(104, 70, 255, 0) 68%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
  padding: 18px 18px;
}

.lp-updates__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 10px;
}

.lp-updates__item {
  margin: 0;
}

.lp-updates__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.lp-updates__link:hover {
  background: rgba(17, 17, 17, 0.035);
  transform: translateY(-1px);
}

.lp-updates__date {
  flex: 0 0 auto;
  font-family: var(--lp-font-family-en);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.65);
}

.lp-updates__title {
  flex: 1 1 auto;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: #111;
}

@media screen and (max-width: 480px) {
  .lp-updates {
    padding: 18px 0 44px;
  }
  .lp-updates__box {
    padding: 14px 14px;
    border-radius: 18px;
  }
  .lp-updates__link {
    padding: 10px 10px;
    border-radius: 12px;
  }
  .lp-updates__date {
    font-size: 0.9rem;
  }
}

/* LP: ヘッダーをReStart風に透過（ロゴ＋ハンバーガーのみ主役） */
body.home .article-header {
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
}

body.home .article-header__container {
  padding-top: 8px;
  padding-bottom: 8px;
}

body.home .article-header__hamburger {
  border-radius: 12px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 8px;
}

body.home .article-header__hamburger-line {
  background: #111;
}


/* ===== hero.css ===== */
/* ==============================================
   LP Hero
   中央見出し＋配信画面4枚。背景はぼかした配信画面の群れ（固定）。

   ・色は既存サイトのパレット（#f3704b / #ff8c6e / #ff4242）に準拠
   ・日本語はシステムフォント（webfont を読まない＝モバイルCWV優先）
   ・背景画像は書き出し時点でぼかし済み。CSS filter は使わない
============================================== */

/* 本番CSSに全体リセットが無く、既定は content-box。
   width:100% + padding のCTAがはみ出すため、ヒーロー配下だけ揃える */
.lp-hero,.lp-hero *,.lp-hero *::before,.lp-hero *::after{box-sizing:border-box}

.lp-hero{
  position:relative;overflow:hidden;isolation:isolate;
  /* 固定ヘッダー実測：header padding12 + container padding8 + ロゴ62 + 8 + 12 */
  --lp-hero-hdr:102px;
  height:min(100vh,58vw);min-height:680px;
  background:linear-gradient(168deg,#fefdfc 0%,#fbf9f7 54%,#f7f3f0 100%);
}
@media screen and (max-width:767px){ .lp-hero{--lp-hero-hdr:88px} }

/* 固定ヘッダーの下だけを作図領域にする */
.lp-hero__body{position:absolute;left:0;right:0;top:var(--lp-hero-hdr);bottom:0;z-index:2}

.lp-hero__grain{
  position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ══════ 背景 ══════ */
.lp-hero__bg{position:absolute;inset:0;z-index:0;will-change:transform}
/* LPのヘッダーは transparent（article-style.css で !important 指定）なので、
   ロゴとメニューの可読性を守るために最上部だけ地色を戻す */
.lp-hero__bg::after{
  content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--lp-hero-hdr) + 10px);
  background:linear-gradient(180deg,rgba(254,253,252,.94) 0%,rgba(254,253,252,.72) 55%,rgba(254,253,252,0) 100%);
  pointer-events:none;z-index:3;
}

.lp-hero__cards{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 66% at 50% 46%,transparent 26%,#000 68%);
          mask-image:radial-gradient(70% 66% at 50% 46%,transparent 26%,#000 68%);
}
.lp-hero__cards .c{
  position:absolute;border-radius:6px;overflow:hidden;
  background-size:cover;background-position:center;
  opacity:.30;
  box-shadow:0 8px 18px rgba(28,22,50,.07);
}
/* 背景カードも配信画面と分かるよう最小限のUIを静的に置く（動きは付けない） */
.lp-hero__cards .c::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
}
.lp-hero__cards .c__live{
  position:absolute;top:6%;left:7%;z-index:2;
  width:14%;height:4.5%;min-height:3px;border-radius:99px;background:rgba(255,45,45,.92);
}
.lp-hero__cards .c__ui{position:absolute;left:7%;right:7%;bottom:7%;z-index:2;
  display:flex;flex-direction:column;gap:5%}
.lp-hero__cards .c__ui i{height:4.5%;min-height:3px;border-radius:99px;background:rgba(255,255,255,.8)}
.lp-hero__cards .c__ui i:nth-child(1){width:72%}
.lp-hero__cards .c__ui i:nth-child(2){width:46%}
.lp-hero__cards .c__ui i:nth-child(3){width:60%;background:rgba(255,255,255,.55)}

.lp-hero__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 64% at 50% 44%,rgba(255,255,255,.55) 0%,transparent 44%,rgba(30,26,34,.035) 100%);
}

/* 画面外では全アニメーションを停止（モバイルのCPU・バッテリー・INP対策） */
.lp-hero.is-paused *,
.lp-hero.is-paused *::before,
.lp-hero.is-paused *::after{animation-play-state:paused!important}

/* ══════ 中央の見出し ══════ */
.lp-hero__center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:min(660px,46%);text-align:center;color:#111;
}
.lp-hero__center>*{opacity:0;animation:lpHeroRise .9s cubic-bezier(.2,.7,.2,1) forwards}
.lp-hero__center>*:nth-child(1){animation-delay:.06s}
.lp-hero__center>*:nth-child(2){animation-delay:.18s}
.lp-hero__center>*:nth-child(3){animation-delay:.32s}
.lp-hero__center>*:nth-child(4){animation-delay:.44s}
@keyframes lpHeroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.lp-hero__eyebrow{
  display:block;
  margin:0 0 clamp(10px,1.2vw,16px);
  /* H1の中に入るので、見出しの太さ・字間を引き継がないよう個別に指定する */
  font-family:'LPHeroJP',var(--lp-font-family-base,sans-serif);
  font-weight:700;
  font-size:clamp(.72rem,.95vw,.9rem);letter-spacing:.22em;color:#6f6f7c;
  line-height:1.4;
}
/* ヒーロー専用フォント（Noto Sans JP のサブセット）。
   フル版は 459KB あるため、ヒーローで使う文字だけを自前で持つ。
   ウェイトごとに、そのウェイトで使う文字だけを含める。

   900 = 見出し「あなたのライブ配信を支える」   5.8KB
   500 = リード「ライブ配信のことが全てわかる専門メディア」 6.7KB
   700 = CTA「ライバー事務所を探す」            4.3KB

   ※ これらの文言を変えたら該当のサブセットを作り直すこと。
     作り方: https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@<重み>&text=<使う文字>&display=swap
             が返す woff2 を assets/fonts/ に保存する。
     サブセットに無い文字はシステムフォントに落ちて字面が混ざるので注意。 */
@font-face{font-family:'LPHeroJP';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/lp-hero-500.woff2') format('woff2')}
@font-face{font-family:'LPHeroJP';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../fonts/lp-hero-700.woff2') format('woff2')}
@font-face{font-family:'LPHeroJP';font-style:normal;font-weight:900;font-display:swap;
  src:url('../../fonts/lp-hero-900.woff2') format('woff2')}

.lp-hero__title{
  margin:0;font-weight:900;line-height:1.12;letter-spacing:-.045em;
  font-size:clamp(2rem,5.4vw,5rem);
  font-family:'LPHeroJP',var(--lp-font-family-base,sans-serif);
}
.lp-hero__row{display:block;white-space:nowrap}
.lp-hero__row--accent{
  background:linear-gradient(92deg,#ff4242,#f3704b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lp-hero__lead{margin:clamp(14px,1.5vw,20px) 0 0;color:#555;
  font-family:'LPHeroJP',var(--lp-font-family-base,sans-serif);font-weight:500;
  font-size:clamp(.84rem,1vw,.98rem);letter-spacing:.02em}

.lp-hero__cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(18px,2vw,26px);
  padding:21px 42px;border-radius:2px;text-decoration:none;font-weight:700;
  /* WCAG：白文字は 18.66px 以上の太字なら 3.0 で可。19px にして基準側を緩め、
     背景は #f3704b を 4% だけ暗くして 2.90 → 3.13 に上げる（見た目はほぼ同じ）。
     ※この配色はサイト共通のボタン色。他ボタンも揃えるなら同じ値にすること。 */
  font-family:'LPHeroJP',var(--lp-font-family-base,sans-serif);
  font-size:clamp(1.19rem,1.15vw,1.25rem);letter-spacing:.02em;
  color:#fff;background:#e96c48;
  box-shadow:0 12px 26px rgba(233,108,72,.28);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.lp-hero__cta:hover{background:#d95f3c;transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(233,108,72,.34)}
.lp-hero__cta span{font-family:var(--lp-font-family-en,'Oswald',sans-serif);transition:transform .25s}
.lp-hero__cta:hover span{transform:translateX(4px)}

/* ══════ 配信画面タイル ══════ */
.lp-shot{
  position:absolute;z-index:2;margin:0;overflow:hidden;background:#eee;
  border-radius:10px;container-type:inline-size;
  box-shadow:0 30px 56px rgba(28,22,50,.22),0 5px 14px rgba(28,22,50,.11);
  /* fill-mode は backwards。forwards だと入場後も transform を握り、ホバーが効かない */
  animation:lpShotIn 1s cubic-bezier(.2,.7,.2,1) backwards;
  transition:rotate .55s cubic-bezier(.2,.7,.2,1),
             transform .55s cubic-bezier(.2,.7,.2,1),
             box-shadow .55s;
}
.lp-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lp-shot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);z-index:4}
@keyframes lpShotIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

.lp-shot:hover,.lp-shot:focus-within{
  rotate:0deg;transform:translateY(-10px);
  box-shadow:0 46px 80px rgba(28,22,50,.30),0 8px 20px rgba(28,22,50,.16);
}
.lp-shot:hover img,.lp-shot:focus-within img{transform:scale(1.05)}

/* PC配置：左右の帯に寄せ、中央のx軸を空ける（見出しの大きさに制約がかからない） */
.lp-shot--talk  {left:15%;  top:1.5%; width:16%; aspect-ratio:9/16; rotate:-3.2deg; z-index:3; animation-delay:.18s}
.lp-shot--singer{left:13.5%;top:72%;  width:18%; aspect-ratio:16/9; rotate:-4.5deg; z-index:2; animation-delay:.54s}
.lp-shot--game  {left:68.5%;top:1%;   width:16%; aspect-ratio:16/9; rotate:2.2deg;  z-index:2; animation-delay:.42s}
.lp-shot--vtube {left:67.5%;top:24%;  width:17%; aspect-ratio:9/16; rotate:3.8deg;  z-index:3; animation-delay:.30s}

/* ホバー：黒い膜＋遷移先の提示 */
.lp-stream{transition:opacity .4s}
.lp-shot:hover .lp-stream,.lp-shot:focus-within .lp-stream{opacity:0}

.lp-shot__go{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2.4cqw;padding:6cqw 4cqw;
  text-align:center;text-decoration:none;color:#fff;border-radius:inherit;
  background:rgba(10,10,16,.56);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s cubic-bezier(.2,.7,.2,1);
}
.lp-shot:hover .lp-shot__go,.lp-shot:focus-within .lp-shot__go{opacity:1}
.lp-shot__go:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:-4px}
.lp-shot__plat{font-family:var(--lp-font-family-en,'Oswald',sans-serif);font-weight:600;
  letter-spacing:.1em;font-size:clamp(11px,4.4cqw,26px);line-height:1.1}
.lp-shot__txt{font-size:clamp(9px,2.7cqw,15px);font-weight:500;line-height:1.7;color:rgba(255,255,255,.86)}
.lp-shot__arw{display:grid;place-items:center;width:8cqw;height:8cqw;min-width:28px;min-height:28px;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);
  font-family:var(--lp-font-family-en,'Oswald',sans-serif);font-size:clamp(11px,3.4cqw,18px);
  transition:background .3s,transform .3s}
.lp-shot:hover .lp-shot__arw{background:rgba(255,255,255,.16);transform:translateY(2px)}
.lp-shot--game .lp-shot__go,.lp-shot--singer .lp-shot__go{gap:1.6cqw;padding:3cqw}

/* タッチ端末：ホバーが無いので黒膜は出さず、常時タップできる矢印だけ置く */
@media (hover:none){
  /* タッチ端末ではタイルをリンクにしない。
     スクロール中に触れて意図せず遷移するのを避けるため。
     display:none なので読み上げ・キーボード操作の対象からも外れる */
  .lp-shot__go{display:none}
  .lp-shot:hover .lp-stream{opacity:1}
  .lp-shot:hover{transform:none;rotate:inherit}
}

/* ══════ 配信画面UI ══════ */
.lp-stream{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:1.5cqw;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 18%,
                             transparent 50%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.6) 100%);
}
.lp-stream__top{display:flex;align-items:center;gap:.9cqw}
.lp-stream__ava{width:3.2cqw;height:3.2cqw;min-width:13px;min-height:13px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#fff,#ffd8cd);box-shadow:0 0 0 1px rgba(255,255,255,.75)}
.lp-stream__nm{display:flex;flex-direction:column;gap:.5cqw;flex:1 1 auto;min-width:0;overflow:hidden}
.lp-stream__nm i{display:block;height:.9cqw;min-height:3.5px;border-radius:99px;
  background:rgba(255,255,255,.82);width:100%;max-width:5.2cqw}
.lp-stream__nm i+i{max-width:3.2cqw;background:rgba(255,255,255,.45)}
.lp-stream__live{
  margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:.6cqw;
  padding:.5cqw 1.2cqw;border-radius:99px;
  background:rgba(8,8,14,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--lp-font-family-en,'Oswald',sans-serif);
  font-size:clamp(6px,1.2cqw,11px);font-weight:600;color:#fff;letter-spacing:.05em;white-space:nowrap;
}
.lp-stream__live::before{content:"";width:.7cqw;height:.7cqw;min-width:4px;min-height:4px;border-radius:50%;
  background:#ff4242;box-shadow:0 0 5px #ff4242;animation:lpBlink 1.6s ease-in-out infinite}
@keyframes lpBlink{0%,100%{opacity:1}50%{opacity:.25}}

.lp-stream__foot{display:flex;flex-direction:column;gap:1cqw}
.lp-stream__plat{
  align-self:flex-start;padding:.55cqw 1.3cqw;border-radius:99px;white-space:nowrap;
  background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#22222c;font-size:clamp(6px,1.15cqw,11px);font-weight:700;letter-spacing:.03em;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}

/* コメント欄：実機と同じく下部を大きく占めて下から上へ流れ続ける */
.lp-stream__cmts{
  position:relative;overflow:hidden;width:76%;height:46cqw;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);
}
.lp-shot--game .lp-stream__cmts,
.lp-shot--singer .lp-stream__cmts{height:17cqw;width:60%}

.lp-stream__feed{
  position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:1.5cqw;
  animation:lpFeed var(--speed,22s) linear infinite;
}
@keyframes lpFeed{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.lp-cmt{display:flex;align-items:flex-start;gap:1.2cqw}
.lp-cmt i{width:4.4cqw;height:4.4cqw;min-width:14px;min-height:14px;border-radius:50%;flex:0 0 auto}
.lp-cmt__col{display:flex;flex-direction:column;gap:.8cqw;min-width:0;padding-top:.6cqw}
.lp-cmt__t{display:flex;align-items:center;flex-wrap:wrap;gap:.8cqw;min-width:0}
/* 1本の長いバーではなく「単語」の連なりにする＝文章に見える */
.lp-cmt__t s{display:block;text-decoration:none;flex:0 0 auto;
  height:1.5cqw;min-height:5px;border-radius:99px;background:rgba(255,255,255,.78)}
.lp-cmt__nm{display:block;height:1.35cqw;min-height:4.5px;border-radius:99px;
  background:rgba(255,255,255,.42);flex:0 0 auto}
.lp-cmt--stamp .lp-cmt__t s{width:5.4cqw!important;height:5.4cqw;min-width:18px;min-height:18px;
  border-radius:1.2cqw;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.45))}
.lp-cmt--sys{align-items:center;padding:.7cqw 1.6cqw;border-radius:99px;align-self:flex-start;
  background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lp-cmt--sys .lp-cmt__t s{background:rgba(255,255,255,.62)}

.lp-stream__inp{display:flex;align-items:center;gap:1.2cqw;opacity:.8}
.lp-stream__inp i{flex:1;height:5cqw;min-height:16px;border-radius:99px;
  border:1px solid rgba(255,255,255,.36);background:rgba(255,255,255,.08)}
.lp-stream__inp b{width:5cqw;height:5cqw;min-width:16px;min-height:16px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34)}

.lp-stream__hearts{position:absolute;right:2.4cqw;bottom:7cqw;width:8cqw;height:22cqw}
/* 位置・速さ・遅延・横のぶれ・大きさは hero.php 側から
   1つずつ変数で渡している（全部同じ動きだと機械的に見えるため）。
   基準値は変数が無かった場合の保険。 */
.lp-stream__hearts i{position:absolute;bottom:0;font-style:normal;line-height:1;opacity:0;
  font-size:calc(clamp(10px,2.8cqw,22px) * var(--sz,1));
  animation:lpHeart var(--dur,4.8s) ease-out infinite;
  animation-delay:var(--d,0s)}
/* まっすぐ上がるのではなく、少し横に流れながら消える */
@keyframes lpHeart{
  0%  {opacity:0;  transform:translate(0,0) scale(.55)}
  12% {opacity:.95;transform:translate(calc(var(--dx,0cqw) * .15),-3cqw) scale(1)}
  55% {opacity:.72;transform:translate(calc(var(--dx,0cqw) * .68),-11cqw) scale(1.06)}
  100%{opacity:0;  transform:translate(var(--dx,0cqw),-21cqw) scale(1.18)}}

/* 視聴者アイコン：ブランドのコーラル〜赤を軸に、彩りは中性色で足す */
.lp-av--a{background:linear-gradient(135deg,#f3704b,#ff8c6e)}
.lp-av--b{background:linear-gradient(135deg,#ff4242,#f3704b)}
.lp-av--c{background:linear-gradient(135deg,#7a8595,#c3cad6)}
.lp-av--d{background:linear-gradient(135deg,#e8a13f,#ffd08a)}
.lp-av--e{background:linear-gradient(135deg,#ff8fa3,#ffc9b0)}

/* 小さいタイルはUIを間引く */
@container (max-width:220px){
  .lp-shot__plat,.lp-stream__inp b,.lp-stream__nm i+i{display:none}
  .lp-stream__cmts{width:82%}
}

/* ══════ SP：PC版と同じ「中央見出し＋周囲に配信画面」の構図を維持する ══════ */
@media (max-width:992px){
  /* モバイルレイアウトではタイルをリンクにしない（タップでの誤遷移を防ぐ）。
     hover:none だけに頼ると一部の端末で判定が外れるため、この分岐でも切る */
  .lp-shot__go{display:none}
  .lp-hero{height:min(92svh,760px);min-height:600px}
  .lp-hero__title{font-size:clamp(1.62rem,7.4vw,2.3rem)}
  /* 中央を少し下げて上側に余白を作る。下はCTAの裏をカードが通るので詰めてよい */
  .lp-hero__center{width:min(300px,80%);top:56%}
  /* SPでは装飾ラベルを外し、その分を画像に回す */
  .lp-hero__eyebrow{margin-bottom:8px;font-size:.7rem;letter-spacing:.18em}
  .lp-hero__lead{margin-top:12px}
  /* CTAだけ一段下げる */
  .lp-hero__cta{margin-top:clamp(30px,7vw,44px);padding:19px 26px;font-size:1.19rem;
    width:100%;justify-content:center}

  /* 横幅が足りないので見出しの左右ではなく上下に散らす。
     ★サイズは「幅%」ではなく「高さ(svh)」基準にする。
       Safari はアドレスバーのぶん svh が縮むため、幅基準だと
       高さだけが足りなくなって見出しと衝突する。
       px の上限は、画面が非常に縦長の端末で伸びすぎないための頭打ち。 */
  .lp-shot{width:auto}
  .lp-shot--talk  {left:3%;  top:1%;    height:min(27svh,228px); rotate:-5deg}
  .lp-shot--game  {left:52%; top:14%;   height:min(11.5svh,97px); rotate:3.5deg}
  .lp-shot--singer{left:1%;  top:80%;   height:min(12svh,101px);  rotate:-4deg}
  .lp-shot--vtube {left:59%; top:64.5%; height:min(27svh,228px); rotate:5deg}
}
/* 極端に細い端末では脇の2枚を落として可読性を優先 */
@media (max-width:359px){
  .lp-shot--game,.lp-shot--singer{display:none}
}

@media (prefers-reduced-motion:reduce){
  .lp-hero *,.lp-hero *::before,.lp-hero *::after{animation:none!important;transition:none!important}
  .lp-hero__center>*,.lp-shot{opacity:1!important;transform:none!important}
}

/* ===== featured.css ===== */
/* ==============================================
   Featured（おすすめ記事）
============================================== */
.lp-featured {
  background:
    radial-gradient(1200px 420px at 18% 10%, rgba(255, 66, 66, 0.06) 0%, rgba(255, 66, 66, 0) 60%),
    radial-gradient(1000px 360px at 85% 15%, rgba(104, 70, 255, 0.05) 0%, rgba(104, 70, 255, 0) 62%),
    #fff;
  padding: 64px 0;
}

/* 入場アニメーション。
   以前は opacity:0 で隠しておき、JSが .is-inview を付けて初めて見える作りだった。
   そのためJSが動かない・実行が遅れる環境ではセクションが空のままになり、
   「おすすめ記事が表示されない」という不具合になっていた。
   CSSのアニメーションに変え、JSが動かなくても必ず表示されるようにする。
   （fill-mode は backwards。forwards だと終了状態が固定されてしまう） */
.lp-featured .lp-section-head {
  animation: lpFeaturedIn 0.6s ease backwards;
}

.lp-featured__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: rgba(17, 17, 17, 0.28) rgba(17, 17, 17, 0.06);
  scrollbar-width: thin;
  position: relative;
}

/* 左右の端をぼかす。
   以前は ::before / ::after を position:absolute で端に置いていたが、
   横スクロールする要素の中では中身と一緒に流れてしまうため、
   スクロールすると白い帯が中央に残り、画像やタイトルに重なっていた。
   マスクは要素の表示領域に対してかかるので、スクロールしてもずれない。
   （地色がうっすら色付きなので、白で塗るより透過させる方が自然でもある） */
.lp-featured__viewport {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}

.lp-featured__viewport::-webkit-scrollbar {
  height: 10px;
}
.lp-featured__viewport::-webkit-scrollbar-track {
  background: rgba(17, 17, 17, 0.06);
  border-radius: 999px;
}
.lp-featured__viewport::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.22);
  border-radius: 999px;
}
.lp-featured__viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 17, 17, 0.32);
}

.lp-featured__track {
  display: flex;
  gap: 18px;
  padding: 6px 4px 18px;
}

.lp-featured-card {
  flex: 0 0 calc((100% - 18px * 3) / 4); /* PC: 4枚/画面 */
  min-width: 240px;
  animation: lpFeaturedIn 0.55s ease backwards;
  will-change: transform;
}

/* 保険。scroll-reveal.js の対象からは外しているが、
   カルーセルがHTMLを作り直す際に .lp-reveal が復活しても
   カードが消えないようにしておく（詳細度で .lp-reveal に勝たせる） */
.lp-featured .lp-featured-card.lp-reveal {
  opacity: 1;
  transform: none;
}

/* 少しずつ遅らせて出す */
.lp-featured-card:nth-child(2) { animation-delay: 0.06s; }
.lp-featured-card:nth-child(3) { animation-delay: 0.12s; }
.lp-featured-card:nth-child(4) { animation-delay: 0.18s; }
.lp-featured-card:nth-child(n+5) { animation-delay: 0.24s; }

@keyframes lpFeaturedIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lp-featured-card.is-active .lp-featured-card__thumb {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.16),
    0 18px 48px rgba(255, 66, 66, 0.12),
    0 16px 44px rgba(104, 70, 255, 0.1);
  border-color: rgba(243, 112, 75, 0.45);
}

.lp-featured-card.is-active .lp-featured-card__img {
  transform: scale(1.05);
}

.lp-featured-card.is-active .lp-featured-card__title {
  letter-spacing: 0.02em;
}

.lp-featured-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.lp-featured-card__thumb {
  border-radius: 16px;
  overflow: hidden;
  background: #f3f3f3;
  aspect-ratio: 16 / 10;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(17, 17, 17, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}

.lp-featured-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.35s ease;
  display: block;
}

.lp-featured-card__img--default {
  object-fit: cover;
}

.lp-featured-card__img--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f2f2f2, #e6e6e6);
  display: block;
}

.lp-featured-card__body {
  padding: 14px 2px 0;
}

.lp-featured-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
  margin: 0 0 8px;
  color: #111;
}

.lp-featured-card__date {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.65);
}

.lp-featured-card__link:hover .lp-featured-card__thumb {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.lp-featured-card__link:hover .lp-featured-card__img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .lp-featured .lp-section-head,
  .lp-featured-card,
  .lp-featured-card__thumb,
  .lp-featured-card__img {
    transition: none;
  }
  .lp-featured .lp-section-head,
  .lp-featured-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media screen and (max-width: 768px) {
  .lp-featured {
    padding: 44px 0;
  }
  .lp-featured__track {
    gap: 14px;
  }
  .lp-featured-card {
    flex: 0 0 66.6667%; /* SP: 1.5枚/画面 */
    min-width: 0;
  }
}


/* ===== news.css ===== */
/* ==============================================
   News Section: スタイリッシュ・ミニマル・丸みなし
============================================== */
.lp-news {
  background: #f5f5f5; /* フッターと同じグレー */
  padding: 64px 0;
}

.lp-news__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: rgba(17, 17, 17, 0.28) rgba(17, 17, 17, 0.06);
  scrollbar-width: thin;
}

.lp-news__viewport::-webkit-scrollbar {
  height: 10px;
}
.lp-news__viewport::-webkit-scrollbar-track {
  background: rgba(17, 17, 17, 0.06);
  border-radius: 999px;
}
.lp-news__viewport::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.22);
  border-radius: 999px;
}
.lp-news__viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 17, 17, 0.32);
}

.lp-news__track {
  display: flex;
  gap: 24px; /* 余白を広く */
  will-change: transform;
}

/* PC: 3件/画面 */
.lp-news-card {
  flex: 0 0 calc((100% - 24px * 2) / 3);
  min-width: 0;
}

.lp-news-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.25s ease;
}

.lp-news-card__link:hover {
  opacity: 0.75;
}

/* 丸みなし・余白広め */
.lp-news-card__thumb {
  overflow: hidden;
  background: #f3f3f3;
  aspect-ratio: 16 / 10;
  margin-bottom: 20px; /* 余白を広く */
}

.lp-news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-news-card__img--default {
  object-fit: cover;
}

.lp-news-card__thumb--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f2f2f2, #e6e6e6);
  display: block;
}

.lp-news-card__body {
  padding: 0;
}

/* タイポグラフィにこだわり */
.lp-news-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  color: #111;
  letter-spacing: -0.01em;
}

/* スマホ: 1.5件/画面 */
@media screen and (max-width: 768px) {
  .lp-news {
    padding: 44px 0;
  }

  .lp-news__track {
    gap: 18px;
  }

  .lp-news-card {
    flex: 0 0 66.6667%; /* 1.5件/画面 */
    min-width: 0;
  }

  .lp-news-card__thumb {
    margin-bottom: 16px;
  }

  .lp-news-card__title {
    font-size: 1rem;
    line-height: 1.55;
  }
}

/* ===== diagnosis.css ===== */
/* ==============================================
   Diagnosis Section: 解決したい悩み診断
============================================== */
.lp-diagnosis {
  /* ヒーローと同じ背景パターンを使用 */
  background-image: url('../../images/bg-hero-pattern.webp');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 80px 0;
}

.lp-section-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.7);
  margin-top: 12px;
  margin-bottom: 0;
}

.lp-diagnosis__wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 診断進行状況 */
.lp-diagnosis__progress {
  margin-bottom: 48px;
}

.lp-diagnosis__progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e5e5;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.lp-diagnosis__progress-fill {
  height: 100%;
  background: var(--lp-color-accent-orange);
  border-radius: 999px;
  transition: width 0.4s ease;
  width: 0%;
}

.lp-diagnosis__progress-text {
  display: none; /* 数字を非表示、バーのみ表示 */
}

/* 質問フォーム */
.lp-diagnosis__form {
  background: #fff;
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.lp-diagnosis__step {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lp-diagnosis__question {
  margin-bottom: 0;
}

.lp-diagnosis__question-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 32px;
  line-height: 1.5;
}

.lp-diagnosis__options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-diagnosis__option {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.lp-diagnosis__option:hover {
  border-color: var(--lp-color-accent-orange);
  background: rgba(243, 112, 75, 0.04);
}

.lp-diagnosis__option input[type="radio"],
.lp-diagnosis__option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.lp-diagnosis__option.is-selected .lp-diagnosis__option-text {
  color: var(--lp-color-accent-orange);
  font-weight: 700;
}

.lp-diagnosis__option.is-selected {
  border-color: var(--lp-color-accent-orange);
  background: rgba(243, 112, 75, 0.04);
}

.lp-diagnosis__option-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  line-height: 1.5;
  padding-left: 0; /* 丸アイコンを廃止 */
  position: relative;
  transition: all 0.25s ease;
}

/* ナビゲーションボタン */
.lp-diagnosis__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  gap: 16px;
}

.lp-diagnosis__btn-prev,
.lp-diagnosis__btn-next {
  flex: 1;
  max-width: 200px;
}

.lp-diagnosis__btn-next {
  margin-left: auto;
}

.lp-btn--outline {
  background: transparent;
  border: 2px solid #ddd;
  color: #333 !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lp-btn--outline:hover {
  border-color: #999;
  background: rgba(0, 0, 0, 0.02);
}

/* 診断結果 */
.lp-diagnosis__result {
  animation: fadeIn 0.4s ease;
}

.lp-diagnosis__result-content {
  text-align: center;
  padding: 24px 0;
}

.lp-diagnosis__result-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 24px;
}

.lp-diagnosis__result-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 40px;
  text-align: left;
  background: #f9f9f9;
  padding: 32px;
  border-radius: 16px;
}

.lp-diagnosis__result-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.lp-diagnosis__result-actions .lp-btn {
  min-width: 280px;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .lp-diagnosis {
    padding: 60px 0;
  }

  .lp-diagnosis__wrapper {
    padding: 0 16px;
  }

  .lp-diagnosis__form {
    padding: 32px 24px;
    border-radius: 16px;
  }

  .lp-diagnosis__question-title {
    font-size: 1.2rem;
    margin-bottom: 24px;
  }

  .lp-diagnosis__option {
    padding: 16px 20px;
  }

  .lp-diagnosis__option-text {
    font-size: 0.95rem;
    padding-left: 32px;
  }

  .lp-diagnosis__nav {
    flex-direction: column;
    margin-top: 32px;
  }

  .lp-diagnosis__btn-prev,
  .lp-diagnosis__btn-next {
    width: 100%;
    max-width: none;
  }

  .lp-diagnosis__result-text {
    padding: 24px 20px;
    font-size: 1rem;
  }

  .lp-diagnosis__result-actions .lp-btn {
    width: 100%;
    min-width: auto;
  }
}

/* ===== partners.css ===== */
/* ==============================================
   Partners Section: パートナー事務所ロゴ一覧（自動マルquee）
============================================== */
.lp-partners {
  background: #fff;
  padding: 80px 0;
}

/* 動きを減らす設定時のみ：手動横スクロール */
.lp-partners__grid {
  display: none;
}

.lp-partners__marquee {
  display: block;
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
}

.lp-partners__marquee-viewport {
  overflow: hidden;
  width: 100%;
  padding: 2px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.lp-partners__marquee-track {
  display: flex;
  width: max-content;
  animation: lp-partners-marquee-scroll var(--lp-partners-marquee-duration, 28s) linear infinite;
  will-change: transform;
}

.lp-partners__marquee-viewport:hover .lp-partners__marquee-track {
  animation-play-state: paused;
}

.lp-partners__marquee-segment {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  gap: 40px;
  padding-right: 40px;
}

.lp-partners__marquee-link {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease;
}

.lp-partners__marquee-link:hover {
  opacity: 0.7;
}

.lp-partners__marquee-logo {
  width: 100%;
  /* 高さを固定する。指定しないと枠が画像の高さに合わせて縮み、
     横長のロゴ（例：233x59）だけ枠が低くなって縦位置がずれる */
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.lp-partners__marquee-logo--placeholder {
  min-height: 72px;
}

.lp-partners__marquee-placeholder-text {
  font-size: 0.9rem;
  font-weight: 600;
  /* 白背景では 0.45 だとコントラスト3.0で不足 */
  color: rgba(17, 17, 17, 0.62);
  text-align: center;
  line-height: 1.35;
}

.lp-partners__marquee-img {
  width: auto;
  height: auto;
  /* 横長のロゴは幅で決まるため、上限を設けないと
     高さで頭打ちになる縦長・正方形のロゴより大きく見えてしまう */
  max-width: 200px;
  max-height: 120px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.lp-partners__marquee-name {
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  text-align: center;
  line-height: 1.4;
  max-width: 100%;
}

/* 手動スクロール用カード（prefers-reduced-motion 時） */
.lp-partner-card {
  display: flex;
  flex-direction: column;
}

.lp-partner-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.lp-partner-card__logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.lp-partner-card__logo--placeholder {
  min-height: 72px;
}

.lp-partner-card__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  display: block;
}

.lp-partner-card__placeholder-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.62);
  text-align: center;
}

.lp-partner-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

/* PCは流さず4列のグリッドで全件表示する（8社なら4×2）。
   2つ目のセグメントは繋ぎ目を消すための複製なので隠し、
   端のぼかしも不要になるため外す。

   横並びのままだと 220px×社数＋余白 がコンテナ幅(1152px)を超え、
   overflow:hidden で最後の1社が見切れる。グリッドなら列幅が
   コンテナに合わせて決まるので社数が増えても破綻しない。 */
@media screen and (min-width: 993px) {
  .lp-partners__marquee-viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lp-partners__marquee-track {
    width: 100%;
    animation: none;
  }

  .lp-partners__marquee-segment[aria-hidden="true"] {
    display: none;
  }

  .lp-partners__marquee-segment {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 24px;
    padding-right: 0;
    justify-items: center;
  }

  .lp-partners__marquee-link {
    /* 列幅に従わせる。固定幅のままだと列からあふれる */
    width: 100%;
    min-width: 0;
    max-width: 240px;
  }
}

@media screen and (max-width: 992px) {
  .lp-partners {
    padding: 60px 0;
  }

  .lp-partners__marquee-segment {
    gap: 28px;
    padding-right: 28px;
  }

  .lp-partners__marquee-link {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
  }

  .lp-partners__marquee-logo {
    height: 100px;
  }

  .lp-partners__marquee-img {
    max-width: 170px;
    max-height: 100px;
  }
}

@media screen and (max-width: 768px) {
  .lp-partners {
    padding: 44px 0;
  }

  .lp-partners__marquee {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
  }

  .lp-partners__marquee-segment {
    gap: 14px;
    padding-right: 14px;
  }

  .lp-partners__marquee-link {
    width: 168px;
    min-width: 168px;
    max-width: 168px;
  }

  .lp-partners__marquee-logo {
    height: 84px;
  }

  .lp-partners__marquee-img {
    max-width: 140px;
    max-height: 84px;
  }

  .lp-partners__marquee-name {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-partners__marquee {
    display: none !important;
  }

  .lp-partners__grid {
    display: flex !important;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: rgba(17, 17, 17, 0.28) rgba(17, 17, 17, 0.06);
    scrollbar-width: thin;
    max-width: 100%;
  }

  .lp-partners__grid::-webkit-scrollbar {
    height: 10px;
  }

  .lp-partners__grid::-webkit-scrollbar-track {
    background: rgba(17, 17, 17, 0.06);
    border-radius: 999px;
  }

  .lp-partners__grid::-webkit-scrollbar-thumb {
    background: rgba(17, 17, 17, 0.22);
    border-radius: 999px;
  }

  .lp-partner-card {
    flex: 0 0 66.6667%;
    min-width: 0;
  }
}

@keyframes lp-partners-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ===== articles.css ===== */
/* ==============================================
   Articles Section: 記事一覧（タグフィルタリング対応）
============================================== */
.lp-articles {
  position: relative;
  /* ヒーローと同じ背景パターン */
  background-image: url('../../images/bg-hero-pattern.webp');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 80px 0;
}

.lp-articles__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  justify-content: center;
}

.lp-articles__filter-btn {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #e5e5e5;
  border-radius: 24px;
  background: #fff;
  color: #333;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  font-family: inherit;
  margin: 0;
}

.lp-articles__filter-btn:hover {
  border-color: var(--lp-color-accent-orange);
  color: var(--lp-color-accent-orange);
  background: rgba(243, 112, 75, 0.04);
}

.lp-articles__filter-btn--active {
  border-color: var(--lp-color-accent-orange);
  background: var(--lp-color-accent-orange);
  color: #fff;
}

.lp-articles__filter-btn--active:hover {
  background: #ff8c6e;
  border-color: #ff8c6e;
}

/* PC: 3列×3行 = 9記事 */
.lp-articles__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.lp-article-card {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  visibility: visible !important;
  height: auto !important;
}

.lp-article-card--hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lp-article-card--pagination-hidden {
  display: none !important;
}

.lp-article-card__link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: opacity 0.25s ease !important;
  width: 100% !important;
}

.lp-article-card__link:hover {
  opacity: 0.8 !important;
}

.lp-article-card__thumb {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
  aspect-ratio: 16 / 9 !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  position: relative !important;
}

.lp-article-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

.lp-article-card__img--default {
  object-fit: contain !important;
}

.lp-article-card__thumb--placeholder {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0) !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.lp-article-card__body {
  padding: 0 !important;
  width: 100% !important;
}

.lp-article-card__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin: 0 0 10px !important;
  color: #111 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.lp-article-card__date {
  display: inline-block !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: rgba(17, 17, 17, 0.6) !important;
}

.lp-articles__empty {
  text-align: center;
  padding: 60px 20px;
  /* 白背景では 0.5 だとコントラスト3.5で不足。0.62で5.3 */
  color: rgba(17, 17, 17, 0.62);
  font-size: 1.1rem;
  grid-column: 1 / -1;
}

/* ページネーション */
.lp-articles__pagination {
  margin-top: 48px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-articles__pagination-btn {
  display: inline-block;
  padding: 10px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 44px;
  text-align: center;
  font-family: inherit;
  margin: 0;
}

.lp-articles__pagination-btn:hover {
  border-color: var(--lp-color-accent-orange);
  color: var(--lp-color-accent-orange);
  background: rgba(243, 112, 75, 0.04);
}

.lp-articles__pagination-btn--active {
  border-color: var(--lp-color-accent-orange);
  background: var(--lp-color-accent-orange);
  color: #fff;
}

.lp-articles__pagination-btn--active:hover {
  background: #ff8c6e;
  border-color: #ff8c6e;
}

.lp-articles__pagination-ellipsis {
  display: inline-block;
  padding: 10px 8px;
  color: rgba(17, 17, 17, 0.62);
  font-size: 0.95rem;
}

.lp-articles__pagination .page-numbers {
  display: inline-flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.lp-articles__pagination .page-numbers li {
  margin: 0;
  padding: 0;
}

.lp-articles__pagination .page-numbers a,
.lp-articles__pagination .page-numbers span {
  display: inline-block;
  padding: 10px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  min-width: 44px;
  text-align: center;
}

.lp-articles__pagination .page-numbers a:hover {
  border-color: var(--lp-color-accent-orange);
  color: var(--lp-color-accent-orange);
  background: rgba(243, 112, 75, 0.04);
}

.lp-articles__pagination .page-numbers .current {
  border-color: var(--lp-color-accent-orange);
  background: var(--lp-color-accent-orange);
  color: #fff;
}

.lp-articles__pagination .page-numbers .dots {
  border: none;
  background: transparent;
  color: rgba(17, 17, 17, 0.62);
}

/* タブレット: 2列 */
@media screen and (max-width: 992px) {
  .lp-articles {
    padding: 60px 0;
  }

  .lp-articles__grid {
    /* ベース側が !important 付きのため、こちらにも付けないと上書きできず
       スマホ幅でも3列のままはみ出す */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 20px !important;
  }

  .lp-articles__filter {
    margin-bottom: 32px;
  }
}

/* スマホ: 1列×9行 = 9記事 */
@media screen and (max-width: 768px) {
  .lp-articles {
    padding: 44px 0;
  }

  .lp-articles__grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-width: 100% !important;
  }

  .lp-articles__filter {
    gap: 8px;
    margin-bottom: 28px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .lp-articles__filter-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  /* スマホでは見出しだけの一覧にする。
     カード＋サムネイルだと9件で画面7〜8枚ぶんの縦長になってしまうため。
     サムネイルを出さないので、そのぶんの通信も発生しない。 */
  .lp-article-card {
    border-bottom: 1px solid rgba(17, 17, 17, 0.12) !important;
  }

  .lp-article-card__thumb {
    display: none !important;
  }

  .lp-article-card__link {
    display: block !important;
    padding: 15px 2px !important;
  }

  .lp-article-card__body {
    display: block !important;
  }

  .lp-article-card__title {
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    /* 1行に収め、あふれたら「…」にする。
       ベース側が -webkit-line-clamp: 2 !important なので、こちらにも付ける */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
  }

  .lp-article-card__date {
    display: none !important;
  }
}

/* ===== editor.css ===== */
/* ==============================================
   Editor Section: 編集者情報
============================================== */
.lp-editor {
  background: #fff;
  padding: 56px 0 72px;
}

.lp-editor__card {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(900px 240px at 18% 20%, rgba(255, 66, 66, 0.05) 0%, rgba(255, 66, 66, 0) 65%),
    radial-gradient(820px 220px at 85% 25%, rgba(104, 70, 255, 0.04) 0%, rgba(104, 70, 255, 0) 68%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
  padding: 32px 34px;
}

.lp-editor__layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.lp-editor__profile {
  flex: 0 0 120px;
  text-align: center;
}

.lp-editor__avatar {
  display: block;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 50%;
  object-fit: cover;
  background: #f7f7f7;
}

.lp-editor__role {
  margin: 14px 0 2px;
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.lp-editor__name {
  color: #111;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-editor__body {
  flex: 1;
  min-width: 0;
}

.lp-editor__body p {
  margin: 0 0 8px;
  color: rgba(17, 17, 17, 0.68);
  font-size: 0.95rem;
  line-height: 1.95;
}

.lp-editor__body p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .lp-editor {
    padding: 44px 0 58px;
  }

  .lp-editor__card {
    padding: 26px 22px;
    border-radius: 18px;
  }

  .lp-editor__layout {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .lp-editor__profile {
    flex-basis: auto;
  }

  .lp-editor__body p {
    font-size: 0.9rem;
    line-height: 1.85;
  }
}

/* ===== footer.css ===== */
/* ==============================================
   Footer Section: フッター
============================================== */
.lp-footer {
  background: #111 !important;
  color: #fff !important;
  padding: 60px 0 40px !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.lp-footer .lp-container {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.lp-footer__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.lp-footer__brand {
  max-width: 400px;
}

.lp-footer__brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: 0.02em;
}

.lp-footer__site-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}

.lp-footer__tagline {
  font-size: 0.95rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.lp-footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.lp-footer__link-group {
  display: flex;
  flex-direction: column;
}

.lp-footer__link-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.05em;
}

.lp-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-footer__link-list li {
  margin: 0;
  padding: 0;
}

.lp-footer__link-list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.25s ease;
  display: inline-block;
}

.lp-footer__link-list a:hover {
  color: #fff;
  text-decoration: underline;
}

/* タブレット */
@media screen and (max-width: 992px) {
  .lp-footer {
    padding: 50px 0 35px;
  }

  .lp-footer__content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lp-footer__links {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* 広告開示（フッターボトム） */
.lp-footer__bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-footer__ad-disclosure {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 8px;
  line-height: 1.6;
}

.lp-footer__ad-disclosure a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.lp-footer__copyright {
  font-size: 0.8rem;
  /* #111 の上では 0.4 だとコントラスト3.8で不足 */
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
}

/* 記事本文内のPR表記バナー */
.ad-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f8f8;
  border-left: 2px solid #999;
  padding: 6px 10px;
  margin-bottom: 18px;
  /* 景表法・ステマ規制の開示表示。控えめにしつつ、
     読めなくならないよう 11px を下限にする */
  font-size: 0.72rem;
  color: #555;
  line-height: 1.45;
}

.ad-notice__badge {
  display: inline-block;
  background: #555;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.ad-notice a {
  color: #555;
  text-decoration: underline;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .lp-footer {
    padding: 40px 0 30px;
  }

  .lp-footer__content {
    gap: 32px;
  }

  .lp-footer__brand {
    max-width: 100%;
  }

  .lp-footer__brand-name {
    font-size: 1.3rem;
  }

  .lp-footer__site-name {
    font-size: 1.1rem;
  }

  .lp-footer__tagline {
    font-size: 0.9rem;
  }

  .lp-footer__links {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .lp-footer__link-group {
    width: 100%;
  }
}

/* ===== reveal.css ===== */
/* ==============================================
   Scroll Reveal（スクロールでふわっと表示）
   - JS(scroll-reveal.js)が対象に .lp-reveal を付与し、
     ビューポート進入で .is-visible を付ける
   - prefers-reduced-motion 時はJS側で無効化＋CSSでも保険
============================================== */
.lp-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.lp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== article-style.css ===== */
/* ==============================================
   Site-wide: 独自ヘッダー/フッター用スタイル
   SWELLのデフォルトヘッダー/フッターを隠し、独自UIを前面に出す
============================================== */

/* SWELLのデフォルトヘッダー・フッターを非表示（独自ヘッダー運用時） */
.l-header,
.l-footer {
  display: none !important;
}

/* ヘッダー */
.article-header {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 12px 0;
}

.article-header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-header__logo {
  flex: 0 0 auto;
}

.article-header__logo img {
  height: 48px;
  width: auto;
  display: block;
}

/* ハンバーガーメニューボタン（PC/SP 共通） */
.article-header__hamburger {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.article-header__hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.article-header__hamburger-label {
  display: inline-block;
  font-family: var(--lp-font-family-en, inherit);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.7);
  line-height: 1;
}

.article-header__hamburger-line {
  width: 24px;
  height: 2px;
  background: #333;
  transition: all 0.3s ease;
  display: block;
}

.article-header__hamburger.is-active .article-header__hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.article-header__hamburger.is-active .article-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.article-header__hamburger.is-active .article-header__hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ドロワーメニュー */
.article-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
}

.article-drawer.is-active {
  pointer-events: auto;
}

.article-drawer__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.article-drawer.is-active .article-drawer__bg {
  opacity: 1;
}

.article-drawer__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 80%;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 60px 24px 24px;
}

.article-drawer.is-active .article-drawer__inner {
  transform: translateX(0);
}

.article-drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-drawer__close-line {
  position: absolute;
  width: 20px;
  height: 2px;
  background: #333;
}

.article-drawer__close-line:nth-child(1) {
  transform: rotate(45deg);
}

.article-drawer__close-line:nth-child(2) {
  transform: rotate(-45deg);
}

.article-drawer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-drawer__nav-list li {
  margin-bottom: 16px;
}

.article-drawer__nav-list a {
  display: block;
  color: #333;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;
  transition: color 0.25s ease;
}

.article-drawer__nav-list a:hover {
  color: #f3704b;
}

/* フッター */
.article-footer {
  background: #2d2d2d;
  color: #fff;
  padding: 60px 0 40px;
  margin-top: 80px;
}

.article-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.article-footer__content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}

.article-footer__brand {
  flex: 1;
}

.article-footer__site-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: #fff;
}

.article-footer__tagline {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.article-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.article-footer__link-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.article-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-footer__link-list li {
  margin-bottom: 12px;
}

.article-footer__link-list a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.25s ease;
}

.article-footer__link-list a:hover {
  color: #fff;
}

/* オリジナルページ：SWELL レイアウトクラスを使わない */
body.livecom-custom-shell #body_wrap,
body.livecom-custom-shell .livecom-content {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

/* LPフロント・記事ページ：ヘッダー透過（ロゴ＋ハンバーガーのみ） */
body.home .article-header,
body.livecom-lp-front .article-header,
body.single .article-header,
body.single-post .article-header,
body.livecom-single-shell .article-header,
body:has(#body_wrap.home) .article-header {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0;
}

body.home .article-header__container,
body.livecom-lp-front .article-header__container,
body.single .article-header__container,
body.single-post .article-header__container,
body.livecom-single-shell .article-header__container {
  padding-top: 8px;
  padding-bottom: 8px;
}

body.home .article-header__hamburger,
body.livecom-lp-front .article-header__hamburger,
body.single .article-header__hamburger,
body.single-post .article-header__hamburger,
body.livecom-single-shell .article-header__hamburger {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px;
}

body.home .article-header__hamburger-line,
body.livecom-lp-front .article-header__hamburger-line,
body.single .article-header__hamburger-line,
body.single-post .article-header__hamburger-line,
body.livecom-single-shell .article-header__hamburger-line {
  background: #111;
}

/* レスポンシブ */
@media screen and (min-width: 768px) {
  .article-header__logo img {
    height: 62px;
  }
}

/* LP（フロントページ）は枠なしでスッキリ — article-style 側で透過済み */

@media screen and (max-width: 767px) {
  .article-footer__content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .article-footer__links {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}