:root {
      --orange: #F07820;
      --green: #3a8c1e;
      --dark: #1A1A1A;
      --gray: #555;
      --border: #ddd;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Noto Sans JP', sans-serif;
      background: #fff;
      color: var(--dark);
      max-width: 480px;
      margin: 0 auto;
    }
    img { display: block; width: 100%; height: auto; }
    a { text-decoration: none; color: inherit; }
.map {
  aspect-ratio: 16 / 9;
}
.map iframe{
  width: 100%;
  height: 100%;
  border: none;
}

.hero-cta {
  width: 90%;
  margin: 40px auto 60px;
}


.access-section {
  margin: 60px 0;
}
.access-heading {
  width: fit-content;
  margin: 0 auto 48px;
}
.access-category {
  width: 90%;
  margin: 24px auto 48px;
}
.access-detail {
  width: 90%;
  margin: auto;
}
.access-detail2 {
  width: 90%;
  margin: 48px auto 0;
}
.access-storename {
	font-size:24px;
	font-weight:bold;
	text-align:center;
	padding:24px 0
}
    /* ── STICKY BAR ── */
    .sticky-bar {
      position: fixed; bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 100%; max-width: 480px;
      z-index: 999;
      background: #fff;
      display: flex; gap: 8px;
      padding: 8px 12px;
      box-shadow: 0 -3px 16px rgba(0,0,0,.5);
    }
    .sticky-bar a { display: block; flex: 1; }
    .sticky-bar a img { border-radius: 8px; }

    /* ── HEADER ── */
    header {
      background: #fff;
      position: sticky; top: 0; z-index: 100;
      padding: 10px 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    header small {
      display: block; font-family: 'Noto Sans JP', sans-serif;
      font-size: 14px; font-weight: 400; color: #333;
      padding-bottom: 5px;
    }
    
    .logo-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
    }

    .access-cat {
      background: #3F5A73;
      padding: 3px 7px;
      color: #FFF;
      display: inline-block;
      }
      .access-time {
        display: inline-block;
      }
    

    .campaign-section {
      width: 100%;
  border: 10px solid #f39800;
  background: repeating-linear-gradient(
    45deg,          /* 斜めの角度（45度） */
    #ffffff,        /* 開始色：白 */
    #ffffff 10px,   /* 白の範囲：10pxまで */
    #f39800 10px,   /* 線の色：オレンジ（10px地点から開始） */
    #f39800 11px    /* 線の太さ：1px（11px地点で終了） */
  );
  padding: 16px;
    }
    .ticket { margin-bottom: 16px; }   /* チケット画像の下だけ16px */
    .campaign { margin-bottom: 16px; } /* キャンペーン画像の下だけ40px */
    .cta-trial {
      margin-bottom: 16px;
      display: block;
    }
    .cta-tel {
      display: block;
    }

    .ticket-caution {
        font-size: 14px;
        margin-bottom: 10px;
        color:red;
        background: #fff;
        display: inline-block;
    }

    /* ── CHECK SECTION ── */
    .check-section { 
      background-image:
    linear-gradient(#f0f0f0 1px, transparent 1px), /* 横線 */
    linear-gradient(90deg, #f0f0f0 1px, transparent 1px); /* 縦線 */
  /* マスのサイズを調整 */
  background-size: 40px 40px;
  padding: 60px 0;
  margin: 60px 0;

     }
  /* セクション全体の背景（方眼紙を再現） */
.check-section {
  padding: 60px 20px;
  background-color: #ffffff;
  background-image:
    linear-gradient(#e5eff5 1px, transparent 1px),
    linear-gradient(90deg, #e5eff5 1px, transparent 1px);
  background-size: 30px 30px; /* 方眼のサイズ */
}

/* チェックリストを囲む黄色いボックス */
.check-box-wrapper {
  background-color: #ffdb9d;
  padding: 40px 30px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  clip-path: polygon(
    0% 0%,       /* 左上 */
    100% 0%,     /* 右上 */
    100% 90%,    /* 右下（少し上） */
    50% 100%,    /* 真ん中下の頂点 */
    0% 90%       /* 左下（少し上） */
  );
}

.check-heading {
  margin-bottom: 48px;
}
/* 各チェックアイテムのスタイル */
.check-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  line-height: 1.6;
}

.check-item p { margin: 0; }

/* 実際のチェックボックスは隠す */
.chk-input { display: none; }

/* カスタムチェックボックスの外枠 */
.chk-visual {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 1px solid #999;
  margin-right: 12px;
  margin-top: 2px;
  position: relative;
}

/* チェックされた時のレ点（オレンジ） */
.chk-input:checked + .chk-visual::after {
  content: "✔";
  position: absolute;
  top: -8px;
  left: 2px;
  color: #f39800;
  font-size: 28px;
}

/* 診断ボタン */
.check-btn-area {
  text-align: center;
  margin: 50px 0 0; /* 切り欠きの分、余白を広めにとる */
}

.check-btn {
  background: #444;
  color: #fff;
  padding: 15px 60px;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

/* 結果ボックス共通 */
.res-box {
  max-width: 600px;
  margin: 20px auto 0;
  background: #fff;
}

/* 結果のラベル（濃い青のバー） */
.res-label {
  background-color: #3e5e77;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.res-box p {
  padding: 0 15px;
  line-height: 1.8;
  color: #333;
}

.res-text {
    margin-bottom: 24px;
}

/* 強調文字（オレンジ） */
.text-orange {
  color: #f39800;
  font-weight: bold;
}

.reason-section {
  background: #3F5A73;
  padding: 60px 0;
  margin: 60px 0 0;
}

.reason-heading {
  width: 90%;
  margin: 0 auto 48px;
}

.reason-item + .reason-item {
  margin-top: 40px;
}

/* 奇数番目：左に寄せる（右側の余白を自動で埋める） */
.reason-item:nth-child(odd) {
  margin-right: auto;
  margin-left: 0;
}

/* 偶数番目：右に寄せる（左側の余白を自動で埋める） */
.reason-item:nth-child(even) {
  margin-left: auto;
  margin-right: 0;
}

.plan-section {
  background: #F7F7F7;
  padding: 60px 0;
}

.case-section {
  position: relative;
  padding: 60px 0;
}
.case-heading {
  margin-bottom: 40px;
}
.case-button {
  width: 65%;
  margin: 16px auto 0;
}
.case-box {
  position: relative;
  z-index: 1;
}
.case-item + .case-item {
margin-top: 50px;
}
.case-bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

/* --- モーダル本体（既存のレイアウトを崩さないよう分離） --- */
.modal-overlay {
  display: none; /* 初期は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* 背景を暗く */
  z-index: 10000; /* 最前面に */
  padding: 40px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* モーダル表示中の背景固定 */
body.modal-open {
  overflow: hidden;
}

/* コンテンツ配置 */
.modal-content {
  position: relative;
  max-width: 600px; /* 画像の最大幅 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ポップアップする画像 */
#modal-image {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* 閉じるボタン */
.modal-close {
  align-self: flex-end; /* 右上に配置 */
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  padding: 10px;
  line-height: 1;
}

.modal-close:hover {
  color: #f39800;
}

.report-section {
   background: #3F5A73;
  padding: 60px 0;
}

.review-section {
 padding: 60px 0;
  background-color: #ffffff;
  background-image:
    linear-gradient(#e5eff5 1px, transparent 1px),
    linear-gradient(90deg, #e5eff5 1px, transparent 1px);
  background-size: 30px 30px; /* 方眼のサイズ */
}

.review-heading {
  width: 95%;
  margin: 0 auto 48px;
}

.review-box {
	padding: 0 20px
}
/* 共通設定 */
.img-block img, 
section img {
  width: 100%;
  display: block;
}

/* ══ STORY SECTION ══ */
.story-section {
  background: #3F5A73;
  padding: 60px 0;
}
.story-heading {
  width: 90%;
  margin: 0 auto 40px;
}
.story-content {
  padding: 0 20px;
}

/* ══ TRAINER SECTION ══ */
.trainer-section {
  padding: 60px 0;
}
.trainer-heading {
  width: fit-content;
  margin: 0 auto 40px;
}
.trainer-list {
  width: 90%;
  margin: auto;
}

/* ══ FAQ SECTION ══ */
.faq-section {
  width: 90%;
  padding: 60px 0;
  margin: auto;
}
.faq-inner {
  margin: 0 auto;
}
.faq-heading {
  margin-bottom: 40px;
  text-align: center;
}


.faq-item {
  background: #fff;
  margin-bottom: 15px;
}

.faq-q,
.faq-a-inner
{
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}
.faq-q {
  font-size: 18px;
}
.faq-a-inner {
  font-size: 16px;
}
.q-icon,
.a-icon
 {
  width: 24px !important;
  margin-right: 15px;
  margin-top: 8px;
}
.q-text {
  flex: 1;
}
/* .tog {
  position: absolute;
  right: 15px;
  font-size: 24px;
  color: #999;
  transition: transform 0.3s;
} */

/* アコーディオンの回答部分 */
.faq-a {
 
}

/* ══ LASTCALL SECTION ══ */
.lastcall-section {
  background: #fff;
}
    footer { background: #111; color: #666; text-align: center; padding: 18px; font-size: 12px; }

    /* 全体のレイアウト調整 */
    .swiper-section {
      padding: 40px 0 0;
      overflow: hidden; /* はみ出し防止 */
    }

    .swiper {
      width: 100%;
    }

    /* 矢印のカスタマイズ（画像に合わせる場合） */
    .swiper-button-next,
    .swiper-button-prev {
      background-color: rgba(255, 255, 255, 0.8);
      width: 40px;
      height: 40px;
      border-radius: 4px;
      color: #ccc !important;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
      font-size: 18px;
      font-weight: bold;
    }




.contact-section {
  margin: 60px 0 120px;
}
  .contact-heading {
    font-size: 32px;
    color: #F0AD4E;
    text-align: center;
    margin-bottom: 40px;
  }
/* 全体 */
.contact-form {
  max-width: 500px;
	width:90%;
  margin: 0 auto;
}

/* フォームグループ */
.contact-form .form-group {
  margin-bottom: 24px;
}

/* ラベル */
.contact-form .label,
.contact-form label {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

/* 必須 */
.contact-form .required {
  color: red;
  font-size: 12px;
  margin-left: 6px;
}

/* 入力フィールド（CF7対応） */
.contact-form input,
.contact-form select {
  width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
}

/* CF7が吐くラッパー対策 */
.wpcf7-form-control-wrap {
  display: block;
}

/* エラー時 */
.wpcf7-not-valid {
  border-color: red !important;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  color: red;
  font-size: 13px;
  margin-top: 6px;
}

/* ラジオボタン横並び */
.contact-form .wpcf7-radio {
  display: flex;
flex-wrap:wrap;
  gap: 15px;
  margin-top: 10px;
}

/* ラジオ1個 */
.contact-form .wpcf7-list-item {
  margin: 0;
}

/* ラベル化されたラジオ */
.contact-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: normal;
}

/* ラジオサイズ */
.contact-form input[type="radio"] {
  width: 18px;
  height: 18px;
}

/* セレクト矢印調整 */
.contact-form select {
  appearance: none;
}

/* 送信ボタン */
.contact-form input[type="submit"] {
  width: 100%;
  padding: 14px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form input[type="submit"]:hover {
  background: #555;
}
  
    .thanks-section {
      max-width: 600px;
      margin: 60px auto;
      background: #fff;
      padding: 40px 30px;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      text-align: center;
    }

    .thanks-section .icon {
      font-size: 60px;
      margin-bottom: 20px;
    }

    .thanks-section h1 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .thanks-section .sub-text {
      color: #666;
      font-size: 14px;
      margin-bottom: 30px;
    }

    .thanks-section .info-box {
      background: #f1f8f4;
      border: 1px solid #d0e8da;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 30px;
      text-align: left;
    }

    .thanks-section .info-box p {
      margin: 5px 0;
      font-size: 14px;
    }

    .thanks-section .highlight {
      font-weight: bold;
      color: #2c7a4b;
    }

    .thanks-section .cta {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 24px;
      background: #2c7a4b;
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      transition: 0.3s;
    }

    .thanks-section .cta:hover {
      background: #25663f;
    }

    .thanks-section .note {
      font-size: 12px;
      color: #999;
      margin-top: 20px;
      line-height: 1.6;
    }

    .thanks-section .steps {
      margin-top: 30px;
      text-align: left;
    }

    .thanks-section .steps h2 {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .thanks-section .steps ul {
      padding-left: 20px;
      list-style: none;
    }

    .thanks-section .steps li {
      font-size: 14px;
      margin-bottom: 8px;
    }