body {
  margin: 0;
  font-family: 'Quicksand', sans-serif;
}

.site-header {
  background: white;
  
  position: sticky;
  top: 0;
  z-index: 1000;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  max-width: 1200px;
  height: 80px;
  margin: 0 auto;
}

.logo img {
  height: 120px;
  width: 100%;
}
.main-nav .menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.main-nav .menu li a {
  text-decoration: none !important;
  color: #333;
  font-weight: bold;
}
.hero {
  background-image: url('../img/top.jpeg');

  background-size: cover;
  background-position: center;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  color: white;
}


.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1); /* 黒の透過オーバーレイ */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 20px;
}

.hero-content h1 {
  font-family: 'Quicksand', sans-serif;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.5rem;
}
.logo-heading {
  font-family: 'Quicksand', sans-serif;
  font-size: 2.5em;
  color: #4299e1;
  letter-spacing: 1px;
  text-align: center;
  margin: 30px 0;
  font-weight: bold;
}

.logo-heading {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 2.5em;
  color: #4299e1;
  position: relative;
  display: inline-block;
  margin-bottom: 5px;
}
@media (max-width: 992px) {
  .logo-heading {
    font-size: 1.6em;
  }
}

@media (max-width: 768px) {
  .logo-heading {
    font-size: 1.4em;
  }
}
/* === 波線のスタイル === */
.wave-line {
  width: 350px;        /* デフォルト幅 */
  max-width: 90%;      /* 画面幅に応じて縮小 */
  margin-top: 5px;
  margin-bottom: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: width 0.3s ease;
}

@media (max-width: 992px) {
  .wave-line {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .wave-line {
    width: 250px;
  }
}

@media (max-width: 576px) {
  .wave-line {
    width: 200px;
  }
}
.category-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
  border-bottom: #4299e1 1px;
}

.section-title {
  font-size: 2em;
  color: #4299e1;
  margin-bottom: 40px;
}

.category-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.category-card {
  background: #fff;
  max-width: 300px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
}
.category-card:hover {
  transform: translateY(-5px);
}
.category-image {
  width: 100%;
  aspect-ratio: 1 / 1;       /* 正方形にする */
  object-fit: cover;         /* 拡大して切り取り */
  object-position: top;      /* 上の方を優先的に表示 */
  display: block;
}


.category-card h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.category-card p {
  font-size: 0.95em;
  text-align: left;
  color: #555;
  margin-bottom: 20px;
}

.category-section {
  text-align: center;
}

.category-section {
  text-align: center;
}

.category-section {
  text-align: center;
}

.category-section .btn {
  display: inline-block;
  padding: 10px 50px;
  background-color: #7A4171; /* ブルー系 */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Quicksand', sans-serif;
  border: none;
  border-radius: 80px; /* 角を少し丸める */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.category-section .btn:hover {
  background-color: #5B3057; /* ホバー時 */
  transform: translateY(-2px);
}

/* --- Latest Reviews セクション --- */
.latest-reviews {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
}
.latest-reviews h2 {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size: 2rem;
color: #4299e1;
margin-bottom: 30px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.review-card {
  background-color: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
}

.review-thumbnail {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.review-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.review-card:hover .review-thumbnail img {
  transform: scale(1.05);
}

.review-content {
  padding: 15px;
  text-align: left;
}

.review-content h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
  text-decoration: none　!important;
}

.review-content p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.review-tags {
  margin-bottom: 10px;
}

.review-tags a {
  font-size: 0.85rem;
  color: #7A4171;
  text-decoration: none;
  margin-right: 5px;
}



.view-more-btn {
  text-align: center;
  margin-top: 30px;
}

.view-more-btn a {
  display: inline-block;
  padding: 12px 30px;
  background-color: #7A4171;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: background-color 0.3s;
}

.view-more-btn a:hover {
  background-color: #5B3057;
}

@media (max-width: 768px) {
  .review-grid {
    grid-template-columns: 1fr;
  }

  .review-thumbnail {
    height: 150px;
  }
  .latest-reviews h2 {
    font-size: 1.4rem;
}

}
/* ここからイベント*/

/* --- Upcoming Events セクション --- */
.latest-events {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.latest-events h2 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #4299e1;
  margin-bottom: 30px;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px;  /* 余白を少し広げる */
  max-width: 1200px;
  margin: 0 auto;
}

.event-item {
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: #fff;
  
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.event-item:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
}

.event-item img {
  width: 100%;
  height: 150px;  /* 高さを調整 */
  object-fit: cover;  /* 画像の縦横比を保ちながらリサイズ */
  border-bottom: 1px solid #ddd;
}

.event-info {
  padding: 10px 15px;
}

.event-date {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 5px;
}

.event-info h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .event-grid {
    grid-template-columns: 1fr 1fr;  /* スマホ画面では2列表示 */
    gap: 20px;
  }

  .event-item img {
    height: 120px;  /* モバイル時の画像サイズ調整 */
  }
  .latest-events h2{
    font-size: 1.4rem;;
  }
}

@media (max-width: 576px) {
  .event-grid {
    grid-template-columns: 1fr;  /* 小さい画面では1列表示 */
  }
}

/* ここからQ＆A トップ*/
.qa-section {
  padding: 50px 20px;
  background-image:url('img/background-gold.jpg');
  background-repeat: no-repeat;
  background-size:cover;
  opacity: 0.;
  text-align: center;
}
.qa-section h2 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #4299e1;
  margin-bottom: 30px;
  }

