@charset "UTF-8";

/* =========================================================
   カネマン ひばりが丘本店 LP  /hibari/
   - スマホ専用（デザインカンプ幅 780px を基準）
   - 数値はすべて「カンプ上の px」で記述し、--u で実寸に換算する
     例）calc(40 * var(--u)) → カンプ 40px 相当
   - 画像差し替え（フェーズ2〜4）は img/ の該当ファイルのみ入替で対応
   ========================================================= */

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #221816;
  color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  font-feature-settings: "palt" 1;   /* 約物のツメ（カンプの字詰めに寄せる） */
}

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; margin: 0; }
p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 基準単位 ---------- */
.wrap {
  --u: calc(min(100vw, 640px) / 780);   /* カンプ1px = --u */
  --gold: #ffd200;
  --gold-d: #5e4700;
  --line: linear-gradient(90deg, #4a3800 0%, var(--gold) 50%, #4a3800 100%);

  width: min(100vw, 640px);
  margin-inline: auto;
  background: #221816;
}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero__mark,
.hero__title,
.hero__catch { margin: 0; }

.hero__jobs {
  width: calc(621 * var(--u));
  height: calc(49 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg,
              #2b2220 0%, #8d8885 10%, #ffffff 45%,
              #dcdadb 76%, #6d6764 94%, #332927 100%);
  color: #231815;
  font-weight: 900;
  font-size: calc(23 * var(--u));
  letter-spacing: .02em;
  white-space: nowrap;
}

.deco-x { margin: calc(40 * var(--u)) 0 0; }

/* =========================================================
   赤いCTAボタン（カンプ：幅700 / 高さ86）
   ========================================================= */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(700 * var(--u));
  height: calc(86 * var(--u));
  margin: calc(46 * var(--u)) auto 0;
  border: calc(2 * var(--u)) solid #d2ab29;
  border-radius: calc(10 * var(--u));
  background: linear-gradient(180deg,
              #fb5f5c 0%, #f43c36 42%, #ff4848 49.5%,
              #e50000 51%, #cf0000 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: 900;
  font-size: calc(30 * var(--u));
  letter-spacing: .04em;
  text-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .45);
}

/* =========================================================
   募集要項
   ========================================================= */
.recruit { padding-top: calc(70 * var(--u)); }

.recruit__poster {
  width: calc(708 * var(--u));
  margin-inline: auto;
}

/* --- 画像と同内容のテキスト版（SEO / 読み上げ / コピペ用） --- */
.jobs {
  width: calc(708 * var(--u));
  margin: calc(46 * var(--u)) auto 0;
}

/* ポスター（訴求）と役割を分けるための見出し */
.jobs__ttl {
  font-size: calc(33 * var(--u));
  font-weight: 700;
  color: #d59c3c;
  text-align: center;
}

.jobs__line {
  width: calc(656 * var(--u));
  margin: calc(10 * var(--u)) auto calc(26 * var(--u));
}

.job {
  border: 1px solid rgba(213, 156, 60, .38);   /* #d59c3c */
  border-radius: calc(12 * var(--u));
  background: rgba(0, 0, 0, .3);
  padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));
}

.job + .job { margin-top: calc(18 * var(--u)); }

.job__name {
  margin-bottom: calc(16 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid rgba(242, 234, 232, .28);   /* 薄いグレーの区切り線 */
  color: #fff;
  font-weight: 900;
  font-size: calc(26 * var(--u));
}

.job__spec {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) 1fr;
  gap: calc(10 * var(--u)) 0;
  font-size: calc(22 * var(--u));
  line-height: 1.65;
}

.job__spec dt {
  font-weight: 700;
  color: #d59c3c;
}

.job__spec dd { color: #f2eae8; }

.job__spec strong {
  font-weight: 900;
  font-size: calc(28 * var(--u));
  color: #fff;
}

.job__spec small { font-size: calc(18 * var(--u)); }

.job__plus {
  display: inline-block;
  margin: calc(6 * var(--u)) calc(8 * var(--u)) 0 0;
  padding: calc(2 * var(--u)) calc(12 * var(--u));
  border: 1px solid rgba(213, 156, 60, .5);    /* #d59c3c */
  border-radius: calc(6 * var(--u));
  font-size: calc(19 * var(--u));
  color: #d59c3c;
}

.job__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(28 * var(--u));   /* 背景を外したぶん間隔で区切る */
  margin-top: calc(16 * var(--u));
  padding-left: calc(150 * var(--u));   /* .job__spec の1列目と同幅＝本文の左端に揃える */
}

.job__tags li {
  color: #f2eae8;            /* 本文（.job__spec dd）と同色 */
  font-weight: 400;
  font-size: calc(19 * var(--u));
}

.jobs__note {
  margin-top: calc(20 * var(--u));
  font-size: calc(20 * var(--u));
  color: #cfc4c1;
}

