@charset "UTF-8";



/* ==========================================================================
   1. Foundation
   ========================================================================== */

:root {
  --color-text:      #1a1a1a;
  --color-bg:        #fff;
  --color-link:      #0b57d0;
  --color-footer-bg: #1a1a1a;
  --color-footer-tx: #fff;

  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
               "Yu Gothic", "Meiryo", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;  /* iOS横向き時の文字サイズ自動調整を止める */
}

h1, h2, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

a {
  color: var(--color-link);
  text-underline-offset: 0.2em;
}

img {
  
  display: block;
  max-width: 100%;
  height: auto;
}

/* キーボード操作時のフォーカス枠 */
:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   2. Layout
   ========================================================================== */

.l-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-tx);
  padding-block: 40px;
}

.l-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  text-align: center;
}

.l-footer__logo img {
  width: 221px;
  height: auto;
  margin-inline: auto;
  
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #fff;
}

.l-footer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: 24px;
  font-size: 14px;
}

.l-footer__list a {
  color: var(--color-footer-tx);
  text-decoration: underline;
}

.l-footer__copyright {
  margin-top: 24px;
  color: #b3b3b3;
  font-size: 12px;
}

@media (max-width: 767px) {
  .l-footer { padding-block: 32px; }
  .l-footer__inner { padding-inline: 16px; }
  .l-footer__list { gap: 8px 16px; font-size: 13px; }
}


/* ==========================================================================
   3. Component
   ========================================================================== */

/* スキップリンク：普段は画面外、Tabキーで到達した時だけ現れる */
.c-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background-color: #fff;
  transform: translateY(-110%);
}

.c-skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   追従サイドタブ（PC）
   ・画面右端に縦に固定。MVを過ぎると .is-visible が付いて現れる
   ・幅はCSS変数 --sidetab-w で管理（画像の元幅67pxに合わせています）
   -------------------------------------------------------------------------- */
