@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* =========================
   混浴マップ：温泉施設ページ
========================= */

.konyoku-onsen-info {
  margin-top: 24px;
}

.konyoku-onsen-image {
  margin-bottom: 24px;
}

.konyoku-onsen-image img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  cursor: zoom-in;
}

.konyoku-onsen-info h2 {
  margin-top: 32px;
  margin-bottom: 18px;
  padding: 12px 16px;
  font-size: 1.3em;
  border-left: 5px solid #666;
  background: #f5f5f5;
}

.konyoku-onsen-info p {
  margin-bottom: 14px;
  line-height: 1.8;
}

.konyoku-onsen-description {
  margin-bottom: 24px;
  line-height: 1.9;
}

.konyoku-last-verified {
  margin-top: 24px;
  font-size: 0.95em;
}

.konyoku-onsen-info a {
  display: inline-block;
  margin-top: 8px;
}

/* スマホ表示 */
@media screen and (max-width: 480px) {

  .konyoku-onsen-info {
    margin-top: 16px;
  }

  .konyoku-onsen-image img {
    border-radius: 6px;
  }

  .konyoku-onsen-info h2 {
    margin-top: 24px;
    padding: 10px 12px;
    font-size: 1.15em;
  }

  .konyoku-onsen-info p {
    font-size: 0.98em;
  }

}
/* 温泉施設ページではサイドバーを非表示 */
.single-onsen #sidebar {
  display: none;
}

/* 本文を横いっぱいに広げる */
.single-onsen #main {
  width: 100%;
  max-width: 100%;
}

/* 本文エリアを中央寄せ */
.single-onsen .content-in {
  max-width: 1000px;
  margin: 0 auto;
}
/* 温泉施設ページのSNSシェア・フォローボタンを非表示 */
.single-onsen .sns-share,
.single-onsen .sns-follow {
  display: none;
}
/* 温泉施設ページでは目次を非表示 */
.single-onsen .toc {
  display: none;
}
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

/* サイトタイトル */
.site-name-text {
  font-family: 'Yomogi', cursive;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* スマホ */
@media screen and (max-width: 480px) {
  .site-name-text {
    font-size: 30px;
  }
}
/* =========================
   入浴体験レポートカード
========================= */

.konyoku-experience-list {
  margin-top: 32px;
}

.konyoku-experience-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}

.konyoku-experience-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.konyoku-experience-user {
  font-weight: 700;
  font-size: 1.05rem;
}

.konyoku-experience-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 14px;
}

.konyoku-experience-status.is-yes {
  background: #eef8f1;
}

.konyoku-experience-status.is-no {
  background: #fff1f1;
}

