/*
Theme Name: Torinowa Utsuwa Zukan
Description: うつわ作家図鑑 トリノワ 専用テーマ
Version: 1.0
Author: torinowa
*/

/* ============================================================
   トリノワ作家ページ雛形
   作家ごとに差し替えるのは :root の2変数と画像・テキストのみ。
   --accent : 作家の釉薬・作風を象徴する色（鳥居あい=黄色い星の黄）
   --accent-deep : 同系の濃色（見出し・リンクhover）
   ============================================================ */
:root{
  --accent:#D06030;
  --accent-deep:#3E7C8C;
  --ink:#302020;
  --paper:#FAF7F2;
  --line:#E7E1D8;
  --serif:"Shippori Mincho", serif;
  --sans:"Zen Kaku Gothic New", sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.9;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* --- パンくず・PR表記 --- */
.meta-bar{font-size:12px;color:#8a837a;padding:14px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meta-bar a{color:inherit;text-decoration:none}
.pr-note{border:1px solid var(--line);border-radius:3px;padding:1px 8px}

/* --- ヒーロー：作家名と釉色 --- */
.hero{padding:28px 0 36px;border-bottom:1px solid var(--line)}
.hero-grid{display:block}
.hero-img{margin-top:24px;text-align:center}
.hero-img img{width:100%;max-width:700px;height:auto;margin:0 auto}
.glaze-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:10px;box-shadow:inset -2px -2px 3px rgba(0,0,0,.18)}
.hero .region{font-size:13px;letter-spacing:.18em;color:#8a837a;margin-bottom:10px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5.4vw,44px);letter-spacing:.08em;line-height:1.3}
.hero .romaji{font-size:13px;letter-spacing:.3em;color:#8a837a;margin-top:6px;text-transform:uppercase}
.hero .lede{margin-top:18px;font-size:15px}
.hero-img{border-radius:4px;overflow:hidden}


/* --- セクション共通 --- */
section{padding:44px 0;border-bottom:1px solid var(--line)}
h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.1em;margin-bottom:22px}
h2 .glaze-dot{width:11px;height:11px}

/* --- ① 作家紹介 --- */
.intro p{margin-bottom:1.2em}
.intro-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.intro-photos figure{margin:0}
.intro-photos figcaption{font-size:12px;color:#8a837a;margin-top:6px;line-height:1.5}
@media(max-width:640px){.intro-photos{grid-template-columns:repeat(2,1fr)}}

/* --- ② 在庫販売（あれば表示） --- */
.stock{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:4px;padding:24px;margin-top:8px}
.stock h2{margin-bottom:10px}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;padding:12px 28px;border-radius:3px;font-weight:700;font-size:15px;margin-top:14px}
.btn:hover{background:var(--accent-deep)}
.note{font-size:13px;color:#8a837a;margin-top:10px}

/* --- ③ 出会う方法 --- */
.meet dl{display:grid;grid-template-columns:120px 1fr;gap:10px 18px}
.meet dt{font-weight:700;font-size:14px;padding-top:2px}
.meet dd{font-size:15px}
@media(max-width:640px){.meet dl{grid-template-columns:1fr}.meet dt{margin-top:8px}}

/* --- ④ ギャラリー --- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery-grid figure{margin:0}
.gallery-grid figcaption{font-size:11.5px;color:#8a837a;margin-top:5px;line-height:1.5}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* --- フッター --- */
.related-list{list-style:none}
.related-list li{padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px}
footer{padding:36px 0 60px;font-size:13px;color:#8a837a}
footer a{color:inherit}
.back-to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,.25);z-index:9}
.back-to-top:hover{background:var(--accent-deep)}
html{scroll-behavior:smooth}

/* ==== site ==== */

:root{--ink:#302020;--paper:#FAF7F2;--line:#E7E1D8;--accent:#D06030;--deep:#3E7C8C;
--serif:"Shippori Mincho",serif;--sans:"Zen Kaku Gothic New",sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.9;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--deep)}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
header.site{padding:40px 0 28px;text-align:center;border-bottom:1px solid var(--line)}
header.site .logo{font-family:var(--serif);font-size:clamp(26px,4.5vw,38px);letter-spacing:.14em;font-weight:600}
header.site .logo a{color:var(--ink);text-decoration:none}
header.site .tag{font-size:13px;letter-spacing:.22em;color:#8a837a;margin-top:8px}
.notice{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:4px;
padding:16px 20px;margin:26px auto 0;max-width:760px;font-size:14px;text-align:left}
section{padding:48px 0;border-bottom:1px solid var(--line)}
h2{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:.1em;margin-bottom:6px}
h2 .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:10px;
box-shadow:inset -2px -2px 3px rgba(0,0,0,.18)}
.sec-lede{font-size:14px;color:#8a837a;margin-bottom:24px}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:860px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.card-grid{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;text-decoration:none;color:var(--ink);
display:block;transition:box-shadow .2s}
.card:hover{box-shadow:0 4px 14px rgba(43,40,37,.12)}
.card .thumb{aspect-ratio:4/3;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:12px 14px 14px}
.card .name{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.5}
.card .meta{font-size:12px;color:#8a837a;margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{background:#4E9A4E;color:#fff;font-size:11px;border-radius:3px;padding:1px 7px}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;padding:13px 34px;border-radius:3px;
font-weight:700;font-size:15px}
.btn:hover{background:var(--deep)}
.center{text-align:center;margin-top:30px}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 20px;font-size:14px;
text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--accent);color:var(--deep)}
.banner{display:block;background:#fff;border:1px solid var(--line);border-radius:5px;padding:26px 28px;text-decoration:none;color:var(--ink)}
.banner:hover{box-shadow:0 4px 14px rgba(43,40,37,.12)}
.banner b{font-family:var(--serif);font-size:19px;letter-spacing:.06em}
.banner p{font-size:14px;color:#8a837a;margin-top:6px}
footer{padding:36px 0 60px;font-size:13px;color:#8a837a;text-align:center}
footer a{color:inherit;margin:0 10px}
.back-to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,.25);z-index:9}
.back-to-top:hover{background:var(--deep)}
html{scroll-behavior:smooth}

.site-main{min-height:60vh}
.entry-content img{border-radius:3px}
article.list-item{padding:16px 0;border-bottom:1px solid var(--line)}


/* ==== 記事ページ用追加スタイル ==== */
.event-table table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.event-table th{background:var(--paper);font-family:var(--serif);font-weight:600;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);width:90px;vertical-align:top;font-size:14px}
.event-table td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px}
.event-table tr:last-child th,.event-table tr:last-child td{border-bottom:none}
.tips{list-style:none;padding:0}
.tips li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:4px;padding:14px 18px;margin-bottom:10px;font-size:15px}
.aff-box{background:#fff;border:1px solid var(--line);border-left:4px solid #4E9A4E;border-radius:4px;padding:18px 20px;margin:14px 0;font-size:15px}
.entry-content h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.1em;margin:44px 0 18px}
.entry-content h4,.entry-content h5{font-family:var(--serif);font-size:17px;margin:28px 0 10px}
.entry-content p{margin-bottom:1.1em}
.entry-content img{max-width:100%;height:auto;margin:8px 0}
.entry-content .hero-img img{max-width:720px;height:auto;margin:8px auto}


