:root{
  --deep: #1b4d3e;   /* 深緑 */
  --deep-2:#124434;
  --yellow:#f6c445;  /* ひまわり黄色 */
  --cream:#fffaf0;
  --ink:#1a1a1a;
}

*{box-sizing:border-box}
html,body  {
  margin: 0;
  padding: 0;
  font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: #fff;
}

.container{width:min(1100px, 92vw);margin:0 auto;padding:24px}

header.site-header{
  position:sticky;top:0;background:white;border-bottom:1px solid #eee;z-index:10
}
.site-header .nav{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:44px;width:auto}
.nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav a{padding:8px 10px;border-radius:12px}
.nav a:hover{background:var(--cream)}

.hero {
  background: url("/images/hero1.jpg") center/cover no-repeat;
  min-height: 54vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .2));
}

.hero-inner {
  position: relative;
  padding: 40px 18px;
}

.hero h1 {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 600;
font-size: clamp(28px, 5.5vw, 52px); 
margin: 0 0 6px;
}

.hero p {
  margin: 0;
  font-size: clamp(18px, 3.5vw, 25px);
margin: 0 0 6px;
}

.btn{
  display:inline-block;background:var(--deep);color:white;padding:12px 18px;border-radius:999px;margin-top:16px
}
.btn:hover{background:var(--deep-2)}

h2.section-title{font-size:28px;margin:10px 0 18px;color:var(--deep)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.04)}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card .p{padding:14px 16px}

.table{
  width:100%;border-collapse:separate;border-spacing:0 8px
}
.table th,.table td{padding:12px 14px;background:#fff;border:1px solid #eee}
.table th{background:var(--cream);color:var(--deep);text-align:left}
.price{font-weight:700;color:var(--deep)}

.callout{
  padding:16px;border-left:6px solid var(--yellow);background:#fffbe6;border:1px solid #ffe9a9;border-radius:8px
}

footer{margin-top:40px;background:#0e2923;color:#e9f7f1}
footer .container{padding:22px}
footer small{opacity:.9}

.badge{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);padding:6px 10px;border-radius:999px;color:#5b3d00;font-weight:700}
hr.sep{border:none;border-top:1px dashed #ddd;margin:22px 0}
img.round{border-radius:14px}
@media (max-width: 760px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .card img{height:180px}
}

/* ====== Base 安定化（共通） ====== */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

.logo strong {
  white-space: nowrap;        /* 縦割れ防止（エステサロン SOLEILが縦になるのを防ぐ） */
  writing-mode: horizontal-tb;
  line-height: 1;
}

/* ヒーローの高さが触ると縮む対策（アドレスバー出入り対策） */
.hero { min-height: 54svh; background-size: cover; background-position: center; }
@supports not (height: 1svh) {
  .hero { min-height: 54vh; }
}

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

  /* 1) 全体の文字サイズと行間を少しゆったり */
  html, body { font-size: 15px; line-height: 1.8; }

  /* 2) ヒーロー内の余白と文字サイズ調整 */
  .hero-inner { padding: 28px 16px; }
  .hero h1 { font-size: clamp(22px, 6vw, 30px); margin: 0 0 6px; }
  .hero p  { font-size: clamp(14px, 4.2vw, 18px); }

  /* 3) ヘッダー並び崩れ防止 */
  .site-header .nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    flex-wrap: wrap;             /* 幅が足りない時だけ折り返す */
  }
  .site-header .logo{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .site-header .logo img{ height: 28px; width: auto; }

  .site-header nav ul{
    display: flex;
    gap: 12px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;             /* ナビがはみ出るのを防ぐ */
  }

  /* 4) グリッドを1カラムに（写真とボタンを縦並びに安定） */
  .grid-2{
    display: grid;
    grid-template-columns: 1fr;  /* 2列→1列 */
    gap: 16px;
  }

  /* 5) 画像＋CTAの左寄せ/間隔 */
  .ami-img { text-align: left; margin: 16px 0; }
  .ami-img img.round{ display:block; margin:0 0 8px 0; }
  .ami-img .cta{ margin: 0; }

  /* 6) ボタン（.btn）が大きすぎ/はみ出し防止 */
  .btn{
    display: inline-block;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1;
  }

  /* 7) 日本語の不規則な改行を軽減 */
  p, h1, h2, h3, li { word-break: break-word; overflow-wrap: anywhere; }
}

/* ====== さらに狭い端末（～480px） ====== */
@media (max-width: 480px){
  .hero h1 { font-size: clamp(20px, 7vw, 26px); }
  .hero p  { font-size: clamp(13px, 4.6vw, 16px); }
  .site-header .nav{ gap: 8px; }
}

/* ===== スマホでカード3枚を1列・中央寄せに強制 ===== */
@media (max-width: 768px){

  /* 1) よくある親コンテナ名をまとめて縦並びに */
  .cards, .card-row, .grid-3, .grid3, .features, .gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    justify-items: center !important;
  }

  /* 2) 子要素（カード）を揃える */
  .cards > *, .card-row > *, .grid-3 > *, .grid3 > *,
  .features > *, .gallery > * {
    width: 100% !important;
    max-width: 320px !important;   /* ここで1枚の最大幅を統一 */
  }

  /* 3) 画像は親幅にフィット */
  .cards img, .card-row img, .grid-3 img, .grid3 img,
  .features img, .gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px; /* お好み。不要なら消してOK */
  }
}

.table .price {
  white-space: nowrap;   /* 改行禁止 */
}

/* ロゴ画像を強制的に大きくする（上書き用） */
.site-header .logo img {
  height: 92px !important;   /* 好みで90〜110pxに調整 */
  width: auto !important;
  flex: 0 0 auto;
  display: block;
}

/* ヘッダー側に高さ制限がある場合の保険 */
.site-header {
  min-height: 100px;         
  padding-top: 8px;
  padding-bottom: 8px;
}

/* スマホ（幅600px以下）は少し控えめに */
@media (max-width: 600px) {
  .site-header .logo img {
    height: 72px !important;
  }
  .site-header { min-height: 84px; }
}

.fb-wrapper {
  display: flex;            /* 中央寄せ */
  justify-content: center;
  margin: 0 auto;
}

.fb-wrapper iframe {
  display: block;
  width: clamp(320px, 92vw, 400px);  /* スマホ〜PCまで中央に収まりやすい */
  height: 500px;
}