/* =========================================================
Cartier Tab Section
========================================================= */

.tabs{

margin-top:80px;
padding:50px;

background:
linear-gradient(
180deg,
#faf8f5 0%,
#f5f1eb 100%
);

border-radius:24px;

position:relative;

overflow:hidden;

border:
1px solid rgba(188,158,120,.12);

box-shadow:
0 20px 60px rgba(0,0,0,.04);

}

/* 上ライン */

.tabs::before{

content:"";

position:absolute;

top:0;
left:50%;

transform:translateX(-50%);

width:140px;
height:1px;

background:
linear-gradient(
90deg,
transparent,
var(--accent),
transparent
);

}

/* tab切替用radio非表示 */

.tabs input[type="radio"]{

position:absolute;

opacity:0;

pointer-events:none;

}


/*==================================================
TAB
==================================================*/

.tab-nav,
.tab-nav-3{

display:grid;

gap:14px;

margin:0 auto 50px;

max-width:760px;

padding:10px;

background:
rgba(255,255,255,.65);

backdrop-filter:blur(15px);

border-radius:999px;

border:
1px solid rgba(188,158,120,.08);

box-shadow:
0 10px 30px rgba(0,0,0,.04);

}

.tab-nav{
grid-template-columns:repeat(4,1fr);
}

.tab-nav-3{
grid-template-columns:repeat(3,1fr);
}


.tab-nav label,
.tab-nav-3 label{

padding:16px 10px;

font-size:13px;

letter-spacing:.18em;

border-radius:999px;

text-align:center;

cursor:pointer;

transition:.4s;

color:#444;

position:relative;

}

@media(min-width:769px){

.tab-nav label:hover,
.tab-nav-3 label:hover{

color:var(--accent);

transform:translateY(-2px);

}

}


/* active */

#tab1:checked ~ .tab-nav-current label[for="tab1"],
#tab2:checked ~ .tab-nav-current label[for="tab2"],
#tab3:checked ~ .tab-nav-current label[for="tab3"],

#tab1:checked ~ .tab-nav-3-current label[for="tab1"],
#tab2:checked ~ .tab-nav-3-current label[for="tab2"],
#tab3:checked ~ .tab-nav-3-current label[for="tab3"]{

background:#fff;

color:var(--accent);

box-shadow:
0 8px 20px rgba(0,0,0,.06);

}


/*==================================================
PANEL
==================================================*/

.tab-panel{

display:none;

animation:
fadeLuxury .8s ease;

}

#tab1:checked ~ .tab-content .tab-panel:nth-child(1),
#tab2:checked ~ .tab-content .tab-panel:nth-child(2),
#tab3:checked ~ .tab-content .tab-panel:nth-child(3){

display:block;

}


@keyframes fadeLuxury{

from{

opacity:0;
transform:translateY(25px);

}

to{

opacity:1;
transform:none;

}

}


.tab-panel-copy{

margin-bottom:40px;

text-align:center;

}

.tab-panel-copy h3{

font-size:26px;

font-family:
'Cormorant Garamond',
serif;

letter-spacing:.15em;

font-weight:400;

}


/*==================================================
Story Card
==================================================*/

.story-card{

padding:0 20px;

margin-bottom:80px;

}


.story-card-head{

margin-bottom:20px;

}


.story-case{

font-size:11px;

letter-spacing:.2em;

color:var(--accent);

display:block;

margin-bottom:8px;

}


.tab-border-title{

font-size:12px;

letter-spacing:.15em;

color:#666;

}

.story-card:last-child{

margin-bottom:0;

}

.story-card .month:only-child{

min-height:auto;

padding:40px;

text-align:center;

font-size:15px;

line-height:2;

}

/*==================================================
Grid
==================================================*/

.story-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:18px;

}


/*==================================================
Photo Area
==================================================*/

.story-photo{

grid-column:1/-1;

aspect-ratio:16/9;

border-radius:18px;

overflow:hidden;

background:

linear-gradient(
180deg,
#faf8f5,
#f2eee8
);

display:flex;

align-items:center;

justify-content:center;

}


/*==================================================
Before / After
==================================================*/

.ba-photo{

display:grid;

grid-template-columns:

1fr auto 1fr;

gap:24px;

align-items:center;

padding:30px;

width:100%;

}


/*画像*/

.ba-item{

position:relative;

overflow:hidden;

border-radius:18px;

}

.ba-item img{

display:block;

width:100%;

aspect-ratio:1/1;

object-fit:cover;

transition:1s;

}


/* hoverはここだけ */

.story-card:hover .ba-item img{

transform:scale(1.03);

}


