/*
Theme Name: NEWS TRADING v2
Description: 株式会社ニューズ・トレーディング コーポレートサイト用オリジナルテーマ（デザイン案v2ベース）
Version: 1.6.9
Author: NEWS TRADING
*/

:root{
  --paper:#FFFFFF;
  --ink:#2B2D31;
  --muted:#5F626B;
  --line:#E8E8EA;
  --card:#F5F5F6;
  --accent:#C4602F;
  --accent-text:#A8521F; /* 小さい文字用：白背景で約4.5:1のコントラスト */
  --hero-ink:#FFFFFF;
}
*{box-sizing:border-box}
/* 固定ヘッダーに隠れないよう、移動先の上に余白を確保する。
   scroll-behavior:smooth は環境によってスクロール自体を止めてしまうため使用しない。 */
[id]{scroll-margin-top:90px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Segoe UI",Meiryo,sans-serif;
  font-size:15px;line-height:1.9;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;display:block}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  color:var(--hero-ink);
  transition:background .3s,color .3s;
}
.site-header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
body.admin-bar .site-header{top:32px}
.logo{font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.14em}
.logo span{display:block;font-size:.5rem;letter-spacing:.22em;margin-top:3px;opacity:.65;text-transform:uppercase}
.site-nav{display:flex;gap:2rem}
.site-nav a{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;opacity:.85;transition:opacity .2s,color .2s}
.site-nav a:hover{opacity:1;color:var(--accent)}

