@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon子テーマ（Mplus 1p / Minimal Headings）- Soft Nordic
Template: cocoon-master
Version: 1.5.0
*/

/* ===============================
   Palette（淡く優しい北欧×ミニマル）
   ※Cocoon設定のキーカラーとも整合
=============================== */
:root{
  --ink:#2F2A2A;           /* 本文 */
  --taupe:#5F5860;         /* 見出し文字（モーブグレー） */

  /* アクセント（淡いローズ） */
  --accent:#E6CCD3;        /* 主要アクセント（淡く） */
  --accent-ink:#6B5F63;    /* アクセント上の文字（優しい濃色） */

  /* ライン・面 */
  --line:#EEE7E6;          /* 極薄ボーダー */
  --line-strong:#E4DCDD;   /* 下線（うっすら） */
  --soft:#FAF7F8;          /* 超うすい面（必要時のみ） */

  /* ナビ・フッター（白基調） */
  --nav-bg:#FFFFFF;
  --nav-fg:#6B5F63;
  --footer-bg:#F6F2F3;
  --footer-fg:#5C5456;
}

/* ===============================
   Base
=============================== */
html,body{
  color:var(--ink);
  font-family:"Mplus 1p","M PLUS 1p","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

a{ color:var(--nav-fg); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* 「全幅化」は思想サイトの整った余白を壊すので解除
.home .wrap{ width:100%; }
*/

/* 全体の影は消して、余白で上質に */
#header-container,
#header,
#navi{
  box-shadow:none !important;
}

/* ===============================
   Navigation（白基調・軽い線のみ）
=============================== */
#navi{ background:var(--nav-bg); }
.navi-in a{ font-size:15px; color:var(--nav-fg); letter-spacing:.02em; }
#navi .navi-in a:hover{ transform:none !important; text-decoration:underline; }

/* 枠線の主張を減らす */
.navi-in>ul li{
  line-height:40px; height:40px;
  border-right:none;
  border-left:none;
}
#navi .navi-in>ul li+li{ border-left:none; }

/* サブメニュー：影を弱めて上品に */
.sub-menu{
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  border:1px solid var(--line);
  background:#fff;
}
.sub-menu .caption-wrap{
  color:var(--nav-fg);
  border-top:dotted 1px var(--line);
  background:#fff;
  padding:0 0 0 2em;
  margin:0;
}
.navi-in>ul .sub-menu a{ padding:0; }

.item-label{ font-weight:700; }

/* ===============================
   Page Title / Woo / Gallery / Cards / Tiles
=============================== */
.page #main .entry-title{ display:none; }

/* WooCommerce（既存維持） */
.woocommerce .col2-set .col-1,.woocommerce-page .col2-set .col-1{ float:left; width:48%; max-width:100%; }
.woocommerce .col2-set .col-2,.woocommerce-page .col2-set .col-2{ float:right; width:48%; max-width:100%; }
.woocommerce-input-wrapper{ display:block; width:100%; }

/* Gallery（既存をややソフトに） */
.gallery{ width:101%; overflow:hidden; }
.gallery br{ display:none; }
.gallery-item{ margin-bottom:6px !important; }
.gallery-icon img{ width:100%; height:auto; border-radius:12px; }
.gallery-caption{
  color:var(--nav-fg) !important; font-size:14px !important;
  margin-top:-4px !important; margin-bottom:6px !important;
}
.gallery-columns-2 .gallery-item{ width:48%; margin:0 5px; }
.gallery-columns-3 .gallery-item{ width:31.8%; margin:0 5px; }
.gallery-columns-8 .gallery-item{ width:120px; margin:0 1.5px; }
.gallery-columns-8 .gallery-caption{ color:var(--nav-fg) !important; font-size:13px !important; margin-top:-4px !important; }

@media (max-width:640px){
  .gallery-columns-3 .gallery-item{ width:48%; margin:0 5px; }
}

@media (max-width:480px){
  .archives-list.card-list .post-list{ width:calc(50% - .5em); }
  .archives-list.card-list a{ padding:.5em; border-radius:14px; border:1px solid var(--line); }
  .archives-list.card-list a .eyecatch{ margin:-.5em -.5em .5em; border-radius:14px 14px 0 0; overflow:hidden; }
  .archives-list.card-list a .entry-title{ font-size:85%; }
}

/* Tiles（既存維持＋角丸） */
.page-tiles{ display:grid; gap:12px; }
.page-tiles.cols-2{ grid-template-columns:repeat(2,1fr); }
.page-tiles.cols-3{ grid-template-columns:repeat(3,1fr); }

.page-tile{
  position:relative;
  display:block;
  overflow:hidden;
  background:#eee;
  border-radius:16px;
  border:1px solid var(--line);
  aspect-ratio: var(--tile-ratio,1.6)/1;
}
.page-tile__img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.92;
}
.page-tile__img--noimg{
  display:flex; align-items:center; justify-content:center; opacity:.35;
}
.page-tile__name{
  position:absolute; left:0; right:0; bottom:0; padding:8px 10px;
  color:#fff; font-size:.85rem; font-weight:400; letter-spacing:.03em; line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0));
}

