/*
Theme Name: Smapple Mobile
Description: モバイル修理スマップル（マルチサイト共用・メイン＝案内／店サイト＝料金表と店の情報）
Version: 1.0.22
Requires PHP: 8.1
Text Domain: smapple-mobile
*/
:root{
  --pk:#E4007F; --pk-l:#F2338A; --pk-d:#B00063;
  --or:#F05A22; --ye:#F5A623; --gr:#5FB35A; --bl:#2E8FD4; --pu:#8878BE;
  --ink:#222; --sub:#666; --line:#e6e6ea; --bg:#fff; --soft:#fdf2f8;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif}
a{color:var(--pk-d)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ヘッダー */
.hd{background:#fff;color:var(--pk-d);position:sticky;top:0;z-index:20;border-bottom:4px solid var(--pk);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.logo{color:var(--pk-d);text-decoration:none;font-weight:900;line-height:1.2;font-size:16px;display:flex;align-items:center;gap:10px;padding:6px 0}
.logo img{height:44px;width:auto;display:block}
.logo-store{font-size:15px;font-weight:900;color:var(--pk-d);white-space:nowrap}
@media(max-width:700px){.logo img{height:36px}.logo-store{font-size:13px}}
.hd nav a{color:var(--pk-d);text-decoration:none;font-weight:700;font-size:14px;margin-left:14px}
.hd .tel{background:var(--pk);color:#fff;border-radius:99px;padding:6px 14px;font-weight:800;text-decoration:none;white-space:nowrap;font-size:14px}
.hd .store-nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.hd .store-nav .tel{margin-left:14px;color:#fff}
@media(max-width:720px){.hd nav{display:none}
  .hd .wrap{flex-wrap:wrap}
  .hd .store-nav{display:flex;width:100%;justify-content:space-between;border-top:1px solid #f3c6dd;padding:6px 0 8px}
  .hd .store-nav a{margin:0;font-size:13px}
  .hd .store-nav .tel{padding:4px 10px;font-size:12px;margin-left:0}
}

/* カプセル模様 */
.caps{position:relative;overflow:hidden}
.caps::before,.caps::after{content:"";position:absolute;width:250px;height:200px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 200'%3E%3Cg transform='rotate(45 125 100)'%3E%3Crect x='20' y='10' width='30' height='120' rx='15' fill='%23F05A22'/%3E%3Crect x='65' y='40' width='30' height='150' rx='15' fill='%23F5A623'/%3E%3Crect x='110' y='0' width='30' height='110' rx='15' fill='%235FB35A'/%3E%3Crect x='155' y='45' width='30' height='130' rx='15' fill='%232E8FD4'/%3E%3Crect x='200' y='15' width='30' height='95' rx='15' fill='%238878BE'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
.caps::before{left:-70px;bottom:-60px}
.caps::after{right:-70px;top:-60px}
@media(max-width:600px){.caps::before,.caps::after{width:150px;height:120px}}
.caps>*{position:relative;z-index:1}

/* ヒーロー */
.hero{background:linear-gradient(135deg,var(--pk-l),var(--pk) 55%,var(--pk-d));color:#fff;padding:48px 0 56px;text-align:center}
.hero .en{letter-spacing:.35em;font-size:12px;font-weight:700;opacity:.9}
.hero h1{font-size:clamp(26px,6vw,44px);font-weight:900;line-height:1.3;margin:.3em 0}
.hero p{margin:.4em auto 0;max-width:640px;font-weight:600}
.hero.has-photo{text-align:left;padding:22px 0 26px}
.hero.has-photo h1{margin:.1em 0 .35em;font-size:clamp(24px,3.2vw,38px)}
.hero.has-photo p{margin-top:.3em}
.hp-menu{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hp-menu a{display:block;background:#fff;color:var(--pk-d);text-decoration:none;border-radius:12px;padding:7px 14px;font-size:12px;font-weight:700;line-height:1.35;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.hp-menu b{display:block;font-size:16px;font-weight:900}
.hp-mk{font-size:13px;opacity:.95}
.hp-meta{font-size:14px}
.hp-photo{position:relative}
.hp-photo figcaption{position:absolute;left:-10px;bottom:-12px;background:#F5A623;color:#3b2500;font-weight:900;font-size:12px;padding:6px 12px;border-radius:99px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.hp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:36px;align-items:center}
.hp-grid .hp-photo{order:2;margin:0;border:6px solid #fff;border-radius:18px;overflow:visible;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hp-grid .hp-photo img{display:block;width:100%;height:auto;border-radius:12px}
.hp-grid .hp-txt{order:1}
.hero.has-photo p{margin-left:0}
.hero.has-photo .btns{justify-content:flex-start}
@media(max-width:760px){
  .hp-grid{grid-template-columns:1fr;gap:20px}
  .hp-grid .hp-photo{order:0;max-width:340px;margin:0 auto 6px;transform:none}
  .hp-menu{justify-content:center}
  .hero.has-photo{text-align:center}
  .hero.has-photo p{margin-left:auto}
  .hero.has-photo .btns{justify-content:center}
}
.hero .img{max-width:720px;margin:20px auto 0;border-radius:var(--r);overflow:hidden}
/* トップ画像（チャッピー製・左が空き）＝PCは左に文字を重ねる／スマホは画像の下に文字 */
.hero2{background:#fff;border-bottom:6px solid var(--pk)}
.hero2-in{position:relative;max-width:1600px;margin:0 auto}
.hero2 picture img{width:100%;height:auto;aspect-ratio:3/1;max-height:400px;min-height:320px;object-fit:cover;object-position:right center}
.hero2-txt{position:absolute;left:5%;top:50%;transform:translateY(-50%);width:48%;color:var(--ink);background:rgba(255,255,255,.9);border-radius:18px;padding:14px 22px 18px}
.hero2 .en{color:var(--pk);letter-spacing:.35em;font-size:13px;font-weight:800}
.hero2 h1{margin:.15em 0 .25em;font-size:clamp(26px,2.9vw,42px);line-height:1.25;font-weight:900;color:var(--pk-d);text-wrap:balance}
.hero2 p{margin:0;font-weight:700;font-size:clamp(14px,1.3vw,18px);color:#444}
.hero2 .btns{justify-content:flex-start}
.hero2-logo{display:block;height:clamp(48px,5vw,72px);width:auto;margin:0 0 6px}
.btn-line{border:2px solid var(--pk);color:var(--pk-d);background:#fff}
@media(max-width:700px){
  .hero2-txt{position:static;transform:none;width:auto;padding:18px 16px 26px;text-align:center;background:none;border-radius:0}
  .hero2 picture img{aspect-ratio:16/9;max-height:none;min-height:0;object-position:right center}
  .hero2 h1{font-size:clamp(24px,7vw,32px)}
  .hero2 h1 br{display:none}
  .hero2-logo{margin:0 auto 6px;height:46px}
  .hero2 .btns{justify-content:center}
}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.btn{display:inline-block;padding:13px 22px;border-radius:99px;font-weight:800;text-decoration:none;text-align:center}
.btn-w{background:#fff;color:var(--pk-d)}
.btn-p{background:var(--pk);color:#fff}
.btn-y{background:var(--ye);color:#3a2600}
.btn-o{border:2px solid #fff;color:#fff}

/* セクション */
.sec{padding:44px 0}
.sec.soft{background:var(--soft)}
.ttl{text-align:center;margin:0 0 24px}
.ttl .en{display:block;color:var(--pk);letter-spacing:.3em;font-size:12px;font-weight:800}
.ttl h2{margin:.1em 0 0;font-size:clamp(21px,4.6vw,30px);font-weight:900}
h1.pt{font-size:clamp(22px,5vw,32px);font-weight:900;margin:.2em 0 .5em;line-height:1.35}
.lead{color:var(--sub)}

/* カード */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{display:block;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);transition:.15s}
a.card:hover{border-color:var(--pk);transform:translateY(-2px)}
.card b{display:block;font-size:17px;font-weight:900}
.card small{color:var(--sub)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:900;margin-bottom:8px}
.card.off{opacity:.55;border-style:dashed}
.region{margin:18px 0 6px;font-weight:900;color:var(--pk-d);border-left:6px solid var(--pk);padding-left:8px}

/* 料金表 */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.tabs button{border:2px solid var(--pk);background:#fff;color:var(--pk-d);border-radius:99px;padding:6px 14px;font-weight:800;font-size:14px;cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--pk);color:#fff}
.search{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;font-size:16px;margin-bottom:12px}
.search:focus{outline:none;border-color:var(--pk)}
.pt-wrap{overflow-x:auto;border-radius:var(--r);border:2px solid var(--line)}
table.price{width:100%;border-collapse:collapse;min-width:420px;background:#fff}
table.price th,table.price td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.price th:first-child,table.price td:first-child{text-align:left;white-space:normal}
table.price thead th{background:var(--pk);color:#fff;font-size:14px;position:sticky;top:0}
table.price tbody tr:nth-child(even){background:#fafafa}
table.price .mk{background:var(--soft)!important;font-weight:900;color:var(--pk-d);text-align:left}
table.price td.na{color:#bbb}
.note{font-size:13px;color:var(--sub)}

/* 店の情報 */
.info{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden}
.info th,.info td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.info th{width:30%;background:var(--soft);color:var(--pk-d);font-weight:800;white-space:nowrap}
.map{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--r);margin-top:14px}
.route{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));counter-reset:rt}
.route figure{margin:0;background:#fff;border:2px solid var(--line);border-radius:var(--r);overflow:hidden}
.route img{width:100%;aspect-ratio:4/3;object-fit:cover}
.route figcaption{padding:10px 12px;font-size:14px}
.route figcaption b{display:block;color:var(--pk-d)}
.route figcaption b::before{counter-increment:rt;content:counter(rt) ". "}
.badge{display:inline-block;background:var(--pk);color:#fff;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:800}

/* 流れ・FAQ */
.flow{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));counter-reset:fl;padding:0;list-style:none}
.flow li{background:#fff;border-radius:var(--r);padding:16px;border:2px solid var(--line)}
.flow li::before{counter-increment:fl;content:"STEP " counter(fl);display:block;color:var(--pk);font-weight:900;font-size:13px;letter-spacing:.1em}
.faq details{background:#fff;border:2px solid var(--line);border-radius:12px;margin-bottom:8px;padding:12px 14px}
.faq summary{font-weight:800;cursor:pointer}
.faq summary::before{content:"Q. ";color:var(--pk)}
.faq p{margin:.6em 0 0}

/* パンくず */
.bc{font-size:13px;color:var(--sub);padding:12px 0 0}
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.bc li+li::before{content:"›";margin-right:4px;color:#bbb}
.bc a{color:var(--sub)}

/* フッター */
.ft{background:#2b2b2f;color:#ddd;padding:32px 0 90px;font-size:14px;margin-top:40px}
.ft a{color:#fff}
.ft .reg{background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;margin:14px 0;display:inline-block}
.ft .reg b{color:var(--pk-d)}
.fixbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:30}
.fixbar a{flex:1;padding:12px 6px;border-radius:12px;text-align:center;font-weight:900;text-decoration:none;font-size:15px}
.fixbar .t{background:var(--pk);color:#fff}
.fixbar .r{background:#fff;border:2px solid var(--pk);color:var(--pk-d)}
@media(min-width:900px){.fixbar{display:none}.ft{padding-bottom:32px}}
.content{padding:24px 0}
.card-txt{justify-content:center;text-align:center}

/* 店トップ：チャッピー製の帯（右に外観） */
.hero.has-banner{position:relative;padding:0;text-align:left;background:#E10275}
.hero.has-banner::before,.hero.has-banner::after{display:none}
.hb-img img{display:block;width:100%;height:auto;aspect-ratio:3/1;max-height:430px;min-height:330px;object-fit:cover;object-position:right center}
.hb-txt{position:absolute;inset:0;display:flex;align-items:center}
.hb-txt>div{max-width:50%;background:rgba(200,0,110,.82);border-radius:18px;padding:16px 22px 20px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero.has-banner .btns{gap:8px}
.hero.has-banner .btns .btn{padding:11px 16px;font-size:14px}
.hero.has-banner h1{margin:.1em 0 .35em;font-size:clamp(24px,2.8vw,38px)}
.hero.has-banner p{margin:.3em 0 0}
.hero.has-banner .btns{justify-content:flex-start}
@media(max-width:760px){
  .hb-img img{aspect-ratio:16/9;min-height:0;max-height:none;object-position:right center}
  .hb-txt{position:static;display:block;padding:16px 16px 26px;text-align:center}
  .hb-txt>div{max-width:none;background:none;box-shadow:none;padding:0}
  .hero.has-banner .btns,.hero.has-banner .hp-menu{justify-content:center}
}