.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
	
}

.qa-item {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  cursor: pointer;
}

.qa-item:hover {
  transform: scale(1.03);
}

.qa-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.qa-question {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 5px;
}

.qa-date {
  font-size: 0.85em;
  color: #888;
}

.view-more-btn {
  margin-top: 30px;
}

.view-more-btn a {
  display: inline-block;
  padding: 12px 50px;
  background-color: #7A4171;  /* 京紫 */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Quicksand', sans-serif;
  border-radius: 80px;
  transition: background-color 0.3s;
}

.view-more-btn a:hover {
  background-color: #5B3057;  /* 濃いめの京紫 */
}

@media (max-width: 768px) {
  .qa-section h2{
    font-size:1.4rem;
  }
  }


.instagram-section {
  padding: 50px 20px;
  background-color: #fff;
  text-align: center;
}
.instagram-section h2 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #4299e1;
  margin-bottom: 30px;
  }

.instagram-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.instagram-grid a {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s;
}

.instagram-grid a:hover {
  transform: scale(1.05);
}

.instagram-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-more-btn {
  margin-top: 30px;
}

.view-more-btn a {
  display: inline-block;
  padding: 12px 50px;
  background-color: #7A4171;  /* 京紫 */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Quicksand', sans-serif;
  border-radius: 80px;
  transition: background-color 0.3s;
}

.view-more-btn a:hover {
  background-color: #5B3057;  /* 濃いめの京紫 */
}

@media (max-width: 768px) {
  .instagram-section h2{
    font-size:1.4rem;
  }
  }


@media (max-width: 576px) {
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    max-width: 1200px;
    height: 50px;
    margin: 0 auto;
  }
  .logo img {
    width: 120px;
    height: auto;
  }
}

/* ハンバーガーメニュー */
.hamburger {
  display: none;
  cursor: pointer;
  z-index: 2000;
  position: absolute;
  top: 20px;
  right: 20px;
}

.hamburger div {
  width: 30px;
  height: 3px;
  background-color: #333;
  margin: 6px;
  transition: all 0.3s ease;
}

.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active div:nth-child(2) {
  opacity: 0;
}

.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ヘッダー */
.site-header {
  background-color: #fff;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* メインナビゲーション（PC用） */
.main-nav {
  display: flex;
  gap: 20px;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.main-nav li {
  margin: 0 10px;
}

.main-nav a {
  text-decoration: none　!important;
  color: #333;
  font-weight: bold;
  font-size: 1rem;
}

.main-nav a:hover {
  color: #7A4171 !important; /* 少し薄いグレーに */
}


/* ハンバーガーメニュー表示設定 */
@media (max-width: 992px) {
  .main-nav {
    display: none;
  }

  .hamburger {
    display: block;
  }
}

/* 全画面メニュー */
/* 全画面メニュー */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F2C94C;
  color: #333;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease; /* ここでスピードを調整 */
  transform: translateY(-100%);
  opacity: 0; /* 初期状態で透明 */
}

.fullscreen-menu.active {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.7s ease, opacity 0.7s ease; /* スピード調整 */
}


.fullscreen-menu ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.fullscreen-menu ul li {
  margin: 50px 0;
}

.fullscreen-menu ul li a {
  font-size: 2rem;  /* 文字サイズを大きく調整 */
  color: #191919;
  text-decoration: none !important;
  font-weight: bold;
}

.fullscreen-menu ul li a:hover {
  color: #7A4171;
}

/* 閉じるボタン */
.fullscreen-menu .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  cursor: pointer;
}

.fullscreen-menu .close-btn:hover {
  color: #7A4171;
}

/* ヒーローセクション */
.hero {
  background-image: url('img/top.jpeg');
  background-size: cover;
  background-position: center;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1rem;
  }
}

