@charset "UTF-8";
/* ===================================================================
  OKUSTA HOSPITALITY GROUP — 公開準備中ページ（仮サイト）
  -------------------------------------------------------------------
  ・PC      : ページ幅 1280px を基準にした 2 カラムレイアウト
  ・スマホ   : iPhone（〜767px）を基準に写真が縦に並ぶ 1 カラム
  ・調整したい値は下の「1. 調整用トークン」だけでほぼ完結します
=================================================================== */

/* -------------------------------------------------------------------
   1. 調整用トークン（ここを変えるだけでデザインを微調整できます）
------------------------------------------------------------------- */
:root {
  --canvas-width: 1280px;            /* PC のページ幅 */

  --color-bg: #02182e;               /* 背景の濃紺 */
  --color-gold: #c9a86a;             /* ロゴ・アクセントのゴールド */
  --color-white: #ffffff;            /* ホテル名 */
  --color-text: #d6dae0;             /* 住所・電話 */
  --color-notice: #b9bfc7;           /* お知らせ文 */

  --logo-width: 455px;               /* PC のロゴ表示幅 */
  --logo-ratio: 455 / 240;           /* 画像未配置時に確保するロゴの比率 */

  --photo-ratio: 4 / 3;              /* 写真の縦横比（写真の実比率に合わせると切れません） */
  --hotel-column: 400px;             /* PC の写真 1 列の幅 */
  --hotel-gap: clamp(40px, 8vw, 100px);  /* 2 列のあいだの余白 */

  --font-sans: "Helvetica Neue", Helvetica, Arial,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Noto Sans JP", Meiryo, sans-serif;
  --font-en: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------
   2. ベース
------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* 画面読み上げ専用テキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------
   3. ページ全体（PC は 1280px キャンバスを中央寄せ）
------------------------------------------------------------------- */
.site-canvas {
  width: min(100%, var(--canvas-width));
  margin-inline: auto;
  padding: clamp(56px, 7vw, 91px) 40px 220px;
  min-height: 100vh;
}

/* -------------------------------------------------------------------
   4. ロゴ＋お知らせ
------------------------------------------------------------------- */
.brand-logo {
  width: min(var(--logo-width), 100%);
  margin: 0 auto;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.coming-soon {
  margin: 53px 0 0;
  color: var(--color-notice);
  font-size: 18px;
  line-height: 1.85;
  letter-spacing: 0.06em;
  text-align: center;
}

/* -------------------------------------------------------------------
   5. ホテル一覧（PC：2 カラム）
------------------------------------------------------------------- */
#hotels { margin-top: 93px; }

.hotel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--hotel-gap);
  row-gap: 56px;
  max-width: calc(var(--hotel-column) * 2 + var(--hotel-gap));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.hotel-photo {
  margin: 0;
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.04);
}

.hotel-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ホテル名：白・大文字・広い字間で中央寄せ */
.hotel-name {
  margin: 30px 0 0;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
}

/* 住所・電話：写真の左端に揃える */
.hotel-info {
  margin: 34px 0 0;
  font-size: 17px;
  font-style: normal;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.hotel-info p { margin: 0; }
.hotel-info p + p { margin-top: 8px; }

.hotel-info a {
  color: inherit;
  text-decoration: none;
}

.hotel-info a:hover { text-decoration: underline; }

a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------
   6. 画像が未配置のときのプレースホルダ（js/main.js が付与）
      ※ 本来の画像を img/ に置けば表示されません
------------------------------------------------------------------- */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 14px;
  border: 1px dashed rgba(201, 168, 106, 0.6);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--color-gold);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-align: center;
}

.img-placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--color-text);
  word-break: break-all;
}

/* ロゴのプレースホルダはロゴと同じ比率で場所を確保 */
.brand-logo .img-placeholder { aspect-ratio: var(--logo-ratio); }

/* -------------------------------------------------------------------
   7. ささやかな表示アニメーション
------------------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.brand-header { animation: fade-up 0.9s ease-out both; }
.hotel-list   { animation: fade-up 0.9s ease-out 0.25s both; }

@media (prefers-reduced-motion: reduce) {
  .brand-header,
  .hotel-list { animation: none; }
}

/* -------------------------------------------------------------------
   8. スマートフォン（iPhone 中心／〜767px）：写真が縦に並ぶ
------------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-canvas {
    padding: 56px 22px 110px;
  }

  .brand-logo { width: min(240px, 70vw); }

  .coming-soon {
    margin-top: 32px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  #hotels { margin-top: 52px; }

  .hotel-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .hotel-name {
    margin-top: 22px;
    font-size: 15px;
    letter-spacing: 0.2em;
  }

  .hotel-info {
    margin-top: 14px;
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 1.9;
  }

  .hotel-info p + p { margin-top: 4px; }
}