/* ───────────────────────────────────────────────
   Reize株式会社 コーポレートサイト
   意匠：白ペンキの板壁に飾ったものが、そのまま入口になる。
   参照＝下北沢のカフェ内装（板壁・額とジャケットと丸皿・水玉の傘）
   単一テーマ。地も文字色もすべて明示的に置く。
   ─────────────────────────────────────────────── */
:root{
  color-scheme: light;

  --wall:      #EAE6DD;  /* 白ペンキの板 */
  --wall-2:    #E3DED3;  /* 板の色ムラ */
  --shadow:    #D6D0C4;  /* 板の目・落ち影 */
  --ink:       #2A2622;  /* 文字 */
  --ink-soft:  #5E574E;
  --ink-faint: #918878;
  --wood:      #C8A87C;  /* 無垢のテーブル */
  --floor:     #4A3B32;  /* 濃い床 */
  --pink:      #E8A0B0;  /* 座布団のピンク */
  --blue:      #7A97AD;  /* 座布団の水色 */
  --navy:      #2E4A5C;  /* コンテナの壁 */
  --leaf:      #3E6B45;
  --frame:     #FBF8F1;  /* 額縁の白（壁より一段明るく） */

  --maru: "Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN","Yu Gothic","Meiryo",sans-serif;
  --goth: "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --hand: "Bradley Hand","Chalkboard","Comic Sans MS",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--wall); color:var(--ink);
  font-family:var(--goth); font-size:16px; line-height:1.9;
  /* 白ペンキの縦板。板の継ぎ目と、うっすらした色ムラ。 */
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 62px,
      rgba(214,208,196,.55) 62px 63px,
      rgba(255,255,255,.5) 63px 65px,
      transparent 65px 128px),
    repeating-linear-gradient(90deg,
      rgba(227,222,211,0) 0 240px,
      rgba(227,222,211,.6) 240px 430px,
      rgba(227,222,211,0) 430px 620px);
}
.room{max-width:1120px;margin:0 auto;padding-inline:22px}

/* 本文へスキップ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--frame); color:var(--ink); padding:10px 16px;
  font-size:13px; border:1px solid var(--ink-faint);
}
.skip:focus{left:12px; top:12px}

/* ── 天井：水玉の傘（飾り） ─────────────── */
.canopy{
  position:relative; height:92px; margin-inline:-22px; overflow:hidden;
  pointer-events:none;
}
.canopy i{
  position:absolute; left:50%; top:-258px;
  width:660px; height:330px; margin-left:-330px;
  border-radius:50%;
  background:
    radial-gradient(circle at 12% 30%, var(--shadow) 0 3px, transparent 3px),
    radial-gradient(circle at 34% 62%, var(--shadow) 0 5px, transparent 5px),
    radial-gradient(circle at 58% 24%, var(--shadow) 0 4px, transparent 4px),
    radial-gradient(circle at 76% 55%, var(--shadow) 0 6px, transparent 6px),
    radial-gradient(circle at 88% 34%, var(--shadow) 0 3px, transparent 3px),
    radial-gradient(circle at 22% 78%, var(--shadow) 0 4px, transparent 4px),
    radial-gradient(circle at 46% 84%, var(--shadow) 0 5px, transparent 5px),
    radial-gradient(circle at 66% 76%, var(--shadow) 0 3px, transparent 3px),
    #FBF9F4;
  box-shadow:0 22px 40px -26px rgba(42,38,34,.5);
}
/* 吊り下がる灯り */
.lamp{position:absolute;top:0;width:2px;height:var(--l,54px);background:var(--ink-faint);opacity:.5}
.lamp-a{left:22%;--l:62px}
.lamp-b{left:71%;--l:48px}
.lamp::after{
  content:"";position:absolute;left:50%;top:var(--l,54px);
  width:34px;height:24px;margin-left:-17px;
  background:var(--shadow);border-radius:4px 4px 17px 17px;
}

/* ── 看板 ────────────────────────────────── */
.sign{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-block:6px 26px}
.sign h1{
  font-family:var(--maru); font-weight:700; margin:0;
  font-size:clamp(34px,6vw,58px); letter-spacing:.02em; line-height:1;
}
.sign h1 span{color:var(--navy)}
.sign p{
  margin:0 0 4px auto; max-width:21em; font-size:13.5px;
  color:var(--ink-soft); line-height:1.8;
}
/* 狭い画面では看板の下に回す（横に押し込むと行が割れる） */
@media(max-width:620px){
  .sign{display:block}
  .sign p{margin:12px 0 0; max-width:none}
}

