@charset "utf-8";

/* ── RETAIL EXPO TOKYO 2026 ／ 東急ブース 特設サイト ── */

:root{
  /* --- 配色 --- */
  --ink:        #1a1a1a;   /* 本文 */
  --ink-2:      #555;      /* 副次テキスト */
  --ink-3:      #767676;
  --line:       #d8d8d8;   /* 罫線 */
  --line-2:     #ececec;   /* 細い区切り */
  --paper:      #fff;      /* 地 */
  --fill:       #f4f4f4;   /* 面（左右の余白） */
  --mark:       #E4002B;

  /* --- 路線の色 --- */
  --rt-magenta:#E66DAF;   /* 太い主線・点線・シェブロン・見出し帯 */
  --rt-yellow: #F0AB17;   /* 太い主線 */
  --rt-blue:   #5194DF;   /* 細い支線・点線の丸 */
  --rt-purple: #9B59B3;   /* 細い支線・点グリッド・塗りの丸 */
  --rt-grey:   #B4B3B6;   /* 細い支線・白いカードの枠線 */

  --card-line: #B4B3B6;   /* カードの枠線 */
  --label-ink: #1E1E1E;

  --cat-color: var(--rt-grey);

  /* --- 書体 --- */
  --sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;

  /* --- 寸法 --- */
  --pad: 16px;
  --col: 440px;
}

/* ---------- カテゴリ色の受け渡し ---------- */
[data-cat="01"]{--cat-color:var(--rt-magenta)}
[data-cat="02"]{--cat-color:var(--rt-blue)}
[data-cat="03"]{--cat-color:var(--rt-purple)}
[data-cat="04"]{--cat-color:var(--rt-yellow)}

/* ---------- 事例ページの小見出しの帯の色 ---------- */
[data-case="01"]{--case-band:#F06CA8}
[data-case="02"]{--case-band:#775E9E}
[data-case="03"]{--case-band:#F1A534}
[data-case="04"]{--case-band:#3177B8}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fill); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* ---------- 構造 ---------- */
.wrap{max-width:var(--col); margin:0 auto; background:var(--paper); overflow:hidden; position:relative; z-index:1}
.gnav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--pad); border-bottom:2px solid var(--card-line); background:var(--paper);
}
.gnav .logo{font-size:12px; letter-spacing:.08em}
.gnav .burger{
  appearance:none; -webkit-appearance:none; background:none; border:0; padding:0; color:inherit; cursor:pointer;
  width:44px; height:44px; margin:-12px -12px -12px 0;
  display:flex; align-items:center; justify-content:center;
}
.gnav .burger .bars{width:20px; height:13px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); position:relative}
.gnav .burger .bars::after{content:""; position:absolute; left:0; right:0; top:5px; border-top:2px solid var(--ink)}
.gnav .burger:focus-visible{outline:2px solid var(--ink); outline-offset:-6px}
.gmenu{
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper); border-bottom:2px solid var(--card-line);
}
.gmenu[hidden]{display:none}
.gmenu ul{list-style:none; margin:0; padding:0}
.gmenu li{border-top:1px solid var(--line-2)}
.gmenu a{display:block; padding:13px var(--pad); font-size:14px; font-weight:700; line-height:1.5; text-decoration:none}
main{padding:0 20px 56px}
.gnav,main{position:relative; z-index:1}
.gnav{z-index:3}
.crumb{font-size:11.5px; color:var(--ink-3); padding:12px 0 10px; border-bottom:none; font-weight:700}
.crumb > span{background:var(--paper); padding:1px 4px; margin:0 -4px}
.crumb a{text-decoration:underline; text-underline-offset:2px}
.back{font-size:12.5px; color:var(--ink-2); padding:12px 0 10px; font-weight:700}

