@charset "UTF-8";
/* ==========================================================================
   index-hero.css — トップページのヒーロー
   --------------------------------------------------------------------------
   書き出し（Claude Design）に手を入れず、インライン style の値をフックにして
   上から直す。フックの選び方は index-mobile.css の頭書きを参照。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 題字「雅語」の右端が切れる
   --------------------------------------------------------------------------
   原因は 2 つ重なっている。

   (a) line-height:1
       縦組み（writing-mode:vertical-rl）では line-height が
       **行ボックスの横幅**を決める。1 だと幅がちょうど 1em になり、
       字面が em を超える字（雅・語はどちらも右側が張る）は右が落ちる。

   (b) font-feature-settings:"palt"
       palt は「横組み用」のプロポーショナル字送り。縦組みの対応機能は vpal で、
       縦に palt を当てると字送りが実際の字面と合わなくなる。
       body 全体に効いているので、題字だけ外す。

   line-height を広げると行ボックスが横に広がり、字が収まる。 */
body > section h1{
  line-height:1.28 !important;
  font-feature-settings:normal !important;
  font-kerning:none;
  overflow:visible !important;
}

/* --------------------------------------------------------------------------
   2. 金色の縦線を消す
   --------------------------------------------------------------------------
   ヒーローには金の縦線が 2 系統ある。両方消す。

   (a) 左端の 1px の罫（中を光点が上下する）
       要素そのものは残し、見た目だけ消す。display:none にすると
       flex の gap ごと詰まって、題字の左インデントが変わってしまうため。
   (b) 96px ごとに引かれる薄い方眼 */
body > section [style*="width:1px"][style*="align-self:stretch"]{
  background:none !important;
}
body > section [style*="width:1px"][style*="align-self:stretch"] > *{
  display:none !important;
}
/* 色はパレット差し替えで変わるので、色に依らない部分でつかむ */
body > section [style*="repeating-linear-gradient(90deg"]{
  display:none !important;
}

/* --------------------------------------------------------------------------
   3. 背景をスクロールに連れて拡大させる
   --------------------------------------------------------------------------
   書き出しは 34 秒で往復する自動ズーム（gagoKen）だった。
   これを止め、拡大率は index-hero.js がスクロール量から決める。
   JS が動かない環境では等倍のまま静止する（欠けても成立する）。 */
body > section > img[src*="hero-camellia"]{
  animation:none !important;
  transform:scale(1);
  will-change:transform;
  backface-visibility:hidden;      /* iOS で拡大時に輪郭がざらつくのを防ぐ */
}