/* ==== 追記2：余白・リスト・メニュー ==== */
.site-main{padding-top:36px}
.global-nav{margin-top:16px}
.global-nav-list{list-style:none;display:flex;justify-content:center;gap:6px 26px;flex-wrap:wrap;font-size:14.5px}
.global-nav-list a{text-decoration:none;color:var(--ink);padding:4px 2px;border-bottom:2px solid transparent}
.global-nav-list a:hover{color:var(--deep);border-bottom-color:var(--accent)}
.entry-content ul:not(.related-list):not(.tips):not(.global-nav-list){list-style:disc;padding-left:1.5em;margin:0 0 1.2em}
.entry-content ol{padding-left:1.5em;margin:0 0 1.2em}
.entry-content li{margin-bottom:.3em}


/* ==== 追記3：ヘッダー横並び（ロゴ左・メニュー右・幅100%） ==== */
header.site-bar{width:100%;padding:0;text-align:left;background:#FAF7F2;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 28px;width:100%}
.site-brand{display:flex;align-items:center;gap:14px}
.site-brand img{display:block;width:176px;height:auto}
.site-tag{font-family:var(--serif);font-size:12.5px;letter-spacing:.18em;color:#8a837a}
header.site-bar .global-nav{margin-top:0}
@media(max-width:720px){
  .site-bar-inner{flex-direction:column;align-items:center;gap:10px;padding:14px 16px}
  .site-tag{display:none}
}


/* ==== 追記4：スマホ＝ハンバーガー＆全画面メニュー ==== */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:60}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}
.menu-close{display:none}
@media(max-width:720px){
  .site-bar-inner{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 16px}
  .site-brand img{width:150px}
  .site-tag{display:none}
  .menu-toggle{display:block}
  header.site-bar .global-nav{
    display:none;position:fixed;inset:0;background:var(--paper);z-index:50;
    padding:80px 24px 40px;overflow-y:auto}
  body.nav-open .global-nav{display:block}
  body.nav-open{overflow:hidden}
  body.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .menu-toggle span:nth-child(2){opacity:0}
  body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-close{display:block;position:absolute;top:18px;right:18px;background:none;border:none;
    font-size:32px;color:var(--ink);cursor:pointer;line-height:1}
  header.site-bar .global-nav-list{flex-direction:column;gap:0;font-size:17px}
  header.site-bar .global-nav-list li{border-bottom:1px solid var(--line)}
  header.site-bar .global-nav-list a{display:block;padding:16px 4px;border-bottom:none}
}