/* ======================================
FOUNDER
Cartier Story Layout 完全版
====================================== */

.founder{

position:relative;

background:
linear-gradient(
180deg,
#faf9f7 0%,
#fff 18%,
#faf9f7 100%
);

overflow:hidden;

}


/* ======================================
背景センターライン
====================================== */

.founder:before{

content:"";

position:absolute;

left:50%;
top:0;
bottom:0;

width:1px;

background:
linear-gradient(
to bottom,

transparent,

rgba(188,158,120,.10),

rgba(188,158,120,.35),

rgba(188,158,120,.10),

transparent
);

transform:
translateX(-50%);

pointer-events:none;

}


/* ======================================
タイトル
====================================== */

.founder .section-title{

margin-bottom:110px;

text-align:center;

}


.story-label{

font-size:10px;

letter-spacing:.45em;

text-transform:uppercase;

color:var(--accent);

margin-bottom:18px;

font-family:
BrilliantCutProMedium;

opacity:.8;

}


/* ======================================
About群統一
====================================== */

.founder .catch-copy.txt-c,
.founder-intro .catch-copy{

max-width:760px;

margin:0 auto 30px;

font-size:
clamp(
20px,
2.4vw,
34px
);

line-height:1.9;

letter-spacing:.06em;

font-family:
'Cormorant Garamond',
serif;

font-weight:400;

text-align:center;

color:#2f2f2f;

}


/* ======================================
導入
====================================== */

.founder-intro{

margin:0 auto 90px;

position:relative;

padding-bottom:70px;

}


.founder-intro:after{

content:"";

position:absolute;

left:50%;
bottom:0;

width:55px;
height:1px;

transform:
translateX(-50%);

background:
linear-gradient(
90deg,

transparent,

rgba(188,158,120,.7),

transparent
);

}


/* ======================================
Timeline
====================================== */

.timeline-story{

display:grid;

grid-template-columns:
46% 46%;

justify-content:
space-between;

align-items:center;

margin-bottom:170px;

position:relative;

}


/* 点 */

.timeline-story:before{

content:"";

position:absolute;

left:50%;
top:50%;

width:10px;
height:10px;

border-radius:50%;

background:#fff;

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

transform:
translate(
-50%,
-50%
);

z-index:5;

}


/* ======================================
反転
====================================== */

.timeline-story.reverse
.story-image{

order:2;

}

.timeline-story.reverse
.story-content{

order:1;

text-align:right;

}


/* ======================================
画像
====================================== */

.story-image{

position:relative;

overflow:hidden;

}


.story-image:before{

content:"";

position:absolute;

top:14px;
left:14px;

width:100%;
height:100%;

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

z-index:1;

transition:.7s;

}


.story-image img{

width:100%;

display:block;

aspect-ratio:16/10;

object-fit:cover;

transition:
transform 2s cubic-bezier(.19,1,.22,1);

filter:
brightness(.98);

}


.timeline-story:hover
.story-image img{

transform:scale(1.04);

}


.timeline-story:hover
.story-image:before{

transform:
translate(
-6px,
-6px
);

}


/* ======================================
本文
====================================== */

.story-content{

max-width:540px;

}


.story-mini{

font-size:10px;

letter-spacing:.35em;

margin-bottom:18px;

color:var(--accent);

font-family:
BrilliantCutProMedium;

opacity:.75;

}


.story-content .copy{

font-family:
'Cormorant Garamond',
serif;

font-size:
clamp(
24px,
2vw,
38px
);

line-height:1.8;

font-weight:400;

margin-bottom:28px;

color:#111;

}


.story-content p{

font-size:14px;

line-height:2.4;

color:#555;

margin-bottom:18px;

}


/* ======================================
Quote
====================================== */

.quote-block{

max-width:760px;

margin:
0 auto 110px;

text-align:center;

position:relative;

padding:30px 0;

}


/* 上だけ線 */

.quote-block:before{

content:"";

position:absolute;

top:0;
left:50%;

width:45px;
height:1px;

transform:
translateX(-50%);

background:
rgba(
188,
158,
120,
.5
);

}


.quote-block h3{

font-family:
'Cormorant Garamond',
serif;

font-size:
clamp(
20px,
2vw,
32px
);

line-height:1.9;

font-weight:400;

color:#2f2f2f;

margin-top:28px;

}


/* ======================================
想い
====================================== */

.quote-message{

max-width:760px;

margin:auto;

padding:0;

position:relative;

}


/* ←枠消す */

.quote-message:after{

display:none;

}


.quote-message .story-mini{

text-align:center;

margin-bottom:20px;

}


.quote-message h3{

max-width:620px;

margin:auto;

text-align:left;

font-size:
clamp(
17px,
1.6vw,
24px
);

line-height:2.3;

letter-spacing:.03em;

font-weight:400;

color:#555;

}


.quote-message h3 br{

display:block;

margin-top:1em;

content:"";

}


/* ======================================
List
====================================== */

.list{

margin:60px auto;

max-width:480px;

padding:0;

list-style:none;

}


.list li{

padding:18px 0;

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

font-size:17px;

}


.list li:last-child{

border:none;

}


