/* =====================================================
UI TAB
===================================================== */
/*
.ui-tab{
--tab-columns:2;
--tab-gap:2rem;
}

.個別クラス {
--tab-columns:2;
--tab-gap:2rem;
}
*/

/* ----------------------------------
NAV
---------------------------------- */
.ui-tab__nav{
display:grid;
grid-template-columns:
repeat(var(--tab-columns), 1fr);
border-bottom:1px solid var(--color-line2);
}

.ui-tab__button{
appearance:none;
border:0;
background:none;
padding:1.5rem 1rem;
font-family:"mincho", serif;
font-size:1.8rem;
color:var(--color-gray3);
cursor:pointer;
border-bottom:2px solid transparent;
}

.ui-tab__button.is-active{
color:var(--color-gray1);
border-bottom-color:var(--color-gray1);
}


/* ----------------------------------
CONTENTS
---------------------------------- */
.ui-tab__contents{
position:relative;
}

.ui-tab__content{
display:none;
}

.ui-tab__content.is-active{
display:block;
}


/* =====================================================
SP ONLY TAB
PCでは通常レイアウト
===================================================== */
.ui-tab--sp .ui-tab__nav{
display:none;
}

.ui-tab--sp .ui-tab__contents{
display:grid;
grid-template-columns:
repeat(var(--tab-columns), 1fr);
gap:var(--tab-gap);
}

.ui-tab--sp .ui-tab__content{
display:block;
}


/* SP */
@container (max-width:800px){

.ui-tab--sp .ui-tab__nav{
display:grid;
}

.ui-tab--sp .ui-tab__contents{
display:block;
}

.ui-tab--sp .ui-tab__content{
display:none;
}

.ui-tab--sp .ui-tab__content.is-active{
display:block;
}

}