/*
Theme Name: 岡山トイレリフォーム案内所
Theme URI: https://toilet-okayama.com/
Author: 岡山トイレリフォーム案内所
Description: 岡山のトイレリフォーム情報サイト専用テーマ
Version: 2.2
Text Domain: okayama-toilet-guide
*/

:root{--navy:#073f82;--blue:#0865c7;--orange:#ef7f1a;--ink:#263442;--paper:#fffaf0;--line:#e6d7bf;--white:#fff;--muted:#6d747b;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.75}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.wrap{max-width:var(--max);margin:auto}.site-header{background:#fff;position:relative;z-index:20}.brand-banner{height:132px;background:#d9ecfb center 43%/cover no-repeat;position:relative;overflow:hidden}.brand-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 40%,rgba(255,255,255,.18) 73%,rgba(255,255,255,.05))}.brand-inner{height:100%;max-width:var(--max);margin:auto;padding:0 24px;display:flex;align-items:center;position:relative}.brand-guide{width:106px;height:116px;object-fit:contain;align-self:flex-end;margin-right:18px}.brand-copy{filter:drop-shadow(0 1px 0 #fff)}.site-brand{font-size:33px;font-weight:800;color:var(--navy);letter-spacing:.02em}.brand-copy p{margin:2px 0 0;color:var(--navy);font-weight:600;font-size:15px}.nav-bar{border-top:1px solid #e5e8eb;border-bottom:1px solid #d9dde2;background:#fff}.header-inner{max-width:var(--max);margin:auto;min-height:54px;padding:0 24px;display:flex;align-items:center}.site-nav{width:100%;display:flex;align-items:center;justify-content:center;gap:0;font-weight:700;color:var(--navy)}.site-nav a{padding:14px 28px;border-right:1px solid #e6e6e6}.site-nav a:first-child{border-left:1px solid #e6e6e6}.site-nav a:hover{color:var(--orange);background:#fffaf2}.menu-toggle{display:none;background:none;border:0;font-size:28px;color:var(--navy)}.hero{position:relative;min-height:445px;background:#e9e7e2 center/cover no-repeat;display:flex;align-items:center}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.52) 31%,rgba(255,255,255,.1) 58%,rgba(255,255,255,0) 75%)}.hero-inner{position:relative;width:100%;max-width:var(--max);margin:auto;padding:42px 30px;color:#0d1d2c}.hero h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(36px,4vw,54px);line-height:1.42;margin:0;letter-spacing:.04em;font-weight:700}.hero-line{display:block;width:285px;height:5px;background:var(--orange);border-radius:5px;transform:rotate(-2deg);margin:8px 0 22px}.hero p{font-size:16px;margin:0;max-width:560px;font-weight:600}.quick{background:var(--paper);padding:22px 24px}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.category-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 18px 18px;text-align:center;box-shadow:0 2px 8px rgba(52,41,23,.04);transition:.2s}.category-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}.category-icon{width:84px;height:84px;object-fit:contain;margin:0 auto 8px}.category-card h2{font-size:20px;line-height:1.35;color:var(--navy);margin:0 0 5px}.category-card p{font-size:14px;line-height:1.55;color:#626b73;margin:0}.section{padding:32px 24px}.section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid #edf2f7;margin-bottom:18px}.section-head h2,.area-heading h2{font-size:27px;color:var(--navy);margin:0 0 10px}.section-head a{color:var(--blue);font-weight:700;font-size:14px}.popular{background:#fff}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.post-grid.four{grid-template-columns:repeat(4,1fr)}.post-card{background:#fff;overflow:hidden}.post-thumb{aspect-ratio:16/10;background:#edf0f2;object-fit:cover;width:100%;border-radius:7px}.post-thumb.placeholder{border:1px dashed #c7cbd0}.post-body{padding:9px 2px}.post-body h3{font-size:16px;line-height:1.55;color:var(--navy);margin:0 0 4px}.post-date{font-size:12px;color:#858b91}.area-section{background:var(--paper);padding-top:30px;padding-bottom:32px}.area-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.area-heading p{margin:0 0 18px;color:#5f6870}.area-guide{display:flex;align-items:flex-end;flex:0 0 280px}.area-guide span{align-self:flex-start;background:#fff;border:2px solid var(--navy);border-radius:50%;padding:13px 17px;color:var(--navy);font-weight:700;font-size:13px;line-height:1.5;transform:rotate(-3deg);white-space:nowrap}.area-guide img{width:110px;height:125px;object-fit:contain}.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.area-card{position:relative;border-radius:9px;overflow:hidden;background:#ddd;aspect-ratio:16/9;border:1px solid #e2e2e2}.area-card img{width:100%;height:100%;object-fit:cover}.area-card:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.35))}.area-name{position:absolute;z-index:2;bottom:12px;left:50%;transform:translateX(-50%);min-width:110px;text-align:center;background:rgba(255,255,255,.95);border-radius:18px;padding:5px 16px;color:var(--navy);font-size:17px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.12)}.latest{background:#fff}.guide-section{background:#fffaf2;padding:22px 24px 32px}.guide-box{display:grid;grid-template-columns:145px 1fr;gap:25px;align-items:center;max-width:740px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 24px}.guide-photo{width:118px;height:118px;object-fit:contain;margin:auto}.guide-box h2{font-size:20px;color:var(--navy);margin:0 0 7px}.guide-box p{font-size:14px;margin:0}.site-footer{background:#123b62;color:#fff;padding:30px 24px 18px}.footer-inner{max-width:var(--max);margin:auto}.footer-brand{font-size:20px;font-weight:700;margin-bottom:8px}.copyright{font-size:12px;opacity:.7;margin-top:22px}.content-wrap{max-width:900px;margin:auto;padding:40px 24px 80px}.entry-title{font-size:36px;line-height:1.45;color:var(--navy)}.entry-content h2{margin-top:48px;padding:10px 14px;border-left:5px solid var(--blue);background:#f1f8ff;font-size:25px}.entry-content h3{margin-top:34px;border-bottom:2px solid #dce8f3;padding-bottom:8px}.entry-content a{color:#175e9c;text-decoration:underline}.empty-note{text-align:center;color:#888;padding:25px;border:1px dashed #bbb;border-radius:8px}.empty-note:before{content:"記事を公開すると、ここに表示されます。";font-size:0}
@media(max-width:800px){.brand-banner{height:auto;min-height:74px;/* mobile background image retained */}.brand-shade{background:#fff}.brand-inner{min-height:74px;padding:6px 14px}.brand-guide{width:54px;height:64px;margin-right:8px}.site-brand{font-size:20px}.brand-copy p{font-size:10px}.nav-bar{position:absolute;right:8px;top:12px;border:0;background:transparent}.header-inner{min-height:52px;padding:0}.menu-toggle{display:block;font-size:30px}.site-nav{display:none;position:fixed;top:74px;left:0;right:0;background:#fff;padding:14px 18px;border-top:1px solid #eee;box-shadow:0 6px 15px rgba(0,0,0,.08);flex-direction:column;align-items:stretch}.site-nav.open{display:flex}.site-nav a,.site-nav a:first-child{border:0;border-bottom:1px solid #eee;padding:12px 8px}.hero{min-height:430px;background-position:center}.hero:before{background:linear-gradient(0deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.78) 39%,rgba(255,255,255,.05) 70%)}.hero-inner{align-self:flex-end;padding:30px 20px}.hero h1{font-size:34px;line-height:1.45}.hero-line{width:240px;height:4px;margin:5px 0 13px}.hero p{font-size:14px;line-height:1.7}.hero p br{display:none}.quick{padding:14px 12px}.category-grid{grid-template-columns:1fr;gap:8px}.category-card{display:grid;grid-template-columns:58px 1fr 24px;grid-template-rows:auto auto;text-align:left;align-items:center;padding:8px 12px}.category-card:after{content:"›";grid-column:3;grid-row:1/3;color:var(--blue);font-size:28px}.category-icon{grid-column:1;grid-row:1/3;width:48px;height:48px;margin:0}.category-card h2{grid-column:2;font-size:17px;margin:0}.category-card p{grid-column:2;font-size:12px}.section{padding:28px 14px}.section-head h2,.area-heading h2{font-size:21px}.post-grid.four,.post-grid{grid-template-columns:1fr}.popular .post-grid.four,.latest .post-grid.four{display:block}.popular .post-card,.latest .post-card{display:grid;grid-template-columns:100px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #eee}.popular .post-thumb,.latest .post-thumb{width:100px;height:70px;aspect-ratio:auto}.post-body{padding:0}.post-body h3{font-size:14px}.area-heading{display:block}.area-guide{display:none}.area-grid{grid-template-columns:repeat(2,1fr);gap:9px}.area-name{min-width:82px;font-size:14px;padding:4px 10px}.guide-box{grid-template-columns:95px 1fr;text-align:left;padding:14px}.guide-photo{width:90px;height:90px}.guide-box h2{font-size:17px}.guide-box p{font-size:12px}.entry-title{font-size:28px}}


/* v4: hero copy — three short hand-drawn-style orange marker lines */
.hero-line{display:none!important}
.hero-copy-line{
  position:relative;
  display:inline-block;
  z-index:1;
}
.hero-copy-line::after{
  content:"";
  position:absolute;
  left:1%;
  bottom:-0.10em;
  width:98%;
  height:7px;
  background:var(--orange);
  border-radius:55% 45% 50% 48% / 55% 45% 58% 42%;
  transform:rotate(-0.7deg) skewX(-3deg);
  transform-origin:left center;
  z-index:-1;
  opacity:.98;
}
.hero-copy-line:nth-of-type(2)::after{
  left:3%;
  width:94%;
  transform:rotate(.45deg) skewX(2deg);
}
.hero-copy-line:nth-of-type(3)::after{
  left:2%;
  width:96%;
  transform:rotate(-.35deg) skewX(-1deg);
}
@media(max-width:800px){
  .hero-copy-line::after{height:5px;bottom:-0.08em}
}


/* v5: cleaner hero typography + keep Okayama scenery in mobile header */
.hero-copy-line::after{
  display:none!important;
  content:none!important;
}
.hero-inner h1,
.hero-inner h1 .hero-copy-line{
  color:#123f73!important;
}
.hero-inner > p{
  color:#3b424a!important;
}

/* Let more of the photo show behind the copy */
.hero-inner{
  background:rgba(255,255,255,.48)!important;
}

@media(max-width:800px){
  .brand-banner{
    height:auto!important;
    min-height:82px!important;
    background-image:inherit;
    background-size:cover!important;
    background-position:68% center!important;
  }
  .brand-shade{
    background:rgba(255,255,255,.58)!important;
  }
  .brand-inner{
    min-height:82px!important;
  }
}


/* v7: mobile header uses the same 岡山市画像 as desktop.
   No customizer keys or PHP image settings are changed. */
@media(max-width:800px){
  .brand-banner{
    height:82px!important;
    min-height:82px!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:72% center!important;
  }
  .brand-shade{
    min-height:82px!important;
    background:rgba(255,255,255,.54)!important;
  }
  .brand-inner{
    min-height:82px!important;
    height:82px!important;
    padding:5px 14px!important;
  }

  /* Compact mobile hero */
  .hero{
    min-height:0!important;
    height:390px!important;
    background-size:cover!important;
    background-position:62% center!important;
  }
  .hero-inner{
    min-height:390px!important;
    height:390px!important;
    padding:72px 20px 20px!important;
    background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.50) 58%,rgba(255,255,255,.12) 100%)!important;
  }
  .hero-inner h1{
    margin:0 0 12px!important;
    font-size:34px!important;
    line-height:1.32!important;
  }
  .hero-inner > p{
    margin:0!important;
    font-size:14px!important;
    line-height:1.75!important;
    max-width:94%!important;
  }
}
@media(max-width:420px){
  .hero{height:365px!important;background-position:60% center!important}
  .hero-inner{height:365px!important;min-height:365px!important;padding-top:66px!important}
  .hero-inner h1{font-size:32px!important}
}


/* v8: mobile hero photo clarity — keep header untouched */
@media(max-width:800px){
  .hero-inner{
    /* No white wash across the toilet/photo.
       Only a subtle left-side veil behind the copy. */
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.60) 0%,
      rgba(255,255,255,.38) 42%,
      rgba(255,255,255,.10) 66%,
      rgba(255,255,255,0) 82%
    )!important;
  }
  .hero-inner h1,
  .hero-inner > p{
    position:relative;
    z-index:2;
  }
}
@media(max-width:420px){
  .hero-inner{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.56) 0%,
      rgba(255,255,255,.32) 44%,
      rgba(255,255,255,.08) 68%,
      rgba(255,255,255,0) 84%
    )!important;
  }
}


