/*
 * futon.css
 * 用途：提供給首頁「フリースペースコンテンツ」HTML 使用的外部樣式。
 * 說明：以下每一段 CSS 都已標註對應的 HTML 區塊，方便後續維護。
 */

/* =========================================================
   [共用外框]
   對應 HTML：
   <div class="gk-wrap"> ... 全部自由內容區塊 ... </div>
   用途：控制整體最大寬度、字體、行高與左右留白。
   ========================================================= */
.gk-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 10px;
  color: #333;
  line-height: 1.8;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}

/* =========================================================
   [共用區塊外觀]
   對應 HTML：
   <section class="gk-section gk-soft">...</section>
   <section class="gk-section">...</section>
   用途：每一個首頁自由內容段落的白底卡片、圓角、邊框與間距。
   ========================================================= */
.gk-section {
  margin: 0 0 36px;
  padding: 34px 24px;
  background: #fff;
  border: 1px solid #eee4ed;
  border-radius: 16px;
  box-sizing: border-box;
}

/* =========================================================
   [淡色底版本的區塊]
   對應 HTML：
   <section class="gk-section gk-soft">...</section>
   實際使用段落：
   1. 「主要駅からのアクセス」區塊
   2. 「半蔵門・四ツ谷・赤坂見附エリアから通いやすい整體・足つぼ・アロマ」區塊
   用途：讓指定段落背景改為淡紫灰色。
   ========================================================= */
.gk-soft {
  background: #faf7fb;
}

/* =========================================================
   [區塊主標題]
   對應 HTML：
   <h2 class="gk-title">主要駅からのアクセス</h2>
   <h2 class="gk-title">メニュー・料金のご案内</h2>
   <h2 class="gk-title">半蔵門・四ツ谷・赤坂見附エリアから通いやすい整體・足つぼ・アロマ</h2>
   用途：首頁每一大段落的主標題樣式。
   ========================================================= */
.gk-title {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.4;
  text-align: center;
  color: #4b3b52;
  font-weight: 700;
}

/* =========================================================
   [區塊導言文字]
   對應 HTML：
   <p class="gk-lead"> ... </p>
   用途：每一段主標題下方的介紹文字。
   ========================================================= */
.gk-lead {
  max-width: 860px;
  margin: 0 auto 24px;
  text-align: center;
  font-size: 16px;
  color: #555;
}

/* =========================================================
   [雙欄排版容器]
   對應 HTML：
   <div class="gk-grid2"> ... 左右兩張卡片 ... </div>
   實際使用段落：
   1. Access 區塊中的「店舗情報」＋「各駅からのアクセス」
   2. Menu 區塊中的「こんな方におすすめ」＋「選べる3つの施術」
   用途：桌機為兩欄，手機改為單欄。
   ========================================================= */
.gk-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* =========================================================
   [雙欄內卡片]
   對應 HTML：
   <div class="gk-card"> ... </div>
   用途：雙欄中的每張內容卡片外觀。
   ========================================================= */
.gk-card {
  background: #fff;
  border: 1px solid #eee4ed;
  border-radius: 14px;
  padding: 22px;
  box-sizing: border-box;
}

/* =========================================================
   [卡片次標題]
   對應 HTML：
   <h3 class="gk-sub">店舗情報</h3>
   <h3 class="gk-sub">各駅からのアクセス</h3>
   <h3 class="gk-sub">こんな方におすすめ</h3>
   <h3 class="gk-sub">選べる3つの施術</h3>
   用途：雙欄卡片內的小標題。
   ========================================================= */
.gk-sub {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.5;
  color: #4b3b52;
  font-weight: 700;
}

/* =========================================================
   [一般段落文字]
   對應 HTML：
   <p class="gk-text"> ... </p>
   用途：卡片內的補充說明文字。
   ========================================================= */
.gk-text {
  margin: 0 0 12px;
  font-size: 15px;
  color: #444;
}

/* =========================================================
   [清單樣式]
   對應 HTML：
   <ul class="gk-list"> ... </ul>
   <li> ... </li>
   用途：
   1. 「各駅からのアクセス」站點清單
   2. 「こんな方におすすめ」推薦對象清單
   ========================================================= */
.gk-list {
  margin: 0;
  padding-left: 1.2em;
}

.gk-list li {
  margin: 0 0 8px;
  font-size: 15px;
  color: #444;
}

/* =========================================================
   [店舗情報表格]
   對應 HTML：
   <table class="gk-table"> ... </table>
   用途：控制店名、住所、電話、営業時間、定休日的表格顯示。
   ========================================================= */
