@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* カテゴリー説明をCSSでも非表示（保険） */
.archive-description {
  display: none !important;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /* 必要なら記述 */
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* 必要なら記述 */
}

/*480px以下*/
@media screen and (max-width: 480px){
  /* 必要なら記述 */
}



/*検索*/

/* 共通：ピンク系の可愛い検索ボックス */
.cute-search-box {
  width: 100%;
  margin-bottom: 15px;
}

.cute-search-box input[type="search"],
.cute-search-box select {
  width: 100%;
  padding: 10px 15px;
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 0.95em;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.cute-search-box input[type="submit"] {
  background-color: #ffb6c1;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  width: 100%;
}

.cute-search-box input[type="submit"]:hover {
  background-color: #ff85a1;
}
.category .category-description {
  display: none !important;
}




/* ホームページ　最新記事 */
/* 全体リストのリセット */
.latest-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.latest-posts li {
  list-style: none !important;
  margin-bottom: 20px;
}

/* 横並びレイアウト（PC） */
.latest-posts .post-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* 画像枠 */
.latest-posts .post-thumbnail {
  width: 40%;
  aspect-ratio: 4 / 3;  /* ←ここを使えば、縦横比で高さを柔軟に固定 */
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}

/* 画像本体 */
.latest-posts .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* テキスト側 */
.latest-posts .post-content {
  width: 60%;
}

/* カテゴリーボタン風 */
/* ===============================
   カテゴリーボタンラッパー（横並びにする）
================================= */
.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

/* ===============================
   ピンクボタン共通スタイル（1列・2列どちらでも）
================================= */
.post-categories .category-link,
.latest-posts .post-category,
.latest-posts-card .category-link {
  background-color: #ffb6c1;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: background-color 0.3s ease;
  line-height: 1.2;
}

/* ===============================
   ホバー時のスタイル
================================= */
.post-categories .category-link:hover,
.latest-posts .post-category:hover,
.latest-posts-card .category-link:hover {
  background-color: #f2b6cc;
  color: #ffffff;
}




/* タイトルと本文 */
.latest-posts .post-title {
  font-size: 1.1em;
  font-weight: bold;
  margin: 6px 0;
  color: #000;
}

/* リンクの装飾を消す */
.latest-posts .post-link {
  text-decoration: none;
  color: inherit;
}

.latest-posts .post-link:hover .post-title {
  text-decoration: underline;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .latest-posts .post-box {
    flex-direction: column;
    align-items: stretch;
  }

  .latest-posts .post-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;  /* スマホでも比率キープ */
    border-radius: 8px;
  }

  .latest-posts .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
  }

  .latest-posts .post-content {
    width: 100%;
  }
}

/* ===============================
   「もっと見る」ボタン
================================= */
.popular-category-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5em;
}

.popular-more-link {
  background-color: #ffb6c1;
  /* グラデ削除で単色に */
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  font-size: 0.9em;
  box-shadow: 0 4px 6px rgba(255, 182, 193, 0.4);
  transition: all 0.3s ease;
  display: inline-block;
}

.popular-more-link:hover {
  background-color: #f2b6cc; /* hover時もカテゴリと揃える */
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(255, 182, 193, 0.6);
}


/* ===============================
   スマホ対応（768px以下）
================================= */

/* モバイル最新　人気横幅 */
ul.latest-posts,
ul.popular-posts {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}


