@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; }
#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:12px; line-height:1.6; color:#7a726c;
}

/* ===== スマホ ===== */
@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:10px; }
}

/* ===== 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;
  }
}