/* ============ Base ============ */
:root{
  --bg:#f8f5f1;
  --bg-soft:#f0ebe4;
  --ink:#3a3a3a;
  --ink-mute:#5a5957;
  --accent:#b57f50;      /* 温かいコッパー */
  --accent-ink:#5b3c24;
  --card:#ffffff;
  --card2:#f0ebe4;
  --shadow: 0 10px 30px rgba(40,30,20,.08);
  --radius: 16px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  line-height:1.85;
  color:var(--ink);
  background: var(--bg);
  letter-spacing:.02em;
}

h1,h2,h3,h4{
  font-family: "Noto Serif JP", serif;
  color:var(--ink);
  line-height:1.35;
  margin:0 0 .5em;
}

/* ============ Layout ============ */
.container{
  width: min(1120px, 92%);
  margin: 0 auto;
}

.section{
  padding: 72px 0;
}

.section-soft{
  background: radial-gradient(180px 180px at 8% 10%, #fff6ee, transparent 60%),
              radial-gradient(220px 180px at 90% 20%, #f3ece5, transparent 60%),
              var(--bg-soft);
  border-top: 1px solid #ece6de;
  border-bottom: 1px solid #ece6de;
}

.section-head{
  margin-bottom: 28px;
}
.section-head h2{
  font-size: clamp(24px, 3vw, 34px);
}
.section-head p{
  color: var(--ink-mute);
  margin: 6px 0 0;
}

/* ============ Header ============ */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(248,245,241,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #efe9e1;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-mark{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.brand-text{ font-weight:700; display:flex; flex-direction:column; line-height:1.1; }
.brand-text small{ font-weight:500; color:var(--ink-mute); letter-spacing:.06em; }

.nav{ display:flex; gap:20px; align-items:center; }
.nav a{
  color:var(--ink); text-decoration:none; font-weight:500;
  padding:8px 10px; border-radius:10px;
}
.nav a:hover{ background:#efe9e1; }
.nav-cta{
  background: var(--accent); color:#fff !important; border-radius:999px; padding:10px 16px !important;
  box-shadow: var(--shadow);
}
.nav-cta:hover{ background:#9f6e45; }

/* ============ Hero ============ */
.hero{ position:relative; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; z-index:-2; display:grid;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; filter:brightness(.78) saturate(1.05);
}
.hero-bg .texture{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 15% 10%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(50% 60% at 90% 20%, rgba(255,255,255,.2), transparent 60%),
    linear-gradient(to bottom, rgba(245,238,231,.55), rgba(245,238,231,.15));
  mix-blend-mode: soft-light;
}
.hero-content{
  padding: min(18vh, 140px) 0 min(14vh, 120px);
  color:#2b2b2b;
}
.hero h1{
  font-size: clamp(28px, 5.2vw, 56px);
  text-shadow: 0 2px 16px rgba(255,255,255,.6);
  padding-bottom: 30px;
}
.hero h3{
  font-size: clamp(18px, 3vw, 30px);
  text-shadow: 0 2px 16px rgba(255,255,255,.6);
  padding-bottom: 30px;
}
.br-md{ display:none; }
.lead{ font-size: clamp(19ßpx, 3vw, 24px); color:#2d2b29; max-width: 760px; }
.cta-group{ display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; }
.badges{ display:flex; gap:10px; list-style:none; padding:0; margin:18px 0 0; }
.badges li{
  padding:6px 10px; background: rgba(255,255,255,.66);
  border:1px solid #efe6dc; border-radius:999px; font-size:13px;
}


/* ── つるっと丸い白フチ（優先：text-stroke）＋ きゅっと締まる外側の影 ── */
.ink-outline-smooth{
  /* 好みで調整する変数 */
  --fill:   #c61b1b;   /* 文字色 */
  --stroke: #ffffff;   /* フチ色 */
  --edge:   rgba(0,34,85,.65); /* 外側の落ち影（任意） */
  --w:      6px;       /* フチの太さ（大見出しは 8–12px 目安） */

  color: var(--fill);

  /* ここが一番きれい：滑らかで角も丸いフチ */
  -webkit-text-stroke: var(--w) var(--stroke);
  paint-order: stroke fill;       /* Stroke → Fill の順で描画 */

  /* 視認性アップの薄い外側影（お好みで） */
  filter: drop-shadow(0 2px 0 var(--edge));

  /* レンダリングを滑らかに */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── フォールバック（text-stroke非対応ブラウザ向け） ── */
@supports not (-webkit-text-stroke: 1px black) {
  .ink-outline-smooth{
    /* 多重シャドウ＋軽いぼかしで“丸い縁”を擬似的に作る */
    text-shadow:
      0   0   2px var(--stroke),
      0   0   6px var(--stroke),
      0   0  10px var(--stroke),
      2px 0   3px var(--stroke),
     -2px 0   3px var(--stroke),
      0   2px 3px var(--stroke),
      0  -2px 3px var(--stroke),
      1.5px  1.5px 3px var(--stroke),
     -1.5px  1.5px 3px var(--stroke),
      1.5px -1.5px 3px var(--stroke),
     -1.5px -1.5px 3px var(--stroke),
      0   2px 0 var(--edge); /* 最後に外側の締め影（任意） */
  }
}





/* ==== Hero Badges: two stacked green pills ==== */
.hero-badges{
  position: absolute;
  top: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.hero-badge{
  background: #2e8b57;        /* サイトの安心グリーン */
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: inline-block;
  white-space: nowrap;
}

/* モバイルは上部に中央寄せで2つ並ぶ */
@media (max-width: 768px){
  .hero-badges{
    position: static;
    margin: 10px auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-badge{
    font-size: 16px;
    padding: 8px 14px;
  }
}

/* ============ Buttons ============ */
.btn{
  display:inline-block; text-decoration:none; font-weight:700; border-radius:999px;
  padding:12px 18px; transition:.15s ease-in-out; border:1px solid transparent;
}
.btn-primary{
  background: var(--accent); color:#fff; box-shadow: var(--shadow);
}
.btn-primary:hover{ background:#9f6e45; }
.btn-ghost{
  background: rgba(255,255,255,.7); color:var(--accent-ink); border-color:#eadfce;
}
.btn-ghost:hover{ background: #fff; }

/* ============ Cards / Services ============ */
.cards{
  display:grid; gap:22px;
}
.cards-4{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.card{
  background:var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden; border:1px solid #efe6dc;
}
.card2{
  background:var(--card2); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden; border:1px solid #efe6dc;
}
.card img{ width:100%; height:160px; object-fit:cover; display:block; }
.card2 img{ width:100%; height:160px; object-fit:cover; display:block; }
.card-body{ padding:16px 16px 18px; }
.card h3{ font-size:20px; margin-bottom:6px; }
.card2 h3{ font-size:20px; margin-bottom:6px; }


/* ============ Features (renew) ============ */
.features-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:22px;
  margin-top:30px;
}

.feature-card{
  background:#7c1111;
  border:1px solid #efe6dc;
  border-radius: var(--radius);
  padding:26px 20px;
  text-align:center;
  box-shadow: var(--shadow);
  transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(40,30,20,.12);
}

.feature-icon{
  width:60px; height:60px;
  margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-soft);
  border-radius:50%;
}

.feature-icon img{
  width:28px; height:28px;
  opacity:.9;
}

.feature img{
  width: 1000px;   /* 好きな幅に */
  height: auto;   /* 縦横比を維持 */
  margin: 20px; 
}

.feature-card h3{
  font-size:18px;
  margin:0 0 10px;
  color:var(--accent-ink);
}
.feature-card p{
  font-size:15px;
  color:var(--ink-mute);
  margin:0;
}


/* ラッパー（中央寄せ＆余白） */
.section-two-col{
  max-width: 1200px;
  margin: 10px 0px 10px 0px;
  padding: 0 20px;
}

/* 2カラム本体：左細め＋右広め */
.two-col{
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr);
  column-gap: clamp(16px, 4vw, 56px);
  align-items: start;
}

/* 右：本文（日本語向けの読みやすい行間） */
.two-col .col-body{
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 2.0;
  color: #222;
}
.two-col .col-body p{ margin: 0 0 ; }
.two-col .col-body p:last-child{ margin-bottom: 10; }

.col-body p{font-size: 18px;}


/* モバイル：縦積み */
@media (max-width: 768px){
  .two-col{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .two-col .col-title{
    font-size: clamp(24px, 6vw, 34px);
  }
  .section-two-col{ margin: 40px auto; }
}


/* ============ Flow ============ */
.flow{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:16px; counter-reset: step;
  list-style:none; padding:0; margin:0;
}
.flow li{
  background:#fff; border:1px solid #efe6dc; border-radius: var(--radius);
  padding:18px; box-shadow: var(--shadow);
}
.flow h4{ margin:0 0 6px; font-size:18px; }

/* ============ Price ============ */
.price-table{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:18px;
}
.price-item{
  background:#fff; border:1px solid #efe6dc; border-radius: var(--radius);
  padding:15px; box-shadow: var(--shadow);
}
.price{ color:var(--accent-ink); margin:4px 0 10px; font-weight:700; }
.note{ color:var(--ink-mute); font-size:14px; }

.big_red{
  font-weight: 700;
  font-size:18px;
  color: red;
}

/* ============ About ============ */
.about{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center;
}
.about-photo img{
  width:100%; height:auto; border-radius: 20px; box-shadow: var(--shadow);
  border:1px solid #efe6dc; display:block;
}
.about-list{ padding-left: 1.1em; }


/* ============ Access ============ */
.access{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start;
}
.access-map img{
  width:100%; height:auto; border-radius: 16px; border:1px solid #efe6dc; box-shadow: var(--shadow);
}
.access-text a{ color: var(--accent-ink); }

/* ============ Contact ============ */
.contact .contact-form{
  background:#fff; border:1px solid #efe6dc; border-radius: var(--radius);
  padding:22px; box-shadow: var(--shadow);
}
.form-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:14px;
}
.form-grid .full{ grid-column: 1/-1; }
label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
input, textarea{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid #e5dbcd; background:#fcfbf8; font: inherit;
}
input:focus, textarea:focus{ outline:2px solid #e8d9c5; background:#fff; }



/* ============ Contact / Booking Form ============ */
.contact-section {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.contact-section h3 {
  font-size: 24px;
  color: #2e8b57;
  margin-bottom: 10px;
}

.contact-lead {
  color: #555;
  margin-bottom: 16px;
}

.contact-form {
  background: #fff;
  border: 1px solid #e5e0d8;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.form-grid .full { grid-column: 1 / -1; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #333;
}

input, textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font: inherit;
  background: #fcfcfc;
}

input:focus, textarea:focus {
  outline: 2px solid #cfe7da;  /* 緑がかったフォーカス */
  background: #fff;
}

/* ボタン（サイト全体のトーンに合わせた緑） */
.btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.btn-primary:hover {
  background: #9f6e45;
}

.contact-note {
  font-size: 13px;
  color: #666;
  margin-top: 10px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}



/* ============ Booking: 3候補の日時入力 ============ */
.datetime-group {
  border: 1px dashed #e5e0d8;
  border-radius: 12px;
  padding: 14px;
  background: #f9fff9; /* ほんのりグリーンで可読性UP */
  display: grid;
  gap: 12px;
}

.datetime-group legend {
  font-weight: 700;
  color: #2e8b57;
  padding: 0 6px;
  font-size: 16px;
}

/* PC：3列で並べる（legendは全幅） */
@media (min-width: 769px) {
  .datetime-group {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .datetime-group legend {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
}

/* ラベル内のインプット共通 */
.datetime-group label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #333;
}

.datetime-group input[type="datetime-local"] {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fcfcfc;
  font: inherit;
}

.datetime-group input[type="datetime-local"]:focus {
  outline: 2px solid #cfe7da;
  background: #fff;
}

/* 補助テキスト */
.datetime-group .helptext {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: #666;
}

/* モバイルは1列表示（既存の .form-grid と自然に馴染みます） */
@media (max-width: 768px) {
  .datetime-group {
    grid-template-columns: 1fr;
  }
}




/* ============ Footer ============ */
.site-footer{
  margin-top: 60px; padding: 30px 0 40px;
  border-top:1px solid #efe6dc; background: #faf7f2;
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap: wrap; }
.footer-nav{ list-style:none; display:flex; gap:16px; padding:0; margin:0; }
.footer-nav a{ color: var(--ink-mute); text-decoration:none; }
.footer-nav a:hover{ color: var(--ink); }

/* ============ Fixed Phone Banner ============ */
.fixed-phone {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1500;
  transition: transform 0.2s ease, background 0.2s ease;
}

.fixed-phone:hover {
  background: #9f6e45;
  transform: translateY(-3px);
}

.phone-icon {
  font-size: 16px;
}

.phone-text {
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* 経歴セクション */
.career-title {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-ink);
}

.career-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 20px;
  border-left: 3px solid var(--accent);
}

.career-list li {
  padding: 6px 0 6px 12px;
  font-size: 15px;
  color: var(--ink-mute);
}


/* ヘッダー住所（事務所名の下に表示） */
.header-address {
  display: block;
  font-size: 13px;
  margin-top: 4px;
  margin-right: 60px;
}
.header-address a {
  color: var(--ink-mute);
  text-decoration: none;
}



/* 営業日表１ */
.hero-section {
  background: url('/images/livingroom.jpg') no-repeat center center / cover;
  padding: 80px 20px;
  color: #333;
}

.hero-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.hero-text {
  flex: 1;
}

.hero-text h1 {
  font-size: 32px;
  line-height: 1.6;
  font-weight: 700;
  color: #2e3a29;
  text-shadow: 0 2px 4px rgba(255,255,255,0.8);
}

.consult-note {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 700;
  color: #2e8b57;
}

/* 営業日表２ */
.hero-schedule {
  margin-top: 50px;
  display: flex;
  flex: 1;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #e5e0d8;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  overflow: hidden;
}

.hero-schedule h4 {
  margin: 0;
  padding: 10px;
  background: #2e8b57;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.hero-schedule table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}

.hero-schedule th,
.hero-schedule td {
  border: 1px solid #ddd;
  padding: 6px 8px;
}

.hero-schedule th {
  background: #f0f7f3;
  font-weight: 600;
}

.hero-schedule td {
  color: #333;
}

.hero-schedule .open {
  color: #1d0505;
  font-weight: 900;
}


/* 土曜日も通常営業バッジ */
.highlight-badge {
  position: absolute;
  top: 40px;
  right: 40px;
  background: #2e8b57; 
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 100;
}

/* 営業日表の中の土曜日を強調 */
.hero-schedule td.highlight {
  background: #92e8b7;
  color: #1d0505;
  font-weight: 900;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .highlight-badge {
    position: static;
    margin: 10px auto 20px;
    display: inline-block;
    font-size: 16px;
    padding: 8px 16px;
  }
}


/* アクセス */
.access-section {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.map-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9比率 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

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



/* 既存のスマホ用を置き換え／調整：横スクロールをやめて全表示に */
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 40px 16px; /* 余白を少し詰める */
  }

  .hero-text h2 {
    font-size: 22px;
    line-height: 1.5;
  }

  .consult-note {
    font-size: 16px;
  }

  .hero-schedule {
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
    font-size: 12px;          /* 文字サイズを縮小 */
    overflow: hidden;         /* 横スクロールOFF */
    border-width: 1px;        /* 枠線を少し細く */
  }

  /* 全列を画面幅に収める：固定レイアウト＋列幅比率 */
  .hero-schedule table {
    table-layout: fixed;      /* 固定レイアウト */
    width: 100%;
  }

  /* 列幅の比率（時間列を少し広めに、曜日は均等）*/
  .hero-schedule .col-time { width: 26%; }
  .hero-schedule .col-day  { width: calc((74%)/8); }

  /* セル内余白を圧縮して情報量を確保 */
  .hero-schedule th,
  .hero-schedule td {
    padding: 6px 4px;
    line-height: 1.3;
    word-break: keep-all;     /* 漢字1文字列の折返しを防ぐ */
    white-space: normal;      /* 括弧入りの時間は改行OK */
  }

  /* 見出し・ヘッダーもコンパクトに */
  .hero-schedule h4 {
    font-size: 13px;
    padding: 8px;
  }

  /* 午前/午後/夜間の行の時間セルは2行構成を想定 → 可読性確保 */
  .hero-schedule td:first-child {
    font-weight: 600;
  }
}


/* ===== 3候補の日時（date + select）レイアウト ===== */


/* 1行に 日付 と 時刻 を並べる */
.datetime-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.datetime-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #333;
}

.datetime-row input[type="date"],
.datetime-row select {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fcfcfc;
  font: inherit;
}

.datetime-row input[type="date"]:focus,
.datetime-row select:focus {
  outline: 2px solid #cfe7da;
  background: #fff;
}

.datetime-group .helptext {
  margin: 2px 0 0;
  font-size: 13px;
  color: #666;
}

/* モバイルは縦積み */
@media (max-width: 768px) {
  .datetime-row { grid-template-columns: 1fr; }
}



/* ===== Privacy Policy = Contact Form width & style ===== */

/* 外側コンテナの幅・左右余白を“フォームと同一”に */
.policy-section,
.contact-section {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

/* プライバシー側は枠・影を外してコンテナのみ（内側でカード化） */
.policy-section {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 内側のカード見た目をフォームと共有（完全一致） */
:is(.contact-form, .policy-card) {
  background: #fff;
  border: 1px solid #e5e0d8;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  padding: 20px;
}

/* 見出し・本文（必要に応じて微調整） */
.policy-card h3{ color:#2e8b57; font-size:24px; margin:0 0 12px; }
.policy-card h4{ margin:18px 0 8px; font-size:18px; color:#2e3a29; }
.policy-card .policy-lead{ color:#555; margin-bottom:8px; }
.policy-card ul{ margin: 0 0 8px 1.2em; }
.policy-card address{ font-style: normal; line-height: 1.9; color:#333; }
.policy-card .policy-updated{ font-size:12px; color:#666; margin-top:12px; }

/* フッター内リンクの見た目（既存に合わせて） */
.site-footer .footer-link{
  color:#fff;
  text-decoration: underline;
  margin-left: 12px;
}
.site-footer .footer-link:hover{
  text-decoration: none;
  opacity: .9;
}

/* モバイル余白：フォームと同じリズムで */
@media (max-width: 768px){
  .policy-section,
  .contact-section { margin: 40px auto; padding: 0 16px; }
}


/* ここのスマホ対応がうまくいかない
@media (max-width: 300px){
  .feature_img{ aspect-ratio: 4 / 1; }
}

/* 画像を全面カバー（トリミングしても比率維持） 
.feature_img > img{
  position: absolute; inset: 0;
  width: 30%; height: 30%;
  object-fit: cover;            /* 余白なしで“全面に” 
  object-position: center;      /* 見せたい位置があれば調整可 
  display: block;
}
*/



/* ============ Responsive ============ */
@media (max-width: 1024px){
  .cards-4{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .flow{ grid-template-columns: repeat(3, 1fr); }
  .price-table{ grid-template-columns: repeat(2, 1fr); }
  .about{ grid-template-columns: 1fr; }
  .access{ grid-template-columns: 1fr; }
  .br-md{ display:inline; }
}
@media (max-width: 640px){
  .nav{ display:none; } /* シンプルに：小画面ではヘッダーナビ非表示（必要なら後でハンバーガーに） */
  .hero-content{ padding: 96px 0 72px; }
  .cards-4{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: 1fr; }
  .flow{ grid-template-columns: 1fr; }
  .price-table{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
}





/* ===== Scroll / Reveal / Header shrink / Schedule highlight ===== */

/* ヘッダー縮小時（スクロールで付与） */
.site-header.is-scrolled {
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.site-header.is-scrolled .header-inner { padding: 6px 0; }

/* セクションのフェードイン（IntersectionObserverで .is-in を付与） */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ヒーロー背景のパララックスはJSでbackgroundPositionを更新 */

/* スケジュールの“今日”列＆“現在”行の強調 */
.hero-schedule th.is-today,
.hero-schedule td.is-today {
  background: #e8f4ec;
  box-shadow: inset 0 0 0 1px #cfe7da;
  font-weight: 700;
}
.hero-schedule tr.is-now td:first-child {
  color: #2e8b57;
  font-weight: 700;
}
.hero-schedule tr.is-now td:not(:first-child) {
  outline: 2px solid rgba(46,139,87,.15);
}

/* バッジをふわっと浮かせる */
.highlight-badge {
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* スクロールトップボタン（JSで生成） */
#toTopBtn {
  position: fixed; right: 16px; bottom: 16px; z-index: 1200;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #2e8b57; color:#fff; border: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
#toTopBtn.show { opacity: 1; transform: translateY(0); }
#toTopBtn:hover { background:#246b44; }

/* ===== Hamburger (mobile only) ===== */
.hamburger{
  display:none; /* デフォは非表示（モバイルで表示） */
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  position: relative; z-index:1101;  /* ドロワーより上 */
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:#fff;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger.is-open span:nth-child(1){ top:21px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:21px; transform: rotate(-45deg); }

/* ===== Drawer ===== */
.nav-drawer{
  position: fixed; top:0; right:0; height:100dvh; width:82vw; max-width:360px;
  background:#fff; color:#333; z-index:1100;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
  padding: 72px 20px 24px;   /* 上部はヘッダー分の余白 */
}
.nav-drawer.is-open{ transform: translateX(0); }
.nav-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.nav-list a{ display:block; padding:12px 10px; border-radius:10px; color:#2e3a29; text-decoration:none; }
.nav-list a:hover{ background:#f2f7f3; }
.nav-list a.cta{
  background:#2e8b57; color:#fff; font-weight:700; text-align:center; box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.nav-list a.cta:hover{ background:#246b44; }

/* 背景の半透明幕 */
.nav-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.25); z-index:1099;
}

/* スクロールロック */
.no-scroll{ overflow: hidden; }

/* レスポンシブ：モバイルでハンバーガー表示 */
@media (max-width: 768px){
  .hamburger{ display:block; }
  /* ヘッダーの右側にボタンを載せやすいよう微調整 */
  .header-inner{ position: relative; }
  .hamburger{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }
}

/* デスクトップ時：ドロワーは使わない（念のため閉じた状態に） */
@media (min-width: 769px){
  .nav-drawer{ transform: translateX(100%) !important; }
  .nav-backdrop{ display:none !important; }
}



/* ===== Hamburger visibility upgrade ===== */
:root{
  --hamburger-fg: #2e8b57;   /* 線色（サイトのグリーン） */
  --hamburger-bg: #ffffff;   /* ボタン背景（白） */
}

@media (max-width: 768px){
  /* ボタン自体を白い丸にしてコントラストUP */
  .hamburger{
    width: 48px; height: 48px;
    background: var(--hamburger-bg);
    border: 1px solid #e5e0d8;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
  /* ラインを太く・濃く・端を丸く */
  .hamburger span{
    left: 12px; right: 12px;
    height: 3px;                       /* ← 既存 2px → 3px に */
    background: var(--hamburger-fg);    /* ← 白 → 濃い緑 に */
    border-radius: 2px;
  }
  .hamburger span:nth-child(1){ top: 15px; }
  .hamburger span:nth-child(2){ top: 22px; }
  .hamburger span:nth-child(3){ top: 29px; }

  /* 開いた時の × も見やすく（色そのまま、位置も微調整） */
  .hamburger.is-open span:nth-child(1){ top: 22px; transform: rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity: 0; }
  .hamburger.is-open span:nth-child(3){ top: 22px; transform: rotate(-45deg); }

  /* ホバー/フォーカスで視覚フィードバック */
  .hamburger:hover{ filter: brightness(0.98); }
  .hamburger:focus-visible{
    outline: 3px solid #cfe7da;
    outline-offset: 2px;
  }
}

/* 背景幕も少し濃くしてドロワーを際立たせる（任意） */
.nav-backdrop{ background: rgba(0,0,0,.35); }


/* ==== Anchor offset for fixed header ==== */
:root { --header-height: 64px; }
@media (max-width: 768px){ :root { --header-height: 56px; } }

/* idに飛ぶ要素のスクロール余白（上部） */
section[id], h1[id], h2[id], h3[id] {
  scroll-margin-top: calc(var(--header-height) + 8px);
}