@charset "utf-8";
/* CSS Document */

:root {
--font-size-base: 15px;
--color-body:#333;
--color-main: #444;
--bg-black:#222;
--color-white:#fff;
--color-sub: #0075C2;
--color-link: #333;
--color-input-bg: #eee;
--color-gray-bg: #dfdfdf;
--color-btn-primary: #AA0000;
--color-btn-primary_hover:#840000;
--color-btn-secondary: #DE9800;
--color-btn-secondary_hover:#C37800;
--color-text:#fff;
--color-logo: #00A7EA;
--color-logo-dark: #007BAD;
--c-gray: #eee;
--c-gold: #A17B00;

--ff-symbol: 'Material Symbols Outlined';
}

/* icon */
.ic--symbol {position: relative; }
.ic--symbol::before {font-family: var(--ff-symbol); position: absolute; }
.ic--fill::before {font-variation-settings: 'FILL' 1;}
.ic--left::before { left: 0; top: 50%; transform: translateY(-50%);}
.ic--top::before  { left: 50%; top: 0; transform: translateX(-50%);}



/* common */
.sp_br {display: none;}


/* header ----------------------------- */
@media screen and (min-width: 1280px){

.navSP{display: none;}
header{ position: sticky; left: 0; top: 0; z-index: 100; background: var(--bg-black); }
header a {color: #fff; transition: 0.3s all ease-in-out;}
header a:hover {color: #fff; opacity: 0.7;}

#hd-wrapper {display: flex; justify-content: space-between; align-items: center; padding: 0 30px;}
#siteID{margin: 0; width: min(11vw,140px);}
#siteID .sp {display: none;}
.hd-links {padding: 12px 0;}
.hd-links--ec {display: flex; justify-content: flex-end; gap: 12px; align-items: center; margin-bottom: 5px; }
.hd-links--ec ul {display: flex;}
.hd-links__txt {font-size: 14px; gap: 16px;}
.hd-links__txt li a:hover {color: #aaa;}
.hd-links__txt li a::before {content: "\f591"; font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; color: var(--color-logo); left: 0; margin-right: 5px; vertical-align: middle;}

.hd-links__btn { gap: 8px;}
.hd-links__btn li a {display: block; border-radius: 30vw; padding: 8px 24px; font-weight: 600; }
.hd-links__btn li a:hover {color: #fff; opacity: 0.7;}
.hd-links__btn li a span {position: relative; }
.hd-links__btn li a span::before { font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; color: var(--color-white); left: 0; margin-right: 5px; vertical-align: middle; font-size: 1.5em; line-height: 1; font-weight: 400;}
a.btn--member {background: var(--color-logo-dark); }
a.btn--member span::before{content:"\e7fe";}

a.btn--member2 {background: var(--color-logo-dark); }
a.btn--member2 span::before{content:"\e7fd";}

a.btn--heart {background: var(--color-btn-secondary); }
a.btn--heart span::before{content:"\e87d";}

a.btn--list {background: var(--color-logo); }
a.btn--list span::before{content:"\e9b9";}

a.btn--login {background: #A17B00; }
a.btn--login span::before{content:"\ea77";}
a.btn--cart {background: var(--color-btn-primary);}
a.btn--cart span::before{content:"\e8cc";}

.action-links a span::before,
.action-links button span::before,
.wishlist-actions a span::before { font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; display: inline-block; vertical-align: middle; margin-right: 4px; font-size: 1.2em; line-height: 1; font-weight: 400;}
.btn--delete span::before {
    content:"\e872";
    color: var(--color-white);
    font-family: var(--ff-symbol);
    font-variation-settings: 'FILL' 1;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    font-size: 1.2em;
    line-height: 1;
    font-weight: 400;
}

.hd-links--contact {display: flex; justify-content: flex-end; gap: 20px; color: #fff; align-items: flex-end;}
.hd-links--contact p {margin: 0;}
.hd-links__label {font-size: 14px; font-weight: 600;}
.hd-links__alpha {font-family: "Anton", sans-serif; transition: 0.3s all ease-in-out;}
.hd--tel span, .hd--fax span, .hd--mail span {position: relative; }
.hd--tel span::before,
.hd--fax span::before,
.hd--mail span::before{font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; color: var(--color-white); left: 0; margin-right: 5px; vertical-align: middle; font-size: 1.1em; line-height: 1; font-weight: 400;}

.hd-links--tel ul {display: flex; gap: 10px; font-size: 34px;}
.hd--tel span::before{content: "\e0b0"; }
.hd--freeDial img {width: auto; height: 1em; vertical-align: middle; margin-right: 10px;}

.hd-links--fax {display: flex; gap: 8px;}
.hd-links--fax .hd-links__alpha {font-size: 28px;}
.hd-links--fax__dl a {display: flex; height: 100%; border: 1px solid #fff; font-size: 13px; padding: 5px 10px; align-items: center;}
.hd-links--fax__dl a:hover {color: #fff; background: #666;}
.hd--fax span::before{content: "\ead8"; }

.hd-links--mail .hd-links__alpha {font-size: 22px;}
.hd--mail span::before{content: "\e158"; }
.hd--mail a:hover {color: #fff; opacity: 0.6;}

.hd-links__tel, .sp__tel,.sp__btn__menu {display: none;}

  a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
    text-decoration: none;
  }
/*
 header.scroll .hd-links {padding: 8px 0;}
 header.scroll .hd-links__btn {font-size: 14px;}
 header.scroll .hd-links__label {font-size: 12px;}
 header.scroll .hd-links--tel ul  {font-size: 28px;}
 header.scroll .hd-links--fax .hd-links__alpha {font-size: 23px;}
 header.scroll .hd-links--fax__dl a {font-size: 12px; padding: 3px 5px;}
 header.scroll .hd-links--mail .hd-links__alpha {font-size: 20px;}
*/
}

@media screen and (max-width: 1279px) { /* sp デザイン */
 header{ position: sticky; left: 0; top: 0; z-index: 100; background: var(--bg-black); }
 #hd-wrapper {padding: 0 calc(clamp(54px, 44.459px + 2.544vw, 77px) + 10px) 0 10px; display: flex; align-items: center; height: clamp(54px, 44.459px + 2.544vw, 77px); position: relative;}
 #siteID {margin: 0!important;}
 #siteID img {width: clamp(140px, 81.925px + 15.487vw, 280px);}
 #siteID .pc {display: none;}
 #siteID .sp {display: block;}
 
 .sp__tel {display: block; margin: 0; color: #fff; font-size: clamp(11px, 8.926px + 0.553vw, 16px); position: absolute; right:calc(clamp(54px, 44.459px + 2.544vw, 77px) + 10px); top: 50%; translate: 0 -50%; background:var(--c-gold); padding: 8px 10px; border-radius: 30vw;}
 .sp__tel span {position: relative; padding-left: 1.35em;}
 .sp__tel span::before {content: "\e0b0";  font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; color:#fff; left: 0; top:50%; translate: 0 -45%; vertical-align: middle; font-size: 1.2em; line-height: 1; font-weight: 400; position: absolute;}
 
 .sp__btn__menu {aspect-ratio: 1/1; height: clamp(54px, 44.459px + 2.544vw, 77px);  position: absolute; right: 0; top:0; display: flex; align-items: center; justify-content: center;}
 .sp__btn__menu .sp__btn__line {aspect-ratio: 5/3; width: clamp(32px, 26.345px + 1.537vw, 46px); position: relative; display: flex; justify-content: center; align-items: center;}
 .sp__btn__menu .sp__btn__line span {display: block; width: 100%; height: 2px; background: #fff;} 
 .sp__btn__menu .sp__btn__line::before,  .sp__btn__menu .sp__btn__line::after {content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; translate: -50% 0; transform-origin: center center;}
 .sp__btn__menu .sp__btn__line::before {top: 0;}
 .sp__btn__menu .sp__btn__line::after {bottom: 0;}

 body.is-fixed {width:100%; height: 100vh; overflow: hidden;}

 /* navigation */
 .navSP {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; overflow:auto;  background: var(--bg-black); color: #fff; z-index: 120; display: none; padding: calc(clamp(54px, 44.459px + 2.544vw, 77px) + 10px) 0;}
 .navSP.is-active {display: block;}
 
 .navSP__close  {aspect-ratio: 1/1; height: clamp(54px, 44.459px + 2.544vw, 77px);  position: fixed; right: 0; top:0; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(0,0,0,0.6);}
 .navSP__close .navSP__close__line {aspect-ratio: 5/3; width: clamp(32px, 26.345px + 1.537vw, 46px); position: relative; display: flex; justify-content: center; align-items: center;}
 .navSP__close .navSP__close__line::before,  .navSP__close .navSP__close__line::after {content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; translate: -50% 0; transform-origin: center center;}
 .navSP__close .navSP__close__line::before {left:50%; top: 50%; rotate:45deg; }
 .navSP__close .navSP__close__line::after {bottom: 0;top: 50%; rotate:-45deg;}
 
 .navSP__inr {width: 86%; max-width: 600px; margin: 0 auto;}

 .navSP__ec {display: flex; gap: 12px; flex-wrap: wrap;}
 .navSP__ec li {flex: auto;}
 .navSP__ec li:first-child {width: 100%;}
 .navSP__ec li a {background: var(--color-logo-dark); display: block; color: #fff; border-radius: 30vw; text-align: center; padding: 12px; position: relative;}
 .navSP__ec li a span {position: relative; padding-left: 2em;}
 .navSP__ec li a span::before {font-family: var(--ff-symbol); position: absolute; left: 0; top: 50%; translate: 0 -50%; font-variation-settings: 'FILL' 1; color: #fff; font-size: 1.5em;}
 .navSP__ec li a.btn--login {background: var(--c-gold);}
 .navSP__ec li a.btn--cart {background: var(--color-btn-primary);}
 .navSP__ec li a.btn--heart {background: var(--color-btn-secondary);}
 .navSP__ec li a.btn--heart span::before {content:"\e87d";}
 .navSP__ec li a.btn--list {background: var(--color-logo);}
 .navSP__ec li a.btn--list span::before {content:"\e9b9";}

 .navSP-links__txt {margin: 28px auto;}
 .navSP-links__txt li {margin: 5px 0;}
 .navSP-links__txt li a {color: #fff;}
 .navSP-links__txt li a::before {content: "\f591"; font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; color: var(--color-logo); left: 0; margin-right: 5px; vertical-align: middle; font-size: 1.2em;}

 .navSP__bnr { margin: 24px 0 40px; }
 .navSP__bnr a {display: block;background: #06C755; color: #fff; padding: 16px; text-align: center;}

 .navSP__inr h3 {text-align: center; font-size:clamp(24px, 21.576px + 0.659vw, 30px); }
 .navSP__inr .calendar {margin-top: 30px;}
 .navSP__inr .calendar .current-date {font-size: 18px; }
 .navSP__inr .calendar .weekdays{border: 1px solid #fff; border-bottom: none; padding: 0;}
 .navSP__inr .calendar .weekdays li {padding: 12px 0; background: #333; color: #fff !important;}
 .navSP__inr .calendar .dates {border: 1px solid #fff;}
 .navSP__inr .calendar .dates li {border: none; border-bottom: 1px solid #fff;}
 .navSP__inr .calendar .dates li.inactive {color: red; background: none;}
 

/* tel list */
 .hd-links--contact {background: #fff; position: fixed; left: 50%; top: 50%; translate: -50% -50%; width: 90%; max-width: 540px; z-index: 100; padding: clamp(32px, 22.141px + 2.629vw, 60px) clamp(24px, 4.282px + 5.258vw, 80px);display: none; }
 .hd-link__bg {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); z-index: 90; display:none ;}
 
 .hd-links--contact.is-active,
 .hd-link__bg.is-active {display: block;}

 .hd-links--contact p {margin: 0;}
 .hd--tel, .hd-links--fax {margin-bottom:clamp(32px, 29.183px + 0.751vw, 40px); }
 
 .hd-links__label {font-size: clamp(16px, 14.592px + 0.376vw, 20px); font-weight: 600; margin-bottom: 5px !important;}
 .hd-links--tel ul  {font-size:clamp(34px, 29.070px + 1.315vw, 48px);}
 .hd-links--fax .hd-links__alpha {font-size: clamp(32px, 29.183px + 0.751vw, 40px);}
 .hd-links--mail .hd-links__alpha {font-size: clamp(24px, 19.775px + 1.127vw, 36px);}
 .hd-links__alpha {font-family: "Anton", sans-serif;}
 
 .hd--freeDial {position: relative; padding-left: 1.5em;}
 .hd--freeDial::before,
 .hd--tel span::before,
 .hd--fax span::before,
 .hd--mail span::before{content: ""; aspect-ratio: 1/1; width: 1.2em; background:var(--c-gold); position: absolute; left: 0; top:50%; translate: 0 -50%; border-radius: 30vw;}
 
 .hd--tel span, .hd--fax span, .hd--mail span {position: relative; padding-left: 1.5em;}
 .hd--tel span::after,
 .hd--fax span::after,
 .hd--mail span::after{font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; color:#fff; left: 0; top:50%; translate: 25% -50%; vertical-align: middle; font-size: 0.8em; line-height: 1; font-weight: 400; position: absolute; }
 
 .hd--tel span::after{content: "\e0b0"; }
 .hd--freeDial img {width: auto; height: 0.8em; vertical-align: middle; position: absolute; left: 0; top:50%; translate: 25% -50%; }
 .hd--fax span::after{content: "\ead8"; }
 .hd--mail span::after{content: "\e158"; }
 
 .hd-links--fax__dl {margin: 10px 0 0 !important;}
 .hd-links--fax__dl br {display: none;}
 .hd-links--fax__dl a {display: block; border: 1px solid #333; text-align: center; padding: 10px; font-weight: 600;}
 
 .hd-links__txt, .hd-links__search {display: none;}
 
 .hd-links__btn {position: fixed; left: 0; bottom: 0; background: #fff; width: 100%; z-index: 10; display: flex; border-top: 1px solid #ccc;}
 .hd-links__btn li {flex: 1; text-align: center; height: clamp(65px, 56.197px + 2.347vw, 90px); font-size: clamp(15px, 13.944px + 0.282vw, 18px);}
 .hd-links__btn li a {display: flex; justify-content: center; align-items: center; height: 100%; }
 .hd-links__btn li a span {position: relative; padding-top: 1.8em;}
 .hd-links__btn li.hd-links__tel a { color: #fff; background: #A17B00;}

 .hd-links__btn li a span::before { font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; position: absolute; left: 50%; top: 0; translate: -50% 0; font-size: 1.5em; line-height: 1; font-weight: 400;}
 a.btn--member span::before{content:"\e7fe";color: var(--color-logo-dark);}
 a.btn--member2 span::before{content:"\e7fd";color: var(--color-logo-dark);}
 a.btn--login span::before{content:"\ea77"; color: var(--c-gold); }
 a.btn--cart span::before{content:"\e8cc"; color: var(--color-btn-primary);}
 a.btn--tel span::before{content:"\e0b0"; color: #fff;}

 a.btn--heart span::before {content:"\e87d"; color: var(--color-btn-secondary);}
 a.btn--list span::before {content:"\e9b9"; color: var(--color-logo);}

.action-links a span::before,
.action-links button span::before,
.wishlist-actions a span::before { font-family: var(--ff-symbol); font-variation-settings: 'FILL' 1; display: inline-block; vertical-align: middle; margin-right: 4px; font-size: 1.2em; line-height: 1; font-weight: 400;}
.btn--delete span::before {
    content:"\e872";
    color: var(--color-white);
    font-family: var(--ff-symbol);
    font-variation-settings: 'FILL' 1;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    font-size: 1.2em;
    line-height: 1;
    font-weight: 400;
}

}


/* global navi ----------------------------- */
#navGlobal {background: #007BAD; background: linear-gradient(90deg, rgba(0, 123, 173, 1) 0%, rgba(0, 53, 88, 1) 100%); padding: 0 30px;}
#navGlobal ul {display: flex; gap: 24px; font-size: 18px;align-items: center;}
#navGlobal ul li a {display: block; padding: 20px 0; font-weight: 600; color: #fff !important;}
#navGlobal ul li a br {display: none;}
#navGlobal ul li a::before {content: ""; display: inline-block; width: 0.4em; aspect-ratio: 1/1; border-right: 3px solid #fff; border-bottom: 3px solid #fff; rotate: 45deg; translate:  0 -0.2em; vertical-align: baseline; margin: 0 10px 0 0;}
#navGlobal ul .hd-links__search{margin-left:auto;width: 465px;}
#navGlobal ul .hd-links__search .form-search{display:flex; align-items:center; gap:6px;}
#navGlobal ul .hd-links__search .form-search .header-vehicle-filter{flex:0 0 auto; width:200px; margin:0;}
#navGlobal ul .hd-links__search .form-search .search-input{flex:1 1 auto;}


@media screen and (max-width: 940px) {
 #navGlobal {padding: 0;}
 #navGlobal ul {gap: 0; font-size: clamp(13px, 11.239px + 0.469vw, 18px);}
 #navGlobal ul li {flex: 1;}
 #navGlobal ul li:not(:first-child) {border-left: 1px solid #fff;}
 #navGlobal ul li a {display: flex; text-align: center; justify-content: center; align-items: center; padding:clamp(8px, 3.775px + 1.127vw, 20px) clamp(2px, -4.338px + 1.69vw, 20px);;}
 #navGlobal ul li a br {display: block;}
 #navGlobal ul li a span {display: none;}
 #navGlobal ul li a::before {content: none;}
}

/* visual*/
.ins-mainVisual {background: var(--bg-black) ; height:clamp(295px, 265.070px + 7.981vw, 380px); display: flex; justify-content: center; align-items: center;}
.ins-mainVisual::before {content: ""; aspect-ratio: 78/38; height: 100%; position: absolute; right: 0; top: 0; background: url("../img/bg-mainVisual-01.jpg") left center / auto 100% no-repeat; }

.ins-mainVisual > div {width: calc(var(--container) + var(--container-space) * 2);  margin: 0 auto; padding: 0 var(--container-space); position: relative; z-index: 10;}
.ins-mainVisual h2 {font-size: clamp(22px, 17.775px + 1.127vw, 34px); color: var(--color-text);}
.ins-mainVisual h2 span {color: var(--color-logo);  font-size: clamp(15px, 10.423px + 1.221vw, 28px);}
.ins-mainV--link a {display: inline-block; border: 1px solid #fff; border-radius: 30vw; color: #fff; padding: 5px 20px; transition: 0.3s all ease-in-out;}
.ins-mainV--link a:hover {background: #fff; color: #333;}

@media screen and (max-width: 1160px) {
 .ins-mainVisual {background-size: auto 100%; background-position: 20% center; overflow: hidden;}
 .ins-mainVisual::before {translate:15% 0;}
 
 @media screen and (max-width: 540px) {
.ins-mainVisual h2 .sp_br {display: block;}
 }
}

/* banner */
.ins-homBnr {border-top: 1px solid #fff; display: flex; flex-wrap: wrap;}
.ins-homBnr__link {flex: 1; border-bottom: 1px solid #fff;}
.ins-homBnr__link:not(:first-child) {border-left: 1px solid #fff;}
.ins-homBnr__link a {display: flex; justify-content: center; align-items: center; padding: var(--w-24) 10px; min-height: clamp(120px, 98.873px + 5.634vw, 180px); background: #ccc; color: #fff; text-align: center; transition: 0.3s all ease-in-out;}
.ins-homBnr__link a:hover {opacity: 0.9;}
.ins-homBnr__link a h3 {font-size: clamp(18px, 14.479px + 0.939vw, 28px); line-height: 1.1; margin: 0;}
.ins-homBnr__link a h3 span {font-size: clamp(13px, 11.944px + 0.282vw, 16px);}
.ins-homBnr__link a p {margin: 0; font-size: clamp(13px, 11.944px + 0.282vw, 16px);}

.ins-homBnr--howto a h3 {margin-bottom: 15px; }
.ins-homBnr--wrong a p,
.ins-homBnr--find a p{line-height: 1.2; margin-top: 8px; font-weight: 700;}
.ins-homBnr__icon {width: clamp(40px, 34.718px + 1.408vw, 55px); margin: 0 auto 5px;}
.ins-homBnr--line .ins-homBnr__icon {width: clamp(28px, 21.662px + 1.69vw, 46px);}

.ins-homBnr--build a {background: url("../img/bg-bnr-05.jpg") center center / cover no-repeat;}
.ins-homBnr--howto a {background: url("../img/bg-bnr-01.jpg") center center / cover no-repeat;}
.ins-homBnr--line a {background: url("../img/bg-bnr-02.jpg") center center / cover no-repeat;}
.ins-homBnr--wrong a {background: url("../img/bg-bnr-03.jpg") center center / cover no-repeat;}
.ins-homBnr--find a {background: url("../img/bg-bnr-04.jpg") center center / cover no-repeat;}

 @media screen and (max-width: 880px) {
 .ins-homBnr__link {flex: inherit; width: 50%;}
 .ins-homBnr__link:nth-child(3)  {border-left: none;}
} 


/* news */
.ins-topNews {background: var(--c-gray); padding: 20px 0 !important; }
.ins-topNews li {margin: 15px 0; padding-left: 1.25em; position: relative;}
.ins-topNews li::before {content: ""; width: 8px; aspect-ratio: 1/1; border-radius: 50%; background: var(--color-logo); position: absolute; left: 0; top: 0.48em;}


/* ブランドリスト */
.ins-brandList{position:relative;}
.brand-list img.icon.brand-icon-sm {width: 37px;}
.ins-brandList .brand-list {flex-direction:row; flex-wrap: wrap; column-gap: 20px; margin-bottom: 60px;}
.ins-brandList .brand-list li {width: calc(calc(100% - 40px)/3); }
.brand-list li button {
        border: 5px solid transparent;
	    align-items: center;
    	box-shadow: var(--box-shadow);
    	gap: 18px;
    }
.brand-list button .name {
    flex: 1 1 auto;
    display: flex;
    text-align: left;
}
.ins-brandList .brand-list button {
	font-size: 17px;
	padding: 10px;
	min-height: 68px;
	border-width: 2px;
	transition: 0.3s all ease-in-out;
	border-radius: 0;
	display: flex;
    width: 100%;
    background: #fff;
    }
.ins-brandList .part { 
	font-size: 16px;  
	padding: 15px 25px; 
	border: 2px solid var(--color-input-bg); 
	border-radius: 0;
	display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    background-color: var(--color-input-bg);
    transition: all .3s;
    width: 25%;
    position: relative;
    }
.area {
      display: none;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
      background: #fff;
      min-height: 120px;
      margin-top: 16px;
      width: 100%;
    }

.area.active {
      display: block;
    }
.area .flexbox{
	display:flex;
	justify-content: center;
}
.close-wrap {
      margin-left: 16px;
      text-align: center;
    }
    
.close-wrap button{
    cursor: pointer;
    font-weight: 700;
    line-height: 20px;
    color: var(--color-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    border: none;
    position: relative;
    padding: 12px 55px;
    font-size: 18px;
    padding: 20px 76px;
    }
    
.action-filter .step-content .step-filter {
    width: calc(33% - 30px);
    flex: 0 0 calc(33% - 30px);
    margin-top: 30px;font-weight: 500;
    background-color: var(--color-input-bg);
    border-radius: 0px;
    display: flex;
    flex-direction: column;
    }
.action-filter .step-content .step-filter .list a:after {
    background: #aaa;
    }

.area_parts {
      display: none;
      background: #fff;
      min-height: 120px;
      width: 100%;
    }

.area_parts.active {
      display: block;
    }

@media screen and (max-width: 1023px) {
.ins-brandList .brand-list {justify-content: space-between; column-gap: 0; }
.ins-brandList .brand-list li {width: 49%;}
.ins-brandList .brand-list li button {font-size: clamp(13px, 3vw, 15px); min-height: 55px; gap: 5px; padding: 5px 10px;}
}

/* 部位から絞り込み　*/
 .ins-searchParts .search_parts .search_parts_content {border: 1px solid #eee; border-radius: 0;}
 .ins-searchParts .search_parts .image {display: flex; justify-content: center; align-items: center;}
 .ins-searchParts .search_parts .list_child li,
 .ins-searchParts .search_parts .list_child_sub li,
 .ins-searchParts .search_parts .tabs li {width: 270px; border-radius: 0;}
 .ins-searchParts .search_parts .list_child li a span, 
 .ins-searchParts .search_parts .list_child_sub li a span, 
 .ins-searchParts .search_parts .tabs li a span {font-size: 15px; color: var(--color-main);}

 .ins-searchParts .search_parts .tabs li:hover {background: #555; color: #fff;}
 .ins-searchParts .search_parts .tabs li:hover a span {color: #fff} 
 
 .ins-searchParts .search_parts .thumbnail.sp {display: none;}

 .search_parts .thumbnail_child_base {top: 20px;left:auto;}

@media screen and (max-width: 767px) {
 .ins-searchParts .search_parts .thumbnail.pc{display: none;}
 .ins-searchParts .search_parts .tabs {margin: 30px auto 0; }
 .ins-searchParts .search_parts .tabs li {width: 48%;}
 .ins-searchParts .search_parts .tabs li a span {padding: 10px;}
 .ins-searchParts .search_parts .tabs li:last-child {width: 98%;}
 .ins-searchParts .search_parts .tabs li a span.mini { font-size: 15px;}
}
 @media screen and (max-width: 530px) {
 .ins-searchParts .search_parts .tabs li a span,.search_parts .tabs li a span.mini {font-size: clamp(11px, 3vw, 15px);}
 .ins-searchParts .search_parts .tabs li a span {padding: 5px 0px;}
 .ins-searchParts .search_parts .list_child li{width: calc(50% - 8px);}

}

/* パーツから絞り込み　*/
.ins-partList .parts-list .part { font-size: 16px;  padding: 15px 25px; border: 2px solid var(--color-input-bg); border-radius: 0;}
.ins-partList .parts-list .part:hover {border-color: #aaa;}


@media screen and (max-width: 1023px) {
.ins-partList .parts-list .part {font-size: clamp(11px, 3vw, 15px); padding: 15px; height: 100%;}
.ins-partList .parts-list li:last-child {width: 100%;}
.ins-partList .parts-list .sub-part {font-size: clamp(10px,2.8vw,14px);}
}

/* キーワードから探す　*/
.ins-searchKeyword .form-search .search-input input {padding: 30px 30px 30px 60px; font-size: 16px;}
.ins-searchKeyword .form-search .search-input button[type=submit] {left: 20px;}


/* タイトル */
.block-title .title {display: block; text-align: center;}
.block-title .title span {display: block;}
.block-title .title .text-ja {margin-top:-1em; font-size: 36px; }
.block-title .title .text-en {color: #eee; font-size: 80px; font-weight: 600; line-height: 1; white-space: nowrap;}


/* title color */
.ins-recProducts .block-title .title .text-en,
.ins-listProducts .block-title .title .text-en {color: #0075C2;}
.ins-recProducts .block-title .title .text-ja,
.ins-listProducts .block-title .title .text-ja,
.ins-recProducts .product-item a,
.ins-recProducts .product-item .price,
.ins-listProducts .product-item a,
.ins-listProducts .product-item .price{color: var(--color-text);}

/* ボタン */
.btn {background: var(--color-main);}
.btn:hover {background: var(--color-sub);}


/* item */
.ins-recProducts {margin: 60px auto 0; background: #303030;
background: linear-gradient(0deg, rgba(48, 48, 48, 1) 0%, rgba(34, 34, 34, 1) 100%);}
.ins-listProducts{background: var(--bg-black) url("../img/bg-listProducts-01.jpg") right bottom no-repeat;background-size: min(60%,800px) auto; padding: 60px 0 1px;}
.product-item .thumbnail {text-align: center;}
.bags>* {border-radius: 0; font-size: 13px;}

@media screen and (max-width: 767px) {
 .ins-listProducts {background-size: 100% auto;}
 /* SP: おすすめ・新着の row gutter を縮めて画面はみ出しを防ぐ */
 .ins-recProducts .widget-product-grid,
 .ins-listProducts .widget-product-grid {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 1rem;
  margin-left: 0;
  margin-right: 0;
 }
 .ins-recProducts .product-item,
 .ins-listProducts .product-item { min-width: 0; }
 .ins-recProducts .product-item .title a,
 .ins-listProducts .product-item .title a,
 .ins-recProducts .product-item .desc,
 .ins-listProducts .product-item .desc { word-break: break-word; overflow-wrap: anywhere; }
 .ins-recProducts .container,
 .ins-listProducts .container { overflow-x: hidden; max-width: 100%; }
 /* SP: 商品画像はコンテナに合わせて縮小、全体を表示（トリミングしない） */
 .ins-recProducts .product-image-container,
 .ins-listProducts .product-image-container { width: 100%; max-width: 240px; margin: 0 auto; }
 .ins-recProducts .product-image-photo,
 .ins-listProducts .product-image-photo { width: 100%; height: 100%; object-fit: contain; }
}


/* NEWS */
.ins-news {display: flex; justify-content: space-between; max-width: 1200px; margin-inline: auto;}
.ins-newsList {width: 48%;}
.ins-newsCalendar {width: 50%;}
.ins-newsList .title {margin-bottom: 30px;}
.ins-newsList .title span {display: block;}
.ins-newsList .title span.text-en {color: #eee; font-size: 80px; font-weight: 600; line-height: 1;}
.ins-newsList .title span.text-ja {margin-top:-1em; font-size: 36px; }
.ins-newsCalendar h5 {text-align: center;}

@media screen and (max-width: 1139px) {
 .ins-news {display: block;}
 .ins-newsList {width: 100%; max-width: 900px; margin: 0 auto 80px;}
 .ins-newsCalendar {width: 90%; max-width: 900px; margin: 0 auto;}
}

/* media */
.section.media{background:var(--color-input-bg); }
.section.media .block-title .title .text-en {color: #ccc;}


/*　フッターEC概要*/
.footer-title h2.text-en {color: #0075C2; font-size: 80px !important; font-weight: 600; line-height: 1;}
.footer-title .text-ja {margin-top:-1em; font-size: 32px !important; color: var(--color-text); }

.ins-ftFlex {display: flex; column-gap: 30px; flex-wrap: wrap;}
.ins-ftFlex .col {width: calc(calc(100% - 60px) / 3); margin: 20px auto;}
.ins-ftFlex .links-data .title .ins-ftICon {width: 40px;}
.footer .footer-links {background: var(--bg-black); color: var(--color-text); overflow: hidden;}
.footer-links .links-data .title:before {content: none;}
.footer-links .links-data .title {font-size: 18px;}

@media screen and (max-width: 1023px) {
.ins-ftFlex .col {width: calc(calc(100% - 60px) / 2); }
 @media screen and (max-width: 590px) {
  .ins-ftFlex .col {width: 100%; margin: 10px auto;}
 }
}

/*　フッターナビ */
.footer .footer-summary {background: #111; color: #fff;}
.footer .footer-summary .site-info,
.footer .footer-summary .footer-menu>li a,
.footer .footer-summary .footer-bottom .copyright{color: #fff;}
.footer .footer-summary .footer-menu>li ul:before {background: #fff;}

@media screen and (max-width: 1278px) {
.footer .footer-summary {padding-bottom:calc( clamp(65px, 56.197px + 2.347vw, 90px) + 20px )!important;}

 @media screen and (max-width: 620px) {
 .block-title .title .text-en,
 .ins-newsList .title span.text-en,
 .footer-title h2.text-en{font-size: min(9vw,80px) !important; white-space: nowrap;}
 /* SP: 英字と日本語の重ね合わせを解除（重なって読めなくなるため） */
 .block-title .title .text-ja,
 .ins-newsList .title span.text-ja,
 .footer-title .text-ja { margin-top: 4px !important; font-size: 22px !important; }
 }
}


/* 2カラム --------------------------------------*/

.columns.ins-colWrapper {max-width: calc(var(--container) + var(--container-space) * 2);  padding: 0 var(--container-space) 80px; display: flex; flex-direction: row-reverse; gap: clamp(40px, -30.769px + 7.692vw, 80px); margin: clamp(30px, 16.025px + 3.797vw, 60px) auto 0;}

.sidebar.sidebar-additional {width: 20%; min-width: 300px; flex:inherit;}
.column.main {width: inherit; flex: auto; padding: 0; }

.ins-selectedItem,
.ins-sidebar-search,
.ins-sidebar-calendar {margin-bottom:50px;}

.ins-selectedItem {background: var(--bg-black); color: var(--color-text); padding: 20px 30px 30px; }
.ins-selectedItem h4 {text-align: center; font-size: 20px; margin-bottom: 10px;}
.ins-selectedItem table {width: 100%;}
.ins-selectedItem table th {text-align: left; min-width: 4em; border-bottom:1px solid #fff; padding: 10px 0;}
.ins-selectedItem table td {border-bottom:1px solid #fff; padding:10px 0;}
.ins-selectedItem__img {aspect-ratio: 16/9; background: #fff; overflow: hidden; margin: 30px auto 0; max-width: 400px; }
.ins-selectedItem__img img {object-fit: cover; width: 100%; height: 100%;}

.ins-sidebar-search h4,
.ins-sidebar-calendar h4 {text-align: center; font-size: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--color-link);}
.ins-sidebar-calendar .calendar {margin-bottom: 30px;}

.banner-notice {border-radius: 0;}
.gallery-placeholder._block-content-loading{text-align: center;}

@media screen and (max-width: 1158px) {
.page-main>.columns  {display: block;}
.sidebar.sidebar-additional {width: 100%; min-width: inherit; flex:inherit;}
.column.main {width: 100%; flex: inherit; }

.ins-sidebar-calFlex{ display: flex; justify-content: space-between; column-gap: 20px;}
.ins-sidebar-calFlex > div {flex: 1;}

 @media screen and (max-width: 590px) {
.ins-sidebar-calFlex {display: block; max-width: 340px; margin: 0 auto;}
 }

}

/* under layer ----------------------------------- */
 .container-md {max-width: calc(var(--container) + var(--container-space) * 2);  padding: clamp(30px, 21.930px + 2.193vw, 50px) var(--container-space) 80px; }
 .ins-account-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(20px, 11.704px + 2.212vw, 40px); }
 .ins-account-title .page-title, .ins-account-title .username-text {margin-bottom: 0;}
 .account-panel {gap: clamp(30px, 17.555px + 3.319vw, 60px);}
 .account-form .navigation-links {width: 20%; min-width: 240px; flex:inherit;}
 .account-form .account-content {width: inherit; flex: auto; padding: 0; }
 
 .card {border-radius: 0; box-shadow: none;}
 .account-form .card-body {padding: 0;}
 /* mypage 配下に cart-page-form を含めた場合は cart-page-form 側のスタイルを優先 */
 .account-form .cart-page-form .card-body {padding: 30px;}
 .account-form .cart-page-form .card.is-confirm-card .card-body {padding: 30px;}
 .account-form .cart-page-form .card.is-confirm-card .card-title {
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-link);
    margin-bottom: 20px;
 }
 
 /* sidebar */
 .account-form .navigation-links .card-body {padding: 0; background: var(--bg-black);}
 .account-form .navigation-links .action-links {display: block;}
 .account-form .navigation-links .card-body li a {color: #fff; display: block; padding: 15px 20px; border-bottom: 1px solid #666; transition: 0.2s all ease-in-out;}
 .account-form .navigation-links .action-links li.current a {color: #fff; background: var(--color-logo-dark);}
  .account-form .navigation-links .card-body li:not(.current) a:hover {background: #555;}

 /* contents */
 .account-form .account-content .ins-status {background: #eee; padding: 30px; border-bottom: 1px solid #aaa ; margin-bottom: 30px;font-size: 18px;}
 .account-form .account-content .ins-status h2 {font-size: clamp(22px, 17.852px + 1.106vw, 32px);}
 .account-form .account-content .card-body:not(:first-child) {margin-top: 40px;}
 .account-form .table, .page-print .table {border-spacing: 0;border-collapse: collapse;}
 .account-form .table tbody {border: 1px solid #ccc;}
 .account-form .table thead th {padding:5px; text-align: center;}
 
 .account-form .table td, .account-form .table th {border-radius: 0 !important; border: 0 !important;}
 .account-form .table tbody td:last-child, .account-form .table tbody th:last-child, .page-print .table tbody td:last-child, .page-print .table tbody th:last-child {text-align: center;}
.account-form .table tbody td, .account-form .table tbody th, .page-print .table tbody td, .page-print .table tbody th {padding: 25px 10px;}

.account-form .table td.group-btn {border-top: 0; border-bottom: 1px solid #ccc !important; padding-top: 0;}
.account-form .table .action-btn, .page-print .table .action-btn {flex-direction:row; gap: 15px;}
.account-form .account-content .btn:not(.save) {display: block; flex: 1; padding: 20px !important; font-size: 20px; box-shadow: none; text-align: center;}
.ins-spLocalnavi {display: none;}

 @media screen and (max-width: 1023px) {
  .account-panel {display: flex; align-items: flex-start;}
  .account-form .navigation-links {display: flex; flex-direction: column-reverse;}
  .account-form .navigation-links .action-links li {width: 100%;}
  .account-form .account-content {width: inherit; flex: auto; padding: 0; }
  .account-form .navigation-links .logout {margin: 20px 0;}
 }
 
 @media screen and (max-width: 920px) {
  .account-panel {display: block;}
  .account-form .navigation-links {width: 100%; min-width: inherit;}
  .account-form .account-content {width:100%; flex: inherit; padding: 0; }
  .ins-spLocalnavi {cursor: pointer; background: #eee; margin: 0; padding: 10px; display: block;}
  .account-form .navigation-links .action-links {display: none;}
  .account-form .navigation-links .logout {margin: 10px 0 0;}
 }
 @media screen and (max-width: 768px) {
  .account-form .table tbody, .page-print .table tbody {gap: 0;}
  .account-form .table tbody tr, .page-print .table tbody tr {display: block;}
  .account-form .table tbody tr, .page-print .table tbody tr {border-radius: 0!important; border: none; padding: 0;}
  .account-form .table tbody td, .account-form .table tbody th, .page-print .table tbody td, .page-print .table tbody th {padding: 6px 24px;}
  .account-form .table tbody td[data-th]:before, .page-print .table tbody td[data-th]:before {
  	flex:inherit;
  	text-align: left;
  	}
  .account-form .table tbody td.text-nowrap {padding: 30px 24px 6px 24px;}
  .account-form .table .action-btn, .page-print .table .action-btn {width: 100%;}
  .account-form .table td.group-btn {padding: 18px 24px 30px;}
  .account-form .table td.group-btn[data-th]:before {display: none;}
  .account-form .table .action-btn, .page-print .table .action-btn {gap: 5px;}
  .account-form .account-content .btn:not(.save) {padding: 15px 8px !important; flex: auto;font-size: 16px;}
  .account-form .account-content .btn-search {font-size: 16px;padding: 9px 10px;}

 }


/* mypage ----------------------------- */
.card .card-title {font-size: 20px;}
.card .card-sub-title {padding-top: 0;}

/* wishlist */
.form-wishlist-items .whist-list-table .item {border-bottom: 1px solid #ccc; padding-bottom: 20px;}

/* edit */
.account-form .account-content .form-edit-account, 
.account-form .account-content .form-change-password, 
.account-form .account-content .form-address-edit {max-width: 800px;}
input[type=text], input[type=password], input[type=url], input[type=tel], main input[type=search], .ins-pageSearch input[type=search], input[type=number], input[type*=date], input[type=email], textarea, select {border-radius: 0;}

/* vehicle */
 @media screen and (min-width: 768px) {
 .form-create-account .fieldset .field:not(.choice)>.control {width: calc(100% - 200px) !important; max-width: 700px;}
}
 @media screen and (max-width: 767px) {
.form-create-ac0count .fieldset .field:not(.choice)>.control {width:100%}
 
 }


/* faq ----------------------------- */
.accordion .accordion-item {border-radius: 0;}
.accordion .accordion-item .accordion-button {font-size: clamp(18px, 14.386px + 0.439vw, 20px);text-align:left; background: transparent; border: none; width: 100%; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.accordion-item:not(.show) .accordion-collapse {display: none;}
.accordion-item.show .arrow, .accordion .accordion-item.active .arrow {transform: rotate(180deg);}
.accordion-item .arrow {transition: transform 0.2s;}

/* page search */
.ins-pageSearch {border-top: 1px solid #ccc; padding: 80px 0 120px;}
.accordion .accordion-item .accordion-body {font-size: 18px; line-height: 1.8;}


/* btn */
.btn {border-radius: 0;}
button.action {background-color: var(--color-btn-primary); border-radius: 0;}
button.action:hover {background: var(--color-btn-primary_hover); }
.banner-notice .btn {background-color: var(--color-btn-secondary);}
.banner-notice .btn:hover {background-color: var(--color-btn-secondary_hover);}

.btn.btn-primary:hover {background-color: #666;}
.btn.btn-white:hover {background-color: #aaa; color: #fff;}

/* cartに入れるボタン */
.btn.btn-primary.checkout {background-color:var(--color-btn-primary);}
.btn.btn-primary.checkout:hover {background-color:var(--color-btn-primary_hover) !important;}



/* 調整 */
.ins-border {border: 1px solid #ccc;}

/* 20260420 */
.cart-page-form table.cart.items tbody td:nth-child(2){
    min-width: 120px;
}
.cart-page-form table.cart.items tbody td:nth-child(3){
    min-width: 120px;
    text-align: right;
    padding-right: 10px;
}
.card .card-title .desc {
    font-size: 17px;
}
.cart-page-form table.cart.items thead th {
    font-size: 18px;
    text-align: center;
}
#wishlist-table thead th {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
}
.cart-page-form .product-info .title {
    font-size: 20px;
}
.cart-page-form .action-links {
    font-size: 13px;
    justify-content: flex-start;
    margin-top: 10px;
    margin-left: 10px;
}
.btn.btn-cart {
        font-size: 15px;
        padding: 10px;
        font-weight:normal;
        width: 120px;
    }
.account-content .action-links .btn.btn-cart:not(.save) {
    padding-left: 10px;
    padding-right: 10px;
}
.btn.btn-remove,
button.action.btn-primary.btn-remove{
    margin-left: 30px;
    background: #a2a2a2;
}
/* mypage 共通: テーブル内の操作ボタン群 (.group-btn .action-btn) + .below-table-action + .action-btn-compact はコンパクトに表示。
   form 末尾の保存ボタン (.save) は従来通り 100% 幅。 */
.account-form .account-content .group-btn .action-btn .btn:not(.save),
.account-form .account-content .below-table-action .btn:not(.save) {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 12px 28px !important;
    font-size: 17px;
    width: auto;
    text-align: center;
    align-items: center;
    gap: 6px;
}
/* 送付先のように小さめにしたい所だけ .action-btn-compact を明示 */
.account-form .account-content .action-btn-compact .btn:not(.save) {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 8px 20px !important;
    font-size: 15px;
    width: 130px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    margin: 0 !important;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.account-form .account-content .action-btn form,
.account-form .account-content .action-btn-compact form {
    display: inline-flex;
    margin: 0 !important;
}
.account-form .account-content .group-btn .action-btn,
.action-btn-compact {
    display: inline-flex;
    gap: 10px;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
}
.account-form .table tbody td.group-btn {
    vertical-align: middle;
    padding-top: 25px !important;
    border-top: inherit !important;
}
/* mypage 削除ボタン: カート同様にゴミ箱アイコン + グレー背景 */
.account-form .account-content .btn.btn--delete {
    background: #a2a2a2 !important;
    color: #fff;
    margin-left: 0;
}
.cart-page-form .field.qty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
}
.qty-stepper input.qty {
    width: 60px;
    text-align: center;
}
.qty-stepper button.minus,
.qty-stepper button.plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cart-page-form .product-info .additional:not(.open) .product-data {
    display: block;
    font-size: 15px;
}
.cart-page-form .product-info .product-content{
	width:100%;
}
/* SP: カートテーブル全体を縦積みのレスポンシブテーブル化（display: table のままだと横にはみ出す） */
@media (max-width: 767px) {
    .cart-page-form table.cart.items { display: block; width: 100%; }
    .cart-page-form table.cart.items thead { display: none; }
    .cart-page-form table.cart.items tbody { display: block; width: 100%; }
    .cart-page-form table.cart.items tbody tr {
        display: block;
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding: 16px 0;
    }
    .cart-page-form table.cart.items tbody td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important;
        padding: 10px 8px;
        text-align: center;
        box-sizing: border-box;
    }
    .cart-page-form table.cart.items tbody td[data-th]:before {
        content: attr(data-th);
        display: block;
        font-weight: 700;
        font-size: 13px;
        color: #555;
        margin-bottom: 6px;
    }
    /* 商品セル: 画像と商品名を縦並びに */
    .cart-page-form table.cart.items .product-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .cart-page-form table.cart.items .product-info .product-content { width: 100%; min-width: 0; }
    .cart-page-form table.cart.items .product-info .title { font-size: 16px; word-break: break-word; }
    .cart-page-form table.cart.items .product-image-container { width: 140px; max-width: 70%; }

    /* SP: 確認画面の dl (220px ラベル + 値) を縦積みに */
    .cart-page-form .confirm-dl,
    .account-form .cart-page-form .confirm-dl,
    .mypage-change-panel .confirm-dl,
    .confirm-dl-wrap .confirm-dl {
        grid-template-columns: 1fr !important;
        gap: 4px 0 !important;
    }
    .cart-page-form .confirm-dl dt,
    .account-form .cart-page-form .confirm-dl dt,
    .mypage-change-panel .confirm-dl dt,
    .confirm-dl-wrap .confirm-dl dt { padding-top: 8px; }
    .cart-page-form .confirm-dl dd,
    .account-form .cart-page-form .confirm-dl dd,
    .mypage-change-panel .confirm-dl dd,
    .confirm-dl-wrap .confirm-dl dd { padding-left: 0; word-break: break-word; }

    /* SP: 合計金額テーブル (data.table.totals) を縦並びに（ラベルの下に値） */
    .cart-page-form .data.table.totals,
    .cart-page-form .data.table.totals tbody { display: block !important; width: 100% !important; }
    .cart-page-form .data.table.totals tr {
        display: block !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #eee;
    }
    .cart-page-form .data.table.totals th,
    .cart-page-form .data.table.totals td {
        display: block !important;
        width: 100% !important;
        padding: 2px 0 !important;
        border: none !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .cart-page-form .data.table.totals th {
        font-size: 13px !important;
        font-weight: 700;
        color: #555;
        text-align: left !important;
    }
    .cart-page-form .data.table.totals td {
        font-size: 16px !important;
        text-align: right !important;
        font-weight: 700;
    }
    .cart-page-form .data.table.totals tr:last-child td { font-size: 18px !important; }
    .cart-page-form .price-note { display: block; font-size: 11px; color: #888; text-align: right; }

    /* SP: フッターの住所と項目見出し */
    .footer .footer-summary .site-info .footer-postal { display: inline-block; }
    .footer .footer-summary .site-info .footer-address { display: block; }
    .footer .footer-summary .site-info table th { white-space: nowrap; padding-right: 12px; vertical-align: top; }
    .footer .footer-summary .site-info table td { word-break: break-word; }
}
.account-form .table thead th:last-child{
        text-align: center;
    }
.account-form .account-content .btn-search {
    font-size: 18px;
    background: var(--color-main);
    color: #fff;
    padding: 6px 10px;
    width: 70px;
    text-align: center;
    display: inline-block;
    margin-left: 10px;
    }
.cart-page-form .product-info .additional .text {
    font-size: 15px;
    }
.cart-page-form .product-info .additional .product-data {
    min-height: 80px;
}
.editor-content h3:not([class]) {
        font-size: 20px;
        }
.editor-content *:not([class]) {
        font-size: 18px;
        }
.search_parts .thumbnail_child_base {
    position: absolute;
    top: 5%;
    left: 30%;
    z-index: 0;
}
.dropdown > .sub-part {
    display: none;
  }

.dropdown.open > .sub-part {
    display: block;
    border-radius: 0;
  }
.parts-list li.open .part {
    border-radius: 0;
}
.parts-list .sub-part a {
    border-radius: 0;
}
.product .value{font-size:18px;} 
.product-single .summary .short-description {font-size: 14px;}
.product-single .summary .price-wrap .regular-price {font-size: 16px;}
.product-single .summary .price-wrap .sale-price .sku {font-size: 15px;}
.product-single .summary .price-wrap .sale-price .price-incl-tax {display: inline-block; margin-left: 12px; font-size: 16px; color: #555;}
.product-item .price .price-incl-tax {display: block; font-size: 14px; color: #555;}

/* カート小計の税別/税込両表記 */
.cart-page-form .cart-price .price {white-space: nowrap; display: block;}
.cart-page-form .cart-price .price-tax-label {font-size: 12px; color: #888; margin-left: 2px;}
.cart-page-form .cart-price .price-incl-tax {display: block; font-size: 13px; color: #555; white-space: nowrap;}

/* 合計エリアの未確定文言 */
.cart-page-form .price-pending {color: #888; white-space: nowrap;}
.cart-page-form .price-note {display: block; font-size: 12px; color: #888; white-space: nowrap;}
.product-single .single-images .desc {font-size: 15px;}
.breadcrumbs .items li>* {font-size: 15px;}
.top-product .toolbar-amount {font-size: 15px;}
.product-item .price .number {font-size: 18px;}
.product-item .price .tax {font-size: 12px;}
    
@media screen and (max-width: 1279px) {
    .navSP__ec li:nth-child(2),
    .navSP__ec li:nth-child(3),
    .navSP__ec li:nth-child(4),
    .navSP__ec li:nth-child(5) {
        width:calc(50% - 24px);
    }
    .ins-brandList .part{width:100%;}
    .action-filter .step-content .step-filter {width: 100%;margin-top: 0px;}
    .action-filter .step-content .icon {width: 100%;}
    .close-wrap button{font-size: 13px;padding: 12px 25px;}
    .search_parts .thumbnail_child_base {position: initial;}
    .editor-content h2:not([class]) {font-size: 18px;}
    .btn {font-size: 15px;}
    button.action {font-size: 15px;}
    .top-product .group-action select {font-size: 13px;}
    
    
}





/* =====================================================================
   P3: page-specific styles (extracted from inline <style> blocks)
   ===================================================================== */

/* --- gallery (was inline in gallery/gc202312/index.html) --- */
a.gc-btn {
  color: #fff;
  background-color: #666;
  display: inline-block;
  font-size: 12px;
  padding:5px 10px;
  border-radius:5px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  margin-top: 10px;
}
a.gc-btn:hover {
  color: #fff;
  background: #CCC;
}

/* --- product detail modal (was inline in product/index.html) --- */
.modal-add-cart.modal-slide .modal-footer .text-alert {
    color      : var(--color-danger);
    font-size  : 12px;
    margin-top : -15px;
}

/* --- cart (was inline in checkout/cart/index.html) --- */
.text-compatibility {
    max-width : 600px;
}
@media (max-width : 1023px) {
    .text-compatibility {
        text-align : right;
    }
}
@media (max-width : 768px) {
    .text-compatibility {
        text-align : center;
    }
}

/* --- favorite (was wishlist; aligned to cart styling) --- */
#wishlist-table .product-info {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 20px 20px 0 0;
}
#wishlist-table .product-content .title {
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 720px) {
    #wishlist-table .product-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* --- help/charge (was inline in user_data/charge/index.html, scoped to .page-help-charge) --- */
.page-help-charge th,
.page-help-charge td {font-size: 18px !important; padding: 8px !important;}
.page-help-charge th p,
.page-help-charge td p {font-size: 18px !important;}
.page-help-charge .columns .column.main {min-width: 0;}
.page-help-charge .editor-content {min-width: 0;}
.page-help-charge .table_wrap {max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.page-help-charge .table_wrap > table {min-width: 1100px; width: auto !important;}
.page-help-charge .table_wrap th,
.page-help-charge .table_wrap td {white-space: nowrap;}
@media screen and (max-width: 1279px) {
    .page-help-charge th,
    .page-help-charge td {font-size: 15px !important; padding: 8px !important;}
    .page-help-charge th p,
    .page-help-charge td p {font-size: 15px !important;}
}

/* --- mypage (consolidated from compatibility/history, compatibility/quotation, customer/account) --- */
.account-form .table tbody td:first-child {text-align:left;}
.account-content .table-wrapper .table td:first-child {text-align:left;}
.account-content .table-wrapper .table th,
.account-content .table-wrapper .table td {
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
}
.account-content .table-wrapper .table .price {
    font-size: 20px;
}
.account-content .group-btn .btn,
.account-content .pager,
.account-content .toolbar-number,
.account-content .limiter-label,
.account-content .limiter-text,
.account-content .limiter-options {
    font-size: 15px;
}

/* document-tabs (was inline in customer/account) */
.document-tabs {
    display: flex;
    gap: 0;
    justify-content: flex-start;
    margin: 0 0 -1px;
    border-bottom: 1px solid #d7dbe2;
}
.document-tab {
    flex: 1 1 0;
    padding: 14px 22px 13px;
    border: 1px solid #d7dbe2;
    border-bottom: 0;
    border-radius: 0;
    background: #eef2f6;
    color: #4b5563;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    top: 1px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.document-tab.is-active {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
    z-index: 1;
}
.document-panel[hidden] {
    display: none;
}
.document-panel {
    border: 1px solid #d7dbe2;
    border-top: 0;
    padding-top: 24px;
}

/* document-filter (was inline in customer/account, compatibility/quotation) */
.document-filter {
    display: flex;
    margin: 0 0 20px;
    padding: 0 24px;
}
.document-filter-field {
    align-items: center;
    gap: 10px;
}
.document-filter-field div {
    margin: 10px 0;
}
.document-filter-label {
    color: #4b5563;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    width: 180px;
    display: inline-block;
}
.document-filter-input {
    width: 250px !important;
    max-width: 250px;
    flex: 0 0 250px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #cfd6df;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    font-size: 18px;
}
.document-filter-input:focus {
    outline: none;
    border-color: #111827;
}

@media (max-width: 720px) {
    .account-content .table-wrapper .table th,
    .account-content .table-wrapper .table td {
        font-size: 18px;
    }
    .document-tabs {
        margin-bottom: -1px;
    }
    .document-tab {
        padding: 12px 10px 11px;
        font-size: 18px;
    }
    .document-panel {
        padding-top: 18px;
    }
    .document-filter {
        justify-content: stretch;
        margin-bottom: 16px;
        padding: 0 16px;
    }
    .document-filter-field {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .document-filter-input {
        width: 100%;
    }
}


/* =====================================================================
   P1: product-image-container consolidated (extracted from 44 inline blocks)
   ===================================================================== */
.product-image-container {
    display: flex;
    height: auto;
    /* default size (top page, product list) */
    --width: 240px;
    aspect-ratio: 240 / 240;
}
.product-image-container span.product-image-wrapper {
    height: 100%;
    width: 100%;
}
@supports not (aspect-ratio: auto) {
    .product-image-container span.product-image-wrapper {
        padding-bottom: 100%;
    }
}
/* cart context */
.cart-page-form table.cart.items .product-image-container {
    width: 160px;
    aspect-ratio: 160 / 160;
}
/* wishlist context */
#wishlist-table .product-image-container {
    width: 113px;
    aspect-ratio: 160 / 160;
}
#wishlist-table .product-image-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#wishlist-table td { vertical-align: middle; }


/* =====================================================================
   Checkout step indicator + notice (used on cart, shopping, confirm, complete)
   ===================================================================== */
.checkout-progress {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    border: 1px solid var(--c-gray);
    overflow: hidden;
    background: #fff;
}
.checkout-progress__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 14px;
    background: #f4f6f8;
    color: #52606d;
    font-weight: 600;
    text-align: center;
}
.checkout-progress__item + .checkout-progress__item {
    border-left: 1px solid var(--c-gray);
}
.checkout-progress__item.is-active {
    background: var(--color-logo-dark);
    color: #fff;
}
.checkout-progress__item.is-completed {
    background: #fff;
    color: var(--color-body);
}
.checkout-progress__num {
    color: inherit;
    font-weight: 700;
    font-size: 18px;
}
.checkout-progress__num::after {
    content: ".";
}
.checkout-progress__label {
    font-size: 17px;
}
@media (max-width: 720px) {
    .checkout-progress__item { padding: 12px 6px; gap: 4px; flex-direction: column; }
    .checkout-progress__num { font-size: 14px; }
    .checkout-progress__label { font-size: 12px; }
}

.checkout-notice {
    background: #fff5f5;
    border: 2px solid var(--color-btn-primary);
    border-left-width: 8px;
    padding: 18px 24px;
    margin-bottom: 24px;
    color: var(--color-btn-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}
.checkout-notice strong {
    color: var(--color-btn-primary);
    margin-right: 8px;
}
@media (max-width: 720px) {
    .checkout-notice { font-size: 17px; padding: 14px 18px; }
}

.checkout-summary .table.totals {
    width: 100%;
}
.checkout-summary .table.totals th {
    text-align: left;
    font-weight: 500;
    padding: 8px 4px;
    border-bottom: 1px solid var(--c-gray);
}
.checkout-summary .table.totals td {
    text-align: right;
    padding: 8px 4px;
    border-bottom: 1px solid var(--c-gray);
}
.checkout-summary .table.totals tr.grand-total th,
.checkout-summary .table.totals tr.grand-total td {
    font-size: 18px;
    font-weight: 700;
    border-top: 2px solid var(--color-body);
    border-bottom: none;
    padding-top: 12px;
}
.checkout-summary .summary-section + .summary-section {
    border-top: 1px solid var(--c-gray);
    margin-top: 16px;
    padding-top: 16px;
}
.checkout-summary .summary-section h3 {
    font-size: 16px;
    margin: 0 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.checkout-summary .summary-section .action-edit {
    font-size: 13px;
    color: var(--color-sub);
}



/* Shopping form: split inputs (zip/tel) inline */
.cart-page-form .form-shopping .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cart-page-form .form-shopping .input-group input.input-text {
    width: auto;
    flex: 0 0 auto;
    text-align: center;
}
.cart-page-form .form-shopping .input-group .input-prefix,
.cart-page-form .form-shopping .input-group .input-sep {
    font-size: 18px;
    color: #555;
    user-select: none;
}
.cart-page-form .form-shopping .input-group input[name="zip1"] { width: 5em; }
.cart-page-form .form-shopping .input-group input[name="zip2"] { width: 6em; }
.cart-page-form .form-shopping .input-group input[name="tel1"] { width: 5em; }
.cart-page-form .form-shopping .input-group input[name="tel2"] { width: 6em; }
.cart-page-form .form-shopping .input-group input[name="tel3"] { width: 6em; }


/* Shopping form: input visual override */
.cart-page-form .form-shopping input[type="text"],
.cart-page-form .form-shopping input[type="tel"],
.cart-page-form .form-shopping input[type="email"],
.cart-page-form .form-shopping input[type="password"],
.cart-page-form .form-shopping select,
.cart-page-form .form-shopping textarea {
    background: #fff;
    border: 1px solid #ccc;
    color: var(--color-body);
    font-size: 16px;
    padding: 12px 14px;
    line-height: 1.4;
}
.cart-page-form .form-shopping input:focus,
.cart-page-form .form-shopping select:focus,
.cart-page-form .form-shopping textarea:focus {
    outline: none;
    border-color: var(--color-logo-dark);
}
.cart-page-form .form-shopping select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M6 8L0 0h12z' fill='%23333'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.cart-page-form .form-shopping textarea {
    min-height: 120px;
}

/* fix select text cutoff in shopping form */
.cart-page-form .form-shopping select {
    height: auto;
    min-height: 48px;
    line-height: 1.5;
}


/* Shopping form: action buttons */
.cart-page-form .actions-toolbar {
    margin-top: 30px;
}
.cart-page-form .actions-toolbar .action-btn {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
}
.cart-page-form .actions-toolbar .btn {
    min-width: 220px;
    min-height: 56px;
    padding: 14px 24px;
    font-size: 17px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.cart-page-form .actions-toolbar .btn.btn-outline {
    background: #fff;
    border: 2px solid #999;
    color: var(--color-body);
    font-weight: 600;
}
.cart-page-form .actions-toolbar .btn.btn-outline:hover {
    background: #f5f5f5;
    color: var(--color-body);
}
.cart-page-form .actions-toolbar .btn.btn-primary {
    background: var(--color-btn-primary);
    color: #fff;
    font-weight: 700;
}
.cart-page-form .actions-toolbar .btn.btn-primary:hover {
    background: var(--color-btn-primary_hover);
}


/* Shopping flow: cart-level typography for content */
.cart-page-form .card .card-title {
    font-size: 22px;
    font-weight: 700;
}
.cart-page-form .card .card-title .action-edit,
.cart-page-form .card .card-title button.action-edit {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--color-link);
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    margin-left: auto;
    text-decoration: none;
    line-height: 1.4;
}
.cart-page-form .card .card-title .action-edit:hover,
.cart-page-form .card .card-title button.action-edit:hover {
    opacity: 0.85;
}
.cart-page-form .card .card-title .desc {
    color: var(--color-body);
}
.cart-page-form .data.table th,
.cart-page-form .data.table td {
    font-size: 17px;
    padding: 14px 16px;
}
.cart-page-form .data.table.totals tr:last-child th,
.cart-page-form .data.table.totals tr:last-child td {
    font-size: 20px;
    font-weight: 700;
    border-top: 2px solid var(--color-body);
}
.cart-page-form .confirm-dl,
.account-form .cart-page-form .confirm-dl,
.mypage-change-panel .confirm-dl,
.confirm-dl-wrap .confirm-dl {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px 24px;
    font-size: 15px;
    margin: 0;
}
.cart-page-form .confirm-dl dt,
.account-form .cart-page-form .confirm-dl dt,
.mypage-change-panel .confirm-dl dt,
.confirm-dl-wrap .confirm-dl dt {
    font-weight: 700;
    color: #333;
    font-size: 15px;
}
.cart-page-form .confirm-dl dd,
.account-form .cart-page-form .confirm-dl dd,
.mypage-change-panel .confirm-dl dd,
.confirm-dl-wrap .confirm-dl dd {
    margin: 0;
    font-size: 15px;
}
.confirm-dl-wrap { padding: 20px; }
.confirm-dl-wrap .card-title { font-size: 22px; }
.cart-page-form .card-body p,
.cart-page-form .card-body address {
    font-size: 17px;
    line-height: 1.7;
}
.cart-page-form .text-lead {
    font-size: 18px;
    line-height: 1.8;
}


/* fix flex card-title with text-center: use justify-content */
.cart-page-form .card .card-title.text-center {
    justify-content: center;
}

/* Step 3 confirm: dl with sensible width */
.cart-page-form .confirm-dl {
    grid-template-columns: 200px minmax(auto, 600px);
}

/* Step 3 confirm: order table column header alignment */
.cart-page-form table.cart.items thead th {
    text-align: left;
    padding: 14px 16px;
}
.cart-page-form table.cart.items thead th.col:nth-child(2) { text-align: center; }
.cart-page-form table.cart.items thead th.col:nth-child(3) { text-align: right; }
.cart-page-form table.cart.items tbody td.col.qty { text-align: center; }
.cart-page-form table.cart.items tbody td.col.subtotal { text-align: right; }

/* Step 3 confirm: totals table layout */
.cart-page-form .data.table.totals { width: 100%; }
.cart-page-form .data.table.totals th {
    text-align: left;
    --width: 50%;
    width: 80%;
    padding-left: 16px;
    font-weight: 500;
}
.cart-page-form .data.table.totals td {
    text-align: right;
    width: 50%;
    padding-right: 16px;
}


/* Shopping form: input width cap (not 100%) */
.cart-page-form .form-shopping .input-text,
.cart-page-form .form-shopping select,
.cart-page-form .form-shopping textarea {
    max-width: 600px;
    width: 100%;
}
.cart-page-form .form-shopping .row.g-2 {
    display: flex;
    gap: 12px;
    max-width: 600px;
}
.cart-page-form .form-shopping .row.g-2 > .col-6 {
    flex: 1 1 0;
}
.cart-page-form .form-shopping .row.g-2 > .col-6 .input-text {
    max-width: 100%;
}


/* Step2: center form content */
.cart-page-form .form-shopping .field {
    text-align: center;
}
.cart-page-form .form-shopping .field > .control,
.cart-page-form .form-shopping .field > label.label {
    display: block;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.cart-page-form .form-shopping .input-text,
.cart-page-form .form-shopping select,
.cart-page-form .form-shopping textarea,
.cart-page-form .form-shopping .row.g-2,
.cart-page-form .form-shopping .input-group {
    margin-left: auto;
    margin-right: auto;
}
.cart-page-form .form-shopping fieldset.fieldset > legend {
    text-align: center;
    margin-bottom: 16px;
}




/* Step3 confirm: unify card-body content to single max-width centered */
.cart-page-form .card.is-confirm-card .card-body > * {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
/* Shopping form: payment radios の中だけ左寄せ（カード自体は他と同じ 700px センター揃え） */
.form-shopping .card.is-confirm-card .card-body fieldset .field {
    text-align: left;
    margin-bottom: 12px;
}
.form-shopping .card.is-confirm-card .card-body .payment-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}


/* Shopping Step 2: delivery list & payment options */
.cart-page-form .delivery-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}
.cart-page-form .delivery-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 6px 12px;
    padding: 16px 20px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}
.cart-page-form .delivery-item input[type="radio"] {
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 4px;
}
.cart-page-form .delivery-item .delivery-name { font-weight: 700; font-size: 17px; }
.cart-page-form .delivery-item .delivery-detail { color: #555; font-size: 15px; }
.cart-page-form .delivery-item:has(input:checked) {
    border-color: var(--color-logo-dark);
    background: #f0f8ff;
}

.cart-page-form .payment-option {
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}
.cart-page-form .payment-detail {
    margin: 10px 0 0 30px;
    padding: 12px;
    background: #f7f9fb;
    border: 1px solid #e0e6ed;
}
.cart-page-form .card-item {
    display: block;
    padding: 8px 0;
    cursor: pointer;
    font-size: 16px;
}


/* Card title note (e.g. "2個口の配送になります") */
.cart-page-form .card-title-note {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-btn-primary);
    margin-left: 12px;
}


/* Step 4: next-steps list */
.cart-page-form .next-steps {
    padding-left: 0;
    margin: 0;
    list-style: decimal inside;
}
.cart-page-form .next-steps li::marker {
    font-weight: 700;
}
.cart-page-form .next-steps li {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 8px;
}


/* spacer between vehicle dl and table on cart */
.cart-page-form hr.section-sep {
    border: none;
    border-top: 1px solid var(--c-gray);
    margin: 24px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* mypage-list inline button cap (prevent full-width buttons on list pages) */
.account-form .actions-toolbar .btn.btn-cart,
.account-form .actions-toolbar .btn:not(.save) {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* mypage list pages: inline action button (not full-width) */
.account-form .account-content .actions-toolbar .btn.btn-md,
.account-form .account-content .actions-toolbar .btn:not(.save):not(.action) {
    width: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    padding: 12px 28px !important;
}

/* Override: wishlist action-links horizontal */
.account-form #wishlist-table .action-links {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* favorite/wishlist: compact buttons */
#wishlist-table .action-links .btn.btn-cart {
    width: auto !important;
    min-width: 100px;
    padding: 10px 12px !important;
    font-size: 14px !important;
}


/* ===== mypage Tier2 polish ===== */

/* change page: 3-tab panels — flatten card, raise text size */
.mypage-change-panel {
    margin-bottom: 30px;
}
.mypage-change-panel .input-text,
.mypage-change-panel select {
    font-size: 16px;
    height: 44px;
    padding: 8px 12px;
}
.mypage-change-panel textarea.input-text { height: auto; }

/* split inputs (postcode / tel / fax) */
.input-split-zip .input-text,
.input-split-tel .input-text {
    text-align: center;
}

/* favorite: kill outer card frame leftover */
.wishlist-card { border: none !important; }
.wishlist-card > div { padding: 0 !important; border: none !important; }

/* vehicle/new: bigger labels & inputs, sane spacing, button row */
.vehicle-new-form .field > .label > span {
    font-size: 16px;
    font-weight: 700;
}
.vehicle-new-form .input-text,
.vehicle-new-form select {
    font-size: 16px;
    height: 44px;
    padding: 8px 12px;
}
.vehicle-new-form .field { margin-bottom: 20px; }

/* unify action-btn alignment for new pages */
.account-content .actions-toolbar.group-btn .action-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}



/* ===== Tier2 polish v2: layout fixes after card removal ===== */

/* (td.group-btn / actions-toolbar overrides removed — let mypage/quotation defaults rule) */

/* vehicle/new — restore inline year/month selects */
.account-form .group-vehicle .group-fields > .control > .fields {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.account-form .group-vehicle .group-fields > .control > .fields > .field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.account-form .group-vehicle .group-fields > .control > .fields > .field > select {
    width: auto;
    min-width: 96px;
}
.account-form .group-vehicle .group-fields > .control > .fields > .field > label {
    font-size: 16px;
    margin: 0;
}
.account-form .group-vehicle .field.required > .label > span,
.account-form .group-vehicle .field > .label > span {
    font-size: 16px;
    font-weight: 700;
}
.account-form .group-vehicle .field {
    margin-bottom: 20px;
}
.account-form .group-vehicle .field > .control > .input-text,
.account-form .group-vehicle .field > .control > select {
    height: 44px;
    font-size: 16px;
}

/* vehicle/new save+back row */
.vehicle-new-form .actions-toolbar.group-btn { margin-top: 30px; }
.vehicle-new-form .actions-toolbar.group-btn .action-btn {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    justify-content: center !important;
    width: 100%;
}
.vehicle-new-form .actions-toolbar.group-btn .action-btn .btn {
    width: auto !important;
    min-width: 160px !important;
    flex: 0 0 auto !important;
    padding: 12px 32px !important;
    font-size: 16px !important;
}

/* change page form labels & h2 */
.mypage-change-panel .card-title {
    font-size: 22px !important;
    font-weight: 700;
    text-align: center;
    margin: 0 0 24px !important;
}
.mypage-change-panel .field { margin-bottom: 16px; }
.mypage-change-panel .field > .label > span {
    font-size: 15px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 6px;
}
.mypage-change-panel .input-text,
.mypage-change-panel select {
    font-size: 15px !important;
    height: 44px !important;
    padding: 8px 12px !important;
}
.mypage-change-panel .actions-toolbar .btn {
    width: auto !important;
    min-width: 180px;
    padding: 12px 32px !important;
}
/* 確認画面: 二択ボタンを同寸で並べる */
.auth-card .actions-toolbar .action-btn,
.confirm-dl-wrap .actions-toolbar .action-btn {display:flex; gap:16px; justify-content:center; align-items:stretch; flex-wrap:wrap;}
.auth-card .actions-toolbar .btn,
.confirm-dl-wrap .actions-toolbar .btn {min-width: 200px; padding: 12px 24px; font-size: 15px; font-weight: 700;}
@media screen and (min-width: 1024px) {
  .auth-card .actions-toolbar .btn,
  .confirm-dl-wrap .actions-toolbar .btn {font-size: 18px;}
}
/* 確認画面: フォーム値を保持する隠しフィールド群 */
.confirm-hidden-fields {display: none;}

/* マイページ カード追加フォーム:
   Magento の `form .field { display: flex }` だと
   ラベル左 / 入力右の横並びになるため、項目内でラベル上 → 入力下に
   並ぶよう display を block に戻す。 */
#card-add-form.auth-form > .field {
    display: block !important;
    width: 100% !important;
}
#card-add-form.auth-form > .field > .label {
    display: block !important;
    width: auto !important;
    margin-bottom: 6px !important;
}
#card-add-form.auth-form > .field > .control {
    display: block !important;
    width: 100% !important;
}
/* 有効期限の月/年セレクトは数字 2〜4 桁なので input-md (240px) は広すぎる。
   月は 70px / 年は 90px に縮める */
#card-add-form.auth-form select#card_month.input-md { width: 70px !important; }
#card-add-form.auth-form select#card_year.input-md  { width: 90px !important; }

/* ====== ペイジェント クレジット画面 (cart 内) の登録カード表示 ======
   旧来は小さな table 表示で読みづらかったため、ラジオ + カード番号大表示の
   行リスト形式に置き換える */
.cart-page-form .stock-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cart-page-form .stock-card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid #d7dbe2;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cart-page-form .stock-card-row:hover {
    border-color: #999;
    background: #fafafa;
}
.cart-page-form .stock-card-radio {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
}
.cart-page-form .stock-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}
.cart-page-form .stock-card-number {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: "Courier New", monospace;
    color: #222;
}
.cart-page-form .stock-card-meta {
    font-size: 13px;
    color: #555;
}
.cart-page-form .stock-card-row:has(.stock-card-radio:checked) {
    border-color: var(--color-btn-primary);
    background: #fff7f7;
}

/* 新しいカードで支払うセクション見出し */
.cart-page-form .form-section-heading {
    font-size: 17px;
    font-weight: 700;
    margin: 30px 0 4px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

/* 登録カード一覧と (JS で差し込まれる) セキュリティコード欄との間に余白 */
.cart-page-form #stock_security_code_slot:not(:empty) {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #d7dbe2;
}

/* checkout-notice をカード内 / 選択肢内に埋め込む用途のサイズ調整 (色は維持) */
.checkout-notice.checkout-notice--inline {
    font-size: 14px;
    padding: 12px 16px;
    margin: 12px 0 0;
    border-width: 1px;
    border-left-width: 6px;
    line-height: 1.6;
}
@media (max-width: 720px) {
    .checkout-notice.checkout-notice--inline { font-size: 13px; padding: 10px 14px; }
}

/* favorite — buttons truly horizontal, never clip */
.account-form .wishlist-card .table td:last-child {
    width: 240px;
}
.account-form #wishlist-table .action-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}
.account-form #wishlist-table .action-links .btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 100px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}


/* ===== Tier2 polish v3 ===== */

/* (section-title and card-title overrides removed — let mypage/quotation defaults rule) */

/* input width — actual content size, not 100% */
.account-form .input-text.input-md,
.account-form select.input-md {
    width: 240px !important;
    max-width: 100%;
    display: inline-block;
}
.account-form .input-text.input-lg {
    width: 480px !important;
    max-width: 100%;
    display: inline-block;
}

/* form labels (項目見出し) */
.account-content .field > .label {
    display: block;
    margin-bottom: 6px;
}
.account-content .field > .label > span {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-body);
}
.account-content .field { margin-bottom: 16px; }

/* row of姓/名 etc — keep inline */
.input-name-row { flex-wrap: wrap; gap: 12px; }

/* override prior 100% rules from earlier polish */
.mypage-change-panel .input-text,
.mypage-change-panel select {
    width: auto !important;
}
.mypage-change-panel .input-split-zip .input-text,
.mypage-change-panel .input-split-tel .input-text {
    width: 80px !important;
}
.mypage-change-panel .input-split-zip .input-text[name="postcode_2"],
.mypage-change-panel .input-split-tel .input-text[name="telephone_3"],
.mypage-change-panel .input-split-tel .input-text[name="fax_3"] {
    width: 96px !important;
}

/* vehicle/new inputs — match content size */
.vehicle-new-form .field > .control > .input-text,
.account-form .group-vehicle .field > .control > .input-text {
    width: 360px !important;
    max-width: 100%;
}
.account-form .group-vehicle .field > .control > select.vehicle-field {
    width: 360px !important;
    max-width: 100%;
}
.account-form .group-vehicle .field > .control input[name="car_no"] {
    width: 280px !important;
    max-width: 100%;
}
.account-form .group-vehicle .field > .control input[name="vehicle_name"] {
    width: 360px !important;
    max-width: 100%;
}


/* ===== Tier2 polish v4 ===== */

/* change page document-tabs (outside card) — remove borders, equal widths, no border on panel */
.account-content > .document-tabs {
    border: none !important;
    margin: 0 0 16px !important;
    gap: 4px;
}
.account-content > .document-tabs .document-tab {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #eef2f6 !important;
    top: 0 !important;
}
.account-content > .document-tabs .document-tab.is-active {
    background: var(--color-logo-dark) !important;
    color: #fff !important;
}
.mypage-change-panel > .card,
.mypage-change-panel > div > .card,
.account-content > .document-panel.mypage-change-panel {
    border: none !important;
    padding-top: 0 !important;
}

/* vehicle/new — force input widths inside card */
.account-form .group-vehicle .input-text,
.account-form .group-vehicle select {
    width: 360px !important;
    max-width: 100%;
    display: inline-block;
}
.account-form .group-vehicle input[name="car_no"] { width: 280px !important; }
.account-form .group-vehicle .group-fields .fields select { width: 96px !important; }
.account-form .group-vehicle .field { margin-bottom: 18px; }


/* ===== Tier2 polish v5 ===== */

/* Tabs: force exactly equal widths regardless of label text */
.account-content > .document-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border: none !important;
    margin: 0 0 16px !important;
}
.account-content > .document-tabs .document-tab {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    top: 0 !important;
    background: #eef2f6 !important;
    text-align: center;
}
.account-content > .document-tabs .document-tab.is-active {
    background: var(--color-logo-dark) !important;
    color: #fff !important;
}

/* Below-table action button — left-aligned, small */
.account-content .below-table-action {
    text-align: left !important;
    padding: 0 !important;
}
.account-content .below-table-action .btn {
    width: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-width: 140px;
    padding: 10px 24px !important;
}

/* Send-to address & card tables: each data row gets a separator */
.mypage-change-panel .table tbody tr td {
    border-bottom: 1px solid #ccc;
}

/* vehicle/new — center the form so the card is not stuck to the left */
.account-form .group-vehicle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


/* favorite — wishlist button text white (was blue link color) */
#wishlist-table .action-links .btn,
#wishlist-table .action-links .btn span {
    color: #fff !important;
}


/* change page credit-card row delete button — compact, centered (card panel only) */
#document-panel-card .table td.group-btn .action-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 8px;
    justify-content: center;
    width: auto !important;
}
#document-panel-card .table td.group-btn .action-btn .btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 100px;
    padding: 10px 24px !important;
    font-size: 14px !important;
}
#document-panel-card .table td.group-btn {
    text-align: center;
    padding: 12px !important;
    border-bottom: 1px solid #ccc !important;
}


/* SP local nav toggle */
@media screen and (max-width: 920px) {
  .account-form .navigation-links .ins-spLocalnavi {
    cursor: pointer;
    background: var(--bg-black);
    color: #fff;
    margin: 0;
    padding: 14px 40px 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    position: relative;
  }
  .account-form .navigation-links .ins-spLocalnavi__page {
    font-size: 16px;
  }
  .account-form .navigation-links .ins-spLocalnavi__hint {
    font-size: 12px;
    font-weight: 400;
    color: #cfd5dd;
    background: rgba(255,255,255,0.12);
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.3);
  }
  .account-form .navigation-links .ins-spLocalnavi::after {
    content: "▼";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: transform 0.2s ease;
  }
  .account-form .navigation-links .ins-spLocalnavi.is-open::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .account-form .navigation-links .action-links {
    display: none;
  }
  .account-form .navigation-links .action-links.is-open {
    display: block;
  }
}

/* favorite — heading consistent with other pages */
#wishlist-table thead th {
    font-size: 20px !important;
    font-weight: 700;
    padding: 12px;
}

/* favorite — bigger product title */
#wishlist-table .product-content .title a {
    font-size: 16px;
    font-weight: 700;
}


/* quotation/view 見積もり確認 */
.quotation-view .quotation-summary {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-gray);
}
.quotation-view .quotation-summary-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-body);
}
.quotation-view .quotation-summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-logo-dark);
}
.quotation-view .quotation-vehicle-no {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 12px;
    padding: 8px 12px;
    background: #f3f5f8;
    border-left: 4px solid var(--color-logo-dark);
}
.quotation-total {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 24px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--c-gray);
}
.quotation-total dt {
    color: var(--color-btn-primary);
    font-weight: 700;
    margin: 0;
}
.quotation-total dd {
    color: var(--color-btn-primary);
    text-align: right;
    margin: 0;
    font-weight: 700;
}
.quotation-total dt.quotation-total-grand,
.quotation-total dd.quotation-total-grand {
    font-size: 20px;
    padding-top: 8px;
    border-top: 1px solid var(--c-gray);
    margin-top: 8px;
}
.quotation-note {
    background: #f8f9fb;
    padding: 16px 20px;
    border-left: 4px solid #cbd2da;
}
.quotation-note-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}
.quotation-note ul {
    list-style: disc inside;
    margin: 0;
    padding: 0;
}
.quotation-note ul li {
    line-height: 1.7;
}
.quotation-view .actions-toolbar.group-btn .action-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.quotation-view .actions-toolbar.group-btn .action-btn .btn {
    min-width: 180px;
    padding: 12px 24px;
}


/* 日付レンジ from-to */
.document-filter-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.document-filter-range .document-filter-input {
    width: 180px;
}
.document-filter-range-sep {
    color: var(--color-body);
    font-weight: 700;
}

/* mypage top — 送付先変更リンクボタン */
.ins-status .ins-status-action {
    margin: 12px 0 0;
}
.ins-status .ins-status-action .btn {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
}


/* ===== Tier3 認証系 ===== */
.auth-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}
.auth-card {
    background: #fff;
    padding: 32px 28px;
    border: 1px solid var(--c-gray);
}
.auth-card--center {
    text-align: center;
}
.auth-card--center .auth-lead {
    text-align: center;
}
.auth-lead {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px;
}
.auth-form .field {
    margin-bottom: 18px;
}
.auth-form .label {
    display: block;
    margin-bottom: 6px;
}
.auth-form .label > span {
    font-size: 14px;
    font-weight: 700;
}
/* Magento style.css already adds `*` for .field.required > .label > span:after — don't duplicate */
.auth-form .input-text,
.auth-form select {
    font-size: 15px;
    height: 44px;
    padding: 8px 12px;
}
.auth-form .input-text.input-md { width: 240px; max-width: 100%; }
.auth-form .input-text.input-lg { width: 100%; max-width: 480px; }
.auth-form select.input-md { width: 240px; max-width: 100%; }

/* 姓/名・セイ/メイ を横並びで適度な幅に */
.auth-form .input-name-row,
.cart-page-form .input-name-row { flex-wrap: nowrap !important; gap: 12px; }
.auth-form .input-name-row > .col-auto,
.cart-page-form .input-name-row > .col-auto { flex: 0 0 auto !important; min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }
.auth-form .input-name-row .input-text.input-md,
.cart-page-form .input-name-row .input-text.input-md { width: 140px !important; }

/* お問い合わせ等の textarea は幅 100% でラージ表示 */
.auth-form textarea.input-text { width: 100% !important; max-width: 100% !important; height: auto; }

/* 年月の小さな input */
.auth-form .input-text.input-year { width: 80px !important; text-align: center; }
.auth-form .input-text.input-month { width: 56px !important; text-align: center; }
.auth-form .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
/* .field 直下の checkbox-label は親幅にフィットさせる（長文の同意文等で
   inline-flex のままだとモバイル viewport を突き抜けるため） */
.auth-form .field > .checkbox-label {
    display: flex;
    max-width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.auth-form .field-note {
    font-size: 12px;
    color: #666;
    margin: 6px 0 0;
}
.auth-form .actions-toolbar.group-btn .action-btn {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.auth-form .actions-toolbar.group-btn .action-btn .btn {
    min-width: 180px;
    padding: 12px 24px;
}
.auth-card--center .actions-toolbar.group-btn .action-btn {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.auth-card--center .actions-toolbar.group-btn .action-btn .btn {
    min-width: 180px;
    padding: 12px 24px;
}
.auth-links {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.auth-links a {
    color: var(--color-link);
    text-decoration: underline;
    font-size: 14px;
}
.auth-note {
    background: #f8f9fb;
    padding: 16px 20px;
    border-left: 4px solid #cbd2da;
    text-align: left;
}
.auth-note-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
}
.auth-note ul {
    list-style: disc inside;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.auth-note ul li { line-height: 1.7; }
.auth-note code {
    background: #fff;
    padding: 2px 6px;
    border: 1px solid var(--c-gray);
    font-family: monospace;
}


/* Buttons: unify font across <a> and <button> */
.btn,
button.btn,
button.action {
    font-family: inherit;
}


/* name row should align with siblings (cancel .row.g-2 negative margin) — apply to auth pages and mypage forms */
.auth-form .input-name-row,
.account-content .input-name-row {
    margin: 0 !important;
}
.auth-form .input-name-row > .col-auto,
.account-content .input-name-row > .col-auto {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* name row: kill stray ::before/::after clearfix that becomes a flex item */
.auth-form .input-name-row::before,
.auth-form .input-name-row::after,
.account-content .input-name-row::before,
.account-content .input-name-row::after {
    display: none !important;
}

/* Buttons: unify letter-spacing (戻る had 0.75px, 確認メール had normal) */
.auth-form .actions-toolbar.group-btn .action-btn .btn {
    letter-spacing: 0 !important;
}


/* auth-form: force same font-size on both <a> and <button> buttons */
.auth-form .actions-toolbar.group-btn .action-btn .btn,
.auth-form .actions-toolbar.group-btn .action-btn button.btn {
    font-size: 16px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    font-family: "Noto Sans JP", sans-serif !important;
}


/* ===== 部位から絞り込み: 戻るボタンを初期非表示 ===== */
/* 部位: 戻るボタン初期非表示。pc/sp 表示出し分け */
#search-Position .back-button_wrap {
    display: none !important;
}
@media screen and (min-width: 768px) {
    #search-Position .back-button_wrap.pc.is-shown {
        display: block !important;
    }
}
@media screen and (max-width: 767px) {
    #search-Position .back-button_wrap.sp.is-shown {
        display: block !important;
    }
}

/* ===== 車種カスケード: アクティブ状態（グレー、タブと同色） ===== */
.area .cascade-car.is-active,
.area .cascade-model.is-active,
.area .cascade-grade.is-active {
    background: var(--bg-black) !important;
    color: #fff !important;
}
.area .step-filter .list .text-muted {
    color: #999;
    font-size: 14px;
    padding: 12px;
    display: block;
}

/* ===== 車種カスケード: モデル画像（サムネ）統一サイズ ===== */
.area .step-filter .cascade-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px;
    background: #fff;
    min-height: 160px;
}
.area .step-filter .cascade-thumb img {
    max-width: 100%;
    --width: 280px;
    width: 250px;
    height: 160px;
    object-fit: contain;
}
@media screen and (max-width: 940px) {
    .area .step-filter .cascade-thumb {
        min-height: 120px;
    }
    .area .step-filter .cascade-thumb img {
        width: 100%;
        max-width: 240px;
        height: 120px;
    }
}


/* ===== 部位から絞り込み: 2段階(メイン+SVG) / 3段階(メイン+サブ+SVG) ===== */
#area_parts1.active {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}
/* breadcrumbs: 最上段フル幅 */
#area_parts1 > .breadcrumbs {
    flex: 0 0 100%;
    order: 0;
    font-weight: 700;
    color: var(--color-logo-dark);
}
/* メインリスト: 左カラム */
#area_parts1 > ul.list_child {
    flex: 0 0 280px;
    order: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* サブリスト: メインの右隣（3段階時のみ表示） */
#area_parts1 > ul.list_child_sub {
    flex: 0 0 280px;
    order: 2;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* SVG画像: 残り幅 */
#area_parts1 > .image {
    flex: 1 1 0;
    min-width: 320px;
    max-width: 100%;
    max-height: 500px;
    overflow: hidden;
    order: 3;
}
#area_parts1 > .image .tab-preview-container img {
    --max-height: 480px;
    --width: auto;
    width:70%;
    height: auto;
    object-fit: contain;
}
/* メインリスト 選択中ハイライト（グレー、タブと同色） */
#area_parts1 > ul.list_child > li.is-active > a.part,
#area_parts1 > ul.list_child > li.is-active {
    background: var(--bg-black) !important;
}
#area_parts1 > ul.list_child > li.is-active > a.part span {
    color: #fff !important;
}
/* 内部 ul.tabs は使わない */
#area_parts1 > ul.tabs { display: none !important; }
@media screen and (max-width: 767px) {
    /* ====== SP: 部位エリア全体 ====== */
    #area_parts1.active {
        gap: 12px;
    }
    /* 全リストを2列・全幅で統一。gap でタブと同じ行間 (10px) を確保 */
    /* 注意: display: none で隠されているリストには flex を適用しない */
    #area_parts1 > ul.list_child[style*="block"],
    #area_parts1 > ul.list_child_sub[style*="block"] {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex !important;
        flex-wrap: wrap !important;
        column-gap: 8px !important;
        row-gap: 10px !important;
    }
    /* タブの ul も同様に gap で揃える */
    #tabs.tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        column-gap: 8px !important;
        row-gap: 10px !important;
    }
    /* sub が表示されているときはメインを隠す（ドリルダウン置換） */
    #area_parts1.is-sub-open > ul.list_child {
        display: none !important;
    }
    /* リストアイテムはどの階層でも50%幅（2列） */
    #area_parts1 ul.list_child > li,
    #area_parts1 ul.list_child_sub > li,
    #tabs.tabs > .group-tab {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        margin: 0 !important;
    }
    /* 「ひとつ前に戻る」は常に全幅で末尾に表示 */
    #area_parts1 .back-button-list_child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 8px;
    }
    /* SP: SVGはコンパクトに上部に表示（はみ出し抑止） */
    #area_parts1 > .image {
        flex: 0 0 100%;
        max-width: 100%;
        --max-height: 220px;
        order: 0;
        overflow: visible !important;
        position: relative;
    }
    #area_parts1 > .image .tab-preview-container {
        overflow: visible !important;
        position: relative;
    }
    #area_parts1 > .image .tab-preview-container img {
        width:90%;
    }
    /* SVGコンテナ内の戻るボタン（重複）を非表示 */
    #area_parts1 .image .back-button_wrap.sp {
        display: none !important;
    }
    /* PC赤丸戻るボタンは SP では非表示 */
    #search-Position .back-button_wrap.pc.is-shown {
        display: none !important;
    }
    /* 階層ごとのハイライト色を統一（グレー） */
    #area_parts1 ul.list_child > li.is-active,
    #area_parts1 ul.list_child > li.is-active > a.part {
        background: var(--bg-black) !important;
    }
    #area_parts1 ul.list_child > li.is-active span,
    #area_parts1 ul.list_child > li.is-active a {
        color: #fff !important;
    }
}


/* 部位: SVG画像が absolute なので static に上書きしてフローに乗せる */
#area_parts1 .tab-preview-container,
#area_parts1 .tab-preview-image {
    position: relative !important;
    display: block !important;
    width: 100%;
    height: auto;
    text-align: center;
}
#area_parts1 .tab-preview-container img,
#area_parts1 .tab-preview-image img,
#area_parts1 .thumbnail_child_base {
    position: static !important;
    display: inline-block !important;
    max-width: 100%;
    --max-height: 480px;
    width: auto;
    height: auto;
    top: auto !important;
    left: auto !important;
}

/* 不要なSP用サムネイルは部位エリアでは出さない */
#area_parts1 .thumbnail.sp,
#area_parts1 .thumbnail.pc {
    display: none !important;
}


/* ===== 部位/車種カスケード: production の青ハイライト #00a7ea を完全に上書き ===== */
.search_parts .list_child li.active,
.search_parts .list_child li:hover,
.search_parts .list_child_sub li.active,
.search_parts .list_child_sub li:hover,
.search_parts .tabs li.active,
.search_parts .tabs li:hover,
#area_parts1 ul.list_child > li.is-active,
#area_parts1 ul.list_child_sub > li.is-active,
.area .cascade-car:hover,
.area .cascade-model:hover,
.area .cascade-grade:hover,
.area .cascade-car.is-active,
.area .cascade-model.is-active,
.area .cascade-grade.is-active {
    background: var(--bg-black) !important;
    color: #fff !important;
}
.search_parts .list_child li.active a,
.search_parts .list_child li:hover a,
.search_parts .list_child li.active span,
.search_parts .list_child li:hover span,
.search_parts .list_child_sub li.active a,
.search_parts .list_child_sub li:hover a,
.search_parts .list_child_sub li.active span,
.search_parts .list_child_sub li:hover span {
    color: #fff !important;
}


/* (サイズ統一CSSは取り消し) */


/* breadcrumbs を黒に */
#area_parts1 > .breadcrumbs,
#area_parts1 > .breadcrumbs a,
#area_parts1 > .breadcrumbs span {
    color: #222 !important;
}

/* 「< ひとつ前に戻る」のホバー背景無効化 */
.search_parts .list_child li.back-button-list_child:hover,
.search_parts .list_child_sub li.back-button-list_child:hover,
#area_parts1 .back-button-list_child:hover,
#area_parts1 .back-button-list_child:hover button,
#area_parts1 .back-button-list_child:hover a,
.search_parts li.back-button-list_child:hover {
    background: transparent !important;
}
.search_parts li.back-button-list_child:hover .back-button,
#area_parts1 .back-button-list_child:hover .back-button {
    background: transparent !important;
    color: var(--color-btn-primary) !important;
}

/* SP: リストアイテム共通設定 */
@media screen and (max-width: 767px) {
    .search_parts ul.list_child > li,
    .search_parts ul.list_child_sub > li,
    #area_parts1 ul.list_child > li,
    #area_parts1 ul.list_child_sub > li {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
    }
    /* SP: 戻るボタンを必ず全幅で表示 */
    #area_parts1 .back-button-list_child,
    .search_parts .back-button-list_child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 12px;
        text-align: center;
    }
    #area_parts1 .back-button-list_child .back-button {
        display: inline-block;
        padding: 10px 24px;
        background: var(--color-btn-primary);
        color: #fff;
        border: none;
        text-decoration: none;
        font-size: 14px;
    }
}


/* ===== 車種ポップアップ: 中間幅(タブレット)のレイアウト崩れ対策 ===== */
/* 3カラムを維持して、各カラムを均等幅に */
.action-filter .step-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .action-filter .step-content .step-filter {
        width: calc(33.333% - 20px) !important;
        flex: 1 1 0 !important;
        margin-top: 0 !important;
    }
    .action-filter .step-content .icon {
        width: auto !important;
        flex: 0 0 auto !important;
    }
}

/* SP は縦積みで OK */
@media screen and (max-width: 767px) {
    .action-filter .step-content {
        flex-wrap: wrap;
    }
    .action-filter .step-content .step-filter {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .action-filter .step-content .icon {
        display: none !important;
    }
}

/* 「この条件で検索」「閉じる」ボタンのサイズ揃え */
.area .flexbox {
    align-items: center;
    gap: 16px;
}
.area .flexbox .text-center .btn,
.area .close-wrap button {
    padding: 14px 36px !important;
    font-size: 16px !important;
    min-width: 160px;
    line-height: 1.4 !important;
}


/* ===== 部位: 戻るボタン重複対策 ===== */
/* sub 表示中はメインリスト内の back-button-list_child を非表示（重複回避） */
#area_parts1.is-sub-open ul.list_child > li.back-button-list_child {
    display: none !important;
}

/* ===== SP: リストアイテムのマージン/パディング統一（1段目タブと揃え） ===== */
@media screen and (max-width: 767px) {
    /* タブ・メイン・サブ全部同じパディングと余白 */
    /* マージン揃え（production の .tabs li margin-bottom:10px と統一） */
    #tabs > .group-tab,
    #area_parts1 ul.list_child > li,
    #area_parts1 ul.list_child_sub > li,
    .search_parts .tabs li,
    .search_parts .list_child li,
    .search_parts .list_child_sub li {
        margin-bottom: 10px !important;
    }
    .search_parts ul.tabs > li > a,
    .search_parts ul.list_child > li > a,
    .search_parts ul.list_child_sub > li > a,
    #area_parts1 ul.tabs > li > a,
    #area_parts1 ul.list_child > li > a,
    #area_parts1 ul.list_child_sub > li > a {
        padding: 5px 16px !important;
        font-size: 14px !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    /* SP ではサブ表示時にメインを非表示（既存定義の補強） */
    #area_parts1.is-sub-open > ul.list_child {
        display: none !important;
    }
    /* SP の戻るボタン（li.back-button-list_child）を確実に表示 */
    #area_parts1 ul.list_child_sub li.back-button-list_child,
    #area_parts1 ul.list_child li.back-button-list_child {
        display: block !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center;
        margin-top: 12px;
    }
    #area_parts1 li.back-button-list_child .back-button {
        display: inline-block !important;
        padding: 10px 28px;
        background: var(--color-btn-primary);
        color: #fff;
        border: none;
        font-size: 14px;
        text-decoration: none;
        cursor: pointer;
    }
}


/* ===== 車種ポップアップ: 中間幅で上部スペース確保 + ボタン位置揃え ===== */
.area.action-filter {
    padding: 24px 20px !important;
}
.area .col.dropdown {
    margin-bottom: 16px;
}
.area .flexbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}
.area .flexbox .text-center {
    margin-bottom: 0 !important;
}
.area .close-wrap {
    margin-left: 0 !important;
}
.area .flexbox .text-center .btn,
.area .close-wrap button {
    height: 56px;
    line-height: 1 !important;
    box-sizing: border-box;
}


/* SP: 車種ポップアップの list が固定 350px 高さで余白できるのを解除 */
@media screen and (max-width: 1023px) {
    .area .step-filter .list,
    .action-filter .step-content .step-filter .list {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* TabaCMS2 重要なお知らせ: WYSIWYG の <p>マージンを縮める。空段落と改行のみの段落は非表示 */
.centpia-important-body p { margin: 0 0 4px !important; padding: 0 !important; }
.centpia-important-body p:last-child { margin-bottom: 0 !important; }
.centpia-important-body p:empty,
.centpia-important-body p:has(> br:only-child) { display: none !important; }
.centpia-important-body ul, .centpia-important-body ol { margin: 4px 0; padding-left: 1.4em; }

/* フォームエラーメッセージ: 赤文字 (renewal の警告色ルール) */
.ec-errorMessage {
    color: var(--color-btn-primary, #c00);
    font-size: 14px;
    margin: 6px 0 0;
    font-weight: 600;
}

/* 適合確認リスト追加ダイアログ (HTML5 dialog 要素) */
dialog.centpia-dialog {
    border: 1px solid var(--color-border, #d9d9d9);
    padding: 0;
    max-width: 560px;
    width: calc(100% - 32px);
    background: #fff;
}
dialog.centpia-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
.centpia-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #d9d9d9);
}
.centpia-dialog__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}
.centpia-dialog__close {
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
}
.centpia-dialog__body {
    padding: 20px;
}
.centpia-dialog__footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border, #d9d9d9);
}
.centpia-dialog__footer .btn {
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* 検索フォーム横の車体フィルタ select */
.form-search .header-vehicle-filter {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 13px;
    margin-right: 6px;
    margin-bottom:12px;
    margin-left: 2px;
    width: calc(100% - 6px);
    --max-width: 360px;
}

/* 見積もり 商品追加・変更 ポップアップ */
.quotation-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.quotation-modal[hidden] { display: none; }
.quotation-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.quotation-modal-dialog { position: relative; background: #fff; width: min(800px, 92vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.quotation-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e5e5e5; }
.quotation-modal-header h3 { margin: 0; font-size: 16px; }
.quotation-modal-close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; }
.quotation-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
.quotation-modal-note { margin: 0 0 12px; font-size: 13px; color: #555; }
.quotation-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid #e5e5e5; }
.quotation-modal-body input.input-text { width: 80px; }

/* ご注文手続き画面の注釈テキストを小さくして、支払い方法ラベル等より目立たないようにする */
.cart-page-form p.field-note,
.cart-page-form .field .field-note,
.cart-page-form .control .field-note {
    font-size: 14px !important;
    color: #666;
    margin: 6px 0 0;
    line-height: 1.6;
    font-weight: 400;
}
.cart-page-form p.field-note.text-danger,
.cart-page-form .field .field-note.text-danger {
    color: #c33;
}

/* 会員登録フォームのセクション見出し (入力画面 .auth-form / 確認画面 .auth-content 両対応) */
/* デザインは元の h2 表記を維持し、前セクションとの間隔だけ十分に取る。
   2 つ目以降のセクションには上に区切り線が入る。Twig 側で最初の見出しのみ
   .is-first を付けるので、それ以外は border-top と margin が当たる。 */
.auth-form .form-section-title,
.auth-content .form-section-title {
    margin-top: 60px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e5e5e5 !important;
}
.auth-form .form-section-title.is-first,
.auth-content .form-section-title.is-first {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* 受取方法（縦並び） */
.receipt-method-options { list-style: none; padding: 0; margin: 0; }
.receipt-method-option-row { display: block; margin: 0 0 8px; }
.receipt-method-option { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.receipt-method-option.is-disabled { color: #999; cursor: not-allowed; }
.receipt-method-option.is-disabled input { cursor: not-allowed; }
.center-code-block { margin-top: 12px; }
.center-code-input { width: 9em; max-width: 100%; letter-spacing: 0.1em; }
.card-expired-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 12px; color: #fff; background: #c33; border-radius: 0; vertical-align: middle; }
.card-expired-note { color: #c33; font-size: 13px; padding: 4px 0 12px; }
.card-expired-note-row td { border-top: none; }
.cart-page-form.order-detail-page .table th,
.cart-page-form.order-detail-page .table td,
.cart-page-form.order-detail-page .table td a,
.cart-page-form.order-detail-page .table td span { font-size: 15px; }
.cart-page-form.order-detail-page .table th { font-weight: 700; }
.cart-page-form.order-detail-page .table td .price-tax-label { font-size: 11px; }
.cart-page-form.order-detail-page .table td .price { font-size: 14px; white-space: nowrap; }
.cart-page-form.order-detail-page .table td .price-incl-tax { font-size: 12px; white-space: nowrap; color: #555; display: block; }
.cart-page-form.order-detail-page .table td[data-th="数量"] { white-space: nowrap; }
/* マイページ会員情報変更: 480px input が SP で親をはみ出さないよう、min(480px, 100%) に */
.mypage-change-panel .input-text.input-lg { width: 100% !important; max-width: 480px; box-sizing: border-box; }
.mypage-change-panel .field .control { min-width: 0; }
.mypage-change-panel .row.g-2 .col-auto { min-width: 0; }
.centpia-line-message { color: #c33; font-weight: 700; line-height: 1.7; }
.centpia-line-message p { margin: 0 0 4px; color: #c33; }
.reorder-modal-notes { margin-top: 12px; padding-left: 1.2em; line-height: 1.8; color: #c33; font-weight: 700; }
.contact-preset-lead { font-size: 14px; font-weight: 500; color: #222; margin: 0; }
.contact-preset-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-preset-buttons .contact-preset-btn { font-size: 14px; padding: 8px 14px; font-weight: 500; }


/* SPメニュー: ログイン中の表記と車体番号セレクトの間隔 */
.navSP__login-status { padding: 0 0 8px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.navSP__login-name { color: #fff; font-size: 13px; margin: 0; opacity: 0.85; }
.navSP__vehicle-label { color: #fff; font-size: 12px; margin: 2px 0 6px; opacity: 0.75; letter-spacing: 0.02em; }
.navSP__vehicle-select { margin-bottom: 10px; }



.site-social-base {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position:relative;
}

.site-social {
    margin-bottom: 10px;
    display: flex;
    gap: 36px;
    align-items: center;
    position:absolute;
    right:50px;
}

.site-social img {
    width: 36px;
    height: 36px;
    filter: brightness(0) invert(1);
}

.footer-menu {
    margin-top: 45px !important;
}

@media (max-width: 767px) {
    .site-social {
        margin-bottom: 10px;
        display: flex;
        gap: 24px;
        align-items: center;
        position:absolute;
        right:15px;
        top: -20px;
    }

    .site-social img {
        margin-top: 40px;
        width: 24px;
        height: 24px;
        filter: brightness(0) invert(1);
    }
    
    .footer-menu {
        margin-top: 10px !important;;
    }
        
}



.pagination-area {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.ec-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ec-pager li {
    margin: 0;
    padding: 0;
}

.ec-pager a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: .2s;
    box-sizing: border-box;
}

.ec-pager a:hover {
    background: #333;
    border-color: #333;
    color: #fff;
}

.ec-pager__item--active a {
    background: #333;
    border-color: #333;
    color: #fff;
    cursor: default;
    pointer-events: none;
}

.ec-pager__item:first-child a,
.ec-pager__item:last-child a {
    padding: 0 18px;
    min-width: auto;
}

@media (max-width: 767px) {
    .ec-pager {
        gap: 6px;
    }

    .ec-pager a {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        padding: 0 10px;
    }

    .ec-pager__item:first-child a,
    .ec-pager__item:last-child a {
        padding: 0 14px;
    }
}


/*260706追加*/
/* 数量全体 */
.control.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

/* 数量入力 */
.control.qty-stepper .qty {
    width: 80px;
    height: 42px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
}

/* ＋・－ボタン */
.control.qty-stepper button {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: 1px solid #ccc;
    border-radius: 50%;
    background: #f5f5f5;

    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

/* ホバー */
.control.qty-stepper button:hover {
    background: #333;
    border-color: #333;
}

/* アイコン色 */
.control.qty-stepper button svg {
    width: 18px;
    height: 18px;
}

.control.qty-stepper button svg line {
    stroke: #333;
}

.control.qty-stepper button svg path {
    fill: #333;
}

/* ホバー時は白 */
.control.qty-stepper button:hover svg line {
    stroke: #fff;
}

.control.qty-stepper button:hover svg path {
    fill: #fff;
}


.field.qty .control {
    border: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.field.qty .control input.qty {
    width: 50px;
    height: 42px;
    border: 2px solid var(--color-border);
    text-align: center;
    box-sizing: border-box;
}

.field.qty .control button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #f5f5f5;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0;
    cursor: pointer;
}

.field.qty .control button:hover {
    background: #333;
}

.field.qty .control button:hover svg line {
    stroke: #fff;
}

.field.qty .control button:hover svg path {
    fill: #fff;
}




/* 数量全体 追加2 */
.control.mr-10 {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* formはボタンの大きさだけ */
.control.mr-10 form {
    display: contents;
}

/* 入力欄 */
.control.mr-10 .qty {
    width: 70px;
    height: 42px;
    border: 2px solid var(--color-border);
    text-align: center;
    box-sizing: border-box;
    background: #fff;
}

/* ＋・－ボタン */
.control.mr-10 button {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #ccc;
    border-radius: 50%;
    background: #f5f5f5;

    padding: 0;
    cursor: pointer;
    transition: .2s;
}

/* ホバー */
.control.mr-10 button:hover {
    background: #333;
    border-color: #333;
}

.control.mr-10 button:hover svg line {
    stroke: #fff;
}

.control.mr-10 button:hover svg path {
    fill: #fff;
}

.cart-page-form .product-info {
    gap: 0px;
}