/* レスポンシブ設定 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 0.95rem;
  }

  .fullscreen-menu ul li a {
    font-size: 1.8rem;
    color: #191919;
  }
}

/* ここからQ＆A ページ*/
.qa-section {
  padding: 60px 20px;
  background-color: #f8f9fa;
}

.qa-container {
  max-width: 800px;
  margin: 0 auto;
  padding:150px 10px 50px 10px;
  text-align: left;
}

.qa-container h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #00416a;
}

.qa-intro {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.qa-box {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 5px solid #0077b6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.qa-box h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.qa-answer {
  font-size: 1rem;
  color: #333;
}

.qa-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0077b6;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.qa-button:hover {
  background-color: #005f8f;
}
/* 投稿一覧をカード型にするCSS */
main.page-content ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
}

main.page-content ul li {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.review-post {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: sans-serif;
}

.review-meta {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.review-categories a {
  display: inline-block;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  color: #333;
}

.review-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.review-address {
  margin-top: 20px;
  font-size: 15px;
}

.map-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #0088cc;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* レビュー詳細ページ全体 */
.review-detail {
  max-width: 960px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.8;
  color: #333;
}

/* タイトル */
.review-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
  border-left: 5px solid #ff7f50;
  padding-left: 10px;
}

/* メタ情報 */
.review-meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 20px;
}

.review-meta span {
  margin-right: 20px;
}



.review-categories a {
  background-color: #f0f0f0;
  border-radius: 12px;
  padding: 4px 10px;
  
  font-size: 0.8rem;
  text-decoration: none;
  color: #333;
}

/* アイキャッチ画像 */
.review-image {
  text-align: center;
  margin-bottom: 30px;
}

.review-image img.main-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 本文 */
.review-content {
  margin-bottom: 40px;
  font-size: 1rem;
}

/* 情報テーブル */
.review-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.review-table th,
.review-table td {
  border: 1px solid #ddd;
  padding: 12px 16px;
}

.review-table th {
  background-color: #f8f8f8;
  width: 25%;
  text-align: left;
  font-weight: bold;
}

.review-table td a {
  color: #007acc;
  
}

.review-table td a:hover {
  color: #005999;
}
/* 投稿詳細ページ用スタイル */

.review-detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Quicksand', sans-serif;
}

.review-title {
  font-size: 2rem;
  border-left: 6px solid #f26b4f;
  padding-left: 12px;
  margin-bottom: 16px;
  font-weight: bold;
  color: #333;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  margin-bottom: 24px;
  color: #666;
}

.review-meta .review-categories a {
  background: #eee;
  padding: 5px 10px;
  
  border-radius: 10px;
  font-size: 0.85rem;
  text-decoration: none;
  color: #333;
}

.review-image {
  margin-bottom: 30px;
}

.review-image .main-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.review-content {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 40px;
  color: #444;
}

.review-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 60px;
}

.review-table th,
.review-table td {
  border: 1px solid #ddd;
  padding: 14px 18px;
}

.review-table th {
  background-color: #fafafa;
  font-weight: bold;
  text-align: left;
  width: 120px;
}

.review-table td a {
  color: #0073aa;
  
}

.review-table td a:hover {
  color: #004d77;
}
.review-slider {
  max-width: 100%;
  margin: 20px auto;
  padding: 0 10px;
  position: relative;
}

.review-slider .swiper-slide img {
  width: 100%;
  height: auto;
  max-height: 400px; /* PC時の最大高さ */
  object-fit: contain;
  border-radius: 8px;
}
.review-content img {
  display: none;
}

/* スマホ用に高さを少し抑える */
@media (max-width: 768px) {
  .review-slider .swiper-slide img {
    max-height: 250px;
  }
}
.review-slider .swiper-button-next,
.review-slider .swiper-button-prev {
  color: #7A4171;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* 画像の後ろに隠れないように */
}
.review-slider .swiper-button-next {
  right: 0;
}

.review-slider .swiper-button-prev {
  left: 0;
}
@media (max-width: 768px) {
  .review-slider .swiper-button-next,
  .review-slider .swiper-button-prev {
    top: 45%;         /* 少しだけ下にずらす */
    width: 24px;      /* 小さくする */
    height: 24px;
  }
}
.back-to-list {
  text-align: center;
  margin: 40px 0;
}

.btn-back {
  display: inline-block;
  padding: 10px 50px;
  background-color: #7A4171;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 80px;
  transition: background-color 0.3s;
}

.btn-back:hover {
  background-color: #5B3057;
}

.back-to-top {
  text-align: center;
  margin-top: 40px;
}

