/* =========================================================
   Lounge Ray ホームページ 共通スタイル
   ここを変えると全ページに反映されます
   ========================================================= */

/* ---------- 色・フォントの設定 ---------- */
:root {
  --bg: #0E0F13;        /* 背景（黒） */
  --bg2: #15161C;       /* 背景（少し明るい黒） */
  --card: #1B1C23;      /* 写真枠・カード */
  --line: #2A2A30;      /* 区切り線 */
  --text: #EDE6D8;      /* 文字（白） */
  --sub: #A39E93;       /* 文字（グレー） */
  --gold: #C9A86A;      /* アクセント（ゴールド） */
  --pink: #F2C9D4;      /* ロゴ（薄いピンク） */
  --logo-font: 'Pinyon Script', cursive;  /* ロゴ用フォント */
  --font: 'Hina Mincho', serif;           /* それ以外のフォント */
}

/* ---------- 基本 ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 2;
  letter-spacing: 0.08em;
}
a { color: var(--gold); }
a:hover { color: #E2C998; }
img { max-width: 100%; display: block; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

/* ---------- ヘッダー（ロゴ＋メニュー） ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 20px; padding-bottom: 20px;
}
.logo {
  font-family: var(--logo-font); font-size: 38px; line-height: 1.2;
  color: var(--pink); text-decoration: none;
}
.logo:hover { color: var(--pink); }
.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; letter-spacing: 0.2em; }
.nav a { color: var(--sub); text-decoration: none; padding: 12px 0; }
.nav a:hover, .nav a.current { color: var(--gold); }

/* ---------- トップページのメイン画像部分 ---------- */
.hero {
  position: relative; min-height: 680px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 96px 24px;
  background: #222225 url("../images/plaster.svg") center / cover no-repeat;   /* トップの背景（黒漆喰） */
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 10, 0.3); }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 760px; }
.hero-area { margin: 0; font-family: var(--logo-font); font-size: 34px; line-height: 1.2; color: #F5F2EC; }
.hero-logo {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  font-family: var(--logo-font); font-weight: 400; line-height: 1; color: var(--pink);
}
.hero-logo .small { align-self: flex-start; font-size: 60px; }
.hero-logo .big { font-size: 176px; margin-top: -24px; padding: 0 24px; }
.rule { width: 48px; height: 1px; background: var(--gold); }
.catch { margin: 0; font-size: 30px; letter-spacing: 0.24em; color: #F5F2EC; }
.hero-sub { margin: 0; font-size: 16px; letter-spacing: 0.2em; color: #B8B2A6; }

/* ---------- ボタン ---------- */
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 32px;
  text-decoration: none; font-size: 15px; letter-spacing: 0.2em;
}
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: #E2C998; color: var(--bg); }
.btn-line { border: 1px solid var(--text); color: var(--text); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold-line { border: 1px solid var(--gold); color: var(--gold); }

/* ---------- 営業時間バー（トップ） ---------- */
.info-bar { border-bottom: 1px solid var(--line); }
.info-bar .container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px; padding-top: 40px; padding-bottom: 40px;
}
.info-item { display: flex; flex-direction: column; gap: 4px; }
.label { font-family: var(--logo-font); font-size: 26px; line-height: 1.3; letter-spacing: normal; color: var(--gold); }
.info-value { font-size: 24px; color: var(--text); text-decoration: none; }

/* ---------- セクション共通 ---------- */
.section { padding: 112px 0; }
.section-alt { background: var(--bg2); }
.stack { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.eyebrow { margin: 0; font-family: var(--logo-font); font-size: 34px; line-height: 1.2; letter-spacing: normal; color: var(--gold); }
.heading { margin: 0; font-weight: 400; font-size: 32px; line-height: 1.7; letter-spacing: 0.18em; }
.lead { margin: 0; max-width: 560px; font-size: 15px; color: #C9C3B6; }
.text { margin: 0; font-size: 15px; line-height: 2.1; color: #C9C3B6; }
.note { margin: 0; font-size: 13px; color: var(--sub); }

/* ---------- 下層ページのタイトル部分 ---------- */
.page-title {
  padding: 120px 24px 96px; text-align: center;
  background-color: var(--bg2); background-position: center; background-size: cover;
}
/* タイトル部分の背景写真（写真を変えるときは images/ のファイル名を変更） */
.bg-bar  { background-image: linear-gradient(rgba(10, 10, 12, 0.5), rgba(10, 10, 12, 0.8)), url("../images/bar.jpg"); }
.bg-sofa { background-image: linear-gradient(rgba(10, 10, 12, 0.5), rgba(10, 10, 12, 0.8)), url("../images/sofa.jpg"); }
.bg-sign { background-image: linear-gradient(rgba(10, 10, 12, 0.5), rgba(10, 10, 12, 0.8)), url("../images/sign.jpg"); }
.bg-plaster { background-image: linear-gradient(rgba(8, 8, 10, 0.3), rgba(8, 8, 10, 0.3)), url("../images/plaster.svg"); }   /* トップと同じ黒漆喰 */
.page-title h1 { margin: 0; font-weight: 400; font-size: 36px; line-height: 1.7; letter-spacing: 0.16em; }

/* ---------- 写真枠 ---------- */
.photo {
  aspect-ratio: 4 / 3; background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #6F6B63; overflow: hidden;
}
.photo-tall { aspect-ratio: 4 / 5; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.card-link:hover .photo img { transform: scale(1.04); }
.photo:has(img) { border-color: transparent; }

/* ---------- カード ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; }
.card-link { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--text); }
.card-title { font-family: var(--logo-font); font-size: 32px; line-height: 1.2; letter-spacing: normal; color: var(--gold); }
.card-text { font-size: 14px; color: var(--sub); }
.box { border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.box-text { font-size: 19px; }

/* ---------- 2列レイアウト ---------- */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 24px; }
.years { display: flex; align-items: baseline; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.years .num { font-size: 64px; line-height: 1; color: var(--gold); }
.years .unit { font-size: 13px; color: var(--sub); }

/* ---------- 料金表 ---------- */
.price-list { border-top: 1px solid #34343B; }
.price-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 28px 4px; border-bottom: 1px solid #34343B; font-size: 17px;
}
.price { font-family: 'Bodoni Moda', var(--font); font-style: italic; font-size: 32px; line-height: 1.3; letter-spacing: normal; white-space: nowrap; }   /* 金額はボドニ体（斜体） */
.price.jp { font-family: var(--font); font-style: normal; font-size: 22px; letter-spacing: 0.1em; }   /* 「有り」など日本語の金額 */
.price .suffix { display: inline-block; width: 1em; text-align: left; font-family: var(--font); font-style: normal; }  /* 「〜」の幅をそろえて数字の右端を合わせる */
.price-sub { font-size: 13px; color: var(--sub); }

/* ---------- 店舗情報・求人の表 ---------- */
.info-list { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); font-size: 15px; border-top: 1px solid #34343B; }
.info-list dt, .info-list dd { margin: 0; padding: 20px 4px; border-bottom: 1px solid #34343B; }
.info-list dt { color: var(--sub); }
.info-list a { color: var(--text); }

/* ---------- 地図 ---------- */
.map { border: 1px solid var(--line); background: var(--card); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(0.4); }

/* ---------- お知らせ ---------- */
.news-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 760px; margin: 0 auto; }
.news-card { background: var(--bg2); border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.news-card h2 { margin: 0; font-weight: 400; font-size: 19px; }
.news-card p { margin: 0; letter-spacing: 0.04em; }
.news-card .line { white-space: nowrap; }
@media (max-width: 600px) { .news-card .line { white-space: normal; } }
.news-card h2.script { font-family: var(--logo-font); font-size: 36px; line-height: 1.3; letter-spacing: normal; color: #F5F2EC; }   /* 英語だけのタイトルはロゴと同じ筆記体（白） */

/* ---------- フッター ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 24px; text-align: center; }
.site-footer .logo { font-size: 44px; }
.site-footer p { margin: 10px 0 0; font-size: 13px; color: var(--sub); }
.site-footer .copy { font-family: var(--logo-font); font-size: 22px; letter-spacing: normal; color: #8A857C; }
.shop-name { font-family: var(--logo-font); font-size: 26px; line-height: 1.3; letter-spacing: normal; color: var(--pink); }

/* ---------- スマホ表示 ---------- */
br.sp { display: none; }   /* スマホだけで改行する位置 */
@media (max-width: 600px) {
  .site-header .container { justify-content: center; gap: 4px; padding-top: 16px; padding-bottom: 8px; }
  .nav { justify-content: center; gap: 0 16px; font-size: 11px; letter-spacing: 0.12em; }
  .hero { min-height: 560px; }
  .hero-logo .small { font-size: 42px; }
  .hero-logo .big { font-size: 116px; margin-top: -14px; }
  .catch { font-size: 16px; letter-spacing: 0.06em; }
  .hero-sub { font-size: 13.5px; letter-spacing: 0.1em; white-space: nowrap; }   /* スマホで1行 */
  .heading, .page-title h1 { font-size: 24px; }
  .section { padding: 72px 0; }
  .page-title { padding: 80px 24px 64px; }
  .two-col { gap: 40px; }
  .text, .lead { font-size: 13.5px; letter-spacing: 0.02em; }   /* スマホで1行に収める */
  br.sp { display: inline; }
  .pc-only { display: none; }
  .info-list { grid-template-columns: minmax(0, 1fr); }   /* スマホは項目名を上に */
  .info-list dt { padding: 16px 4px 0; border-bottom: none; font-size: 13px; }
  .info-list dd { padding: 2px 4px 16px; }
  .site-footer p { font-size: 12px; letter-spacing: 0.04em; }
}