.c-sidetab {
  --sidetab-w: 67px;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  transform: translate(100%, -50%);   /* 初期は画面外（右へ隠す） */
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* MVを過ぎたら表示（付け external はページ末尾のスクリプト） */
.c-sidetab.is-visible {
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
}

.c-sidetab__btn {
  display: block;
  line-height: 0;
  filter: drop-shadow(-2px 2px 6px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease;
}

.c-sidetab__btn img {
  width: var(--sidetab-w);
  height: auto;
}

@media (hover: hover) {
  .c-sidetab__btn:hover { transform: translateX(-4px); }
}

/* SP（767px以下）では非表示 */
@media (max-width: 767px) {
  .c-sidetab { display: none; }
}


/* ==========================================================================
   4. Project ── このLP専用
   ========================================================================== */

/* --------------------------------------------------------------------------
   4-1. スライスの土台
   -------------------------------------------------------------------------- */

.p-lp {
  
  width: 100%;
  overflow: hidden;
}

.p-lp__section {
  position: relative;   
  font-size: 0;         
  line-height: 0;

  
  --slice-w: 1920;
}

.p-lp__img { width: 100%; }

/* --------------------------------------------------------------------------
   4-2. スライスの高さ
   
   ▼画像を差し替えたら、ここと index.html の height 属性の両方を直してください
   -------------------------------------------------------------------------- */

#mv            { --slice-h: 1201; }  /* 01_mv            y     0 - 1201 */
#problem       { --slice-h: 1650; }  /* 02_problem       y  1201 - 2851 */
#support       { --slice-h: 1112; }  /* 03_support-01    y  2851 - 3963 */
#support-02-03 { --slice-h:  754; }  /* 04_support-02-03 y  3963 - 4717 */
#support-04-05 { --slice-h:  754; }  /* 05_support-04-05 y  4717 - 5471 */
#support-06    { --slice-h:  819; }  /* 06_support-06    y  5471 - 6290 */
#voice         { --slice-h: 1694; }  /* 07_voice         y  6290 - 7984 */
#target        { --slice-h:  627; }  /* 08_target        y  7984 - 8611 */
#entry         { --slice-h:  819; }  /* 09_entry         y  8611 - 9430 */
#seminar       { --slice-h:  646; }  /* 10_seminar       y  9430 -10076 */
/* #price / #price-table は画像スライスをやめ、p-price（背景・見出し・PDFボタンをCSS化）に移行しました */
#contact       { --slice-h:  788; }  /* 13_cta           y 12297 -13085 */
#footer-cta    { --slice-h:  240; }  /* 14_footer        y 13085 -13325 */

/* --------------------------------------------------------------------------
   4-3. ホットスポット（画像の上に重ねる透明なリンク）
   -------------------------------------------------------------------------- */

.p-lp__hotspot {
  position: absolute;
  display: block;
  
  left:   calc(var(--x) / var(--slice-w) * 100%);
  top:    calc(var(--y) / var(--slice-h) * 100%);
  width:  calc(var(--w) / var(--slice-w) * 100%);
  height: calc(var(--h) / var(--slice-h) * 100%);
  border-radius: 4px;
  transition: background-color 0.2s ease;

  /* outline: 2px dashed #f00; */  /* ← 位置調整中だけ有効化 */
}

/* ホバーはマウス環境だけ。スマホでタップ後に色が residual しないようにする */
@media (hover: hover) {
  .p-lp__hotspot:hover { background-color: rgba(255, 255, 255, 0.22); }
}

/* --- 01_mv（1920×1201）------------------------------------------------- */
#hs-mv-doc    { --x:1853; --y: 580; --w:  67; --h: 247; }  /* 右サイドタブ・資料請求 */
#hs-mv-tel    { --x:1857; --y: 827; --w:  63; --h: 374; }  /* 右サイドタブ・お電話 */
#hs-mv-dl     { --x:   0; --y:1093; --w:1853; --h: 108; }  /* 下部オレンジ帯 */

/* --- 09_entry（1920×819）----------------------------------------------- */
#hs-entry-doc { --x: 165; --y: 575; --w: 759; --h: 130; }  /* 資料請求はこちら */
#hs-entry-tel { --x: 998; --y: 576; --w: 762; --h: 128; }  /* お電話でのお問合せ */

/* --- 10_seminar（1920×646）--------------------------------------------- */
#hs-seminar   { --x:   0; --y:   0; --w:1920; --h: 646; }  /* バナー全面をリンクに */



/* --- 13_cta（1920×788）------------------------------------------------- */
#hs-cta-tel   { --x: 878; --y: 354; --w: 783; --h: 118; }  /* フリーダイヤル */

/* --- 14_footer（1920×240）---------------------------------------------- */
#hs-foot-doc  { --x: 162; --y:  54; --w: 762; --h: 131; }  /* 資料請求はこちら */
#hs-foot-tel  { --x:1004; --y:  56; --w: 756; --h: 128; }  /* お電話でのお問合せ */

/* --------------------------------------------------------------------------
   4-4. スマートフォン
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* SP画像の横幅。これ1行で全ホットスポットの横位置が切り替わります */
  .p-lp__section { --slice-w: 750; }

  /* ▼SP画像の高さに書き換えてください
  #mv            { --slice-h: 0; }
  #problem       { --slice-h: 0; }
  #support       { --slice-h: 0; }
  #support-02-03 { --slice-h: 0; }
  #support-04-05 { --slice-h: 0; }
  #support-06    { --slice-h: 0; }
  #voice         { --slice-h: 0; }
  #target        { --slice-h: 0; }
  #entry         { --slice-h: 0; }
  #seminar       { --slice-h: 0; } 
  #contact       { --slice-h: 0; }
  #footer-cta    { --slice-h: 0; }
  */
  /* #price / #price-table は p-price に移行（下部で別途SP対応） */

  /* ▼SP版のボタン座標に書き換えてください
  #hs-mv-doc    { --x:0; --y:0; --w:0; --h:0; }
  #hs-mv-tel    { --x:0; --y:0; --w:0; --h:0; }
  #hs-mv-dl     { --x:0; --y:0; --w:0; --h:0; }
  #hs-entry-doc { --x:0; --y:0; --w:0; --h:0; }
  #hs-entry-tel { --x:0; --y:0; --w:0; --h:0; }
  #hs-cta-tel   { --x:0; --y:0; --w:0; --h:0; }
  #hs-foot-doc  { --x:0; --y:0; --w:0; --h:0; }
  #hs-foot-tel  { --x:0; --y:0; --w:0; --h:0; }
  */
}

/* --------------------------------------------------------------------------
   4-5. 入会諸費用（p-price）
   スライス画像をやめ、背景・見出し・PDFボタンをCSSで作成。
   料金表だけが月別PNG（price/12_price-table_MM.png）で差し替わります。
   -------------------------------------------------------------------------- */

.p-price {
  --price-bg:      #e5efe7;  
  --price-green:   #1f7d3f;  
  --price-eyebrow: #319d2d;  
  --price-red:     #ff2f04;  
  
  --table-w: min(71%, 1366px);

  background-color: var(--price-bg);
  
  padding: 64px 24px 88px;
}


.p-price__inner {
  max-width: 1400px;
  margin-inline: auto;
}

/* ---- 見出し ---- */
.p-price__head {
  text-align: center;
  margin-bottom: 40px;
}

.p-price__eyebrow {
  color: var(--price-eyebrow);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.p-price__title {
  color: var(--price-green);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.p-price__note {
  font-size: 13px;
  color: #555;
}

.p-price__note em {
  color: var(--price-red);
  font-style: normal;
  font-weight: 700;
}

/* ---- 料金表（月別PNG） ---- */
.p-price__table {
  text-align: center;
}

.p-price__table picture { display: block; }  /* SPのwidth:100%を親幅基準にするため */

.p-price__table img {
  width: var(--table-w);
  max-width: 1366px;
  height: auto;
  margin-inline: auto;
}

/* ---- PDFダウンロードボタン ---- */
.p-price__action {
  margin-top: 40px;
  text-align: center;
}

.c-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 40px;
  border-radius: 999px;
  background-color: #1a1a1a;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.c-pdf-btn__icon {
  flex-shrink: 0;
  width: 19px;   /* 38:52 の比率。高さは auto で26px相当になります */
  height: auto;
}

@media (hover: hover) {
  .c-pdf-btn:hover {
    background-color: #333;
    transform: translateY(-2px);
  }
}

/* ---- スマホ幅（767px以下）---- */
@media (max-width: 767px) {
  .p-price {
    padding: 44px 16px 56px;
  }
  .p-price__title { font-size: 27px; }
  .p-price__note  { font-size: 12px; text-align: center; }
  .p-price__table img { width: 100%; max-width: 100%; }  /* SPは画面幅いっぱい */
  .c-pdf-btn {
    width: 100%;
    justify-content: center;
    min-height: 56px;
    padding: 0 16px;
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------
   4-6. SP版セクション（p-lp-sp）とPC/SPの出し分け

   ■方針
     PC版（p-lp）とSP版（p-lp-sp）は、セクションの区切り方が異なるため
     （supportの分割数・CTAの統合）、それぞれ別のHTMLブロックで用意し、
     画面幅で表示を切り替えています。priceセクション（p-price）だけは
     CSS化済みでレスポンシブ対応のため、両者で共有する1つだけを配置。

   ■ブレークポイント：767px
     - 768px以上（PC）… p-lp を表示、p-lp-sp を非表示
     - 767px以下（SP）… p-lp-sp を表示、p-lp を非表示
     ※price（p-price）は常に表示
   -------------------------------------------------------------------------- */

/* デフォルト（PC）ではSP版を隠す */
.p-lp-sp { display: none; }

@media (max-width: 767px) {
  /* SP幅：PC版の画像セクションを隠し、SP版を表示 */
  .p-lp { display: none; }
  .p-lp-sp { display: block; width: 100%; overflow: hidden; }

  /* PC版の追従サイドタブもSPでは非表示（4-4で指定済みだが念のため） */
  .c-sidetab { display: none; }
}

/* SP版セクションの土台。SP画像は750px基準（横375px想定の@2x） */
.p-lp-sp__section {
  position: relative;
  font-size: 0;
  line-height: 0;
  --slice-w: 750;   /* SP画像の横幅。ホットスポット座標計算の基準 */
}

.p-lp-sp__img { width: 100%; }

/* SP版ホットスポット（画像上の透明リンク）。座標は750px基準の実寸 */
.p-lp-sp__hotspot {
  position: absolute;
  display: block;
  left:   calc(var(--x) / var(--slice-w) * 100%);
  top:    calc(var(--y) / var(--slice-h) * 100%);
  width:  calc(var(--w) / var(--slice-w) * 100%);
  height: calc(var(--h) / var(--slice-h) * 100%);
  border-radius: 4px;
}

/* SP版 各セクションの高さ（750px基準の実寸）。
   ホットスポットの縦位置はこの値を基準に計算されます。
   ▼SP画像を差し替えて高さが変わったら、ここと <img> の height を直す */
#mv-sp       { --slice-h: 1656; }  /* 01_mv */
#support-sp  { --slice-h: 8289; }  /* 03_support（SUPPORT01-06一括） */
#voice-sp    { --slice-h: 1467; }  /* 04_voice */
#target-sp   { --slice-h: 1789; }  /* 05_target */
#entry-sp    { --slice-h: 1219; }  /* 06_entry */
#seminar-sp  { --slice-h:  787; }  /* 07_seminar */
#contact-sp  { --slice-h:  872; }  /* 08_cta */
/* 02_problem はホットスポットが無いので --slice-h 不要 */





.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-sp-br { display: none; }
@media (max-width: 767px) {
  .u-sp-br { display: inline; }
}

@media (max-width: 767px) {
  #voice-sp { margin-top: -2px; }
}

/* ==========================================================================
   SP版 追従フッターボタン（画面下に常時固定）
   ・PCでは非表示、SP（767px以下）でのみ表示
   ========================================================================== */
.c-sp-fixed {
  display: none;   /* PCでは出さない */
}

@media (max-width: 767px) {
  .c-sp-fixed {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    gap: 0;
    /* iPhoneのホームバー領域を避ける */
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  }

  .c-sp-fixed__btn {
    display: block;
    width: 50%;      /* 2つを半分ずつ横並び */
    line-height: 0;
  }

  .c-sp-fixed__btn img {
    width: 100%;
    height: auto;
  }

  /* 追従ボタンの高さぶん、最後のコンテンツが隠れないように余白を足す */
  .l-footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom) + 64px);
  }
}