/* ホームカテゴリーショート */
/* ===============================
   コラボ記事カード一覧（グリッド式）
================================= */
ul.latest-posts-card {
  display: grid;
  grid-template-columns: 1fr;  /* スマホは縦1列 */
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* PCで3列に切り替え */
@media (min-width: 768px) {
  ul.latest-posts-card {
    grid-template-columns: repeat(3, 1fr);
  }
}

ul.latest-posts-card li.latest-post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* ===============================
   サムネイル画像
================================= */
ul.latest-posts-card .thumbnail {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

ul.latest-posts-card .thumbnail img,
.latest-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
}

/* ===============================
   テキストエリア
================================= */
ul.latest-posts-card .content {
  padding: 12px 15px 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ===============================
   カテゴリー表示
================================= */
ul.latest-posts-card .post-category {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

ul.latest-posts-card .post-category .category-link {
  display: inline-block;
  background-color: #ffb6c1;
  color: #fff;
  font-size: 0.75em;
  padding: 4px 10px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
}

/* ===============================
   タイトル
================================= */
ul.latest-posts-card .title {
  font-size: 1em;
  font-weight: bold;
  color: #333;
  margin: 6px 0;
  line-height: 1.4;
  background: none !important;   /* ← 背景色を完全に削除 */
  border: none !important;       /* ← 枠線がある場合は削除 */
  box-shadow: none !important;   /* ← 影がある場合も削除 */
  padding: 0 !important;         /* ← 不要な余白を消す */
}

ul.latest-posts-card .title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* 最大2行に制限 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  text-decoration: none;
  color: inherit;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

ul.latest-posts-card .title a:hover {
  text-decoration: underline;
}

/* ===============================
   抜粋
================================= */
ul.latest-posts-card .excerpt {
  font-size: 0.9em;
  color: #666;
  margin-top: auto;
  margin-bottom: 0;
}

/* 抜粋内のリンクを黒文字＆下線なしに */
ul.latest-posts-card .excerpt a {
  color: #333 !important;
  text-decoration: none !important;
}

ul.latest-posts-card .excerpt a:hover {
  color: #000 !important;
  text-decoration: underline;
}

/* ===============================
   「もっと見る」ボタン
================================= */
.latest-category-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5em;
}

/* 統一デザイン：薄ピンク×白文字×優しい影 */
.latest-more-link {
  background-color: #ffb6c1; /* カテゴリーと同じ薄ピンク */
  color: #fff;
  padding: 8px 16px;
  border-radius: 24px;
  font-weight: bold;
  text-decoration: none;
  font-size: 0.9em;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 6px rgba(255, 182, 193, 0.4); /* 優しい影を追加 */
}

.latest-more-link:hover {
  background-color: #f2b6cc; /* 統一感のあるhoverカラー */
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(255, 182, 193, 0.6); /* hover時も統一 */
}

/* スマホで最初の1件だけ1列、2件目以降は2列 */
@media (max-width: 767px) {
  ul.latest-posts-card {
    grid-template-columns: repeat(2, 1fr); /* 基本は2列表示 */
  }

  ul.latest-posts-card > li.latest-post-card:nth-child(1) {
    grid-column: span 2; /* 最初の1件だけ全幅で表示 */
  }
}



/* カテゴリー別人気記事固定ページボタン */
/* ===============================
   人気記事一覧：カード表示（2列レイアウト）
================================= */
.popular-posts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各カード */
.popular-post-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  width: calc(50% - 10px); /* PCでは2列 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.popular-post-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* サムネイル画像 */
.popular-post-card .thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.popular-post-card .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストエリア */
.popular-post-card .content {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* カテゴリーバッジ（ピンク統一） */
.popular-post-card .post-category {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.popular-post-card .post-category .category-link {
  background-color: #ffb6c1;
  color: #fff;
  padding: 4px 10px;
  font-size: 0.75em;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
}

.popular-post-card .post-category .category-link:hover {
  background-color: #f69dac;
}

/* タイトル（黒文字） */
.popular-post-card .title {
  font-size: 1em;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin: 4px 0 0;
}

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

.popular-post-card .title a:hover {
  text-decoration: underline;
}

/* 抜粋（下線なし・色統一） */
.popular-post-card .excerpt {
  font-size: 0.9em;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* 「もっと見る」ボタン：右寄せ・ピンク統一 */
.button-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5em;
}

.more-link {
  background-color: #ffb6c1;
  color: #fff;
  padding: 8px 16px;
  border-radius: 24px;
  font-weight: bold;
  text-decoration: none;
  font-size: 0.9em;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 6px rgba(255, 182, 193, 0.4);
}

.more-link:hover {
  background-color: #f2b6cc;
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(255, 182, 193, 0.6);
}

/* モバイル：1列表示に変更 */
@media screen and (max-width: 768px) {
  .popular-post-card {
    width: 100%;
  }
}



/* カテゴリー一覧固定ページ */

.category-section {
  margin-bottom: 3em;
}

.category-cards {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  flex-wrap: wrap;
}

.category-card {
  flex: 1 1 calc(33.333% - 1em); /* 3列 */
  background: #fff;
  border: 1px solid #eee;
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  text-align: center;
}

.category-card img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.card-title {
  display: block;
  margin-top: 0.5em;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.category-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 1em;
}

.category-more .popular-more-link {
  background: linear-gradient(135deg, #ffb6c1, #ffa6c9);
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  font-size: 0.9em;
  box-shadow: 0 4px 6px rgba(255, 182, 193, 0.4);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.category-more .popular-more-link:hover {
  background: linear-gradient(135deg, #ffa6c9, #ff8fa3);
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(255, 182, 193, 0.6);
}

/* 検索ボタンとカテゴリー検索の間にスペースを追加 */
.cute-search-box + .cute-search-box {
  margin-top: 20px; /* 上に20pxの間隔を追加 */
}

.site-search-section {
  margin-bottom: 30px; /* 下に余白を追加 */
}

/* マタタビアーカイブ */
/* カードを一列表示（スマホ対応） */
.category-cards,
.tag-cards,
.popular-posts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 各カード共通（3列 → スマホ1列） */
.category-card,
.tag-card,
.popular-post-card {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
}

/* モバイル表示では1列にする */
@media (max-width: 768px) {
  .category-card,
  .tag-card,
  .popular-post-card {
    flex: 1 1 100%;
  }
}

/* カテゴリースマホ */
@media screen and (max-width: 768px) {
  .category-card {
    flex: 1 1 100%; /* 一列表示 */
  }
}
/* タグスマホ */
.tag-section {
  margin-bottom: 40px;
}

.tag-section-title {
  font-size: 1.5em;
  margin-bottom: 16px;
}

.tag-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.tag-card {
  flex: 1 1 calc(33.333% - 20px);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
}

.tag-card .thumbnail-link img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.tag-card .title {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.tag-card .title:hover {
  color: #f48da0;
}

@media (max-width: 768px) {
  .tag-card {
    flex: 1 1 100%;
  }
}

.tag-more {
  text-align: right;
  margin-top: 15px;
}

.tag-more-link {
  display: inline-block;
  padding: 6px 16px;
  background: #f8b5c2;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
}

.tag-more-link:hover {
  background: #f48da0;
}

/* ホーム人気ランキング */
.rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-block;
  font-weight: bold;
  font-size: 0.9em;
  padding: 5px 12px;
  border-radius: 20px;
  line-height: 1.2;
  background: gold;
  color: #000;
  box-shadow:
    0 0 0 3px #fff,
    0 2px 6px rgba(0, 0, 0, 0.1);
}

/* サムネイルに重ねるための親 */
.post-thumbnail {
  position: relative;
  overflow: hidden;
}

/* 順位別カラー */
.latest-posts > li:nth-child(1) .rank-badge {
  background: gold;
  color: #000;
}
.latest-posts > li:nth-child(2) .rank-badge {
  background: silver;
  color: #000;
}
.latest-posts > li:nth-child(3) .rank-badge {
  background: #cd7f32;
  color: #000; 
}
.latest-posts > li:nth-child(n+4) .rank-badge {
  background: #999;
  color: #000;
}

.rank-badge {
  /* 既存のスタイルの下に追加 */
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}
/* 絵文字の白フチ */
.rank-emoji {
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}



/* アクセス人気ランキング固定 */
/* 共通：ランキング広告 */
.ranking-ad {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.article-ad {
    width: 100%;
    max-width: 728px;
}

/* ベースレイアウト（PC・タブレット共通） */
.matatabi-top20-ranking {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.ranking-card {
    width: calc(50% - 8px);
    padding: 16px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #fff0f6;
    border: 1px solid #f4c6d7;
    margin-bottom: 16px;
    text-align: center;
}

.ranking-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    margin-bottom: 10px;
    height: auto; /* 明示的に高さは自動でOK */
}

.ranking-number {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 6px;
}

.ranking-title a {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    display: block;
    padding: 0 6px;
}

@media (max-width: 480px) {
  .ranking-card {
    width: calc(50% - 8px) !important;
  }
}

/* 10位ごとのセクション見出し（任意） */
.ranking-section {
    width: 100%;
    font-size: 1.4em;
    margin: 24px 0 12px;
    text-align: left;
    padding-left: 10px;
    border-left: 5px solid #f48fb1;
    font-weight: bold;
    color: #c2185b;
}



/* 過去記事 */
/* カード全体のレイアウト */
.custom-post-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 各カード */
.custom-post-cards .post-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* サムネイル（画像）部分 */
.custom-post-cards .post-thumbnail {
  width: 160px;              /* 左側に固定幅 */
  height: 120px;             /* 高さも固定 */
  flex-shrink: 0;            /* 縮まないように固定 */
  overflow: hidden;          /* はみ出す部分は非表示 */
  display: block;
}

/* サムネイル画像の調整 */
.custom-post-cards .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 縦横比を保ちつつ枠にフィット */
  display: block;
}

/* テキスト側の設定 */
.custom-post-cards .post-content {
  flex: 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* タイトル */
.custom-post-cards .post-title a {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  margin-bottom: 5px;
}
.custom-post-cards .post-title a:hover {
  color: #ff88aa;
}

/* 抜粋文 */
.custom-post-cards .post-excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .custom-post-cards .post-card {
    flex-direction: column;
  }

  .custom-post-cards .post-thumbnail {
    width: 100%;
    height: 200px;           /* モバイルでは縦長に対応 */
  }

  .custom-post-cards .post-content {
    padding: 10px;
  }
}

/* 「もっと見る」ボタン周辺 */
.archive-section .more-link {
  text-align: right;
  margin-top: 15px;
  background: none !important;
}

.archive-section .btn-more {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff88aa;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 2;
}

.archive-section .btn-more:hover {
  background-color: #ff6699;
}

/* 擬似要素によるピンクの帯の完全削除 */
.archive-section .btn-more::before,
.archive-section .btn-more::after,
.archive-section .more-link::before,
.archive-section .more-link::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* 念のため、親要素の背景も白で固定 */
.archive-section {
  background-color: #fff !important;
}


/* フッター特集　人気　カテゴリー　ホーム */
/* フッター内のボタンエリア */
.footer-button-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

/* ボタンのデザイン（共通） */
.footer-btn, .home-btn {
  background-color: #ffb6c1;  /* 薄ピンクに統一 */
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(255, 182, 193, 0.4);  /* 柔らかい影に変更 */
}

/* ホバー時のデザイン */
.footer-btn:hover, .home-btn:hover {
  background-color: #f2b6cc;  /* カテゴリーボタンと同じ濃いめピンク */
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(255, 182, 193, 0.6); /* hover時も優しく */
}

/* ホームへ戻るボタンの配置 */
.home-return-btn {
  text-align: center;
  margin: 20px 0;
}

/* モバイル用調整 */
@media (max-width: 768px) {
  .footer-button-area {
    flex-direction: column;
    gap: 10px;
  }

  .footer-btn, .home-btn {
    width: 80%;
    margin-bottom: 10px;
  }
}



/* 広告 */
/* ===== Multiplex広告・通常広告：共通余白 ===== */

/* ===== Multiplex広告：上下余白（全体） ===== */
.multiplex-ad-space {
  height: 40px;
  clear: both;
  display: block;
}

/* ===== モバイルでは非表示にする設定 ===== */
@media screen and (max-width: 767px) {
  .multiplex-ad-space {
    display: none;
  }
}

/* 記事内広告：共通スペース */
.ad-space {
  height: 20px;
}

/* ===== Multiplex広告：PC用設定（常時表示） ===== */
@media screen and (min-width: 768px) {
  .multiplex-ad-box {
    display: block;
    width: 100%;
    min-height: 600px; /* ← 実際に見切れない高さに引き上げ */
    margin: 0 auto;
    padding-bottom: 20px; /* 安全余白 */
    text-align: center;
    clear: both;
    overflow: visible !important; /* はみ出し許可 */
  }

  .multiplex-ad-box ins,
  .multiplex-ad-box iframe {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
}


  /* 通常広告の左右余白調整（記事内・フッター用） */
  .article-ad,
  .footer-ad {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 横スクロール防止（念のため） */
  html, body {
    overflow-x: hidden;
  }



@media screen and (max-width: 767px) {
  .ad-container.ad-center {
    padding: 0 12px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .ad-container.ad-center ins {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* モバイルでは非表示 */
@media screen and (max-width: 767px) {
  .top-article-ad {
    display: none !important;
  }
}

/* PCでは表示（明示） */
@media screen and (min-width: 768px) {
  .top-article-ad {
    display: block;
    padding: 0 12px;
    margin: 0 auto 20px;
    max-width: 100%;
    box-sizing: border-box;
    clear: both;
  }
}




/* ホーム人気ランキング記事ウィジェットのスタイル調整 */
.ranking-more-button {
  text-align: right;
  margin-top: 12px;
}

.ranking-more-link {
  display: inline-block;
  background-color: #ffb6c1;   /* カテゴリーボタンと同じ色に統一 */
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ranking-more-link:hover {
  background-color: #f2b6cc;   /* カテゴリーボタンのhoverと統一 */
}


/* フッター広告貫通 */
.footer-ad-box {
  position: relative;  /* 広告を浮かせず、周囲の要素と同じレイヤーに */
  z-index: 1;           /* 他のUIと衝突しない */
  padding-bottom: 12px;
  background-color: #fff; /* 背景色を明示しておくと安心 */
}

.footer-ad-box .ad-inner {
  max-width: 100%;
  overflow: hidden;
}

.adsbygoogle {
  display: block !important;
  height: auto !important;
  max-height: 300px;
  overflow: hidden;
}


/* 季節イベント */
/* 🌸 セクション全体 */
.seasonal-event-section {
  margin: 40px auto;
  background: #fffaf5;
  padding: 20px;
  border-radius: 12px;
}

/* 🌟 見出し */
.section-title {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 16px;
  color: #e87e9f;
  text-align: center;
}

/* 📦 カードリスト */
.event-posts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-post-item {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.event-thumb {
  position: relative;
  overflow: hidden;
}

.event-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.event-category-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 182, 193, 0.95);
  color: #000;
  font-size: 0.75em;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 0 0 2px #fff;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

.event-title {
  padding: 10px;
  font-size: 0.95em;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.event-post-item > a {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;
}

/* 💻 通常（PC）表示：4列 */
@media (min-width: 768px) {
  .event-post-item {
    width: calc(25% - 20px);
  }
  .event-title {
    font-size: 0.95em;
    padding: 8px;
  }
}

/* 💻 PCで横スクロールさせたい時 */
@media (min-width: 768px) {
  .event-posts-list.scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 12px;
  }

  .event-posts-list.scrollable .event-post-item {
    flex: 0 0 auto;
    width: 260px;
    scroll-snap-align: start;
  }
}

/* 矢印コンテナ */
.scroll-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 左矢印 */
.scroll-arrow.left {
  left: 0;
}

/* 右矢印 */
.scroll-arrow.right {
  right: 0;
}

/* 矢印の中身 */
.scroll-arrow::before {
  content: '';
  border: solid #333;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 8px;
}

.scroll-arrow.left::before {
  transform: rotate(135deg);
}

.scroll-arrow.right::before {
  transform: rotate(-45deg);
}

/* 📱 モバイル：横スクロール */
@media (max-width: 767px) {
  .event-posts-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 10px;
  }

  .event-post-item {
    width: 70%;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .event-thumb img {
    max-height: 140px;
    border-radius: 6px;
  }

  .event-title {
    font-size: 0.9em;
    padding: 6px;
    line-height: 1.25;
  }
}