@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* =========================================================
   ECラピッド カスタムテーマ
   BASE 既定テーマの上に重ねる。既存レイアウトは壊さない。
   ========================================================= */

:root{
  --ink:#141C24;--ink2:#5A6774;--ink3:#8A96A2;
  --line:#E3E8ED;--line2:#EFF2F5;
  --bg:#FFFFFF;--bg2:#F4F6F8;--bg3:#E9EEF2;
  --brand:#0B4F9E;--brandD:#083C79;--danger:#B3261E;
  --sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --num:"Inter","Noto Sans JP",-apple-system,sans-serif;
  --maxw:1180px;--r:10px;
}

body.shop.template{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.8;letter-spacing:.04em;
  word-break:normal;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
body.shop .wrapper{max-width:var(--maxw);margin:0 auto;padding:0 20px;box-sizing:border-box;}
body.shop img{max-width:100%;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important;}}

/* ---------- ヘッダー ---------- */
/* 既定テーマは content-box・固定幅・罫線つきなので、そこを打ち消してから組み直す */
#mainHeader{width:auto;max-width:none;margin:0;padding:0;border:0;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200;
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);}
#mainHeader #shopHeader{width:auto;max-width:var(--maxw);box-sizing:border-box;border:0;
  margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;}
#mainHeader #shopHeader h1{margin:0;padding:0;flex:0 0 auto;line-height:0;}
#mainHeader #shopHeader h1 a#logo{display:block;line-height:0;}
#shopHeader #logo img{max-height:32px;width:auto;height:auto;display:block;}
#mainHeader #shopHeader nav{flex:1 1 auto;min-width:0;width:auto;border:0;margin:0;}
#mainHeader #shopHeader nav > ul{display:flex;align-items:center;justify-content:flex-end;
  gap:2px;flex-wrap:wrap;margin:0;padding:0;width:auto;}
#mainHeader #shopHeader nav > ul > li{list-style:none;float:none;margin:0;padding:0;
  width:auto;flex:0 0 auto;display:block;}
#mainHeader .mainHeaderNavColor{display:inline-block;padding:7px 11px;border-radius:8px;
  font-size:12.5px;font-weight:500;letter-spacing:.09em;color:var(--ink2);
  transition:color .18s ease,background-color .18s ease;}
#mainHeader a.mainHeaderNavColor:hover{color:var(--brand);background:var(--bg2);}
#category-menu > .mainHeaderNavColor{cursor:pointer;}
#category-menu .category-list{background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 34px rgba(20,28,36,.13);padding:6px;}

/* 検索 */
#shopHeader .itemSearch{flex:0 0 auto;}
#shopHeader .itemSearch__form{display:flex;align-items:center;background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;padding:1px 3px 1px 14px;
  transition:border-color .18s ease,background-color .18s ease;}
#shopHeader .itemSearch__form:focus-within{background:#fff;border-color:var(--brand);}
#shopHeader .itemSearch__field{border:0;background:transparent;font:inherit;font-size:13.5px;
  letter-spacing:.03em;padding:7px 0;width:140px;outline:none;color:var(--ink);box-shadow:none;}
#shopHeader .itemSearch__btn{border:0;background:transparent;cursor:pointer;
  padding:6px 9px;color:var(--ink2);display:flex;align-items:center;transition:color .18s ease;}
#shopHeader .itemSearch__btn:hover{color:var(--brand);}

/* ---------- トップのヒーロー ---------- */
.ecrHero{background:linear-gradient(180deg,var(--bg2) 0%,#fff 100%);
  border-bottom:1px solid var(--line2);}
.ecrHero__inner{width:auto;max-width:var(--maxw);box-sizing:border-box;margin:0 auto;padding:54px 20px 48px;}
.ecrHero__eyebrow{font-size:12px;font-weight:500;letter-spacing:.2em;
  color:var(--brand);margin:0 0 16px;}
.ecrHero__title{font-size:clamp(26px,4.4vw,40px);line-height:1.5;font-weight:700;
  letter-spacing:.03em;color:var(--ink);margin:0 0 18px;text-wrap:balance;}
.ecrHero__lead{font-size:15px;line-height:2;color:var(--ink2);max-width:32em;margin:0 0 30px;}
.ecrHero__facts{display:flex;flex-wrap:wrap;margin:0;padding:0;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.ecrHero__facts li{list-style:none;flex:1 1 190px;padding:16px 20px;
  border-right:1px solid var(--line2);font-size:12.5px;line-height:1.7;
  color:var(--ink3);letter-spacing:.05em;}
.ecrHero__facts li:last-child{border-right:0;}
.ecrHero__facts strong{display:block;font-family:var(--num);font-size:15px;font-weight:600;
  color:var(--ink);letter-spacing:.02em;margin-bottom:1px;font-variant-numeric:tabular-nums;}

/* 一覧の見出し */
.ecrHead{width:auto;max-width:var(--maxw);box-sizing:border-box;margin:52px auto 22px;padding:0 20px;
  display:flex;align-items:baseline;gap:14px;}
.ecrHead h2{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--ink);margin:0;}
.ecrHead span{font-family:var(--num);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--ink3);}
.ecrHead::after{content:"";flex:1 1 auto;height:1px;background:var(--line);}