/* v9: final mobile hero compacting — PC/header untouched */
@media(max-width:800px){
  .hero{
    height:310px!important;
    min-height:0!important;
    background-size:cover!important;
    background-position:60% center!important;
  }
  .hero-inner{
    height:310px!important;
    min-height:310px!important;
    padding:44px 18px 14px!important;
    /* Keep the toilet/photo clear; only a very light veil at the copy edge. */
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.20) 36%,
      rgba(255,255,255,0) 58%
    )!important;
  }
  .hero-inner h1{
    margin:0 0 10px!important;
    font-size:31px!important;
    line-height:1.28!important;
  }
  .hero-inner > p{
    margin:0!important;
    max-width:88%!important;
    font-size:12.5px!important;
    line-height:1.55!important;
  }
}
@media(max-width:420px){
  .hero{
    height:300px!important;
    background-position:60% center!important;
  }
  .hero-inner{
    height:300px!important;
    min-height:300px!important;
    padding:40px 18px 12px!important;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.16) 36%,
      rgba(255,255,255,0) 56%
    )!important;
  }
  .hero-inner h1{
    font-size:29px!important;
    line-height:1.27!important;
  }
  .hero-inner > p{
    font-size:12px!important;
    line-height:1.5!important;
  }
}


/* v10: mobile hero = photo first, copy second. PC/header untouched. */
@media(max-width:800px){
  .hero{
    height:auto!important;
    min-height:0!important;
    padding-top:190px!important;
    background-size:100% 190px!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-color:#fffaf0!important;
  }
  .hero-inner{
    height:auto!important;
    min-height:0!important;
    padding:20px 20px 22px!important;
    background:#fffaf0!important;
  }
  .hero-inner h1{
    margin:0 0 10px!important;
    font-size:29px!important;
    line-height:1.30!important;
    color:#123f73!important;
  }
  .hero-inner > p{
    margin:0!important;
    max-width:none!important;
    font-size:12.5px!important;
    line-height:1.65!important;
    color:#3b424a!important;
  }
}
@media(max-width:420px){
  .hero{
    padding-top:175px!important;
    background-size:100% 175px!important;
  }
  .hero-inner{
    padding:18px 18px 20px!important;
  }
  .hero-inner h1{
    font-size:28px!important;
    line-height:1.28!important;
  }
  .hero-inner > p{
    font-size:12px!important;
    line-height:1.6!important;
  }
}


