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

/* =========================================================
   Re-Self トップページ用CSS
   ========================================================= */

/* 全体の囲み（左右中央ぞろえ・最大幅） */
.reself-wrap{ max-width:1240px; margin:0 auto; padding:0 16px; }

/* セクション見出し（カラム内でも使うので font-family を明示） */
.reself-sec-title{ font-family:"Noto Serif JP",serif; font-weight:700; font-size:28px; color:#524c49;
  text-align:center; letter-spacing:.08em; margin:48px 0 28px; }
.reself-sec-title i{ color:#c9a24a; margin-right:8px; }
.reself-sec-title::after{ content:""; display:block; width:48px; height:3px; background:#4e7336; margin:12px auto 0; border-radius:2px; }

/* 見出しを濃い帯にするバリエーション（編集部のおすすめ用） */
/*   ・width:fit-content で文字幅に合わせた帯にし、margin:auto で中央寄せ */
/*   ・帯の幅は padding の左右（110px）で調整できます（大きいほど横長） */
.reself-sec-bar{ display:block; width:fit-content; margin:28px auto 28px; padding:6px 200px;
  background:#524c49; color:#fff; font-weight:600; font-size:24px; letter-spacing:.04em;
  box-shadow:0 5px 12px rgba(0,0,0,.16); }
.reself-sec-bar::after{ display:none !important; } /* 緑の下線は消す */

/* もっと見る／すべて見る ボタン */
.reself-more{ text-align:center; margin:28px 0 8px; }
.reself-more a{ display:block; max-width:424px; margin:0 auto; box-sizing:border-box;
  font-family:"Noto Serif JP",serif; font-weight:700; font-size:16px; color:#524c49; text-decoration:none;
  border:1px solid #524c49; border-radius:50px; padding:9px 20px; transition:all .2s; }
.reself-more a::after{ content:"＞"; margin-left:10px; font-size:13px; }
.reself-more a:hover{ background:#524c49; color:#fff; }

/* ===== 編集部のおすすめ（固定記事を横スクロール表示） ===== */
.reself-pickwrap{ position:relative; }
.reself-pick-ql .wp-block-post-template{ list-style:none !important; margin:0 !important; padding:0 0 6px !important;
  display:flex !important; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.reself-pick-ql .wp-block-post-template::-webkit-scrollbar{ display:none; }
.reself-pick-ql .wp-block-post-template > li{ margin:0 !important; flex:0 0 calc((100% - 48px)/4);
  scroll-snap-align:start; display:flex; flex-direction:column; }
.reself-pick-ql .reself-pick-thumb{ margin:0 !important; aspect-ratio:16/9; overflow:hidden; border-radius:8px; }
.reself-pick-ql .reself-pick-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; }
/* ▼おすすめのタイトル */
.reself-pick-ql .reself-pick-lead{ margin:8px 0 0 !important; padding:0 2px; font-family:"Noto Serif JP",serif;
  font-weight:600; font-size:14px !important; line-height:1.5; color:#524c49 !important; background:none !important; border:none !important; }
.reself-pick-ql .reself-pick-lead a{ color:#524c49 !important; text-decoration:none; }

/* 画像の上のキャッチ（カテゴリ名の代わりに、カテゴリ別の文言をCSSで表示） */
/*   ・元のカテゴリ名は font-size:0 で隠し、::after で文言を出す */
/*   ・リンク先はカテゴリページのまま（文言をクリックでそのカテゴリへ） */
/*   ・1記事につき1カテゴリを前提にしています */
.reself-pick-ql .reself-pick-catch{ margin:0 0 8px !important; line-height:1.4; text-align:center; }
.reself-pick-ql .reself-pick-catch a{ color:#4e7336 !important; text-decoration:none; font-size:0; }
.reself-pick-ql .reself-pick-catch a::after{ font-family:"Noto Serif JP",serif; font-weight:700; font-size:14px; }
.reself-pick-ql .reself-pick-catch a[href*="/loneliness/"]::after{ content:"＼ 孤独を感じているあなたへ ／"; }
.reself-pick-ql .reself-pick-catch a[href*="/partnership/"]::after{ content:"＼ 夫婦関係に悩むあなたへ ／"; }
.reself-pick-ql .reself-pick-catch a[href*="/wellness/"]::after{ content:"＼ セックスレスに悩むあなたへ ／"; }
.reself-pick-ql .reself-pick-catch a[href*="/identity/"]::after{ content:"＼ 女性として見られたいあなたへ ／"; }
.reself-pick-ql .reself-pick-catch a[href*="/love/"]::after{ content:"＼ 大人の恋愛に興味があるあなたへ ／"; }
.reself-pick-ql .reself-pick-catch a[href*="/connection/"]::after{ content:"＼ 良質なつながりを求めるあなたへ ／"; }

/* アイキャッチ画像の右上に、暗い帯のカテゴリ名 */
.reself-pick-ql .reself-pick-figure{ position:relative; margin:0 !important; }
.reself-pick-ql .reself-pick-badge{ position:absolute; top:8px; right:8px; z-index:2; margin:0 !important; line-height:1; }
.reself-pick-ql .reself-pick-badge a{ display:inline-block; background:#524c49; color:#fff !important;
  font-family:"Noto Serif JP",serif; font-weight:600; font-size:12px; letter-spacing:.04em;
  padding:4px 12px; text-decoration:none; }

.reself-pick-empty{ padding:30px 16px; color:#a99d8b; text-align:center; font-size:14px; }

/* 左右の矢印ボタン */
.reself-pick-arrow{ position:absolute; top:34%; transform:translateY(-50%); right:-12px;
  width:44px; height:44px; border-radius:50%; border:1px solid #e0ddd1; background:#fff; color:#524c49;
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.14); z-index:2; }
.reself-pick-arrow:hover{ background:#f7f4ef; }
.reself-pick-prev{ left:-12px; right:auto; }

/* ===== 人気の記事（Cocoonの人気記事リストをフラットに整える） ===== */
.reself-dyn .popular-entry-cards{ display:block; margin:0; }
.reself-dyn .popular-entry-card-link{ display:block; border-bottom:1px solid #ece6da; padding:14px 0; }
.reself-dyn .popular-entry-card{ background:none !important; border:none !important; box-shadow:none !important;
  display:flex !important; gap:14px; align-items:flex-start; padding:0 !important; margin:0 !important; }
.reself-dyn .popular-entry-card-thumb{ flex:0 0 90px; width:90px; height:51px;
  margin:0 !important; padding:0 !important; border-radius:6px; overflow:hidden; float:none !important; }
.reself-dyn .popular-entry-card-thumb img{ width:100% !important; height:100% !important;
  object-fit:cover !important; border-radius:6px; display:block; max-width:none; }
.reself-dyn .popular-entry-card-content{ flex:1 1 auto; min-width:0; margin:0 !important; padding:0 !important; }
.reself-dyn .popular-entry-card-title{ font-family:"Noto Serif JP",serif !important; font-weight:600 !important;
  color:#524c49 !important; font-size:14px !important; line-height:1.5 !important; margin:0 0 6px !important; }
.reself-dyn .popular-entry-card-snippet{ color:#7a726c; font-size:13px; }
.reself-dyn .popular-entry-card-date{ color:#a99d8b !important; }
.reself-dyn .wp-block-column{ min-width:0; }

/* ===== 最新・コラム（クエリーループ）の見た目 ===== */
.reself-ql .wp-block-post-template{ list-style:none !important; margin:0 !important; padding:0 !important; gap:0 !important; }
.reself-ql .wp-block-post-template > li{ margin:0 !important; }
.reself-ql-item{ border-bottom:1px solid #ece6da; margin:0 !important; padding:16px 0 !important; gap:16px !important; align-items:flex-start !important; }
.reself-ql-thumb{ flex:0 0 150px; margin:0 !important; }
.reself-ql-thumb a, .reself-ql-thumb img{ display:block; width:100%; border-radius:6px; }
.reself-ql-thumb img{ aspect-ratio:16/9; object-fit:cover; height:auto; }
.reself-ql-body{ flex:1 1 auto; min-width:0; gap:6px !important; margin:0 !important; }
.reself-ql-cat{ line-height:1; }
.reself-ql-cat a{ display:inline-block; background:#524c49; color:#fff !important; font-family:"Noto Serif JP",serif;
  font-weight:700; font-size:12px; padding:2px 12px; text-decoration:none; border:none; }
.reself-ql-title{ margin:0 !important; background:none !important; border:none !important; padding:0 !important; }
/* ▼最新・コラムのタイトル：16px・太さ600（おすすめと同じ） */
.reself-ql-title, .reself-ql-title a{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:16px !important;
  line-height:1.5; color:#524c49 !important; text-decoration:none; background:none !important; }
.reself-ql-date{ margin:0 !important; font-size:12px; color:#a99d8b; }
.reself-ql-date::before{ content:"\f017"; font-family:"Font Awesome 5 Free"; font-weight:400;
  margin-right:5px; font-size:11px; color:#a99d8b; }
.reself-ql-meta{ display:flex !important; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.reself-col-soon{ text-align:center; padding:40px 16px; color:#a99d8b;
  font-family:"Noto Serif JP",serif; font-size:20px; font-weight:600; letter-spacing:.08em; }

/* ===== スマホ（768px以下） ===== */
@media screen and (max-width:768px){
  .reself-sec-title{ font-size:20px; margin:32px 0 20px; }
  .reself-sec-bar{ font-size:16px; padding:10px 80px; margin:32px auto 20px; letter-spacing:.04em; }

  /* おすすめ：2枚並びに */
  .reself-pick-ql .wp-block-post-template{ gap:12px; }
  .reself-pick-ql .wp-block-post-template > li{ flex:0 0 calc((100% - 12px)/2); }
	.reself-pick-ql .reself-pick-catch a::after{ font-size:14px; }
	.reself-pick-ql .reself-pick-catch .wp-block-post-terms__separator,
.reself-pick-ql .reself-pick-badge .wp-block-post-terms__separator{ display:none !important; }
  .reself-pick-ql .reself-pick-badge a{ font-size:11px; padding:3px 9px; }
  .reself-pick-arrow{ width:38px; height:38px; font-size:18px; right:-6px; }
  .reself-pick-prev{ left:-6px; right:auto; }

  /* 最新・コラム（クエリーループ）を縦並びカードに */
  .reself-ql-item{ flex-direction:column !important; align-items:center !important; gap:10px !important;
    margin:0 !important; padding:14px 0 !important; border-bottom:none !important; }
  .reself-ql-thumb{ flex:0 0 auto !important; width:100% !important; max-width:280px; margin:0 auto !important; }
  .reself-ql-body{ width:100%; }

  /* 人気（Cocoon）を縦並びカードに */
  .reself-dyn .popular-entry-card{ flex-direction:column !important; align-items:center !important; gap:10px !important;
    border:none !important; box-shadow:none !important; background:none !important; }
  .reself-dyn .popular-entry-card-thumb{ flex:0 0 auto !important; width:100% !important; max-width:280px;
    height:auto !important; aspect-ratio:16/9; margin:0 auto !important; }
  .reself-dyn .popular-entry-card-content{ width:100%; }
  .reself-dyn .popular-entry-card-link{ margin:0 !important; padding:14px 0 !important; border-bottom:none !important; }
}

/* ============================================================
   Re-Self: トップ用 追記CSS（style.css の一番下に貼り付け）
   対象：Cocoonのアピールエリア(#appeal) と コンテンツトップのボックスメニュー(#content-top)
   ============================================================ */

/* ===== ファーストビュー（アピールエリア） ===== */
#appeal.appeal{
  position:relative;
  min-height:550px;
  display:flex;
  align-items:center;
  /* ▼写真の見える位置（顔を避けたいときはこの数値を変える） */
  /*   1つ目=横（0%左端・50%中央・100%右端）／2つ目=縦（top上・center中央・bottom下） */
  background-position:70% center !important;
}
/* 左側を明るくして文字を読みやすくする薄いオーバーレイ（背景画像はCocoon設定のまま） */
#appeal.appeal::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,0) 78%);
  pointer-events:none;
}
#appeal .appeal-in{
  position:relative; z-index:1;
  max-width:1240px; width:100%;
  margin:0 auto; padding:0 40px;
}
#appeal .appeal-content{ max-width:620px; text-align:left; transform:translateY(100px); }
#appeal .appeal-title{
  font-family:"Noto Serif JP",serif; font-weight:700;
  font-size:48px; line-height:1.3; letter-spacing:.12em;
  color:#524c49; margin:0 0 20px; word-break:keep-all; overflow-wrap:break-word;
}
#appeal .appeal-message{ margin:0 0 28px; }
#appeal .appeal-message p{
  font-family:"Noto Serif JP",serif; font-weight:700;
  font-size:24px; line-height:1.6; color:#6b6460; margin:0;
}
#appeal .appeal-button{
  display:inline-block; background:#4e7336; color:#fff;
  font-family:"Noto Serif JP",serif; font-weight:700; font-size:16px;
  padding:13px 38px; border-radius:6px; text-decoration:none;
  transition:opacity .2s;
}
#appeal .appeal-button:hover{ opacity:.88; color:#fff; }

/* ===== カテゴリ（コンテンツトップのボックスメニュー）をFigmaの6枚カードに ===== */
#content-top{ background:none; padding:0; }
#content-top .content-top-in{ max-width:1240px; margin:0 auto; padding:0 40px; }
#content-top .widget-content-top{ margin:36px 0; }
#content-top .box-menus{
  display:flex !important; flex-wrap:nowrap !important; gap:10px !important;
  justify-content:space-between !important; align-items:stretch !important;
}
#content-top .box-menu{
  flex:1 1 0 !important; width:auto !important; max-width:none !important; min-width:0; float:none !important;
  display:flex !important; flex-direction:column !important; align-items:center; justify-content:flex-start;
  gap:8px; background:#fff; border:1px solid #e0ddd1; border-radius:6px;
  padding:22px 10px; min-height:170px; text-align:center; text-decoration:none;
  color:#524c49; transition:transform .2s, box-shadow .2s;
}
#content-top .box-menu:hover{ transform:translateY(-3px); box-shadow:0 8px 14px rgba(0,0,0,.10); }
#content-top .box-menu-icon{ margin:6px 0 2px; line-height:1; }
#content-top .box-menu-icon .fas,
#content-top .box-menu-icon .far{ font-size:34px; color:#a99d8b; }
#content-top .box-menu-icon img{ width:48px; height:48px; object-fit:contain; display:block; margin: 0 !important;}
#content-top .box-menu-label{
  font-family:"Noto Serif JP",serif; font-weight:600; font-size:20px; color:#524c49;
}
#content-top .box-menu-description{
  font-size:14px; line-height:1.6; color:#7a726c;
}

@media screen and (min-width: 769px) {
  #content-top .box-menu-description {
	color: #524c49 !important;
    padding: 0 12px !important;
  }
}
/* ===== スマホ ===== */
@media screen and (max-width:768px){
  /* アピールエリア */
  #appeal.appeal{ min-height:340px; }
  #appeal .appeal-in{ padding:0; }
  #appeal .appeal-content{ max-width:none; transform:translateY(24px); }
  #appeal .appeal-title{ font-size:26px; letter-spacing:.06em; margin:0 0 14px; }
  #appeal .appeal-message{ margin:0 0 20px; }
  #appeal .appeal-message p{ font-size:15px; }
  #appeal .appeal-button{ font-size:14px; padding:10px 24px; }

  /* カテゴリ：3列に */
  #content-top .content-top-in{ padding:0 12px; }
  #content-top .box-menus{ flex-wrap:wrap !important; gap:6px !important; justify-content:flex-start !important; }
  #content-top .box-menu{ flex:0 0 calc((100% - 12px) / 3) !important; min-height:118px; padding:14px 6px; gap:6px; }
  #content-top .box-menu-icon .fas,
  #content-top .box-menu-icon .far{ font-size:26px; }
  #content-top .box-menu-icon img{ width:38px; height:38px; }
  #content-top .box-menu-label{ font-size:14px; }
  #content-top .box-menu-description{ font-size:14px; }
}

/* ===== Re-Self フッター ===== */
#footer-in.wrap {
  max-width: 100% !important;
  padding: 0 !important;
}

#footer .footer-widgets {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

#footer .footer-left,
#footer .footer-right {
  display: none !important;
}

#footer .footer-center {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

#footer .footer-center .widget {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rs-footer-wrap {
  padding: 0px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 47px;
}

.rs-footer-box {
  background: rgba(255, 255, 255, 0.66);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 31px 19px;
  width: 100%;
  text-align: center;
}

#footer .rs-footer-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 36px !important;
  color: #000;
  margin: 0;
}
.rs-footer-desc {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 20px;
  color: #000;
  line-height: 2;
  margin: 0;
}

.rs-footer-btn {
  display: inline-block;
  background: #4e7336;
  color: #fff !important;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 20px;
  padding: 10px 32px;
  width: 350px;
  text-align: center;
  text-decoration: none !important;
}

@media screen and (max-width: 768px) {
  .rs-footer-wrap {
    padding: 50px 12px;
  }
  .rs-footer-title {
    font-size: 24px !important;
  }
  .rs-footer-desc {
    font-size: 14px;
  }
  .rs-footer-btn {
    font-size: 15px;
    width: 276px;
    border-radius: 5px;
  }
}


/* ============================================================
   Re-Self デザイン調整 2026.06.05
   ============================================================ */

/* ===== ⓪ SP横スクロール防止 ===== */
@media screen and (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  /* カルーセル親がページ幅を広げないようにクリップ */
  .reself-pickwrap {
    overflow: hidden;
  }
  /* .reself-sec-bar のPC側padding(200px)をSPで確実に上書き */
  .reself-sec-bar {
    padding: 10px 40px !important;
    width: fit-content;
    max-width: calc(100% - 32px);
  }
}

/* ===== ① ヘッダー：ロゴリンクのpadding調整（Cocoon標準の0 80pxを縮小） ===== */
/* PC：上下32px 左右20px */
@media screen and (min-width: 769px) {
  #header-in.wrap {
    padding: 12px 40px !important;
  }
  #navi-in.wrap {
    padding: 4px 40px !important;
  }
  .site-name-text {
    font-size: 56px !important;
  }
  .site-name-text-link {
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* SP：flexで垂直中央揃えするので上下paddingは0に */
@media screen and (max-width: 768px) {
  .site-name-text-link {
    padding: 12px !important;
  }
}

/* ===== ① ヘッダー（PC）：余白のみ微調整・フォントはCocoon標準のまま ===== */
@media screen and (min-width: 769px) {
  #header-in.wrap {
    padding: 12px 40px !important;
  }
  #navi-in.wrap {
    padding: 4px 40px !important;
  }
}