.konyoku-experience-people {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.konyoku-experience-text {
  line-height: 1.9;
  font-size: 1rem;
}

/* スマホ */
@media screen and (max-width: 480px) {

  .konyoku-experience-card {
    padding: 16px;
    border-radius: 10px;
  }

  .konyoku-experience-meta {
    display: block;
  }

  .konyoku-experience-meta > * {
    display: block;
    margin-bottom: 6px;
  }

}
/* ========================================
   入浴体験レポートカード 見た目調整
======================================== */

.konyoku-experience-card {
  position: relative;
  border: 1px solid #e2e2e2;
  border-left: 6px solid #bbb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 22px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}

/* 男性投稿 */
.konyoku-experience-card.is-male {
  border-left-color: #4a90e2;
}

/* 女性投稿 */
.konyoku-experience-card.is-female {
  border-left-color: #e987a8;
}

/* 年代・性別・入浴日 */
.konyoku-experience-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 14px;
}

.konyoku-experience-meta strong {
  font-size: 1.08rem;
  font-weight: 700;
}

/* 混浴できた / できなかった */
.konyoku-experience-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

/* 混浴できた */
.konyoku-experience-status.is-yes {
  background: #e8f5e9;
  color: #287a38;
}

/* 混浴できなかった */
.konyoku-experience-status.is-no {
  background: #fff1f1;
  color: #b43b3b;
}

/* 当日の入浴者数 */
.konyoku-experience-people {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  line-height: 1.7;
}

/* レポート本文 */
.konyoku-experience-text {
  line-height: 1.9;
  font-size: 1rem;
}

/* スマホ */
@media screen and (max-width: 480px) {
  .konyoku-experience-card {
    padding: 16px;
    border-radius: 10px;
  }

  .konyoku-experience-meta {
    display: block;
  }

  .konyoku-experience-meta > * {
    display: block;
    margin-bottom: 6px;
  }
}
/* 入浴体験投稿ボタン */
.konyoku-experience-submit {
  margin-top: 24px;
  text-align: center;
}

.konyoku-experience-submit a {
  display: inline-block;
  padding: 14px 24px;
  background: #4a90e2;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.konyoku-experience-submit a:hover {
  opacity: 0.9;
}

@media screen and (max-width: 480px) {
  .konyoku-experience-submit a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}
/* 入浴体験投稿 完了メッセージ */
.konyoku-submit-success {
  margin: 20px 0;
  padding: 18px 20px;
  background: #eef8ee;
  border-left: 5px solid #4caf50;
  border-radius: 8px;
  line-height: 1.8;
}
/* 投稿完了後 戻るボタン */
.konyoku-submit-back {
  margin-top: 24px;
  text-align: center;
}

.konyoku-submit-back a {
  display: inline-block;
  padding: 14px 24px;
  background: #4a90e2;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.konyoku-submit-back a:hover {
  opacity: 0.9;
}

/* 入浴体験投稿 注意事項 */
.konyoku-submit-notice {
  margin: 24px 0 16px;
  padding: 18px 20px;
  background: #f7f7f7;
  border-radius: 8px;
  line-height: 1.8;
}

.konyoku-submit-notice strong {
  display: block;
  margin-bottom: 8px;
}

.konyoku-submit-notice ul {
  margin: 0;
  padding-left: 1.4em;
}

.konyoku-submit-agree {
  margin: 18px 0 24px;
  font-weight: 700;
}

.konyoku-submit-agree input {
  margin-right: 8px;
}

/* ========================================
   もっと見るボタン
======================================== */

.konyoku-experience-more {
    text-align: center;
    margin: 25px 0 10px;
}

.konyoku-experience-more a {
    display: inline-block;
    background: #1e73be;
    color: #ffffff !important;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 15px;
    transition: 0.2s;
}

.konyoku-experience-more a:hover {
    background: #155f9e;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* ========================================
   体験レポート：6件目以降を最初は非表示
======================================== */

.konyoku-experience-list .konyoku-experience-card:nth-of-type(n+6) {
    display: none;
}

/* もっと見るを押した後は全部表示 */
.konyoku-experience-list.is-expanded .konyoku-experience-card {
    display: block;
}

/* ========================================
   温泉施設 上部概要カード
======================================== */

.konyoku-summary-card {
    margin: 24px 0 28px;
}

.konyoku-summary-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.konyoku-summary-item {
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: 16px 14px;
    text-align: center;
}

.konyoku-summary-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.konyoku-summary-item strong {
    display: block;
    font-size: 16px;
    line-height: 1.5;
}

/* スマホ */
@media screen and (max-width: 600px) {
    .konyoku-summary-items {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .konyoku-summary-item {
        padding: 12px 14px;
        text-align: left;
    }

    .konyoku-summary-label {
        margin-bottom: 3px;
    }
}

/* ========================================
   温泉施設 基本情報
======================================== */

.konyoku-basic-info {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;
}

.konyoku-info-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 1px solid #e8e8e8;
}

.konyoku-info-row:last-child {
    border-bottom: none;
}

.konyoku-info-label {
    background: #f5f5f5;
    padding: 14px 16px;
    font-weight: 700;
}

.konyoku-info-value {
    padding: 14px 18px;
    line-height: 1.7;
}

/* スマホ */
@media screen and (max-width: 600px) {

    .konyoku-info-row {
        grid-template-columns: 110px 1fr;
    }

    .konyoku-info-label {
        padding: 12px 10px;
        font-size: 14px;
    }

    .konyoku-info-value {
        padding: 12px 10px;
        font-size: 14px;
    }
}

/* ========================================
   温泉施設ページ：関連記事を非表示
======================================== */

.single-onsen .related-entry-heading,
.single-onsen .related-list {
    display: none;
}

/* ========================================
   温泉施設ページ 上部レイアウト調整
======================================== */

/* 施設名まわり */
.single-onsen .entry-title {
    margin-bottom: 12px;
}

/* 上部概要カード */
.konyoku-summary-card {
    margin-top: 16px;
    margin-bottom: 22px;
}

/* 施設画像 */
.konyoku-onsen-image {
    margin-top: 18px;
    margin-bottom: 28px;
}

/* PCでは写真を少し大きく */
.konyoku-onsen-image img {
    max-width: 760px;
}

/* スマホ */
@media screen and (max-width: 600px) {

    .single-onsen .entry-title {
        margin-bottom: 10px;
    }

    .konyoku-summary-card {
        margin-top: 12px;
        margin-bottom: 18px;
    }

    .konyoku-onsen-image {
        margin-top: 14px;
        margin-bottom: 22px;
    }

    .konyoku-onsen-image img {
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================
   温泉施設写真 コンパクト表示
======================================== */

.single-onsen .konyoku-onsen-image img {
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    cursor: zoom-in;
}

/* スマホ */
@media screen and (max-width: 600px) {
    .single-onsen .konyoku-onsen-image img {
        max-width: 100%;
    }
}

/* 温泉施設の写真サイズ */
.single-onsen .konyoku-onsen-image img {
    width: 240px;
    max-width: 70vw;
    height: auto;
    margin: 0 auto;
    cursor: zoom-in;
}

/* スマホ */
@media screen and (max-width: 834px) {
    .single-onsen .konyoku-onsen-image img {
        width: 200px;
        max-width: 60vw;
    }
}

/* 温泉施設写真を中央配置 */
.single-onsen .konyoku-onsen-image {
    text-align: center;
}

.single-onsen .konyoku-onsen-image a {
    display: inline-block;
}

/* 写真を拡大 案内 */
.konyoku-image-zoom-text {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* ========================================
   施設紹介
======================================== */

.konyoku-onsen-description {
    margin: 0 0 24px;
    padding: 4px 4px 4px 8px;
    line-height: 2;
    font-size: 16px;
}

/* 最終情報確認日 */
.konyoku-last-verified {
    margin: 20px 0 8px;
    padding: 8px 12px;
    display: inline-block;
    background: #f7f7f7;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
}

.konyoku-last-verified strong {
    color: #444;
}

/* ========================================
   公式サイトボタン
======================================== */

.konyoku-official-link {
    margin: 12px 0 12px;
}

.konyoku-official-link a {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    color: #1e73be;
    border: 1px solid #1e73be;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: 0.2s;
}

.konyoku-official-link a:hover {
    background: #1e73be;
    color: #fff;
}

/* ========================================
   入浴体験レポートカード 仕上げ
======================================== */

/* カード全体 */
.konyoku-experience-card {
    padding: 20px 22px;
}

/* 年代・性別・入浴日 */
.konyoku-experience-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.konyoku-experience-user {
    font-size: 17px;
    font-weight: 700;
}

/* 混浴結果の行 */
.konyoku-experience-status {
    margin: 4px 0 16px;
}

/* 当日の入浴者数 */
.konyoku-experience-people {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f7f7f7;
    border-radius: 8px;
    line-height: 1.7;
}

/* コメント本文 */
.konyoku-experience-text {
    padding-top: 2px;
    line-height: 1.9;
}

/* スマホ */
@media screen and (max-width: 600px) {

    .konyoku-experience-card {
        padding: 16px;
    }

    .konyoku-experience-meta {
        display: block;
    }

    .konyoku-experience-meta > * {
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 4px;
    }

    .konyoku-experience-user {
        font-size: 16px;
    }

    .konyoku-experience-people {
        padding: 10px 12px;
    }
}

/* ========================================
   体験レポート 情報整理
======================================== */

.konyoku-experience-date {
    color: #666;
    font-size: 14px;
}

.konyoku-experience-date::before {
    content: "｜";
    margin: 0 10px 0 4px;
    color: #bbb;
}

.konyoku-experience-result {
    margin: 4px 0 16px;
}

.konyoku-experience-people strong {
    margin-right: 12px;
}

.konyoku-experience-people span {
    display: inline-block;
}

.konyoku-people-separator {
    margin: 0 6px;
    color: #aaa;
}

/* スマホ */
@media screen and (max-width: 600px) {

    .konyoku-experience-date::before {
        content: "";
        margin: 0;
    }

    .konyoku-experience-date {
        display: block;
        margin-top: 4px;
    }

    .konyoku-experience-people strong {
        display: block;
        margin: 0 0 4px;
    }
}

/* ========================================
   最近の混浴状況
======================================== */

.konyoku-experience-summary {
    margin: 14px 0 24px;
    padding: 14px 16px;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: 14px;
}

.konyoku-experience-summary-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.konyoku-summary-success,
.konyoku-summary-fail {
    display: inline-block;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
}

.konyoku-summary-success {
    background: #e8f5e9;
    color: #287a38;
}

.konyoku-summary-fail {
    background: #fff1f1;
    color: #b43b3b;
}

.konyoku-summary-divider {
    margin: 0 6px;
    color: #aaa;
}

/* スマホ */
@media screen and (max-width: 600px) {

    .konyoku-summary-success,
    .konyoku-summary-fail {
        display: inline-block;
        margin-bottom: 4px;
    }
}

/* スマホ：当日の入浴者を見やすくする */
@media screen and (max-width: 600px) {

    .konyoku-experience-people strong {
        display: block;
        margin-bottom: 6px;
    }

    .konyoku-experience-people {
        line-height: 1.8;
    }
}

/* ========================================
   スマホ：体験レポートを少しコンパクトに
======================================== */

@media screen and (max-width: 600px) {

    .konyoku-experience-card {
        padding: 14px 14px 16px;
        margin-bottom: 16px;
    }

    .konyoku-experience-meta {
        margin-bottom: 10px;
    }

    .konyoku-experience-user {
        font-size: 16px;
    }

    .konyoku-experience-date {
        margin-top: 2px;
        font-size: 13px;
    }

    .konyoku-experience-result {
        margin: 2px 0 12px;
    }

    .konyoku-experience-status {
        margin-bottom: 0;
        padding: 4px 10px;
        font-size: 13px;
    }

    .konyoku-experience-people {
        margin-bottom: 12px;
        padding: 10px 12px;
    }

    .konyoku-experience-people strong {
        margin-bottom: 3px;
    }

    .konyoku-experience-text {
        line-height: 1.75;
        font-size: 14px;
    }
}

/* 最近の混浴状況：成功率 */
.konyoku-summary-rate {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
    font-size: 14px;
}

.konyoku-summary-rate strong {
    margin-left: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #287a38;
}

/* ========================================
   最近の混浴状況：投稿ボタン
======================================== */

.konyoku-experience-quick-submit {
    margin-top: 14px;
}

.konyoku-experience-quick-submit a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    text-align: center;
    background: #4a90e2;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    border-radius: 8px;
    transition: 0.2s;
}

.konyoku-experience-quick-submit a:hover {
    opacity: 0.9;
}

/* ========================================
   入浴体験投稿ページ（固定ページID 35）
======================================== */

/* サイドバー非表示 */
.page-id-35 #sidebar {
    display: none;
}

/* メインエリアを横いっぱいに */
.page-id-35 #main {
    width: 100%;
    max-width: 100%;
}

/* 本文を中央寄せ */
.page-id-35 .content-in {
    max-width: 900px;
    margin: 0 auto;
}

/* SNSシェア・フォローボタン非表示 */
.page-id-35 .sns-share,
.page-id-35 .sns-follow {
    display: none;
}

/* 関連記事なども不要なら非表示 */
.page-id-35 .related-entry-heading,
.page-id-35 .related-list {
    display: none;
}

/* ========================================
   入浴体験投稿フォーム：見た目調整
======================================== */

/* 入力欄を統一 */
.page-id-35 input[type="date"],
.page-id-35 select,
.page-id-35 textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d8d8d8;
    border-radius: 7px;
    background: #fff;
    font-size: 16px;
}

/* 項目同士の間隔 */
.page-id-35 form p {
    margin-bottom: 22px;
}

/* 送信ボタン */
.page-id-35 input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 28px auto 10px;
    padding: 14px 20px;
    border: none;
    border-radius: 9px;
    background: #4a90e2;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.page-id-35 input[type="submit"]:hover {
    opacity: 0.9;
}

