/*
  taka_portfolio_latest.html のデザイン案をそのまま移植したCSS。
  SERUM本体のスタイルと衝突しないよう、全セレクタを .tp-portfolio 配下に限定している。
  値(サイズ・余白・色・ブレークポイント)は変更していない。
*/

/* SERUM既存のトップページHERO(スライダー)はオリジナルHEROに置き換えるため非表示にする */
#header_slider_wrap{display:none}

.tp-portfolio{--tp-bg:#f7f6f2;--tp-white:#fff;--tp-ink:#242424;--tp-muted:#77736c;--tp-line:#ddd9d1;--tp-dark:#252421;--tp-accent:#eadca6;margin:0;background:var(--tp-bg);color:var(--tp-ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.8}
.tp-portfolio,.tp-portfolio *{box-sizing:border-box}
.tp-portfolio a{color:inherit;text-decoration:none}
.tp-portfolio .hero{min-height:88vh;background-color:var(--tp-dark);background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:80px 80px;color:#fff;padding:8vw;display:flex;align-items:flex-end;position:relative;overflow:hidden}
.tp-portfolio .hero:after{content:"";position:absolute;width:58vw;height:58vw;border:1px solid rgba(255,255,255,.22);border-radius:50%;right:-8vw;top:4vh}
.tp-portfolio .hero-inner{position:relative;z-index:2;max-width:900px}
.tp-portfolio .eyebrow,.tp-portfolio .secno{font-size:10px;letter-spacing:.2em;color:var(--tp-muted)}
.tp-portfolio .hero .eyebrow{color:#aaa79f;margin-bottom:20px}
.tp-portfolio h1{font-size:clamp(56px,8vw,112px);line-height:.92;letter-spacing:-.05em;font-weight:500;margin:0 0 28px}
.tp-portfolio .hero-lead{font-size:clamp(17px,2vw,25px);line-height:1.65;color:#e6e3dc}
.tp-portfolio .hero-tags{display:flex;flex-wrap:wrap;gap:20px;margin-top:38px;font-size:9px;letter-spacing:.13em;color:#aaa79f}
.tp-portfolio .section{padding:110px 7.5vw;border-top:1px solid var(--tp-line)}
.tp-portfolio .head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:55px}
.tp-portfolio h2{font-size:clamp(40px,5vw,70px);line-height:1;letter-spacing:-.045em;font-weight:500;margin:10px 0 0}
.tp-portfolio #philosophy .head,.tp-portfolio #how-i-built-it .head{grid-template-columns:1fr}
.tp-portfolio h2.statement{font-size:clamp(26px,3.4vw,42px);line-height:1.6;letter-spacing:0;margin:14px 0 0;max-width:1000px}
.tp-portfolio .prose{max-width:880px}
.tp-portfolio .prose p{font-size:15px;line-height:2.1;color:var(--tp-muted);margin:0 0 28px}
.tp-portfolio .prose p:last-child{margin-bottom:0}
.tp-portfolio .story-list{border-top:1px solid var(--tp-line)}
.tp-portfolio .story{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding:64px 0;border-bottom:1px solid var(--tp-line)}
.tp-portfolio .story:last-child{border-bottom:0}
.tp-portfolio .story-title{font-size:21px;line-height:1.6;font-weight:500;margin:0}
.tp-portfolio .story-num{color:var(--tp-muted)}
.tp-portfolio .story-body p{font-size:15px;line-height:2.1;color:var(--tp-muted);margin:0 0 24px}
.tp-portfolio .story-body p:last-child{margin-bottom:0}
.tp-portfolio .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);background:var(--tp-line);gap:1px}
.tp-portfolio .feature{background:var(--tp-white);padding:36px 38px;min-height:285px;display:flex;flex-direction:column;justify-content:space-between}
.tp-portfolio .feature-num{font-size:10px;color:var(--tp-muted)}
.tp-portfolio .feature h3{font-size:21px;line-height:1.5;font-weight:500;margin:25px 0 10px}
.tp-portfolio .feature p{font-size:12px;color:var(--tp-muted);margin:0}
.tp-portfolio .arrow{font-size:18px;margin-top:22px}
.tp-portfolio .thinking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tp-portfolio .card{background:var(--tp-white);border:1px solid var(--tp-line);overflow:hidden}
.tp-portfolio .card-image{height:250px;display:grid;place-items:center;background:#d9d5cc}
.tp-portfolio .card:nth-child(1) .card-image{background:#292824}
.tp-portfolio .card:nth-child(2) .card-image{background:#eee4b7}
.tp-portfolio .phone{width:34%;height:72%;background:#fff;border:1px solid #aaa;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:10px}
.tp-portfolio .phone:before{content:"";display:block;width:45%;height:7px;background:#ddd;border-radius:10px;margin-bottom:12px}
.tp-portfolio .ui-block{height:55px;background:#eeece7;border-radius:7px;margin-bottom:7px}
.tp-portfolio .ui-block.small{height:27px}
.tp-portfolio .card-body{padding:24px 27px 28px}
.tp-portfolio .tag{display:inline-block;border:1px solid var(--tp-line);padding:3px 7px;font-size:8px;letter-spacing:.12em;margin-right:5px}
.tp-portfolio .card h3{font-size:21px;line-height:1.3;font-weight:500;margin:14px 0 7px}
.tp-portfolio .card p{font-size:12px;color:var(--tp-muted);margin:0}
.tp-portfolio .output-grid{display:grid;grid-template-columns:1.45fr .8fr .8fr;grid-template-rows:1fr 1fr;gap:14px}
.tp-portfolio .output{min-height:285px;position:relative;overflow:hidden;padding:23px;border:1px solid var(--tp-line);background:#ddd8cd}
.tp-portfolio .output.big{grid-row:span 2;min-height:584px;background:#252421;color:#fff}
.tp-portfolio .output.yellow{background:var(--tp-accent)}
.tp-portfolio .output-label{font-size:8px;letter-spacing:.18em}
.tp-portfolio .output-ui{position:absolute;width:38%;height:64%;left:31%;top:21%;background:#fff;border:1px solid #aaa;border-radius:16px;padding:12px}
.tp-portfolio .poster{position:absolute;left:15%;right:15%;top:23%;bottom:12%;background:#f8f6ef;padding:28px;display:flex;align-items:flex-end;font-size:28px;line-height:1.05}
.tp-portfolio .brand-word{position:absolute;left:24px;bottom:23px;font-size:36px;line-height:1.05}
.tp-portfolio .profile{display:grid;grid-template-columns:1fr 1.2fr;gap:90px}
.tp-portfolio .profile-title{font-size:30px;line-height:1.55;font-weight:500;margin:0 0 22px}
.tp-portfolio .profile-copy{font-size:13px;color:var(--tp-muted);max-width:520px}
.tp-portfolio .facts{border-top:1px solid var(--tp-line)}
.tp-portfolio .fact{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--tp-line);padding:17px 0;font-size:12px}
.tp-portfolio .fact span:first-child{font-size:9px;letter-spacing:.12em}
@media(max-width:900px){
.tp-portfolio .hero:after{width:78vw;height:78vw;right:-28vw;top:10vh}
.tp-portfolio .story{grid-template-columns:1fr;gap:26px}
.tp-portfolio .feature-grid,.tp-portfolio .thinking-grid{grid-template-columns:1fr 1fr}
.tp-portfolio .head{grid-template-columns:1fr}
.tp-portfolio .output-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.tp-portfolio .output.big{grid-column:1/-1;grid-row:auto;min-height:430px}
.tp-portfolio .profile{grid-template-columns:1fr;gap:45px}
}
@media(max-width:600px){
.tp-portfolio .hero{min-height:78vh;padding:55px 24px 45px;background-size:60px 60px}
.tp-portfolio .hero:after{width:92vw;height:92vw;right:-42vw;top:10vh}
.tp-portfolio h1{font-size:58px}
.tp-portfolio .section{padding:65px 24px}
.tp-portfolio .story{padding:44px 0;gap:20px}
.tp-portfolio .feature-grid,.tp-portfolio .thinking-grid{display:block;background:transparent}
.tp-portfolio .feature,.tp-portfolio .card{margin-bottom:10px}
.tp-portfolio .card-image{height:220px}
.tp-portfolio .output-grid{display:block}
.tp-portfolio .output,.tp-portfolio .output.big{display:block;min-height:300px;margin-bottom:10px}
.tp-portfolio .output.big{min-height:400px}
.tp-portfolio .fact{grid-template-columns:105px 1fr}
}