/* v11: mobile hero — copy over photo, white support only at lower-left.
   PC and header remain unchanged. */
@media(max-width:800px){
  .hero{
    position:relative!important;
    height:310px!important;
    min-height:310px!important;
    padding-top:0!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:58% center!important;
    background-color:transparent!important;
  }

  .hero-inner{
    position:relative!important;
    height:310px!important;
    min-height:310px!important;
    padding:70px 18px 18px!important;
    background:
      linear-gradient(
        to top right,
        rgba(255,255,255,.88) 0%,
        rgba(255,255,255,.72) 25%,
        rgba(255,255,255,.34) 47%,
        rgba(255,255,255,0) 67%
      )!important;
  }

  .hero-inner h1{
    position:relative!important;
    z-index:2!important;
    margin:0 0 10px!important;
    width:72%!important;
    font-size:29px!important;
    line-height:1.28!important;
    color:#123f73!important;
  }

  .hero-inner > p{
    position:relative!important;
    z-index:2!important;
    margin:0!important;
    width:68%!important;
    max-width:68%!important;
    font-size:12px!important;
    line-height:1.55!important;
    color:#303942!important;
  }
}

@media(max-width:420px){
  .hero{
    height:300px!important;
    min-height:300px!important;
    background-size:cover!important;
    background-position:58% center!important;
  }
  .hero-inner{
    height:300px!important;
    min-height:300px!important;
    padding:64px 16px 16px!important;
    background:
      linear-gradient(
        to top right,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.74) 26%,
        rgba(255,255,255,.32) 48%,
        rgba(255,255,255,0) 67%
      )!important;
  }
  .hero-inner h1{
    width:74%!important;
    font-size:28px!important;
  }
  .hero-inner > p{
    width:70%!important;
    max-width:70%!important;
    font-size:11.5px!important;
  }
}


