/*
Theme Name: Bike Shop Mitsui
Theme URI: https://bikeshop-mitsui.site
Author: Bike Shop Mitsui
Author URI: https://bikeshop-mitsui.site
Description: 有限会社バイクショップ三井（福岡県大牟田市）公式サイト用テーマ。Honda・YAMAHA・SUZUKI 正規取扱店。サザエ食品サイトを参考にした、白ベース×ロゴレッドの上品で動きのあるデザイン。
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bikeshop-mitsui
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:#1B2140;font-family:'Zen Kaku Gothic New',sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:#E10613;text-decoration:none}
a:hover{color:#B4040F}
::selection{background:#E10613;color:#FFFFFF}
h1,h2,h3,h4{word-break:auto-phrase;text-wrap:balance}
p{word-break:auto-phrase;text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@keyframes reveal{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
@keyframes revealX{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes heroIn{0%{opacity:0;transform:translateY(46px)}100%{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes imgParallax{from{transform:scale(1.18) translateY(-3%)}to{transform:scale(1.18) translateY(3%)}}
@keyframes hdrDrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes navFade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(38px) scale(.9)}to{opacity:1;transform:none}}
@keyframes titleWipe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-14px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes footRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes textRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* per-element text reveal on scroll */
.m-body h3,.m-body h4,.m-body p,.m-body li,.m-body > div{animation:textRise .7s both linear;animation-timeline:view();animation-range:entry 0% entry 88%}
.hdr{animation:hdrDrop .8s .1s cubic-bezier(.2,.8,.25,1) both}
.navlinks a{animation:navFade .5s both;animation-delay:calc(.55s + var(--i,0) * .07s)}
.m-title{animation:titleWipe .9s both linear;animation-timeline:view();animation-range:entry 0% entry 80%}
.m-pop{animation:popIn .8s both linear;animation-timeline:view();animation-range:entry 0% entry 92%}
.m-cta{animation:popIn .85s both linear;animation-timeline:view();animation-range:entry 0% entry 90%}
.m-foot{animation:footRise .9s both linear;animation-timeline:view();animation-range:entry 0% entry 90%}

/* top scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:#E10613;transform-origin:0 50%;transform:scaleX(0);animation:barGrow auto linear;animation-timeline:scroll(root)}

/* full-bleed band images: gentle parallax while in view */
.svc-img .ph-img,.band .ph-img,.shop-map .ph-img{animation:imgParallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important}
  .svc-img .ph-img,.band .ph-img,.shop-map .ph-img{animation:none !important}
}