/* 同意チェック部分 */
.page-id-35 input[type="checkbox"] {
    transform: scale(1.15);
    margin-right: 8px;
}

/* ========================================
   入浴体験投稿ページ：送信ボタン強制調整
======================================== */

.page-id-35 input[type="submit"],
.page-id-35 button[type="submit"],
.page-id-35 .konyoku-submit-button,
.page-id-35 form button {
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 28px auto 10px !important;
    padding: 14px 20px !important;

    border: none !important;
    border-radius: 9px !important;

    background: #4a90e2 !important;
    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;

    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.page-id-35 input[type="submit"]:hover,
.page-id-35 button[type="submit"]:hover,
.page-id-35 form button:hover {
    opacity: 0.9 !important;
}

/* ========================================
   入浴体験投稿ページ：残っている検索欄を非表示
======================================== */

.page-id-35 .search-box,
.page-id-35 .sidebar,
.page-id-35 #sidebar,
.page-id-35 .widget_search,
.page-id-35 .search-edit {
    display: none !important;
}

/* ========================================
   入浴体験投稿ページ：検索UIを非表示
======================================== */

.page-id-35 .search-menu-button,
.page-id-35 .search-menu-content,
.page-id-35 .search-box,
.page-id-35 .search-form,
.page-id-35 .search-submit,
.page-id-35 .search-submit-button,
.page-id-35 button.search-submit,
.page-id-35 input[type="search"],
.page-id-35 .fa-search,
.page-id-35 .search-icon,
.page-id-35 .search-button {
    display: none !important;
}

/* ========================================
   入浴体験投稿ページ：
   スマホ下部メニューの「サイドバー」を非表示
======================================== */

.page-id-35 .mobile-menu-buttons .sidebar-menu-button {
    display: none !important;
}

/* ========================================
   スマホ：上部サマリー3項目を横並び
======================================== */
@media screen and (max-width: 768px) {

  .konyoku-summary-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .konyoku-summary-item {
    width: auto !important;
    min-width: 0 !important;
    padding: 12px 6px !important;
    text-align: center !important;
  }

  .konyoku-summary-label {
    display: block;
    font-size: 11px !important;
    line-height: 1.4;
    margin-bottom: 5px;
  }

  .konyoku-summary-item strong {
    display: block;
    font-size: 14px !important;
    line-height: 1.4;
    word-break: keep-all;
  }
}

@media screen and (max-width: 768px) {

  .konyoku-summary-items {
    gap: 6px !important;
  }

  .konyoku-summary-item {
    padding: 10px 4px !important;
  }

  .konyoku-summary-label {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .konyoku-summary-item strong {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

}

/* =========================
   トップページ 日本地図エリア
========================= */

.konyoku-japan-map {
  max-width: 900px;
  margin: 40px auto;
  text-align: center;
}

.konyoku-japan-map h2 {
  font-size: 28px;
  margin-bottom: 30px;
}

.konyoku-japan-map-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(70px, 1fr));
  grid-template-rows: repeat(4, 80px);
  gap: 10px;
  align-items: stretch;
}

.konyoku-region {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 14px;
  border: 1px solid #d8d8d8;
  background: #f4f4f4;

  text-decoration: none;
  color: #333;

  font-weight: bold;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.konyoku-region span {
  font-size: 18px;
}

.konyoku-region small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: normal;
}

.konyoku-region.is-disabled {
  opacity: 0.45;
}

.konyoku-region.is-active {
  background: #fff4ed;
  border: 2px solid #ef6b43;
  color: #d94c27;
  transition: 0.2s;
}

.konyoku-region.is-active:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}


