/* ==========================================
   共通設定 & ベーススタイル
   ========================================== */
:root {
  --color-bg-dark: #121926;
  --color-bg-card: #1d2736;
  --color-text-main: #ffffff;
  --color-text-sub: #cfd8dc;
  --color-gold: #c5a059;
  --color-gold-hover: #b08c46;
  --color-pink: #e06287;
  --color-blue: #3a7bd5;
  --color-border: #2c384a;
  --font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}

main {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-dark);
  color: var(--color-text-main);
  font-family: var(--font-family);
  line-height: 1.6;
	font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-weight: 500; /* 基本文章も線が細くなりすぎないよう調整 */
}

/* 2. 見出し・キャッチコピー・日付を「極太」にしてメリハリを強調 */
.section-title,
.hero-title,
.hero-date,
.lottery-title,
.house-name,
.recommend-head,
.photo-date {
  font-weight: 900;
  letter-spacing: -0.02em; /* ゴシック体の太字で崩れないよう字間調整 */
}

.hero-title .sub,
.section-sub,
.house-badge,
.hero-badge,
.label,
.sp-date,
.prize-card .rank,
.prize-name,
.conditions-title,
.photographer-name,
.flow-steps li strong {
  font-weight: 700;
}

/* 3. 補足説明・注釈文は「あえて標準〜細字」にして太字を引き立てる */
.section-lead,
.hero-location,
.schedule-notes,
.feature-text p,
.photographer-sns,
.flow-steps li span,
.photo-target {
  font-weight: 400;
  color: var(--color-text-sub);
}

/* 4. ボタンの角丸と太字調整（デザイン崩れ防止） */
.btn {
  border-radius: 6px; /* 丸文字用の丸みからシャープな角丸へ戻す */
  font-weight: 800;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: 4px;
}

.lp-main { width: 100%; overflow-x: hidden; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 15px; }
.section { padding: 50px 0; border-bottom: 1px solid var(--color-border); }

.section-title {
  text-align: center;
  font-size: 1.6rem;
  margin: 0 0 10px;
  color: #fff;
}
.section-sub {
  display: block;
  text-align: center;
  color: var(--color-gold);
  font-weight: bold;
  letter-spacing: 2px;
}
.section-lead {
  text-align: center;
  color: var(--color-text-sub);
  margin-bottom: 30px;
  font-size: 0.9rem;
}