/* v12: mobile — white panel only behind the copy block */
@media(max-width:800px){
  .hero{
    height:300px!important;
    min-height:300px!important;
    background-size:cover!important;
    background-position:58% center!important;
  }

  .hero-inner{
    height:300px!important;
    min-height:300px!important;
    padding:48px 16px 16px!important;
    background:transparent!important;
  }

  .hero-inner h1,
  .hero-inner > p{
    box-sizing:border-box!important;
    width:62%!important;
    max-width:62%!important;
    background:rgba(255,255,255,.84)!important;
  }

  .hero-inner h1{
    margin:0!important;
    padding:10px 12px 5px!important;
    font-size:28px!important;
    line-height:1.27!important;
    color:#123f73!important;
  }

  .hero-inner > p{
    margin:0!important;
    padding:6px 12px 10px!important;
    font-size:11.5px!important;
    line-height:1.5!important;
    color:#303942!important;
  }
}

@media(max-width:420px){
  .hero{
    height:290px!important;
    min-height:290px!important;
    background-position:58% center!important;
  }
  .hero-inner{
    height:290px!important;
    min-height:290px!important;
    padding:42px 14px 14px!important;
    background:transparent!important;
  }
  .hero-inner h1,
  .hero-inner > p{
    width:64%!important;
    max-width:64%!important;
  }
  .hero-inner h1{
    padding:9px 10px 4px!important;
    font-size:27px!important;
  }
  .hero-inner > p{
    padding:6px 10px 9px!important;
    font-size:11px!important;
  }
}