/* ---------- 背景の路線図 ---------- */
.bgwide{
  position:absolute; left:0; right:0; top:0; bottom:0;
  overflow:hidden; z-index:0; pointer-events:none;
  opacity:.4;
}
.bgwide svg{position:absolute; top:0; left:50%; margin-left:-960px; width:1920px; height:3000px; display:block}
.bgmap{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.bgmap .rt-cat{stroke:var(--cat-color)}

/* ---------- 白い角丸カード ---------- */
.pcard{
  position:relative; background:var(--paper);
  border:2px solid var(--card-line); border-radius:5px;
  padding:16px; margin:30px 0 0;
}
.pcard > :first-child:not(.arrow-label){margin-top:0}
.case-page main > .pcard{margin-top:14px}
[data-cat] main > .pcard{margin-top:27px; padding-bottom:10px}

/* ---------- 矢羽根型の見出しラベル ---------- */
.arrow-label{
  position:relative; z-index:2; display:block; width:max-content; max-width:100%;
  margin:-31px auto 10px; padding:0; background:none;
}
.arrow-label b{
  display:block; padding:7px 26px;
  background:var(--label-ink); color:var(--paper);
  font-size:14px; font-weight:700; line-height:1.5; text-align:center; letter-spacing:.01em;
  clip-path:polygon(0 50%, 14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%);
}

/* ---------- ピル型のカテゴリラベルとマップピン ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  border:2px solid var(--card-line); border-radius:999px;
  background:var(--paper); padding:3px 13px 3px 9px;
  font-size:12.5px; font-weight:700; line-height:1.6; color:var(--ink);
}
.pill .pin{width:13px; height:17px; flex:none; display:block}

/* ---------- 見出し ---------- */
.cat-lead{font-size:13px; color:var(--ink-2); line-height:1.8; margin:8px 0 0}

/* ---------- 事例一覧 ---------- */
.cards{margin:0; border-top:none}
.card{
  position:relative; background:var(--paper);
  border:2px solid var(--card-line); border-radius:5px;
  padding:14px; margin:30px 0 0; border-bottom:2px solid var(--card-line);
}
.card .kv{
  display:block; background:var(--paper);
  border:1px solid var(--rt-grey); border-radius:0; overflow:hidden;
}
.card .body{padding:10px 0 0}
.card .c-no{margin:0 0 4px; font-weight:900; letter-spacing:.12em}
.card .c-title{font-size:14.5px; font-weight:700; line-height:1.5; margin:0}
.card .c-catch{font-size:13px; font-weight:400; color:var(--ink-2); line-height:1.55; margin:6px 0 0}
.card .c-lead{font-size:12.5px; color:var(--ink-2); line-height:1.8; margin:5px 0 0}
.card .tags{margin:9px 0 0}

/* ---------- 事例詳細 ---------- */
.case-label{font-size:11px; font-weight:900; letter-spacing:.12em; color:var(--ink-3); margin:0}
.case-title{font-family:var(--sans); font-weight:900; font-size:17px; line-height:1.5; margin:4px 0 0; color:var(--ink)}
.case-hero{
  margin:14px 0 0; background:var(--paper);
  border:1px solid var(--rt-grey); border-radius:0; overflow:hidden;
}
.case-catch{font-size:16px; font-weight:900; line-height:1.6; margin:20px 0 0}
.case-lead{font-size:13px; color:var(--ink-2); line-height:1.85; margin:8px 0 0}
.case-body{font-size:13.5px; line-height:1.95; margin:20px 0 0}
.case-body + .case-body{margin-top:14px}

/* ---------- CTA ---------- */
.cta{
  display:flex; align-items:center; gap:6px;
  margin:26px 0 0; padding:15px 10px; text-align:center;
  border:2px solid var(--label-ink); border-radius:999px;
  background:var(--label-ink); color:var(--paper);
  font-size:13.5px; font-weight:900; text-decoration:none;
}
.cta .label{flex:1 1 auto; text-align:center; text-wrap:balance; word-break:keep-all; overflow-wrap:anywhere}
.cta .pin{width:13px; height:17px; flex:none; display:block; color:var(--paper)}
.cta .pin .hole{fill:var(--label-ink)}
.cta::after{content:"▶"; font-size:10px; flex:none}
.copyright{font-size:11px; color:var(--ink-2); line-height:1.7; margin:14px 0 0}

/* ---------- タグ（case[].tags） ---------- */
.tags{display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0}
.tag--cat{border:2px solid var(--label-ink); border-radius:999px; background:var(--paper); color:var(--ink);
  font-weight:700; padding:2px 10px; font-size:10.5px; line-height:1.6}

.c-no{font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); margin:0 0 3px}
.card .c-title a{text-decoration:none}


