:root{
  --fg:#111; --bg:#fff; --muted:#666; --line:#eaeaea;
  --ink:#0b57d0; --panel:#e8f3fb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--fg);background:var(--bg)}
/* PCは全幅、モバイルは既存の各所のpaddingでガターを確保 */
.container{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

/* 固定ヘッダー */
header.fixed{position:fixed;top:0;left:0;width:100%;background:#fff;border-bottom:1px solid var(--line);z-index:999}
.header-inner{max-width:2000px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:6px 12px}
header a.logo-link{display:inline-block}
header img.logo{width:160px;height:auto}
header .tagline{color:#333;line-height:1.4;font-size:14px}
.spacer{height:0px}

/* 表示切替ユーティリティ */
.pc-only { display:block !important; }
.sp-only { display:none  !important; }

@media (max-width: 720px){
.pc-only { display:none  !important; }   /* ← SPではPC用を消す */
.sp-only { display:block !important; }   /* ← SPでは本文の方を出す */
  .tagline.sp-only {
    margin-top: 10px;        /* 上余白をなくす */
    margin-left: 10px;    /* 左に余白をつける */
    margin-right: 10px;   /* 右もそろえて入れるとバランス◎ */
    font-size: 13px;      /* サイズを小さく（お好みで12px〜14px） */
    line-height: 1.2;     /* 行間を少し詰める */
  }
}


/* ヒーロー */
.hero{border:1px solid var(--line);border-radius:0;overflow:hidden;margin-left:0;margin-right:0}
.hero img{width:100%;height:auto;display:block}

/* 見出し（デフォ＝PC想定：改行なし） */
.hook { 
  text-align: center; 
  margin: 90px 0 90px; 
}
.catch { 
  font-size: 25px; 
  margin: 0px; 
  font-family: "Times New Roman", "Hiragino Mincho ProN", "游明朝", serif;
}
.catch-main, .catch-sub { display: inline; }   /* ← 同一行 */

@media (max-width: 720px){
  /* SPでは改行ありにする */
  .catch-main { display: block; }
  .catch-sub  { display: block; margin-top: 4px; }
  .hook { margin: 40px 0 40px; }  /* 見出しエリアの余白を詰める */
  .catch { font-size: 18px; } /* 文字サイズを小さく */
  .catch-sub { margin-top: 2px; }  /* サブ行の余白をさらに調整したい場合 */
}


/* Itemsパネル */
.items-panel{
  background:var(--panel);
  border-radius:0;
  padding:45px 18px 18px;
  margin:20px 0 120px;   /* ← 下だけ大きめ余白を追加 */
  margin-left:0; 
  margin-right:0;
  overflow: hidden; /* ← マージンの相殺を防止 */
}
.items-panel h3{
  font-size:36px;
  font-family:"Times New Roman",serif;
  margin:45px 40px 30px;
  font-weight:bold;
}

/* 商品リスト：PCは3カラムグリッド */
.items{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 24px;             /* ← 商品同士の間隔を少し広げてもOK */
  padding: 0 60px;       /* ← ★ ページ左右の余白をここで調整 */
  box-sizing: border-box;
}

/* 商品カード：＋を削除した確定版 */
.card{
  border:none;
  border-radius:0px;
  overflow:hidden;
  background:transparent;
  text-align:center;
  display:block;            /* 縦積みにする */
  margin:0;        /* 左右に余白をつける（PC/モバイル共通） */
}
.card img {
  display:block; 
  width:100%; 
  height:auto; 
  object-fit:contain;  
  background:transparent; 
}
.card .meta{
  position:static;          /* ← absolute をやめる */
  padding:12px 10px;
  background:transparent;
  margin:0;
}
.card .meta .name{font-weight:700;margin-bottom:6px}
.card .meta .desc{color:#555;font-size:16px;line-height:1.5}


/* SP：横スクロールに切替 */
@media (max-width: 720px){
  .header-inner{grid-template-columns:1fr}
  header img.logo{width:120px;max-width:120px}
  .spacer{height:88px}

  /* 横スクロール */
  .items{
    display:flex;           /* 行方向に並べる */
    overflow-x:auto;        /* 横スクロール */
    gap:12px;
    padding:0 12px;          /* ← 横スクロール全体の左右余白 */
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;  /* スクロールスナップ */
  }
  .card{ min-width:78%; margin:0; }  
  .card img{
    width:100%;
    height:auto;
    object-fit:contain;
    max-height:240px;
}
  .items-panel h3{font-size:26px}
}

/* 横スクロールのヒント（PCでは非表示） */
.scroll-hint{
  margin:10px 30px 30px;
  color:#666;
  font-size:12px;
  display:none;
}
@media (max-width:720px){
  .scroll-hint{display:block;}
}

/* 既存のfooter定義を置き換え */
footer { background: transparent; }         /* 全幅の背景や線は付けない */
.footer-inner{
  max-width: 900px;                         /* 本文と同じ幅に限定 */
  margin: 40px auto 0;                      /* 上に余白 + 中央寄せ */
  padding: 16px 0;
  border-top: 1px solid var(--line);        /* 線は“内側”だけ */
  color: #888;
  font-size: 12px;
  text-align: center;
}


/* ---- PC画面で左右余白が出ないように全幅強制 ---- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* コンテナ（TOP・THANKS・PRODUCT共通）を全幅に */
.container,
.thanks-wrap,
.product-page {
 width: 100%;
 max-width: 100%;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

/* 商品ページのflexも同様に全幅へ */
.p-flex {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* hero画像を完全に端まで伸ばす */
.hero {
 width: 100%;
 margin: 0;
 padding: 0;
}

/* フッターも端まで */
footer,
.footer-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}


/* === thanksページ横ずれ修正版 === */

/* 全体リセット */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* 横スクロールを防ぐ */
}

/* 各ページ共通のコンテナ類を全幅化 */
.container,
.thanks-wrap,
.product-page,
.items-panel,
.hero,
footer,
.footer-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: static;
  left: auto;
  right: auto;
  box-sizing: border-box;
}

/* hero画像は自然な全幅表示 */
.hero img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* footerを全幅＋上線 */
footer {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.footer-inner {
  text-align: center;
  color: #888;
  font-size: 12px;
}