/* ── 壁：飾ってあるものが入口 ──────────────── */
.wallgrid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px 18px;
  padding-bottom:34px; align-items:start;
}
@media(max-width:1000px){.wallgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.wallgrid{grid-template-columns:repeat(3,1fr);gap:13px 14px}}
@media(max-width:460px){.wallgrid{grid-template-columns:repeat(2,1fr)}}

/* 壁に掛けたときの、ひとつずつ違う傾き */
.r1{--r:-1.1deg}.r2{--r:1.4deg}.r3{--r:-.8deg}.r4{--r:2deg}.r5{--r:-1.6deg}
.r6{--r:.9deg}.r7{--r:-2.1deg}.r8{--r:1.2deg}.r9{--r:-1.3deg}.r10{--r:2.4deg}

/* 共通：壁に掛かっているもの */
.hang{
  appearance:none; border:0; background:transparent; padding:0;
  font-family:inherit; color:var(--ink); cursor:pointer; display:block; width:100%;
  transform:rotate(var(--r,0deg));
  transition:transform .18s ease;
}
.hang:hover,.hang:focus-visible{transform:rotate(0deg) translateY(-3px)}
.hang:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
.hang[aria-expanded=true]{transform:rotate(0deg)}
.deco{cursor:default}
.deco:hover{transform:rotate(var(--r,0deg))}

/* 額装 */
.art{
  background:var(--frame); padding:7px; text-align:left;
  border:1px solid rgba(42,38,34,.3);
  box-shadow:3px 5px 12px -6px rgba(42,38,34,.6);
}
.art .plate{
  display:block; aspect-ratio:1/1; position:relative; overflow:hidden;
  background-color:var(--shadow);   /* 絵柄(.g*)は短縮形で入るので地色だけ longhand で置く */
}
.art .cap{
  display:block; font-family:var(--maru); font-weight:700;
  font-size:12.5px; line-height:1.5; padding-top:7px; letter-spacing:.01em;
}
.art .sub{
  display:block; font-size:10.5px; color:var(--ink-faint);
  font-family:var(--goth); letter-spacing:.06em; padding-bottom:2px;
}
.hang[aria-expanded=true] .art{box-shadow:0 0 0 2.5px var(--pink),3px 5px 12px -6px rgba(42,38,34,.6)}

/* レコード（大きい入口） */
.sleeve{grid-column:span 2}
.sleeve .plate{aspect-ratio:16/10}
.sleeve .cap{font-size:15px}

/* 丸皿（小さい入口） */
.dish{
  border-radius:50%; aspect-ratio:1/1; background:#FBF9F4;
  border:1px solid rgba(42,38,34,.2);
  box-shadow:3px 5px 12px -6px rgba(42,38,34,.6);
  display:grid; place-content:center; text-align:center; padding:10px;
  position:relative;
}
.dish::after{
  content:""; position:absolute; inset:9px; border-radius:50%;
  border:1px solid rgba(42,38,34,.16);
}
.dish b{
  font-family:var(--maru); font-weight:700; font-size:12px; display:block;
  line-height:1.45;
}
.dish em{
  font-family:var(--hand); font-style:normal; font-size:11px;
  color:var(--ink-faint); display:block; margin-top:3px;
}
.hang[aria-expanded=true] .dish{box-shadow:0 0 0 2.5px var(--pink),3px 5px 12px -6px rgba(42,38,34,.6)}