/* ── トップページ（/） ── */
.top-kv{
  position:relative; margin:0; background:var(--paper);
  border:1px solid var(--rt-grey); border-radius:0; overflow:hidden;
}
.top-kv-credit{
  position:absolute; right:0; bottom:0; margin:0; padding:2px 6px;
  font-size:10px; font-weight:500; line-height:1.5; color:#fff; background:rgba(0,0,0,.6);
}
.top-lang{margin:12px 0 0; font-size:13px; line-height:1.65; color:var(--ink-2)}
.top-lang span{font-weight:700; color:var(--ink)}
.top-eyebrow{
  margin:32px 0 0; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--mark);
}
.top-title{
  margin:6px 0 0; font-family:var(--sans); font-weight:900; font-size:20px; line-height:1.45; color:var(--ink);
}
.top-lang,.top-eyebrow,.top-title{text-align:center}
.top-lang{word-break:keep-all; overflow-wrap:anywhere}

.cats{display:grid; grid-template-columns:1fr 1fr; gap:0 34px; margin:30px 0 0}
.cats > .cat:nth-child(n+3){margin-top:30px}
.cat{
  display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; align-content:start;
  position:relative; background:var(--paper);
  border:2px solid var(--card-line); border-radius:5px;
  padding:10px; text-decoration:none; color:inherit;
}
.cat .cat-thumb{align-self:start; background:var(--paper); border:1px solid var(--rt-grey); border-radius:0}
.cat .cat-thumb img{width:100%; height:auto; display:block}
.cat .cat-no{margin:9px 0 0; font-size:10.5px; font-weight:900; letter-spacing:.12em; color:var(--ink-3)}
.cat .cat-name{margin:5px 0 0; font-family:var(--sans); font-weight:700; font-size:0; line-height:0}
.cat .cat-desc{margin:7px 0 0; font-size:11px; color:var(--ink-3); line-height:1.6}
.cats .cat:nth-child(1) .pill{border-color:var(--rt-magenta)}
.cats .cat:nth-child(2) .pill{border-color:var(--rt-blue)}
.cats .cat:nth-child(3) .pill{border-color:var(--rt-purple)}
.cats .cat:nth-child(4) .pill{border-color:var(--rt-yellow)}


/* ── 写真の2列グリッド（事例詳細・02 の日本市場進出） ── */
.photos{margin:24px 0 0}
.photo-group{margin:0}
.photo-group + .photo-group{margin-top:20px}
.photo-cap{margin:0 0 8px; font-size:12px; font-weight:700; color:var(--ink); line-height:1.6;
  text-wrap:pretty; word-break:keep-all; overflow-wrap:anywhere}
.photo-cap .nobr{white-space:nowrap}
.photos--single .photo-cap{margin:0 0 8px; padding:6px 10px; background:var(--case-band, var(--label-ink)); color:#fff;
  font-size:14px; font-weight:700; line-height:1.5; text-align:center}
.photos--single .photo-group > .photo--wide:first-child{margin-top:0}
.photo-cols{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start}
.photo-col{display:flex; flex-direction:column; gap:8px; min-width:0}
.photo{margin:0; min-width:0}
.photo-logos{display:flex; align-items:center; gap:8px; margin-top:8px}
.photo-logo{flex:1 1 0; min-width:0; background:var(--paper); padding:10px 8px}
.photo-logo img{width:100%; height:auto}
.photo-img{background:var(--paper); border:1px solid var(--rt-grey); border-radius:0}


