@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){
  /*必要ならばここにコードを書く*/
}


/*****************************
 **2025/3/12　追加　もっと見るのボタン
*******************************/

/* もっと見るボタンの修正（デフォルト: 白背景 + 黒文字 + オレンジ枠） */
.more-button {
    display: inline-block; /* 幅を適切に確保 */
    padding: 12px 24px;
    background-color: white; /* 背景を白 */
    color: black; /* 文字色を黒 */
    border: 2px solid #FF8C00; /* オレンジの枠線 */
    text-align: center;
    text-decoration: none;
    border-radius: 8px; /* 角を丸く */
    font-weight: bold;
    font-family: 'Poppins', sans-serif; /* スタイリッシュなフォント */
    font-size: 16px;
    letter-spacing: 1px; /* 文字間を広げる */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 軽く影をつける */
    min-width: 150px; /* 最小幅を確保 */
    text-align: center;
}

/* ホバー時（オレンジ塗りつぶし + 白文字） */
.more-button:hover {
    background-color: #FF8C00; /* オレンジ背景 */
    color: white; /* 白文字 */
    transform: scale(1.05); /* 少し拡大 */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* 影を強める */
}


/* コメントフォームのスタイル（左寄せ） */
.comment-form {
  width: 98%;                        /* 横幅はやや余裕を持たせる */
  max-width: 800px;                  /* 最大幅を設定 */
  margin: 20px 0;                    /* 上下に余白を設け、左寄せ */
  padding: 20px;                     /* フォーム内部の余白を調整 */
  background-color: #fff;            /* 背景色を白色に設定 */
  border: 2px solid #FF8C00;         /* 明るいオレンジ色の枠線を設定 */
  border-radius: 8px;                /* 角を丸くして柔らかな印象に */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* 軽い影で立体感を追加 */
  text-align: left;                  /* 内部テキストを左寄せ */
}


/* 名前入力欄（幅を縮小） */
.comment-form input[type="text"] {
    width: 40%; /* 幅を狭める */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
}

/* コメント入力欄（広めに） */
.comment-form textarea {
    width: 98%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
}

/* フォーカス時（強調） */
.comment-form input[type="text"]:focus,
.comment-form textarea:focus {
    border-color: #FF8C00; /* オレンジの枠線 */
    outline: none;
}

