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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.r45 h1, 
.r45 h2, 
.r45 h3 {
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ===== 45restart ナビ ===== */
.r45nav *, .r45nav *::before, .r45nav *::after { box-sizing: border-box; margin: 0; padding: 0; }
.r45nav a { text-decoration: none; color: inherit; }
.r45nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(249,245,240,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid #e2d8ce; font-family: 'Noto Sans JP', sans-serif; transition: box-shadow .3s; }
.r45nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.r45nav__inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px,4vw,48px); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.r45nav__brand { display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0; }
.r45nav__brand-name { font-family: 'Noto Serif JP', serif; font-size: clamp(16px,2vw,20px); font-weight: 700; color: #2a2420; }
.r45nav__brand-tagline { font-size: 10px; color: #7a6e67; font-weight: 300; margin-top: 1px; }
.r45nav__menu { display: flex; align-items: center; gap: clamp(16px,2.5vw,32px); list-style: none; }
.r45nav__menu a { font-size: clamp(12px,1.2vw,14px); font-weight: 500; color: #4a3f38; white-space: nowrap; position: relative; padding-bottom: 2px; transition: color .2s; }
.r45nav__menu a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 100%; height: 1.5px; background: #8c2e3a; transition: right .25s ease; }
.r45nav__menu a:hover { color: #8c2e3a; }
.r45nav__menu a:hover::after { right: 0; }
.r45nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; }
.r45nav__hamburger span { display: block; height: 2px; background: #2a2420; border-radius: 2px; transition: all .3s; }
.r45nav__drawer { display: none; flex-direction: column; background: #f9f5f0; border-top: 1px solid #e2d8ce; overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.r45nav__drawer.open { max-height: 400px; }
.r45nav__drawer a { display: block; padding: 14px clamp(16px,4vw,48px); font-size: 14px; font-weight: 500; color: #4a3f38; border-bottom: 1px solid #e2d8ce; transition: background .15s, color .15s; }
.r45nav__drawer a:hover { background: #f3ede5; color: #8c2e3a; }
.r45nav-spacer { height: 64px; }
@media (max-width: 680px) {
  .r45nav__menu { display: none; }
  .r45nav__hamburger { display: flex; }
  .r45nav__drawer { display: flex; }
}
/* Cocoonデフォルトヘッダーを非表示 */
#header {
  display: none !important;
}

/* スペーサー調整（管理バー分） */
.r45nav-spacer {
  height: 64px;
}
/* Cocoonデフォルトヘッダーを非表示 */
.header-container,
.header-container-in {
  display: none !important;
}
/* 管理バーの下にナビを配置 */
.r45nav { top: 32px; }

@media screen and (max-width: 782px) {
  .r45nav { top: 46px; }
}

/* スペーサーも管理バー分追加 */
.r45nav-spacer { height: calc(64px + 32px); }

@media screen and (max-width: 782px) {
  .r45nav-spacer { height: calc(64px + 46px); }
}
/* ナビ直下の余白を削除 */
.r45nav-spacer { height: 96px; }

@media screen and (max-width: 782px) {
  .r45nav-spacer { height: 110px; }
}
/* ナビ下の余白を消す */
#main, .content, .content-in {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* スペーサー調整（ここが原因） */
.r45nav-spacer {
  height: 64px;
}

/* 管理バーの下にナビを配置 *//* ===== 外側の白い箱を消す ===== */
#main,
.main,
.content,
.content-in {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* コンテナの余白も潰す */
#container {
  background: transparent !important;
  padding: 0 !important;
}

/* body背景をそのまま使う */
body {
  background: #f9f5f0 !important;
}
.r45 .hero__inner {
  padding: 64px 0;
}
body {
  margin-top: 0 !important;
}
.r45 .hero__inner {
  padding: 56px 0;
}
/* ===== ナビ位置（通常） ===== */
.r45nav {
  top: 0 !important;
}

/* 管理バーがある時だけ下げる */
body.admin-bar .r45nav {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .r45nav {
    top: 46px !important;
  }
}

/* ===== スペーサー（統一） ===== */
.r45nav-spacer {
  height: 64px !important;
}

/* 管理バー分だけ追加 */
body.admin-bar .r45nav-spacer {
  height: calc(64px + 32px) !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .r45nav-spacer {
    height: calc(64px + 46px) !important;
  }
}

/* ===== ヒーロー余白（これだけに統一） ===== */
.r45 .hero__inner {
  padding: 48px 0 !important;
}

/* ヒーロー外側も潰す */
.r45 .hero {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Cocoon余白完全リセット ===== */
#main,
.main,
.content,
.content-in,
#container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ===== ヒーロー上の余白を詰める ===== */
.r45 .hero__inner {
  padding-top: 24px !important; /* 数値小さくするとさらに詰まる */
  padding-bottom: 36px !important;
}

/* 見出し自体の上余白も削る */
.r45 .hero h1 {
  margin-top: 0 !important;
  line-height: 1.00;
}
.r45 h1,
.r45 h2,
.r45 h3,
.r45 .hero__lead,
.r45 .hero__sub-text {
  font-family: 'Zen Old Mincho', serif;
}
.single .entry-content {
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 768px) {
  .single .entry-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.single .entry-content {
  padding-left: 24px !important;
}
.single .entry-content h2 {
  background: #8E1728;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 6px;
  margin-top: 32px;
  margin-bottom: 16px;
  line-height: 1.4;
}
/* ===== 45restart トップページのセクション余白を詰める ===== */
.r45 .sec {
  padding: 24px 0 !important; /* ← 好きな数値に調整できる */
}

.r45 .sec-head {
  margin-bottom: 24px !important; /* 見出し下の余白も詰める */
}
.r45 .sec {
  padding: 24px 0 !important;
}
.r45 .sec-head {
  margin-bottom: 20px !important;
}
@media (max-width: 480px) {
  .r45 .sec {
    padding: 18px 0 !important;
  }
}
.r45 .career__inner {
  margin-bottom: 0 !important;
}
/* 著者プロフィールの2行の行間を詰める */
.r45 .author__list {
  gap: 0 !important;
}

.r45 .author__list-item {
  margin-bottom: 0 !important;
}
/* 著者プロフィールの2行を詰める（決定版） */
.r45 .author__list-item {
  align-items: center !important; /* ▸ と文字の高さを揃える */
  line-height: 1.3 !important;    /* 行の高さを詰める */
  gap: 4px !important;            /* ▸ と文字の距離を最小に */
}
/* 好きなことの見出しとボタンの配置調整 */
.r45 .author__body .topics__list {
  justify-content: center !important; /* ボタンを中央揃え */
  gap: 14px !important;               /* ボタン間の余白を最適化 */
}
/* Cocoon の本文下余白を完全に消す（決定版） */
.entry-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* プロフィールセクションの下余白を詰める */
.r45 section.sec {
  margin-bottom: 0 !important;
  padding-bottom: 16px !important;
}
/* 「好きなこと」の見出しを左寄せに */
.r45 .author__body .topics-label {
  text-align: left !important;
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--c-fg-muted);
}

/* ボタンのリストを左寄せにする */
.r45 .author__body .topics__list {
  justify-content: flex-start !important; /* 中央から左へ */
  gap: 8px !important;
}

/* ボタンが広がりすぎないように調整 */
.r45 .author__body .topic-pill {
  flex: 0 1 auto; /* 幅を中身に合わせる */
  padding: 8px 16px !important;
}

/* プロフィールボタンも左寄せ（スマホでも中央にしない場合） */
.r45 .author__body .btn--outline {
  display: inline-flex !important; /* inline-flexにして左に詰める */
  width: auto !important;
}

/* スマホ時も左寄せを維持する設定 */
@media (max-width: 768px) {
  .r45 .author__inner {
    align-items: flex-start !important; /* 全体を左に寄せる */
    text-align: left !important;
  }
  .r45 .author__list-item {
    justify-content: flex-start !important; /* リストの ▸ も左へ */
  }
}
/* ======================================================
   追加CSS：ヒーロー以外（見出し含む）をゴシック体に強制変更
   ====================================================== */

/* 1. 「このブログで読めること」以下のセクション見出しをゴシックに */
.r45 h2, 
.r45 .sec-head h2, 
.r45 .career__inner h2,
.r45 .author__body h3 {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* 2. 本文、プロフィール、カード、ボタン類をすべてゴシックに */
.r45 p, 
.r45 .dream-text, 
.r45 .author__desc, 
.r45 .author__list-item, 
.r45 .theme-card h3,
.r45 .theme-card p, 
.r45 .rec-card__summary,
.r45 .btn,
.r45 .topic-pill,
.r45 .latest-item__title,
.r45 .latest-item__date,
.entry-content p,
.entry-content li {
  font-family: "Noto Sans JP", sans-serif !important;
}

/* 3. 【逆に】ヒーローエリア（冒頭の語り）だけは明朝体を維持・強調 */
.r45 .hero h1, 
.r45 .hero__lead, 
.r45 .hero__lead p,
.r45 .hero__sub-text,
.r45 .hero__sub-text p {
  font-family: "Zen Old Mincho", serif !important;
  font-feature-settings: "palt" !important;
}

/* 4. キッチンカーの夢（dream-text）の読みやすさ微調整 */
.r45 .dream-text {
  font-size: 16px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
}
/* 文字の色を「真っ黒」から「優しい墨色」に変更 */
body, #main, .r45, .r45 p, .r45 h1, .r45 h2, .r45 .hero__lead, .r45 .hero__sub-text {
  color: #332f2d !important; /* 少し温かみのある深い茶色混じりの黒 */
}

/* 著者プロフィールなどの少し薄い文字も調整 */
.r45nav__brand-tagline, .r45 .author__desc {
  color: #5c544e !important;
}
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ======================================================
   トップページの全ボタンの色をメインボタンに合わせる
   ====================================================== */

/* 1. 枠線ボタンを塗りつぶしボタンに変更 */
.r45 .btn--outline {
    background: var(--c-primary) !important; /* メインと同じ赤茶色 */
    color: var(--c-white) !important;        /* 文字を白に */
    border: none !important;                 /* 枠線を消す */
    box-shadow: 0 4px 16px rgba(140,46,58,.25); /* メインと同じ影をつける */
}

/* 2. ホバー時の動作（少し明るくする） */
.r45 .btn--outline:hover {
    filter: brightness(1.1) !important;
    background: var(--c-primary) !important;
}

/* 3. ボタン内の矢印（svgアイコン）の色を白に固定 */
.r45 .btn--outline .icon {
    stroke: var(--c-white) !important;
}

/* 4. プロフィール下の趣味タグ（ミニベロ・競馬）も統一感を持たせる */
.r45 .topic-pill:hover {
    background: var(--c-primary) !important;
    color: var(--c-white) !important;
    border-color: var(--c-primary) !important;
}

.r45 .topic-pill:hover .icon {
    stroke: var(--c-white) !important;
}
/* さらに読みやすくするための微調整 */

.single .entry-content p {
    /* 行間をさらに広げる（1.9 → 2.1） */
    line-height: 2.1 !important; 
    
    /* 段落（。で終わる塊）の後の余白を倍近くに */
    margin-bottom: 2.8em !important; 
    
    /* 文字の間隔もわずかに広げて「黒さ」を逃がす */
    letter-spacing: 0.03em !important;
}

/* 箇条書きの間も広げる */
.single .entry-content ul li {
    margin-bottom: 1.2em !important;
}

/* スマホでは少しだけ調整（広すぎると感じない程度に） */
@media screen and (max-width: 480px) {
    .single .entry-content p {
        line-height: 2.0 !important;
        margin-bottom: 2.2em !important;
    }
}
.single .entry-content p {
    letter-spacing: 0.05em !important; /* 文字と文字の間をわずかに広げる */
}
.single .entry-content h2 {
    margin-top: 4em !important;    /* 上にドカンと余白を作る */
    margin-bottom: 1.5em !important; /* 下にも少し余白 */
}
.single .entry-content h3 {
    margin-top: 3em !important;
    margin-bottom: 1.2em !important;
    border-left: 4px solid #8E1728; /* 左に線を引くと「区切り」が明確になります */
    padding-left: 15px;
}
/* ======================================================
   引用（blockquote）：赤みを微細に含んだ「極上の白」
   ====================================================== */
.single .entry-content blockquote {
    /* 1. 白さを際立たせつつ、背景と喧嘩しない「薄い赤の隠し味」 */
    background: rgba(255, 252, 252, 0.9) !important;
    
    /* 2. 左の線を消し、四方を均等に囲う（早稲田レッドを10%だけ混ぜた色） */
    border: 1px solid rgba(142, 23, 40, 0.1) !important;
    border-left: 1px solid rgba(142, 23, 40, 0.1) !important; /* H3のような太線はなし */

    /* 3. 余白をたっぷりとって、文字に「白」を感じさせる */
    padding: 40px !important;
    margin: 56px 0 !important;
    border-radius: 8px; /* 角を少し丸めることで、モダンな印象に */
    
    /* 4. 影を少し強めて、白さを「浮かせて」強調する */
    box-shadow: 0 10px 30px rgba(142, 23, 40, 0.05) !important;
    
    position: relative;
}

/* 引用内の文字：白バックに映える配置 */
.single .entry-content blockquote p {
    color: #332f2d !important;
    font-size: 16px !important;
    line-height: 2.1 !important;
    text-align: justify; /* 両端を揃えると、箱としての美しさが上がります */
    margin-bottom: 0 !important;
}

/* 複数段落の場合の余白 */
.single .entry-content blockquote p:not(:last-child) {
    margin-bottom: 1.8em !important;
}
.r45 .topic-pill:hover {