.nav-toggle{display:none;background:none;border:0;padding:0;width:44px;height:44px;cursor:pointer;color:inherit;position:relative;z-index:60}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto;transition:transform .3s,opacity .3s}
.nav-toggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.x span:nth-child(2){opacity:0}
.nav-toggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed;inset:0;z-index:55;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;
    background:var(--ink);color:#fff;
    transform:translateX(100%);transition:transform .35s ease;
  }
  .site-nav.open{transform:none}
  .site-nav a{font-size:1.05rem;opacity:1}
  .nav-toggle.x{color:#fff}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:#1a1c22;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  animation:heroZoom 16s ease-out both;
}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
/* シネマティックな暗幕（左と下を濃くして文字を読みやすく＋周辺減光） */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(105deg, rgba(16,18,24,.78), rgba(16,18,24,.40) 52%, rgba(16,18,24,.12)),
    linear-gradient(to top, rgba(16,18,24,.72), rgba(16,18,24,.10) 46%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(10,11,15,.55);
}
.hero-inner{
  position:relative;z-index:2;color:var(--hero-ink);
  padding:0 clamp(1.2rem,4vw,3rem) clamp(4rem,10vh,6.5rem);
  max-width:1200px;width:100%;margin:0 auto;
}
/* 読み込み時のシーケンス表示 */
.hero-inner > *{opacity:0;animation:heroUp 1s cubic-bezier(.16,.7,.2,1) forwards}
.hero-inner .hero-kicker{animation-delay:.35s}
.hero-inner h1{animation-delay:.55s}
.hero-inner p{animation-delay:.9s}
.hero-inner .btn{animation-delay:1.15s}
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
/* スクロール誘導 */
.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;color:#fff;
  font-family:"Archivo","Segoe UI",Arial,sans-serif;font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;opacity:0;animation:heroUp 1s ease 1.4s forwards;
}
.hero-scroll i{display:block;width:1px;height:52px;background:linear-gradient(to bottom,#fff,rgba(255,255,255,0));position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;background:var(--accent);animation:heroScroll 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes heroScroll{0%{top:-52px}60%,100%{top:52px}}
@media (max-width:640px){ .hero-scroll{display:none} }
@media (prefers-reduced-motion: reduce){
  .hero-video{animation:none}
  .hero-inner > *,.hero-scroll{opacity:1;animation:none}
  .hero-scroll i::after{animation:none;display:none}
}
.hero h1{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  font-size:clamp(2.6rem,8vw,6rem);
  line-height:1.02;letter-spacing:-.015em;
  text-transform:uppercase;margin:0 0 1.4rem;
  text-wrap:balance;
}
.hero h1 span{color:var(--accent)}
.hero p{max-width:36em;margin:0 0 2rem;font-size:clamp(.9rem,1.4vw,1.02rem);opacity:.92}
.btn{
  display:inline-flex;align-items:center;gap:.8em;
  padding:.9rem 2.4rem;
  background:var(--hero-ink);color:#26282E;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  transition:background .25s,color .25s;
}
.btn::after{content:"→"}
.btn:hover{background:var(--accent);color:#fff}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;padding:.9rem 0;
}
.marquee div{display:inline-block;animation:mq 28s linear infinite}
.marquee span{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin-right:4rem;
}
.marquee b{color:var(--accent);font-weight:800}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee div{animation:none} }

/* ---------- sections ---------- */
.sec{max-width:1200px;margin:0 auto;padding:clamp(4.5rem,10vh,7.5rem) clamp(1.2rem,4vw,3rem) 0}
.sec-head{margin-bottom:3rem}
.sec-head h2{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;margin:0 0 .4rem;
}
.sec-head p{margin:0;color:var(--muted);font-size:.92rem;font-weight:700}

/* strengths */
.str{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.6rem}
.str article{border-top:3px solid var(--ink);padding-top:1.4rem}
.str .no{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:2.6rem;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.9rem;
}
.str h3{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:0;
  text-transform:uppercase;margin:0 0 .6rem;
}
.str .jp{font-weight:700;font-size:.95rem;margin:0 0 .8rem}
.str p{margin:0;color:var(--muted);font-size:.94rem}

/* hero kicker */
.hero-kicker{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  margin:0 0 1.2rem;opacity:.9;
}

/* イントロ（Who We Are） */
.intro{
  display:grid;grid-template-columns:1.15fr .85fr;gap:3.4rem;
  align-items:start;margin-bottom:4rem;
}
.intro-main{
  font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.6;
  font-weight:700;letter-spacing:.01em;margin:0;text-wrap:balance;
}
.intro-side{margin:0;color:var(--muted);font-size:.94rem}
@media (max-width:820px){ .intro{grid-template-columns:1fr;gap:1.6rem} }

/* セクション導入文 */
.lead-text{
  max-width:46em;color:var(--muted);font-size:.94rem;
  margin:-1.4rem 0 2.6rem;
}

/* 小見出し */
.sub-head{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-size:.78rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  margin:3.6rem 0 1.4rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
}

/* 5ステップの工程 */
.process{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.process-card{
  position:relative;overflow:hidden;
  background:var(--paper);padding:1.7rem 1.3rem 1.6rem;
}
.process-card::before{
  content:attr(data-no);
  position:absolute;right:.5rem;top:-.4rem;
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-size:3.2rem;font-weight:800;color:var(--card);
  font-variant-numeric:tabular-nums;line-height:1;
}
.process-card::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:3px;background:var(--accent);transition:width .35s;
}
.process-card:hover::after{width:100%}
.process-card h3{
  position:relative;
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  margin:2.2rem 0 .3rem;
}
.process-card b{display:block;font-size:.86rem;margin-bottom:.6rem}
.process-card p{margin:0;font-size:.84rem;line-height:1.8;color:var(--muted)}
@media (max-width:900px){ .process{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .process{grid-template-columns:1fr} }

/* business */
.biz{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.biz article{background:var(--card);padding:2rem 1.8rem}
.biz h3{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:1.15rem;text-transform:uppercase;margin:0 0 .2rem;
}
.biz .target{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent-text);margin:0 0 .9rem}
.biz p{margin:0;color:var(--muted);font-size:.94rem}

/* brands */
.brand-row{
  display:grid;grid-template-columns:minmax(220px,380px) 1fr auto;gap:1rem 3rem;align-items:center;
  padding:1.8rem 0;border-bottom:1px solid var(--line);
}
.brand-row:first-of-type{border-top:1px solid var(--line)}
.brand-row h3{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:clamp(1.3rem,2.8vw,2rem);margin:0;letter-spacing:0;
  transition:color .2s;
}
a.brand-row:hover h3{color:var(--accent)}
.brand-row .tag{font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.brand-row p{margin:0;color:var(--muted);font-size:.94rem}
.brand-row .arrow{font-size:1.3rem;color:var(--muted)}
a.brand-row:hover .arrow{color:var(--accent)}
@media (max-width:640px){ .brand-row{grid-template-columns:1fr;gap:.4rem} .brand-row .arrow{display:none} }

/* network */
.net{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.net article{background:var(--paper);padding:1.7rem 1.5rem}
.net h3{font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;font-weight:800;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .5rem}
.net h3 i{font-style:normal;color:var(--accent);margin-right:.45rem}
.net p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.7}
.net .role{color:var(--ink);margin-bottom:.9rem}
.net .addr{font-size:.8rem}
.suppliers{margin-top:1.4rem;font-size:.85rem;color:var(--muted)}

/* store & social */
.store{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.store a{
  display:block;background:var(--card);padding:2.2rem 1.8rem;
  border-bottom:3px solid transparent;
  transition:border-color .25s,transform .25s;
}
.store a:hover{border-bottom-color:var(--accent);transform:translateY(-4px)}
.store .kind{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text);display:block;margin-bottom:.6rem}
.store h3{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:1.25rem;margin:0 0 .5rem;letter-spacing:0;
}
.store p{margin:0;color:var(--muted);font-size:.94rem}
.store .go{display:inline-block;margin-top:1.1rem;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.store .go::after{content:" ↗"}

/* contact */
.contact-wrap{margin-top:clamp(4.5rem,10vh,7.5rem);background:var(--ink);color:var(--paper)}
.contact{max-width:1200px;margin:0 auto;padding:clamp(4rem,9vh,6.5rem) clamp(1.2rem,4vw,3rem)}
.contact h2{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.05;margin:0 0 1.2rem;text-wrap:balance;
}
.contact p{color:#B9BABF;max-width:38em;margin:0 0 2.2rem}
.contact .btn{background:var(--paper);color:var(--ink)}
.contact .btn:hover{background:var(--accent);color:#fff}
.contact .tel-note{font-size:.85rem;margin-top:1.6rem;margin-bottom:0}

/* footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:2rem clamp(1.2rem,4vw,3rem);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.site-footer .logo{color:var(--ink)}
.site-footer small{font-size:.7rem;letter-spacing:.12em;color:var(--muted)}
.site-footer small a{display:inline-block;padding:.35rem 0}
.site-footer small a:hover{color:var(--accent-text)}

/* ---------- 下層ページ ---------- */
.page-hero{
  background:var(--ink);color:#fff;
  padding:clamp(8rem,18vh,11rem) clamp(1.2rem,4vw,3rem) clamp(3rem,6vh,4.5rem);
}
.page-hero .label{
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent-text);font-weight:700;margin:0 0 1rem;
}
.page-hero h1{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.05;margin:0;
}
.page-hero .sub{margin:.8rem auto 0;color:#B9BABF;font-weight:700;font-size:.92rem}
.page-hero .label,.page-hero h1,.page-hero .sub{max-width:900px;margin-left:auto;margin-right:auto}

.page-body{max-width:900px}

.cotable{width:100%;border-collapse:collapse;font-size:.92rem}
.cotable th,.cotable td{
  border-bottom:1px solid var(--line);
  padding:1.1rem .5rem;vertical-align:top;text-align:left;
}
.cotable tr:first-child th,.cotable tr:first-child td{border-top:2px solid var(--ink)}
.cotable th{
  width:11em;white-space:nowrap;
  font-size:.78rem;letter-spacing:.14em;font-weight:700;color:var(--muted);
}
@media (max-width:640px){
  .cotable th{display:block;width:auto;border-bottom:none;padding-bottom:.1rem}
  .cotable td{display:block;padding-top:.2rem}
}

.wp-content h2{font-weight:800;font-size:1.4rem;margin:2.5rem 0 1rem}
.wp-content img{height:auto}
.wp-content a{color:var(--accent);text-decoration:underline}

/* ========== Home & Relax Wear ページ ========== */
.hw-concept{max-width:1000px}
.hw-lead{
  font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;line-height:1.6;
  letter-spacing:.01em;margin:0 0 1.2rem;text-wrap:balance;
}
.hw-desc{color:var(--muted);font-size:.98rem;max-width:42em;margin:0 0 2.8rem}
.hw-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2.8rem;
}
.hw-cards article{background:var(--card);padding:1.7rem 1.5rem;border-top:2px solid var(--accent)}
.hw-cards h3{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .7rem;
}
.hw-cards p{margin:0;color:var(--muted);font-size:.88rem}
.hw-keywords{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:clamp(1rem,2.2vw,1.4rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin:0;
}
.hw-cards--2{grid-template-columns:repeat(2,1fr);max-width:760px}
@media (max-width:720px){ .hw-cards,.hw-cards--2{grid-template-columns:1fr} }

/* 季節ブロック */
.hw-season{border-top:1px solid var(--line);margin-top:1.5rem}
.hw-tagline{
  font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:700;
  margin:-1.6rem 0 .8rem;letter-spacing:.01em;
}

/* 商品グリッド（マガジン風：キャプションを写真に重ね、右側に縦長の主役写真） */
.hw-mag{
  display:grid;gap:12px;margin-bottom:2.8rem;
  grid-auto-rows:230px;
}
.hw-mag--ss{grid-template-columns:repeat(5,1fr)}
.hw-mag--aw{grid-template-columns:repeat(6,1fr)}
/* 縦長の主役写真（2行ぶち抜き） */
.hw-mag--ss .hw-item:nth-child(7){grid-column:4;grid-row:1/3}
.hw-mag--ss .hw-item:nth-child(8){grid-column:5;grid-row:1/3}
.hw-mag--aw .hw-item:nth-child(4){grid-column:4;grid-row:1/3}
.hw-mag--aw .hw-item:nth-child(8){grid-column:5;grid-row:1/3}
.hw-mag--aw .hw-item:nth-child(9){grid-column:6;grid-row:1/3}

.hw-item{position:relative;margin:0;overflow:hidden;background:var(--card)}
.hw-item img{width:100%;height:100%;object-fit:cover;display:block}
/* 重ねるキャプション帯 */
.hw-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.4rem 1rem .8rem;color:#fff;
  background:linear-gradient(to top, rgba(20,32,64,.92), rgba(20,32,64,.72) 45%, rgba(20,32,64,0));
}
.hw-item figcaption b{
  display:block;
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:700;font-size:.8rem;letter-spacing:.08em;margin-bottom:.15rem;
}
.hw-item figcaption span{display:block;font-size:.68rem;line-height:1.55;color:#d3d8e2}

/* タブレット：4列に簡素化し、縦長指定を解除 */
@media (max-width:900px){
  .hw-mag--ss,.hw-mag--aw{grid-template-columns:repeat(2,1fr);grid-auto-rows:260px}
  .hw-mag .hw-item{grid-column:auto !important;grid-row:auto !important}
}
@media (max-width:520px){
  .hw-mag--ss,.hw-mag--aw{grid-template-columns:1fr;grid-auto-rows:340px}
}

/* ===== Young Career 1P：コラージュ型ヒーロー ===== */
.yc-hero{display:grid;grid-template-columns:0.82fr 1.18fr;min-height:88vh}
.yc-hero-photo{position:relative;overflow:hidden;background:var(--card)}
.yc-hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yc-hero-photo>img[src*="dc-hero"]{object-position:center top}
.yc-hero-pos{
  position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding:2rem clamp(1.4rem,3vw,2.6rem);
  background:linear-gradient(to top,#1c2b4a 30%,rgba(28,43,74,.7) 70%,rgba(28,43,74,0));
}
.yc-hero-pos .label{color:#aeb8cf;margin:0 0 .8rem}
.yc-hero-pos .big{font-weight:800;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.5;margin:0 0 .7rem}
.yc-hero-pos p{margin:0;font-size:.86rem;color:#d6dbe6}
.yc-hero-pos .keys{
  font-family:"Archivo","Segoe UI",Arial,sans-serif;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;font-size:.82rem;margin-top:1.1rem;color:#fff;
}
.yc-hero-body{padding:clamp(5rem,9vh,6.5rem) clamp(1.6rem,4vw,3.2rem) clamp(2rem,4vh,3rem);display:flex;flex-direction:column;justify-content:center}
.yc-hero-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1.8rem}
.yc-hero-thumbs img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--card)}
.yc-hero-body .label{color:var(--accent-text);margin:0 0 .5rem}
.yc-hero-body h1{
  font-family:"Archivo","Segoe UI",Arial,sans-serif;font-weight:800;
  font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;margin:0 0 .4rem;color:#1c2b4a;
}
.yc-hero-body .sub{color:var(--muted);font-weight:700;margin:0 0 1.4rem}
.yc-hero-lead{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:700;margin:0 0 .8rem}
.yc-hero-desc{color:var(--muted);font-size:.92rem;margin:0 0 1.6rem;max-width:40em}
.yc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.yc-cards article{background:var(--card);padding:1.2rem 1.1rem}
.yc-cards h4{font-family:"Archivo","Segoe UI",Arial,sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin:0 0 .5rem}
.yc-cards p{margin:0;font-size:.82rem;color:var(--muted)}
@media (max-width:820px){
  .yc-hero{grid-template-columns:1fr}
  .yc-hero-photo{min-height:70vh}
  .yc-cards{grid-template-columns:1fr}
}

/* 2P: SET UPを2列幅の主役に */
.dc-grid--yc .hw-item:nth-child(9){grid-column:span 2}
@media (max-width:900px){ .dc-grid--yc .hw-item:nth-child(9){grid-column:span 1} }

/* 3P: マガジン型レイアウト（完成イメージに忠実） */
.yc3-mag{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:78px;gap:10px;margin-bottom:2.4rem;
  grid-template-areas:
    "func func func tops tops tops onep onep india india print print"
    "func func func tops tops tops onep onep india india print print"
    "func func func tops tops tops onep onep bag   bag   print print"
    "rash rash rash det  det  det  onep onep bag   bag   patch patch"
    "rash rash rash det  det  det  onep onep nepal nepal patch patch"
    "rash rash rash det  det  det  onep onep nepal nepal patch patch";
}
.yc3-mag .a-func{grid-area:func}
.yc3-mag .a-tops{grid-area:tops}
.yc3-mag .a-rash{grid-area:rash}
.yc3-mag .a-det{grid-area:det}
.yc3-mag .a-onep{grid-area:onep}
.yc3-mag .a-print{grid-area:print}
.yc3-mag .a-india{grid-area:india}
.yc3-mag .a-bag{grid-area:bag}
.yc3-mag .a-nepal{grid-area:nepal}
.yc3-mag .a-patch{grid-area:patch}
/* 文字入りグラフィック／合成写真は全体表示（切れ防止） */
.yc3-mag .a-fit{background:#f4f2ee}
.yc3-mag .a-fit img{object-fit:contain}
.yc3-mag .a-fit figcaption{background:linear-gradient(to top,rgba(20,32,64,.96),rgba(20,32,64,.85) 60%,rgba(20,32,64,0))}
@media (max-width:900px){
  .yc3-mag{grid-template-columns:repeat(2,1fr);grid-template-areas:none;grid-auto-rows:230px}
  .yc3-mag figure{grid-area:auto !important}
}
@media (max-width:520px){ .yc3-mag{grid-template-columns:1fr;grid-auto-rows:260px} }

/* 3P: 機能セクションの見出し帯（機能タグはHTML化） */
.yc-func-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem;margin:0 0 1.4rem}
.yc-func-head h3{font-family:"Archivo","Segoe UI",Arial,sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:.06em;margin:0}
.yc-func-head span{color:var(--muted);font-size:.9rem}

/* Young Career 機能タグ */
.yc-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;padding:0;margin:0 0 2rem;
}
.yc-tags li{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:700;font-size:.78rem;letter-spacing:.06em;
  padding:.5rem 1.1rem;border:1px solid var(--accent);color:var(--accent-text);border-radius:999px;
}

/* Lutim by u コレクション（上4列・下5列、キャプション重ね） */
.lu-grid{display:grid;gap:12px;grid-auto-rows:270px;margin-bottom:12px}
.lu-grid--4{grid-template-columns:repeat(4,1fr)}
.lu-grid--5{grid-template-columns:repeat(5,1fr);margin-bottom:2.4rem}
@media (max-width:900px){
  .lu-grid--4,.lu-grid--5{grid-template-columns:repeat(3,1fr);grid-auto-rows:250px}
}
@media (max-width:520px){
  .lu-grid--4,.lu-grid--5{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px}
}

/* Daily Casual 商品マップ（均一グリッド・キャプション重ね） */
.dc-grid{display:grid;gap:12px;grid-auto-rows:280px;margin-bottom:2.4rem}
.dc-grid .hw-item img{object-position:center 22%}
.dc-grid--ss{grid-template-columns:repeat(6,1fr)}
.dc-grid--aw{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){
  .dc-grid--ss,.dc-grid--aw{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}
}
@media (max-width:520px){
  .dc-grid--ss,.dc-grid--aw{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px}
}
.dc-note{display:block;margin-top:.4rem;font-size:.72rem;opacity:.7}
.dc-spec{grid-template-columns:repeat(4,1fr) !important}
@media (max-width:720px){ .dc-spec{grid-template-columns:1fr 1fr !important} }

/* 季節ブロックの仕様メモ */
.hw-spec{
  display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:2.4rem;
  padding-top:2rem;border-top:1px solid var(--line);
}
.hw-spec h4{
  font-family:"Archivo","Segoe UI Variable Display","Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 .7rem;
}
.hw-spec p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.9}
@media (max-width:720px){ .hw-spec{grid-template-columns:1fr;gap:1.6rem} }

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}