:root{
  --bg:#f9f4ec; --fg:#1b1f23; --muted:#6b7280;
  --green:#165B33; --navy:#0E2A47; --line:#eef0f2; --card:#f7f8f9;
  --radius:16px; --maxw:980px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}

/* ヘッダー（LP的に小さく・固定） */
header{
  position:sticky; top:0; z-index:20;
  background:#fff; border-bottom:1px solid var(--line);
}
.nav{max-width:var(--maxw); margin:auto; padding:10px 14px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; gap:10px; align-items:center; font-weight:800}
.brand-badge{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#30c26a,var(--green))}
.cta-head a{display:inline-block; padding:8px 12px; border-radius:12px; border:1px solid var(--green); color:#fff; background:var(--green); font-weight:700}

/* LPセクション共通 */
.container{max-width:var(--maxw); margin:auto; padding:0 14px}
section{padding:28px 0; border-bottom:1px solid var(--line)}
h1{font-size:clamp(22px,6vw,36px); line-height:1.25; margin:0}
h2{font-size:clamp(18px,5vw,28px); margin:0 0 10px}
.lead{color:var(--muted); margin-top:6px}

/* ヒーロー */
.hero{padding:18px 0 8px}
/* ヒーロー：グラデを維持しつつ背面に写真を敷く */
.hero-card{
  /* 上のレイヤー：半透明グラデーション / 下のレイヤー：写真 */
  background-image:
    linear-gradient(135deg, rgba(234,247,239,0.92), rgba(255,255,255,0.92)),
    url("assets/images/hero.jpg");
  background-size: 100% 100%, cover;   /* グラデは要素に合わせる／写真はカバー */
  background-position: center, center;
  background-repeat: no-repeat;

  border: 1px solid #d9eadf;
  border-radius: 18px;
  padding: 18px;
  display: grid;
  gap: 14px;
}

/* 写真の見え方を微調整したい場合の任意フィルタ */
@media (min-width: 640px){
  .hero-card{
    /* 彩度や明るさを少し抑えると文字が読みやすい */
    filter: saturate(0.95) contrast(0.98);
  }
}

.kpis{display:flex; gap:8px; flex-wrap:wrap}
.kpis span{padding:6px 10px; border:1px solid var(--line); background:#fff; border-radius:999px; font-size:14px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; font-weight:700}
.btn-primary{background:var(--green); color:#fff; border-color:var(--green)}

/* セクションヘッダー（LP風帯） */
.band-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.band-title .more{font-size:14px}

/* スライダー（横スクロール＋ボタン＋ドット） */
.carousel{ position:relative; }
.track{
  display:flex; gap:12px; overflow:hidden; scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch; /* iOSバウンス対策 */
}
.card{
  min-width:82%;
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.card .body{padding:12px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
.card .go{margin-top:8px; display:inline-block; font-weight:700}

/* ===== サムネイル用の固定枠 ===== */
.card-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;      /* 縦横比：4:3 固定。必要なら 16 / 9 などに変更可 */
  overflow: hidden;
  background: #f3f4f6;      /* 読み込み前の背景 */
}

.card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 枠いっぱいに表示して、はみ出す分はトリミング */
  display: block;
}

/* ABOUT セクションの写真用：同じく枠を固定 */
figure.photo-fixed{
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

figure.photo-fixed img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* PCではカード幅を縮めて複数見せる（でも縦読み崩さない） */
@media(min-width:900px){
  .card{min-width:31%}
}

/* スライダーボタン */
.navbtn{
  position:absolute; top:40%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; cursor:pointer; user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.navprev{left:-6px}
.navnext{right:-6px}
/* モバイルで指先の誤タップ減らす余白 */
@media(max-width:420px){ .navprev{left:2px} .navnext{right:2px} }

/* ドット */
.dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.dot{width:8px; height:8px; border-radius:50%; background:#d1d5db}
.dot.active{background:var(--green)}

/* セクション内テキスト */
.muted{color:var(--muted)}

/* ===== About section (overview/producer/method) ===== */
.grid{display:grid; gap:16px}
@media(min-width:840px){
  .grid-2{grid-template-columns:1.2fr .8fr}
}

figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
figure img{display:block;width:100%;height:auto}
figure figcaption{font-size:.9rem;color:var(--muted);padding:8px 10px}

/* 表（テーブル）の見た目調整：ベージュ背景でも見やすく */
table{
  width:100%;
  border-collapse:collapse;
  margin:8px 0 12px;

  background:#ffffff;             /* 表の中だけ白にしてカードっぽく */
  border:1px solid #d4d4d8;       /* 枠線を少しだけ濃く */
  border-radius:12px;             /* 角をほんのり丸く */
  overflow:hidden;                /* 角丸の外にはみ出さないように */
}

th,
td{
  padding:10px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  font-size:0.95rem;
}

/* ヘッダー行は少し濃いグレー背景に */
th{
  background:#e5e7eb;
  font-weight:600;
}

/* 偶数行にうっすら縞模様を付けて行を追いやすくする */
tbody tr:nth-child(even){
  background:#f9fafb;
}


/* CTA band for About */
.band{
  margin-top:24px;
  background:linear-gradient(135deg,#0E2A47,#165B33);
  color:#fff;
  border-radius:18px;
  padding:20px;
  display:grid;
  gap:12px;
}
.band .btn{border:1px solid #fff;background:#fff;color:#0E2A47}
.band .btn + .btn{margin-left:8px}

/* ===== CONTACT (LP 内) ===== */
#contact .contact-narrow { max-width: 900px; }
#contact .contact-grid { align-items: start; }
@media (min-width: 860px){
  #contact .grid-2 { grid-template-columns: 1.05fr .95fr; }
}
#contact .note { color: var(--muted); font-size: .92rem; }
#contact .btns { display:flex; gap:10px; flex-wrap:wrap; }

/* PC・タブレット用 埋め込みフォーム */
.form-embed-desktop iframe{
  display:block;
  width:100%;
  max-width: 760px;
  height: 900px;         /* 内部スクロールが出にくい程度の高さ */
  border:0;
  border-radius: 12px;
  background:#fff;
}

/* スマホ用：デフォルトでは非表示 */
.form-embed-mobile{
  display:none;
}

/* スマホ幅では埋め込みを隠し、「フォームを開く」ボタンだけ表示 */
@media (max-width: 640px){
  .form-embed-desktop{
    display:none;
  }
  .form-embed-mobile{
    display:block;
    margin-top: 8px;
  }
}


/* Googleフォームの埋め込みを確実に表示 */
.form-embed iframe{
  display:block;
  width:100%;
  min-height: 1000px; /* 目安。長いフォームなら 1400〜1800px に */
  border:0;
}
@media (max-width:480px){
  .form-embed iframe{ min-height: 1200px; }
}

/* ===== 標準フッター（ページ末・中央寄せ・左寄り防止） ===== */
#site-footer { width:100%; }
.site-footer{
  border-top:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  width:100%;
  flex-shrink:0;
}
.site-footer .inner{
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
  padding:24px 14px;      /* 80px は使いません */
  display:flex;
  flex-direction:column;
  align-items:center;     /* 横方向中央 */
  gap:10px;
  text-align:center;
}
.site-footer nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center; /* リンク列を中央に */
}
.site-footer nav a{ color:var(--navy); font-weight:600 }
.site-footer small{ color:#9aa3ad }

/* ===== ヘッダーブランド：アイコン＋ロゴ画像 ===== */
.brand{ display:flex; align-items:center; }
.brand-link{
  display:flex; align-items:center; gap:10px;
  line-height:1; /* 画像上下のズレ防止 */
}
.brand-icon{
  height: clamp(24px, 4.5vw, 32px);
  width: auto;
  display:block;
}
.brand-logo{
  height: clamp(18px, 3.8vw, 28px);
  width: auto;
  display:block;
}

/* 旧バッジは使わない（念のため無効化） */
.brand-badge{ display:none !important; }

/* 位置（スマホ〜タブレット共通） */
.chat-widget{
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 120;
  font-size: 14px;
  color: var(--fg);
  font-family: inherit;
}

/* 今すぐ購入：右下の位置（スマホ〜タブレット） */
/* → チャットより 2px だけ下げて、見た目の高さをそろえる */
.buy-fab{
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));  /* ここを 12px → 10px に */
  z-index: 100;
}

/* PC 幅では左右とも 20px 付近だが、購入ボタンを 2px 下げる */
@media (min-width: 1024px){
  .chat-widget{
    left: max(20px, env(safe-area-inset-left));
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .buy-fab{
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));  /* 20px → 18px に */
  }
}

/* 左右フローティングボタン共通デザイン（今すぐ購入 / サイトに質問する） */
.chat-toggle,
.buy-fab .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;                    /* 高さ・太さを完全共通に */
  border-radius: 999px;
  border: 1px solid var(--green);
  background: rgba(255, 255, 255, 0.5); /* 半透明の白 */
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

/* チャット本体パネル */
.chat-panel{
  display: none;                /* is-open が付いたときだけ表示 */
  flex-direction: column;
  width: min(320px, 92vw);
  max-height: 60vh;
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fffaf4;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  overflow: hidden;
}
.chat-panel.is-open{
  display: flex;
}

/* ヘッダー */
.chat-header{
  padding: 8px 10px;
  background: #f2e2cf;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-header-title{
  font-size: 13px;
  font-weight: 700;
}
.chat-header-sub{
  font-size: 11px;
  color: var(--muted);
}
.chat-close{
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

/* メッセージ表示エリア */
.chat-messages{
  padding: 10px;
  background: #fff;
  flex: 1;
  overflow-y: auto;
}
.chat-msg{
  padding: 6px 9px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.chat-msg.bot{
  background: #f3f4f6;
  align-self: flex-start;
}
.chat-msg.user{
  background: #e0f2e9;
  align-self: flex-end;
}

/* 入力欄 */
.chat-form{
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line);
  background: #fffdf8;
}
.chat-input{
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.chat-send-btn{
  border-radius: 999px;
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  font-weight: 700;
  cursor: pointer;
}
.chat-send-btn:disabled{
  opacity: .5;
  cursor: default;
}

/* スマホで入力欄をタップしても拡大されないようにする */
@media (max-width: 600px){
  .chat-input{
    font-size: 16px;       /* ここが重要です：16px以上にする */
    line-height: 1.4;
  }
  .chat-send-btn{
    font-size: 15px;
  }
}