:root{
  --navy:#0f2537;
  --green:#1e3d33;
  --red:#c84930;
}

body{
  margin:0;
  font-family:"Noto Sans JP";
  background:#f7f5ef;
  color:#333;
}

/* ===== ヒーロー ===== */
.hero{
  background:url("../images/ヘッダー画像.png") center/cover;
  height:300px;
  display:flex;
  align-items:center;
}

.hero-inner{
  padding-left:50px;
  color:var(--navy);
}

.hero h1{
  font-size:32px;
}

/* ===== コンテンツ ===== */
.content{
  padding:40px;
}

/* ===== 上段（所在地＋地図） ===== */
.access-top{
  display:grid;
  grid-template-columns:1.2fr 1.8fr;
  gap:30px;
  margin-bottom:40px;
}

/* ===== 下段 ===== */
.access-bottom{
  display:grid;
  gap:20px;
}

/* ===== カード ===== */
.card{
  background:#fff;
  padding:20px;
  border-radius:6px;
}

.card h3{
  color:var(--navy);
  margin-bottom:10px;
}

.card ul{
  padding-left:20px;
}

/* ===== 補足 ===== */
.note{
  font-size:0.9em;
  color:#666;
  margin-top:10px;
}

/* ===== Map ===== */
.map iframe{
  width:100%;
  height:100%;
  min-height:320px;
  border:none;
  border-radius:6px;
}

/* ===== ボタン ===== */
.btn-parking{
  display:inline-block;
  margin-top:15px;
  padding:10px 20px;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  border-radius:4px;
}

.btn{
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:15px 30px;
  text-decoration:none;
}

/* ===== CTA ===== */
.cta{
  text-align:center;
  padding:50px;
}

/* =========================
   スマホ対応
========================= */
@media (max-width: 768px){

  /* ヒーロー */
  .hero{
    height:220px;
  }

  .hero-inner{
    padding:20px;
  }

  .hero h1{
    font-size:24px;
    line-height:1.5;
  }

  /* 全体余白 */
  .content{
    padding:20px;
  }

  /* 所在地＋地図を縦並び */
  .access-top{
    grid-template-columns:1fr;
    gap:20px;
  }

  /* カード */
  .card{
    padding:16px;
  }

  /* 地図 */
  .map iframe{
    min-height:300px;
  }

  /* ボタン */
  .btn,
  .btn-parking{
    display:block;
    width:100%;
    text-align:center;
    box-sizing:border-box;
  }

  /* CTA */
  .cta{
    padding:30px 20px;
  }

}