/* ---------- 商品一覧 ---------- */
#shopTopPage #mainContent.itemList{width:auto;max-width:var(--maxw);box-sizing:border-box;
  margin:0 auto 88px;padding:0 20px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,208px),1fr));
  gap:38px 24px;float:none;}
#shopTopPage #mainContent.itemList .item.part{float:none;width:auto;
  margin:0;padding:0;display:flex;flex-direction:column;}
/* 正方形タイル。既定テーマはスマホで固定30pxにするので width を明示で奪い返す */
#shopTopPage .itemList .itemImg{position:relative;margin:0 0 13px;
  width:100% !important;height:auto !important;box-sizing:border-box !important;
  padding:12px !important;align-self:stretch;
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);
  aspect-ratio:1/1;overflow:hidden;}
#shopTopPage .itemList .itemImg > a{display:flex !important;width:100% !important;height:100% !important;
  align-items:center;justify-content:center;padding:0 !important;box-sizing:border-box;}
#shopTopPage .itemList .itemImg img.image-resize{width:100% !important;height:100% !important;
  object-fit:contain !important;max-width:none !important;
  display:block;margin:0;position:static;
  transition:transform .38s cubic-bezier(.2,.7,.3,1);}
#shopTopPage .itemList .item.part:hover .itemImg img.image-resize{transform:scale(1.05);}
#shopTopPage .itemList .itemTitle{margin:0 0 9px;padding:0;}
/* 既定テーマが nowrap + ellipsis + 中央寄せを !important 相当の強さで当てているので上書きする */
#shopTopPage .itemList .itemTitle h2{color:var(--ink);transition:color .18s ease;
  white-space:normal !important;text-overflow:clip !important;overflow:hidden !important;
  display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;
  font-size:13px !important;line-height:1.65 !important;font-weight:400 !important;
  letter-spacing:.03em !important;text-align:left !important;min-height:2.6em;}
#shopTopPage .itemList .item.part:hover .itemTitle h2{color:var(--brand);}
#shopTopPage .itemList .itemDetail{margin:auto 0 0;padding:0;}
#shopTopPage .itemList .itemPrice{font-family:var(--num);font-size:15.5px;font-weight:600;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink);
  list-style:none;margin:0;padding:0;}
#shopTopPage .itemList .itemPrice,#shopTopPage .itemList .itemDetail,
#shopTopPage .itemList .itemDetail li,#shopTopPage .itemList .itemTitle{text-align:left !important;}
#shopTopPage .itemList .soldout_cover{background:rgba(255,255,255,.78);border-radius:var(--r);}
#shopTopPage .itemList .soldout_cover p{font-family:var(--num);font-size:11px;font-weight:600;
  letter-spacing:.16em;color:var(--danger);}
#shopTopPage .itemList .comingSoon,#shopTopPage .itemList .preOrder{
  font-size:11px;letter-spacing:.12em;color:var(--ink3);}

/* ---------- 商品ページ ---------- */
/* 既定テーマの padding:80px 65px を外して詰める */
#shopDetailPage #mainContent.wrapper{width:auto;max-width:var(--maxw);box-sizing:border-box;
  margin:38px auto 88px;padding:0 20px;}
#shopDetailPage h1.itemTitle{color:var(--ink);margin:0 0 20px;
  white-space:normal !important;text-overflow:clip !important;overflow:visible !important;
  font-size:20px !important;line-height:1.7 !important;font-weight:500 !important;
  letter-spacing:.03em !important;text-align:left !important;}
#shopDetailPage .itemImgSlide,#shopDetailPage .imgBox{background:var(--bg2);
  border:1px solid var(--line2);border-radius:12px;overflow:hidden;}
#shopDetailPage .smallImgBox{background:var(--bg2);border:1px solid var(--line2);
  border-radius:8px;overflow:hidden;transition:border-color .18s ease;}
