@charset "UTF-8";
/* =============================================================================
 * company.css ── 会社紹介ページ
 * -----------------------------------------------------------------------------
 * 「落ち着いた大人の雰囲気」（案C）は残しつつ、TOPと地続きに見えるよう
 * 部品の言葉づかいをTOPに合わせている。
 *
 *   残すもの（案Cの核）      … 夜の墨色／炭火の上昇気流／縦組みの筆文字
 *   TOPから持ってくるもの    … ブランドの黄色／角丸＋太枠＋ハードシャドウ／
 *                              筆文字の見出しと黄マーカー／黄色い流れる帯
 *
 * 罫を細い真鍮線から「黄色の枠と落ち影」に置き換えるだけで、
 * 同じ夜の色でもTOPと同じ店の顔に見える。
 * ========================================================================== */

.p-company {
  --night:    #0E0B08;   /* 地の墨。真っ黒にせず、ほんの少し温かい */
  --night-2:  #17120D;
  --night-3:  #221B14;
  --cream:    #FBF7EC;
  --cream-d:  #CFC6B4;
  --gold:     var(--yellow);           /* TOPと同じブランドの黄色を使う */
  --gold-d:   var(--yellow-d);
  --hair:     rgba(255, 201, 30, .26);

  background: var(--night);
  color: var(--cream);
  line-height: 1.95;
}

/* ヘッダは夜の色に。ただしアクセントはTOPと同じ黄色 */
.p-company .hd { background: rgba(14, 11, 8, .92); border-bottom-color: var(--gold); }
.p-company .hd__brand b { color: var(--cream); }
.p-company .hd__brand small { color: var(--gold); }
.p-company .hd__nav a { color: var(--cream-d); }
.p-company .hd__nav a:hover, .p-company .hd__nav a[aria-current] { color: var(--cream); }
.p-company .burger { background: var(--gold); }
.p-company .burger i { background: var(--night); }

/* 画面下の見えない炭火。全体をほのかに温める */
.p-company::before {
  content: "";
  position: fixed; inset: auto 0 0 0; height: 46vh; z-index: 0;
  background: radial-gradient(120% 100% at 56% 128%,
    rgba(255, 143, 54, .3) 0%, rgba(255, 143, 54, .09) 42%, transparent 72%);
  pointer-events: none;
}

/* 昇る渦。奥は本文の下、手前は本文の上（被写界深度の前ボケ） */
.veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.veil--front { z-index: 6; }
@media (max-width: 899px) { .veil--front { opacity: .55; } }

/* ================================================================== 主景 */
.chero {
  position: relative; z-index: 1; isolation: isolate;
  padding: calc(var(--hd) + clamp(46px, 9vw, 92px)) 0 clamp(40px, 7vw, 84px);
  min-height: min(86svh, 760px);
  display: flex; align-items: center;
}
.chero__in { display: grid; gap: clamp(22px, 4vw, 46px); align-items: center; }

.chero__ttl {
  font-size: clamp(31px, 8.6vw, 58px);
  line-height: 1.4; letter-spacing: .05em;
  color: var(--cream);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .65);
}
.chero__ttl .ln { display: block; }
/* TOPと同じ「黄マーカー」。夜の面でもブランドの合図はそろえる。
   ベタ塗りの箱にすると重いので、TOPと同じ細い帯にする */
.chero__ttl em {
  font-style: normal; position: relative; display: inline-block;
}
.chero__ttl em::after {
  content: ""; position: absolute; left: -.03em; right: -.03em; bottom: .06em; height: .22em;
  background: var(--gold); z-index: -1; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  animation: cUnder .7s var(--ease) .5s forwards;
}
@keyframes cUnder { to { transform: scaleX(1); } }

.chero__eyebrow {
  display: inline-block; margin-bottom: 14px;
  background: var(--gold); color: var(--night);
  padding: .4em .9em; border-radius: 4px;
  font-family: var(--f-body); font-weight: 900;
  font-size: 11px; letter-spacing: .18em;
}
.chero__lead { font-size: clamp(13.5px, 1.15vw, 15.5px); color: var(--cream-d); max-width: 34em; }
.chero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vw, 30px); }

@media (min-width: 900px) {
  /* 広い画面だけ縦組みにする。縦組みでは block がそのまま「1行＝1列」になるので、
     .ln は block のままにして、途中で勝手に折り返さないようにする */
  .chero__in { grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 5vw, 70px); }
  .chero__ttl {
    writing-mode: vertical-rl;
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1.7; letter-spacing: .14em;
    max-height: min(64vh, 560px);
    order: 2; justify-self: end;
  }
  /* 縦組みでは、マーカーを引くと1列まるごと黄色い帯になって重すぎる。
     ここは文字そのものを黄色にして、TOPと同じ「2行目を黄色で立てる」だけにする */
  .chero__ttl em { color: var(--gold); }
  .chero__ttl em::after { display: none; }
  .chero__body { order: 1; }
}

/* -------------------------------------------------- 夜の面で使うボタン
   形はTOPの .btn と同じ（角丸ピル・太い枠・ハードシャドウ）。
   地が黒いので、影だけ黄色に置き換える */
.p-company .btn { --sh: var(--gold-d); border-color: var(--night); }
.p-company .btn--ghost { --bg: var(--night-3); --fg: var(--cream); border-color: var(--gold); --sh: rgba(255, 201, 30, .45); }

