/* クロワッサンたい焼き たいこちゃん（#ohama-taiko）— こちらで足した見た目（手で直す。taiko.css は tools/import_taiko.py が作るので触らない。D-211） */

/* 共通の site.css の見出し（明朝・字間・行間・余白）と段落の余白の決まりが本文に入らないように、渡された版の土台（ブラウザの既定）に戻す。
   :where で軽くして、渡された版の CSS（taiko.css）の決まりが必ず勝つようにする */
#ohama-taiko :where(h1,h2,h3,h4,h5,h6){font-family:inherit;line-height:inherit;letter-spacing:inherit;font-weight:bold}
#ohama-taiko :where(h1){font-size:2em;margin:.67em 0}
#ohama-taiko :where(h2){font-size:1.5em;margin:.83em 0}
#ohama-taiko :where(h3){font-size:1.17em;margin:1em 0}
#ohama-taiko :where(h4){font-size:1em;margin:1.33em 0}
#ohama-taiko :where(p){margin:1em 0}
/* 渡された版は html の行間 1.5 が本文の土台（共通の body は 1.9） */
#ohama-taiko{line-height:1.5}

/* ヒーローの高さは、共通シェルのヘッダーの高さ（site.css の --header-h）を引く（渡された版は自前のヘッダー 99px）。スマホは渡された版のまま（高さは中身なり） */
#ohama-taiko .tk-hero{height:calc(100svh - var(--header-h))}
@media(max-width:760px){
  #ohama-taiko .tk-hero{height:auto}
}

/* 「まず、音がおいしい。」の写真（スクロールの間だけ貼り付く）は、共通ヘッダーの下に貼る */
#ohama-taiko .tk-crunch-sticky{top:var(--header-h);height:calc(100svh - var(--header-h))}
@media(prefers-reduced-motion:reduce){
  #ohama-taiko .tk-crunch-scene{height:calc(100svh - var(--header-h))}
}

/* ページ内のリンクで飛んだとき、見出しが共通ヘッダーの下に隠れないように */
html:has(#ohama-taiko){scroll-padding-top:calc(var(--header-h) + 16px)}

/* スマホの「51万匹突破」の「破」だけが次の行に落ちる（渡された版から。真ん中の見出しが折り返さない指定のため、左の列が狭くなっていた）。
   3 列を同じ幅にして、見出しは 2 行まで折り返してよい形に。数字の単位は折り返さない */
@media(max-width:760px){
  #ohama-taiko .tk-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  #ohama-taiko .tk-facts span{white-space:normal;line-height:1.5;min-height:3em;padding:0 4px}  /* 2 行ぶんの高さをそろえて、数字の高さをそろえる */
  #ohama-taiko .tk-facts small{white-space:nowrap}
}

/* 下の道具（動きを止める・お取り寄せ）は、ほかの特集・NEXT STORY・共通フッターが見えている間は隠す（taiko.js が外枠に data-at-end を付ける） */
#ohama-taiko .tk-fixed-tools{transition:transform .28s ease,opacity .28s ease,visibility .28s}
#ohama-taiko[data-at-end=true] .tk-fixed-tools{transform:translateY(130%);opacity:0;visibility:hidden;pointer-events:none}