/* ===== Base / Colors ===== */
:root{
  --bg:#fffaf7; --edge:#fff1e8; --ink:#2b2321; --muted:#6f615b;
  --brand:#f8a36b; --accent-red:#b84646; --accent-green:#9cc091;
  --card:#ffffff; --line:#06C755; /* LINE公式カラー */
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.7;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-red);text-decoration:none}

/* ===== Layout ===== */
.container{width:min(1180px,96vw);margin-inline:auto;padding:16px}

/* ===== Header ===== */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:50}
.site-header .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{font-weight:800;text-decoration:none;color:var(--ink)}

/* ===== Hero ===== */
.hero{background:var(--edge);padding:32px 0}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 1fr; /* 左=メイン画像 右=コピー */
  gap:24px; align-items:center;
}
.hero h1{font-size:clamp(24px,4vw,40px);line-height:1.3;margin:.3em 0}
.hero p{color:var(--muted);margin:.6em 0 1.2em}

/* タイトル画像（PC/タブレットはコンテナ内で自然に） */
.hero-media img{width:100%;height:auto}
/* a をブロック化：クリック範囲＝画像全体 */
.hero-media a{display:block}

/* movie.gif（aで囲まれている前提） */
.hero-inner > a{
  grid-column:1 / -1;     /* 両カラムにまたがる */
  display:block;
  margin-top:20px;         /* 以前の余白感を維持 */
}
.hero-inner > a img[src$="movie.gif"]{
  width:100%; height:auto; display:block;
}

/* ===== CTA（LINEボタン） ===== */
.section-cta{display:flex;justify-content:center;align-items:center;gap:12px}
.btn{
  display:inline-block;padding:12px 18px;border-radius:10px;
  text-decoration:none;font-weight:800;border:1px solid transparent;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.btn-lg{padding:14px 22px;font-size:18px}

/* 大きめLINEボタン（全ページ共通） */
.btn-line{
  background:var(--line); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; font-weight:800; text-align:center;
  font-size:20px;           /* テキスト大きめ */
  padding:8px 96px;        /* 高さ・横幅を拡張 */
  border-radius:12px;
  letter-spacing: 0.6em;
}
.btn-line img{
  width:28px; height:28px; display:block; border:0;
}

/* ===== Footer ===== */
.site-footer{border-top:1px solid #eee;background:#fff}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* ===== Back to top ===== */
#backToTop{
  position:fixed; bottom:40px; right:20px; width:48px; height:48px;
  border:none; border-radius:50%; background:var(--line); color:#fff;
  font-size:20px; font-weight:bold; cursor:pointer; opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease, background .2s ease;
  z-index:200; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
#backToTop:hover{background:#05b44d}
#backToTop:focus{outline:3px solid rgba(255,255,255,.9); outline-offset:2px}
#backToTop.show{opacity:1; visibility:visible}

/* ===== Responsive ===== */
@media (max-width:960px){
  .hero{padding:20px 0}
  .hero-inner{grid-template-columns:1fr; gap:16px}

  /* タイトル画像：a 要素にフルブリード指定（画像は幅100%でOK） */
  .hero-media a{
    width:100vw; max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .hero-media img{width:100%; height:auto}

  /* movie.gif：アンカー自体をフルブリードに */
  .hero-inner > a{
    width:100vw; max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-top:20px;
  }

  /* コンテナの左右余白は少なめに */
  .container{padding:12px}
}

@media (max-width:480px){
  #backToTop{bottom:100px; right:12px; width:40px; height:40px; font-size:18px}
}