@charset "UTF-8";
:root{
  --main:#7c5335;          /* ボタン色など共通カラー */
  --bg:#faf7f3;            /* HERO 背景 */
  --radius:10px;           /* ボタン角丸 */
  --shadow:0 4px 12px rgba(0,0,0,.06);
}

/* HERO 全体のレイアウト －－－－－－－－－－ */
.hero-typo{
  position:relative;
  height:95vh;                          /* ほぼ全画面 */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:var(--bg);
}

/* 背景を横に流すマルキー文字 －－－－－ */
.marquee{
  position:absolute;
  top:40%; left:0;
  width:200%;                           /* 2 倍幅でループ */
  display:flex; white-space:nowrap;
  pointer-events:none;
  font:900 18vw/1 Poppins,sans-serif;
  color:#ece8e3;
  animation:scroll 18s linear infinite;
}
.marquee span{padding-right:2vw;}

/* 中央コピー －－－－－－－－－－－－－－ */
.hero-copy{
	position:relative; z-index:1; max-width:680px; padding:0 1.2rem;
}
.hero-copy h1{
  font:600 2.4rem/1.25 Poppins,"Noto Sans JP",sans-serif;
}

/* 主要 CTA ボタン（任意） －－－－－－－ */
.cta.primary{
  display:inline-block; margin-top:1.4rem;
  padding:.75rem 1.6rem;
  background:var(--main); color:#fff;
  border-radius:var(--radius);
  font-weight:600; text-decoration:none;
  transition:.2s;
}
.cta.primary:hover{
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

/* マルキーのループアニメーション */
@keyframes scroll{
  0%   {transform:translateX(0);}
  100% {transform:translateX(-50%);}
}

/* スマホで文字サイズを少し小さく */
@media (max-width:480px){
  .marquee       {font-size:24vw;}
  .hero-copy h1{
	font-size:1.6rem;
}
}

/* “動きを減らす”環境ではアニメ停止 */
@media (prefers-reduced-motion:reduce){
  .marquee{animation:none;}
}