#shopDetailPage #slideImgPager a:hover .smallImgBox{border-color:var(--brand);}
#shopDetailPage .itemDescription{font-size:15px;line-height:2.05;letter-spacing:.045em;
  color:var(--ink2);}
#shopDetailPage .purchase .price__value{font-family:var(--num);font-size:30px;font-weight:600;
  letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink);}
#shopDetailPage .purchase .price__tax{font-family:var(--sans);font-size:12px;
  letter-spacing:.06em;color:var(--ink3);margin-left:8px;}
#shopDetailPage .purchase .price__value--proper{font-size:16px;font-weight:400;
  color:var(--ink3);text-decoration:line-through;}
#shopDetailPage .purchase .price__discountRate{font-family:var(--num);font-size:13px;
  font-weight:600;color:var(--danger);margin-left:8px;}
#shopDetailPage .purchase .price__label{font-size:12px;letter-spacing:.06em;color:var(--ink3);}
#shopDetailPage .soldout{font-family:var(--num);font-size:13px;font-weight:600;
  letter-spacing:.14em;color:var(--danger);}

/* 購入エリア。既定テーマの黒ボタン・点線罫を置き換える */
#shopDetailPage div.purchase{padding:22px 0;
  border-top:1px solid var(--line) !important;border-bottom:1px solid var(--line) !important;
  border-left:0 !important;border-right:0 !important;}
#shopDetailPage .purchase .itemPrice{border:0;padding-top:0;}
#shopDetailPage .purchaseButton__btn{color:#fff;border:0;border-radius:10px;width:100%;
  height:54px;min-height:54px;font-size:15px;font-weight:500;letter-spacing:.1em;cursor:pointer;
  background:var(--brand) !important;background-color:var(--brand) !important;
  transition:background-color .18s ease;}
#shopDetailPage .purchaseButton__btn:hover{
  background:var(--brandD) !important;background-color:var(--brandD) !important;}
#shopDetailPage .amountSelect{border:1px solid var(--line);border-radius:8px;height:42px;
  padding:0 12px;font:inherit;font-size:14px;background:#fff;color:var(--ink);min-width:110px;}

/* ---------- フッター ---------- */
#mainFooter{width:auto;max-width:none;margin:64px 0 0;padding:0;
  background:var(--bg2);border-top:1px solid var(--line);}
#mainFooter .footerMenu{width:auto;max-width:var(--maxw);box-sizing:border-box;
  margin:0 auto;padding:26px 20px;
  display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;}
#mainFooter .footerMenu ul{display:flex;gap:8px 24px;flex-wrap:wrap;margin:0;padding:0;}
#mainFooter .footerMenu li{list-style:none;float:none;margin:0;}
#mainFooter a.footerNav{font-size:12.5px;letter-spacing:.06em;color:var(--ink2);
  transition:color .18s ease;}
#mainFooter a.footerNav:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px;}
#mainFooter .boxRight{margin-left:auto;}
#about{max-width:760px;margin:0 auto;font-size:15px;line-height:2.05;letter-spacing:.045em;color:var(--ink2);}

@media(max-width:820px){
  body.shop .wrapper{padding:0 16px;}
  /* 右上に BASE のカート／メニューアイコンが固定表示されるので、そこを避ける */
  #mainHeader #shopHeader{padding:11px 16px 9px;padding-right:96px;gap:0;}
  #shopHeader #logo img{max-height:26px;}
  #mainHeader #shopHeader nav{flex:1 0 100%;margin-top:4px;}
  #mainHeader #shopHeader nav > ul{justify-content:flex-start;gap:0;}
  #mainHeader .mainHeaderNavColor{padding:5px 12px 5px 0;font-size:11.5px;letter-spacing:.08em;}
  .ecrHero__inner{padding:38px 16px 34px;}
  .ecrHead{margin:38px auto 18px;padding:0 16px;}
  #shopTopPage #mainContent.itemList{grid-template-columns:repeat(auto-fill,minmax(min(100%,144px),1fr));
    gap:28px 14px;padding:0 16px;margin-bottom:60px;}
  #shopTopPage .itemList .itemTitle h2{font-size:12.5px !important;}
  #shopTopPage .itemList .itemPrice{font-size:14.5px;}
  #shopDetailPage h1.itemTitle{font-size:17.5px !important;}
  #shopDetailPage .purchase .price__value{font-size:26px;}
  #shopDetailPage #mainContent.wrapper{padding:0 16px;margin-top:26px;}
  #mainFooter .footerMenu{padding:22px 16px;}
  .ecrHero__facts li{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line2);}
  .ecrHero__facts li:last-child{border-bottom:0;}
}