/* ===== ① ヘッダー（SP）：ロゴ左＋ハンバーガー右・上余白詰め ===== */
@media screen and (max-width: 768px) {
  /* Cocoonのhlt-center-logoが持つ余分な高さをリセット */
  body #header-container,
  body #header-container-in {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }
  /* header と navi の親要素をflex横並びに・高さを56pxに固定
     ※ body を付けて詳細度を上げ、Cocoon側の padding:10px 0 !important を上書き */
  body #header-container-in {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
  }
  /* ロゴ（header）を左に・各層の高さを内容に合わせて縮める */
  #header {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0 !important;
    align-self: center;
  }
  #header-in.wrap {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  #header .logo.logo-header {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  .site-name-text-link {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
  }

  /* ナビ（ハンバーガー含む）を右に */
  #navi {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }
  #navi-in.wrap {
    padding: 0 !important;
  }
  /* PCメニューは非表示 */
  .menu-pc {
    display: none !important;
  }
  /* ファーストビュー上部の余白を詰める */
  #appeal.appeal {
    margin-top: 0 !important;
  }
  #appeal .appeal-content {
    transform: translateY(24px) !important;
    padding: 32px 20px !important;
  }
}

/* ===== ② カテゴリーメニュー（SP）：フォント大きく・省略なし・間隔を詰める ===== */
@media screen and (max-width: 768px) {
  /* ボックス全体：アイコン〜テキストの間隔を詰める */
  #content-top .box-menu {
    gap: 3px !important;
    padding: 10px 4px !important;
  }
  #content-top .box-menu-icon {
    margin: 0 !important;
  }
  /* ラベル：フォント大きく */
  #content-top .box-menu-label {
    font-size: 15px !important;
  }
  /* 説明文：省略をやめて折り返し・読める大きさに */
  #content-top .box-menu-description {
    font-size: 11px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: -.01em;
    padding: 0 !important;
    display: block;
    line-height: 1.4;
  }
	#content-top .box-menu-icon img {
  margin: 0 !important;
}
}
@media screen and (max-width: 768px) {
	.reself-cat-title {
    display: none !important;
  }
  ul.wp-block-categories-list {
    display: none !important;
  }
}
/* ===== ③ フォントサイズ全般 ===== */
/* PC：記事本文を大きく（17px） */
.entry-content p,
.entry-content li,
.entry-content dd,
.entry-content dt,
.article-body p {
  font-size: 17px;
  line-height: 2.0;
}
/* SP：本文を読みやすく（15px） */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .entry-content p,
  .entry-content li {
    font-size: 15px;
    line-height: 1.9;
  }

  .reself-pick-ql .reself-pick-lead,
  .reself-ql-title,
  .reself-ql-title a,
  .reself-dyn .popular-entry-card-title {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .reself-ql-date,
  .reself-dyn .popular-entry-card-date {
    font-size: 12px !important;
  }

  .reself-more a {
    font-size: 15px !important;
    padding: 10px 20px !important;
  }
}