.back-to-top .btn {
  display: inline-block;
  padding: 10px 40px;
  background-color: #7A4171;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: background-color 0.3s;
}

.back-to-top .btn:hover {
  background-color: #5B3057;
}
.review-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.review-meta {
  font-size: 0.9rem;
  color: #888;
  margin-top: 5px;
}
.review-thumbnail img {
  display: block !important;
}
.review-thumbnail {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 10px;
}

.review-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.review-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
}
.review-card:hover {
  transform: translateY(-5px);
}
.review-thumbnail img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}
.review-content {
  padding: 15px;
}
.review-content h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #000000;
  text-decoration: none　!important;
}
.review-content h3 a{
  text-decoration: none　!important;
  color: #000000;
 }
.review-date {
  font-size: 0.9rem;
  color: #777;
  
}
.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.category-tag {
  background-color: #eee;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: #333;
}
main.page-content {
  max-width: 12200px;
  margin: 0 auto;
  padding: 30px 80px;
}

/* セクションタイトルを中央に */
.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 40px;
}

/* 4列グリッド */
.review-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 0;
  list-style: none;
}

.review-card {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  text-decoration: none;
}

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

.review-thumbnail img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.review-info {
  padding: 5px;
}

.review-info h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #333;
  font-weight: 600;
  text-decoration: none !important;
}

.review-meta {
  font-size: 0.8rem;
  color: #777;
  margin-bottom: 8px;
}

.review-meta a {
  background-color: #eee;
  color: #333;
  padding: 2px 6px;
  margin-right: 4px;
  border-radius: 4px;
  font-size: 0.75rem;
  text-decoration: none;
}

.review-meta a:hover {
  background-color: #ddd;
}

.review-excerpt {
  font-size: 0.85rem;
  color: #555;
  margin-top: 10px;
  line-height: 1.4;
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8rem;
  color: #7A4171;
  font-weight: bold;
  
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .review-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .review-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .review-list {
    grid-template-columns: 1fr;
  }
}
.review-card,
.review-thumbnail,
.review-thumbnail img {
  border-radius: 0 !important;
}
a {
  text-decoration: none !important;
}

/* 共通スタイル統一 */
.select2-container--default .select2-selection--single,
input[name="keyword"],
form button[type="submit"] {
  height: 42px !important;
  padding: 0 14px !important;
  font-size: 16px;
  font-family: 'Quicksand', sans-serif;
  box-sizing: border-box;
  border-radius: 0!important;
  border: 1.5px solid #ccc;
  vertical-align: middle;
}

/* Select2 全体の外枠 */
.select2-container--default .select2-selection--single {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 16px;
  font-family: 'Quicksand', sans-serif;
  border: 1.5px solid #ccc;
  border-radius: 0;
  box-sizing: border-box;
  position: relative;
}

/* セレクトされた項目テキスト */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding-left: 4px;
  margin: 0;
  flex: 1;
  display: block;
  font-family: 'Quicksand', sans-serif;
}

/* 矢印アイコン */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  
  right: 10px;
  position: absolute;
  width: 20px;
  height: 20px;
}

/* ドロップダウンのオプション */
.select2-results__option {
  padding-left: 16px !important;
}

/* Searchボタン */
form button[type="submit"] {
  background-color: #7A4171;
  color: #fff;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
  height: 42px;
  padding: 0 20px;
}
form button[type="submit"]:hover {
  background-color: #5B3057;
}
/* select2の親に強制的に幅を与える */
.select2-container {
  width: 180px !important;  /* 他のinputと合わせて調整 */
}

/* ジャンル文字が上下中央にならないのを防ぐ */
.select2-selection__rendered {
  display: flex !important;
  align-items: center;
  height: 100%;
  padding-left: 10px !important;
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
}

input[name="keyword"] {
  width: 220px;
}

