/* =========================================================
   クジョシル TOP PAGE v3
   画像アセット反映版
========================================================= */

:root{
  --ks-green:#0f5c4a;
  --ks-green-2:#1f7a63;
  --ks-orange:#f97316;
  --ks-text:#1f2b28;
  --ks-muted:#65716d;
  --ks-line:#e2e9e6;
  --ks-shadow:0 8px 28px rgba(15,92,74,.08);
}

.kujosiru-custom-home{ margin:0; background:#fff; }
.kujosiru-custom-home #wpadminbar{ z-index:99999; }
.kujosiru-custom-home .site,
.kujosiru-custom-home #container,
.kujosiru-custom-home #content{ margin:0!important; padding:0!important; max-width:none!important; width:100%!important; }

.ks-site,.ks-site *{ box-sizing:border-box; }
.ks-site{
  margin:0;
  color:var(--ks-text);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  line-height:1.7;
}
.ks-site a{ color:inherit; text-decoration:none; }
.ks-site img{ max-width:100%; height:auto; display:block; }
.ks-container{ width:min(1180px,92vw); margin:0 auto; }

/* Header */
.ks-header{ background:#fff; border-bottom:1px solid #edf1ef; position:sticky; top:0; z-index:9990; }
.admin-bar .ks-header{ top:32px; }
.ks-header-inner{ min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.ks-logo{ display:inline-flex; align-items:center; gap:10px; color:var(--ks-green); flex:0 0 auto; }
.ks-logo-mark{ width:48px; height:48px; display:block; }
.ks-logo-mark svg{ width:100%; height:100%; }
.ks-logo strong{ display:block; font-size:24px; line-height:1.05; letter-spacing:.03em; font-weight:800; }
.ks-logo small{ display:block; margin-top:5px; font-size:11px; font-weight:700; color:#365b51; }
.ks-nav{ display:flex; align-items:center; gap:28px; font-size:14px; font-weight:700; margin-left:auto; }
.ks-nav a{ padding:8px 0; position:relative; }
.ks-nav a:after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px; background:var(--ks-green); transition:.2s ease; }
.ks-nav a:hover:after{ right:0; }
.ks-header-actions{ display:flex; align-items:center; gap:10px; }
.ks-search{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--ks-green); }
.ks-search img{ width:24px; height:24px; display:block; }
.ks-menu-btn{ display:none; border:0; background:transparent; color:var(--ks-green); padding:4px 6px; cursor:pointer; }
.ks-menu-btn span{ display:block; width:26px; height:2px; background:currentColor; margin:5px 0; border-radius:2px; }
.ks-menu-btn em{ display:block; font-size:10px; font-style:normal; font-weight:700; margin-top:3px; }
.ks-mobile-nav{ padding:8px 4vw 18px; background:#fff; border-top:1px solid var(--ks-line); }
.ks-mobile-nav a{ display:block; padding:13px 6px; font-weight:700; border-bottom:1px solid #eff3f1; }

/* Hero */
.ks-hero{ overflow:hidden; background:radial-gradient(circle at 75% 20%,rgba(116,207,244,.12),transparent 25%), linear-gradient(135deg,#fff 0%,#f8fcfa 52%,#ecf9f0 100%); }
.ks-hero-grid{ min-height:560px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:34px; padding:54px 0 38px; }
.ks-kicker{ margin:0 0 12px; color:var(--ks-green); font-size:16px; font-weight:800; letter-spacing:.03em; }
.ks-hero h1{ margin:0 0 18px; color:#123f34; font-weight:900; line-height:1.25; letter-spacing:.01em; font-size:clamp(38px,4.1vw,62px); }
.ks-hero h1 span{ color:var(--ks-orange); }
.ks-lead{ max-width:620px; margin:0 0 28px; color:#31433e; font-size:16px; line-height:1.95; }
.ks-hero-buttons{ display:flex; flex-wrap:wrap; gap:14px; }
.ks-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:9px; font-size:16px; font-weight:800; box-shadow:0 6px 14px rgba(15,92,74,.08); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.ks-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(15,92,74,.12); }
.ks-btn-icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; flex:0 0 22px; }
.ks-btn-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ks-btn-orange{ color:#fff!important; background:var(--ks-orange); }
.ks-btn-outline{ background:#fff; color:var(--ks-green)!important; border:2px solid var(--ks-green); }
.ks-hero-art{ display:flex; align-items:center; justify-content:center; }
.ks-hero-main-image{ width:100%; max-width:640px; }

/* Sections */
.ks-section{ padding:48px 0; }
.ks-soft{ background:#f4faf7; }
.ks-section-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.ks-section-head > div{ display:flex; align-items:center; gap:18px; min-width:0; flex:1; }
.ks-section-head h2{ margin:0; color:var(--ks-green); font-size:28px; line-height:1.2; font-weight:900; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.ks-heading-icon{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; }
.ks-heading-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ks-section-head p{ margin:0; color:var(--ks-muted); font-size:12px; line-height:1.7; }
.ks-section-head>a{ color:var(--ks-green); font-weight:800; font-size:12px; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }

.ks-symptom-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.ks-symptom-card{ min-height:120px; position:relative; background:#fff; border:1px solid var(--ks-line); border-radius:12px; box-shadow:0 4px 12px rgba(15,92,74,.05); padding:14px 12px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:.18s ease; }
.ks-symptom-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(15,92,74,.10); border-color:#c8ddd4; }
.ks-card-icon-image{ width:64px; height:58px; display:flex; align-items:center; justify-content:center; }
.ks-card-icon-image img{ max-width:100%; max-height:100%; object-fit:contain; }
.ks-symptom-card strong{ margin-top:8px; font-size:14px; line-height:1.45; letter-spacing:-0.02em; }
.ks-arrow{ position:absolute; right:11px; bottom:10px; color:var(--ks-green); font-weight:900; font-size:21px; }

.ks-creature-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.ks-creature-card{ background:#fff; border:1px solid var(--ks-line); border-radius:11px; min-height:150px; padding:16px 8px 14px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; transition:.18s ease; }
.ks-creature-card:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(15,92,74,.08); }
.ks-creature-icon-image{ width:96px; height:88px; display:flex; align-items:center; justify-content:center; }
.ks-creature-icon-image img{ width:100%; height:100%; object-fit:contain; object-position:center center; display:block; }
.ks-creature-card strong{ font-size:14px; line-height:1.35; margin-top:10px; font-weight:800; }

/* Other panels */
.ks-two-col-wrap{ padding-top:18px; }
.ks-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ks-panel{ border-radius:16px; padding:24px; border:1px solid var(--ks-line); }
.ks-panel-green{ background:#eff8f3; }
.ks-panel-orange{ background:#fff6ec; }
.ks-panel-title{ display:flex; gap:13px; align-items:flex-start; margin-bottom:20px; }
.ks-panel-head-icon{ width:54px; height:54px; flex:0 0 54px; display:flex; align-items:center; justify-content:center; }
.ks-panel-head-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ks-panel-title h2{ margin:0; color:var(--ks-green); font-size:27px; font-weight:900; line-height:1.25; }
.ks-panel-orange .ks-panel-title h2{ color:var(--ks-orange); }
.ks-panel-title p{ margin:5px 0 0; font-size:13px; color:var(--ks-muted); }
.ks-mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ks-mini-grid a{ min-height:145px; border:1px solid #e1e7e4; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:12px 8px; }
.ks-mini-grid a:hover{ box-shadow:0 7px 18px rgba(15,92,74,.09); }
.ks-product-icon{ width:58px; height:58px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.ks-product-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ks-mini-grid strong{ font-size:14px; line-height:1.45; }
.ks-mini-grid small{ margin-top:5px; color:#7a8682; font-size:10px; }
.ks-strip{ margin-top:12px; min-height:48px; border-radius:9px; background:#fff0dd; color:#d55d0e!important; font-weight:800; font-size:13px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ks-strip-icon{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; margin-right:2px; flex:0 0 24px; }
.ks-strip-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ks-strip-orange{ background:#ffe8d2; }

/* Posts */
.ks-post-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ks-post-card{ overflow:hidden; border:1px solid var(--ks-line); border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(15,92,74,.04); }
.ks-post-thumb{ aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#edf6f2,#dfece7); display:block; }
.ks-post-thumb img{ width:100%; height:100%; object-fit:cover; }
.ks-noimage{ width:100%; height:100%; display:grid; place-items:center; color:#8aa197; font-weight:900; letter-spacing:.12em; }
.ks-post-body{ padding:14px 14px 16px; }
.ks-post-body h3{ margin:0; font-size:16px; line-height:1.55; font-weight:800; }
.ks-post-body h3 a:hover{ color:var(--ks-green); }
.ks-post-meta{ margin-top:10px; font-size:11px; color:#87938f; }

/* About */
.ks-about{ padding:42px 0 32px; background:linear-gradient(180deg,#f4fbf8,#eef8f4); border-top:1px solid #e5efeb; }
.ks-about-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:16px; }
.ks-about-head h2{ margin:0; color:var(--ks-green); font-size:30px; font-weight:900; letter-spacing:-0.02em; }
.ks-about-head p{ margin:8px 0 0; max-width:690px; color:var(--ks-muted); font-size:13px; line-height:1.8; }
.ks-about-head>strong{ color:var(--ks-green); font-size:13px; white-space:nowrap; margin-top:6px; }
.ks-step-grid{ display:grid; grid-template-columns:1fr 26px 1fr 26px 1fr; align-items:center; gap:6px; }
.ks-step{ position:relative; background:#fff; border:1px solid var(--ks-line); border-radius:11px; padding:14px 16px 14px 52px; min-height:116px; }
.ks-step>b{ position:absolute; left:14px; top:14px; width:26px; height:26px; border-radius:50%; background:var(--ks-green); color:#fff; display:grid; place-items:center; font-size:14px; }
.ks-step-icon{ display:block; width:28px; height:28px; margin-bottom:6px; }
.ks-step-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ks-step h3{ margin:0 0 5px; font-size:16px; line-height:1.45; color:var(--ks-green); letter-spacing:-0.01em; }
.ks-step p{ margin:0; font-size:12px; line-height:1.75; color:var(--ks-muted); }
.ks-step-arrow{ display:grid; place-items:center; color:#63b17c; font-size:24px; font-weight:900; }
.ks-about-note{ margin-top:12px; padding:10px 14px; border-radius:8px; background:#fff7c9; text-align:center; font-size:12px; line-height:1.7; }
.ks-about-note strong{ text-decoration:underline; text-decoration-color:#f3c849; text-decoration-thickness:4px; text-underline-offset:4px; }

/* Footer */
.ks-footer{ background:#0d5c48; color:#fff; padding:28px 0; }
.ks-footer-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; }
.ks-logo-footer{ color:#fff; }
.ks-logo-footer small{ color:rgba(255,255,255,.82); }
.ks-footer-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; font-size:12px; }
.ks-footer-links a:hover{ text-decoration:underline; }
.ks-copy{ font-size:11px; opacity:.86; white-space:nowrap; }

/* Responsive */
@media (max-width:1050px){
  .ks-nav{ gap:18px; font-size:13px; }
  .ks-symptom-grid{ grid-template-columns:repeat(3,1fr); }
  .ks-creature-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:800px){
  .admin-bar .ks-header{ top:46px; }
  .ks-header-inner{ min-height:68px; }
  .ks-logo-mark{ width:40px; height:40px; }
  .ks-logo strong{ font-size:21px; }
  .ks-logo small{ font-size:9px; margin-top:3px; }
  .ks-nav{ display:none; }
  .ks-menu-btn{ display:block; }
  .ks-hero-grid{ grid-template-columns:1fr; min-height:auto; padding:28px 0 18px; gap:20px; }
  .ks-kicker{ font-size:13px; }
  .ks-hero h1{ font-size:34px; }
  .ks-lead{ font-size:14px; line-height:1.75; margin-bottom:20px; }
  .ks-hero-buttons{ gap:8px; }
  .ks-btn{ min-height:46px; padding:0 15px; font-size:14px; }
  .ks-section{ padding:38px 0; }
  .ks-section-head{ align-items:center; margin-bottom:14px; gap:12px; }
  .ks-section-head > div{ gap:10px; min-width:0; }
  .ks-section-head h2{ font-size:24px; gap:8px; }
  .ks-heading-icon{ width:28px; height:28px; flex-basis:28px; }
  .ks-section-head p{ display:none; }
  .ks-section-head>a{ font-size:11px; }
  .ks-symptom-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .ks-symptom-card{ min-height:100px; flex-direction:row; justify-content:flex-start; text-align:left; gap:9px; padding:12px 32px 12px 12px; }
  .ks-card-icon-image{ width:54px; height:54px; flex:0 0 54px; }
  .ks-symptom-card strong{ margin:0; font-size:13px; }
  .ks-arrow{ right:10px; top:50%; bottom:auto; transform:translateY(-50%); }
  .ks-creature-grid{ grid-template-columns:repeat(4,1fr); gap:6px; }
  .ks-creature-card{ min-height:104px; padding:9px 4px; }
  .ks-creature-icon-image{ width:58px; height:54px; }
  .ks-creature-card strong{ font-size:10px; margin-top:5px; }
  .ks-two-col{ grid-template-columns:1fr; }
  .ks-panel{ padding:18px 14px; }
  .ks-panel-title h2{ font-size:22px; }
  .ks-panel-title p{ font-size:11px; }
  .ks-mini-grid a{ min-height:118px; }
  .ks-product-icon{ font-size:31px; }
  .ks-post-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .ks-post-body{ padding:10px; }
  .ks-post-body h3{ font-size:13px; }
  .ks-about{ padding:32px 0 24px; }
  .ks-about-head{ display:block; margin-bottom:12px; }
  .ks-about-head h2{ font-size:22px; }
  .ks-about-head p{ margin-top:6px; font-size:12px; line-height:1.75; }
  .ks-about-head>strong{ display:block; margin-top:8px; font-size:11px; }
  .ks-step-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:stretch; }
  .ks-step-arrow{ display:none; }
  .ks-step{ padding:10px 10px 11px; min-height:136px; }
  .ks-step>b{ position:static; width:24px; height:24px; margin-bottom:6px; font-size:13px; }
  .ks-step-icon{ width:24px; height:24px; margin-bottom:4px; }
  .ks-step h3{ font-size:13px; line-height:1.45; margin:0 0 4px; }
  .ks-step p{ font-size:10.5px; line-height:1.65; }
  .ks-about-note{ margin-top:10px; font-size:11px; padding:8px 10px; }
  .ks-footer-inner{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:16px; }
  .ks-copy{ white-space:normal; }
}
@media (max-width:470px){
  .ks-container{ width:min(94vw,1180px); }
  .ks-logo small{ max-width:170px; }
  .ks-search{ width:36px; height:36px; font-size:23px; }
  .ks-hero h1{ font-size:30px; }
  .ks-hero-buttons{ display:grid; grid-template-columns:1fr 1fr; }
  .ks-btn{ padding:0 9px; font-size:12px; }
  .ks-section-head{ gap:10px; }
  .ks-section-head > div{ gap:8px; }
  .ks-section-head h2{ font-size:21px; gap:7px; }
  .ks-heading-icon{ width:25px; height:25px; flex-basis:25px; }
  .ks-section-head>a{ font-size:10px; }
  .ks-symptom-card strong{ font-size:12px; }
  .ks-creature-card{ min-height:92px; }
  .ks-creature-icon-image{ width:50px; height:46px; }
  .ks-panel-title>span{ font-size:28px; }
  .ks-panel-title h2{ font-size:20px; }
  .ks-mini-grid{ gap:7px; }
  .ks-mini-grid a{ min-height:108px; padding:9px 4px; }
  .ks-mini-grid strong{ font-size:12px; }
  .ks-mini-grid small{ display:none; }
  .ks-strip{ font-size:11px; }
  .ks-about-head h2{ font-size:20px; }
  .ks-about-head p{ font-size:11.5px; }
  .ks-step-grid{ gap:6px; }
  .ks-step{ padding:9px 8px 10px; min-height:132px; }
  .ks-step>b{ width:22px; height:22px; margin-bottom:5px; font-size:12px; }
  .ks-step-icon{ width:22px; height:22px; margin-bottom:3px; }
  .ks-step h3{ font-size:12px; margin-bottom:3px; }
  .ks-step p{ font-size:10px; line-height:1.55; }
  .ks-about-note{ font-size:10.5px; padding:8px 8px; }
}

.ks-strip > span:last-child{ margin-left:auto; font-size:22px; line-height:1; }

@media (max-width:800px){ .ks-btn-icon{ width:18px; height:18px; margin-right:6px; } .ks-panel-head-icon{ width:42px; height:42px; flex-basis:42px; } .ks-product-icon{ width:46px; height:46px; } .ks-strip-icon{ width:20px; height:20px; flex-basis:20px; } }
@media (max-width:470px){ .ks-search img{ width:20px; height:20px; } .ks-product-icon{ width:40px; height:40px; } .ks-panel-head-icon{ width:38px; height:38px; flex-basis:38px; } }

.ks-panel-title{ align-items:flex-start; gap:14px; }
.ks-panel-head-icon{ width:56px; height:56px; flex:0 0 56px; margin-top:2px; }
.ks-panel-head-icon img{ width:100%; height:100%; object-fit:contain; }
.ks-panel-title h2{ letter-spacing:-0.02em; }
.ks-mini-grid small{ line-height:1.45; }
@media (max-width:800px){
  .ks-panel-head-icon{ width:46px; height:46px; flex-basis:46px; }
}

/* ===== トップページ v4：リンクの安全対策・検索UI・視認性 ===== */
.ks-site section[id],.ks-site #goods,.ks-site #pro{scroll-margin-top:110px;}
.ks-site a:focus-visible,.ks-site button:focus-visible,.ks-site summary:focus-visible{
  outline:3px solid #f97316;outline-offset:3px;
}
.ks-site .ks-inactive{
  cursor:default!important;box-shadow:none!important;border-style:dashed!important;
  background:#f7faf8!important;color:#5a6964!important;
}
.ks-site .ks-inactive:hover{transform:none!important;box-shadow:none!important;}
.ks-site .ks-inactive-note{font-size:10px;color:#73817b;margin-top:4px;line-height:1.2;font-weight:700;}
.ks-site .ks-mini-grid .ks-inactive{
  min-height:145px;border:1px dashed #d8e2dd;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12px 8px;
}
.ks-site .ks-mini-grid .ks-inactive strong{font-size:14px;line-height:1.45;}
.ks-site .ks-mini-grid .ks-inactive small{margin-top:5px;color:#77857e;font-size:11px;}
.ks-site .ks-strip-pending{justify-content:center;margin-bottom:0;box-shadow:none;}
.ks-site .ks-empty-posts{grid-column:1/-1;margin:0;padding:22px;background:#f4faf7;border-radius:12px;}
.ks-site .ks-search{position:relative;display:block;width:42px;height:42px;border-radius:50%;}
.ks-site .ks-search summary{width:42px;height:42px;display:grid;place-items:center;cursor:pointer;list-style:none;border-radius:50%;}
.ks-site .ks-search summary::-webkit-details-marker{display:none;}
.ks-site .ks-search summary img{width:24px;height:24px;}
.ks-site .ks-search-panel{position:absolute;z-index:10000;right:0;top:calc(100% + 12px);width:min(340px,90vw);
  background:#fff;border:1px solid #dce7e1;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:16px;color:#1f2b28;}
.ks-site .ks-search-panel label{display:block;font-size:13px;font-weight:800;margin-bottom:8px;}
.ks-site .ks-search-fields{display:flex;gap:8px;}
.ks-site .ks-search-fields input{min-width:0;flex:1;width:100%;padding:10px 9px;border:1px solid #b9cec4;border-radius:7px;font-size:14px;}
.ks-site .ks-search-fields button{flex:0 0 auto;border:0;border-radius:7px;padding:0 14px;cursor:pointer;
  font-size:14px;font-weight:700;background:#0f5c4a;color:#fff;}
@media(max-width:800px){
  .ks-site section[id],.ks-site #goods,.ks-site #pro{scroll-margin-top:90px;}
  .ks-site .ks-mini-grid .ks-inactive{min-height:118px;}
}
@media(max-width:470px){
  .ks-site .ks-mini-grid .ks-inactive{min-height:108px;padding:9px 4px;}
  .ks-site .ks-mini-grid .ks-inactive strong{font-size:12px;}
  .ks-site .ks-mini-grid .ks-inactive small{font-size:10px;display:block;}
}

.ks-site .ks-two-col.ks-single-panel{grid-template-columns:minmax(0,760px);justify-content:center;}