.reself-sec-desc {
  text-align: center;
  font-size: 15px;
  color: #7a726c;
  line-height: 1.8;
  margin: -12px 0 24px;
}

@media screen and (max-width: 768px) {
  .reself-sec-desc {
    font-size: 14px;
    margin: -8px 0 20px;
    padding: 0 12px;
  }
}

/* ===== ⑤ セクション間の余白・背景色 ===== */
/* 編集部のおすすめ：薄いベージュ背景で区別 */
.reself-pickwrap.reself-wrap {
  background: #f9f7f4;
  padding: 32px 16px 40px;
}
.reself-dyn .wp-block-columns {
  gap: 48px;
}

.reself-dyn .wp-block-column {
  background: #fff;
}

@media screen and (max-width: 768px) {
  .reself-dyn .wp-block-columns {
    gap: 32px;
  }

  .reself-dyn .wp-block-column {
    padding-bottom: 24px;
  }

  .reself-dyn .wp-block-column + .wp-block-column {
    border-top: 1px solid #ece6da;
    padding-top: 28px;
  }
}
/* 最新・人気記事エリア */
/* 最新・人気記事エリア：全体の白背景は外す */
.reself-dyn.reself-wrap {
  padding-top: 40px;
  padding-bottom: 48px;
  background: transparent;
}
/* SP調整 */
@media screen and (max-width: 768px) {
  .reself-pickwrap.reself-wrap {
    padding: 20px 16px 24px;
  }
  .reself-dyn.reself-wrap {
    padding-top: 24px;
    padding-bottom: 32px;
  }
}

