/* ame-yuki.com root — A「雨の余白」モックの実寸再現
   仕様はデザイン案モック .mock-a の原文・数値をそのまま拡大したもの。
   背景は単色、雨の筋・グラデーション・アニメーションは入れない。 */
:root{
  --bg:#f7f5ef;
  --ink:#1d1f22;
  --accent:#5b7a8c;
  --logo-sub:#8a9aa6;
  --line:#ddd6c6;
  --seal:#a33b32;
  --sub:#4a4d50;
  --foot:#9a9588;
  --mincho:"Zen Old Mincho", serif;
  --gothic:"Zen Kaku Gothic New", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--mincho);
  background:var(--bg);
  color:var(--ink);
}
.stage{
  position:relative;
  height:100dvh;
  overflow:hidden;
  /* 背景「原稿罫の気配」: 等間隔の極薄い縦罫を全面に敷く（区切り罫は置かない） */
  background:
    repeating-linear-gradient(90deg, rgba(105,95,70,.13) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #fbf9f3 0%, #f7f5ef 46%, #f2eee1 100%);
}

/* 左上ロゴ */
.logo{
  position:absolute;
  top:18px;left:22px;
  margin:0;
  font-family:var(--gothic);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
}
.logo span{color:var(--logo-sub)}

/* 右上: 縦書き見出し（2列目だけ色を変える） */
.headline{
  position:absolute;
  top:clamp(36px,8vh,84px);
  right:clamp(28px,5vw,72px);
  margin:0;
  writing-mode:vertical-rl;
  font-family:var(--mincho);
  font-size:clamp(30px,6.2vh,54px);
  font-weight:700;
  letter-spacing:.28em;
  line-height:1.9;
}
.headline em{
  font-style:normal;
  color:var(--accent);
}

/* 左下: 本文 */
.sub{
  position:absolute;
  left:22px;
  bottom:clamp(52px,9vh,88px);
  margin:0;
  max-width:46%;
  font-family:var(--mincho);
  font-size:clamp(13px,1.9vh,16px);
  line-height:2;
  letter-spacing:.08em;
  color:var(--sub);
}

/* 最下部: コピーライト */
footer{
  position:absolute;
  left:22px;
  bottom:16px;
  font-family:var(--gothic);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--foot);
}
footer small{font-size:10px}

@media (max-width:640px){
  /* スマホでは見出しを上段、本文を下段に置く（背景の原稿罫はそのまま） */
  .headline{
    font-size:clamp(26px,5.4vh,34px);
    top:9vh;
    right:20px;
  }
  .logo{left:16px}
  .sub{
    left:16px;
    max-width:82%;
    bottom:64px;
  }
  footer{left:16px;right:16px}
}