/* =========================================================
   RESET：Cocoon/Gutenbergの見出し装飾を無効化
========================================================= */
.entry-content .wp-block-heading[class*="is-style-"],
.entry-content h2, .entry-content h3, .entry-content h4,
.article .entry-content h2, .article .entry-content h3, .article .entry-content h4,
article .entry-content h2, article .entry-content h3, article .entry-content h4{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  color:inherit !important;
}

/* =========================================================
   NEW Headings（Soft Minimal）
========================================================= */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4{
  font-family:"Mplus 1p","M PLUS 1p","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  color:var(--taupe) !important;
  letter-spacing:.02em;
  line-height:1.38;
  margin:2.0em 0 .9em !important;
}

/* ===============================
   Headings：Soft Reading Style
   樹種解説・長文向けに「余白で語る」設計
=============================== */

/* H1：センター＋極細下線（変更ほぼなし） */
.entry-content h1{
  text-align:center;
  font-weight:700;
  font-size:clamp(1.7rem,1.35rem + 1.2vw,2.1rem);
  margin:3.2em 0 1.6em;
  padding-bottom:.45em;
  border-bottom:1px solid var(--line);
}

/* H2：章見出し（主張を弱め、余白を主役に） */
.entry-content h2{
  font-weight:600; /* 700 → 600 */
  font-size:clamp(1.35rem,1.05rem + 1.0vw,1.75rem);
  line-height:1.55;
  margin:3.8em 0 1.4em;   /* 上をしっかり空ける */
  padding-bottom:.45em;
  border-bottom:1px solid var(--line); /* 強い線をやめる */
}

/* H3：説明用見出し（装飾をほぼ排除） */
.entry-content h3{
  font-weight:600;
  font-size:clamp(1.15rem,1.00rem + 0.6vw,1.35rem);
  line-height:1.6;
  margin:2.6em 0 .8em;
  padding-left:0;          /* 左線を撤廃 */
  border-left:none;
}

/* H4：補足レベル（ほぼ本文扱い） */
.entry-content h4{
  font-weight:600;
  font-size:1.05rem;
  line-height:1.6;
  margin:2.0em 0 .6em;
  padding-bottom:.25em;
  border-bottom:1px dotted var(--line);
}

/* 見出し直後の段落に“呼吸”を入れる */
.entry-content h2 + p,
.entry-content h3 + p,
.entry-content h4 + p{
  margin-top:.65em;
}

/* 見出し内リンク（変化なし・静か） */
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted transparent;
}
.entry-content h2 a:hover,
.entry-content h3 a:hover,
.entry-content h4 a:hover{
  border-bottom-color:currentColor;
}


/* CTAだけ“うっすら面”で出したい場合の補助（任意） */
.has-eco-soft-bg{ background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:18px; }

/* ===============================
   Footer（淡い面）
=============================== */
#footer,
.footer,
.footer-bottom{
  background:var(--footer-bg);
  color:var(--footer-fg);
}
#footer a,
.footer a,
.footer-bottom a{
  color:var(--nav-fg);
}
#footer a:hover,
.footer a:hover,
.footer-bottom a:hover{
  text-decoration:underline;
}

/* ===============================
   Mobile ≤600px（余白は少し残す）
=============================== */
@media (max-width:600px){

  body,
  .entry-content{
    font-size:.975rem;
    line-height:1.7;
  }

  .entry-content p{
    margin:.6em 0 .9em;
  }

  /* ラップ・メインカラムをフル幅に */
  .wrap,
  #container,
  .content,
  #main{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* 本文だけ最低限の余白を残す（やりすぎない） */
  .entry-content{
    padding-left:10px;
    padding-right:10px;
  }

  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4{
    margin:1.8em 0 .85em !important;
  }

  .entry-content h1{
    font-size:clamp(1.45rem,1.15rem + 1.5vw,1.65rem);
  }
  .entry-content h2{
    font-size:clamp(1.30rem,1.10rem + 1.0vw,1.40rem);
  }
  .entry-content h3{
    font-size:clamp(1.15rem,1.00rem + 0.7vw,1.20rem);
  }
  .entry-content h4{
    font-size:clamp(1.05rem,.98rem + .4vw,1.10rem);
  }

  .wp-block-button__link,
  a.button,
  .button,
  .btn{
    min-height:44px;
    font-size:1rem;
  }
}
.ec-posts-grid{display:grid;gap:16px}
.ec-cols-1{grid-template-columns:1fr}
.ec-cols-2{grid-template-columns:repeat(2,1fr)}
.ec-cols-3{grid-template-columns:repeat(3,1fr)}
.ec-cols-4{grid-template-columns:repeat(4,1fr)}
.ec-post-card{background:#fff;border-radius:10px;overflow:hidden}
.ec-post-thumb img{width:100%;height:auto;display:block}
.ec-no-thumb{display:block;width:100%;padding-top:56%;background:#eee}
.ec-post-body{padding:10px 12px}
.ec-post-title{text-decoration:none;font-weight:600;line-height:1.4;display:block}
@media(max-width:768px){.ec-cols-4,.ec-cols-3,.ec-cols-2{grid-template-columns:1fr}}

/* トップページ：H3をカード見出しとして弱める */
.home h3 {
  font-size: 1.05em;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.3em;
  border: none;
  background: none;
  color: #222222;
}