@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){
  /*必要ならばここにコードを書く*/
}

/* ==========================================================
   オートまなび … LP風デザイン（ガイヘキ風：黄×青・太黒ゴシック・CSSキャラ）  2026-10-08
   ここから下を、子テーマ cocoon-child-master の style.css の一番下に貼る。
   ・効くのは body に class="look-gaiheki" が付いた時だけ（functions.php 側のゲートで付く）。
     ゲートが閉じている間は、この CSS は何もしない。
   ・Cocoon の既定（.article h2 など）より強く効かせるため、先頭を body.body.look-gaiheki にしている。
   ・見た目の正：projects/100サイト_継続/モック/mock_LP_防災.html（ガイヘキ風）と
     静的サイトの tools/static-site/lp_themes.css（.look-gaiheki）。本番の見本は bousai.krdragon.jp
   ========================================================== */

/* ---------- 色 ---------- */
body.body.look-gaiheki{
  --lk-yellow:#f5d82a;   /* 地の黄 */
  --lk-blue:#1556e0;     /* 青 */
  --lk-ink:#111;         /* 太線・文字の黒 */
  --lk-gold:#e6b800;     /* バッジの縁 */
  --lk-shadow:rgba(0,0,0,.12);
}

/* ---------- ページ全体 ---------- */
body.body.look-gaiheki{
  background:var(--lk-yellow);
  color:var(--lk-ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
body.body.look-gaiheki .content{margin-top:28px}

/* ---------- ヘッダー（.header-container / .header / .logo-header / .tagline） ---------- */
body.body.look-gaiheki .header-container{background:var(--lk-yellow);border-bottom:3px solid var(--lk-ink)}
body.body.look-gaiheki .header{background:var(--lk-yellow)}
body.body.look-gaiheki .logo-text{padding:16px 0 18px}
body.body.look-gaiheki .logo-header .site-name-text{font-family:"Dela Gothic One","Noto Sans JP",sans-serif;font-weight:400;color:var(--lk-ink);font-size:30px;letter-spacing:.02em}
body.body.look-gaiheki .site-name-text-link:hover .site-name-text{color:var(--lk-blue)}
body.body.look-gaiheki .tagline{color:var(--lk-ink);font-weight:700;font-size:13px}

/* ---------- ナビ（.navi / .navi-in。メニュー未設定の今は高さ0で見えない） ---------- */
body.body.look-gaiheki .navi{background:var(--lk-ink)}
body.body.look-gaiheki .navi-in a{color:#fff;font-weight:900}
body.body.look-gaiheki .navi-in a:hover{background:var(--lk-blue);color:#fff}

/* ---------- 本文枠とサイドバー（.main / .sidebar） ---------- */
body.body.look-gaiheki .main{background:#fff;border:3px solid var(--lk-ink);border-radius:0;box-shadow:10px 10px 0 var(--lk-shadow)}
body.body.look-gaiheki .sidebar{background:#fff;border:3px solid var(--lk-ink);border-radius:0;box-shadow:8px 8px 0 var(--lk-shadow)}
body.body.look-gaiheki .sidebar h2,
body.body.look-gaiheki .sidebar h3{padding:8px 14px;background:var(--lk-ink);color:#fff;border-left:10px solid var(--lk-yellow);border-radius:0;font-size:16px;font-weight:900}
body.body.look-gaiheki .sidebar a{color:var(--lk-ink);font-weight:700}
body.body.look-gaiheki .sidebar .wp-block-search__input{border:3px solid var(--lk-ink);border-radius:0}
body.body.look-gaiheki .sidebar .wp-block-search__button{background:var(--lk-ink);color:var(--lk-yellow);border:0;border-radius:0;font-weight:900}

/* ---------- 記事一覧（#list の .entry-card-wrap） ---------- */
body.body.look-gaiheki .entry-card-wrap{margin-bottom:18px;padding:12px;background:#fff;border:3px solid var(--lk-ink);border-radius:0;box-shadow:8px 8px 0 var(--lk-shadow)}
body.body.look-gaiheki .entry-card-wrap:hover{background:#fff;transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--lk-shadow)}
body.body.look-gaiheki .entry-card-thumb img{border:3px solid var(--lk-ink)}
body.body.look-gaiheki .entry-card-title{color:var(--lk-ink);font-weight:900;line-height:1.55}
body.body.look-gaiheki .entry-card-snippet{color:#333}
body.body.look-gaiheki .cat-label{top:.5em;left:.5em;padding:2px 10px;background:var(--lk-blue);color:#fff;border:0;border-radius:0;font-weight:900;font-size:11px}
body.body.look-gaiheki .pagination .current{background:var(--lk-ink);color:var(--lk-yellow)}
body.body.look-gaiheki .page-numbers{border:3px solid var(--lk-ink);border-radius:0;background:#fff}
body.body.look-gaiheki .pagination-next-link{background:var(--lk-blue);color:#fff;border:3px solid var(--lk-ink);border-radius:6px;font-weight:900;box-shadow:5px 5px 0 var(--lk-ink)}

/* ---------- 記事ページ（.article .entry-title / .entry-content の h2・h3 / #toc） ---------- */
body.body.look-gaiheki .breadcrumb a{color:var(--lk-blue);font-weight:700}
body.body.look-gaiheki .article .entry-title{font-family:"Dela Gothic One","Noto Sans JP",sans-serif;font-weight:400;color:var(--lk-ink);font-size:clamp(24px,3.6vw,34px);line-height:1.4}
body.body.look-gaiheki .article .eye-catch img{border:3px solid var(--lk-ink)}
body.body.look-gaiheki .article .entry-content h2{margin-top:2.4em;padding:10px 18px;background:var(--lk-ink);color:#fff;border:0;border-left:14px solid var(--lk-yellow);border-radius:0;font-weight:900;font-size:clamp(20px,2.8vw,27px);line-height:1.45}
body.body.look-gaiheki .article .entry-content h3{padding:0 0 6px;background:none;border:0;border-bottom:3px solid var(--lk-ink);border-radius:0;color:var(--lk-blue);font-weight:900;font-size:21px;line-height:1.5}
body.body.look-gaiheki .article .entry-content a{color:var(--lk-blue);font-weight:700}
body.body.look-gaiheki .article .toc{border:3px solid var(--lk-ink);border-radius:0;background:#fff}
body.body.look-gaiheki .article .toc-title{font-family:"Dela Gothic One","Noto Sans JP",sans-serif;color:var(--lk-ink);font-size:18px}
body.body.look-gaiheki .article .toc a{color:var(--lk-ink)}
body.body.look-gaiheki .entry-categories .cat-link{background:var(--lk-blue);color:#fff;border-radius:0}

/* 「投稿本文下」ウィジェットの導線（.offers。もしもの中身・注記はそのまま。見た目だけ）
   ウィジェット側に style="" が直書きされているので、枠と余白だけ !important で上書きする */
body.body.look-gaiheki .widget-single-content-bottom .offers{margin:2.5rem 0 !important;padding:22px 20px 16px !important;border:3px solid var(--lk-ink) !important;border-radius:0 !important;background:var(--lk-yellow)}
body.body.look-gaiheki .widget-single-content-bottom .offers ul{margin:12px 0;padding:0;list-style:none;display:grid;gap:10px}
body.body.look-gaiheki .widget-single-content-bottom .offers li{margin:0;padding:12px 14px;border:3px solid var(--lk-ink);background:#fff}
body.body.look-gaiheki .widget-single-content-bottom .offers li a{display:inline-block;padding:9px 18px;background:var(--lk-blue);color:#fff;font-weight:900;text-decoration:none;border:3px solid var(--lk-ink);border-radius:6px;box-shadow:4px 4px 0 var(--lk-ink)}
body.body.look-gaiheki .widget-single-content-bottom .offers li a::after{content:" →"}
body.body.look-gaiheki .widget-single-content-bottom .offers .muted{color:var(--lk-ink);font-size:12px;line-height:1.7}

/* 関連記事・前後の記事 */
body.body.look-gaiheki .related-entry-heading{display:inline-block;padding:6px 16px;background:var(--lk-ink);color:#fff;border-left:12px solid var(--lk-yellow);font-size:20px}
body.body.look-gaiheki .related-entry-card-wrap,
body.body.look-gaiheki .pager-post-navi a{background:#fff;border:3px solid var(--lk-ink);border-radius:0;box-shadow:6px 6px 0 var(--lk-shadow);margin-bottom:12px}
body.body.look-gaiheki .related-entry-card-title{color:var(--lk-ink);font-weight:900}

/* ---------- フッター（.footer / .footer-bottom / .copyright） ---------- */
body.body.look-gaiheki .footer{margin-top:40px;background:var(--lk-ink);color:#bbb;border-top:3px solid var(--lk-ink)}
body.body.look-gaiheki .footer a{color:#fff}
body.body.look-gaiheki .footer .site-name-text{color:var(--lk-yellow);font-family:"Dela Gothic One","Noto Sans JP",sans-serif}
body.body.look-gaiheki .footer .copyright{color:#bbb}
body.body.look-gaiheki .mobile-footer-menu-buttons{background:var(--lk-ink)}
body.body.look-gaiheki .mobile-footer-menu-buttons .menu-button-in{color:var(--lk-yellow)}

/* ==========================================================
   トップのヒーローと「01 まずここから」（functions.php が出す .lk-* の部品）
   ========================================================== */
body.look-gaiheki .lk-wrap{width:min(1100px,calc(100% - 32px));margin-inline:auto}
body.look-gaiheki .lk-hero{position:relative;overflow:hidden;padding:56px 0 48px;background:var(--lk-yellow);border-bottom:3px solid var(--lk-ink)}
body.look-gaiheki .lk-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:220px 1fr;align-items:center;gap:28px}
body.look-gaiheki .lk-hero-text{min-width:0}
body.look-gaiheki .lk-bubble{position:relative;display:inline-block;margin:0 0 18px;padding:6px 14px;background:#fff;color:var(--lk-blue);border-radius:0;font-weight:900;font-size:15px;line-height:1.6}
body.look-gaiheki .lk-bubble::after{content:" ✦";color:#fff;position:absolute;right:-24px;top:-8px;font-size:20px}
body.look-gaiheki .lk-bubble mark{background:none;color:inherit}
body.look-gaiheki .lk-h1{margin:0;padding:0;background:none;border:0;color:var(--lk-ink);font-family:"Dela Gothic One","Noto Sans JP",sans-serif;font-weight:400;font-size:clamp(38px,6.4vw,80px);line-height:1.15;letter-spacing:.02em}
body.look-gaiheki .lk-h1.long{font-size:clamp(30px,4.4vw,54px)}
body.look-gaiheki .lk-h1 span{display:block}
body.look-gaiheki .lk-h1 .lk-h1-b{color:var(--lk-blue)}
body.look-gaiheki .lk-lead{margin:16px 0 0;color:var(--lk-ink);font-weight:900;font-size:17px;line-height:1.8;text-wrap:pretty}
body.look-gaiheki .lk-cta{margin-top:22px}
body.look-gaiheki .lk-btn{display:inline-block;padding:14px 26px;background:var(--lk-blue);color:#fff;font-weight:900;font-size:15px;text-decoration:none;white-space:nowrap;border:3px solid var(--lk-ink);border-radius:6px;box-shadow:5px 5px 0 var(--lk-ink)}
body.look-gaiheki .lk-btn:hover{color:#fff;transform:translate(2px,2px);box-shadow:3px 3px 0 var(--lk-ink)}
body.look-gaiheki .lk-watermark{grid-column:1/-1;margin:4px 0 -6px;overflow:hidden;text-align:center;white-space:nowrap;font:400 clamp(22px,5.6vw,76px)/1 "Dela Gothic One",sans-serif;color:rgba(255,255,255,.55);letter-spacing:.02em}
body.look-gaiheki .lk-badges{grid-column:1/-1;display:flex;flex-wrap:nowrap;justify-content:center;gap:22px;padding:16px 0 0;border-top:3px solid var(--lk-ink)}
body.look-gaiheki .lk-badge{display:grid;place-items:center;align-content:center;flex:0 0 auto;width:140px;height:140px;border-radius:50%;background:#fff;text-align:center;line-height:1.25;box-shadow:inset 0 0 0 8px #fff,inset 0 0 0 11px var(--lk-gold)}
body.look-gaiheki .lk-badge small{display:block;font-size:14px;font-weight:900;color:var(--lk-ink)}
body.look-gaiheki .lk-badge b{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:38px;color:var(--lk-blue)}

/* CSSキャラ（画像なし。顔＝白・目＝黄・体＝青） */
body.look-gaiheki .lk-mascot{position:relative;width:200px;height:250px;justify-self:center}
body.look-gaiheki .lk-mascot i{display:block}
body.look-gaiheki .lk-m-head{position:absolute;left:30px;top:0;width:140px;height:120px;border:5px solid #111;border-radius:50% 50% 46% 46%;background:#fff;box-shadow:-28px 30px 0 -8px #fff,-28px 30px 0 -3px #111,28px 30px 0 -8px #fff,28px 30px 0 -3px #111}
body.look-gaiheki .lk-m-head::before,body.look-gaiheki .lk-m-head::after{content:"";position:absolute;top:38px;width:34px;height:34px;border:5px solid #111;border-radius:50%;background:#ffd400}
body.look-gaiheki .lk-m-head::before{left:22px}
body.look-gaiheki .lk-m-head::after{right:22px}
body.look-gaiheki .lk-m-smile{position:absolute;left:78px;top:88px;width:44px;height:22px;border:5px solid #111;border-top:0;border-radius:0 0 30px 30px;z-index:3}
body.look-gaiheki .lk-m-body{position:absolute;left:38px;top:112px;width:124px;height:118px;border:5px solid #111;border-radius:12px 12px 30px 30px;background:#1556e0}
body.look-gaiheki .lk-m-body::before{content:"";position:absolute;left:30px;top:24px;width:54px;height:44px;border:5px solid #111;border-radius:6px 6px 20px 20px;background:#1556e0}

body.look-gaiheki .lk-sec{padding:44px 0 52px;background:#fff;border-bottom:3px solid var(--lk-ink)}
body.look-gaiheki .lk-sec-head{display:flex;justify-content:flex-start;margin-bottom:26px}
body.look-gaiheki .lk-sh{display:inline-flex;align-items:center;gap:12px;margin:0;padding:0;background:none;border:0;color:var(--lk-ink);font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:clamp(28px,4.4vw,46px);line-height:1.3}
body.look-gaiheki .lk-num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lk-blue);color:#fff;font-size:20px}
body.look-gaiheki .lk-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body.look-gaiheki .lk-pillar{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 14px;background:var(--lk-yellow);border:3px solid var(--lk-ink);text-align:center;text-decoration:none;color:var(--lk-ink);transition:transform .15s}
body.look-gaiheki .lk-pillar:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--lk-ink);color:var(--lk-ink)}
body.look-gaiheki .lk-ico{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;font-size:30px;background:#fff;border:3px solid var(--lk-ink)}
body.look-gaiheki .lk-pillar b{font-weight:900;font-size:20px;line-height:1.35}
body.look-gaiheki .lk-pillar small{font-size:13px;color:#333;line-height:1.5}

/* ---------- スマホ（Cocoon の切り替わり 834px に合わせる） ---------- */
@media screen and (max-width:834px){
  body.look-gaiheki .lk-hero{padding:32px 0 36px}
  body.look-gaiheki .lk-hero-in{grid-template-columns:1fr;gap:16px}
  body.look-gaiheki .lk-mascot{transform:scale(.6);height:150px;width:200px;transform-origin:top center;margin-bottom:-10px}
  body.look-gaiheki .lk-h1.long{font-size:30px}
  body.look-gaiheki .lk-bubble{font-size:14px}
  body.look-gaiheki .lk-watermark{font-size:clamp(20px,5.8vw,44px)}
  body.look-gaiheki .lk-badges{gap:10px}
  body.look-gaiheki .lk-badge{width:100px;height:100px}
  body.look-gaiheki .lk-badge small{font-size:11px}
  body.look-gaiheki .lk-badge b{font-size:22px}
  body.look-gaiheki .lk-sec{padding:30px 0 36px}
  body.look-gaiheki .lk-sec-head{justify-content:center}
  body.look-gaiheki .lk-pillars{grid-template-columns:1fr 1fr;gap:12px}
  body.look-gaiheki .lk-pillar{padding:14px 8px}
  body.look-gaiheki .lk-ico{width:48px;height:48px;font-size:22px}
  body.look-gaiheki .lk-pillar b{font-size:16px}
  body.look-gaiheki .lk-pillar small{font-size:11px}
  body.body.look-gaiheki .article .entry-content h2{font-size:20px}
  body.body.look-gaiheki .main{box-shadow:none}
}
/* ===== LP風デザイン ここまで ===== */