/* v13: one translucent white panel behind the complete mobile copy block */
@media(max-width:800px){
  .hero{
    height:300px!important;
    min-height:300px!important;
    background-size:cover!important;
    background-position:58% center!important;
  }
  .hero-inner{
    height:300px!important;
    min-height:300px!important;
    padding:42px 14px 14px!important;
    background:transparent!important;
  }
  .hero-copy-panel{
    box-sizing:border-box!important;
    width:76%!important;
    max-width:76%!important;
    padding:11px 12px 12px!important;
    background:rgba(255,255,255,.84)!important;
  }
  .hero-copy-panel h1,
  .hero-copy-panel > p{
    width:100%!important;
    max-width:100%!important;
    background:transparent!important;
    padding:0!important;
  }
  .hero-copy-panel h1{
    margin:0 0 9px!important;
    font-size:27px!important;
    line-height:1.27!important;
    color:#123f73!important;
    white-space:normal!important;
  }
  .hero-copy-panel > p{
    margin:0!important;
    font-size:11px!important;
    line-height:1.5!important;
    color:#303942!important;
  }
}
@media(max-width:420px){
  .hero{
    height:290px!important;
    min-height:290px!important;
  }
  .hero-inner{
    height:290px!important;
    min-height:290px!important;
    padding:38px 12px 12px!important;
  }
  .hero-copy-panel{
    width:76%!important;
    max-width:76%!important;
    padding:10px 11px 11px!important;
  }
  .hero-copy-panel h1{
    font-size:26px!important;
    line-height:1.25!important;
  }
  .hero-copy-panel > p{
    font-size:10.5px!important;
    line-height:1.48!important;
  }
}


/* v14: mobile copy background blends into photo from the left edge.
   Only the panel shape changes; sizing/type/header remain as v13. */