/* 図版：ジャケットの絵柄を CSS で作る（画像を持たない） */
.g1{background:
  radial-gradient(circle at 50% 52%, var(--navy) 0 17%, transparent 17%),
  repeating-radial-gradient(circle at 50% 52%, rgba(255,255,255,.55) 0 1px, transparent 1px 5px),
  linear-gradient(160deg,#3B3733,#141210)}
.g2{background:
  linear-gradient(28deg, var(--pink) 0 46%, #FBF9F4 46% 54%, var(--navy) 54%)}
.g3{background:
  radial-gradient(circle at 30% 34%, var(--blue) 0 26%, transparent 26%),
  radial-gradient(circle at 68% 66%, var(--pink) 0 22%, transparent 22%),
  #F2EEE5}
.g4{background:
  repeating-linear-gradient(45deg, var(--navy) 0 9px, #F2EEE5 9px 18px)}
.g5{background:
  linear-gradient(180deg,#F2EEE5 0 58%, var(--leaf) 58%),
  #F2EEE5}
.g5::after{
  content:""; position:absolute; left:18%; top:22%; width:34%; height:34%;
  border-radius:50%; background:var(--pink);
}
.g6{background:
  radial-gradient(circle at 50% 50%, #F2EEE5 0 30%, var(--navy) 30% 33%, #F2EEE5 33%),
  #F2EEE5}
.g7{background:linear-gradient(120deg,#141210 0 50%,var(--pink) 50%)}

/* ── 開いた中身（無垢のテーブル） ───────────── */
.desk{
  background:var(--wood);
  background-image:repeating-linear-gradient(90deg,
    rgba(74,59,50,.10) 0 2px, transparent 2px 46px);
  border-top:5px solid rgba(74,59,50,.35);
  box-shadow:0 -3px 0 rgba(255,255,255,.35) inset;
}
.desk .inner{max-width:1120px;margin:0 auto;padding:26px 22px 34px}
.desk h2{
  font-family:var(--maru); font-weight:700; margin:0 0 4px;
  font-size:clamp(20px,3.2vw,27px); letter-spacing:.01em;
}
.desk .en{font-family:var(--hand);font-size:13px;color:#7A5F44;margin:0 0 12px}
.desk p{margin:0 0 12px;max-width:62ch;color:#3A2E26;font-size:15px}
.desk ul{margin:0;padding-left:1.15em;max-width:62ch;color:#3A2E26;font-size:15px}
.desk li{margin-bottom:5px}
.desk .note{font-size:13.5px;color:#5A4738}
.desk .news time{font-weight:700;font-variant-numeric:tabular-nums}

/* 会社概要・連絡先の対 */
.spec{margin:0;max-width:62ch;color:#3A2E26;font-size:15px;
  display:grid;grid-template-columns:7em 1fr;gap:2px 14px}
.spec dt{font-family:var(--maru);font-weight:700}
.spec dd{margin:0}
@media(max-width:460px){.spec{grid-template-columns:1fr;gap:0 0}
  .spec dd{margin:0 0 9px}}

.desk .close{
  appearance:none;border:1.5px solid #7A5F44;background:transparent;color:#3A2E26;
  font-family:var(--goth);font-size:12.5px;padding:5px 13px;cursor:pointer;margin-top:14px;
  border-radius:2px;
}
.desk .close:hover{background:rgba(255,255,255,.3)}
.desk .close:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* JavaScript が動くときだけ「一枚ずつ開く」挙動にする。
   動かないときは全項目がテーブルの上に並んだままになる。 */
.js .desk{display:none}
.js .desk.is-open{display:block}
.js .panel{display:none}
.js .panel.is-open{display:block}
.no-js .panel + .panel{margin-top:30px;padding-top:26px;border-top:1px solid rgba(74,59,50,.25)}

/* ── 見つからなかったとき ─────────────────── */
/* 中身が短いので、床が画面の途中で終わらないようにする。 */
.page-lost{min-height:100vh;display:flex;flex-direction:column}
.page-lost .room{flex:1;width:100%}
.lost{padding:40px 0 90px;max-width:62ch}
.lost h2{
  font-family:var(--maru);font-weight:700;margin:0 0 10px;
  font-size:clamp(19px,3vw,25px);line-height:1.6;letter-spacing:.01em;
}
.lost p{margin:0 0 12px;color:var(--ink-soft);font-size:15px}
.lost .back{
  display:inline-block;margin-top:10px;color:var(--ink);
  font-size:13.5px;border:1.5px solid var(--ink-faint);border-radius:2px;
  padding:6px 15px;text-decoration:none;background:var(--frame);
}
.lost .back:hover{background:#fff}
.lost .back:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* ── 床 ──────────────────────────────────── */
footer.floor{
  background:var(--floor);
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.045) 0 1px, transparent 1px 96px);
  color:#D8CFC4;
}
footer .inner{
  max-width:1120px;margin:0 auto;padding:26px 22px 44px;
  font-size:12.5px;line-height:2;
}
footer p{margin:0}
footer b{color:#F2EEE5;font-weight:400}
footer .copy{color:#A99B8E}
footer a{color:var(--pink)}

/* 観葉（隅の気配・飾り） */
.leafy{position:fixed;right:-30px;top:-20px;width:190px;height:170px;pointer-events:none;opacity:.9;z-index:1}
@media(max-width:700px){.leafy{display:none}}

@media(prefers-reduced-motion:reduce){.hang{transition:none}}