/*
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.0
*/

/* ================================================
   1. Cocoon標準パーツの非表示・調整
   ================================================ */
.site-name, .site-name-text-link { display: none !important; }
#header-container, .header-container { display: none !important; }
#navi, .navi, #navi-in { display: none !important; }
#footer-widget-area { display: none !important; }
.footer-bottom { display: none !important; }
#mobile-footer-buttons,
.mobile-footer-buttons { display: none !important; }
/* パンくず: 記事ページ以外は非表示 */
body:not(.single) .breadcrumb { display: none !important; }
body { background-color: #ffffff !important; }
body.home #main { padding: 0 !important; margin: 0 !important; }
body.home #wrap { padding: 0 !important; }
body.home .toc,
body.home #toc,
body.home .toc-container { display: none !important; }

/* ================================================
   2. 記事ページ
   ================================================ */
.article-card,
.single .article-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.single .article {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.single #main,
.single .main,
.single .content-in {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.single .site-header,
.single .sidebar,
.single nav.bottom-nav { display: none !important; }
.art-meta-avatar { display: none !important; }
.entry-content h2,
.entry-content h3 { margin-bottom: 1.5em !important; }
.entry-content p { margin-bottom: 1.8em !important; }
.speech-wrap {
  margin-top: 2em !important;
  margin-bottom: 2.5em !important;
}

/* ================================================
   3. 記事一覧（カテゴリー・タグ・/blog/・検索結果）
   ================================================ */
body.archive #sidebar,
body.category #sidebar,
body.tag #sidebar,
body.blog #sidebar,
body.search #sidebar { display: none !important; }
body.archive #main,
body.category #main,
body.tag #main,
body.blog #main,
body.search #main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
}
body.archive .content-in,
body.category .content-in,
body.tag .content-in,
body.blog .content-in,
body.search .content-in { display: block !important; }
/* カード外枠 */
html body.archive .entry-card-wrap,
html body.category .entry-card-wrap,
html body.tag .entry-card-wrap,
html body.blog .entry-card-wrap,
html body.search .entry-card-wrap {
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #eee !important;
  overflow: visible !important;
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
}
/* カード本体: 左サムネ + 右タイトル */
html body.archive article.entry-card,
html body.category article.entry-card,
html body.tag article.entry-card,
html body.blog article.entry-card,
html body.search article.entry-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}
/* サムネイル: PCは220px固定・高さ自動で全体表示 */
html body.archive figure.entry-card-thumb,
html body.category figure.entry-card-thumb,
html body.tag figure.entry-card-thumb,
html body.blog figure.entry-card-thumb,
html body.search figure.entry-card-thumb {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  display: block !important;
  background: none !important;
  align-self: center !important;
}
html body.archive figure.entry-card-thumb img,
html body.category figure.entry-card-thumb img,
html body.tag figure.entry-card-thumb img,
html body.blog figure.entry-card-thumb img,
html body.search figure.entry-card-thumb img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 6px !important;
  display: block !important;
}
html body.archive .entry-card-content,
html body.category .entry-card-content,
html body.tag .entry-card-content,
html body.blog .entry-card-content,
html body.search .entry-card-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html body.archive .entry-card-title,
html body.category .entry-card-title,
html body.tag .entry-card-title,
html body.blog .entry-card-title,
html body.search .entry-card-title {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #222 !important;
  line-height: 1.6 !important;
  padding-left: 0 !important;
}
body.archive .entry-card-snippet,
body.archive .entry-card-meta,
body.archive .cat-label,
body.category .entry-card-snippet,
body.category .entry-card-meta,
body.category .cat-label,
body.tag .entry-card-snippet,
body.tag .entry-card-meta,
body.tag .cat-label,
body.blog .entry-card-snippet,
body.blog .entry-card-meta,
body.blog .cat-label,
body.search .entry-card-snippet,
body.search .entry-card-meta,
body.search .cat-label { display: none !important; }
/* 記事一覧カード（共通） */
.entry-card .entry-title {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.entry-card .entry-card-meta { display: none !important; }
.entry-card .entry-card-snippet { display: none !important; }

/* ================================================
   4. 記事下の関連記事ブロック
   ================================================ */
.asukun-related-posts { margin: 40px 0 20px; padding: 0; }
.asukun-related-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  border: none;
  margin: 0 0 12px;
  padding: 0;
  background: none;
}
.asukun-related-title a { color: #2d9e4e; text-decoration: none; }
.asukun-related-title a:hover { text-decoration: underline; }
.asukun-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.asukun-related-card {
  display: block;
  text-decoration: none;
  color: #333;
  border: none;
}
.asukun-related-card:hover .asukun-related-card-title { color: #2d9e4e; }
.asukun-related-thumb {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  background: #eee;
}
.asukun-related-thumb img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.asukun-related-noimg { width: 100%; height: 100%; background: #ddd; }
.asukun-related-card-title {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 4px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.asukun-related-date { font-size: 12px; color: #888; }

/* ================================================
   5. 記事ページ右上の検索アイコン
   ================================================ */
.header-search-wrap {
  position: fixed;
  right: 20px;
  top: 16px;
  z-index: 9999;
}
.header-search-toggle {
  background: #fff;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
  color: #1a6bb5;
  line-height: 1;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.header-search-toggle:hover { opacity: 0.8; }
.header-search-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 300px;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.header-search-wrap.is-open .header-search-panel { display: block; }
.header-search-panel .search-box { margin: 0; }

/* ================================================
   6. トップページ（asu-）
   ================================================ */
:root{
  --paper:#FBF5E9;
  --paper-deep:#F6EEDD;
  --card:#FFFFFF;
  --ink:#4A3426;
  --ink-soft:#6B5442;
  --red:#D9342B;
  --red-deep:#BF0000;
  --green:#7BA05B;
  --green-deep:#5E8442;
  --gold:#F0A81C;
  --pink-card:#FBE4E0;
  --blue-card:#DDEBF8;
  --green-card:#E9F0DF;
  --line:#EAD9BE;
}
.asu-home, .asu-home *{box-sizing:border-box;margin:0;padding:0;}
.asu-home{
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 0% 8%,  rgba(139,178,101,.20), transparent 26%),
    radial-gradient(circle at 100% 4%, rgba(139,178,101,.22), transparent 24%),
    radial-gradient(circle at 0% 55%, rgba(240,168,28,.10), transparent 22%),
    radial-gradient(circle at 100% 70%, rgba(139,178,101,.16), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(139,178,101,.14), transparent 30%),
    var(--paper);
  line-height:1.7;
}
.asu-wrap{max-width:1020px;margin:0 auto;padding:0 18px 0;}
.asu-wrap > .asu-sec-title:first-child{margin-top:16px;}
.asu-home a{color:inherit;text-decoration:none;}
.asu-home img{max-width:100%;display:block;}

/* --- セクション見出し --- */
.asu-sec-title{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:clamp(19px,2.6vw,25px);font-weight:900;color:var(--ink);
  margin:56px 0 24px;letter-spacing:.04em;
}
.asu-sec-title .leaf{color:var(--green);display:inline-flex;transform:rotate(-12deg);}
.asu-sec-title .leaf:last-child{transform:rotate(12deg) scaleX(-1);}

/* --- ヘッダー（バナー＋メニュー＋検索窓） --- */
.asu-header{position:relative;}
.asu-header .banner{
  width:100%;display:block;
  max-height:320px;object-fit:cover;object-position:center;
}
.asu-header-bar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
}
.asu-header-search{
  margin-left:auto;display:flex;align-items:center;flex-shrink:0;
  background:rgba(255,255,255,.92);border:2px solid var(--line);border-radius:999px;overflow:hidden;
  box-shadow:0 2px 8px rgba(74,52,38,.10);
  width:min(240px,50vw);
}
.asu-header-search input{
  flex-grow:1;min-width:0;border:0;outline:0;padding:7px 12px;font-size:12.5px;
  font-family:inherit;color:var(--ink);background:transparent;
}
.asu-header-search button{
  border:0;background:var(--red);color:#fff;padding:7px 12px;cursor:pointer;display:flex;align-items:center;
}
.asu-header-search button svg{width:14px;height:14px;}

/* --- ハンバーガーメニュー --- */
.asu-menu-check{display:none;}
.asu-menu-btn{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:12px 11px;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.92);border:2px solid var(--line);border-radius:12px;
  box-shadow:0 2px 8px rgba(74,52,38,.10);
  transition:border-color .15s ease;
}
.asu-menu-btn:hover{border-color:var(--red);}
.asu-menu-btn span{
  display:block;height:3px;border-radius:3px;background:var(--ink);
}
.asu-menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9998;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.asu-menu-drawer{
  position:fixed;top:0;left:0;bottom:0;width:260px;max-width:80vw;z-index:9999;
  background:#fff;box-shadow:4px 0 20px rgba(74,52,38,.2);
  padding:24px 0;display:flex;flex-direction:column;
  transform:translateX(-105%);transition:transform .25s ease;
  overflow-y:auto;
}
.asu-menu-title{
  font-size:13px;font-weight:900;color:var(--ink-soft);
  padding:0 20px 12px;border-bottom:2px solid var(--line);margin-bottom:6px;
  letter-spacing:.08em;
}
.asu-menu-drawer a{
  display:block;padding:14px 20px;font-size:14.5px;font-weight:700;color:var(--ink);
  border-bottom:1px solid #f2ecdf;
}
.asu-menu-drawer a:hover{background:var(--paper);color:var(--red);}
.asu-menu-check:checked ~ .asu-menu-overlay{opacity:1;pointer-events:auto;}
.asu-menu-check:checked ~ .asu-menu-drawer{transform:translateX(0);}

/* --- ヒーロー画像 --- */
.asu-hero-full{margin-top:4px;}
.asu-hero-full img{width:100%;display:block;}

/* --- 共通ボタン --- */
.asu-btn{
  align-self:center;display:inline-flex;align-items:center;gap:6px;
  background:var(--red);color:#fff;font-weight:900;font-size:14.5px;
  padding:11px 30px;border-radius:999px;letter-spacing:.06em;
  box-shadow:0 4px 0 #A82019;transition:transform .15s ease, box-shadow .15s ease;
}
.asu-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 #A82019;}
.asu-btn::after{content:"\203A";font-size:18px;line-height:1;}

/* --- まずは基本（アイキャッチ付き2カード） --- */
.asu-basic{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  max-width:760px;margin:0 auto;align-items:stretch;
}
.asu-basic-card{
  background:var(--card);border-radius:20px;padding:0;overflow:hidden;
  box-shadow:0 6px 18px rgba(74,52,38,.08);
  display:flex;flex-direction:column;height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.asu-basic-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(74,52,38,.14);}
.asu-basic-card .thumb{
  width:100%;height:auto;aspect-ratio:1.91/1;
  object-fit:contain;background:var(--paper-deep);
  display:block;flex-shrink:0;
}
.asu-basic-body{
  padding:18px 20px 22px;
  display:flex;flex-direction:column;gap:10px;flex-grow:1;
}
.asu-basic-body h3{font-size:16.5px;font-weight:900;line-height:1.4;}
.asu-basic-body p{font-size:13.5px;font-weight:500;color:var(--ink-soft);flex-grow:1;}
.asu-basic-body .asu-btn{margin-top:auto;align-self:center;}

/* --- カテゴリーカード --- */
.asu-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.asu-cat-card{
  border-radius:20px;padding:22px 16px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:center;
  transition:transform .2s ease;
}
.asu-cat-card:hover{transform:translateY(-4px);}
.asu-cat-card h3{font-size:16.5px;font-weight:900;}
.asu-cat-card p{font-size:12.8px;font-weight:700;color:var(--ink-soft);}
.cat-rakuten{background:var(--pink-card);}
.cat-yahoo{background:#FCEFC0;}
.cat-wel{background:#D8E2F5;}
.cat-amazon{background:#FDEBD7;}

/* --- 記事カード（新着・人気） --- */
.asu-posts-head{display:flex;align-items:center;justify-content:space-between;margin:56px 0 20px;}
.asu-posts-head h2{display:flex;align-items:center;gap:10px;font-size:clamp(19px,2.6vw,24px);font-weight:900;}
.asu-posts-head .mark{display:inline-flex;}
.asu-posts-head .more{font-size:13px;font-weight:900;color:var(--red);}
.asu-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.asu-card{
  background:var(--card);border-radius:18px;overflow:hidden;
  box-shadow:0 6px 18px rgba(74,52,38,.08);
  display:flex;flex-direction:column;position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.asu-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(74,52,38,.15);}
.asu-card .thumb{
  width:100%;height:auto;aspect-ratio:1.91/1;
  object-fit:contain;background:var(--paper-deep);display:block;
}
.asu-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex-grow:1;}
.asu-card .title{font-size:13.5px;font-weight:700;line-height:1.55;}
.asu-card:hover .title{color:var(--red);}
.asu-card .meta{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--ink-soft);
}
.asu-badge{
  position:absolute;top:10px;left:10px;color:#fff;font-weight:900;
  border-radius:999px;padding:4px 12px;font-size:12.5px;
  box-shadow:0 3px 8px rgba(74,52,38,.25);
}
.badge-new{background:var(--red);}
.badge-rank1{background:var(--gold);}
.badge-rank2{background:#A99C88;}
.badge-rank3{background:#C98A5B;}
.badge-rank4{background:#8FA3B8;}
.asu-cat-tag{
  display:inline-block;background:#D8E2F5;color:#1D3F8F;
  border-radius:6px;padding:1px 8px;font-size:11.5px;font-weight:900;
}
.asu-cat-tag.tag-rakuten{background:var(--pink-card);color:var(--red-deep);}
.asu-cat-tag.tag-yahoo{background:#FCEFC0;color:#8A6D00;}
.asu-cat-tag.tag-wel{background:#D8E2F5;color:#1D3F8F;}
.asu-cat-tag.tag-amazon{background:#FDEBD7;color:#C2620A;}

/* --- プロフィール --- */
.asu-author{
  margin-top:56px;display:flex;gap:20px;align-items:flex-start;
  background:rgba(255,255,255,.65);border-radius:20px;padding:26px;
  border:1px solid rgba(234,217,190,.8);
}
.asu-author img{width:86px;height:86px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 10px rgba(74,52,38,.15);}
.asu-author .name{font-size:18px;font-weight:900;color:var(--red);text-decoration:underline;text-underline-offset:4px;}
.asu-author p{font-size:14px;font-weight:500;margin-top:8px;color:var(--ink-soft);}
.asu-author .sns{display:flex;gap:16px;margin-top:12px;}
.asu-author .sns a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--ink);}
.asu-author .sns a:hover{border-color:var(--red);color:var(--red);}
.asu-author-bubble{
  margin-left:auto;flex-shrink:0;background:#fff;border-radius:16px;padding:10px 16px;
  font-size:13px;font-weight:700;box-shadow:0 4px 12px rgba(74,52,38,.12);align-self:center;
  text-align:center;line-height:1.6;
}

/* --- フッター（ピルボタンナビ） --- */
.asu-footer{
  margin-top:52px;background:rgba(255,255,255,.75);
  border-top:1px solid var(--line);padding:22px 18px 30px;
}
.asu-footer-in{max-width:1020px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:center;}
.asu-footer-nav{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:12px;font-weight:700;}
.asu-footer-nav a{
  display:inline-flex;align-items:center;
  background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:8px 18px;font-size:13px;font-weight:900;color:var(--ink);
  box-shadow:0 2px 6px rgba(74,52,38,.08);
  transition:border-color .15s ease, color .15s ease;
}
.asu-footer-nav a:hover{border-color:var(--red);color:var(--red);}
.asu-footer .site{font-size:13px;font-weight:900;color:var(--ink-soft);}

/* ================================================
   7. レスポンシブ（スマホ・タブレット）
   ================================================ */
@media (max-width:820px){
  /* ヘッダー: メニュー・検索をバナーの上の帯に */
  .asu-header-bar{position:static;background:#FBF5E9;padding:10px 12px;}
  /* まずは基本 */
  .asu-basic{grid-template-columns:1fr 1fr;gap:12px;}
  .asu-basic-body{padding:12px 12px 16px;gap:6px;}
  .asu-basic-body h3{font-size:14px;line-height:1.4;}
  .asu-basic-body p{font-size:11.5px;}
  .asu-basic-body .asu-btn{font-size:12px;padding:9px 18px;}
  /* カテゴリー */
  .asu-cats{grid-template-columns:1fr 1fr;gap:12px;}
  .asu-cat-card{padding:16px 10px 14px;}
  .asu-cat-card h3{font-size:14.5px;}
  .asu-cat-card p{font-size:11.5px;}
  /* 記事カード */
  .asu-card-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .asu-card-body{padding:10px 12px 12px;}
  .asu-card .title{font-size:12.5px;}
  .asu-card{height:100%;}
  .asu-card .meta{
    font-size:11px;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }
  .asu-badge{font-size:11px;padding:3px 10px;}
  /* プロフィール */
  .asu-author{flex-direction:column;align-items:center;text-align:center;}
  .asu-author .sns{justify-content:center;}
  .asu-author-bubble{margin-left:0;}
  /* フッター: 2x2グリッド */
  .asu-footer-nav{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    width:100%;max-width:420px;margin:0 auto;
  }
  .asu-footer-nav a{
    justify-content:center;text-align:center;
    font-size:12px;padding:9px 8px;white-space:nowrap;
  }
}
@media (max-width:640px){
  /* バナー高さ */
  .asu-header .banner{max-height:120px;}
  /* メニューボタン */
  .asu-menu-btn{width:42px;height:42px;padding:11px 10px;gap:4px;}
  /* 一覧ページのサムネイル: 画面幅の36% */
  html body.archive article.entry-card,
  html body.category article.entry-card,
  html body.tag article.entry-card,
  html body.blog article.entry-card,
  html body.search article.entry-card{gap:12px !important;}
  html body.archive figure.entry-card-thumb,
  html body.category figure.entry-card-thumb,
  html body.tag figure.entry-card-thumb,
  html body.blog figure.entry-card-thumb,
  html body.search figure.entry-card-thumb{
    flex:0 0 36% !important;
    width:36% !important;
    min-width:36% !important;
    max-width:36% !important;
  }
  html body.archive .entry-card-title,
  html body.category .entry-card-title,
  html body.tag .entry-card-title,
  html body.blog .entry-card-title,
  html body.search .entry-card-title{
    font-size:15.5px !important;
    line-height:1.55 !important;
  }
  /* 記事ページ右上の検索アイコン */
  .header-search-wrap{right:12px;top:12px;}
  .header-search-panel{width:260px;}
}
@media (prefers-reduced-motion:reduce){
  .asu-basic-card,.asu-cat-card,.asu-card,.asu-btn{transition:none;}
}