/* ===== PCサイドバー：カテゴリー装飾 ===== */
@media screen and (min-width: 769px) {
  .reself-side-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 0 36px;
  }

  .reself-side-cat-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    background: #524c49;
    color: #fff !important;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    text-decoration: none !important;
    border-radius: 2px;
    padding: 8px 10px;
    box-sizing: border-box;
    transition: opacity .2s, transform .2s;
  }

  .reself-side-cat-grid a:hover {
    opacity: .86;
    transform: translateY(-2px);
  }
}
/* ===== SPではサイドバーのカテゴリ装飾を非表示 ===== */
@media screen and (max-width: 768px) {
  .reself-side-cat-grid {
    display: none !important;
  }
}
/* ===== 人気記事：ランキング感を強くする ===== */
/* ===== 人気記事：ボックス全体 ===== */
.reself-popular-box {
  background: #f9f7f4;
  border: 1px solid #ece6da;
  border-radius: 10px;
  padding: 14px 16px 18px;
}

.reself-dyn .popular-entry-cards {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.reself-dyn .popular-entry-card-link {
  position: relative;
  border-bottom: 1px solid #e5ddd0;
  padding: 14px 0 !important;
}

.reself-dyn .popular-entry-card-link:last-child {
  border-bottom: none;
}

/* 人気記事の画像は小さめに */
.reself-dyn .popular-entry-card-thumb {
  flex: 0 0 76px;
  width: 76px;
  height: 48px;
}

/* 人気記事タイトル */
.reself-dyn .popular-entry-card-title {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* SPでは人気記事をコンパクトなランキングリストにする */
@media screen and (max-width: 768px) {
  .reself-popular-box {
    background: #f9f7f4;
    border: 1px solid #ece6da;
    border-radius: 10px;
    padding: 12px 14px 16px;
  }

  .reself-dyn .popular-entry-cards {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }

.reself-dyn .popular-entry-card-link {
  padding: 14px 0 !important;
}

  .reself-dyn .popular-entry-card {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .reself-dyn .popular-entry-card-thumb {
    flex: 0 0 82px !important;
    width: 82px !important;
    max-width: 82px !important;
    height: 52px !important;
    aspect-ratio: auto !important;
  }

  .reself-dyn .popular-entry-card-content {
    width: auto;
  }

  .reself-dyn .popular-entry-card-title {
    font-size: 14px !important;
  }
}

/* ===== カテゴリーメニュー：余白とアイコン下の間隔を調整 ===== */
#content-top .box-menu {
  justify-content: center !important;
  padding: 16px 10px !important;
  gap: 4px !important;
}

#content-top .box-menu-icon {
  margin: 0 !important;
  line-height: 1 !important;
}

#content-top .box-menu-icon img,
#content-top .box-menu-icon .fas,
#content-top .box-menu-icon .far {
  margin-bottom: 2px !important;
}