@media (max-width: 768px) {
  main.page-content {
    padding: 30px 20px !important;
  }

form {
  max-width: 600px;
  width: 100%; /* ← 追加！親幅に応じて縮むように */
  margin: 0 auto; /* ← 左右中央揃え */
  padding: 2em;
  box-sizing: border-box;
}

  .select2-container,
  input[name="keyword"],
  form button[type="submit"] {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .latest-reviews,
  .latest-events,
  .qa-section,
  .instagram-section {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 20px;
  }

  .section-title {
    margin-bottom: 20px;
  }
}
@media (max-width: 576px) {
  form {
    padding: 1.5em 1em;
  }
}

.pagination {
  margin-top: 40px;
  text-align: center;
}

.pagination a,
.pagination span {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 14px;
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-family: 'Quicksand', sans-serif;
}

.pagination a:hover {
  background-color: #7A4171;
  color: #fff;
}

.pagination .current {
  background-color: #7A4171;
  color: #fff;
  font-weight: bold;
}
.review-thumbnail {
  height: 160px;  /* モバイルは120pxでも良いかも */
}
.review-info h3 a:hover {
  color: #5B3057;
  text-decoration: underline;
  transition: 0.3s;
}
.read-more:hover {
  text-decoration: underline;
}
.review-info h3 a:hover {
  color: #5B3057;
  text-decoration: underline;
  transition: 0.3s;
}
.read-more:hover {
  text-decoration: underline;
}
.no-result {
  background: #fef6f9;
  border: 1px solid #f0cce0;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.1rem;
  color: #7A4171;
  margin-top: 30px;
}
.no-result {
  text-align: center;
  background-color: #fff8fb;
  border: 1px solid #f0cce0;
  padding: 30px 20px;
  border-radius: 16px;
  margin: 40px auto;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(122, 65, 113, 0.1);
  font-family: 'Quicksand', sans-serif;
}

.no-result-img {
  width: 100px;
  height: auto;
  margin: 0 auto;
  opacity: 0.8;
}

.no-result-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #7A4171;
  margin-bottom: 10px;
}

.no-result-message {
  font-size: 1rem;
  color: #555;
}
.create-review-cta {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  background-color: #f8f0f5;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.create-review-cta p {
  font-size: 18px;
  margin-bottom: 12px;
  color: #5B3057;
}

.cta-button {
  display: inline-block;
  background-color: #7A4171;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-family: 'Quicksand', sans-serif;
}

.cta-button:hover {
  background-color: #5B3057;
}
.cta-button:hover {
  background-color: #5d2d63;
  transform: scale(1.03);
  transition: all 0.3s ease;
}
@media (max-width: 768px) {
  .create-review-cta {
    padding: 20px 15px;
  }
}

.event-container {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 150px;
}

.event-main-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 0 auto;
}

.event-info h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.event-info p {
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.event-content {
  margin-top: 2rem;
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
}
.event-single {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Quicksand', sans-serif;
  padding:150px 10px;
  
}
/* --- Upcoming Events セクション --- */
.latest-events {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.latest-events h2 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #4299e1;
  margin-bottom: 30px;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.event-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
  text-decoration: none;
  display: block;
}

.event-item:hover {
  transform: translateY(-5px);
}

.event-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* ★ ここが重要：event-infoの中身の整形 */
.event-info {
  padding: 15px;
  text-align: left;
}

.event-info .event-date {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 5px;
  display: block;
}

.event-info h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .event-grid {
    grid-template-columns: 1fr;
  }
}

.event-info {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.event-info th,
.event-info td {
  border: 1px solid #ccc;
  padding: 0.8rem;
  text-align: left;
  vertical-align: top;
}

.event-info th {
  background-color: #f9f9f9;
  width: 25%;
}
.single-event form {
  margin-bottom: 30px;
}
.single-event select,
.single-event input[type="submit"] {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
}
.single-event input[type="submit"] {
  background-color: #7A4171;
  color: white;
  border: none;
  cursor: pointer;
}
.single-event input[type="submit"]:hover {
  background-color: #5B3057;
}

.event-archive {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 150px;
}

.event-archive h1 {
  text-align: center;
  padding-top: 50px;
}

.event-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 20px;
}