.jobs__lead {
  margin-top: calc(10 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  color: #d59c3c;
}

.recruit .btn-cta { margin-top: calc(60 * var(--u)); }

/* =========================================================
   アクセス
   ========================================================= */
.access { padding-top: calc(111 * var(--u)); }

.access__box {
  display: flex;
  width: calc(748 * var(--u));
  margin-inline: auto;
  border: 1px solid #6a5024;
  border-radius: calc(14 * var(--u));
  background: #100b07;
  overflow: hidden;
}

.access__info {
  flex: 0 0 calc(247 * var(--u));
  padding: calc(22 * var(--u)) calc(2 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u));
}

.access__ttl {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-weight: 900;
  font-size: calc(40 * var(--u));
  line-height: 1.1;
}

.access__pin {
  flex: 0 0 auto;
  width: calc(26 * var(--u));
  height: calc(34 * var(--u));
  fill: #d59c3c;
}

.access__station {
  margin-top: calc(16 * var(--u));
  font-size: calc(23 * var(--u));
  line-height: 1.5;
}

.access__station strong {
  display: inline-block;
  margin-top: calc(4 * var(--u));
  font-weight: 900;
  font-size: calc(31 * var(--u));
}

.access__addr {
  margin-top: calc(14 * var(--u));
  font-size: calc(16.5 * var(--u));
  line-height: 1.5;
  color: #e6ded9;
}

.access__map { flex: 1 1 auto; }

/* --- SNS／店舗情報（アクセスの地図の下） --- */
.sns {
  width: calc(708 * var(--u));
  margin: calc(42 * var(--u)) auto 0;
}

.sns__lead {
  font-size: calc(33 * var(--u));   /* すぐ下の .sns__ttl（29）より一回り大きく */
  font-weight: 700;
  /* color: #d59c3c; */
  text-align: center;
}

.sns__box { margin-top: calc(14 * var(--u)); }

.sns__row {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  /* 左右に余白を入れて、アイコンとQRを中央寄りにまとめる */
  padding: calc(48 * var(--u)) calc(34 * var(--u));
  color: inherit;
}

/* DMMは中身（QR2段）が縦に長いぶん余白が大きく見えるため、上下を X の約2/3に */
.sns__row--dmm { padding-block: calc(32 * var(--u)); }

.sns__icon {
  flex: 0 0 calc(140 * var(--u));
  width: calc(140 * var(--u));
}