.gk-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.gk-table th,
.gk-table td {
  padding: 11px 8px;
  border-bottom: 1px solid #efe7ee;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  word-break: break-all;
}

.gk-table th {
  width: 110px;
  color: #4b3b52;
  font-weight: 700;
}

/* =========================================================
   [按鈕群容器]
   對應 HTML：
   <div class="gk-btns"> ... </div>
   與
   <div class="gk-btns" style="justify-content:flex-start;"> ... </div>
   用途：排列 CTA 按鈕，支援自動換行與置中。
   ========================================================= */
.gk-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  justify-content: center;
}

/* =========================================================
   [主按鈕]
   對應 HTML：
   <a class="gk-btn" href="/access/">アクセス・営業時間はこちら</a>
   <a class="gk-btn" href="/menu/">メニュー・料金を見る</a>
   <a class="gk-btn" href="tel:03-3239-6559">ご予約・お問い合わせ</a>
   用途：主要 CTA 按鈕樣式。
   ========================================================= */
.gk-btn {
  display: inline-block;
  background: #7A4F77;
  color: #fff !important;
  border: 1px solid #7A4F77;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none !important;
  box-shadow: none;
  transition: all .2s ease;
}

.gk-btn:hover {
  background: #5F3C5D;
  border-color: #5F3C5D;
  color: #fff !important;
}

/* =========================================================
   [次要外框按鈕]
   對應 HTML：
   <a class="gk-btn-outline" href="/access/">アクセス・営業時間はこちら</a>
   用途：底部 CTA 區塊中的次要按鈕。
   ========================================================= */
.gk-btn-outline {
  display: inline-block;
  background: #fff;
  color: #7A4F77 !important;
  border: 1px solid #7A4F77;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none !important;
  transition: all .2s ease;
}

.gk-btn-outline:hover {
  background: #f7f0f6;
  color: #5F3C5D !important;
  border-color: #5F3C5D;
}

/* =========================================================
   [Google 地圖外框]
   對應 HTML：
   <div class="gk-map">
     <iframe ...></iframe>
   </div>
   用途：控制 Access 區塊地圖的圓角、外框與尺寸。
   ========================================================= */
.gk-map {
  margin-top: 22px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eee4ed;
}

.gk-map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block;
}

/* =========================================================
   [備註文字]
   對應 HTML：
   <p class="gk-note gk-center"> ... </p>
   用途：底部 CTA 區塊下方的補充說明。
   ========================================================= */
.gk-note {
  margin-top: 10px;
  font-size: 13px;
  color: #777;
}

/* =========================================================
   [置中文字]
   對應 HTML：
   class="gk-center"
   用途：讓備註或其他指定文字置中。
   ========================================================= */
.gk-center {
  text-align: center;
}

/* =========================================================
   [口コミ區塊外觀]
   對應 HTML：
   <section class="gk-section gk-review-section"> ... </section>
   用途：首頁新增的口コミ專區外框與淡米色系底色。
   ========================================================= */
.gk-review-section {
  background: #fffdf9;
  border-color: #efe2cf;
}

/* =========================================================
   [口コミ區塊說明文字]
   對應 HTML：
   <p class="gk-review-caption"> ... </p>
   用途：顯示口コミ來源說明與補充註記。
   ========================================================= */
.gk-review-caption {
  margin: -6px 0 18px;
  text-align: center;
  font-size: 13px;
  color: #8a7a66;
}

/* =========================================================
   [口コミ清單容器]
   對應 HTML：
   <div class="gk-review-grid"> ... 多筆口コミ ... </div>
   用途：控制口コミ列表上下間距，桌機版以單欄長列表呈現。
   ========================================================= */
.gk-review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* =========================================================
   [單筆口コミ卡片]
   對應 HTML：
   <article class="gk-review-card"> ... </article>
   用途：每一筆口コミ的外框、上方紫色線條、圓角與底色。
   ========================================================= */
.gk-review-card {
  background: #fff;
  border: 1px solid #eadfce;
  border-top: 3px solid #9d73b6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(87, 63, 95, 0.04);
}

/* =========================================================
   [口コミ頭部資訊]
   對應 HTML：
   <div class="gk-review-head"> ... </div>
   <h3 class="gk-review-name"> ... </h3>
   <p class="gk-review-meta"> ... </p>
   <p class="gk-review-date"> ... </p>
   用途：顯示暱稱、屬性與投稿日資訊。
   ========================================================= */
.gk-review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 10px;
  background: #fffdfa;
}

.gk-review-name {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  color: #4b3b52;
  font-weight: 700;
}