@media(max-width:800px){
  .hero-inner{
    padding-left:0!important;
  }
  .hero-copy-panel{
    width:78%!important;
    max-width:78%!important;
    padding-left:18px!important;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.88) 68%,
      rgba(255,255,255,.60) 82%,
      rgba(255,255,255,0) 100%
    )!important;
  }
}
@media(max-width:420px){
  .hero-inner{
    padding-left:0!important;
  }
  .hero-copy-panel{
    width:78%!important;
    max-width:78%!important;
    padding-left:16px!important;
  }
}


/* v15: article body controls its own layout; remove theme duplicate title/meta/thumbnail */
.single-content-wrap{width:100%;margin:0;padding:0;}
.single-article{margin:0;padding:0;}
.single-article>.entry-content{margin:0;padding:0;}
.single-article>.entry-content>.toilet-article{margin-left:auto;margin-right:auto;}

/* v15: latest posts remain the real published-post feed */
.latest .post-card{display:block;text-decoration:none;color:inherit;}
.latest .post-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
@media(max-width:800px){
  .latest .post-grid{grid-template-columns:1fr!important;}
}

/* v16: keep long-form articles readable and restore a missing H1 after breadcrumb */
.single-article>.entry-content>.toilet-article{
  width:100%!important;
  max-width:800px!important;
  margin:0 auto!important;
  padding-left:20px!important;
  padding-right:20px!important;
}
.toilet-article>.ta-auto-title{
  margin:10px 0 12px!important;
  color:#123f73!important;
  font-size:32px!important;
  line-height:1.45!important;
  letter-spacing:.02em!important;
  font-weight:700!important;
}
@media(max-width:600px){
  .single-article>.entry-content>.toilet-article{
    max-width:100%!important;
    padding-left:15px!important;
    padding-right:15px!important;
  }
  .toilet-article>.ta-auto-title{
    font-size:26px!important;
    line-height:1.4!important;
  }
}

/* v17: final article title sizing */
.single-post .toilet-article h1,
.single-post .article-content h1,
.single-post main h1 {
  font-size:30px!important;
  line-height:1.42!important;
}
@media(max-width:600px){
  .single-post .toilet-article h1,
  .single-post .article-content h1,
  .single-post main h1 {
    font-size:24px!important;
    line-height:1.38!important;
  }
}

/* v19: force article Mizuno callouts to a consistent top-aligned mobile layout.
   This intentionally overrides the <style> block stored inside article content. */
@media (max-width:600px){
  body.single-post .toilet-article .mizuno-box{
    display:grid!important;
    grid-template-columns:68px minmax(0,1fr)!important;
    align-items:start!important;
    column-gap:10px!important;
    margin:26px 0!important;
    padding:12px 10px!important;
  }
  body.single-post .toilet-article .mizuno-box > img{
    display:block!important;
    grid-column:1!important;
    width:68px!important;
    max-width:68px!important;
    height:82px!important;
    object-fit:contain!important;
    object-position:center top!important;
    align-self:start!important;
    margin:4px 0 0!important;
  }
  body.single-post .toilet-article .mizuno-box .mizuno-talk{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:12px 13px!important;
    align-self:start!important;
  }
  body.single-post .toilet-article .mizuno-box .mizuno-talk:before{
    top:20px!important;
  }
}