/* image fill helper (replaces the design's <image-slot>) */
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:repeating-linear-gradient(45deg,#EEF0F5,#EEF0F5 12px,#E7EAF1 12px,#E7EAF1 24px);color:#9AA0B2;font-size:12px;letter-spacing:.08em;line-height:1.7}

/* PAD / tablet */
@media (max-width:1024px){
  .navlinks{gap:16px !important}
}
/* smartphone */
@media (max-width:980px){
  .hdr{padding:11px 18px !important}
  .logo-sub{display:none !important}
  .hdr-tel{padding:9px 15px !important;font-size:13px !important}
  .navlinks{display:none !important}
  .hamburger{display:flex !important}
}
@media (max-width:900px){
  .svc-band{min-height:0 !important}
  .svc-text{justify-content:flex-start !important;padding:clamp(40px,7vw,72px) clamp(26px,7vw,60px) !important}
  .svc-img{min-height:clamp(300px,54vw,460px) !important}
  .svc-wm{font-size:clamp(50px,12vw,88px) !important}
  .greet-portrait{flex-basis:auto !important;width:100% !important;max-width:420px !important;margin-left:auto !important;margin-right:auto !important;order:2 !important}
  section:not(#top):not(.band){padding-top:clamp(30px,5vh,50px) !important;padding-bottom:clamp(30px,5vh,50px) !important}
}
@media (max-width:560px){
  .hdr-tel{display:none !important}
  .hero-pc-img{display:none !important}
  .hero-sp-img{display:block !important}
  .hero-sec{align-items:flex-start !important;min-height:0 !important;aspect-ratio:1059/2164 !important}
  .hero-content{padding-top:104px !important;padding-bottom:24px !important}
  .hero-badge-br{display:block !important;height:0 !important}
  .stats-row{gap:16px 14px !important}
  .stats-row > div{flex:1 1 calc(50% - 7px) !important;min-width:0 !important}
  .reasons-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .reasons-grid > div{padding:24px 16px !important}
}
@media (max-width:980px){
  .steps-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:900px){
  .shop-map{order:2 !important}
}
@media (max-width:880px){
  .stack-img-top .svc-img{order:-1 !important}
  .stack-img-bottom .svc-img{order:1 !important}
}
@media (min-width:561px) and (max-width:980px){
  .stats-row{gap:16px !important}
  .stats-row > div{flex:1 1 calc(25% - 12px) !important;min-width:0 !important}
}

/* generic content styling for lower pages (page.php / index.php) */
.page-wrap{max-width:900px;margin:0 auto;padding:clamp(110px,16vh,160px) clamp(22px,4vw,52px) clamp(60px,9vh,110px)}
.page-wrap h1{font-family:'Shippori Mincho',serif;font-weight:700;font-size:clamp(28px,4vw,46px);letter-spacing:.04em;color:#1B2140;margin:0 0 8px}
.page-wrap .page-eyebrow{font-size:11px;font-weight:500;letter-spacing:.34em;color:#E10613;text-transform:uppercase;margin:0 0 14px}
.page-wrap h2{font-family:'Shippori Mincho',serif;font-weight:700;font-size:clamp(22px,2.6vw,32px);color:#1B2140;margin:48px 0 18px}
.page-wrap h3{font-family:'Shippori Mincho',serif;font-weight:700;font-size:clamp(18px,2vw,22px);color:#1B2140;margin:32px 0 12px}
.page-wrap p,.page-wrap li{font-size:15px;line-height:2.1;letter-spacing:.03em;color:#3A3F52}
.page-wrap .lead{border-left:3px solid #E10613;padding-left:20px;margin:28px 0 40px}
.page-wrap img{border-radius:3px;margin:24px 0}

/* Mobile width / text alignment fix */
@media (max-width:560px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  main,section{max-width:100%}

  /* Keep content evenly spaced from both screen edges */
  section:not(#top):not(.band){padding-left:18px !important;padding-right:18px !important}
  section > div[style*="max-width"]{padding-left:0 !important;padding-right:0 !important;width:100% !important;max-width:none !important}

  /* Remove desktop minimum widths that squeeze mobile text */
  .m-body,.greet-portrait,.shop-map,
  section div[style*="min-width:300px"],
  section div[style*="min-width:290px"],
  section div[style*="min-width:280px"]{
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  /* Intro heading must wrap inside the screen */
  h1,h2,h3,h4,p{max-width:100%}
  h2[style*="text-wrap:nowrap"]{text-wrap:wrap !important}
  h2 span[style*="white-space:nowrap"]{white-space:normal !important}

  /* Service sections use the full mobile width */
  .svc-band{grid-template-columns:minmax(0,1fr) !important;width:100% !important}
  .svc-text{padding:42px 18px !important;width:100% !important}
  .svc-text .m-body{max-width:none !important}
  .svc-wm{left:18px !important;right:auto !important;max-width:calc(100% - 36px);overflow:hidden}

  /* Make paragraphs visually balanced rather than a narrow left column */
  .m-body p{width:100% !important}

  /* Shop information rows fit narrow screens */
  #shop .m-body > div{gap:12px !important}
  #shop .m-body > div > span:first-child{flex-basis:76px !important}

  /* Footer inner content also uses balanced side margins */
  footer > div{padding-left:18px !important;padding-right:18px !important}
}


/* ==========================================================
   Mobile layout reset v1.5
   All ordinary content uses exactly the same left/right gutter.
   ========================================================== */
@media (max-width: 600px){
  :root{--mobile-gutter:18px}

  html,body{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    overflow-x:hidden !important;
  }

  body > div,
  main{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Every section itself stays inside the viewport. */
  main > section,
  body section{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Sections which carry their own content receive one uniform gutter. */
  main > section:not(#top):not(.band):not(#lineup):not(#contact),
  body section:not(#top):not(.band):not(#lineup):not(#contact){
    padding-left:var(--mobile-gutter) !important;
    padding-right:var(--mobile-gutter) !important;
  }

  /* Full-width sections keep their background full bleed; only inner content is inset. */
  #lineup > div:first-child,
  #contact > div[style*="max-width"],
  section[style*="background"] > div[style*="max-width"]{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--mobile-gutter) !important;
    padding-right:var(--mobile-gutter) !important;
  }

  /* Remove nested double padding. */
  section:not(#top):not(.band):not(#lineup):not(#contact) > div[style*="max-width"],
  section:not(#top):not(.band):not(#lineup):not(#contact) > div:not(.svc-band){
    max-width:100% !important;
  }
  section:not(#top):not(.band):not(#lineup):not(#contact) > div[style*="padding:0 clamp"]{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Flex/grid children must never retain desktop widths. */
  section div,
  section article,
  section aside,
  .m-body,
  .greet-portrait,
  .shop-map{
    min-width:0 !important;
    max-width:100% !important;
  }

  section div[style*="display:flex"]{
    width:100%;
  }

  /* Main two-column content becomes one clean full-width column. */
  section > div[style*="flex-wrap:wrap"],
  section > div > div[style*="flex-wrap:wrap"]{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:30px !important;
  }

  section > div[style*="flex-wrap:wrap"] > *,
  section > div > div[style*="flex-wrap:wrap"] > *{
    flex-basis:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Service text uses the same 18px gutter on both sides. */
  .svc-band{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }
  .svc-text{
    width:100% !important;
    max-width:100% !important;
    padding:44px var(--mobile-gutter) !important;
  }
  .svc-text .m-body{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  .svc-wm{
    left:var(--mobile-gutter) !important;
    right:auto !important;
    max-width:calc(100% - (var(--mobile-gutter) * 2)) !important;
  }

  /* Text always fills the available content width. */
  h1,h2,h3,h4,p,ul,ol,
  .m-body,
  .m-body > *{
    width:auto !important;
    max-width:100% !important;
    margin-left:0;
    margin-right:0;
    overflow-wrap:anywhere;
  }
  h2[style*="text-wrap:nowrap"]{text-wrap:wrap !important}
  h2 span[style*="white-space:nowrap"]{white-space:normal !important}

  /* Avoid translated animation frames creating apparent blank space. */
  .m-body,
  .m-title,
  .m-pop,
  .m-cta,
  .shop-map{
    transform:none !important;
  }

  /* Cards/grids use the complete inner width. */
  .reasons-grid,
  .steps-grid,
  #contact div[style*="display:grid"]{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:minmax(0,1fr) !important;
  }

  /* Stats remain two columns, but stay exactly inside the gutter. */
  .stats-row{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px 14px !important;
  }
  .stats-row > div{
    width:100% !important;
    min-width:0 !important;
  }

  /* Shop rows: fixed label plus a truly flexible value column. */
  #shop .m-body{width:100% !important}
  #shop .m-body > div{
    width:100% !important;
    display:grid !important;
    grid-template-columns:76px minmax(0,1fr) !important;
    gap:12px !important;
  }
  #shop .m-body > div > span{
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:anywhere;
  }

  footer > div{
    width:100% !important;
    max-width:100% !important;
    padding-left:var(--mobile-gutter) !important;
    padding-right:var(--mobile-gutter) !important;
  }
}