/* ===== 基本設定（白背景・影なし・整理されたSEO構造） ===== */
:root{
  --text:#111;
  --muted:#6b7280;
  --bg:#fff;
  --soft:#f3f4f6;           /* CTA帯などの薄グレー */
  --link:#111;
  --max:1200px;
  --radius:12px;            /* 画像などの角丸統一 */
  --btn-radius:6px;         /* 角丸小さめ（ほぼ四角） */
  --header-h:60px;
  --line:#e5e7eb;           /* 枠線色（見本相当） */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic","游ゴシック体",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.8;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}

/* ===== セクション共通 ===== */
section{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(28px,4vw,64px) clamp(16px,4vw,32px);
}
h1,h2,h3{margin:0 0 .6em 0; color:#111; line-height:1.25}
h1{font-size:clamp(32px,5vw,56px)}
h2{font-size:clamp(22px,3.2vw,34px)}
h3{font-size:clamp(16px,2vw,18px)}

/* ===== 固定ヘッダー ===== */
.site-header{
  position:fixed; top:0; left:0; right:0;
  background:#fff;
  z-index:1000;
}
.site-nav{
  max-width:var(--max);
  margin:0 auto;
  padding:12px clamp(16px,4vw,32px);
  display:grid;
  grid-template-columns:auto 1fr auto; /* 左ロゴ | メニュー | CTA */
  align-items:center;
  gap:16px;
}
.site-logo{
  font-weight:700;
  letter-spacing:.08em;
  white-space:nowrap;
  font-size:clamp(18px, 2vw, 20px); /* 少しだけ大きく */
}
.site-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:flex-end; align-items:center;
  gap:clamp(16px,3vw,36px); flex-wrap:wrap;
}
/* ヘッダーCTAも角丸を全体と統一 */
.nav-cta{
  padding:10px 16px;
  border-radius:var(--btn-radius);
  color:#fff; background:#000; white-space:nowrap;
}
main{padding-top:var(--header-h)} /* ヘッダー高さ分の余白 */

/* 狭幅：2段（上=ロゴ+CTA、下=メニュー横スクロール） */
@media (max-width: 860px){
  .site-nav{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "logo cta"
      "menu menu";
  }
  .site-logo{grid-area:logo}
  .site-nav ul{grid-area:menu; justify-content:flex-start; overflow-x:auto; padding-bottom:6px}
  .nav-cta{grid-area:cta}
}

/* ===== Hero ===== */
/* H1と説明文は近め／説明文とボタンは広め。ボタンと画像の間隔も広げる */
.hero h1{margin-bottom:.25em}
.hero .subcopy{
  color:var(--muted);
  margin:0 0 28px;            /* 説明文→ボタンの間隔を広めに */
}
.actions{margin:0 0 28px}      /* ボタン→画像の間隔をさらに広げる */
.hero-visual{margin:0}
.hero-visual img{border-radius:var(--radius)}
.btn{
  display:inline-block; padding:12px 20px;
  border-radius:var(--btn-radius);
  background:#000; color:#fff; font-weight:700;
}

/* ===== Features (3 columns) ===== */
.features{
  display:grid; gap:clamp(20px,3vw,32px);
  grid-template-columns:repeat(3,1fr);
}
.features > h2{grid-column:1/-1}

/* 画像の段差防止：正方形で統一 */
.features .feature figure{
  margin:0; border-radius:var(--radius); overflow:hidden;
  aspect-ratio: 1 / 1;
}
.features .feature img{
  width:100%; height:100%; object-fit:cover;
}
.feature h3{margin:.9em 0 .35em}
.feature p{margin:0}

@media (max-width: 980px){
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 620px){
  .features{grid-template-columns:1fr}
}

/* ===== Comfort（画像をH2の高さから右端いっぱいまで表示） ===== */
.comfort{
  display:grid; gap:clamp(20px,3vw,36px);
  grid-template-columns:1.1fr 1fr;      /* 左テキスト／右画像 */
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "title image"
    "text  image";
  align-items:start;
}
.comfort > h2{grid-area:title}
.comfort-text{grid-area:text}
.comfort-image{grid-area:image; margin:0}
.comfort-image img{
  width:100%; height:100%;
  border-radius:var(--radius);
  object-fit:cover;          /* 右端いっぱい・長方形で見せる */
}
.comfort-image{min-height:420px}

.btn-row{display:flex; gap:12px; flex-wrap:wrap}
.btn-sub{
  display:inline-block; padding:12px 20px;
  border-radius:var(--btn-radius);
  background:#e5e5e5; color:#111;
}

/* 狭幅：画像→テキスト→ボタン（既定のDOM順） */
@media (max-width: 900px){
  .comfort{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "title"
      "image"
      "text";
  }
  .comfort-image{min-height:auto}
}

/* ===== Lifestyle (2 tiles) ===== */
.lifestyle{
  display:grid; gap:clamp(20px,3vw,32px);
  grid-template-columns:repeat(2,1fr);
}
.lifestyle > h2{grid-column:1/-1}
/* 下の2カラムはやや小さめの横長 */
.lifestyle .tile figure{
  margin:0; border-radius:var(--radius); overflow:hidden;
  aspect-ratio: 16 / 9;
}
.lifestyle .tile img{
  width:100%; height:100%; object-fit:cover;
}
.tile h3{margin:.9em 0 .35em}
.tile p{margin:0}
@media (max-width: 780px){
  .lifestyle{grid-template-columns:1fr}
}

/* ===== Voices（3行で揃える・枠近傍だけ極薄フェード） ===== */
.voices{
  display:grid; gap:clamp(16px,2.5vw,24px);
  grid-template-columns:repeat(3,1fr);
}
.voices > h2{grid-column:1/-1}
.voice{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  background:
    linear-gradient(to right, rgba(0,0,0,.02), rgba(0,0,0,0)) left/12px 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,.02), rgba(0,0,0,0)) right/12px 100% no-repeat,
    linear-gradient(to bottom,rgba(0,0,0,.02), rgba(0,0,0,0)) top/100% 12px no-repeat,
    linear-gradient(to top,   rgba(0,0,0,.02), rgba(0,0,0,0)) bottom/100% 12px no-repeat,
    #fff;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box;
}
.voice p{
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;     /* 3行に整える */
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width: 900px){
  .voices{grid-template-columns:1fr}
}

