
:root{
  --srs-bg:#f5f3ee;--srs-card:#fff;--srs-ink:#1f2925;--srs-muted:#66736d;
  --srs-line:#d8dedb;--srs-accent:#1f6f5f;--srs-soft:#eaf4f1;--srs-warn:#8b4a22;
  --srs-danger:#8d3b32;--srs-dark:#26332e
}
.srs-shell{max-width:1080px;margin:0 auto;padding:22px 16px 64px;color:var(--srs-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.75}
.srs-hero{background:linear-gradient(145deg,#f7f5ef,#edf4f1);border:1px solid var(--srs-line);border-radius:22px;padding:30px 26px;margin:8px 0 18px}
.srs-kicker{font-size:13px;font-weight:800;color:var(--srs-accent);letter-spacing:.04em;margin:0 0 6px}
.srs-hero h1{font-size:clamp(30px,5vw,44px);line-height:1.25;margin:0 0 12px}
.srs-lead{font-size:17px;max-width:820px;margin:0}
.srs-mini-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.srs-mini-nav a{display:inline-block;border:1px solid var(--srs-line);background:#fff;border-radius:999px;padding:7px 11px;text-decoration:none;color:var(--srs-dark);font-size:13px;font-weight:700}
.srs-panel{background:var(--srs-card);border:1px solid var(--srs-line);border-radius:18px;padding:22px;margin:16px 0}
.srs-panel h2{font-size:24px;line-height:1.45;margin:0 0 14px}
.srs-panel h3{font-size:19px;line-height:1.5;margin:22px 0 8px}
.srs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.srs-card{appearance:none;border:1px solid var(--srs-line);background:#fff;border-radius:14px;padding:16px;text-align:left;cursor:pointer;transition:.15s ease;font:inherit;color:inherit}
.srs-card:hover,.srs-card:focus{border-color:var(--srs-accent);box-shadow:0 4px 16px rgba(0,0,0,.07);transform:translateY(-1px);outline:none}
.srs-card strong{display:block;font-size:17px;margin-bottom:4px}
.srs-card span{display:block;color:var(--srs-muted);font-size:13px;line-height:1.55}
.srs-result{background:var(--srs-soft)}
.srs-badge{display:inline-block;background:#fff;border:1px solid var(--srs-line);border-radius:999px;padding:4px 9px;margin:0 6px 6px 0;font-size:12px;font-weight:800}
.srs-reset,.srs-btn{display:inline-block;border:0;background:var(--srs-accent);color:#fff!important;padding:10px 15px;border-radius:10px;font-weight:800;text-decoration:none;cursor:pointer}
.srs-outline{background:#fff!important;color:var(--srs-accent)!important;border:1px solid var(--srs-accent)!important}
.srs-note{background:#fff6ef;border-left:5px solid #c46b2e;padding:13px 15px;border-radius:8px}
.srs-safe{background:#eef8f4;border-left:5px solid var(--srs-accent);padding:13px 15px;border-radius:8px}
.srs-danger{background:#fff0ee;border-left:5px solid var(--srs-danger);padding:13px 15px;border-radius:8px}
.srs-linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.srs-linkgrid a{display:block;border:1px solid var(--srs-line);border-radius:12px;padding:13px 14px;text-decoration:none;color:var(--srs-dark);background:#fff}
.srs-linkgrid strong{display:block}
.srs-linkgrid span{font-size:12px;color:var(--srs-muted)}
.srs-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.srs-table th,.srs-table td{border:1px solid var(--srs-line);padding:10px 11px;text-align:left;vertical-align:top}
.srs-table th{background:#eef3f1}
.srs-tool-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.srs-tool-row label{display:block;font-weight:800;font-size:14px}
.srs-tool-row select{width:100%;margin-top:5px;padding:10px;border:1px solid var(--srs-line);border-radius:9px;background:#fff}
.srs-cost-output,.srs-replace-output{margin-top:15px;padding:15px;background:var(--srs-soft);border-radius:12px}
.srs-source{font-size:12px;color:var(--srs-muted);margin-top:18px;padding-top:12px;border-top:1px solid var(--srs-line)}
.srs-source a{word-break:break-all}
.srs-related{max-width:1080px;margin:18px auto;padding:18px;border:1px solid var(--srs-line);border-radius:15px;background:#fbfcfb}
.srs-related h2{font-size:19px;margin:0 0 10px}
.srs-related ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;margin:0;padding-left:1.2em}
.srs-steps{counter-reset:srsstep;list-style:none;padding:0;margin:10px 0}
.srs-steps li{counter-increment:srsstep;position:relative;padding:12px 12px 12px 50px;border-bottom:1px solid var(--srs-line)}
.srs-steps li:before{content:counter(srsstep);position:absolute;left:8px;top:10px;width:29px;height:29px;border-radius:50%;background:var(--srs-accent);color:#fff;display:grid;place-items:center;font-weight:800}
.srs-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.srs-topic{border:1px solid var(--srs-line);border-radius:14px;padding:15px;background:#fff}
.srs-topic h3{margin:0 0 6px;font-size:17px}
@media(max-width:760px){
  .srs-grid,.srs-linkgrid,.srs-two,.srs-tool-row{grid-template-columns:1fr}
  .srs-related ul{grid-template-columns:1fr}
  .srs-hero{padding:23px 18px}
}

.srs-trust-nav{max-width:1080px;margin:28px auto 14px;padding:14px 16px;border-top:1px solid var(--srs-line);display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px}
.srs-trust-nav a{color:var(--srs-muted);text-decoration:none}
.srs-trust-nav a:hover{text-decoration:underline}

/* v4: core pages use a clean, full-width reading surface on Cocoon and common themes */
body.srs-core-page #sidebar,
body.srs-core-page .sidebar,
body.srs-core-page .widget-area{display:none!important}
body.srs-core-page #main,
body.srs-core-page main.main,
body.srs-core-page .content-in,
body.srs-core-page .main{max-width:1120px!important;width:100%!important}
body.srs-core-page .entry-title,
body.srs-core-page .article-header .entry-title{display:none!important}
.srs-shutter-diagram{display:grid;grid-template-columns:84px 1fr 84px;grid-template-rows:auto 250px auto;gap:8px;max-width:620px;margin:20px auto}
.srs-box-label{grid-column:1/4;background:var(--srs-dark);color:#fff;text-align:center;border-radius:10px;padding:12px;font-weight:800}
.srs-box-label small{font-weight:400;opacity:.8}
.srs-rail{display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;background:#d8dedb;border-radius:8px;font-size:12px;font-weight:800}
.srs-slat-area{background:repeating-linear-gradient(to bottom,#4b5b54 0,#4b5b54 28px,#6a7973 29px,#6a7973 31px);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.srs-bottom-label{grid-column:1/4;text-align:center;background:var(--srs-accent);color:#fff;border-radius:8px;padding:8px;font-weight:800}
.srs-note-textarea{width:100%;padding:12px;border:1px solid var(--srs-line);border-radius:10px;font:inherit;line-height:1.6;background:#fff}
.srs-price-head{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.srs-price-head>div{border:1px solid var(--srs-line);border-radius:12px;padding:12px;background:#f8faf9}
.srs-price-head strong,.srs-price-head small{display:block}
.srs-price-head small{color:var(--srs-muted)}
@media(max-width:760px){
 .srs-shutter-diagram{grid-template-columns:58px 1fr 58px;grid-template-rows:auto 220px auto}
 .srs-price-head{grid-template-columns:1fr}
}

body.srs-trust-page .entry-title,
body.srs-trust-page .article-header .entry-title{display:none!important}

/* ============================================================
   v5 visual reset for Cocoon
   ============================================================ */

/* Old patterned/background skin must not define the new site's identity. */
body.srs-core-page,
body.srs-trust-page{
  background:#f4f3ef!important;
  background-image:none!important;
}
body.srs-core-page #content,
body.srs-trust-page #content,
body.srs-core-page .content,
body.srs-trust-page .content,
body.srs-core-page .content-in,
body.srs-trust-page .content-in{
  background:transparent!important;
  background-image:none!important;
}

/* Hide old-site widget/author/automatic related clutter on the pages we own. */
body.srs-core-page #sidebar,
body.srs-core-page .sidebar,
body.srs-core-page .sidebar-scroll,
body.srs-core-page .footer-widgets,
body.srs-core-page .footer-widgets-mobile,
body.srs-core-page .author-box,
body.srs-core-page .sns-follow,
body.srs-core-page .related-entries,
body.srs-core-page .related-entry-heading,
body.srs-core-page .widget-entry-cards,
body.srs-core-page .under-entry-content,
body.srs-trust-page #sidebar,
body.srs-trust-page .sidebar,
body.srs-trust-page .footer-widgets,
body.srs-trust-page .footer-widgets-mobile,
body.srs-trust-page .author-box,
body.srs-trust-page .sns-follow,
body.srs-trust-page .related-entries{
  display:none!important;
}

/* Cocoon heading decoration was fighting the custom components. */
.srs-shell .srs-panel h2{
  display:block!important;
  position:relative!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-left:5px solid var(--srs-accent)!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:var(--srs-ink)!important;
  padding:4px 0 4px 12px!important;
  margin:0 0 16px!important;
  font-size:22px!important;
  line-height:1.45!important;
}
.srs-shell .srs-panel h2:before,
.srs-shell .srs-panel h2:after{
  content:none!important;
  display:none!important;
}
.srs-shell .srs-panel h3{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  color:var(--srs-ink)!important;
}

/* Wider, cleaner central reading surface. */
body.srs-core-page .main,
body.srs-trust-page .main{
  width:100%!important;
  max-width:1120px!important;
  padding-left:0!important;
  padding-right:0!important;
  box-shadow:none!important;
}
body.srs-core-page .content-in,
body.srs-trust-page .content-in{
  max-width:1160px!important;
}

/* Header identity: less empty, more deliberate. */
.header,
.header-container{
  background:#fff!important;
  background-image:none!important;
  border-bottom:1px solid #dfe4e1!important;
}
.logo-header,
.logo{
  padding-top:14px!important;
  padding-bottom:12px!important;
}
.site-name-text{
  color:#1f2925!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}
.tagline{
  color:#66736d!important;
}

/* Fallback global navigation. */
.srs-global-nav{
  background:#fff;
  border-bottom:1px solid #dfe4e1;
  box-shadow:0 2px 7px rgba(0,0,0,.025);
  position:relative;
  z-index:4;
}
.srs-global-nav-in{
  max-width:1080px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.srs-global-nav-in::-webkit-scrollbar{display:none}
.srs-global-nav a{
  white-space:nowrap;
  display:block;
  padding:11px 12px;
  color:#26332e;
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  border-bottom:3px solid transparent;
}
.srs-global-nav a:hover{
  color:var(--srs-accent);
  border-bottom-color:var(--srs-accent);
}

/* Auto Ads sometimes inject a .google-auto-placed node into CSS grids.
   Make it span the full row instead of impersonating a content card. */
.srs-grid > .google-auto-placed,
.srs-linkgrid > .google-auto-placed,
.srs-two > .google-auto-placed,
.srs-tool-row > .google-auto-placed{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
}
.srs-grid > ins.adsbygoogle,
.srs-linkgrid > ins.adsbygoogle,
.srs-two > ins.adsbygoogle,
.srs-tool-row > ins.adsbygoogle{
  grid-column:1 / -1!important;
}

/* Card grids should remain useful even if an ad appears between blocks. */
.srs-two{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start;
}
.srs-topic{height:100%}

/* Comparison table remains usable on a phone. */
.srs-matrix-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.srs-matrix .srs-table{
  min-width:720px;
}

/* Footer: keep it compact after old widget purge. */
.footer,
.footer-bottom{
  background:#fff!important;
  background-image:none!important;
}
.footer-bottom{
  border-top:1px solid #e2e6e4!important;
}
.srs-trust-nav{
  justify-content:center;
  background:#fff;
}

/* Remove visual remnants of Cocoon skin around article body. */
body.srs-core-page .article,
body.srs-trust-page .article{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.srs-core-page .main:before,
body.srs-core-page .main:after,
body.srs-trust-page .main:before,
body.srs-trust-page .main:after{
  content:none!important;
  display:none!important;
}

@media(max-width:760px){
  .srs-two{grid-template-columns:1fr!important}
  .srs-global-nav a{padding:10px 9px;font-size:12px}
  .srs-shell .srs-panel h2{font-size:20px!important}
}

/* ============================================================
   v6: stronger shutter visual identity
   ============================================================ */
.srs-hero{
  overflow:hidden;
}
.srs-hero-flex{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  gap:22px;
  align-items:center;
}
.srs-hero-copy{
  min-width:0;
}
.srs-hero-visual{
  align-self:stretch;
}
.srs-hero-visual img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  border:1px solid var(--srs-line);
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.srs-hero .srs-mini-nav{
  margin-top:16px;
}
.srs-hero{
  background:linear-gradient(145deg,#f7f8f6,#eef5f2)!important;
}

/* Stronger suppression of Cocoon/footer leftovers on owned pages */
body.srs-core-page .footer .widget,
body.srs-core-page #footer .widget,
body.srs-core-page .widget,
body.srs-core-page .widget_archive,
body.srs-core-page .widget_categories,
body.srs-core-page .widget_recent_entries,
body.srs-core-page .widget_media_image,
body.srs-core-page .widget_block,
body.srs-core-page .navi-footer,
body.srs-core-page .menu-footer-menu-container,
body.srs-core-page .menu-footer-container,
body.srs-core-page .appeal,
body.srs-core-page .carousel,
body.srs-core-page .a-wrap,
body.srs-core-page .blogcard-wrap,
body.srs-core-page .content-bottom,
body.srs-core-page .under-entry-content,
body.srs-core-page .pager-post-navi,
body.srs-core-page .post-navi,
body.srs-core-page .ranking-item,
body.srs-core-page .widget-entry-cards,
body.srs-core-page .new-entry-cards,
body.srs-core-page .popular-entry-cards,
body.srs-core-page .related-entry-card-wrap,
body.srs-core-page .textwidget,
body.srs-core-page .menu,
body.srs-core-page .caption-box{
  display:none!important;
}

/* But keep our own footer trust nav visible */
body.srs-core-page .srs-trust-nav,
body.srs-trust-page .srs-trust-nav{
  display:flex!important;
}

/* Slightly more shutter-like cards */
.srs-card,
.srs-linkgrid a,
.srs-topic{
  background:linear-gradient(180deg,#fff 0%,#fcfcfb 100%);
}
.srs-panel{
  box-shadow:0 4px 12px rgba(0,0,0,.025);
}
.srs-grid .srs-card strong:before{
  content:"▦ ";
  color:var(--srs-accent);
}
.srs-linkgrid strong:before{
  content:"▸ ";
  color:var(--srs-accent);
}

@media(max-width:860px){
  .srs-hero-flex{
    grid-template-columns:1fr;
  }
  .srs-hero-visual{
    order:-1;
  }
}

/* ============================================================
   v7 professional visual pass
   ============================================================ */
html,
body.srs-core-page,
body.srs-trust-page,
body.srs-core-page .body,
body.srs-trust-page .body,
body.srs-core-page #container,
body.srs-trust-page #container,
body.srs-core-page .container,
body.srs-trust-page .container,
body.srs-core-page .content,
body.srs-trust-page .content,
body.srs-core-page .content-in,
body.srs-trust-page .content-in{
  background-color:#f4f5f2!important;
  background-image:none!important;
}
.srs-shell{max-width:1180px!important;padding:28px 22px 72px!important}
body.srs-core-page .main,
body.srs-trust-page .main,
body.srs-core-page #main,
body.srs-trust-page #main{
  width:100%!important;max-width:1220px!important;margin-left:auto!important;margin-right:auto!important
}
body.srs-core-page .content-in,
body.srs-trust-page .content-in{max-width:1240px!important;margin-left:auto!important;margin-right:auto!important}
.srs-hero{padding:24px!important;border-radius:20px!important;background:linear-gradient(135deg,#f7faf8 0%,#eef5f2 100%)!important}
.srs-hero-flex{grid-template-columns:minmax(0,.88fr) minmax(460px,1.12fr)!important;gap:28px!important}
.srs-hero-copy{display:flex;flex-direction:column;justify-content:center}
.srs-hero h1{font-size:clamp(34px,4vw,48px)!important}
.srs-hero .srs-lead{font-size:16px!important;line-height:1.85!important}
.srs-hero-visual picture{display:block;width:100%}
.srs-hero-visual img{
  width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;
  border-radius:16px!important;border:1px solid #d6dfda!important;
  box-shadow:0 12px 30px rgba(35,52,44,.10)!important
}
.srs-panel{box-shadow:0 5px 18px rgba(31,50,41,.035)!important}
.srs-global-nav-in{justify-content:center}
body.srs-core-page .entry-card-wrap,
body.srs-core-page .entry-card,
body.srs-core-page .related-entries,
body.srs-core-page .new-entry-box,
body.srs-core-page .popular-entry-box,
body.srs-core-page .widget-entry-card,
body.srs-core-page .widget-entry-card-link,
body.srs-core-page .footer-widgets,
body.srs-core-page .footer-widgets-mobile,
body.srs-core-page .footer-widgets-pc,
body.srs-core-page .footer-widgets-container,
body.srs-core-page .sidebar,
body.srs-core-page .sidebar-scroll,
body.srs-core-page #sidebar{
  display:none!important
}
@media(max-width:900px){
  .srs-shell{max-width:100%!important;padding:18px 14px 54px!important}
  .srs-hero{padding:16px!important}
  .srs-hero-flex{grid-template-columns:1fr!important;gap:18px!important}
  .srs-hero-visual{order:-1}
  .srs-global-nav-in{justify-content:flex-start}
}