.gk-review-meta,
.gk-review-date {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #777;
}

.gk-review-date {
  white-space: nowrap;
}

/* =========================================================
   [口コミ評分列]
   對應 HTML：
   <div class="gk-review-score"> ... </div>
   <span class="gk-stars">★★★★★</span>
   用途：顯示星級與各項評分欄位。
   ========================================================= */
.gk-review-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 11px 18px;
  border-top: 1px solid #eee2f0;
  border-bottom: 1px solid #eee2f0;
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
  color: #5a5360;
}

.gk-stars {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 2px;
  color: #f4b323;
  font-weight: 700;
}

/* =========================================================
   [口コミ本文]
   對應 HTML：
   <p class="gk-review-body"> ... </p>
   用途：顯示每則口コミ的正文內容。
   ========================================================= */
.gk-review-body {
  margin: 0;
  padding: 16px 18px 12px;
  font-size: 16px;
  line-height: 1.9;
  color: #444;
}

/* =========================================================
   [口コミ標籤列]
   對應 HTML：
   <p class="gk-review-tags"><span>...</span>...</p>
   用途：顯示預約方案、分類與補充標籤。
   ========================================================= */
.gk-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0 18px 18px;
}

.gk-review-tags span {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid #e8dfee;
  border-radius: 999px;
  background: #f5f1f7;
  color: #6a556d;
  font-size: 13px;
  line-height: 1.4;
}

/* =========================================================
   [Google 評論填寫區塊]
   對應 HTML：
   <div class="gk-review-write-box"> ... </div>
   用途：在底部 CTA 區塊加入 Google 口コミ投稿按鈕與 QR code。
   ========================================================= */
.gk-review-write-box {
  margin-top: 26px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 220px;
  gap: 24px;
  align-items: center;
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 16px;
  box-sizing: border-box;
}

.gk-review-write-text .gk-sub {
  margin-bottom: 10px;
}

.gk-review-write-text .gk-text {
  margin-bottom: 0;
}

.gk-review-write-qr {
  text-align: center;
}

.gk-review-write-qr a {
  display: inline-block;
  line-height: 0;
}

.gk-review-write-qr img {
  width: 100%;
  max-width: 180px;
  height: auto;
  border: 1px solid #eadfce;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(87, 63, 95, 0.08);
}

.gk-review-write-qr .gk-note {
  margin-top: 10px;
}

/* =========================================================
   [首頁原生區塊顯示恢復]
   對應 HTML：主題原本首頁的各區塊
   目的：依使用者要求，將コラム上方的原生區塊全部恢復正常顯示
   說明：目前不再對 #index_content1_top、#index_content1、#index_content2、#index_news 套用隱藏規則
   ========================================================= */

/* =========================================================
   [手機版響應式設定]
   對應 HTML：整個 <div class="gk-wrap"> 內的所有區塊
   用途：
   1. 修正手機版內容過窄問題
   2. 雙欄改單欄
   3. 表格表頭縮窄
   4. 按鈕滿版，提升點擊性
   ========================================================= */
@media (max-width: 768px) {
  .gk-wrap {
    padding: 15px 10px;
  }

  .gk-section {
    padding: 24px 15px;
    margin-bottom: 20px;
    border-radius: 12px;
  }

  .gk-title {
    font-size: 22px;
  }

  .gk-lead {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .gk-grid2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gk-card {
    padding: 18px 15px;
  }

  .gk-table th {
    width: 80px;
    font-size: 14px;
  }

  .gk-table td {
    font-size: 14px;
  }

  .gk-map iframe {
    height: 280px;
  }

  .gk-review-caption {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .gk-review-head {
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 8px;
  }

  .gk-review-name {
    font-size: 18px;
  }

  .gk-review-meta,
  .gk-review-date {
    font-size: 12px;
  }

  .gk-review-date {
    margin-top: 0;
    white-space: normal;
  }

  .gk-review-score {
    gap: 6px 12px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .gk-stars {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .gk-review-body {
    padding: 14px 14px 10px;
    font-size: 15px;
    line-height: 1.85;
  }

  .gk-review-tags {
    gap: 8px;
    padding: 0 14px 14px;
  }

  .gk-review-tags span {
    font-size: 12px;
    padding: 6px 10px;
  }

  .gk-review-write-box {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 15px;
  }

  .gk-review-write-text .gk-sub {
    font-size: 20px;
  }

  .gk-review-write-qr img {
    max-width: 160px;
  }

  .gk-btn,
  .gk-btn-outline {
    width: 100%;
    text-align: center;
    padding: 12px 10px;
  }
}