/* ── 単ページ型のカテゴリ（/asset/・/redevelopment/） ── */
.sec-title{font-family:var(--sans); font-weight:900; font-size:17px; line-height:1.5; margin:0; color:var(--ink)}
.sec-catch{font-size:15px; font-weight:900; line-height:1.6; margin:12px 0 0}
.sec-body{font-size:13.5px; line-height:1.95; margin:12px 0 0}
.proj{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line)}
.proj li{display:flex; flex-direction:column; gap:1px; padding:9px 0; border-bottom:1px solid var(--line-2)}
.proj-name{font-size:13.5px; font-weight:700; line-height:1.6}
.proj-when{font-size:12px; color:var(--ink-2); line-height:1.6}


/* ── 見出し・キャッチの折り返し ── */
.top-title,.case-title,.case-catch,.c-title,.c-catch,.sec-title,.sec-catch{text-wrap:pretty; word-break:keep-all; overflow-wrap:anywhere}
.title-keep{white-space:nowrap}


/* ── トップ・カテゴリページの見出しと各項目 ── */
.top-title .t-en{display:block; font-size:22px; line-height:1.3; letter-spacing:.01em}
.top-title .t-ja{display:block; margin-top:6px; font-size:16px; line-height:1.6}
.top-fig{margin:20px 0 0}
.top-fig img{width:100%; height:auto}
.cat .cat-cr{margin:5px 0 0; font-size:9px; line-height:1.5; color:var(--ink-3); overflow-wrap:anywhere}
.cat .cat-media{align-self:start; min-width:0}
.site-foot{position:relative; margin:30px 0 0; padding:14px 12px; background:var(--paper); text-align:center}
.site-foot .corp-logo{display:inline-block; vertical-align:top}
.site-foot .corp-logo img{display:block; width:92px; height:auto}
.site-foot .site-copy{margin:6px 0 0; font-size:11px; color:var(--ink-2); line-height:1.6}
.site-foot{container-type:inline-size}
.site-foot .site-privacy{margin:8px 0 0; font-size:11px; color:var(--ink-2); line-height:1.6}
.site-foot .site-privacy a{display:inline-block; padding:4px 0; white-space:nowrap}
.site-foot .site-privacy .sep{margin:0 6px}
@container (max-width: 370px){
  .site-foot .site-privacy .sep{display:none}
  .site-foot .site-privacy a{display:table; margin:0 auto}
}
.site-foot .site-ga{margin:4px 0 0; font-size:11px; color:var(--ink-2); line-height:1.7; word-break:keep-all; overflow-wrap:anywhere}
.site-foot .site-ga .nobr{white-space:nowrap}
.site-foot .site-privacy a,.site-foot .site-ga a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.site-foot .site-ga + .site-copy{margin-top:8px}
.cat-lead-en{margin:4px 0 0; font-family:var(--sans); font-weight:900; font-size:16px; line-height:1.4; color:var(--ink)}
.cat-lead-ja{margin:6px 0 0; font-size:14px; font-weight:900; line-height:1.6; color:var(--ink)}
.cat-lead-en + .cat-lead{margin-top:6px}
.cat-lead-ja + .cat-lead{margin-top:6px}
.card .c-cr{margin:6px 0 0; font-size:10px; color:var(--ink-3); line-height:1.6}
.card .cta{margin-top:14px}
[data-cat="01"] .cat-lead-en,[data-cat="01"] .cat-lead,.card .c-title{text-align:center}
[data-cat="03"] .cat-lead-en,[data-cat="03"] .cat-lead-ja{text-align:center}
.photo--wide{margin-top:8px}
.photo-cap + .photo--wide{margin-top:0}
.sec-kv{margin:12px 0 0; background:var(--paper); border:1px solid var(--rt-grey)}
.sec .tags{margin-top:10px}
.sec-logo{margin:14px 0 0; padding:14px 0; border:1px solid var(--line); text-align:center}
.sec-logo img{display:block; width:100px; height:auto; margin:0 auto}
.proj li.has-ph{flex-direction:row; align-items:flex-start; gap:12px; padding:12px 0}
.proj-ph{flex:0 0 140px; margin:0}
.proj-ph img{width:140px; height:auto; border:1px solid var(--rt-grey)}
.proj-cr{margin:3px 0 0; font-size:9px; line-height:1.45; color:var(--ink-3); overflow-wrap:anywhere}
.proj-tx{display:flex; flex-direction:column; gap:1px; min-width:0}
.redev-map{margin:14px 0 0}
.redev-map a{display:block; border:1px solid var(--rt-grey)}
.redev-map img{width:100%; height:auto}
.redev-map-note{margin:4px 0 0; font-size:12px; color:var(--ink-2); line-height:1.6}
.redev-textlogo{margin:0}
.redev-textlogo img{width:220px; max-width:100%; height:auto; margin:0 auto}
.redev-views{margin:16px 0 0; display:flex; flex-direction:column; gap:12px}
.redev-view{margin:0}
.redev-view img{width:100%; height:auto}
.redev-cr{margin:3px 0 0; font-size:10px; line-height:1.5; color:var(--ink-3); text-align:right}