/* ボタン */
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s;
}
.btn-gold { background-color: var(--color-gold); color: #fff; }
.btn-pink { background-color: var(--color-pink); color: #fff; }
.btn-block { display: block; width: 100%; box-sizing: border-box; }
.btn:hover { opacity: 0.85; }

/* ==========================================
   1. メインビジュアル (FV)
   ========================================== */
.hero-section {
  position: relative;
  padding: 40px 0 50px;
  text-align: center;
  background: #0a0f18;
}

.hero-bg-image {
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-badge {
  display: inline-block;
  background-color: var(--color-gold);
  color: #fff;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.hero-title { font-size: 1.8rem; margin: 0 0 15px; }
.hero-title .sub { display: block; font-size: 1rem; color: var(--color-gold); margin-bottom: 5px; }
.hero-date { font-size: 1.5rem; font-weight: bold; color: #fff; margin-bottom: 10px; }
.hero-date .day { font-size: 0.9rem; color: var(--color-gold); }
.hero-location { color: var(--color-text-sub); margin-bottom: 25px; font-size: 0.9rem; }

.hero-cta-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================
   2. スケジュール（レスポンシブ切り替え）
   ========================================== */
.pc-only { display: table; }
.sp-only { display: none; }

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-card);
  text-align: center;
}
.schedule-table th, .schedule-table td {
  padding: 12px;
  border: 1px solid var(--color-border);
}
.schedule-table th { background-color: #161e2b; color: var(--color-gold); }
.schedule-table .date-cell { font-weight: bold; background-color: #182230; }

.label {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
}
.label-blue { background-color: var(--color-blue); }
.label-navy { background-color: #2c3e50; border: 1px solid #455a64; }
.label-gold { background-color: var(--color-gold); }
.label-pink { background-color: var(--color-pink); }

.schedule-notes {
  list-style: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--color-text-sub);
  margin-top: 15px;
}

/* ==========================================
   3. モデルハウス見学会（画像枠＆レイアウト）
   ========================================== */
.recommend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}
.recommend-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 15px;
  border-radius: 6px;
}
.recommend-head { margin-top: 0; font-size: 1rem; border-bottom: 2px solid; padding-bottom: 5px; }
.head-day { color: #64b5f6; border-color: #64b5f6; }
.head-night { color: var(--color-gold); border-color: var(--color-gold); }
.recommend-card ul { padding-left: 18px; margin: 0; font-size: 0.85rem; color: var(--color-text-sub); }

.houses-container { display: flex; flex-direction: column; gap: 40px; }
.house-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: 6px;
  position: relative;
}
.house-badge {
  position: absolute;
  top: -12px;
  left: 15px;
  background-color: var(--color-gold);
  color: #fff;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: bold;
}
.house-name { margin: 10px 0 0; font-size: 1.4rem; }
.house-spec { color: var(--color-gold); font-size: 0.8rem; margin-bottom: 15px; }

.house-main-img { margin-bottom: 20px; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.feature-item {
  background-color: #151d28;
  border-radius: 4px;
  overflow: hidden;
}
.feature-img { height: 140px; overflow: hidden; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-text { padding: 12px; }
.feature-text h4 { margin: 0 0 5px; color: var(--color-gold); font-size: 0.9rem; }
.feature-text p { margin: 0; font-size: 0.8rem; color: var(--color-text-sub); }

/* ==========================================
   4. 大抽選会（景品画像枠）
   ========================================== */
.lottery-box {
  background: linear-gradient(135deg, #2a2115 0%, var(--color-bg-card) 100%);
  border: 2px solid var(--color-gold);
  padding: 25px 15px;
  border-radius: 8px;
  text-align: center;
}
.lottery-title { color: var(--color-gold); font-size: 1.4rem; margin-top: 0; }

.prizes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.prize-card {
  background-color: #121926;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}
.prize-card .rank {
  background-color: var(--color-gold);
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 2px;
}
.prize-img { margin: 8px 0; height: 90px; }
.prize-img img { width: 100%; height: 100%; object-fit: contain; }
.prize-name { margin: 0; font-size: 0.8rem; font-weight: bold; }

.conditions-box {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 6px;
}
.conditions-title { margin: 0 0 8px; font-size: 0.9rem; color: var(--color-gold); }
.conditions-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}

/* ==========================================
   5. フォト撮影会
   ========================================== */
.tag-lottery {
  display: table;
  margin: 0 auto 15px;
  background-color: var(--color-pink);
  color: #fff;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
}
.photo-info-box {
  background-color: #fff;
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: 6px;
}

.photo-benefits .label {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #5c6265;
}

.photo-benefits p {
  color: #5c6265;
}
.photo-banner-img { margin-bottom: 15px; }
.photo-meta { text-align: center; margin-bottom: 20px; }
.photo-date { font-size: 1.1rem; font-weight: bold; color: var(--color-pink); margin: 0; }
.photo-target { font-size: 0.85rem; color: #5c6265; margin: 5px 0 0; }

.photo-benefits { display: flex; gap: 10px; margin-bottom: 20px; }
.benefit-item {
  flex: 1;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.85rem;
}
.benefit-item.highlight { border: 1px solid var(--color-pink); }

.photographers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}
.photographer-card {
  background-color: #ecb3c7;
  padding: 15px;
  border-radius: 6px;
  text-align: center;
}
.photographer-img {
  width: 70px;
  height: 70px;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
}
.photographer-img img { width: 100%; height: 100%; object-fit: cover; }
.day-badge { font-size: 0.75rem; color: var(--color-pink); font-weight: bold; }
.photographer-name { margin: 3px 0; font-size: 1rem; }
.photographer-sns { margin: 0; font-size: 0.75rem; color: #000; }

.flow-box { border-top: 1px dashed var(--color-border); padding-top: 15px; }
.flow-box h3 { font-size: 0.95rem; text-align: center; color: var(--color-gold); margin: 0 0 10px; }
.flow-steps {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
}
.flow-steps li { background-color: #fff; padding: 10px; border-radius: 4px; font-size: 0.8rem; }
.flow-steps li strong { display: block; color: var(--color-pink); }
.flow-steps span{ color: #000!important; }
.flow-steps li{ border: 1px solid var(--color-pink);}

/* ==========================================
   6. アクセス & 7. CTA
   ========================================== */
.access-content { text-align: center; font-size: 0.9rem; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.cta-box {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}
.cta-box h3 { margin: 0 0 5px; font-size: 1.1rem; }
.cta-box p { font-size: 0.8rem; color: var(--color-text-sub); margin-bottom: 15px; }
/* ==========================================
   追加：Googleマップ レスポンシブ対応
   ========================================== */
.map-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
  margin: 20px auto 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================
   予約フォーム
   ========================================== */
#contactarea {
    background-color: #F6F6F6;
    margin-top: 140px;
    padding: 90px 0;
    color: #000;
}

/* ==========================================
   スマホ表示（ブレイクポイント: 768px以下）
   ========================================== */
@media (max-width: 768px) {
  /* PC用テーブル非表示 / スマホ用カード表示 */
  .pc-only { display: none; }
  .sp-only { display: block; }

  .hero-title { font-size: 1.4rem; }
  .hero-cta-buttons { flex-direction: column; }
  
  /* スマホ版 スケジュールカードデザイン */
  .sp-schedule-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 12px;
  }
  .sp-date {
    font-weight: bold;
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  .sp-time-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
  }
  .sp-time-slot:last-child { margin-bottom: 0; }
  .sp-time-slot .time { color: var(--color-text-sub); font-weight: bold; }
  .sp-time-slot .events { display: flex; gap: 4px; align-items: center; }

  /* グリッドを1列化 */
  .recommend-grid,
  .photographers-grid,
  .cta-grid {
    grid-template-columns: 1fr;
  }

  .photo-benefits {
    flex-direction: column;
  }

  .prizes-grid {
    grid-template-columns: 1fr 1fr; /* 景品は2列見せでスマホ最適化 */
  }
	.sp-date {
    font-weight: 800;
  }
  .sp-time-slot .time {
    font-weight: 700;
  }
}