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

/* =======================================================================
   TENRIKYO Lab リニューアル スタイル
   ・トークン（/db 由来）＝配色の単一ソース
   ・PART A：トップページ（.tl-scope 配下）
   ・PART B：全ページ共通の /db 風レイヤー（Cocoon既定の上書き）
   ======================================================================= */

:root{
  --tl-bg:#f7f8fa; --tl-surface:#fff; --tl-surface-2:#fcfcfd;
  --tl-ink:#0f172a; --tl-ink-2:#334155; --tl-muted:#64748b; --tl-faint:#94a3b8;
  --tl-line:#e6e9ee; --tl-line-2:#d7dce3;
  --tl-accent:#ac4f59; --tl-accent-d:#8f3f49; --tl-accent-soft:#fbeef0; --tl-accent-line:#e7c3c8;
  --tl-radius:14px; --tl-pad:20px; --tl-browse:1120px; --tl-read:760px;
  --tl-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* =======================================================================
   PART A ── トップページ（.tl-scope 配下に限定）
   ======================================================================= */
.tl-scope{color:var(--tl-ink);line-height:1.75;letter-spacing:.01em;font-family:var(--tl-sans)}
.tl-scope *{box-sizing:border-box}
.tl-scope a{color:inherit;text-decoration:none}
.tl-scope img{display:block;max-width:100%}
.tl-scope .tl-wrap{width:100%;max-width:var(--tl-browse);margin:0 auto;padding:0 var(--tl-pad)}
.tl-scope svg{display:block}

/* Hero */
.tl-scope .tl-hero{text-align:center;padding:48px 0 32px}
.tl-scope .tl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tl-accent)}
.tl-scope .tl-eyebrow::before,.tl-scope .tl-eyebrow::after{content:"";width:22px;height:1px;background:var(--tl-accent-line)}
.tl-scope .tl-hero h1{font-weight:700;font-size:23px;line-height:1.5;letter-spacing:.03em;margin:16px 0 12px;color:#141b2d;border:0}
.tl-scope .tl-hero h1 em{font-style:normal;color:var(--tl-accent)}
.tl-scope .tl-lead{color:var(--tl-ink-2);font-size:15px;max-width:600px;margin:0 auto 26px}
.tl-scope .tl-search{max-width:660px;margin:0 auto;background:var(--tl-surface);border:1px solid var(--tl-line-2);border-radius:16px;padding:7px 7px 7px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-scope .tl-search:focus-within{border-color:var(--tl-accent);box-shadow:0 0 0 3px var(--tl-accent-soft)}
.tl-scope .tl-search .si{color:var(--tl-faint);flex:none;display:flex}
.tl-scope .tl-search input{flex:1 1 120px;min-width:0;border:0;outline:0;font-size:16px;padding:11px 0;background:transparent;color:var(--tl-ink);font-family:var(--tl-sans)}
.tl-scope .tl-search button{flex:none}
.tl-scope .tl-search button{flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:var(--tl-accent);color:#fff;border:0;border-radius:11px;padding:12px 22px;font-size:15px;font-weight:500;cursor:pointer;font-family:var(--tl-sans)}
.tl-scope .tl-search button:hover{background:var(--tl-accent-d)}
.tl-scope .tl-quick{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tl-scope .tl-quick a{font-size:12.5px;color:var(--tl-muted);border:1px solid var(--tl-line-2);border-radius:999px;padding:5px 13px;background:var(--tl-surface)}
.tl-scope .tl-quick a:hover{color:var(--tl-accent);border-color:var(--tl-accent-line)}

/* Section head */
.tl-scope .tl-sec{padding:36px 0}
.tl-scope .tl-sec-head{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--tl-line)}
.tl-scope .tl-sec-head .tt{display:flex;flex-direction:column;gap:3px}
.tl-scope .tl-sec-head .en{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-accent)}
.tl-scope .tl-sec-head h2{font-weight:700;font-size:20px;letter-spacing:.04em;color:#141b2d;margin:0;border:0;padding:0}
.tl-scope .tl-sec-head .more{margin-left:auto;font-size:13px;font-weight:500;color:var(--tl-muted);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.tl-scope .tl-sec-head .more:hover{color:var(--tl-accent)}

/* Genten cards（画像なし・テキスト＋カテゴリータグ。モバイルは2カラム） */
.tl-scope .tl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tl-scope .tl-card{background:var(--tl-surface);border:1px solid var(--tl-line);border-radius:var(--tl-radius);padding:16px 15px 15px;display:flex;flex-direction:column;transition:border-color .18s,transform .18s;text-align:left}
.tl-scope .tl-card:hover{border-color:var(--tl-accent-line);transform:translateY(-2px)}
.tl-scope .tl-tag{align-self:flex-start;font-size:10.5px;font-weight:500;letter-spacing:.06em;padding:3px 9px;border-radius:6px;margin-bottom:10px}
.tl-scope .tl-t-rose{background:#fbeef0;color:#ac4f59}
.tl-scope .tl-t-blue{background:#eaf0fe;color:#1d4ed8}
.tl-scope .tl-t-amber{background:#fdf1e3;color:#b45309}
.tl-scope .tl-t-indigo{background:#ecebfb;color:#4338ca}
.tl-scope .tl-t-emerald{background:#e6f4ef;color:#047857}
.tl-scope .tl-t-slate{background:#eef2f7;color:#475569}
.tl-scope .tl-card h3{font-weight:700;font-size:15.5px;letter-spacing:.02em;margin:0 0 4px;color:#182034;border:0}
.tl-scope .tl-card p{font-size:12px;color:var(--tl-muted);line-height:1.6;margin:0}
.tl-scope .tl-card .go{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:500;color:var(--tl-faint);transition:color .18s}
.tl-scope .tl-card:hover .go{color:var(--tl-accent)}

/* DB tools */
.tl-scope .tl-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tl-scope .tl-tool{display:flex;align-items:center;gap:11px;padding:15px 16px;border:1px solid var(--tl-line);border-radius:12px;background:var(--tl-surface);font-weight:500;font-size:14px;color:var(--tl-ink-2);transition:border-color .18s,color .18s}
.tl-scope .tl-tool:hover{border-color:var(--tl-accent-line);color:var(--tl-accent)}
.tl-scope .tl-tool .ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--tl-surface-2);border:1px solid var(--tl-line);display:flex;align-items:center;justify-content:center;color:var(--tl-accent)}
.tl-scope .tl-tool:hover .ic{background:var(--tl-accent-soft);border-color:var(--tl-accent-line)}

/* News / popular */
.tl-scope .tl-two{display:grid;grid-template-columns:1fr;gap:20px}
.tl-scope .tl-list{list-style:none;margin:0;padding:0}
.tl-scope .tl-list li{border-bottom:1px solid var(--tl-line);margin:0}
.tl-scope .tl-list a{display:flex;gap:16px;align-items:baseline;padding:14px 2px}
.tl-scope .tl-list a:hover .t{color:var(--tl-accent)}
.tl-scope .tl-list .d{font-size:11.5px;color:var(--tl-faint);font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap;flex:none;width:76px}
.tl-scope .tl-list .t{font-size:14px;color:var(--tl-ink-2);line-height:1.55}

/* Q&A */
.tl-scope .tl-qa{border:1px solid var(--tl-line);border-radius:var(--tl-radius);overflow:hidden;background:var(--tl-surface)}
.tl-scope .tl-qa details{border-bottom:1px solid var(--tl-line)}
.tl-scope .tl-qa details:last-child{border-bottom:0}
.tl-scope .tl-qa summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:12px;padding:17px 18px}
.tl-scope .tl-qa summary::-webkit-details-marker{display:none}
.tl-scope .tl-qa summary .q{color:var(--tl-accent);font-weight:700;font-size:15px;flex:none;line-height:1.6}
.tl-scope .tl-qa summary h3{margin:0;font-size:15px;font-weight:500;line-height:1.6;color:var(--tl-ink);flex:1;border:0}
.tl-scope .tl-qa summary .cv{flex:none;color:var(--tl-faint);transition:transform .2s;margin-top:3px}
.tl-scope .tl-qa details[open] summary .cv{transform:rotate(180deg);color:var(--tl-accent)}
.tl-scope .tl-qa .a{padding:0 18px 18px 42px;font-size:13.5px;color:var(--tl-ink-2)}
.tl-scope .tl-qa .a a{color:var(--tl-accent);font-weight:500;border-bottom:1px solid var(--tl-accent-line)}

/* Official links */
.tl-scope .tl-links{display:grid;grid-template-columns:1fr;gap:10px}
.tl-scope .tl-link{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--tl-surface);border:1px solid var(--tl-line);border-radius:11px;padding:15px 17px;font-size:14px;font-weight:500;color:var(--tl-ink-2)}
.tl-scope .tl-link:hover{border-color:var(--tl-accent-line);color:var(--tl-accent)}
.tl-scope .tl-link .u{color:var(--tl-faint);font-weight:400;font-size:11.5px}

/* PART A responsive（モバイルファースト） */
@media screen and (min-width:560px){
  .tl-scope .tl-grid{grid-template-columns:repeat(2,1fr)}
  .tl-scope .tl-tools{grid-template-columns:repeat(4,1fr)}
  .tl-scope .tl-links{grid-template-columns:repeat(2,1fr)}
}
@media screen and (min-width:820px){
  .tl-scope .tl-two{grid-template-columns:1fr 1fr;gap:44px}
}
@media screen and (min-width:900px){
  .tl-scope .tl-hero{padding:60px 0 40px}
  .tl-scope .tl-hero h1{font-size:34px}
  .tl-scope .tl-grid{grid-template-columns:repeat(4,1fr)}
  .tl-scope .tl-links{grid-template-columns:repeat(3,1fr)}
  .tl-scope .tl-sec-head h2{font-size:22px}
}
@media screen and (min-width:1200px){:root{--tl-browse:1200px}}


/* =======================================================================
   PART B ── 全ページ共通：/db 風レイヤー（Cocoon既定の上書き）
   ・色/タイポ/罫線を /db トークンに寄せる。レイアウト構造は変えない
   ======================================================================= */

/* 背景・本文色 */
body{background:var(--tl-bg);color:var(--tl-ink)}
#main,.main{background:var(--tl-surface);border:1px solid var(--tl-line);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.03)}

/* ヘッダー：白＋ヘアライン */
#header,.header-container,.header-in,.header-container-in{background:var(--tl-surface)}
#header{border-bottom:1px solid var(--tl-line)}

/* グローバルナビ */
#navi,.navi-in,#navi ul ul{background:var(--tl-surface)}
#navi .navi-in>ul>li>a{color:var(--tl-ink-2);font-weight:500}
#navi .navi-in>ul>li>a:hover,#navi .navi-in>ul>li.current-menu-item>a{color:var(--tl-accent);background:transparent}
#navi ul ul a:hover{background:var(--tl-accent-soft);color:var(--tl-accent)}

/* 本文リンク（トップの .tl-scope 内は除外） */
.entry-content a:not(.btn):not(.wp-block-button__link):not(.tl-scope *){color:var(--tl-accent)}
.entry-content a:not(.tl-scope *):hover{color:var(--tl-accent-d)}

/* 本文見出し：グレーボックス等の既定を /db 風に */
.entry-content h2{background:transparent;border:0;border-left:4px solid var(--tl-accent);border-radius:0;padding:2px 0 2px 14px;margin:2.2em 0 .9em;color:#141b2d;font-weight:700;font-size:22px;line-height:1.5}
.entry-content h3{background:transparent;border:0;border-left:3px solid var(--tl-accent-line);border-radius:0;padding:1px 0 1px 12px;margin:1.8em 0 .7em;color:#182034;font-weight:700;font-size:19px;line-height:1.5}
.entry-content h4{background:transparent;border:0;border-bottom:1px solid var(--tl-line);border-radius:0;padding:0 0 .3em;margin:1.6em 0 .6em;color:#182034;font-weight:700;font-size:17px}

/* 記事カード（一覧・関連） */
.entry-card,.related-entry-card,.widget-entry-cards .a-wrap{background:var(--tl-surface);border:1px solid var(--tl-line);border-radius:12px;box-shadow:none;transition:border-color .18s,transform .18s}
.entry-card:hover,.related-entry-card:hover{border-color:var(--tl-accent-line);transform:translateY(-2px)}
.cat-label{background:var(--tl-accent);border-radius:6px;font-weight:500}
.entry-card-title,.card-title{color:var(--tl-ink)}
.entry-card-snippet{color:var(--tl-muted)}

/* ボタン */
.btn,.wp-block-button__link,.entry-content .btn,input[type="submit"],button.submit{background:var(--tl-accent);border-color:var(--tl-accent);border-radius:10px;color:#fff}
.btn:hover,.wp-block-button__link:hover,input[type="submit"]:hover{background:var(--tl-accent-d);border-color:var(--tl-accent-d)}

/* SNSシェアボタン：原色をやめて控えめなアウトラインに */
.sns-share .sns-share-buttons a,.sns-share a.social-icon,.sns-follow .sns-follow-buttons a{background:var(--tl-surface)!important;color:var(--tl-muted)!important;border:1px solid var(--tl-line)!important;border-radius:10px;box-shadow:none}
.sns-share .sns-share-buttons a:hover,.sns-follow .sns-follow-buttons a:hover{color:var(--tl-accent)!important;border-color:var(--tl-accent-line)!important;background:var(--tl-accent-soft)!important}
.sns-share .sns-share-buttons a .icon-font,.sns-share .sns-share-buttons a .button-caption{color:inherit!important}

/* 引用・コード・テーブル */
.entry-content blockquote{border-left:3px solid var(--tl-accent-line);background:var(--tl-surface-2);border-radius:0}
.entry-content table th{background:var(--tl-surface-2)}
.entry-content table th,.entry-content table td{border-color:var(--tl-line)}

/* サイドバー／ウィジェット見出し */
.sidebar .widget-title,.widget .widget-title{border-left:4px solid var(--tl-accent);border-bottom:1px solid var(--tl-line);background:transparent;padding:2px 0 8px 12px;color:#141b2d;font-weight:700}

/* パンくず */
#breadcrumb,.breadcrumb{color:var(--tl-muted)}
#breadcrumb a,.breadcrumb a{color:var(--tl-accent)}

/* ページャー・タグ */
.pagination .page-numbers.current{background:var(--tl-accent);border-color:var(--tl-accent)}
.entry-tags .tag-link,.tag-link{border:1px solid var(--tl-line);border-radius:999px;background:var(--tl-surface);color:var(--tl-muted)}
.entry-tags .tag-link:hover{border-color:var(--tl-accent-line);color:var(--tl-accent)}

/* フッター：白ベース＋ヘアライン */
.footer,#footer,.footer-in{background:var(--tl-surface);color:var(--tl-muted);border-top:1px solid var(--tl-line)}
#footer a,.footer a{color:var(--tl-muted)}
#footer a:hover,.footer a:hover{color:var(--tl-accent)}

/* モバイルフッターボタン */
.mobile-menu-buttons,.navi-menu-content{background:var(--tl-surface)}
.mobile-menu-buttons .menu-button:hover{color:var(--tl-accent)}


/************************************
** レスポンシブ（Cocoon既定枠は使わず、PART A/B側の min-width で対応）
************************************/
@media screen and (max-width: 834px){
  #main,.main{border-radius:12px}
}