.sns__body {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

/* QRは半透明の余白を持つものがあるため、必ず白地を敷く（読み取り精度のため） */
.sns__qr {
  flex: 0 0 calc(136 * var(--u));
  width: calc(136 * var(--u));
  background: #fff;
}

.sns__ttl {
  font-size: calc(29 * var(--u));
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
}

.sns__ttl--lg {
  font-size: calc(44 * var(--u));
  line-height: 1.2;
}

.sns__pill {
  display: inline-block;
  margin-top: calc(8 * var(--u));
  padding: calc(2 * var(--u)) calc(18 * var(--u));
  border-radius: 999px;
  background: #fff;
  color: #221816;
  font-size: calc(23 * var(--u));
  font-weight: 700;
}

.sns__id {
  margin-top: calc(4 * var(--u));
  font-size: calc(33 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}

.sns__sub {
  margin-top: calc(4 * var(--u));
  font-size: calc(19 * var(--u));
  color: #f2eae8;
}

.sns__arrow {
  width: calc(237 * var(--u));
  margin: calc(6 * var(--u)) auto 0;
}

.sns__divider {
  width: calc(656 * var(--u));
  margin-inline: auto;
}

.sns__qrs {
  flex: 0 0 calc(136 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.sns__qrs a { display: block; color: #fff; }

.sns__qrlabel {
  display: block;
  margin-bottom: calc(3 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  text-align: center;
}

/* =========================================================
   区切り線（金）
   ========================================================= */
.about,
.business { position: relative; }

/* .about::before,   ← 「カネマンとは」直上の金ライン（コメントアウト中。戻す場合はこの行を復活） */
.business::before,
.footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
}

/* =========================================================
   カネマンとは
   ========================================================= */
.about { margin-top: calc(86 * var(--u)); }

.about__ttl {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: calc(700 * var(--u));
  margin: calc(72 * var(--u)) auto 0;
  padding-left: calc(10 * var(--u));
  font-weight: 900;
  font-size: calc(30 * var(--u));
}

.about__ttl em {
  font-style: normal;
  font-size: calc(52 * var(--u));
  color: #e01a10;
}

/* 「カネマンとは」見出し右のグラデーション線（コメントアウト中）
.about__line {
  flex: 1 1 auto;
  height: calc(4 * var(--u));
  max-width: calc(190 * var(--u));
  background: linear-gradient(90deg, rgba(213, 156, 60, 0) 0%, #d59c3c 45%, rgba(213, 156, 60, 0) 100%);
}
*/

/* テキストの右下にマスコットを重ねる（カンプ通りの見え方） */
.about__body {
  position: relative;
  width: calc(716 * var(--u));
  min-height: calc(258 * var(--u));
  margin: calc(20 * var(--u)) auto 0;
}

.about__text {
  position: relative;
  z-index: 1;
  width: calc(495 * var(--u));
  font-size: calc(16.5 * var(--u));
  line-height: 1.9;
}

.about__text p + p { margin-top: calc(16 * var(--u)); }

.about__mascot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(268 * var(--u));
}

/* 「カネマンの雰囲気を見る」ボタン（カンプ：幅406 / 高さ60） */
.btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  width: calc(406 * var(--u));
  height: calc(60 * var(--u));
  margin: calc(40 * var(--u)) auto 0;
  border: calc(2 * var(--u)) solid #d2ab46;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb5f5c 0%, #ef1a18 45%, #e50000 55%, #d00000 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5);
  color: #fff;
  font-weight: 900;
  font-size: calc(26 * var(--u));
}

.btn-ghost__arw { color: #ffd200; font-size: calc(22 * var(--u)); }

/* 問い合わせボタン：体裁は .btn-ghost と同じで背景だけブルー（#006ac4） */
.btn-ghost--mail {
  margin-top: calc(30 * var(--u));
  background: linear-gradient(180deg,
              #3d96e8 0%, #0a72cc 45%, #006ac4 55%, #00539b 100%);
  width: calc(540 * var(--u));      /* 16px相当の文字が収まるよう .btn-ghost(406) より拡張 */
  font-size: calc(27 * var(--u));   /* SP実寸13px前後 */
  font-weight: 700;                 /* ボールド（赤ボタンの900より一段軽い） */
}

/* =========================================================
   事業紹介
   ========================================================= */
.business { margin-top: calc(76 * var(--u)); }

.business__ttl { margin-top: calc(55 * var(--u)); }

.biz {
  width: calc(600 * var(--u));
  margin: calc(12 * var(--u)) auto 0;
}

.biz + .biz { margin-top: calc(21 * var(--u)); }

.biz__item {
  border: calc(2 * var(--u)) solid #c48600;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .5);
}

.biz__item + .biz__item { margin-top: calc(20 * var(--u)); }

.biz__item a {
  display: block;
  color: inherit;
}

.biz__cap {
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  background: linear-gradient(180deg, rgba(214, 26, 32, .92) 0%, rgba(178, 16, 22, .95) 100%);
  color: #fff;
  font-weight: 700;
  font-size: calc(22 * var(--u));
  text-align: center;
  line-height: 1.35;
}

.biz--half {
  display: flex;
  gap: calc(21 * var(--u));
}

.biz--half .biz__item {
  flex: 1 1 0;
  min-width: 0;
}

.biz--half .biz__item + .biz__item { margin-top: 0; }

/* =========================================================
   フッター
   ========================================================= */
.footer {
  margin-top: calc(106 * var(--u));
  padding-bottom: calc(44 * var(--u));
  text-align: center;
}

.footer__logo {
  width: calc(236 * var(--u));
  margin: calc(45 * var(--u)) auto 0;
}

.footer__link {
  margin-top: calc(42 * var(--u));
  font-size: calc(21 * var(--u));
}

.footer__link a { text-decoration: none; }

.footer__link--s {
  margin-top: calc(62 * var(--u));
  font-size: calc(18 * var(--u));
}

.footer__copy {
  margin-top: calc(6 * var(--u));
  font-size: calc(18 * var(--u));
  color: #e6ded9;
}

/* =========================================================
   ページトップへ戻る（右下固定）
   ========================================================= */
.pagetop {
  position: fixed;
  right: calc(24 * var(--u));
  bottom: calc(24 * var(--u));
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  background: #d59c3c;
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .5);
  color: #221816;

  /* 既定は非表示。半画面ぶんスクロールすると .is-visible が付いて現れる */
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(12 * var(--u)));
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pagetop { transition: none; transform: none; }
}

/* 上向きの矢印（山形） */
.pagetop__arw {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin-top: calc(8 * var(--u));
  border-top: calc(4 * var(--u)) solid currentColor;
  border-left: calc(4 * var(--u)) solid currentColor;
  transform: rotate(45deg);
}

.pagetop__txt {
  margin-top: calc(2 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
}

/* =========================================================
   PC表示（幅641px以上）
   - wrap は最大640pxなので、それより広いと左右に余白が出る
   - 余白をグレーにして、wrap の両サイドに影を落として紙面を立たせる
   ========================================================= */
@media screen and (min-width: 641px) {
  body { background: #4d4d4d; }

  .wrap { box-shadow: 0 0 calc(30 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .6); }

  /* ビューポート右端ではなく、本文カラムの内側に置く */
  .pagetop { right: calc(50vw - 320px + 16px); }
}

/* =========================================================
   その他
   ========================================================= */
@media (hover: hover) {
  .btn-cta:hover,
  .btn-ghost:hover { filter: brightness(1.08); }
  .footer__link a:hover { text-decoration: underline; }
  .biz__item a:hover { filter: brightness(1.12); }
  .sns__row:hover,
  .sns__qrs a:hover { filter: brightness(1.12); }
  .pagetop:hover { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}