/* 竹若 FV/演出CSS（Claude Designエクスポートのインラインstyleを抽出） */
html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: #0E120F; }
  /* 静かなフェードイン（スクロール演出） */
  /* スクロール演出: この描画環境は CSS アニメ/トランジション/IntersectionObserver が発火しないため、
     コンテンツは常時可視を基底とする（デザインシステムの「モーションは控えめ」に準拠）。 */
  .anim-rise { opacity: 1; }

  /* 左右2カラムの写真：画面内に入ったら clip-path で下から上へマスクが開く（1回・上品に）。
     基底（motion-on 無し / 非対応環境）は常時可視。reduced-motion では無効。 */
  .motion-on [data-mask] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: clip-path;
  }
  .motion-on [data-mask].mo-mask-in { clip-path: inset(0 0 0 0); }
  @media (prefers-reduced-motion: reduce) {
    .motion-on [data-mask] { clip-path: none !important; transition: none !important; }
  }

  /* FV オープニング：コピーが左から1文字ずつ静かに現れ、出揃った後に
     淡い金色の光沢が文字の上を左→右へ一度だけ流れる（text shine）。
     基底はすべて可視。JS が読み込み時に .fv-in を付与した時だけ再生する。 */
  .kv-copy { position: relative; }
  .kv-line { display: block; }

  /* 登場：左から順に1文字ずつ、フェード＋わずかに上へ（ゆっくり上品に） */
  .kv-char { display: inline-block; opacity: 1; }
  @keyframes fvChar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .fv-in .kv-char {
    opacity: 0;
    animation: fvChar .6s cubic-bezier(.2,.6,.2,1) both;
    animation-delay: calc(.25s + var(--i) * .055s);
  }

  /* 添え書き（121年／本場／社名）はコピーが出揃った後に静かに現れる */
  @keyframes fvRise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  .fv-in .kv-meta { animation: fvRise .9s cubic-bezier(.2,.6,.2,1) 1.5s both; }

  /* 光沢：同一の文字を重ね、横長（200%）の多色グラデーションで文字自体を塗り、
     background-position を左→右へゆっくり動かして、白→淡クリーム→緑→淡黄→橙の光沢を
     文字の上に一度だけ流す。最後は白系で静かに止める。 */
  .kv-shine {
    position: absolute; left: 0; top: 0;
    pointer-events: none; user-select: none;
    background-image: linear-gradient(90deg, #ffffff, #ffffdf 19%, #5fd193 44%, #fff88c 75%, #c77900);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    opacity: 0;
  }
  .fv-in .kv-shine { animation: fvShine 1.0s ease-in-out 1.6s both; }
  @keyframes fvShine {
    0%   { background-position: 0% 0;   opacity: 0; }
    14%  { opacity: 1; }
    85%  { background-position: 100% 0; opacity: 1; }
    100% { background-position: 100% 0; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fv-in .kv-char, .fv-in .kv-meta { animation: none; opacity: 1; }
    .kv-shine { display: none; }
  }

/* ============================================================
   PHP版の制御CSS（Reactの状態管理→クラス切替に置換）
   ============================================================ */

/* ---- スマホメニュー：表示切替（Reactの条件レンダリング→ .is-open） ---- */
.tw-menu-overlay { display: none; }
.tw-menu-overlay.is-open { display: block; }
@media (min-width: 1024px) { .tw-menu-overlay { display: none !important; } }

/* ---- ヘッダー：背景切替（ヒーロー上=透過/白字 → スクロールで paper/墨字） ---- */
.tw-header { background: transparent; transition: background-color .5s ease, border-color .5s ease; border-bottom: 1px solid transparent; }
.tw-header:not(.is-hero) { background: rgba(246,243,236,.95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-bottom-color: #DAD5C8; }
/* solid（既定）の文字色はマークアップ側（Tailwind）。hero時に上書き： */
.tw-header.is-hero .tw-h1     { color: #A7A89F; }
.tw-header.is-hero .tw-brand  { color: #EDEAE1; }
.tw-header.is-hero .tw-en     { color: #A7A89F; }
.tw-header.is-hero .tw-navlink{ color: #EDEAE1; }
.tw-header.is-hero .tw-navlink:hover { color: #FFFFFF; }
.tw-header.is-hero .tw-sep    { background: rgba(237,234,225,.3); }
.tw-header.is-hero .tw-action { border-color: rgba(237,234,225,.4); color: #EDEAE1; }
.tw-header.is-hero .tw-toggle { color: #EDEAE1; }

/* ---- FVキャッチの改行制御：PCは2行 / スマホ(≤639px)は3行 ---- */
/* 「食の当たり前を」と「支える。」の間の改行を、スマホのときだけ有効化 */
.kv-br-sp { display: none; }              /* PC：改行しない → 食の当たり前を支える。（2行目） */
@media (max-width: 639.98px) {
  .kv-br-sp { display: inline; }          /* スマホ：改行する → 3行 */
}

/* ============================================================
   お知らせ本文（.tw-content）の記事スタイル
   ※Tailwindのpreflightで p/h/ul の余白がリセットされるため明示指定
   ============================================================ */
.tw-content > * + * { margin-top: 1.6em; }           /* 要素間の基本リズム */

.tw-content p { line-height: 2.0; }

/* 見出し：レベルで装飾の強さを段階化（目立つ順 H2 > H3 > H4） */

/* H2＝最も目立つ：うすいグリーンの背景帯＋左に濃いグリーンの太アクセント */
.tw-content h2 {
  font-family: "Noto Serif JP", serif; font-weight: 600;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.5; letter-spacing: .04em;
  color: #16291F; margin-top: 2.6em;
  background: rgba(31, 58, 44, .07);
  border-left: 5px solid #1F3A2C;
  padding: .7em .9em .7em 1em;
  border-radius: 0 2px 2px 0;
}

/* H3＝中間：明朝＋グリーンの下線 */
.tw-content h3 {
  font-family: "Noto Serif JP", serif; font-weight: 600;
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55; letter-spacing: .04em;
  color: #1A1C1A; margin-top: 2.2em;
  display: inline-block; padding-bottom: .3em;
  border-bottom: 2px solid #1F3A2C;
}

/* H4＝控えめ：左の細い縦罫 */
.tw-content h4 {
  font-family: "Noto Serif JP", serif; font-weight: 600;
  font-size: clamp(15.5px, 1.9vw, 18px); line-height: 1.6; letter-spacing: .04em;
  color: #1A1C1A; margin-top: 2em;
  padding-left: 12px; border-left: 3px solid #8FA890;
}

.tw-content h2 + *, .tw-content h3 + *, .tw-content h4 + * { margin-top: 1em; }

/* リスト */
.tw-content ul, .tw-content ol { padding-left: 1.4em; }
.tw-content ul { list-style: none; padding-left: 0; }
.tw-content ul > li { position: relative; padding-left: 1.3em; line-height: 1.9; margin-top: .5em; }
.tw-content ul > li::before {
  content: ""; position: absolute; left: 2px; top: .85em;
  width: 7px; height: 7px; background: #1F3A2C; border-radius: 1px;
}
.tw-content ol { list-style: decimal; }
.tw-content ol > li { line-height: 1.9; margin-top: .5em; padding-left: .3em; }

/* 引用 */
.tw-content blockquote {
  border-left: 3px solid #DAD5C8; padding: .2em 0 .2em 1.2em; color: #55534d;
  font-family: "Noto Serif JP", serif;
}

/* リンク */
.tw-content a { color: #1F3A2C; border-bottom: 1px solid #DAD5C8; transition: border-color .3s; }
.tw-content a:hover { border-color: #1F3A2C; }

/* 画像 */
.tw-content img { max-width: 100%; height: auto; display: block; margin: 2em 0; }
.tw-content figure { margin: 2em 0; }
.tw-content figcaption { font-size: 13px; color: #8A857A; margin-top: .6em; }

/* 太字・区切り線 */
.tw-content strong { font-weight: 700; }
.tw-content hr { border: none; border-top: 1px solid #DAD5C8; margin: 2.4em 0; }

/* ご挨拶：冒頭キャッチ「品物に向き合い、人に尽くす。」のサイズ
   本文1行目の横幅に合わせる（デスクトップで約44px、狭い画面は縮小） */
.msg-catch { font-size: clamp(32px, 5vw, 60px); }

/* 会社概要：4画像グリッドの右上画像を、左上画像と下端で揃える（md以上）
   （旧：md:mt-[...] による下げ配置を撤去し、行の下端に揃える） */
@media (min-width:768px){
  .tw-comp-topright { align-self: flex-end; }
}

/* ご挨拶：冒頭キャッチ＋代表写真の2カラム（md以上で横並び／モバイルは縦積み） */
.msg-hero { max-width:980px; margin-left:auto; margin-right:auto; }
.msg-hero-text { text-align:center; }
.msg-hero-img { position:relative; overflow:hidden; width:100%; aspect-ratio:4/5; margin-top:clamp(28px,6vw,40px); }
@media (min-width:768px){
	.msg-hero { display:grid; grid-template-columns:1fr 0.62fr; gap:clamp(36px,5vw,72px); align-items:center; }
	.msg-hero-text { text-align:left; }
	.msg-hero-img { margin-top:0; }
}
/* ご挨拶：さつまいも写真の右寄せ幅（md以上で58%） */
@media (min-width:768px){ .msg-imo-w { width:58%; } }