/* v20: mobile Mizuno callout — character overlaps the lower-left of the speech bubble */
@media (max-width:600px){
  body.single-post .toilet-article .mizuno-box{
    position:relative!important;
    display:block!important;
    min-height:132px!important;
    margin:26px 0!important;
    padding:12px 10px 12px 10px!important;
    overflow:visible!important;
  }
  body.single-post .toilet-article .mizuno-box > img{
    position:absolute!important;
    z-index:2!important;
    left:8px!important;
    bottom:8px!important;
    width:84px!important;
    max-width:84px!important;
    height:96px!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    margin:0!important;
  }
  body.single-post .toilet-article .mizuno-box .mizuno-talk{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    width:auto!important;
    min-width:0!important;
    min-height:108px!important;
    margin:0 0 0 64px!important;
    padding:12px 13px 12px 25px!important;
  }
  body.single-post .toilet-article .mizuno-box .mizuno-talk:before{
    top:auto!important;
    bottom:27px!important;
    left:-9px!important;
  }
}
\n\n/* v21: desktop hero, latest cards, and varied Mizuno poses */
@media(min-width:801px){
  .hero-copy-panel h1{
    font-size:clamp(32px,3vw,42px)!important;
    line-height:1.38!important;
  }
  .hero-copy-panel > p{
    font-size:15px!important;
  }
}
.latest-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  justify-content:start;
}
.latest-grid .post-card{
  width:100%;
  border:1px solid #e5e8eb;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  transition:transform .18s ease,box-shadow .18s ease;
}
.latest-grid .post-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(22,45,68,.09);
}
.latest-grid .post-thumb{
  border-radius:0;
  aspect-ratio:16/10;
}
.latest-grid .post-body{
  padding:12px 14px 14px;
}
.post-category{
  display:inline-block;
  margin:0 0 6px;
  padding:2px 9px;
  border-radius:999px;
  background:#fff2e5;
  color:#d85d00;
  font-size:11px;
  font-weight:700;
}
.latest-grid .post-body h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.55;
}
@media(min-width:801px){
  .latest-grid:has(.post-card:only-child) .post-card{max-width:360px;}
}
@media(max-width:800px){
  .latest-grid{
    display:block!important;
  }
  .latest-grid .post-card{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    gap:11px!important;
    margin:0!important;
    padding:9px 0!important;
    border:0!important;
    border-bottom:1px solid #eee!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .latest-grid .post-thumb{
    width:112px!important;
    height:78px!important;
    border-radius:6px!important;
    object-fit:cover!important;
  }
  .latest-grid .post-body{padding:0!important;}
  .latest-grid .post-body h3{font-size:14px!important;margin-bottom:3px!important;}
  .post-category{font-size:10px;margin-bottom:3px;padding:1px 7px;}
}

/* v22 category archive */
.category-archive{background:#fff;padding:34px 24px 70px}.category-archive-inner{max-width:1000px;margin:0 auto}.archive-breadcrumb{font-size:13px;color:#777;margin-bottom:18px}.archive-breadcrumb a{color:#315d8c}.category-archive-head{margin-bottom:30px;padding:24px 26px;background:#fffaf0;border:1px solid #eadcc7;border-radius:12px}.category-archive-head h1{margin:0 0 8px;color:var(--navy);font-size:32px;line-height:1.4}.category-description{color:#5f6870;font-size:15px}.category-description p{margin:0}.archive-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.archive-post-card{display:block;background:#fff;border:1px solid #e6e6e6;border-radius:10px;overflow:hidden;transition:.2s}.archive-post-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}.archive-post-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:#edf0f2}.archive-placeholder{border-bottom:1px solid #eee}.archive-post-body{padding:15px 16px 18px}.archive-post-date{font-size:12px;color:#858b91;margin-bottom:5px}.archive-post-body h2{margin:0 0 8px;color:var(--navy);font-size:18px;line-height:1.55}.archive-post-body p{margin:0;color:#666;font-size:13px;line-height:1.7}.archive-pagination{margin-top:35px;text-align:center}.archive-pagination .nav-links{display:flex;justify-content:center;gap:7px}.archive-pagination .page-numbers{padding:7px 12px;border:1px solid #d9dfe5;border-radius:5px;color:var(--navy)}.archive-pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}.archive-empty{padding:35px;text-align:center;background:#fafafa;border-radius:10px;color:#777}@media(max-width:800px){.category-archive{padding:24px 14px 50px}.category-archive-head{padding:18px}.category-archive-head h1{font-size:25px}.archive-post-grid{grid-template-columns:1fr;gap:14px}.archive-post-card{display:grid;grid-template-columns:115px 1fr}.archive-post-thumb{height:100%;min-height:105px;aspect-ratio:auto}.archive-post-body{padding:11px 12px}.archive-post-body h2{font-size:15px;margin-bottom:4px}.archive-post-body p{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}