/* 日本列島っぽい位置関係 */

.hokkaido {
  grid-column: 7;
  grid-row: 1;
}

.tohoku {
  grid-column: 6;
  grid-row: 2;
}

.kanto {
  grid-column: 6;
  grid-row: 3;
}

.chubu {
  grid-column: 5;
  grid-row: 3;
}

.kinki {
  grid-column: 4;
  grid-row: 3;
}

.chugoku {
  grid-column: 3;
  grid-row: 3;
}

.shikoku {
  grid-column: 3;
  grid-row: 4;
}

.kyushu {
  grid-column: 2;
  grid-row: 4;
}


/* スマホ */
@media screen and (max-width: 600px) {

  .konyoku-japan-map {
    margin: 25px auto;
  }

  .konyoku-japan-map h2 {
    font-size: 22px;
  }

  .konyoku-japan-map-grid {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 58px);
    gap: 5px;
  }

  .konyoku-region {
    border-radius: 8px;
  }

  .konyoku-region span {
    font-size: 13px;
  }

  .konyoku-region small {
    font-size: 9px;
  }
}

/* =========================
   SVG日本地図
========================= */

.konyoku-svg-map-wrap {
  max-width: 900px;
  margin: 30px auto 10px;
  text-align: center;
}

.konyoku-svg-map {
  width: 100%;
  height: auto;
  display: block;
}

.konyoku-svg-map .map-region path {
  fill: #f2f2f2;
  stroke: #d6d6d6;
  stroke-width: 2;
  transition: 0.2s ease;
}

.konyoku-svg-map .map-region text {
  text-anchor: middle;
  font-size: 20px;
  font-weight: 700;
  fill: #666;
  pointer-events: none;
}

.konyoku-svg-map .map-region .map-status {
  font-size: 12px;
  font-weight: 400;
  fill: #999;
}