#content-top .box-menu-label {
  margin: 0 !important;
  line-height: 1.4 !important;
}

#content-top .box-menu-description {
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* ===== 人気記事：タイトルを3行固定・4行目以降は省略 ===== */
.reself-dyn .popular-entry-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  line-height: 1.5 !important;
  min-height: 4.5em;
  max-height: 4.5em;
}

/* 人気記事：各カードの高さをそろえやすくする */
.reself-dyn .popular-entry-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* SPでも人気記事タイトルを3行固定にする */
@media screen and (max-width: 768px) {
  .reself-dyn .popular-entry-card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    line-height: 1.5 !important;
    min-height: 4.5em;
    max-height: 4.5em;
  }
}

/* ===== 人気記事：画像とテキストを上下中央揃え ===== */
.reself-dyn .popular-entry-card {
  align-items: center !important;
}

/* 人気記事：画像自体も中央に配置 */
.reself-dyn .popular-entry-card-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 人気記事：タイトル・日付エリアを上下中央に */
.reself-dyn .popular-entry-card-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 人気記事：タイトルの余白を調整 */
.reself-dyn .popular-entry-card-title {
  margin: 0 0 6px !important;
}

/* ===== 人気記事：3行固定タイトル内の文字を中央寄せ ===== */
.reself-dyn .popular-entry-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  line-height: 1.5 !important;
  min-height: 4.5em;
  max-height: 4.5em;
  align-content: center;
}