/* ======================================
Evidence
====================================== */

.story-evidence{

padding:140px 0;

background:
linear-gradient(
180deg,
#faf9f7,
#fff 40%,
#faf9f7
);

}


.evidence-wrap{

max-width:880px;

margin:auto;

position:relative;

}


.evidence-wrap:before{

content:"";

position:absolute;

left:0;
top:0;
bottom:0;

width:1px;

background:
linear-gradient(
to bottom,

transparent,

rgba(188,158,120,.3),

transparent
);

}


.evidence-item{

padding:26px 0 26px 35px;

position:relative;

}


.evidence-item:before{

content:"";

position:absolute;

left:-3px;
top:35px;

width:6px;
height:6px;

border-radius:50%;

background:#fff;

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

}


.evidence-th{

font-size:11px;

letter-spacing:.2em;

color:var(--accent);

margin-bottom:8px;

}


.evidence-td{

font-size:15px;

line-height:2;

color:#333;

}


/* ======================================
CTA
====================================== */

.story-cta{

padding:150px 0 170px;

text-align:center;

background:
linear-gradient(
180deg,
transparent,
#faf8f4
);

}


.story-cta .catch-copy{

font-size:
clamp(
24px,
3vw,
40px
);

margin-bottom:22px;

}


.story-cta .sub-lead{

font-size:13px;

margin-bottom:45px;

color:#666;

}


.cta-buttons{

display:flex;

justify-content:center;

gap:24px;

flex-wrap:wrap;

margin-bottom:40px;

}


.cta-text{

font-size:13px;

}


/* ======================================
SP 完全版
====================================== */

@media(max-width:768px){

/* 中央線 → 左へ */

.founder:before{

left:22px;

}


/* ==========================
ストーリー
========================== */

.timeline-story{

grid-template-columns:1fr;

gap:30px;

padding-left:45px;

margin-bottom:100px;

position:relative;

}


.timeline-story:before{

left:22px;

top:28px;

width:8px;
height:8px;

}


/* 順番固定 */

.story-image{

order:1!important;

}

.story-content{

order:2!important;

text-align:left!important;

max-width:none;

}


.story-image:before{

display:none;

}


/* ==========================
文字
========================== */

.story-content .copy{

font-size:22px;

line-height:1.7;

margin-bottom:25px;

}


.story-content p{

font-size:13px;

line-height:2.2;

margin-bottom:16px;

}


.story-mini{

font-size:10px;

letter-spacing:.28em;

margin-bottom:10px;

}


/* ==========================
頭皮の声
タイムライン軸へ統一
========================== */

.list{

margin:50px 0 80px;

padding-left:45px;

max-width:none;

position:relative;

}


.list:before{

content:"";

position:absolute;

left:18px;

top:10px;

width:8px;
height:8px;

border-radius:50%;

background:#fff;

border:

1px solid rgba(
188,
158,
120,
.7
);

z-index:3;

}


.list li{

font-size:15px;

padding:14px 0;

line-height:1.8;

}


/* ==========================
信念
========================== */

.quote-block{

padding:25px 0 25px 45px;

margin-bottom:80px;

max-width:none;

text-align:left;

position:relative;

}


/* 上線位置補正 */

.quote-block:before{

left:22px;

transform:none;

width:45px;

}


/* 本文 */

.quote-block h3{

text-align:left;

font-size:22px;

line-height:1.8;

margin-top:25px;

}


/* ==========================
想い
========================== */

.quote-message{

padding:25px 0 25px 45px;

text-align:left;

}


.quote-message:after{

left:45px;

}


.quote-message .story-mini{

text-align:left;

}


.quote-message h3{

margin-top:25px;

font-size:16px;

line-height:2;

text-align:left;

max-width:none;

}


/* br余白少し弱め */

.quote-message h3 br{

margin-top:.6em;

}


/* ==========================
Evidence
========================== */

.evidence-item{

padding:
22px
0
22px
30px;

}


.evidence-th{

font-size:10px;

margin-bottom:8px;

}


.evidence-td{

font-size:14px;

line-height:1.9;

}

}

/* ======================================
微調整（あと一歩消す）
====================================== */


/* -------------------------
① 信念の線が文章に被る
quote-blockだけ線を隠す
------------------------- */

/* =========================

quoteの線をぼかして消す

========================= */

.quote-block{

position:relative;

z-index:3;

}

/* 真ん中だけぼかし */

.quote-block:after{

content:"";

position:absolute;

left:50%;

top:50%;

width:260px;

height:90%;

transform:

translate(

-50%,

-50%

);

background:#faf9f7;

filter:blur(20px);

z-index:-1;

pointer-events:none;

}


/* quote-messageは余白追加 */

.quote-message{

margin-top:70px;

}


/* -------------------------
② 想いの詰まり解消
------------------------- */

.quote-block + .quote-message{

margin-top:120px;

}


/* -------------------------
③ SP listの○消す
違和感の原因
------------------------- */

@media(max-width:768px){

.list:before{

display:none;

}


/* quote-messageは今の感じ維持 */

.quote-message{

padding:25px 0 25px 45px;

}



}