/* ===== CTA band ===== */
.cta-band{
  width:100%;
  background:var(--soft);
  display:grid;
  gap:16px;
  grid-template-columns:1fr auto;
  align-items:center;
}
.cta-band h2{ text-align:center; margin:0; }
.cta-actions{margin:0; display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
/* CTA帯のボタンも統一角丸 */
.cta-band .btn, .cta-band .btn-sub{ border-radius:var(--btn-radius); }

@media (max-width: 820px){
  .cta-band{grid-template-columns:1fr}
  .cta-band h2{text-align:center}
  .cta-actions{justify-content:center}
}

/* ===== Footer（見本どおり：左=ブランド / 右=3カラム右寄せ。はみ出し防止） ===== */
.site-footer{background:#fff}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(36px,5vw,56px) clamp(16px,4vw,32px);

  /* 左右2分割：左は固定気味、右は3カラムを収める幅（合計が1200以内に収まる） */
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(780px, 2fr);
  column-gap: clamp(48px,6vw,72px);
  align-items:start;
}

/* 左ブロック（ブランド） */
.footer-brand .brand{
  font-weight:800;
  letter-spacing:.06em;
  margin:0 0 .5em 0;
  text-align:left;
}
.footer-brand .tagline{
  margin:.2em 0 1.1em 0;
  color:var(--muted);
  white-space:nowrap;          /* ← 折り返さない */
}
.sns{
  list-style:none; padding:0; margin:0;
  display:flex; gap:14px; flex-wrap:wrap;
}
.sns a{color:#555; font-size:22px; transition:color .2s ease}
.sns a:hover{color:#000}

/* 右ブロック（3カラム）。右寄せ・折り返し禁止・最小幅260pxで安定 */
.footer-links{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap:20px;
  justify-content:end;        /* コンテナ内で右側に寄せる */
  justify-items:end;          /* 各列の内容も右寄せ */
  text-align:right;
}
.footer-links section b{display:block; margin-bottom:.4em; white-space:nowrap}
.footer-links ul{list-style:none; padding:0; margin:0}
.footer-links li{margin:.3em 0}
.footer-links a{white-space:nowrap}
.footer-links a:hover{text-decoration:underline}

/* 幅が足りなくなったら 3 → 2 → 1 列へ。はみ出しを防止 */
@media (max-width: 1100px){
  .footer-inner{
    grid-template-columns: minmax(320px, 1fr) minmax(520px, 1fr);
  }
  .footer-links{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    justify-content:end;
  }
}
@media (max-width: 780px){
  .footer-inner{
    grid-template-columns:1fr;
    row-gap:32px;
  }
  .footer-links{
    grid-template-columns:1fr;
    justify-content:start;
    justify-items:start;
    text-align:left;
  }
}