/*
Theme Name: 自炊ログ (Jisui Log)
Theme URI: https://jisui-log.com/
Author: Jisui Log
Description: 家庭料理ブログのための、軽量・高速なオリジナルテーマ。ページビルダー不使用、素のHTML/CSSで組んだ高速設計。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jisui-log
*/

:root{
  --paper:#FBFAF6;
  --ink:#20261F;
  --green:#2F6B4B;
  --green-deep:#1E4632;
  --amber:#D98A2B;
  --sage:#7C837A;
  --line:#E7E3D9;
  --card:#FFFFFF;
  --sans:"Zen Kaku Gothic New",system-ui,sans-serif;
  --mincho:"Zen Old Mincho",serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- 画像プレースホルダ（アイキャッチ未設定時のフォールバック） ---------- */
.ph{position:relative;overflow:hidden;background:var(--green-deep);display:flex;align-items:flex-end}
.ph::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 15%, rgba(217,138,43,.55), transparent 55%),
  radial-gradient(120% 120% at 90% 100%, rgba(47,107,75,.9), transparent 60%),
  linear-gradient(135deg,#2F6B4B,#1E4632)}
.ph span{position:relative;font-family:var(--mincho);color:rgba(255,255,255,.62);font-size:.72rem;letter-spacing:.28em;padding:12px 14px}
.thumb{background-size:cover;background-position:center}
.thumb::before{display:none}

/* ---------- ヘッダー ---------- */
.top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50}
.top .bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{font-family:var(--mincho);font-weight:700;font-size:1.5rem;letter-spacing:.06em}
.brand .mark b{color:var(--green)}
.brand .subname{font-size:.66rem;letter-spacing:.34em;color:var(--sage);font-weight:500}
.nav ul{display:flex;gap:30px;font-size:.9rem;font-weight:500;list-style:none;margin:0;padding:0}
.nav a{position:relative;padding:6px 0;color:#3a423a}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--amber);transition:width .25s ease}
.nav a:hover::after,.nav a:focus-visible::after{width:100%}
.search{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.82rem;color:var(--sage);display:flex;align-items:center;gap:8px;background:var(--card);cursor:pointer;transition:border-color .2s}
.search:hover{border-color:var(--green)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:1rem}

/* ---------- ヒーロー ---------- */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:stretch}
.hero-media{position:relative;border-radius:6px;min-height:440px}
.hero-media .ph{position:absolute;inset:0;border-radius:6px}
.hero-vlabel{position:absolute;top:22px;left:22px;z-index:2;writing-mode:vertical-rl;font-family:var(--mincho);color:#fff;background:var(--amber);padding:16px 8px;letter-spacing:.32em;font-size:.82rem;box-shadow:0 6px 22px rgba(0,0,0,.2)}
.hero-body{display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--mincho);color:var(--green);letter-spacing:.28em;font-size:.78rem;margin-bottom:18px}
.hero-body h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:900;line-height:1.35;letter-spacing:.01em;margin-bottom:20px}
.hero-body .lead{color:#4a524a;font-size:1.02rem;margin-bottom:28px;max-width:44ch}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.chip{font-size:.76rem;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:#3a423a;background:var(--card);display:inline-flex;gap:6px;align-items:center}
.chip b{color:var(--green);font-weight:700}
.btn{display:inline-block;align-self:flex-start;background:var(--green);color:#fff;font-weight:700;font-size:.92rem;padding:14px 30px;border-radius:999px;letter-spacing:.04em;transition:background .2s,transform .2s;border:none;cursor:pointer}
.btn:hover{background:var(--green-deep);transform:translateY(-2px)}

/* ---------- カテゴリー帯 ---------- */
.cats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.cats .row{display:flex;gap:8px;overflow-x:auto;padding:16px 0}
.cat{white-space:nowrap;font-size:.86rem;font-weight:500;padding:9px 20px;border-radius:999px;color:#3a423a;transition:.2s;border:1px solid transparent}
.cat.is-on{background:var(--green);color:#fff}
.cat:hover:not(.is-on){background:#f1efe7;border-color:var(--line)}

/* ---------- セクション ---------- */
.sec{padding:64px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;gap:20px}
.sec-head .t{display:flex;flex-direction:column;gap:6px}
.sec-head .kicker{font-family:var(--mincho);color:var(--amber);letter-spacing:.26em;font-size:.72rem}
.sec-head h2{font-size:1.7rem;font-weight:900;letter-spacing:.02em}
.more{font-size:.85rem;font-weight:500;color:var(--green);border-bottom:1px solid var(--green);padding-bottom:2px}

/* ---------- 記事グリッド ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(30,70,50,.12)}
.card .ph{aspect-ratio:16/10;width:100%}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.tag{font-family:var(--mincho);font-size:.72rem;letter-spacing:.2em;color:var(--green);margin-bottom:10px}
.card h3{font-size:1.12rem;font-weight:700;line-height:1.5;margin-bottom:10px}
.card .excerpt{font-size:.88rem;color:#5b625a;margin-bottom:16px;flex:1}
.card .foot{display:flex;gap:14px;font-size:.75rem;color:var(--sage);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.card .foot span{display:inline-flex;gap:5px;align-items:center}

/* ---------- 特集 ---------- */
.feature{background:#F3F1E9}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.feat-media{border-radius:8px;min-height:360px;position:relative}
.feat-media .ph{position:absolute;inset:0;border-radius:8px}
.feat-text .kicker{font-family:var(--mincho);color:var(--amber);letter-spacing:.26em;font-size:.72rem;margin-bottom:12px}
.feat-text h2{font-size:1.9rem;font-weight:900;line-height:1.4;margin-bottom:18px}
.feat-text p{color:#4a524a;margin-bottom:24px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.feat-list li{display:flex;gap:12px;align-items:baseline;font-size:.95rem}
.feat-list li a{transition:color .2s}
.feat-list li a:hover{color:var(--green)}
.feat-list .n{font-family:var(--mincho);color:var(--green);font-weight:700;flex-shrink:0}

/* ---------- 購読 ---------- */
.sub{background:var(--green-deep);color:#fff;text-align:center;padding:72px 0}
.sub .kicker{font-family:var(--mincho);letter-spacing:.3em;color:var(--amber);font-size:.74rem;margin-bottom:14px}
.sub h2{font-size:1.9rem;font-weight:900;margin-bottom:14px}
.sub p{color:rgba(255,255,255,.75);max-width:46ch;margin:0 auto 30px}
.sub form{display:flex;gap:10px;max-width:420px;margin:0 auto}
.sub input{flex:1;border:none;border-radius:999px;padding:14px 20px;font-size:.9rem;font-family:var(--sans)}
.sub button{background:var(--amber);color:var(--ink);font-weight:700;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;transition:transform .2s}
.sub button:hover{transform:translateY(-2px)}

/* ---------- 記事ページ（single / page） ---------- */
.article-head{padding:56px 0 28px;text-align:center;max-width:760px;margin:0 auto}
.article-head .eyebrow{margin-bottom:16px}
.article-head h1{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:900;line-height:1.45;margin-bottom:20px}
.article-head .meta{justify-content:center}
.article-hero{max-width:960px;margin:0 auto 44px;border-radius:8px;overflow:hidden;aspect-ratio:16/9}
.article-hero .ph{position:absolute;inset:0}
.article-hero .ph-wrap{position:relative;width:100%;height:100%}
.article-body{max-width:720px;margin:0 auto;padding-bottom:64px;font-size:1.05rem;line-height:2}
.article-body h2{font-size:1.5rem;font-weight:900;margin:44px 0 16px;padding-left:14px;border-left:5px solid var(--green)}
.article-body h3{font-size:1.2rem;font-weight:700;margin:32px 0 12px}
.article-body p{margin-bottom:22px}
.article-body ul,.article-body ol{margin:0 0 22px 1.4em}
.article-body li{margin-bottom:8px}
.article-body img{border-radius:8px;margin:24px 0}
.article-body a{color:var(--green);border-bottom:1px solid var(--green)}
.article-body blockquote{border-left:4px solid var(--amber);background:#F3F1E9;padding:16px 22px;margin:24px 0;border-radius:0 8px 8px 0;color:#4a524a}

/* ---------- アーカイブ見出し ---------- */
.arch-head{text-align:center;padding:56px 0 40px}
.arch-head .kicker{font-family:var(--mincho);color:var(--amber);letter-spacing:.26em;font-size:.72rem;margin-bottom:10px}
.arch-head h1{font-size:2rem;font-weight:900}
.arch-head p{color:var(--sage);margin-top:10px}

/* ---------- ページャー ---------- */
.pager{display:flex;justify-content:center;gap:8px;padding:20px 0 72px;flex-wrap:wrap}
.pager .page-numbers{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:8px;font-size:.9rem;background:var(--card);color:#3a423a;transition:.2s}
.pager .page-numbers.current{background:var(--green);color:#fff;border-color:var(--green)}
.pager a.page-numbers:hover{border-color:var(--green);color:var(--green)}

/* ---------- コメント（最小） ---------- */
.comments{max-width:720px;margin:0 auto;padding-bottom:72px}
.comments h3{font-size:1.3rem;font-weight:900;margin-bottom:20px}
.comments ol{list-style:none}
.comments .comment{border-bottom:1px solid var(--line);padding:18px 0}
.comments input[type=text],.comments input[type=email],.comments textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:12px;font-family:var(--sans);font-size:.95rem}

/* ---------- 空状態 ---------- */
.empty{text-align:center;padding:80px 0}
.empty h2{font-size:1.5rem;font-weight:900;margin-bottom:12px}
.empty p{color:var(--sage);margin-bottom:24px}

/* ---------- フッター ---------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:52px 0 30px}
.f-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:36px}
.f-brand .mark{font-family:var(--mincho);font-weight:700;font-size:1.3rem}
.f-brand .mark b{color:var(--green)}
.f-brand p{font-size:.82rem;color:var(--sage);margin-top:10px;max-width:30ch}
.f-col h4{font-size:.72rem;letter-spacing:.2em;color:var(--sage);margin-bottom:14px;font-family:var(--mincho)}
.f-col ul{list-style:none}
.f-col a{display:block;font-size:.88rem;color:#3a423a;padding:5px 0;transition:color .2s}
.f-col a:hover{color:var(--green)}
.copy{border-top:1px solid var(--line);padding-top:22px;font-size:.76rem;color:var(--sage);text-align:center}

/* ---------- フォーカス / モーション ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-media{min-height:300px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:1fr}
  .feat-media{min-height:260px}
  .search{display:none}
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;top:74px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);box-shadow:0 10px 20px rgba(0,0,0,.06)}
  .nav.is-open ul{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .sec{padding:48px 0}
  .sub form{flex-direction:column}
}
/* ===== /* ===== サイゼ風:明るいベージュの壁 × 大きめ名画 ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: #E8DFC8;
  background-image:
    url("https://jisui-log.com/wp-content/uploads/2026/07/APS628-scaled.jpg"),
    url("https://jisui-log.com/wp-content/uploads/2026/07/DP-25141-001-scaled.jpg"),
    url("https://jisui-log.com/wp-content/uploads/2026/07/DP361299-scaled.jpg"),
    url("https://jisui-log.com/wp-content/uploads/2026/07/DT64-scaled.jpg"),
    url("https://jisui-log.com/wp-content/uploads/2026/07/DT1553-scaled.jpg"),
    url("https://jisui-log.com/wp-content/uploads/2026/07/DT2130-scaled.jpg");
  background-repeat: no-repeat;
  background-size: 380px, 420px, 360px, 400px, 380px, 420px;
  background-position: 1% 13%, 75% 4%, 91% 58%, 3% 80%, 45% 95%, 67% 78%;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(232,223,200,0.30);
  pointer-events: none;
}
.wrap {
  background: #FFFFFF !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-shadow: 0 8px 30px rgba(90,70,40,0.25);
}
.top, .cats { background: #FFFFFF !important; }
.top .wrap, .cats .wrap { box-shadow: none; }
.hero, .sec, .feature, .sub, .site-footer { background: transparent !important; }
body { padding: 0 !important; }
/* 白いテーブルクロスを半透明にして、壁を透けさせる */
.wrap {
  background: rgba(255,255,255,0.72) !important;
}
/* ヒーローの左右を別パネルに分ける */
.hero .wrap {
  background: transparent !important;
}
.hero-media {
  background: rgba(255,255,255,0.72);
  padding: 16px;
  border-radius: 6px;
}
.hero-body {
  background: rgba(255,255,255,0.72);
  padding: 28px 32px;
  border-radius: 6px;
}
/* 記事一覧セクションの背後の白パネルを消して、カードだけ白く */
.sec .wrap, .feature .wrap {
  background: transparent !important;
  box-shadow: none !important;
}
/* 記事カードはしっかり白のまま */
.card {
  background: #FFFFFF !important;
}
/* カテゴリー帯(すべて/自炊生活)の白を半透明にして壁を透かす */
.cats {
  background: transparent !important;
}
.cats .wrap {
  background: rgba(255,255,255,0.72) !important;
  border-radius: 6px;
}