/* ── 04 各窓口案内（/contact/）の問い合わせフォーム ── */
.cf{margin:14px 0 0}
.cf-cats{margin:0; padding:0; border:0; min-width:0}
.cf-legend{padding:0}
.cf-hint{margin:2px 0 0; font-size:13.5px; line-height:1.8; color:var(--ink-2)}
.cf-chips{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 0}
.cf-chip{position:relative; display:flex; min-width:0}
.cf-chip input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none}
.cf-chip input{scroll-margin-top:76px}
.cf-input{scroll-margin-top:44px}
.cf-chip label{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-width:0; min-height:48px; padding:6px 10px;
  border:2px solid var(--card-line); border-radius:5px; background:var(--paper); color:var(--ink);
  font-size:15px; font-weight:500; line-height:1.4; text-align:center; word-break:keep-all; overflow-wrap:anywhere; cursor:pointer;
}
.cf-chip input:checked + label{background:var(--label-ink); border-color:var(--label-ink); color:var(--paper)}
.cf-chip input:focus-visible + label{outline:2px solid var(--ink); outline-offset:2px}
.cf-field{margin:20px 0 0}
.cf-label{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; line-height:1.6}
.cf-req,.cf-opt{font-size:11px; font-weight:700; line-height:1.5; padding:0 6px; border-radius:3px}
.cf-req{background:var(--label-ink); color:var(--paper)}
.cf-opt{border:1px solid var(--card-line); color:var(--ink-2)}
.cf-input{
  display:block; width:100%; min-height:48px; margin:6px 0 0; padding:10px 12px;
  border:2px solid var(--card-line); border-radius:5px; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  appearance:none; -webkit-appearance:none;
}
.cf-input:focus{outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink)}
.cf-textarea{min-height:180px; resize:vertical}
.cf-count{margin:4px 0 0; font-size:12px; color:var(--ink-3); text-align:right}
.cf-steps{margin:20px 0 0; padding:0 0 0 1.3em; font-size:14px; line-height:1.8; color:var(--ink)}
.cf-note{margin:4px 0 0; font-size:13px; line-height:1.8; color:var(--ink-2)}
.cf-note a{text-decoration:underline; text-underline-offset:2px; color:var(--ink)}
.cf-note .cf-policy{white-space:nowrap}
.cf-submit{width:100%; min-height:48px; padding-left:26px; font-family:var(--sans); font-size:16px; cursor:pointer; appearance:none; -webkit-appearance:none}
.cf-submit:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.cf-alt{margin:24px 0 0; padding:16px 0 0; border-top:1px solid var(--line)}
.cf-to{margin:0; font-size:14px; font-weight:700; line-height:1.6; overflow-wrap:anywhere}
.cf-copy{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 0}
.cf-btn{
  min-height:44px; padding:6px 8px; border:1px solid var(--label-ink); border-radius:5px;
  background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.3;
  cursor:pointer; appearance:none; -webkit-appearance:none;
}
.cf-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.cf-status{min-height:1.6em; margin:6px 0 0; font-size:13px; font-weight:700; line-height:1.6; color:var(--ink)}
.cf-help{margin:6px 0 0; font-size:13px; line-height:1.8; color:var(--ink-2)}

/* ---------- 404 ページ ---------- */
.notfound-page .wrap{min-height:100vh; min-height:100svh}