:root {
--base-color: #d0121b;
--tab-accent: var(--base-color);
--dur: 250ms;
}
/* ============== Layout ============== */
.tabs .tab-lead { 
position: relative;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
}
.tabs .tab-lead dd {
text-align: left;
width: 50%;
position: relative;
padding: 0 1.2em 0 5.5em;  /* 下側を後で操作するので基準化 */
border: 1px solid var(--tab-accent);
box-sizing: border-box;
background: #CCCCCC;
opacity: .4;
transition: 
opacity .25s ease,
background-color .25s ease,
margin-top .25s ease,
padding-bottom .25s ease,
box-shadow .25s ease,
border-color .25s ease;
display: block;
cursor:pointer;         /* クリックできる感 */
user-select:none;
}
/* アクティブ：上辺だけ20px上げる（下は揃えたまま） */
.tabs .tab-lead dd.active {
opacity:1;
margin-top:-20px;
padding-bottom:20px;
background:#d0121b;
z-index:1;
box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.tabs .tab-lead dd:nth-of-type(1):before {
content: '';
display: inline-block;
width: 60px;
height: 60px;
background-image: url("../img/product_icon1.png");
background-size: contain;
vertical-align: middle;
position: absolute;
top: 15%;
left: 10px;
}
.tabs .tab-lead dd:nth-of-type(2):before {
content: '';
display: inline-block;
width: 60px;
height: 60px;
background-image: url("../img/product_icon2.png");
background-size: contain;
vertical-align: middle;
position: absolute;
top: 15%;
left: 10px;
}
.tabs .tab-lead dd h4 {
font-size: 22px;
line-height: 1.5em;
color: #222222;
font-weight: 700;
margin: 0px;
padding: 0.5em 0 0 0;
}
.tabs .tab-lead dd p {
font-size: 16px;
line-height: 1.5em;
color: #222222;
margin: 0px;
padding: 0 0 1em 0;
}
.tab-lead dd.active h4,
.tab-lead dd.active p {
color: #FFF;
}

.tabs .tab-list {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
}
.tab-list button.active {
background:#d0121b;
color:#fff;
border-color:#d0121b;
}
/* category1 がアクティブ → tab3, tab4 を非表示 */
.tabs:has(.tab-lead .category1.active) .tab-list .tab3,
.tabs:has(.tab-lead .category1.active) .tab-list .tab4 {
  display: none;
}
/* category2 がアクティブ → tab1, tab2 を非表示 */
.tabs:has(.tab-lead .category2.active) .tab-list .tab1,
.tabs:has(.tab-lead .category2.active) .tab-list .tab2 {
  display: none;
}
.tab-list button {
  outline: none;
  box-shadow: none;
  border: none; /* 念のため */
}
.tab-list button:focus,
.tab-list button:focus-visible,
.tab-list button:active {
  outline: none !important;
  box-shadow: none !important;
}
.tabs .tab-list [role="presentation"] { 
width: 50%;
margin: 0;
padding: 0;
}
.tabs .tab-list [role="tab"] {
-webkit-appearance: none;
appearance: none;
background: #ffeaea;
border: 1px solid var(--tab-accent);
border-bottom: 1px solid #d0121b;
box-sizing: border-box;
padding: 0.7em 0 0.7em 0;
margin: 0;
font: inherit;
cursor: pointer;
color: #333;
position: relative;
text-align: center;
width: 100%;
font-size: 18px;
line-height: 1.5em;
font-weight: 700;
display: block;
}
.tabs .tab-list [role="tab"]:hover:not([aria-selected="true"]) {

}
.tabs .tab-list [role="tab"]:focus-visible {
outline: 3px solid color-mix(in oklab, var(--tab-accent) 50%, white);
outline-offset: 2px;
}
/* アクティブは aria-selected で制御 */
.tabs .tab-list [role="tab"][aria-selected="true"] {
color: #fff;
background: var(--tab-accent);
border-color: var(--tab-accent);
font-weight: 700;
}
/* パネル領域：高さをアニメしてガクつきを抑える */
.tabs .tab-panels {
position: relative;
overflow: hidden;
border: 1px solid var(--tab-accent);
transition: height .22s ease;
}

/* パネルのフェード制御（JSが .is-active / .is-leaving を付与） */
.tabs .tab-panel {
position: absolute;
inset: 0;
padding: 20px;
overflow: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(4px);
transition:
opacity var(--dur) ease,
transform var(--dur) ease,
visibility 0s linear var(--dur);
will-change: opacity, transform;
-webkit-overflow-scrolling: touch;
}

.tabs .tab-panel.is-active {
position: relative;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition:
opacity var(--dur) ease,
transform var(--dur) ease,
visibility 0s;
}

/* フェードアウト中（非アクティブ化直後） */
.tabs .tab-panel.is-leaving {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
}

/* [hidden] を確実に無表示化（JS切替時のチラつき防止） */
.tabs .tab-panel[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
.tabs .tab-panel,
.tabs .tab-panels,
.tabs .tab-list [role="tab"] {
transition: none !important;
}
}


/* ============== Mobile tweaks ============== */
@media (max-width: 767.98px) {
.tabs .tab-list .tab1,
.tabs .tab-list .tab2 {
padding-left: 64px;
}
.tabs .tab-list .tab1::before,
.tabs .tab-list .tab2::before {
width: 40px;
height: 40px;
}
}

/* ============== Mobile tweaks ============== */
@media (max-width: 767.98px) {
/* タブのリード部分を縦並びに */
.tabs .tab-lead {

}
.tabs .tab-lead dd {
width: 50%;
padding: 0.5em 0 1em 3em;
box-sizing: border-box;
}
.tabs .tab-lead dd:nth-of-type(1):before {
content: '';
width: 40px;
height: 40px;
top: 13%;
left: 2%;
}
.tabs .tab-lead dd:nth-of-type(2):before {
content: '';
width: 40px;
height: 40px;
top: 13%;
left: 2%;
}
.tabs .tab-lead dd h4 {
font-size: 16px;
}
.tabs .tab-lead dd p {
display: none;
}
/* タブリストを縦積みに */
.tabs .tab-list {
}
.tabs .tab-list [role="presentation"] {
width: 50%;
}
.tabs .tab-list [role="tab"] {
font-size: 13px;
padding: 0.6em;
height: 4em;
}
/* パネル部分の余白を調整 */
.tabs .tab-panel {
padding: 15px;
}
}

/* タブレット対応 (768px～1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .tabs .tab-lead dd {
    width: 100%;
    padding-left: 5em;
  }
  .tabs .tab-lead dd h4 {
    font-size: 20px;
  }
  .tabs .tab-list [role="tab"] {
    font-size: 17px;
  }
}