.konyoku-svg-map .disabled-region {
  opacity: 0.55;
}

.konyoku-svg-map .active-region path {
  fill: #fff2e8;
  stroke: #ef6b43;
  stroke-width: 3;
  cursor: pointer;
}

.konyoku-svg-map .active-region text {
  fill: #d94c27;
}

.konyoku-svg-map .active-region .map-status {
  fill: #ef6b43;
}

.konyoku-svg-map .active-region:hover path {
  fill: #ffe3d2;
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.12));
}

.konyoku-map-note {
  margin-top: 8px;
  font-size: 14px;
  color: #777;
}

/* スマホ */
@media screen and (max-width: 600px) {
  .konyoku-svg-map-wrap {
    margin: 20px auto 5px;
  }

  .konyoku-svg-map .map-region text {
    font-size: 24px;
  }

  .konyoku-svg-map .map-region .map-status {
    font-size: 14px;
  }

  .konyoku-map-note {
    font-size: 13px;
  }
}

/* =========================
   画像版 日本地図
========================= */

.konyoku-japan-map {
  max-width: 1000px;
  margin: 40px auto;
  text-align: center;
}

.konyoku-japan-map h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.konyoku-map-guide {
  font-size: 15px;
  color: #666;
  margin-bottom: 24px;
}

.konyoku-map-image-wrap {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.konyoku-map-image {
  display: block;
  width: 100%;
  height: auto;
}

/* 地方ラベル共通 */
.konyoku-map-area {
  position: absolute;
  transform: translate(-50%, -50%);
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.86);
  color: #333;
  min-width: 76px;
  box-sizing: border-box;
}

.konyoku-map-area small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
}

.konyoku-map-area.is-disabled {
  opacity: 0.72;
  pointer-events: none;
}

/* 九州だけ公開中 */
.konyoku-map-area-kyushu {
  background: rgba(255, 245, 238, 0.95);
  color: #d94c27;
  border: 2px solid #ef6b43;
}

.konyoku-map-area-kyushu small {
  color: #ef6b43;
}

.konyoku-map-area-kyushu:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

/* 各地域の位置 */
.konyoku-map-area-kyushu {
  left: 18%;
  top: 70%;
}

.konyoku-map-area-chugoku {
  left: 31%;
  top: 58%;
}

.konyoku-map-area-shikoku {
  left: 35%;
  top: 72%;
}

.konyoku-map-area-kinki {
  left: 43%;
  top: 61%;
}

.konyoku-map-area-chubu {
  left: 54%;
  top: 56%;
}

.konyoku-map-area-kanto {
  left: 66%;
  top: 54%;
}

.konyoku-map-area-tohoku {
  left: 72%;
  top: 36%;
}

.konyoku-map-area-hokkaido {
  left: 82%;
  top: 16%;
}

.konyoku-map-area-okinawa {
  left: 8%;
  top: 88%;
}