/* label */

.ba-label{

position:absolute;

left:16px;

bottom:16px;

padding:10px 16px;

font-size:10px;

letter-spacing:.2em;

background:

rgba(255,255,255,.9);

backdrop-filter:blur(10px);

border-radius:999px;

}

.ba-label.before{

color:#7d6855;

}

.ba-label.after{

color:var(--accent);

}


/*中央線*/

.ba-line{

width:60px;

height:1px;

background:var(--accent);

position:relative;

}

.ba-line::after{

content:"";

position:absolute;

top:6px;

width:35px;
height:1px;

opacity:.4;

background:var(--accent);

}


/*==================================================
mini
==================================================*/

.mini-step{

position:relative;

padding:24px;

background:#fff;

border-radius:18px;

border:
1px solid rgba(188,158,120,.08);

min-height:220px;

transition:.4s;

}

.mini-step:hover{

transform:
translateY(-4px);

box-shadow:
0 10px 25px rgba(0,0,0,.06);

}

.mini-step span{

display:block;

font-size:11px;

letter-spacing:.2em;

padding-bottom:12px;

margin-bottom:14px;

position:relative;

}

.mini-step span::before{

content:"";

position:absolute;

bottom:0;

left:0;

width:70px;

height:1px;

background:currentColor;

}

.mini-step span::after{

content:"";

position:absolute;

bottom:5px;

left:0;

width:40px;

height:1px;

opacity:.4;

background:currentColor;

}


/*矢印*/

.mini-step:not(:last-child)::after{

content:"";

position:absolute;

right:-14px;

top:50%;

width:28px;
height:1px;

background:var(--accent);

}


.mini-step:not(:last-child)::before{

content:"";

position:absolute;

right:-14px;

top:calc(50% + 5px);

width:18px;
height:1px;

opacity:.4;

background:var(--accent);

}


.month{

background:
linear-gradient(
180deg,
#fff,
#faf7f2
);

}

/* 骨格画像だけ少し横長 */

.story-photo:first-child img{

width:100%;
height:100%;

object-fit:cover;

}


/* 技術タブは上下余白少し */

.story-card{

margin-bottom:50px;

}
/* Founderだけ写真を人物寄りに */

.story-photo img{

width:100%;
height:100%;

object-fit:cover;

object-position:center top;

}


/* Founder CTA */

.story-card .section-sub{

margin-top:40px;

text-align:center;

}
/*==================================================
SP
==================================================*/

@media(max-width:768px){

.tabs{

padding:25px 14px;

}


.story-card{

padding:0;

}


.story-grid{

grid-template-columns:
1fr;

gap:12px;

}


.story-photo{

grid-column:1/-1;

aspect-ratio:auto;

}


/* ←ここが重要 */

.ba-photo{

grid-template-columns:

1fr auto 1fr;

gap:10px;

padding:10px;

}


.ba-item img{

aspect-ratio:1/1;

}


.ba-line{

width:15px;

}

.ba-line::after{
	width:20px;
    top: 4.5px;
}
		
.ba-label{

left:8px;

bottom:8px;

padding:6px 10px;

font-size:9px;

letter-spacing:.12em;

border-radius:999px;
background:rgba(255,255,255,.82);
backdrop-filter:blur(6px);

}
/*並び替え*/

.before{
order:1;
}

.experience{
order:2;
}

.after{
order:3;
}

.month{
order:4;
}


/*矢印消す*/

.mini-step::before,
.mini-step::after{

display:none;

}

.mini-step{

padding:18px;

min-height:auto;

}

}

/*=====================
JENS intro
=====================*/

.jens-intro{

padding:40px;

margin-bottom:30px;

text-align:center;

background:
linear-gradient(
180deg,
rgba(255,255,255,.7),
rgba(255,255,255,.3)
);

border-radius:20px;

border:
1px solid rgba(188,158,120,.08);

}


.jens-copy{

font-size:22px;

line-height:2;

font-family:
'Cormorant Garamond',
serif;

letter-spacing:.08em;

margin-bottom:14px;

}


.jens-copy strong{

color:var(--accent);

font-weight:500;

}


.jens-sub{

font-size:13px;

line-height:2;

color:#666;

letter-spacing:.12em;

}


.mini-step h5{

font-size:20px;

margin-bottom:10px;

font-family:
'Cormorant Garamond',
serif;

font-weight:500;

color:#222;

}


@media(max-width:768px){

.jens-intro{

padding:22px 18px;

margin-bottom:20px;

}

.jens-copy{

font-size:17px;

line-height:1.8;

}

.mini-step h5{

font-size:16px;

}

}