/* コメント投稿ボタン（白背景 + 黒文字 + オレンジ枠 + 横幅調整） */
.comment-form button {
    display: inline-block;
    width: 98%; /* 横幅調整 */
    padding: 12px;
    background-color: white; /* 白背景 */
    color: black; /* 黒文字 */
    border: 2px solid #FF8C00; /* オレンジの枠線 */
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* ホバー・フォーカス時（オレンジ背景 + 白文字） */
.comment-form button:hover,
.comment-form button:focus {
    background-color: #FF8C00; /* オレンジ塗りつぶし */
    color: white; /* 文字色を白に */
    transform: scale(1.02);
}

/* 返信フォームのスタイル */
.reply-form {
    width: 100%;
    max-width: 700px; /* 適度な幅に */
    margin: 15px 0;
    padding: 15px;
    background-color: #fff;
    border: 2px solid #FF8C00;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* 返信入力欄 */
.reply-form input[type="text"],
.reply-form textarea {
    width: 98%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
}

/* 返信投稿ボタン（白背景 + 黒文字 + オレンジ枠） */
.reply-form button {
    display: inline-block;
    width: auto; /* 横幅をボタンのテキストサイズに合わせる */
    padding: 10px 15px;
    background-color: white;
    color: black;
    border: 2px solid #FF8C00;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* ホバー・フォーカス時（オレンジ背景 + 白文字） */
.reply-form button:hover,
.reply-form button:focus {
    background-color: #FF8C00;
    color: white;
    transform: scale(1.02);
}




/* 目次非表示（不要なら省略OK） */
.toc-container {
    display: none !important;
}


/* 白背景・黒文字・オレンジ枠 → ホバー時オレンジ背景・白文字 */
.custom-orange-button {
  appearance: none;           /* ブラウザ独自のボタンスタイルを無効化 */
  -webkit-appearance: none;   /* Safari/Chrome用 */

  background-color: #fff !important;    /* 通常時は白背景 */
  color: #000 !important;              /* 通常時は黒文字 */
  border: 2px solid #FF8C00 !important;/* オレンジ枠線 */
  padding: 10px 20px !important;
  border-radius: 5px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.custom-orange-button:hover {
  background-color: #FF8C00 !important; /* ホバー時オレンジ背景 */
  color: #fff !important;              /* ホバー時白文字 */
}

.custom-orange-button {
  appearance: none;
  -webkit-appearance: none;

  background-color: #fff !important;    /* 通常時は白背景 */
  color: #000 !important;              /* 通常時は黒文字 */
  border: 2px solid #FF8C00 !important;/* オレンジ枠線 */
  padding: 10px 20px !important;
  border-radius: 5px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.custom-orange-button:hover {
  background-color: #FF8C00 !important; /* ホバー時オレンジ背景 */
  color: #fff !important;              /* ホバー時白文字 */
}

/*投稿のタイトル*/
.recommendation-page h1 {
    font-family: "DotGothic16", sans-serif; /* DotGothic16 フォントを適用 */
    font-size: 3rem;  /* もう少し大きめに */
    font-weight: 400;
	letter-spacing: 1px; /* 文字間の調整 */
    text-align: center;
    padding: 15px 25px;
    background: white;
    color: #333;
    display: flex;
    justify-content: center; 
    align-items: center;
    width: fit-content;
    margin: 20px auto;
    position: relative;
    transition: color 0.3s ease-in-out;
}

/* スタイリッシュなアンダーライン */
.recommendation-page h1::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #FFA500, #FF4500);
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* ホバー時のアニメーション */
.recommendation-page h1:hover::after {
    width: 120%;
	color: #FF4500; /* ホバー時にちょっと赤みを増す */
    transition: all 0.3s ease-in-out;
}

/*Googleマップボタン*/
.map-button-container {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.google-map-button {
  display: inline-block;
  padding: 12px 24px;
  background: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #FF6600;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  white-space: nowrap;          /* ← 改行させない */
  min-width: 250px;             /* ← 十分な幅を確保（調整可） */
  text-align: center;
  font-size: 16px;
}
.google-map-button:hover {
  background: #FF6600;
  color: #fff;
}


/* 白い吹き出しを削除 */
.comment-box::before {
    content: none !important;
    display: none !important;
}



/* フォーム */

form {
  max-width: 500px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* 入力フィールド */
input, select, textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

/* 必須マーク */
.required {
  color: red;
}

/* 投稿ボタン */
#recommendation-submit-button {
  width: 100%;
  padding: 12px;
  font-size: 18px;
  border: 2px solid orange;
  background-color: white;
  color: black;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#recommendation-submit-button:hover {
  background-color: orange;
  color: white;
}


/* フォーム全体のデザイン */
.post-form-container {
  width: 100%;                       /* 横幅を100%に設定（レスポンシブ対応） */
  max-width: 680px;                  /* フォームの最大幅（必要に応じて720pxでもOK） */
  margin: 0 auto;                    /* フォームをページ中央に配置 */
  background: #fdf7f2;               /* 落ち着いた和紙風の背景色 */
  border: 2px solid #e3a8a1;         /* 柔らかな桜色の枠線 */
  border-radius: 10px;               /* 角丸で柔らかい印象に */
  padding: 1rem;                     /* 内側に余白を設定 */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* 軽い影で立体感を演出 */
}



/* タイトルのデザイン */
.post-form-container h2 {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #8c5a5a; /* 深みのある茶系（和の雰囲気） */
    background: #f6e6df; /* ほんのり桜色 */
    padding: 12px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* ラベルのデザイン */
.post-form-container label {
    font-weight: bold;
    color: #704f4f; /* 上品な茶色 */
    display: block;
    margin-top: 12px;
}

/* 入力エリアの共通設定 */
.post-form-container input,
.post-form-container select,
.post-form-container textarea {
    width: 100%;
    box-sizing: border-box;  /* ←追加するとズレない */
    padding: 10px;
    border: 1px solid #d9bebe;
    border-radius: 5px;
    background: #fffaf5;
    font-size: 16px;
    color: #5a4a4a;
}

/* プレースホルダーの色 */
.post-form-container input::placeholder,
.post-form-container textarea::placeholder {
    color: #a67b7b;
    opacity: 0.7;
}

/* ボタンのデザイン */
.post-form-container button {
    width: 100%;
    background: #a67060;
    color: white;
    border: none;
    padding: 12px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 15px;
    cursor: pointer;
    transition: 0.3s;
}

/* ボタンのホバーエフェクト */
.post-form-container button:hover {
    background: #8c5a5a;
}

/* タイトル削除 */
.page-id-235 h1,
.page-id-235 .entry-title {
    display: none !important;
}

/* 投稿フォームの説明文を中央寄せ */
.post-form-container p {
    text-align: center;
    font-size: 16px;
    color: #704f4f;
    margin-bottom: 10px; /* 下の余白を少し調整 */
}

/* ========== 共通設定 ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ========== Googleマップボタン ========== */
.google-map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #FF6600;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 240px;
  font-size: 16px;
  gap: 8px;
  text-align: center;
  margin: 16px auto;
}

.google-map-button:hover {
  background: #FF6600;
  color: #fff;
}

.google-map-button .icon {
  font-size: 18px;
  line-height: 1;
}

.google-map-button .text {
  line-height: 1;
}

/* 共通 */
.spot-map-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 40px auto;
  max-width: 1100px;
  align-items: flex-start;
  overflow-x: hidden; /* 横スクロール防止 */
}

.map-box {
  flex: 7;
  min-width: 300px;
}

.map-box iframe {
  width: 100%;
  height: 500px;
  border: none;
  border-radius: 12px;
  display: block;
}

.spot-info-box {
  flex: 3;
  min-width: 280px;
  background: #fefdfb;
  border: 2px solid #FF6600;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.05);
  font-family: 'Noto Sans JP', sans-serif;

  background-image: 
    linear-gradient(transparent 29px, rgba(255,102,0,0.15) 30px),
    url('https://www.transparenttextures.com/patterns/paper-fibers.png');
  background-size: 100% 30px, 300px auto;
  background-repeat: repeat;
  background-blend-mode: multiply;

  /* height削除 → 自動調整に */
  height: auto;
}

/* ラベルはそのままでOK */


/* === モバイル対応 === */
/* モバイル対応（横スクロール防止 & 縦積み） */
@media screen and (max-width: 768px) {
  .spot-map-wrapper {
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
    max-width: 100%;
    overflow-x: hidden;
  }

  .map-box,
  .spot-info-box {
    width: 100%;
    min-width: auto;
    height: auto;
  }

  .map-box iframe {
    height: 70vw; /* マップを縦長に調整（例：幅の70%） */
  }
}


/* ========== フォトギャラリー ========== */
.photo-gallery-container {
  max-width: 1100px !important;  /* ← spot-map-wrapperと完全一致 */
  width: 100%;
  margin: 40px auto;
  padding: 30px;
  border: 2px solid #E67E22;
  border-radius: 15px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
  background-color: #FFF;
  display: block;
  text-align: center;
}

.entry-content {
  max-width: none !important;  /* ← 必要なら */
}


.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.photo-item {
  width: 200px;
  height: 200px;
  border: 2px solid #E67E22;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  overflow: hidden;
}

.photo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
  border-radius: 10px;
}

.photo-item img:hover {
  transform: scale(1.05);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

/* ========== モバイル対応 ========== */
@media screen and (max-width: 768px) {
  .spot-map-wrapper {
    flex-direction: column;
  }

  .spot-info-box,
  .map-box {
    width: 100%;
  }

  .photo-item {
    width: 100%;
    max-width: 300px;
  }
}

/* 📸 投稿ボタンを画像ギャラリーの中に表示 */
#togglePhotoForm {
  display: inline-block;
  margin-top: -40px; /* 🔥 位置を引き上げてギャラリーに密着 */
  margin-bottom: 30px;
  padding: 12px 24px;
  background: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #FF6600;
  border-radius: 8px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: 16px;
  cursor: pointer;

  position: relative;
  top: -10px;
}

/* ボタン中央揃え */
#togglePhotoFormWrapper {
  text-align: center;
  margin-top: 20px; /* 🔥 ギャラリーに吸い寄せる */
}


.more-button-wrapper {
  margin-top: 30px;
}

.photo-submit-wrapper {
  margin-top: 30px;
  padding-top: 30px;
  text-align: center;
}

.photo-submit-button {
  padding: 12px 24px;
  border: 2px solid #FF6600;
  background: #fff;
  border-radius: 8px;
  font-weight: bold;
  transition: all 0.3s ease;
  margin-top: 15px; /* ← ここ追加！ */
}
.photo-submit-button:hover {
  background: #FF6600;
  color: #fff;
}


.rating-section {
  border-top: 2px solid #eee; /* やさしいグレーの線 */
  margin-top: 60px;           /* 上との間隔 */
  padding-top: 40px;          /* セクション内の余白 */
}

.rating-section h2 {
  margin-bottom: 30px;
  font-size: 22px;
}


.visit-buttons {
  text-align: center;
  margin: 40px 0 30px;
  padding-top: 30px;
  border-top: 2px dashed #ddd;  /* ✅ ここでやさしく区切る */
}

.visit-buttons p {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}


/*都道府県別*/






/* ====================
   横スクロール防止CSS
   ==================== */

/* 全体のはみ出し防止 */
html, body {
  max-width: 100%;
  overflow-x: hidden;

  max-width: 100%;
  overflow-x: hidden;
}

/* 画像・SVGを画面幅にフィットさせる */
img, svg {
  max-width: 100%;
  height: auto;
  display: block;

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

/* 地図（SVG）がスマホ画面に収まるように調整 */
.svg-map-container {
  max-width: 100%;
  overflow-x: auto;
}

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


/* 基本設定 (PC向け) */
.for-pc {
    display: block !important;
}
.for-mobile {
    display: none !important;
}


/* =======================================
   お知らせセクション（front-news-box 用）
   ======================================= */
   .front-news-box {
    background: linear-gradient(135deg, #e3f2fd, #ffffff); /* やさしい青系背景に調整 */
    border-left: 5px solid #42a5f5; /* 左アクセントライン：青系 */
    border-radius: 12px;
    padding: 1.5rem 1rem;
    margin: 2rem auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 95%;
    color: #333;
    font-size: 0.8rem; /* 📝 文字サイズを少し小さく調整 */
    line-height: 1.7;
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox用 */
    scrollbar-color: #90caf9 #e3f2fd;
    box-sizing: border-box;
  }
  
  /* スクロールバー（Webkit系ブラウザ） */
  .front-news-box::-webkit-scrollbar {
    width: 6px;
  }
  .front-news-box::-webkit-scrollbar-track {
    background: #e3f2fd;
    border-radius: 6px;
  }
  .front-news-box::-webkit-scrollbar-thumb {
    background-color: #42a5f5;
    border-radius: 6px;
  }
  
  /* セクションタイトル内の h2 */
  .front-news-box h2 {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    color: #1565c0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.4em;
  }
  
  /* 実際の内容に使われる部分（ACF出力） */
  .front-news-content {
    padding-left: 0.5em;
    white-space: pre-wrap;
    word-break: break-word;
  }
  
  @media (max-width: 480px) {
    .front-news-box {
      font-size: 0.75rem; /* 📝 モバイルでもさらに小さめに */
      line-height: 1.6;
      padding: 1rem;
    }
    .front-news-box h2 {
      font-size: 0.85rem;
    }
  }













  .highlight-card,
  .news-card,
  .newposts-card {
    background: linear-gradient(135deg, #f6a571, #eb8523); /* オレンジ系グラデ */
    color: white;
    border-radius: 18px;
    padding: 1.5rem 1rem;
    text-align: center;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    width: 240px;                /* ✅ 完全固定幅に変更 */
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(255, 152, 0, 0.4);
    margin: 0 auto 2rem;
  }
  
  .newpost-card h3 {
    font-size: 1rem;
    font-weight: bold;
    color: #f57c00;
    margin-bottom: 4px;
  
    /* ✅ 複数行を許可して切れないように */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  
  
  


.highlight-card:hover {
  transform: translateY(-4px);
}

.highlight-icon {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
}

.highlight-card h2 {
  font-size: 1.4rem;
  margin-top: 10px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.highlight-card h2 span {
  font-size: 1.8rem;
  font-weight: bold;
  display: block;
}

.highlight-card p {
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.highlight-btn {
  background-color: #ffffff !important;       /* 白背景 */
  color: #ff6600 !important;                  /* オレンジ文字 */
  font-weight: bold;
  font-size: 16px;
  padding: 12px 32px;
  border-radius: 9999px;
  border: 2px solid #ff6600;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-family: 'DotGothic16', sans-serif;
  display: inline-block;
  transition: all 0.3s ease;
}

/* ホバー時に色反転 */
.highlight-btn:hover {
  background-color: #ff6600 !important;
  color: #ffffff !important;
}

.top-section-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  padding: 0 1rem;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  flex-direction: row;
}

.top-section-flex .front-news-box {
  order: 1;
}

.front-news-box h2,
.newposts-heading {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: 0.2rem;
}


/* 共通：トップセクションの2カラム */
.top-section-flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* ← 高さをそろえる */
  gap: 2rem;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1200px;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* カラムラッパー：高さ揃え用にflex指定 */
.news-wrapper,
.newposts-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  padding: 0 16px; /* スマホ用余白調整 */
  align-items: center; /* ✅ PCで中央寄せ */
}

/* お知らせボックス（共通） */
.news-wrapper .front-news-box {
  flex: 1;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #fef8f3, #fff);
  border-left: 6px solid #f7a440;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ✅ Swiperスライダー中央寄せ（PC用） */
@media (min-width: 769px) {
  .newposts-wrapper .swiper {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}



/* 新着投稿ラッパー */
.newposts-wrapper {
  background: #fffdf7;
  border: 2px solid #ffe0b2;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  box-shadow: 0 6px 18px rgba(255, 152, 0, 0.1);
  flex: 1; /* ← 高さ揃えのため追加 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 新着投稿見出し */
.newposts-heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: #e65100;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 0 #ffe0b2;
}

.newposts-heading::before {
  content: "🆕";
  font-size: 1.5rem;
}

/* スライダー共通 */
.newposts-swiper {
  padding: 0 24px;                  /* ✅ 両サイドに余白を確保（重要） */
  box-sizing: border-box;
  width: 100%;
  overflow: visible !important;
  position: relative;
}

.swiper-slide {
  width: 240px;              /* ✅ カードと同じ幅で固定（ズレ防止の核心） */
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}




.pref-name {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 1.2rem;
}

.card-button {
  display: inline-block;
  background: #ff9800;
  color: white;
  padding: 10px 18px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.card-button:hover {
  background: #f57c00;
}

/* 投稿ボタン共通 */
.new-spot-btn {
  margin-top: 1rem;
  display: inline-block;
  background: #ff9800;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: background 0.3s;
}

.new-spot-btn:hover {
  background: #f57c00;
}

/* モバイル表示時の調整 */
/* モバイル表示時の調整 */
@media screen and (max-width: 768px) {
  .top-section-flex {
    flex-direction: column;
    gap: 2rem;
  }

  .news-wrapper,
  .newposts-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .news-wrapper .front-news-box {
    width: 100%;
    max-width: 98%;               /* ✅ 横幅をさらに広く */
    margin: 0 auto;
    padding: 1.8rem 1.4rem;       /* ✅ 少し余白も拡大 */
    font-size: 1rem;
    line-height: 1.6;
    border-left: 4px solid #f7a440;
    border-radius: 14px;
    background: #fffdf9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  .newposts-wrapper {
    height: auto;
  }
}






/***************TOPページ*****************/


/***********************************/
/* ▼▼▼▼▼▼▼▼▼▼▼▼▼旅ログ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
/* ▼ 旅ログ一覧 全体レイアウト */
.tabilog-archive {
  max-width: 960px;
  margin: 3rem auto;
  padding: 0 1.2rem;
}

/* ▼ 一覧内の各投稿カード */
.tabilog-entry {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #eee;
}

/* ▼ サムネイル画像 */
.tabilog-thumb img {
  width: 200px;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ▼ コンテンツ部分 */
.tabilog-content {
  flex: 1;
}

/* ▼ タイトル */
.tabilog-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
.tabilog-title a {
  color: #d84315;
  text-decoration: none;
}

/* ▼ 投稿日 */
.tabilog-meta {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 0.5rem;
}

/* ▼ タグ表示 */
.tabilog-tags {
  margin-bottom: 0.5rem;
}
.tabilog-tag {
  display: inline-block;
  background: #fce4ec;
  color: #c2185b;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 20px;
  margin: 0 4px 4px 0;
}

/* ▼ 抜粋 */
.tabilog-excerpt {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.5rem;
}

/* ▼ 「詳しく見る」ボタン */
.tabilog-more {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold;
  color: #ff6f00;
  text-decoration: none;
}

/* ページネーション全体のスタイル（中央寄せ） */
.tabilog-pagination {
  text-align: center;
  margin-top: 2rem;
}

/* ページ番号のボタンスタイル */
.tabilog-pagination .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 8px 14px;
  background: #fff8e1;         /* 背景色：淡い黄色 */
  border-radius: 20px;         /* 丸みをつける */
  color: #ff6f00;              /* 文字色：オレンジ */
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s;
}

/* 現在のページ番号にハイライト */
.tabilog-pagination .current {
  background: #ffcc80;         /* 背景：濃いめのオレンジ */
  color: white;                /* 文字色：白 */
}

/* ▼ アイキャッチがないときのテキスト表示 */
.no-image-text {
  width: 200px;
  height: 140px;
  background-color: #f5f5f5;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ==========================
   旅ログ（tabilog）モバイル見やすさ改善
========================== */
@media screen and (max-width: 600px) {
  /* ▼ 旅ログ全体の横幅 */
  .tabilog-archive {
    padding: 0 1vw;
    margin: 1.1rem auto;
    max-width: 370px;
  }

  /* ▼ 投稿カード：完全な縦型・中央寄せ・圧縮 */
  .tabilog-entry {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.32rem !important;
    background: #fffefa;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(255,180,0,0.06);
    margin-bottom: 0.68rem !important;
    padding: 0.75rem 0.45rem !important;
    border: none !important;
    width: 99%;
    max-width: 340px;
    min-width: 0;
  }

  /* ▼ サムネイル画像：小さく・中央・下に余白 */
  .tabilog-thumb img,
  .no-image-text {
    width: 98% !important;
    height: 68px !important;
    min-height: unset !important;
    max-width: 180px !important;
    max-height: 68px !important;
    object-fit: cover !important;
    border-radius: 7px;
    margin-bottom: 0.34rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .no-image-text {
    align-items: center;
    justify-content: center;
    background: #f8f7f4;
    color: #bcbcbc;
    font-size: 0.91rem;
  }

  /* ▼ コンテンツ全体：画像の下に中央寄せ */
  .tabilog-content {
    width: 100%;
    padding: 0;
    text-align: center;
    margin: 0;
    font-size: 0.97rem;
  }

  /* ▼ タイトル：1行だけ表示（省略記号あり） */
  .tabilog-title {
    font-size: 0.97rem;
    font-weight: bold;
    margin-bottom: 0.07rem;
    color: #e65100;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
  }
  .tabilog-title a {
    color: #d84315;
    text-decoration: none;
    font-size: 0.97rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }

  /* ▼ メタ情報・タグは非表示 or 超小さく */
  .tabilog-meta, .tabilog-tags {
    display: none !important;
  }

  /* ▼ 抜粋：2行だけ表示（省略記号付き） */
  .tabilog-excerpt {
    font-size: 0.93rem;
    color: #444;
    margin-bottom: 0.13rem;
    line-height: 1.42;
    height: 2.75em; /* 2行分の高さに固定 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;    /* 2行でカット */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: center;
  }

  /* ▼ 詳しく見るボタン：幅を小さく・圧縮 */
  .tabilog-more {
    display: block;
    width: 90%;
    font-size: 0.88rem;
    padding: 7px 0;
    border-radius: 13px;
    margin: 0.11rem auto 0.01rem auto;
    background: #fff8e9;
    box-shadow: 0 1px 2px rgba(255,180,0,0.06);
    text-align: center;
    color: #ff9800;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.14s;
  }
  .tabilog-more:hover {
    background: #ffe7c2;
    color: #e65100;
  }
}





























/*********ランキング***************/
/* ========== IKEA風ランキングスライダー改善：修正版 ========== */

/* Swiper全体のラッパー */
.ranking-page-swiper {
  padding: 1rem 0;
  overflow: visible !important;
  position: relative;
  min-height: 340px;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 横並び対応のラッパー */
.ranking-page-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 0 16px;
  justify-content: flex-start;
  box-sizing: border-box;
  min-height: 340px;
  height: auto;
  overflow: visible;
}

/* スライドごとのカード（1スライド = 1カテゴリ） */
.swiper-slide.ranking-slide-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: auto !important;
  min-width: 220px;
  max-width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 300px;
  margin: 0 8px;
  box-sizing: border-box;
  overflow: visible;
}

/* モバイル対応（幅を広く） */
@media (max-width: 600px) {
  .swiper-slide.ranking-slide-card {
    min-width: 90vw;
    max-width: 95vw;
    width: 94vw;
  }
  .ranking-page-swiper .swiper-wrapper {
    padding: 0 2vw;
  }
}

/* ホバー効果 */
.swiper-slide.ranking-slide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* カードタイトル（h2） */
.ranking-slide-card h2 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  font-family: 'DotGothic16', sans-serif;
  line-height: 1.5;
}

/* ランキングリスト */
.ranking-top3,
.ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* ランキング内のカード */
.ranking-card-content {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'DotGothic16', sans-serif;
}

.rank-number {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  color: #fff;
  background-color: #f59e0b;
  margin: 0 0 6px 0;
  font-family: 'DotGothic16', sans-serif;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* 個別順位カラー */
.ranking-card-content:nth-child(1) .rank-number {
  background-color: #ffca28;
  color: #222;
}
.ranking-card-content:nth-child(2) .rank-number {
  background-color: #bdbdbd;
  color: #222;
}
.ranking-card-content:nth-child(3) .rank-number {
  background-color: #bc8f8f;
  color: #fff;
}
.ranking-card-content:nth-child(n+4) .rank-number {
  background-color: #f59e0b;
  color: #fff;
}

/* タイトルリンク */
.rank-title a {
  font-size: 13px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
  font-family: 'DotGothic16', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-title a:hover {
  color: orange;
}

/* 補足情報：都道府県・市町村 */
.rank-subtitle {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  font-family: 'DotGothic16', sans-serif;
}

/* PVやコメント数など */
.rank-count {
  font-size: 12px;
  color: #333;
  font-family: 'DotGothic16', sans-serif;
}




/* ========== 新着スライダー関連（そのまま） ========== */
.newposts-swiper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  overflow: visible !important;
}
.newposts-swiper .swiper-wrapper {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible !important;
}
.newposts-swiper .swiper-slide {
  width: 240px !important;
  margin: 0 8px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.newpost-card {
  width: 240px;
  background: #fff;
  border: 2px solid #ffe1ba;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}
.newpost-card h3 {
  font-size: 1rem;
  font-weight: bold;
  color: #f57c00;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* ナビゲーションボタン */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  cursor: pointer;
}
.swiper-button-prev { left: -16px; }
.swiper-button-next { right: -16px; }




/*新着CSS*/
/* ✅ 最終完成版: 完璧中央揃え＋スライドを枠内に美しく収める */
.newposts-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.newposts-swiper {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

.newposts-swiper .swiper-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50px); /* ✅ カードを少し左に補正 */
}

.newposts-swiper .swiper-slide {
  width: auto !important;
  max-width: 260px;
  margin: 0 auto;
  box-sizing: border-box;
}

.newpost-card-new {
  width: 100%;
  background: #fff;
  border: 2px solid #ffe1ba;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.newpost-card-new:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.newpost-card-new h3 {
  font-size: 1rem;
  font-weight: bold;
  color: #f57c00;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.newpost-card-new .card-button {
  display: inline-block;
  background: #ff9800;
  color: white;
  padding: 8px 16px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.newpost-card-new .card-button:hover {
  background: #f57c00;
}

/* ナビゲーションボタン調整（左右の位置調整） */
.swiper-button-prev, 
.swiper-button-next {
  background-color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  top: 50%;
  transform: translateY(-50%);
}

.swiper-button-prev {
  left: -18px;
}

.swiper-button-next {
  right: -18px;
}

.swiper-button-prev:hover, 
.swiper-button-next:hover {
  background-color: #ffe1ba;
}

/* 📌 スライドが2枚以下のとき用に強制中央化 */
.swiper-wrapper-few {
  display: flex !important;
  justify-content: center !important;
}

/* 中央スライドをちょっと左に補正する */
.swiper-slide-active {
  margin-left: -12px !important;
}

/* カードそのものの位置をずらすためのラップ */
.swiper-slide .newpost-card-new {
  transform: translateX(-33px); /* ← 左へずらす（必要なら-14px〜-16px） */
}

/* スライドが1枚のときは強制中央揃え */
.swiper-wrapper.single-slide {
  justify-content: center !important;
  transform: none !important;
}


/* モバイル対応も完璧に */
@media (max-width: 768px) {
  .newposts-swiper .swiper-slide {
    width: 240px !important;
    min-width: unset !important;
    max-width: unset !important;
  }

/* 1枚スライド時に中央揃え */
  .swiper-wrapper.single-slide {
    justify-content: center !important;
    transform: none !important;
  }

  .swiper-slide {
    margin: 0 auto !important;
    transform: none !important;
  }

  .swiper-slide .newpost-card-new {
    transform: none !important;
    margin: 0 auto !important;
  }
}





/*　お知らせと新着の間 */
.top-section-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* 上下の余白 */
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.news-wrapper {
  width: 100%;
}

.newposts-wrapper {
  width: 100%;
}











/* 「もっと見る」ボタンエリア */
.see-more-wrapper {
  margin: 40px 0;
  text-align: center;
}

.see-more-button {
  background-color: orange;
  color: white;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s;
}

.see-more-button:hover {
  background-color: #e07b00;
}

/* タブスタイル */
.tab-button {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #ff6600;
  background-color: white;
  color: #ff6600;
  transition: 0.2s ease;
}

.tab-button.active {
  background-color: #ff6600;
  color: #fff;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .swiper-slide.ranking-slide-card {
    width: 260px;
  }
  .ranking-slide-card h2 {
    font-size: 13px;
  }
  .rank-title a {
    font-size: 12px;
  }
  .rank-count {
    font-size: 11px;
  }
  .rank-number {
    font-size: 11px;
    padding: 2px 6px;
  }
}

/********************トリビア**********************************/
/* 📌 ドットフォント設定（Google Fonts: DotGothic16使用） */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* 🧠 全体コンテナ：中央寄せ＋余白 */
.trivia-archive {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: 'DotGothic16', sans-serif;
}

/* 🧠 タイトルをスタイリッシュに */
.page-title {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  color: #d35400;
  margin-bottom: 2rem;
  border-bottom: 3px dotted #ffa500;
  padding-bottom: 0.5rem;
}

/* 🧠 カードグリッド */
.trivia-card-grid {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  gap: 1.5rem;
}

/* 🧠 各カード */
.trivia-card {
  width: calc(25% - 1.5rem);
  min-width: 260px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 🔶 質問エリア（上下2段構成：日付→質問） */
.trivia-question {
  background-color: #ffcb45;
  color: #222;
  font-weight: bold;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 1px solid #f5b700;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;  /* 上下に並べる */
  gap: 0.4rem;
}

/* 🔸 日付（上段） */
.trivia-date-inside {
  font-size: 0.85rem;
  color: #555;
  text-align: right;
  padding-right: 4px;
}

/* 🔸 質問文（下段） */
.trivia-question-text {
  font-size: 1rem;
  color: #000;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
}

/* 🔽 答えブロック */
.trivia-answer-wrap {
  background: #fff;
  border: 1px solid #f5b700;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}

/* ▶ 開閉リンク（ボタン感なし） */
.toggle-answer {
  all: unset;
  display: inline-block;
  color: #444;
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.3rem 0;
  position: relative;
  transition: color 0.3s ease;
  background: none !important;
  border: none !important;
}

.toggle-answer::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #f39c12;
  transition: width 0.3s ease;
}

.toggle-answer:hover {
  color: #d35400;
}

.toggle-answer:hover::after {
  width: 100%;
}

/* ✅ 答え表示エリア */
.trivia-answer-content {
  display: none;
  margin-top: 0.8rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #333;
  animation: fadeIn 0.3s ease-in-out;
}

/* ✅ A. のラベルと本文を横並び左寄せ */
.answer-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  text-align: left;
  margin-top: 0.5rem;
}

.answer-label {
  color: #388e3c;
  font-weight: bold;
  flex-shrink: 0;
}

.answer-text {
  flex: 1;
}

/* 💬 解説（オプション） */
.trivia-explanation {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* 🗾 都道府県 */
.trivia-meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #777;
  text-align: right;
}

/* ✅ フェードインアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 📱 レスポンシブ対応 */
@media screen and (max-width: 1024px) {
  .trivia-card {
    width: calc(33.333% - 1rem);
  }
}

@media screen and (max-width: 768px) {
  .trivia-card {
    width: calc(50% - 1rem);
  }
}

@media screen and (max-width: 480px) {
  .trivia-card {
    width: 100%;
  }
}



/* ========================
   ユーザーの声ページ専用スタイル
   ======================== */

/* 入力フォーム全体の枠デザイン */
.user-feedback {
  background: #fffef7; /* 淡い背景色でやさしい印象に */
  padding: 2em;         /* 内側の余白 */
  border-radius: 12px;  /* 角を丸くする */
  max-width: 700px;     /* 最大幅を制限 */
  margin: 2em auto;     /* 上下の余白＋中央寄せ */
  box-shadow: 0 0 10px rgba(0,0,0,0.05); /* やわらかい影 */
  font-family: 'Segoe UI', sans-serif;
}

/* タイトル部分 */
.feedback-header h2 {
  color: #f57c00;        /* オレンジ系カラーで印象づけ */
  margin-bottom: 0.3em;
  font-size: 1.8em;
}

.feedback-header p {
  color: #555;           /* 読みやすいグレー */
  font-size: 1em;
}

/* ラベル共通 */
.feedback-form label {
  display: block;
  margin-top: 1.2em;
  font-weight: bold;
}

/* 入力欄の共通デザイン */
.feedback-form input,
.feedback-form select,
.feedback-form textarea {
  width: 100%;
  padding: 0.7em;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 0.3em;
  font-size: 1em;
}

/* テキストエリアはリサイズ可にする */
.feedback-form textarea {
  resize: vertical;
}

/* チェックボックスのラベル */
.checkbox-label {
  margin-top: 1em;
  display: flex;
  align-items: center;
  font-size: 0.95em;
}

/* チェックボックスとテキストの間隔 */
.checkbox-label input {
  margin-right: 0.5em;
}

/* 送信ボタン */
.feedback-form button {
  background-color: #f57c00;
  color: white;
  padding: 0.8em 1.5em;
  border: none;
  border-radius: 8px;
  margin-top: 1.5em;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* ホバー時の色変更 */
.feedback-form button:hover {
  background-color: #ef6c00;
}

/* ピックアップ意見セクション */
.voice-list {
  max-width: 700px;
  margin: 3em auto;
  padding: 1em;
  background: #f9f9f9;
  border-radius: 12px;
}

/* 見出し */
.voice-list h3 {
  font-size: 1.3em;
  color: #444;
  margin-bottom: 1em;
}

/* リスト表示 */
.voice-list ul {
  list-style: none;
  padding: 0;
}

/* 各リストアイテム */
.voice-list li {
  margin-bottom: 0.7em;
  font-size: 1em;
}


/* Google Fonts を使いたい場合（header.phpかfunctions.phpで読み込み済み前提） */
body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* ===== 投稿カード本体 ===== */
.recommend-card {
  background: linear-gradient(135deg, #ffae00, #ff6600); /* 明るく温かいオレンジグラデ */
  border-radius: 28px;
  padding: 3.5rem 3rem;
  max-width: 800px;       /* 横幅を広げて安定感UP */
  width: 95%;             /* スマホでもOKな幅指定 */
  margin: 4rem auto;
  color: #333333;
  text-align: center;
  box-shadow: 0 18px 45px rgba(255, 130, 0, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  font-family: 'Zen Kaku Gothic New', sans-serif; /* フォント指定 */
}

/* ===== ホバー時に軽く浮かせる ===== */
.recommend-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(255, 120, 0, 0.4);
}

/* ===== アイコン部（丸囲みで装飾） ===== */
.recommend-icon {
  background: rgba(255, 255, 255, 0.2);
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

/* ===== サブ見出し（控えめで上品） ===== */
.recommend-subtitle {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.95;
}

/* ===== メイン見出し（目立つ太字） ===== */
.recommend-title {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0.6rem 0 1.2rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* ===== 補足テキスト（明るさを抑えた白） ===== */
.recommend-text {
  font-size: 1.05rem;
  opacity: 0.95;
  margin-bottom: 2.4rem;
  color: #fff9f0;
}

/* ===== CTAボタン（くっきりホワイト＋立体感） ===== */
.recommend-btn {
  background-color: #ffffff;
  color: #333333 !important;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem 3rem;
  border-radius: 999px;
  display: inline-block;
  text-align: center;
  border: 2px solid #ff6600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);

  /* ✅ 文字を確実に表示させる！ */
  line-height: normal;
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
  z-index: 2;
  position: relative;
}



/* ===== ホバー時 ===== */
.recommend-btn:hover {
  background: #fff3e0;      /* 少しオレンジ寄りの淡色に */
  color: #e65100;           /* 文字をくっきり濃く！ */
  border-color: #e65100;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.recommend-btn::before,
.recommend-btn::after {
  content: none !important;         /* 疑似要素があっても無効化！ */
  display: none !important;
}

.recommend-btn * {
  color: #ff6600 !important;        /* 子要素の色も強制指定！ */
  font-size: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}




/******************************お問い合わせ***********************************/
/* ===============================
  ▼ ジャンプボタン（個人・企業）
=============================== */
.form-jump-wrapper {
  text-align: center;              /* ボタン全体を中央揃え */
  margin-bottom: 30px;            /* 下に余白 */
}

.form-jump-btn {
  display: inline-block;          /* 横並びに */
  background-color: #ff7f50;      /* コーラルオレンジ背景 */
  color: white;                   /* 白文字 */
  padding: 10px 20px;             /* ボタン内余白 */
  border-radius: 30px;            /* 丸みのあるボタン */
  font-size: 16px;                /* 文字サイズ */
  font-weight: bold;             /* 太字 */
  text-decoration: none;         /* 下線なし */
  margin: 10px;                   /* ボタン間の余白 */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15); /* 軽い影 */
  transition: all 0.3s ease;      /* なめらかな変化 */
}

.form-jump-btn:hover {
  background-color: #e76e3c;      /* ホバー時に濃くする */
  transform: translateY(-2px);    /* 浮かび上がる演出 */
}


/* ===============================
  ▼ フォーム全体（カード風セクション）
=============================== */
.form-section {
  background-color: #fff;         /* 白背景 */
  border: 1px solid #eee;         /* 薄いグレーの枠線 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* ほんのり影 */
  border-radius: 12px;            /* 角丸 */
  padding: 40px 30px;             /* セクション内余白 */
  max-width: 700px;               /* 最大幅制限 */
  margin: 60px auto;              /* 上下余白＋中央寄せ */
}


/* ===============================
  ▼ セクション見出し（h3）
=============================== */
.form-section h3 {
  font-size: 20px;                /* 少し大きめ */
  font-weight: bold;             /* 太字 */
  margin-bottom: 24px;           /* 下に余白 */
  padding-left: 12px;            /* 左のライン分余白 */
  border-left: 5px solid #ff7f50;/* オレンジライン */
  color: #333;                   /* 文字色やや濃く */
}


/* ===============================
  ▼ ラベル（labelタグ）
=============================== */
.form-section label {
  font-weight: bold;             /* 太字で強調 */
  margin-bottom: 6px;
  display: block;                /* ブロック要素にして改行 */
  color: #444;                   /* 少し濃いめのグレー */
}


/* ===============================
  ▼ 入力欄（input・textarea）
=============================== */
.form-section input[type="text"],
.form-section input[type="email"],
.form-section textarea {
  width: 100%;                   /* 横幅いっぱい */
  padding: 12px 14px;            /* 中の余白 */
  font-size: 15px;
  border: 1px solid #ccc;        /* 薄いグレー枠 */
  border-radius: 6px;            /* 角丸 */
  background: #fdfdfd;           /* やや白っぽい背景 */
  transition: 0.2s ease;
  margin-top: 4px;
  box-sizing: border-box;        /* パディング込みでサイズ計算 */
}


/* フォーカス時（クリックされた時）の演出 */
.form-section input[type="text"]:focus,
.form-section input[type="email"]:focus,
.form-section textarea:focus {
  outline: none;                                /* 青い枠を消す */
  border-color: #ff7f50;                        /* 枠をオレンジに */
  box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.2); /* 光るような演出 */
}


/* ===============================
  ▼ フィールド間の余白
=============================== */
.form-section p {
  margin-bottom: 20px;           /* ラベル＆入力の間隔 */
}


/* ===============================
  ▼ 送信ボタン（submit）
=============================== */
.form-section button[type="submit"] {
  background-color: #0073aa;     /* WordPressっぽいブルー */
  color: white;
  border: none;
  padding: 12px 28px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 115, 170, 0.2); /* ボタン影 */
}

.form-section button[type="submit"]:hover {
  background-color: #005a87;     /* ホバーで濃いブルーに */
  transform: translateY(-2px);   /* ちょっと浮く */
}

/* お問い合わせセクションの冒頭に表示する説明文用スタイル */
.inquiry-intro {
  font-size: 16px;         /* 文字サイズをやや大きめにして読みやすく */
  line-height: 1.6;        /* 行間を広めにして可読性アップ */
  text-align: center;      /* 文章全体を中央揃えにしてやさしい印象に */
  margin-bottom: 20px;     /* 下に余白を設けて次の要素と区切る */
  color: #444;             /* 文字色はやや濃いグレーで読みやすく */
}

/* ▼ お問い合わせ送信用のオレンジボタン */
button.submit-btn-orange {
  background-color: #ff7f50 !important;  /* ← 他のスタイルを上書き */
  color: white !important;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

button.submit-btn-orange:hover {
  background-color: #e76e3c !important;
  transform: translateY(-2px);
}



/********************旅グッズ****************************************/
/* --------------------------------------------------
 🏋️ 旅グッズアーカイブ全体（改良版）
-------------------------------------------------- */
.travel-goods-archive {
  max-width: 980px;
  margin: 2rem auto;
  padding: 20px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* ページタイトル */
.page-title {
  text-align: center;
  font-size: 2rem;
  color: #ff7f50;
  border-bottom: 3px solid #ffcc80;
  padding-bottom: 8px;
  margin-bottom: 30px;
}

/* 商品グリッド */
.goods-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* 商品カード */
.goods-card {
  background-color: #ffffff;
  border: 1px solid #ffdab9;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 18px;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.goods-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(255,140,0,0.1);
}

/* 商品サムネイル */
.goods-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}

/* 商品名 */
.goods-title {
  font-size: 1.3rem;
  color: #ff7f50;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 商品説明・コメント */
.goods-description,
.goods-voice {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* 価格表示 */
.goods-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 12px;
}

/* ボタンエリア */
.goods-buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* 詳しく見るボタン */
.detail-btn {
  background: #ff7f50;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: background 0.3s;
}
.detail-btn:hover {
  background: #f76a35;
}

/* いいねボタン */
.goods-like-button {
  border: 2px solid #ff7f50;
  color: #ff7f50;
  padding: 8px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}
.goods-like-button:hover,
.goods-like-button.liked {
  background: #ff7f50;
  color: white;
}
.goods-like-button .heart-icon::before {
  content: "♡";
  font-size: 16px;
}
.goods-like-button.liked .heart-icon::before {
  content: "❤";
}

/* アフィリエイトボタン（Amazon・楽天） */
.affiliate-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.amazon-btn,
.rakuten-btn {
  padding: 8px 12px;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s;
}
.amazon-btn { background: #ffa41c; }
.amazon-btn:hover { background: #e69500; }

.rakuten-btn { background: #d10000; }
.rakuten-btn:hover { background: #b80000; }

/* タグ表示 */
.goods-tags {
  margin-top: 12px;
}
.goods-tag-link {
  display: inline-block;
  padding: 4px 10px;
  background-color: #ffe4c4;
  color: #ff7f50;
  border-radius: 16px;
  font-size: 0.8rem;
  text-decoration: none;
  transition: background 0.3s;
  margin: 4px;
}
.goods-tag-link:hover {
  background-color: #ff7f50;
  color: white;
}

/* 投稿が無い場合の表示 */
.no-posts {
  text-align: center;
  color: #aaa;
  margin-top: 30px;
}

/* フォーム内調整 */
.travel-goods-form input[type="file"] {
  margin-bottom: 15px;
}
.travel-goods-form button[type="submit"] {
  margin-top: 10px;
}



/* --------------------------------------------------
   🌟 ページネーションデザイン改良版
-------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  margin: 40px auto;
}

/* 🌟 ページネーションを一行に並べるためのスタイル */
.pagination-list {
  display: flex;
  flex-wrap: nowrap;         /* 折り返しを防ぐ */
  justify-content: center;   /* 中央寄せ */
  align-items: center;       /* 高さ揃え */
  gap: 8px;                  /* ボタン間の余白 */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ページリンク（すでにあるクラスならOK） */
.pagination-list li {
  flex-shrink: 0; /* はみ出しても縮ませない */
}


.page-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #e67e00;
  background-color: #fff;
  border: 2px solid #ffa500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1;
  vertical-align: middle;
  box-sizing: border-box;
}

/* ホバー時 */
.page-link:hover {
  background-color: #fff4e6;
  color: #e67e00;
  transform: translateY(-1px);
}

/* アクティブなページ番号 */
.page-link.current {
  background-color: #ffa500;
  color: #fff;
  pointer-events: none;
  border-color: #ffa500;
}

/* 無効リンク */
.page-link.disabled {
  background-color: #fcf2e8;
  color: #f5cba7;
  border-color: #f5cba7;
  pointer-events: none;
  cursor: default;
}


@media (max-width: 768px) {
  /* 📦 カード全体を2列表示に切り替え */
  .goods-card-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 2列にする */
    gap: 12px;                              /* カード間の隙間 */
    padding: 0 8px;                         /* 左右の余白 */
  }

  /* 🧱 各カードの見た目をコンパクトに */
  .goods-card {
    padding: 10px;            /* 内側の余白を縮小 */
    font-size: 12px;          /* 基本フォントを少し小さく */
    border-radius: 10px;      /* 角丸をやや小さく */
  }

  /* 🖼️ 商品画像エリアの余白を縮小 */
  .goods-thumb {
    margin-bottom: 8px;       /* 下の余白を減らす */
  }

  /* 🖼️ 画像の高さ制限（縦長カード対策） */
  .goods-thumb img {
    height: auto;
    max-height: 100px;        /* 高さを最大100pxに制限 */
  }

  /* 🏷️ ラベルの文字サイズを微調整 */
  .goods-label {
    font-size: 11px;
    margin-bottom: 2px;
  }

  /* 🧢 商品名の文字サイズを小さめに */
  .goods-title {
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* 💰 価格表示の見やすさ維持しつつコンパクト化 */
  .goods-price {
    font-size: 12px;
    margin-bottom: 8px;
  }

  /* 🛒 アフィリエイトボタンを縦並びに変更 */
  .affiliate-buttons {
    flex-direction: column;   /* 縦方向に並べる */
    gap: 4px;                 /* ボタン間の間隔を狭める */
    margin-bottom: 8px;
  }

  /* 🛒 アフィリエイトボタンの見た目を小さめに */
  .affiliate-buttons a {
    font-size: 11px;
    padding: 6px;
  }

  /* ▶ 詳しく見るボタンのコンパクトスタイル */
  .detail-btn {
    font-size: 12px;
    padding: 6px 0;           /* 上下パディングのみ */
    width: 100%;              /* 幅いっぱいに */
    margin-bottom: 6px;
  }

/* ❤️ いいねボタンの基本スタイル */
.goods-like-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.95rem;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #f2994a; /* いいねテキストと数字は常にオレンジ */
  transition: color 0.3s;
}

/* ♡ アイコン：初期状態（オレンジのアウトライン） */
.goods-like-button .heart-icon::before {
  content: "♡";
  font-size: 1.1em;
  color: #f2994a;
}

/* ♥ アイコン：likedのときだけ塗りつぶし赤 */
.goods-like-button.liked .heart-icon::before {
  content: "♥";
  color: #e74c3c;
}

/* 👍 テキストと数字は常にオレンジに固定 */
.goods-like-button .like-count,
.goods-like-button span:not(.heart-icon) {
  color: #f2994a !important;
}

/* 🖱️ ホバーしてもハート以外は変わらないように */
.goods-like-button:hover {
  background: none;
  color: #f2994a;
}





  /* 🏷️ タグ表示のフォントサイズ調整 */
  .goods-tags {
    font-size: 10px;
    margin-top: 4px;
  }

  /* 🏷️ 各タグリンクのサイズとパディング縮小 */
  .goods-tag-link {
    padding: 2px 6px;
    font-size: 10px;
  }

  /* 🔢 ページネーション周りのマージン調整 */
  .pagination-wrapper {
    margin-top: 1.5rem;
  }

  /* 🔢 ページネーションリストの間隔と折返し対応 */
  .pagination-list {
    gap: 6px;
    flex-wrap: wrap;
  }

  /* 🔢 ページ番号リンクのサイズ調整 */
  .page-link {
    padding: 4px 8px;
    font-size: 12px;
    min-width: 32px;          /* 押しやすさキープ */
  }
}

:root {
  --form-height: 44px; /* 📏 フォーム全体の統一高さ */
}

/* 📦 全体の検索フォームラッパー */
.travel-goods-search {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fff8f0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(255, 140, 0, 0.2);
}

/* 📐 入力フォームとボタンの配置（PC用） */
.travel-goods-search form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* 📝 入力欄 */
.search-input {
  padding: 0 10px;
  font-size: 1rem;
  height: 40px;
  width: 70%;
  max-width: 400px;
  border-radius: 6px;
  border: 1px solid #ffb347;
  outline: none;
  box-sizing: border-box;
}

/* 🔘 ボタンエリア */
.search-buttons {
  display: flex;
  gap: 10px;
}

/* 🔍 検索ボタン */
.search-btn {
  height: 40px;
  padding: 0 20px;
  background-color: #ff7f50;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

/* 🔄 リセットボタン */
.reset-btn {
  height: 40px;
  padding: 0 20px;
  background-color: #ffc085;
  color: #333;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}


/* 🔢 検索結果件数 */
.search-results-count {
  text-align: center;
  font-weight: bold;
  color: #ff7f50;
  margin-top: -10px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .travel-goods-search form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* 検索ボックスの幅を広めに設定 */
  .travel-goods-search input[type="text"] {
    width: 90%;      /* ←ここを大きめにして */
    max-width: 400px;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ffa66c;
    border-radius: 6px;
  }
	
  .page-title {
    font-size: 1.4rem; /* 小さめに */
    white-space: nowrap; /* 改行させない */
  }
	

  .search-buttons {
    display: flex;
    justify-content: center;
    width: 90%;
    gap: 10px;
  }

  .search-btn,
  .reset-btn {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
    border-radius: 8px;
    font-size: 1rem;
  }

  .search-btn {
    background-color: #ff7f50;
    color: white;
  }

  .reset-btn {
    background-color: #ffd8a6;
    color: #333;
    text-decoration: none;
  }
}






/* 🌟 全体レイアウト */
.travel-goods-detail {
  max-width: 860px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fffdf8;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  font-family: 'Segoe UI', sans-serif;
}

/* 🏷️ タイトル */
.goods-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #d35400;
  margin-bottom: 1.5rem;
}

/* 🖼️ サムネイル画像 */
.goods-thumbnail img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

/* 📦 カード風ブロック */
.travel-goods-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 🧾 各情報ブロック */
.travel-goods-card > div {
  padding: 1rem 1.2rem;
  background: #fefefe;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
}

/* 🧩 セクションタイトル */
.section-title {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

/* 💸 価格やコメント */
.goods-price p,
.goods-description p,
.goods-voice p,
.goods-maker p,
.editor-comment p {
  margin: 0;
  line-height: 1.6;
}

/* ⭐ 星評価 */
.rating-stars {
  display: flex !important;             /* フレックスで並べる */
  justify-content: center !important;   /* 中央寄せに変更 */
  align-items: center;
  gap: 0.3rem;
  font-size: 1.5rem;
  margin-left: auto !important;         /* 左右マージンで中央寄せ */
  margin-right: auto !important;
  text-align: center !important;        /* テキスト中央揃え（おまけ） */
}



.star {
  color: #ccc;
  cursor: pointer;
}
.star.active {
  color: #f1c40f;
}
.star.inactive {
  color: #ddd;
}

/* 🧑‍💻 評価ラベル */
.rating-value,
.user-rating-value {
  font-size: 0.95rem;
  color: #555;
}

/* ✍ コメント枠 */
.wocchi-comment-box {
  background: #fffaf2;
  padding: 1rem;
  border-left: 5px solid #ffbb33;
  border-radius: 8px;
}

/* 🛒 アフィリエイトボタン */
.affiliate-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.affiliate-btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: 0.2s;
  color: white;
}
.affiliate-btn.amazon {
  background-color: #ff9900;
}
.affiliate-btn.rakuten {
  background-color: #c40000;
}
.affiliate-btn:hover {
  opacity: 0.8;
}

/* 🏷️ タグとジャンル */
.goods-meta {
  font-size: 0.9rem;
  color: #666;
}
.goods-meta .tag,
.goods-meta .genre {
  display: inline-block;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  margin-right: 0.5rem;
  margin-bottom: 0.3rem;
}

/* ⏪ 戻るボタン */
.back-button-wrapper {
  margin-top: 2rem;
  text-align: center;
}
.back-button {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  background-color: #f39c12;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.back-button:hover {
  background-color: #e67e22;
}

/* ドットフォントの適用 */
.travel-goods-detail,
.travel-goods-box,
.travel-goods-card,
.rating-stars,
.goods-title,
.section-title,
.back-button {
  font-family: 'DotGothic16', monospace;
}

/* 星のスタイルも合わせて調整 */
.rating-stars .star {
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
}

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: normal;
}


/* 投稿上のカテゴリやメタ情報を非表示にする */
/* カテゴリー・タグなどのメタ情報を全般的に非表示にする */
.entry-meta,
.post-meta,
.cat-links,
.categories,
.category,
.post-categories,
.meta,
.meta-info {
  display: none !important;
}


/* フォローボタンやSNS関連も非表示に */
.follow-buttons,
.sns-follow,
.follow-me,
.sns-icons {
  display: none !important;
}

/* パンくずリストのカテゴリー名を非表示にする */
.breadcrumb-caption {
  display: none;
}

/* パンくずリストのアイコンを非表示にする */
.breadcrumb-icon {
  display: none;
}

.breadcrumb .fa-home {
  display: none;
}

.breadcrumb-item .fa-folder {
  display: none;
}

.breadcrumb-item .fa-angle-right {
  display: none;
}


/* 投稿下のカテゴリ表示を非表示にする */
.entry-categories {
  display: none !important;
}


/*パンくずリスト*/
.breadcrumb-area {
  background: #fffaf0;
  padding: 10px 20px;
  font-size: 0.95rem;
  border-bottom: 2px dotted #f39c12;
  font-family: 'Kiwi Maru', sans-serif;
}
.breadcrumb-area ul {
  display: flex;
  list-style: none;
  gap: 0.5em;
  padding: 0;
  margin: 0;
}
.breadcrumb-area li::after {
  content: "›";
  margin-left: 0.5em;
  color: #999;
}
.breadcrumb-area li:last-child::after {
  content: "";
}
.breadcrumb-area a {
  color: #e67e22;
  text-decoration: none;
}
.breadcrumb-area a:hover {
  text-decoration: underline;
}


/* パンくずリストのスタイル */
.breadcrumb {
  font-family: 'Comic Sans MS', cursive, sans-serif; /* 可愛らしいフォント */
  background-color: #fff8e1; /* 優しい黄色 */
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 少しの影をつける */
}

/* 各リンクの色を変更 */
.breadcrumb a {
  color: #ff7f50; /* 可愛いオレンジ色 */
  text-decoration: none; /* 下線を消す */
  font-weight: bold; /* 太字にして目立たせる */
}

.breadcrumb a:hover {
  color: #ff6347; /* ホバー時に色を変える */
  text-decoration: underline; /* ホバー時に下線を追加 */
}

/* アイコンや矢印のカスタマイズ */
.breadcrumb-item .fa-angle-right {
  color: #ff7f50; /* アイコンの色をオレンジに */
  font-size: 18px; /* アイコンのサイズを調整 */
}

.breadcrumb-item {
  margin-right: 5px; /* アイコンとの間隔を調整 */
}

.breadcrumb-item:last-child {
  color: #333; /* 最後の項目の色を変更 */
}


@media (max-width: 480px) {
  .breadcrumb {
    font-size: 0.8rem; /* モバイル用に少し小さめ */
    padding: 8px 14px; /* 余白を調整 */
    border-radius: 6px;
    overflow-x: auto; /* 横スクロール可能に */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb ul {
    flex-wrap: nowrap;
    gap: 0.3em; /* 隙間を縮める */
  }

  .breadcrumb li {
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .breadcrumb a {
    font-size: 0.8rem;
    color: #ff8c42;
    font-weight: bold;
    text-decoration: none;
  }

  .breadcrumb a:hover {
    text-decoration: underline;
    color: #e67e22;
  }

  .breadcrumb-item .fa-angle-right {
    font-size: 16px;
    margin: 0 2px;
    color: #ccc;
  }
}

/* ✅ PCでは横並び、モバイルでは縦積みにする */
.top-section-flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}


.notice-content {
  line-height: 1.8;
}

.notice-box {
  padding: 1.2rem 1.4rem; /* 上下左右にゆとりを */
}

.notice-content {
  font-size: 1rem; /* PC */
}

@media (max-width: 768px) {
  .notice-content {
    font-size: 0.95rem;
    line-height: 1.9;
  }
}

.notice-box h3 {
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #e67e22; /* 目立たせたいならオレンジ系 */
}

.mobile-header {
  display: none !important;
}

/* ✅ 投稿ページ下部のパンくずリストを非表示にする */
.breadcrumb.breadcrumb-category.sbp-main-bottom {
  display: none !important;
}


#prefecture,
#city {
  opacity: 1 !important;
  pointer-events: auto !important;
  background-color: #fff !important;
}


/*旅ログ*/
/* ---------------------------------------------
   オリジナル部分（tabilog-card系）は絶対消さずにそのまま残しています！
--------------------------------------------- */

/* 投稿カード全体を中央に・カードっぽく */
.tabilog-card {
  margin: 16px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  max-width: 350px;
  width: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像を大きく表示 */
.tabilog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 0.8em;
}

/* タイトル・URL・日付も中央寄せ */
.tabilog-card-title,
.tabilog-card-meta,
.tabilog-card-date {
  text-align: center;
  margin-bottom: 0.3em;
}

.tabilog-card-date {
  font-size: 0.9em;
  color: #888;
}

/* =====================================
   ここから「.blogcard.internal-blogcard」系を刷新！
===================================== */

/* カード本体 */
.blogcard.internal-blogcard {
  margin: 20px auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  max-width: 370px;
  width: 100%;
  padding: 1.5em 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s, transform 0.18s;
}

/* ホバー演出（ほんのりオレンジ色で浮かせる） */
.blogcard.internal-blogcard:hover {
  box-shadow: 0 8px 32px rgba(255, 180, 72, 0.14);
  transform: translateY(-2px) scale(1.03);
}

/* 画像調整（中央寄せ） */
.internal-blogcard-thumbnail img {
  width: 100%;              /* カードの横幅いっぱい */
  max-width: 100%;          /* これも100%に */
  height: 140px;            /* ←高さを抑えてワイド感強調 */
  object-fit: cover;        /* 画像の比率を崩さずトリミング */
  border-radius: 16px;
  margin-bottom: 1.2em;
  box-shadow: 0 4px 18px rgba(247,164,64,0.12);
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: #fff0d8;
  aspect-ratio: 16/6;       /* 対応してるブラウザなら横長に */
}

/* タイトル：確実に中央・オレンジ強調 */
.internal-blogcard-title {
  font-size: 1.18em;
  font-weight: bold;
  margin: 0.6em 0 0.6em 0;
  color: #f7a440;
  text-align: center !important;
  width: 100% !important;
  display: flex !important;         /* ← ここをflexに変更 */
  justify-content: center !important; /* 横中央 */
  align-items: center !important;      /* 縦中央（行が複数でもOK） */
  line-height: 1.6;
}

/* 抜粋文は今非表示 */
.internal-blogcard-snippet {
  display: none;
}

/* フッター部分：中央＆オレンジの枠線とアイコン */
.internal-blogcard-footer {
  font-size: 0.97em;
  color: #333;
  background: #fff6ec;
  border: 1.5px solid #f7a440;
  border-radius: 9px;
  padding: 0.45em 0.8em;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  text-align: center;
  display: inline-block;
  width: 92%;
  box-shadow: 0 1px 6px rgba(255, 180, 72, 0.10);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* フッター内のリンクや日付も中央揃えに */
.internal-blogcard-footer a, 
.internal-blogcard-footer span {
  color: #d17800 !important;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  margin: 0 0.3em;
}

/* ★ 日付を消す！フッター内の最後のspan（日付）は非表示に */
.internal-blogcard-footer span:last-child {
  display: none !important;
}


/* モバイル向け微調整 */
@media (max-width: 480px) {
  .blogcard.internal-blogcard {
    max-width: 98vw;
    padding: 1em 0.3em;
  }
  .internal-blogcard-thumbnail img {
    width: 100%;
    height: 140px;
    border-radius: 9px;
    margin-bottom: 0.8em;
}

}


/* まず一旦リセット */
.internal-blogcard-title {
  /* 前の指定を消してリセット！ */
  font-size: 1.18em;
  font-weight: bold;
  margin: 0.6em 0 0.6em 0;
  color: #f7a440;
  text-align: center !important;     /* ★中央揃え */
  width: 100% !important;            /* 幅100%に */
  display: block !important;         /* 必ずblockに */
  line-height: 1.6;
  justify-content: unset !important;
  align-items: unset !important;
}

/* blogcard-content全体のレイアウトが横並びなら、ここで上書きする！ */
.blogcard-content.internal-blogcard-content {
  display: block !important;    /* 横並びを解除・block化 */
  text-align: center !important;/* 子要素も中央寄せに */
  padding: 0;
}

/* 必要なら親要素のラッパーも中央寄せに */
.blogcard-label.internal-blogcard-label,
.blogcard-content.internal-blogcard-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 念のため、タイトルdiv自体に横幅制限や余計なfloatが効いていないか解除 */
.blogcard-title.internal-blogcard-title {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ※モバイルも同じ効果が出るように */
@media (max-width: 480px) {
  .internal-blogcard-title {
    font-size: 1.05em;
    padding: 0 0.5em;
  }
}

/* blogcardのフッター部分で、日付（最後のspan）を非表示 */
.internal-blogcard-footer span:last-child {
  display: none !important;
}


/* PCだけ左寄せ、モバイルは中央 */
@media (min-width: 769px) {
  .blogcard.internal-blogcard {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* 親が中央揃えなら解除も追加！ */
  .related-links,
  .wp-block-group,
  .entry-content,
  .wp-block-embed {
    text-align: left !important;
    justify-content: flex-start !important;
    display: block !important;
  }
}


/*　サムネイル画像 */
.spot-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}
.tabilog-card {
  margin-bottom: 1.5rem;
  background: #fffaf2;
  padding: 1rem;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}















/*　ナビゲーション */
/* ===================================
   📱 Cocoonモバイルメニュー完全修正版
=================================== */
.menu-drawer {
  background-color: #fff !important;
  z-index: 99999 !important;
  width: 100% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* メニュー内全体に適用 */
.drawer-menu-content {
  padding: 0 !important;
  margin: 0 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 1rem !important;
  color: #333 !important;
}

/* ul と li の無駄なスタイル削除＋リセット */
.drawer-menu-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.drawer-menu-content li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #eee !important;
}

/* リンクの表示調整 */
.drawer-menu-content a {
  display: block !important;
  padding: 1rem 1.5rem !important;
  color: #333 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background-color: #fff !important;
  line-height: 1.6 !important;
  text-align: left !important;
  font-size: 1.05rem !important;
}

/* ホバー時の色変化 */
.drawer-menu-content a:hover {
  background-color: #fff8f0 !important;
  color: #f47216 !important;
}
















/* ランキングセクションのレイアウト */
.ranking-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横に2列 */
  grid-auto-rows: auto;                  /* 高さは内容に合わせる */
  gap: 1.2rem 1rem;                      /* 上下左右の余白 */
  padding: 1rem;
  box-sizing: border-box;
}

/* 各ランキングカードの見た目を整える */
.ranking-section .ranking-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .ranking-section {
    grid-template-columns: 1fr; /* モバイルでは1列ずつ */
  }
}

.ranking-page-swiper .swiper-slide {
  width: 100% !important;     /* 念のため */
  max-width: 100%;
  box-sizing: border-box;
}