/* スマホ */
@media screen and (max-width: 600px) {

  .konyoku-japan-map {
    margin: 24px auto;
  }

  .konyoku-japan-map h2 {
    font-size: 22px;
  }

  .konyoku-map-guide {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .konyoku-map-area {
    min-width: 58px;
    padding: 5px 6px;
    font-size: 12px;
    border-radius: 7px;
  }

  .konyoku-map-area small {
    font-size: 9px;
    margin-top: 2px;
  }
}

/* =========================
   日本地図 ラベル最終調整
========================= */

/* ラベルを少し控えめに */
.konyoku-map-area {
  min-width: 62px;
  padding: 5px 7px;
  font-size: 15px;
  line-height: 1.15;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

/* 準備中 */
.konyoku-map-area small {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 400;
  color: #777;
}

/* 準備中エリアを少し控えめに */
.konyoku-map-area.is-disabled {
  opacity: 0.78;
}

/* 九州は公開中なので目立たせる */
.konyoku-map-area-kyushu {
  min-width: 66px;
  padding: 6px 8px;
  background: rgba(255, 250, 246, 0.92);
  color: #e24d28;
  border: 1.5px solid #ed6541;
  opacity: 1;
}

.konyoku-map-area-kyushu small {
  color: #e24d28;
}

/* ===== 地方ごとの位置調整 ===== */

.konyoku-map-area-kyushu {
  left: 18%;
  top: 70%;
}

.konyoku-map-area-chugoku {
  left: 31%;
  top: 59%;
}

.konyoku-map-area-shikoku {
  left: 35%;
  top: 72%;
}

.konyoku-map-area-kinki {
  left: 43%;
  top: 61%;
}

.konyoku-map-area-chubu {
  left: 54%;
  top: 57%;
}

.konyoku-map-area-kanto {
  left: 66%;
  top: 55%;
}

.konyoku-map-area-tohoku {
  left: 72%;
  top: 38%;
}

.konyoku-map-area-hokkaido {
  left: 82%;
  top: 18%;
}

.konyoku-map-area-okinawa {
  left: 8%;
  top: 88%;
}

/* スマホ */
@media screen and (max-width: 600px) {

  .konyoku-japan-map h2 {
    font-size: 20px;
  }

  .konyoku-map-guide {
    font-size: 12px;
  }

  .konyoku-map-area {
    min-width: 45px;
    padding: 3px 4px;
    font-size: 10px;
    border-radius: 5px;
  }

  .konyoku-map-area small {
    margin-top: 2px;
    font-size: 7px;
  }

  .konyoku-map-area-kyushu {
    min-width: 48px;
    padding: 4px 5px;
  }
}

/* 日本地図・地方名の位置を微調整 */

.konyoku-map-area-kyushu {
  left: 20%;
  top: 70%;
}

.konyoku-map-area-chugoku {
  left: 31%;
  top: 59%;
}

.konyoku-map-area-shikoku {
  left: 33%;
  top: 72%;
}

.konyoku-map-area-kinki {
  left: 42%;
  top: 61%;
}

.konyoku-map-area-chubu {
  left: 52%;
  top: 57%;
}

.konyoku-map-area-kanto {
  left: 63%;
  top: 55%;
}

.konyoku-map-area-tohoku {
  left: 69%;
  top: 38%;
}

.konyoku-map-area-hokkaido {
  left: 78%;
  top: 18%;
}

.konyoku-map-area-okinawa {
  left: 8%;
  top: 88%;
}

/* 地図上の地域名の微調整 */

/* 関東：少し下へ */
.konyoku-map-label.kanto {
    transform: translate(0px, 15px);
}

/* 中部：少し右へ */
.konyoku-map-label.chubu {
    transform: translate(15px, 0px);
}

/* 中国：少し左へ */
.konyoku-map-label.chugoku {
    transform: translate(-15px, 0px);
}

/* ========================================
   混浴マップ 新規登録・ログインボタン
======================================== */

.konyoku-japan-map {
    position: relative;
}

.konyoku-member-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 20px;
}

.konyoku-member-buttons a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

/* 新規登録 */
.konyoku-member-buttons a:first-child {
    background: #f36b45;
    color: #fff;
    border: 1px solid #f36b45;
}

/* ログイン */
.konyoku-member-buttons a:last-child {
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
}

/* マウスを乗せたとき */
.konyoku-member-buttons a:hover {
    opacity: 0.8;
}

/* スマホ */
@media screen and (max-width: 600px) {
    .konyoku-member-buttons {
        justify-content: center;
        margin-bottom: 12px;
    }

    .konyoku-member-buttons a {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ========================================
   トップページをシンプルにする
======================================== */

/* SNSシェアボタンを非表示 */
.home .sns-share,
.home .sns-share-message {
    display: none !important;
}

/* 投稿日・更新日を非表示 */
.home .date-tags,
.home .post-date,
.home .post-update {
    display: none !important;
}

/* サイドバーを非表示 */
.home #sidebar {
    display: none !important;
}

/* 本文エリアを広げる */
.home #main {
    width: 100% !important;
    max-width: 100% !important;
}

/* 本文＋サイドバー部分を広く使う */
.home .content-in {
    display: block !important;
}

/* ========================================
   トップページの不要要素をさらに非表示
======================================== */

/* Cocoonのフォローボタンを消す */
.home .sns-follow,
.home .sns-follow-message,
.home .footer-sns-follow {
    display: none !important;
}

/* 記事タイトル「混浴マップ」を消す */
.home .entry-title {
    display: none !important;
}

/* =========================================
   混浴マップ ヘッダー
   ========================================= */

/* ヘッダー全体 */
.header-container {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.header-container-in {
  max-width: 1400px;
  margin: 0 auto;
}

/* ロゴ周辺 */
.logo-header {
  padding: 0;
}

.logo-header a {
  text-decoration: none;
}

.logo-header .site-name-text {
  font-size: 27px;
  font-weight: 700;
  color: #17223b;
  white-space: nowrap;
}

/* サイト名の後ろに温泉マーク */
.logo-header .site-name-text::after {
  content: "♨";
  color: #f05b3f;
  font-size: 30px;
  margin-left: 7px;
}

/* キャッチコピー */
.tagline {
  font-size: 14px;
  color: #596274;
  white-space: nowrap;
}

/* PCヘッダー */
@media screen and (min-width: 835px) {

  .header {
    min-height: 76px;
    height: 76px;
  }

  .header-in {
    min-height: 76px;
    height: 76px;
    display: flex;
    align-items: center;
  }

  .logo-header {
    display: flex;
    align-items: center;
  }

  /* ヘッダーメニュー */
  #navi {
    background: #fff;
  }

  #navi .navi-in > ul {
    justify-content: flex-end;
  }

  #navi .navi-in > ul > li > a {
    font-size: 14px;
    font-weight: 600;
    color: #17223b;
    padding-left: 15px;
    padding-right: 15px;
  }

  #navi .navi-in > ul > li > a:hover {
    background: transparent;
    color: #ef5b43;
  }
}

/* トップページの余白を小さくする */
.home .content {
  margin-top: 0;
}

.home .main {
  padding-top: 0;
}

/* トップページの白い箱 */
.home .entry-content {
  margin-top: 0;
}

/* スマホ */
@media screen and (max-width: 834px) {

  .logo-header .site-name-text {
    font-size: 21px;
  }

  .logo-header .site-name-text::after {
    font-size: 23px;
  }
}

/* ========================================
   混浴マップ トップページ・ヘッダー調整
======================================== */

/* ヘッダー全体をコンパクトに */
.header {
  min-height: 82px;
}

.header-in {
  min-height: 82px;
}

/* サイト名 */
.logo-header {
  margin: 0;
}

.logo-header .site-name-text {
  font-size: 25px;
  font-weight: 700;
  white-space: nowrap;
}

/* PCヘッダー：ロゴ左、メニュー右 */
@media screen and (min-width: 835px) {

  .header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
  }

  .logo-header {
    flex-shrink: 0;
  }

  .navi {
    flex: 1;
  }

  .navi-in > ul {
    justify-content: flex-end;
  }

  .navi-in > ul > li {
    width: auto;
  }

  .navi-in > ul > li > a {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* トップページ上部の余白を縮める */
  .home .content {
    margin-top: 15px;
  }

  .home .main {
    padding-top: 10px;
  }
}