/* ===== 人気記事ボックス内のもっと見るボタン ===== */
.reself-popular-box .reself-more {
  margin: 18px 0 0;
}

.reself-popular-box .reself-more a {
  background: #fff;
}

.reself-popular-box .reself-more a:hover {
  background: #524c49;
  color: #fff;
}

/* ===== カテゴリーメニュー：横余白を狭くする ===== */
#content-top .box-menu {
  padding: 16px 4px !important;
}

/* ===== サイドバー見出し：カテゴリー・人気記事の装飾調整 ===== */
.reself-dyn .reself-side-title {
  font-size: 24px !important;
  margin: 0 0 22px !important;
  text-align: center;
  letter-spacing: .06em;
}

.reself-dyn .reself-side-title::after {
  display: none !important;
}

.reself-dyn .reself-side-title i {
  color: #c9a24a;
  margin-right: 8px;
  font-size: 22px;
}

/* ===== 編集部のおすすめ：矢印を記事一覧エリアの中央に寄せる ===== */
.reself-pick-arrow {
  top: 62% !important;
  transform: translateY(-50%) !important;
}

@media screen and (max-width: 768px) {
  .reself-pick-arrow {
    top: 64% !important;
  }
}

/* ===== 最新記事・サイドバーを個別カード化 ===== */
@media screen and (min-width: 769px) {
  .reself-dyn > .wp-block-column {
    background: #fff;
    padding: 36px 32px;
    box-sizing: border-box;
  }

  .reself-dyn > .wp-block-column:first-child {
    border-radius: 0;
  }

  .reself-dyn > .wp-block-column:last-child {
    border-radius: 0;
  }
}
/* ===== SP：最新記事・サイドバーの白背景を上下左右に広げる ===== */
@media screen and (max-width: 768px) {
  .reself-dyn.reself-wrap {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 32px !important;
    padding-bottom: 36px !important;
  }

  .reself-dyn > .wp-block-column {
    padding: 36px 12px !important;
  }
}
/* ===== 編集部のおすすめ：背景を少し濃いベージュにする ===== */
.reself-pickwrap.reself-wrap {
  background: #f2ede8;
  padding: 36px 40px 42px;
  border-radius: 10px;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .reself-pickwrap.reself-wrap {
    background: #f2ede8;
    padding: 28px 16px 30px;
    border-radius: 0;
  }
}

/* ===== SP追従メニューバー：左ロゴ＋右ハンバーガー ===== */
@media screen and (max-width: 768px) {
  .mobile-menu-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
    padding: 0 18px !important;
    background: #fff !important;
  }

  .mobile-menu-buttons::before {
    content: "Re-Self:";
    display: block;
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 600;
    color: #524c49;
    letter-spacing: .04em;
  }

  .mobile-menu-buttons .menu-button {
    margin-left: auto !important;
  }

  .mobile-menu-buttons .menu-button > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #524c49 !important;
  }
}

/* ===== 編集部コラム：上下余白 ===== */
.reself-col-soon {
  padding: 60px 16px !important;
}
.reself-dyn .reself-side-title + * + .reself-side-title {
  margin-top: 40px !important;
}

/* ===== 編集部コラム（サイドバー）：サムネイルをサイドバー幅に合わせる ===== */
@media screen and (min-width: 769px) {
  .reself-dyn .wp-block-column .reself-ql-thumb {
    flex: 0 0 100px;
    width: 100px;
  }
}