/* ←★このclassでループ中のカード1つずつを定義 */
.event-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.event-card {
  flex: 1 1 calc(25% - 1rem);
  max-width: calc(25% - 1rem);
  background: white;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* タブレット */
@media screen and (max-width: 768px) {
  .event-card {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

/* スマホ */
@media screen and (max-width: 496px) {
  .event-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.event-card:hover {
  transform: translateY(-5px);
}

.event-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-card-content {
  padding: 15px;
}

.event-card-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #4b0082; /* 京紫 */
  word-break: break-word;
}

.event-card-title a {
  text-decoration: none;
  color: inherit;
}

.event-card-date {
  font-size: 14px;
  color: #666;
}

/* 🔽 メディアクエリでカード幅をレスポンシブ対応 */

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

@media screen and (max-width: 496px) {
  .event-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
/* フォーム全体 */
form {
  max-width: 600px;
  margin: 0 auto;
  padding: 2em;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* ラベルと入力欄 */
form p {
  margin-bottom: 1.5em;
}

form label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 1rem;
  color: #333;
}

form input[type="text"],
form textarea,
form select {
  width: 100%;
  padding: 0.8em;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

form input[type="text"]:focus,
form textarea:focus,
form select:focus {
  border-color: #9c4e97; /* 京紫っぽい */
  outline: none;
}

/* Submitボタン */
form input[type="submit"] {
  background-color: #9c4e97;  /* 京紫 */
  color: #fff;
  padding: 0.8em 2em;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.3s;
}

form input[type="submit"]:hover {
  background-color: #7c3b79; /* 少し濃い紫 */
}
@media (max-width: 480px) {
  form {
    padding: 1em;
  }
}
.page-id-328 main.page-content {
  padding-top: 120px !important;
}
.wp-block-heading {
  text-align: center;
  font-size: 2.0rem;
}
.qa-archive {
  padding: 140px 20px 100px;
}
.qa-archive-container {
  display: block;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.qa-archive-title {
  text-align: center;
  margin: 30px 0 20px;
  font-size: 2rem;
  font-weight: bold;
}

.qa-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qa-item {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 16px 15px;
}

.qa-thumb img {
  width: 100px;
  height: auto;
  object-fit: cover;
  margin-right: 20px;
}

.qa-info {
  flex: 1;
}

.qa-title {
  font-size: 1.2em;
  margin: 0 0 8px;
}

.qa-meta {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 10px;
}

.qa-excerpt {
  font-size: 1em;
  color: #333;
}
.qa-meta {
  font-size: 0.85rem;
  color: #666;
  margin: 4px 0 10px;
  line-height: 1.4;
}
.qa-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 6px;
}
.category-archive{
  margin-top:150px;
  padding:0 10px;
}

.single-question .wp-post-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-height: 400px; /* ←ここを追加 or 調整！ */
  object-fit: contain;  /* 必要なら contain にしてもOK */
  border-radius: 8px; /* オプション：角丸にするなら */
}
.qa-category-tags {
  text-align: center;
  margin-bottom: 30px;
}
.category-archive-page-title{
  text-align: center;
}
.tag-button {
  display: inline-block;
  background: #f2f2f2;
  color: #333;
  padding: 8px 14px;
  border-radius: 20px;
  margin: 5px;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.3s;
}

.tag-button:hover {
  background: #d3d3d3;
}
.question-card-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 2rem;
}

.question-card {
  display: flex;
  gap: 1rem;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

.question-card-image img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.question-card-content {
  padding: 1rem;
  flex: 1;
}

.question-card-title {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.question-card-meta {
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 0.5rem;
}

.question-card-excerpt {
  font-size: 1rem;
}
.question-card-title a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s ease;
}

.question-card-title a:hover {
  color: #663399; /* 京紫とかもおすすめ */
}
.question-card-meta {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: #777;
  font-size: 0.9rem;
}
@media (max-width: 768px) {
  .question-card {
    flex-direction: column;
  }

  .question-card-image img {
    width: 100%;
    height: auto;
  }
}
.ask-button-wrapper {
  text-align: right;
  margin-bottom: 20px;
  margin:0 auto;
}
.ask-button {
  display: inline-block;
  padding: 10px 30px;
  background-color: #7b4ba4; /* お好みの色に */
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
}
.ask-button:hover {
  background-color: #643d85;
}
.ask-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background-color: #7b4ba4;
  color: #fff;
  padding: 12px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.ask-desc{
  text-align: center;
  padding-top:10px;
}
.submit-button {
  background-color: #874996; /* 京紫 */
  color: white;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 28px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.submit-button:hover {
  background-color: #6c397b;
}
.view-reviews-button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #6c3483;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.view-reviews-button:hover {
  background-color: #512e5f;
}
#usp_form {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 1rem; /* お好みで調整可 */
display: block;
}

.review-meta {
  display: flex;
  flex-direction: column; /* ← 1列縦並びに変更 */
  gap: 6px;
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 1.5rem;
  align-items: flex-start; /* 左寄せ */
}

.review-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-categories {
  display: flex;
  gap: 6px;
}

.review-categories a {
  background-color: #eee;
  color: #333;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  text-decoration: none;
}
.review-author{
  font-size:1.2rem;
}


.event-button-wrapper {
  text-align: right;
  margin-bottom: 20px;
  margin:0 auto;
}
.event-button {
  display: inline-block;
  padding: 10px 30px;
  background-color: #7b4ba4; /* お好みの色に */
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
}
.event-button:hover {
  background-color: #643d85;
}
.event-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background-color: #7b4ba4;
  color: #fff;
  padding: 12px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
form {
  
  flex-direction: column;
  align-items: center;
  gap: 15px; /* ← 各要素の間にスペース */
  max-width: 600px;
  margin: 0 auto;
}

form select,
form input[type="text"],
form button {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

form button {
  
  background-color: #814D7C;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  margin-top:20px;
}
.top-qa-section {
  padding: 40px 20px;
  background: #fafafa;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 0.5em;
}

.qa-intro {
  font-size: 1rem;
  margin-bottom: 2em;
}

.qa-card-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.qa-card {
  background: white;
  border-left: 5px solid #0073aa;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: left;
}

.qa-q {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.qa-a {
  color: #444;
}

.qa-more {
  margin-top: 2em;
}

.qa-more-button {
  background: #0073aa;
  color: white;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

.qa-card-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.qa-card-link {
  text-decoration: none;
  color: inherit;
}

.qa-card {
  background: white;
  border-left: 5px solid #0073aa;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}

.qa-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.qa-q {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

.qa-detail {
  color: #444;
  font-size: 0.95rem;
}
.qa-more-button {
  display: inline-block;
  background-color: #77316C;  /* 紫系（例：京紫） */
  color: white;
  padding: 12px 28px;
  border-radius: 9999px; /* 丸くする */
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
  margin-top: 30px;
}

.qa-more-button:hover {
  background-color: #5e2754; /* 濃いめ紫 */
}
.review-tag {
  display: inline-block;
  background-color: #f0f0f0; /* 薄いグレー */
  color: #333;
  font-size: 0.9rem;
  padding: 4px 10px;
  margin: 4px 6px 0 0;
  border-radius: 6px;
  text-decoration: none;
}

.youtube-section .section-title {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #007acc; /* タイトルもブルー */
}

.youtube-intro {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #272727;
}

.youtube-video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.youtube-video {
  width: 100%;
  max-width: 320px;
}

.view-more-btn a {
  display: inline-block;
  margin-top: 30px;
  padding: 15px 30px;
  background-color: #77316C; /* 紫ボタン */
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.view-more-btn a:hover {
  background-color: #5e005e; /* ホバー時は濃い紫 */
}


.footer-social-icons {
  text-align: center;
  margin:0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
}

.footer-social-icons .social-icon {
  display: inline-block;
  margin: 0 10px;
  font-size: 40px;
  color: #7A4171; /* 京紫 */
  transition: color 0.3s;
}

.footer-social-icons .social-icon:hover {
  color: #5B3057;
}
.footer_copy{
  text-align: center;
}

.latest-trivia-section{
  padding-top:50px;
  padding-bottom:50px;
  background-color:#fafaf5;
}


.trivia-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 50px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.trivia-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.trivia-card-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.trivia-card-content {
  padding: 20px;
}

.trivia-card-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  text-decoration: none  !important;
  padding:20px 0px;
  color: #333 !important;
}
.trivia-card-title a {
  text-decoration: none !important;
  color: #333 !important;
}

.trivia-card-body {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

.trivia-card-source {
  font-size: 0.8rem;
  color: #999;
  margin-top: 10px;
  text-align: right;
}
.trivia-title{
  font-size: 2em;
  color: #4299e1;
  margin-bottom: 40px;
  margin-top: 200px;
  text-align: center;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.trivia-speech-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 小さめのカード幅 */
  gap: 20px;
  justify-content: center;
  padding: 40px 20px;
}

.trivia-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.trivia-card {
  background: #fff;
  padding:20px;
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trivia-card:hover {
  transform: translateY(-5px);
}

.trivia-card-image img {
  width: 100%;
  aspect-ratio: 1 / 1;  /* 正方形にする */
  object-fit: cover;
  display: block;
}


.trivia-card-button {
  display: inline-block;
  margin: 0 0 20px;
  padding: 12px 24px;
  background-color: #77316C;
  color: white;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.trivia-card-button:hover {
  background-color: #5B3057;
}

.trivia-single-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 30px auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.trivia-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
  color: #4299e1;
  font-weight: bold;
  font-family: 'Quicksand', sans-serif;
}
.trivia-source {
  font-style: italic;
  font-size: 0.9rem;
  color: #777;
  text-align: right;
  max-width: 700px;
  margin: 0 auto;
}
.back-to-trivia {
  text-align: center;
  margin-top: 40px;
}
.back-to-trivia a {
  text-decoration: none;
  background: #77316C;
  color: white;
  padding: 10px 30px;
  border-radius: 25px;
  transition: background 0.3s;
}
.back-to-trivia a:hover {
  background: #5B3057;
}
.trivia-single {
  padding-top: 150px;
  padding-bottom: 60px;
}

.trivia-single-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.trivia-single-title {
  font-size: 2rem;
  color: #4299e1;
  text-align: left;
  margin-bottom: 10px;
}

.trivia-single-subtitle {
  text-align: left;
  font-style: italic;
  color: #666;
  margin-bottom: 30px;
}

.trivia-single-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 40px;
}

.trivia-single-gallery-item {
  text-align: center;
  margin-bottom: 30px;
  margin-top:20px;
}

.trivia-single-gallery-item img {
  width: 100%;
  max-width: 800px;
  height: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin:0 auto;
}

.trivia-source {
  font-size: 0.9rem;
  font-style: italic;
  color: #777;
  text-align: right;
  margin-top: 20px;
}
.single-share {
  text-align: center;
  margin-top: 40px;
  font-size: 1rem;
}
.single-share a {
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
  color: #77316C;
  transition: opacity 0.3s ease;
}
.single-share a:hover {
  opacity: 0.7;
}
.related-posts {
  margin: 60px 0;
}
.related-posts h2 {
  text-align: center;
  font-size: 1.5em;
  color: #333;
  margin-bottom: 30px;
}
.related-posts-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.related-card {
  width: 280px;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  background: white;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}
.related-card:hover {
  transform: translateY(-5px);
}
.related-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.related-title {
  padding: 12px;
  font-weight: bold;
  text-align: center;
}
/* =============================
   🎯 トップページのTrivia専用CSS（.trivia-top-* 系）
   ============================= */
.latest-trivia-section {
  padding: 50px 20px;
  background-color: #fafaf5;
}

.trivia-section-title {
  font-size: 2em;
  color: #4299e1;
  margin-bottom: 40px;
  text-align: center;
}

.trivia-top-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.trivia-bubble {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  max-width: 350px;
  width: 100%;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trivia-bubble:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.trivia-image img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  flex-shrink: 0;
}

.trivia-top-text {
  flex: 1;
  min-width: 0;
}

.trivia-top-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.trivia-top-content {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

.see-more-trivia-btn {
  text-align: center;
  margin-top: 40px;
}

.see-more-trivia-btn a {
  display: inline-block;
  padding: 12px 40px;
  background-color: #77316C;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.see-more-trivia-btn a:hover {
  background-color: #5B3057;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .trivia-bubble {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .trivia-image img {
    margin: 0 0 12px 0;
  }

  .trivia-top-title {
    margin-top: 5px;
  }
}
.speech {
  position: relative;
  background: #d9e8ff;
  padding: 16px 20px;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

/* 吹き出し三角 */
.speech::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -16px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #d9e8ff;
}

/* モバイル表示では下から出る三角に */
@media screen and (max-width: 768px) {
  .speech::before {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color: #d9e8ff;
    border-right-color: transparent;
  }
}
/* アニメーション設定 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 吹き出しにアニメーションを適用 */
.speech {
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0; /* 初期状態で非表示に */
}
.speech:nth-child(1) {
  animation-delay: 0.2s;
}
.speech:nth-child(2) {
  animation-delay: 0.4s;
}
.trivia-single-link  {
  color: #4299e1;
  text-decoration: underline;
  color: inherit;
  font-weight: 600;
}

.trivia-single-link:hover{
  color: #77316C;
  text-decoration: none;
}


.trivia-filter {
  margin-bottom: 20px;
  text-align: center;
}
.filter-btn {
  background: #eee;
  border: none;
  margin: 5px;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}
.filter-btn.active {
  background: #333;
  color: #fff;
}
.trivia-filter {
  text-align: center;
  margin-bottom: 30px;
}
.trivia-filter .filter-btn {
  display: inline-block;
  margin: 5px;
  padding: 8px 16px;
  border-radius: 20px;
  background: #eee;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}
.trivia-filter .filter-btn.active {
  background: #333;
  color: #fff;
}
.trivia-categories {
  margin-bottom: 10px;
}
.trivia-category-label {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 10px;
  background: #f0f0f0;
  border-radius: 12px;
  font-size: 0.9em;
  text-decoration: none;
  color: #333;
}
.trivia-category-label:hover {
  background: #dcdcdc;
}
.pagination {
  margin: 40px 0;
  text-align: center;
}

/* 追加！ul自体をflexで横並びに */
.pagination ul.page-numbers {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-left: 0;
  margin: 0;
}

/* liの点を消す */
.pagination li {
  list-style: none;
}

/* リンク共通 */
.pagination .page-numbers {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
  font-weight: normal;
  transition: background-color 0.2s;
}

/* 現在ページ */
.pagination .page-numbers.current {
  background-color: #843c78;
  color: #fff;
  font-weight: bold;
}

/* ホバー */
.pagination .page-numbers:hover {
  background-color: #d1a3c2;
}