/* 地図エリア */
.konyoku-japan-map {
  padding-top: 10px;
}

/* 「地域から混浴温泉を探す」 */
.konyoku-japan-map h2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 説明文 */
.konyoku-map-guide {
  margin-top: 0;
  margin-bottom: 20px;
}

/* 日本地図 */
.konyoku-map-image-wrap {
  margin-top: 0;
}

/* スマホ */
@media screen and (max-width: 834px) {

  .header {
    min-height: auto;
  }

  .header-in {
    min-height: auto;
  }

  .logo-header .site-name-text {
    font-size: 21px;
  }

  .home .content {
    margin-top: 5px;
  }

  .home .main {
    padding-top: 5px;
  }

  .konyoku-japan-map {
    padding-top: 5px;
  }

  .konyoku-japan-map h2 {
    font-size: 22px;
  }
}

/* ========================================
   ヘッダー 新規登録・ログインボタン
======================================== */

/* 新規登録（右から2番目） */
@media screen and (min-width: 835px) {

  .navi-in > ul > li:nth-last-child(2) > a {
    background: #ff6846;
    color: #fff;
    border-radius: 7px;
    padding: 10px 18px;
    margin: 20px 5px;
    height: auto;
    line-height: 1.4;
  }

  /* ログイン（右端） */
  .navi-in > ul > li:last-child > a {
    background: #fff;
    color: #333;
    border: 1px solid #d5d5d5;
    border-radius: 7px;
    padding: 9px 18px;
    margin: 20px 0 20px 5px;
    height: auto;
    line-height: 1.4;
  }

  /* マウスを乗せた時 */
  .navi-in > ul > li:nth-last-child(2) > a:hover {
    opacity: 0.8;
  }

  .navi-in > ul > li:last-child > a:hover {
    background: #f5f5f5;
  }
}

/* =========================================
   混浴マップ：PCヘッダー調整
   ========================================= */

@media screen and (min-width: 835px) {

  /* ヘッダー全体 */
  .header-container-in {
    min-height: 88px;
  }

  /* サイト名 */
  .logo-header .site-name-text {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  /* キャッチコピーをサイト名の右側に表示 */
  .logo-header::after {
    content: "見つかる、行きたくなる、混浴の旅。";
    display: inline-block;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #596273;
    letter-spacing: 0.5px;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* 通常メニュー */
  #navi .navi-in > ul > li > a {
    font-weight: 600;
  }

  /* 新規登録 */
  #navi .navi-in > ul > li:last-child > a {
    background: #ef5b43;
    color: #fff;
    border-radius: 30px;
    padding: 0 24px;
    margin-left: 14px;
    min-height: 48px;
  }

  /* ログイン */
  #navi .navi-in > ul > li:nth-last-child(2) > a {
    background: #fff;
    color: #17233b;
    border: 1px solid #cbd2dc;
    border-radius: 30px;
    padding: 0 24px;
    margin-left: 10px;
    min-height: 48px;
  }
}

/* =========================================
   混浴マップ：トップページ メイン見出し
   ========================================= */

@media screen and (min-width: 835px) {

  /* 見出しエリア */
  .konyoku-japan-map > h2 {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 55px 0 12px 0 !important;
    text-align: left !important;

    font-size: 34px !important;
    line-height: 1.4;
    font-weight: 700;
    color: #17233b;
  }

  /* 見出し上の短い線 */
  .konyoku-japan-map > h2::before {
    content: "";
    display: block;
    width: 58px;
    height: 2px;
    background: #59677d;
    margin-bottom: 26px;
  }

  /* 説明文 */
  .konyoku-japan-map > .konyoku-map-guide {
    text-align: left !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    font-size: 17px;
    line-height: 1.8;
    color: #596273;
  }

}

/* トップページの記事っぽい白箱をなくす */
.home .main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* トップページ上部の余白を詰める */
/* トップページ上部の余白を調整 */
.home .content {
    margin-top: 0 !important;
}

.home .main {
    padding-top: 0 !important;
}

.home .entry-content {
    margin-top: 0 !important;
}

.home .konyoku-japan-map {
    padding-top: 0 !important;
}

/* トップページ全体をもう少し上へ */
.home .konyoku-japan-map {
    margin-top: -35px !important;
}

