/*
Theme Name: 天神堂小島印房
Theme URI: https://kojimainbo.com/
Author: 天神堂小島印房
Description: 名古屋市南区の判子屋、天神堂小島印房のテーマ。試作から移したもの。
Version: 0.9.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: tenjindo
*/

/* ============================================================
   共通　試作の CSS をそのまま移した。1文字も変えていない部分が多い
   ============================================================ */

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

  :root{
    --veil:rgba(238,231,220,.88);
    --kinari:#f6f1e6;
    --sumi:#20201e;
    --ink:#2e1f14;
    --header-h:clamp(62px,8vh,96px);
    --pad:clamp(16px,3vw,40px);
    --gap:clamp(14px,1.8vw,26px);
  }

  body{
    background:var(--kinari);
    color:var(--sumi);
    font-family:"Work Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  img{display:block;max-width:100%}

  /* ---------- 見出し ---------- */

  header{
    position:sticky;top:0;z-index:30;
    background:var(--kinari);
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:clamp(14px,2.4vh,26px) var(--pad) clamp(10px,1.6vh,18px);
  }
  .wordmark{display:block;line-height:0}
  .wordmark img{width:clamp(190px,19vw,310px);height:auto}
  .section{margin-top:9px;font-size:clamp(13px,1.4vw,19px);font-style:italic;font-weight:700;letter-spacing:.04em}
  .toggle{font-size:clamp(14px,1.5vw,20px);font-weight:700;letter-spacing:.06em;padding-top:4px}

  /* ---------- 板 ---------- */

  .board{
    padding:clamp(10px,1.6vh,20px) var(--pad) clamp(60px,10vh,120px);
    display:flex;gap:var(--gap);align-items:flex-start;
  }
  .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}

  .card{
    margin:0;
    background:#fff;
    overflow:hidden;
  }
  .card img{width:100%;height:auto}
  .card .t{padding:clamp(16px,1.6vw,24px)}
  .card p{font-size:clamp(13px,1.05vw,15.5px);line-height:1.9;letter-spacing:.02em}
  .card p + p{margin-top:.85em}
  .card .lead{font-size:clamp(15px,1.35vw,20px);line-height:1.75;font-weight:700;letter-spacing:.02em}
  .card .fine{font-size:clamp(12px,.92vw,13.5px);line-height:1.8;opacity:.62;margin-top:1em}
  .card em{font-style:normal;box-shadow:#5fd8cb 0 -.28em 0 inset}
  .card.c-dark em{box-shadow:#5fd8cb 0 -.28em 0 inset}
  .card a{box-shadow:#5fd8cb 0 -.22em 0 inset;transition:none}
  .card a:hover{box-shadow:#5fd8cb 0 -1.15em 0 inset;transition:box-shadow .1s linear}
  .card.c-dark a{box-shadow:#5fd8cb 0 -.22em 0 inset;color:inherit}
  .card.c-dark a:hover{box-shadow:#5fd8cb 0 -1.15em 0 inset;color:#241f1a}

  /* カードは自分の色を持つ */
  .c-paper{background:#fff}
  .c-warm{background:#e8e2d6}
  .c-deep{background:#dcd5c7}
  .c-dark{background:#241f1a;color:#f2ece1}
  .c-none{background:none}

  .rows{display:flex;flex-direction:column;gap:.55em;font-size:clamp(13px,1.05vw,15.5px);line-height:1.7}
  .rows div{display:flex;gap:1.1em}
  .rows span:first-child{min-width:4.6em;opacity:.6}

  .kicker{font-size:clamp(12px,.88vw,13px);letter-spacing:.18em;opacity:.55;margin-bottom:.9em}

  /* ---------- メニュー（トップと同じ） ---------- */

  .menu{
    position:fixed;
    top:calc(var(--header-h) + 7vh);left:34%;right:0;bottom:24%;
    z-index:20;
    background:var(--veil);color:var(--ink);
    padding:clamp(24px,4vh,64px) clamp(24px,4vw,64px);
    display:grid;grid-template-columns:1.35fr 1fr;align-items:start;gap:clamp(16px,3vw,56px);
    opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 220ms;
    overflow:auto;
  }
  .menu.is-open{opacity:1;visibility:visible}
  .menu-main{display:flex;flex-direction:column;justify-content:center;height:100%;gap:clamp(16px,3.4vh,44px)}
  .menu-main a{font-size:clamp(20px,3vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.005em}
  .menu-main a:hover{opacity:.62}
  .menu-sub{display:flex;flex-direction:column;gap:clamp(9px,1.2vh,15px);padding-top:clamp(6px,3vh,40px);font-size:clamp(13px,1.35vw,21px);line-height:1.5}
  .menu-sub a:hover{opacity:.62}
  .menu-sub .gap{height:clamp(14px,4vh,54px)}
  .menu-sub .small{font-size:clamp(12px,1.05vw,15px);opacity:.85;line-height:1.7}
  @media (max-width:860px){
    .menu{left:8%;bottom:11%;grid-template-columns:1fr;gap:clamp(12px,2.4vh,24px);padding:clamp(20px,3vh,40px) clamp(20px,5vw,40px)}
    .menu-main{height:auto;gap:clamp(14px,2.6vh,30px)}
    .menu-sub{padding-top:0}
    .menu-sub .gap{height:clamp(10px,2vh,20px)}
  }

  .pill{
    position:fixed;right:clamp(16px,3vw,44px);bottom:clamp(16px,3.5vh,44px);
    z-index:40;
    width:clamp(84px,9.5vw,124px);aspect-ratio:1;border-radius:50%;
    background:var(--sumi);color:var(--kinari);
    display:grid;place-items:center;
    font-size:clamp(13px,1.25vw,17px);font-weight:700;letter-spacing:.06em;
    transition:background 200ms ease,transform 200ms ease;
  }
  .pill:hover{background:#000;transform:scale(1.04)}

  @media (max-width:640px){
    .pill{width:clamp(62px,17vw,78px);font-size:clamp(11.5px,3vw,13px);
          right:clamp(12px,3vw,18px);bottom:clamp(12px,2.4vh,20px)}
  }

  .menu-main a[aria-current="page"]{opacity:.42}

/* ============================================================
   専用テンプレートを持たないページ（page.php / single.php）
   JIN:R 時代のページが、崩れずに読める形で出るように。
   ============================================================ */
.doc{
  max-width:44em;   /* 自前CSSを持つ既存ページが窮屈にならない幅 */
  margin:0 auto;
  padding:clamp(30px,7vh,80px) var(--pad) clamp(50px,10vh,120px);
}
.entry h1{
  font-size:clamp(19px,2vw,27px);font-weight:700;letter-spacing:.02em;
  line-height:1.5;margin-bottom:1.4em;
}
.entry h2{font-size:clamp(16px,1.5vw,20px);font-weight:700;line-height:1.6;margin:2.2em 0 .8em}
.entry h3{font-size:clamp(14px,1.25vw,17px);font-weight:700;line-height:1.6;margin:1.8em 0 .7em}
.entry p{font-size:clamp(13px,1.05vw,15.5px);line-height:2;margin-bottom:1.3em}
.entry ul,.entry ol{margin:0 0 1.3em 1.4em}
.entry li{font-size:clamp(13px,1.05vw,15.5px);line-height:2;margin-bottom:.3em}
.entry img,.entry figure img{width:100%;height:auto;margin:1.6em 0}
.entry figure{margin:1.6em 0}
.entry figcaption{font-size:clamp(12px,.92vw,13.5px);opacity:.55;margin-top:.6em}
.entry table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:clamp(12px,.98vw,14.5px)}
.entry th,.entry td{border-bottom:1px solid var(--rule);padding:.7em .4em;text-align:left}
.entry a{box-shadow:#5fd8cb 0 -.22em 0 inset;transition:none}
.entry a:hover{box-shadow:#5fd8cb 0 -1.15em 0 inset;transition:box-shadow .1s linear}
.back{margin-top:clamp(36px,6vh,64px);font-size:clamp(13px,1.02vw,15px)}
.back a{box-shadow:#5fd8cb 0 -.22em 0 inset;transition:none}
.back a:hover{box-shadow:#5fd8cb 0 -1.15em 0 inset;transition:box-shadow .1s linear}

/* JIN:R 専用ブロックの残骸。CSSが無くなり枠線だけ黒く残るので消す。 */
.entry [class*="b--jinr"],
.entry [class*="wp-block-jinr"],
.entry [class*="c--h2rich"],
.entry [class*="a--h2rich"]{border:0!important;background:none!important;padding:0!important}
.entry .wp-block-columns{display:flex;gap:1.4em;flex-wrap:wrap}
.entry .wp-block-column{flex:1 1 14em;min-width:0}