/*
Theme Name: Xwrite Child - 新製品.com
Description: Xwrite子テーマ。ホームページのみCanvas同等デザイン、記事/一覧はXwriteデフォルト。
Author: 新製品.com
Version: 0.1.0
Template: xwrite
Text Domain: xwrite-child-shinseihin
*/
/* Canvasデザイン踏襲用の変数 */
:root{
  --sh-bg: #0a0a0a;
  --sh-fg: #111;
  --sh-card: #fff;
  --sh-muted: #666;
  --sh-border: #e5e5e5;
  --sh-grad-a: #4f46e5; /* indigo-600 */
  --sh-grad-b: #22d3ee; /* sky/cyan mix */
  --sh-grad-c: #10b981; /* emerald-500 */
}
#shinseihin-home{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#111}
.sh-wrap{max-width: 1120px;margin:0 auto;padding:0 16px;}
.sh-section-title{font-weight:700;font-size:20px;margin:0}
/* Header (Canvas準拠) */
.sh-site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:rgba(255,255,255,.75);border-bottom:1px solid #e5e5e5}
.sh-header-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.sh-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px}
.sh-brand .grad{background:linear-gradient(90deg,var(--sh-grad-a),var(--sh-grad-b),var(--sh-grad-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-nav{display:none;gap:24px;font-size:14px;color:#666}
@media(min-width:768px){.sh-nav{display:flex}}
.sh-nav a{color:#666;text-decoration:none}
.sh-nav a:hover{color:#111}
.sh-search{display:none;gap:8px;width:380px}
@media(min-width:768px){.sh-search{display:flex}}
.sh-search .input{flex:1;padding:8px 12px 8px 32px;border:1px solid var(--sh-border);border-radius:10px;background:#fff}
.sh-search .icon{position:absolute;left:10px;top:8px;opacity:.5}
.sh-btn{display:inline-flex;gap:8px;align-items:center;border-radius:10px;padding:9px 14px;text-decoration:none;font-weight:600;border:1px solid var(--sh-border);background:#fff}
/* Hero */
.sh-hero{margin:24px 0}
.sh-hero-card{border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--sh-grad-a),var(--sh-grad-b),var(--sh-grad-c));padding:1px}
.sh-hero-inner{background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(6px);border-radius:14px;padding:24px;margin:2px}
.sh-badge{display:inline-block;background:#111;color:#fff;border-radius:999px;font-size:12px;padding:4px 8px;margin-right:8px}
.sh-date{color:#666;font-size:12px}
.sh-hero-title{font-size:28px;line-height:1.2;margin:.6rem 0 .2rem}
.sh-hero-title a{text-decoration:none;color:#111}
.sh-hero-excerpt{color:#333;max-width:720px}
.sh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sh-btn-primary{background:#111;color:#fff;border-color:#111}
.sh-btn-ghost{color:#111;background:transparent}
/* mini features */
.sh-mini{display:grid;gap:10px;margin-top:12px}
.sh-mini-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:1px solid var(--sh-border);border-radius:12px;padding:10px;background:#fff}
.sh-mini-cat{font-size:12px;color:#666;margin:0}
.sh-mini-title{font-size:15px;margin:0}
.sh-chevron{color:#aaa}
/* 2カラム構成 */
@media(min-width:1024px){.sh-hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}}
/* category scroller */
.sh-cat-scroller{margin:24px 0}
.sh-scroller{display:flex;gap:8px;overflow:auto;padding:4px 0}
.sh-pill{white-space:nowrap;border:1px solid var(--sh-border);border-radius:999px;padding:8px 12px;text-decoration:none;color:#222;background:#fff;font-size:13px}
.sh-pill.is-active{background:#111;color:#fff;border-color:#111}
.sh-pill-tag{opacity:.7;margin-right:6px}
/* latest grid */
.sh-latest-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px}
.sh-link{text-decoration:none;color:#111;opacity:.8}
.sh-grid{display:grid;gap:14px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.sh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sh-card{border:1px solid var(--sh-border);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.sh-thumb{position:relative;display:block;height:160px;background:linear-gradient(135deg,#eee,#f7f7f7)}
.sh-thumb img{object-fit:cover;width:100%;height:100%}
.sh-label{position:absolute;left:10px;top:10px;background:#10b981;color:#fff;border-radius:6px;padding:2px 6px;font-size:11px}
.sh-card-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px}
.sh-card-meta{display:flex;justify-content:space-between;align-items:center}
.sh-card-title{font-weight:700;font-size:16px;margin:.2rem 0}
.sh-card-title a{text-decoration:none;color:#111}
.sh-card-excerpt{color:#555;font-size:14px;margin:0 0 6px}
.sh-readmore{text-decoration:none;font-weight:600}
/* newsletter */
.sh-newsletter{margin:28px 0}
.sh-nl-inner{border:1px solid var(--sh-border);border-radius:16px;padding:22px;background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(34,211,238,.08),rgba(16,185,129,.08))}
.sh-nl-inner h3{margin:0 0 6px}
.sh-nl-inner p{margin:0 0 12px;color:#444}
/* footer */
.sh-footer{border-top:1px solid var(--sh-border);margin-top:32px}
.sh-footer-inner{display:grid;gap:16px;padding:24px 0}
@media(min-width:768px){.sh-footer-inner{grid-template-columns:1fr 1fr 1fr}}
/* Utilities */
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}
/* Xwriteの既定ヘッダ/フッタをホームで隠したい場合は以下を微調整（必要時のみ有効化） */
/*
.home header, .home .site-header { display:none !important; }
.home footer, .home .site-footer { display:none !important; }
*/

/* ===========================
   Shinseihin Fix Pack 0.1.1
   - モバイルナビ表示
   - Safariのgradient-text対策
   - スティッキーヘッダの透過/ぼかしの互換
   - flexオーバーフロー/検索幅の調整
   - カード縮み/CLS対策
   - フォーカス可視化
=========================== */

/* Safari gradient text */
.sh-brand .grad{
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Sticky header blur fallback */
.sh-site-header{
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
}

/* Header layout robustness */
.sh-header-inner{ gap: 12px; }
.sh-header-inner > *{ min-width: 0; } /* prevent overflow in flex */
.sh-search{ width: min(380px, 46vw); } /* avoid squashing brand/nav */

/* Mobile menu */
.sh-menu{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px;
  border-radius: 10px;
}
.sh-menu:focus-visible{ outline: 2px solid #111; outline-offset: 2px; }

@media(max-width: 767.98px){
  .sh-nav{
    display: none;
    position: fixed;
    left: 0; right: 0;
    top: 64px;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--sh-border);
    box-shadow: 0 20px 30px rgba(0,0,0,.08);
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  body.menu-open .sh-nav{ display: flex; }
  .sh-nav a{ padding: 6px 10px; border-radius: 8px; background: #f7f7f7; }
  .sh-search{ display: none; } /* keep header compact on mobile */
}

/* Card thumbnail: stabilize layout (reduce CLS) */
.sh-thumb{ aspect-ratio: 16/9; height: auto; }

/* Focus visible for links/pills/buttons for a11y */
.sh-pill:focus-visible,
.sh-btn:focus-visible,
a:focus-visible{
  outline: 2px solid #111;
  outline-offset: 3px;
  border-radius: 8px;
}

/* ===========================
   Shinseihin UI Update 0.2.0
   - Header/Footer redesign
   - Custom logo support
   - Responsive grid and spacing
   - Mobile-first improvements
=========================== */

/* Header */
.sh-site-header{
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid var(--sh-border);
  position: sticky; top: 0; z-index: 100;
}
.brand-link{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:20px; color:inherit; }
.sh-logo img{ height: 28px; width:auto; display:block; }
@media(min-width: 768px){
  .sh-logo img{ height: 32px; }
}

/* Footer */
.sh-footer{
  background:#111; color:#ddd; padding:40px 0 16px; margin-top: 48px;
}
.sh-footer-inner{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; align-items:start; }
.sh-footer .sh-brand{ font-size:22px; color:#fff; text-decoration:none; }
.sh-tagline{ margin:.5rem 0 1rem; color:#aaa; font-size:14px; }
.sh-social{ display:flex; gap:10px; }
.sh-social a{ background:#222; padding:6px 10px; border-radius:8px; color:#eee; text-decoration:none; }
.sh-footer h4{ margin:0 0 8px; font-size:14px; color:#bbb; }
.sh-footer-menu{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px; }
.sh-footer-menu a{ color:#ddd; text-decoration:none; }
.sh-footer-menu a:hover{ text-decoration:underline; }
.sh-copyright{ border-top:1px solid #222; margin-top:16px; padding:12px 16px; text-align:center; color:#aaa; font-size:13px; }

@media(max-width: 767.98px){
  .sh-footer-inner{ grid-template-columns:1fr; gap:16px; }
}

/* Responsive grid */
.sh-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media(max-width: 1023.98px){
  .sh-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 520px){
  .sh-grid{ grid-template-columns: 1fr; }
}

/* Card spacing and tap targets */
.sh-card{ border-radius: 16px; overflow: hidden; background: var(--sh-card); border: 1px solid var(--sh-border); }
.sh-card .sh-card-body{ padding: 12px; }
.sh-btn, .sh-link, .sh-pill{ min-height: 38px; display:inline-flex; align-items:center; }

/* Header nav spacing on desktop */
@media(min-width: 768px){
  .sh-nav a{ padding: 8px 10px; border-radius: 8px; }
  .sh-nav a:hover{ background:#f5f5f5; }
}

/* Improve search field size consistency */
.sh-search .input{ height: 40px; }

/* --- Logo sizing guard --- */
.custom-logo,
.custom-logo-link img,
.custom-logo-link svg,
.sh-logo img,
.sh-logo svg{
  height: 32px;
  width: auto;
  max-width: 220px;
}
@media(min-width: 768px){
  .custom-logo,
  .custom-logo-link img,
  .custom-logo-link svg,
  .sh-logo img,
  .sh-logo svg{ height: 36px; max-width: 260px; }
}

/* Prevent header overflow by oversized logos */
.sh-header-inner{ min-height: 56px; }
.sh-brand{ display:flex; align-items:center; gap:10px; min-width: 0; }
.brand-link{ max-width: 60vw; overflow: hidden; }
.brand-link .custom-logo, .brand-link img, .brand-link svg{ display:block; }

/* --- Header refinement after removing search --- */
.sh-header-inner{ display:flex; align-items:center; justify-content:space-between; }
.sh-nav{ display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sh-nav::-webkit-scrollbar{ display:none; }
.sh-nav a{ white-space:nowrap; }

/* --- Header alignment after nav removal --- */
.sh-header-inner{ justify-content: flex-start; gap: 16px; }

/* ===========================
   Kakaku-like UI 0.3.0
=========================== */
.kk-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:16px 0; }
.kk-title{ font-size:22px; margin:0; }
.kk-filters{ display:flex; gap:8px; }
.kk-filters select{ height:36px; border:1px solid var(--sh-border); border-radius:8px; padding:0 10px; }

.kk-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.kk-item{ display:grid; grid-template-columns: 120px 1fr 220px; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--sh-border); border-radius:12px; padding:10px; }
.kk-thumb img{ width:100%; height:auto; border-radius:8px; display:block; }
.kk-name{ font-size:16px; margin:0 0 4px; }
.kk-meta{ color:#777; font-size:12px; display:flex; gap:8px; }
.kk-excerpt{ margin:6px 0 0; color:#555; font-size:13px; }
.kk-price{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.kk-price-num{ font-weight:700; font-size:16px; }
.kk-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 12px;
  border:1px solid var(--sh-border); border-radius:10px; text-decoration:none; }
.kk-btn-primary{ background:#111; color:#fff; border-color:#111; }

@media(max-width: 820px){
  .kk-item{ grid-template-columns: 100px 1fr; }
  .kk-price{ grid-column: 1 / -1; align-items:flex-start; }
}

.kk-breadcrumbs{ font-size:12px; color:#777; margin:10px 0 16px; }
.kk-breadcrumbs a{ color:inherit; }

.kk-product-head{ display:grid; gap:10px; margin:12px 0 16px; }
.kk-price-panel{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.kk-product-body{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.kk-shop-table{ width:100%; border-collapse: collapse; }
.kk-shop-table th, .kk-shop-table td{ border-bottom:1px solid var(--sh-border); padding:10px; text-align:left; }

@media(max-width: 820px){
  .kk-product-body{ grid-template-columns: 1fr; }
}

/* ===========================
   News Article UI 0.4.0
=========================== */
.nw-article{ max-width: 980px; margin: 0 auto; }
.nw-hero{ display:grid; gap:12px; margin: 12px 0 18px; }
.nw-eyebrow{ display:flex; gap:10px; align-items:center; color:#777; font-size:13px; }
.nw-badge{ display:inline-flex; align-items:center; padding:2px 8px; border:1px solid var(--sh-border); border-radius:999px; font-size:12px; background:#fff; }
.nw-title{ font-size: clamp(22px, 2.6vw, 30px); margin: 0; line-height:1.25; }
.nw-keyinfo{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; }
.nw-keyinfo .label{ display:block; color:#777; font-size:12px; }
.nw-keyinfo .value{ font-weight:700; font-size:15px; }
.nw-hero-img img{ width:100%; height:auto; border-radius: 12px; }

.nw-body{ display:grid; grid-template-columns: 1fr 320px; gap:24px; }
.nw-content{ font-size:16px; line-height:1.85; background:#fff; border:1px solid var(--sh-border); border-radius:12px; padding:18px; }
.nw-content h2{ font-size:20px; margin-top:1.2em; }
.nw-content figure img{ width:100%; height:auto; border-radius:8px; }

.nw-aside{ display:grid; gap:16px; }
.nw-related-product, .nw-sources{ background:#fff; border:1px solid var(--sh-border); border-radius:12px; padding:14px; }
.nw-related-product .kk-name{ margin:.4rem 0; font-size:15px; }
.nw-disclaimer{ color:#777; font-size:12px; }

.nw-footer{ display:grid; gap:12px; margin: 20px 0; }
.nw-postnav{ display:flex; justify-content:space-between; color:#555; }
.nw-share{ display:flex; gap:8px; }

@media(max-width: 920px){
  .nw-body{ grid-template-columns: 1fr; }
  .nw-aside{ order: 2; }
}