/* トップページの日本地図を少し大きくする */
.home .konyoku-japan-map img {
    width: 105% !important;
    max-width: none !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ========================================
   スマホ版 B-1 デザイン
   ======================================== */
@media screen and (max-width: 768px) {

    /* 全体の上余白 */
    .home .konyoku-japan-map {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    /* 「地域から混浴温泉を探す」 */
    .home .konyoku-japan-map h2 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin: 0 15px 12px !important;
        text-align: center !important;
    }

    /* 説明文 */
    .home .konyoku-map-guide {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin: 0 15px 20px !important;
    }

    /* 地図をスマホ幅いっぱいに近づける */
    .home .konyoku-map-image-wrap {
        width: 100% !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    .home .konyoku-japan-map img {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   混浴マップ スマホ版トップ B-1
======================================== */

/* PCではスマホ用温泉画像を表示しない */
.konyoku-mobile-hero {
    display: none;
}

@media screen and (max-width: 768px) {

    /* トップ全体 */
    .home .konyoku-japan-map {
        padding-top: 0 !important;
    }

    /* スマホ用温泉ビジュアル */
    .home .konyoku-mobile-hero {
        display: block;
        width: 100%;
        margin: 0 0 26px 0;
        overflow: hidden;
    }

    .home .konyoku-mobile-hero img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }

    /* 見出し */
    .home .konyoku-japan-map h2 {
        font-size: 22px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin: 0 15px 14px !important;
        padding: 0 !important;
    }

    /* PC版にある見出し上の飾り線をスマホでは消す */
    .home .konyoku-japan-map h2::before {
        display: none !important;
    }

    /* 説明文 */
    .home .konyoku-map-guide {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin: 0 10px 22px !important;
    }

    /* 日本地図 */
    .home .konyoku-map-image-wrap {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .home .konyoku-map-image {
        display: block;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   スマホ版 B-1 最終レイアウト調整
======================================== */
@media screen and (max-width: 768px) {

    /* トップページ全体の上余白 */
    .home .konyoku-japan-map {
        padding-top: 15px !important;
        padding-bottom: 20px !important;
    }

    /* 温泉バナー */
    .home .konyoku-mobile-hero {
        margin: 0 12px 22px !important;
        width: calc(100% - 24px) !important;
    }

    .home .konyoku-mobile-hero img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 「地域から混浴温泉を探す」 */
    .home .konyoku-japan-map h2 {
        font-size: 20px !important;
        line-height: 1.45 !important;
        margin: 0 10px 12px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* 説明文 */
    .home .konyoku-map-guide {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 10px 18px !important;
        text-align: center !important;
    }

    /* 地図 */
    .home .konyoku-map-image-wrap {
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* 地図の下の余白を圧縮 */
    .home .konyoku-japan-map {
        margin-bottom: 0 !important;
    }

    .home .entry-content {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .home .main {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ========================================
   熊本県・黒川温泉 一覧（v1追加）
======================================== */

.konyoku-area-list,
.konyoku-facility-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 32px;
}

.konyoku-list-empty {
  margin: 16px 0;
  color: #666;
  line-height: 1.7;
}

.konyoku-area-card,
.konyoku-facility-card {
  display: block;
  text-decoration: none;
  color: #333;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-sizing: border-box;
}

.konyoku-area-card {
  padding: 18px 16px;
  min-height: 64px;
}

.konyoku-area-card-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #d94c27;
}

.konyoku-area-card-count {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

.konyoku-area-card.is-disabled {
  opacity: 0.72;
  pointer-events: none;
}

.konyoku-facility-card {
  overflow: hidden;
}

.konyoku-facility-card-image {
  display: block;
}

.konyoku-facility-card-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.konyoku-facility-card-body {
  display: block;
  padding: 14px 16px 16px;
}

.konyoku-facility-card-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.konyoku-facility-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .konyoku-area-list,
  .konyoku-facility-list {
    gap: 16px;
  }

  .konyoku-area-card:hover,
  .konyoku-facility-card:hover {
    border-color: #ef6b43;
  }

  .konyoku-facility-card {
    display: flex;
    align-items: stretch;
  }

  .konyoku-facility-card-image {
    flex: 0 0 240px;
    max-width: 240px;
  }

  .konyoku-facility-card-image img {
    height: 100%;
    aspect-ratio: auto;
  }

  .konyoku-facility-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .konyoku-facility-card-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

/* ========================================
   九州地図：熊本県クリック（本番画像で実測）
======================================== */

.konyoku-kyushu-image-wrap {
  position: relative;
  width: 100%;
}

.konyoku-kyushu-image {
  display: block;
  width: 100%;
  height: auto;
}

.konyoku-pref-area.konyoku-pref-kumamoto {
  position: absolute;
  left: 51.7%;
  top: 55.1%;
  width: 24%;
  height: 13%;
  min-width: 96px;
  min-height: 56px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* ========================================
   熊本県地図
======================================== */

.konyoku-kumamoto-map {
  margin: 8px 0 28px;
}

.konyoku-kumamoto-image-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.konyoku-kumamoto-image {
  display: block;
  width: 100%;
  height: auto;
}

.konyoku-km-region {
  position: absolute;
  transform: translate(-50%, -50%);
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #333;
  min-width: 72px;
  box-sizing: border-box;
  font-size: 12px;
}

.konyoku-km-region small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 400;
}

.konyoku-km-region.is-open {
  background: rgba(255, 245, 238, 0.96);
  color: #d94c27;
  border: 2px solid #ef6b43;
}

.konyoku-km-region.is-open small {
  color: #ef6b43;
}

.konyoku-km-region.is-disabled,
.konyoku-km-other.is-disabled {
  opacity: 0.78;
  pointer-events: none;
}

.konyoku-km-minamioguni {
  left: 58%;
  top: 18%;
}

.konyoku-km-oguni {
  left: 46%;
  top: 26%;
}

.konyoku-km-aso {
  left: 74%;
  top: 36%;
}

.konyoku-km-minamiaso {
  left: 66%;
  top: 50%;
}

.konyoku-km-kenhoku {
  left: 42%;
  top: 40%;
}

.konyoku-km-kennan {
  left: 58%;
  top: 78%;
}

.konyoku-km-other {
  display: block;
  max-width: 720px;
  margin: 14px auto 0;
  padding: 14px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  font-weight: 700;
  color: #555;
}

.konyoku-km-other small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #888;
}

@media screen and (max-width: 600px) {
  .konyoku-km-region {
    min-width: 64px;
    padding: 5px 6px;
    font-size: 11px;
  }

  .konyoku-pref-area.konyoku-pref-kumamoto {
    width: 32%;
    height: 16%;
  }
}