/* ================================================================ 各節 */
.csec { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 100px); }
.csec__head { margin-bottom: clamp(24px, 3.6vw, 44px); }
/* TOPの .sec__no と同じ形（黄色の短い棒＋英字ラベル） */
.csec__no {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-body); font-weight: 900;
  font-size: clamp(11px, 1vw, 13px); letter-spacing: .22em; color: var(--gold);
  margin-bottom: 12px;
}
.csec__no::before { content: ""; width: 26px; height: 3px; background: var(--gold); border-radius: 2px; }
.csec__ttl { font-size: clamp(22px, 3.8vw, 36px); line-height: 1.5; letter-spacing: .05em; }
.csec__lead { margin-top: 12px; color: var(--cream-d); font-size: 13.5px; max-width: 40em; }

/* 本文を載せる面。TOPのカードと同じ「角丸＋太枠＋落ち影」 */
.panel {
  background: linear-gradient(rgba(34, 27, 20, .95), rgba(23, 18, 13, .96));
  border: 2.5px solid var(--gold);
  border-radius: 16px;
  box-shadow: 7px 8px 0 rgba(255, 201, 30, .2);
  padding: clamp(20px, 3.2vw, 38px);
  min-width: 0;
}

/* ---------------------------------------------------------- 代表のことば */
.omoi { display: grid; gap: clamp(18px, 3vw, 34px); }
.omoi__txt p { font-size: clamp(13.5px, 1.1vw, 15.5px); color: #EFE9DB; }
.omoi__sign {
  margin-top: 1.6em; padding-top: 1.1em;
  border-top: 1px solid var(--hair);
  color: var(--gold); font-size: 12.5px; letter-spacing: .06em; font-weight: 700;
}
.omoi__ph { position: relative; }
.omoi__ph img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border: 2.5px solid var(--gold); border-radius: 16px;
  box-shadow: 7px 8px 0 rgba(255, 201, 30, .2);
  filter: saturate(.9) brightness(.94);
}
.omoi__ph figcaption {
  margin-top: 12px; font-family: var(--f-brush);
  font-size: 15px; color: var(--gold); letter-spacing: .04em;
}
@media (min-width: 900px) { .omoi { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; } }

/* ------------------------------------------------------------ 事業 3本柱 */
.biz { display: grid; gap: 14px; }
.biz__i {
  background: var(--night-2);
  border: 2.5px solid var(--gold); border-radius: 16px;
  box-shadow: 6px 7px 0 rgba(255, 201, 30, .18);
  padding: clamp(20px, 2.8vw, 30px); min-width: 0;
}
.biz__no {
  display: grid; place-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  background: var(--gold); color: var(--night);
  border: 2.5px solid var(--night-2); border-radius: 50%;
  font-size: 21px; line-height: 1;
  box-shadow: 0 0 0 2.5px var(--gold);
}
.biz__i h3 { font-family: var(--f-jp); font-weight: 900; font-size: clamp(15px, 1.5vw, 18px); margin-bottom: 10px; letter-spacing: .02em; }
.biz__i p { font-size: 13px; color: var(--cream-d); }
@media (min-width: 820px) { .biz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

/* -------------------------------------------------------- 出店のあゆみ */
.road { display: grid; gap: 12px; }
.road__i {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px;
  background: var(--night-2);
  border: 2.5px solid var(--gold); border-radius: 14px;
  box-shadow: 5px 6px 0 rgba(255, 201, 30, .18);
  padding: 14px 18px;
}
.road__dot {
  display: grid; place-content: center;
  width: 40px; height: 40px;
  background: var(--gold); color: var(--night);
  border-radius: 50%; font-size: 17px;
}
.road__i b { display: block; font-family: var(--f-jp); font-weight: 900; font-size: 14.5px; line-height: 1.5; }
.road__i small { display: block; color: var(--gold); font-size: 11.5px; letter-spacing: .1em; }
.road__i--next { border-style: dashed; opacity: .8; }
.road__i--next .road__dot { background: transparent; color: var(--gold); border: 2px dashed var(--gold); }
@media (min-width: 900px) { .road { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------- 会社概要 */
.spec { font-size: 13.5px; }
.spec th, .spec td {
  text-align: left; vertical-align: top;
  padding: 13px 4px; border-bottom: 1px solid var(--hair);
  overflow-wrap: anywhere;
}
.spec th {
  width: 7.5em; color: var(--gold); font-weight: 900; letter-spacing: .06em;
  font-size: 12.5px; white-space: nowrap;
}
.spec td { color: #EFE9DB; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
  .spec th, .spec td { display: block; width: auto; }
  .spec th { border-bottom: 0; padding-bottom: 2px; }
  .spec td { padding-top: 0; }
}

/* --------------------------------------------------------------- 締め */
.csec--end { padding-bottom: clamp(56px, 9vw, 110px); }
.cend { text-align: center; }
.cend__no {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-body); font-weight: 900; font-size: 12px;
  letter-spacing: .24em; color: var(--gold); margin-bottom: 16px;
}
.cend__no::before, .cend__no::after { content: ""; width: 24px; height: 3px; background: var(--gold); border-radius: 2px; }
.cend__ttl { font-size: clamp(22px, 4.2vw, 38px); line-height: 1.6; letter-spacing: .04em; }
.cend__ttl em { font-style: normal; color: var(--gold); }
.cend__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 3.4vw, 36px); }