/* v9：紫紺テーマ（2026-10-11）
   主色＝紫紺、補助＝藤鼠、地＝象牙、注意＝臙脂。金はロゴ・細い区切り線・事業番号だけに使う。
   トップの1画面目は明るい地のまま、深い紫紺の面は下層ページの見出し・お問い合わせ帯・フッターに置く。
   style.css の後に読み込む上書き用。元に戻すときは build.py の theme-shikon.css の行を消す。 */
:root{
  --navy:#2B2440;        /* 紫紺：見出し・ボタン・番号 */
  --navy-deep:#1E1930;   /* 深い紫紺：フッター・最も強い文字 */
  --fuji:#5B4A72;        /* 藤鼠：補助色 */
  --fuji-pale:#CFC4DB;   /* 深い面の上の小さな文字 */
  --ivory:#F8F4EB;       /* 象牙：本文の地 */
  --bg:#F8F4EB;
  --soft:#F1ECF2;        /* 淡い藤：交互の面 */
  --line:#E2DAE3;
  --ink:#221E2B;
  --muted:#575163;
  --on-dark:#F3EEF6;
  --on-dark-muted:#CFC4DB;
}
body{background:var(--bg)}
.site-header{background:var(--ivory)}
@media (max-width:979px){.global-nav{background:var(--ivory)}}
.biz,.prog,.chips li,.regions li,.topic-list a,.partners a,.flow-box,.cert-table,.empty-box,.mail-box,.seminar,.notice{background:#FFFDF9}
.steps li::before{background:var(--fuji)}
.ring a:hover .node,.ring a:focus .node{stroke:var(--accent)}

/* ---------- ヘッダー：トップは当初どおり、模様の上に白い文字（スクロールすると象牙の地） ---------- */
.is-home .site-header.scrolled,.is-home .site-header.menu-open{background:var(--ivory);border-color:var(--line)}
.is-home .site-header .menu-btn{background:rgba(43,36,64,.35)}
.is-home .site-header.scrolled .menu-btn,.is-home .site-header.menu-open .menu-btn{background:var(--ivory)}
@media (min-width:980px){
  .is-home .site-header:not(.scrolled) .nav-member a{color:var(--on-dark)!important;border-color:var(--fuji-pale)}
  .is-home .site-header:not(.scrolled) .nav-member a:hover{background:var(--on-dark);color:var(--navy)!important}
}

/* ---------- ヒーロー：当初の細胞の網目（hero.webp）を、紫紺の地と金の線に置き換え ---------- */
/* 色の置き換えは build.py の TONE（暗いところ＝紫紺、明るい線＝金）。明るさは brightness で調整
   上に左から右へのグラデーションをかけ、左の文字を読みやすくする */
.hero{background:#4E407A}
.hero-bg{filter:url(#shikon-tone) brightness(1.08)}
.hero::after{background:
  radial-gradient(ellipse 60% 55% at 78% 32%,rgba(207,196,219,.14),transparent 70%),
  linear-gradient(90deg,rgba(43,36,64,.6) 0%,rgba(58,48,84,.24) 45%,rgba(58,48,84,0) 100%)}
.vbox{background:var(--ivory);color:var(--navy)}
.hero-card{background:var(--ivory)}
.hero-card span{color:var(--navy)}
.hero-links a:hover{border-bottom-color:var(--gold)}
.hero-name{color:var(--on-dark-muted)}

/* ---------- 下層ページ見出し：同じ模様を紫紺に染めて ---------- */
.page-head{color:var(--on-dark);background:#4E407A}
.page-head::before{filter:url(#shikon-tone);opacity:1}
.page-head::after{background:linear-gradient(90deg,rgba(43,36,64,.72),rgba(58,48,84,.15)),linear-gradient(0deg,rgba(201,164,74,.6),rgba(201,164,74,.6)) left bottom/100% 1px no-repeat}
.page-head .label{color:var(--fuji-pale)}
.page-head p{color:var(--on-dark)}

/* ---------- 日本から世界へ：象牙の地に淡い紫紺の青海波 ---------- */
.band{color:var(--ink);padding-block:110px;background-color:var(--ivory);
  background-image:
    linear-gradient(90deg,var(--ivory) 0%,rgba(248,244,235,.94) 45%,rgba(248,244,235,.5) 100%),
    radial-gradient(circle at 50% 100%,transparent 9px,rgba(43,36,64,.14) 10px,transparent 11px,transparent 17px,rgba(43,36,64,.14) 18px,transparent 19px,transparent 25px,rgba(43,36,64,.14) 26px,transparent 27px,transparent 33px,rgba(43,36,64,.14) 34px,transparent 35px,#F8F4EB 36px,#F8F4EB 40px,transparent 40px),
    radial-gradient(circle at 50% 100%,transparent 9px,rgba(43,36,64,.14) 10px,transparent 11px,transparent 17px,rgba(43,36,64,.14) 18px,transparent 19px,transparent 25px,rgba(43,36,64,.14) 26px,transparent 27px,transparent 33px,rgba(43,36,64,.14) 34px,transparent 35px,#F8F4EB 36px,#F8F4EB 40px,transparent 40px);
  background-size:auto,80px 40px,80px 40px;background-position:0 0,0 0,40px 20px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band h2{color:var(--navy-deep)}
.band p{color:var(--ink)}
.band .label{color:var(--navy)}
.band .label-jp{color:var(--accent)}
.band .more{color:var(--navy);border-color:var(--navy)}
.band .more:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- お問い合わせ帯：紫紺 ---------- */
.cta{background:var(--navy);color:var(--on-dark)}
.cta h2{color:#fff}
.cta p{color:var(--on-dark)}
.cta .label{color:var(--fuji-pale)}
.cta .btn-primary{background:var(--ivory);color:var(--navy);border-color:var(--ivory)}
.cta .btn-primary:hover{background:#fff;color:var(--navy)}

/* ---------- フッター：深い紫紺 ---------- */
.site-footer{background:radial-gradient(ellipse 60% 420px at 50% 110px,rgba(91,74,114,.55),transparent 70%),var(--navy-deep);color:var(--on-dark-muted)}
.footer-name{color:#fff}
.footer-en{color:var(--fuji-pale)}
.footer-cols{border-color:rgba(201,164,74,.4)}
.fh{color:var(--fuji-pale)!important}
.site-footer a{color:#fff}
.footer-nav a:hover{color:var(--fuji-pale)}

/* ---------- 農林水畜産：生産の循環図・研究対象の表 ---------- */
.cycle{list-style:none;margin:28px 0 40px;padding:0;display:grid;gap:26px}
.cycle li{position:relative;background:#FFFDF9;border:1px solid var(--line);border-top:3px solid var(--navy);padding:16px 18px 14px;min-width:0}
.cycle strong{display:block;font-family:var(--serif);font-size:18px;color:var(--navy-deep);margin-bottom:2px}
.cycle span{display:block;font-size:15px;color:var(--muted);line-height:1.7}
.cycle li:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);color:var(--fuji);font-weight:700}
@media (min-width:860px){
  .cycle{grid-template-columns:repeat(5,1fr);gap:22px}
  .cycle li:not(:last-child)::after{content:"→";left:auto;right:-18px;bottom:auto;top:50%;transform:translateY(-50%)}
}
.crop-table{margin:12px 0 36px}
.crop-table th{width:26%}
@media (max-width:600px){.crop-table th{width:100%}}

/* ---------- v10：トップの動き（ゆっくり近づいて離れる。光の反応と信号は build.py の SCRIPT） ---------- */
@keyframes breathe{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-2%,1.2%)}100%{transform:scale(1.04) translate(1.5%,-1%)}}
.hero-bg{animation:breathe 26s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}}

/* ---------- v10：縦書きコピー（白い箱をやめ、模様の上に直接。金の縦罫で区切る） ---------- */
.hero-copy{gap:0;align-items:flex-start}
.vbox{background:none;color:#fff;font-weight:600;letter-spacing:.22em;padding:0 .55em;
  text-shadow:0 0 18px rgba(30,25,48,.85),0 0 4px rgba(30,25,48,.6)}
.hero-copy .vbox:first-child{border-left:1px solid rgba(201,164,74,.85);padding-top:.2em}
.hero-copy .vbox:first-child{position:relative}
.hero-copy .vbox:first-child::before{content:"";position:absolute;left:-4.5px;top:-12px;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.hero-copy .vbox:first-child::after{content:"";position:absolute;left:-4.5px;bottom:-12px;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg)}
.vbox + .vbox{margin-top:1.6em}
@media (prefers-reduced-motion:no-preference){
  .hero-copy .vbox{animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy .vbox + .vbox{animation-delay:.5s}
}
@keyframes rise{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ---------- v11：動きの演出（スクリプトが html に .motion を付けたときだけ動く） ---------- */
.label-jp::after{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-top:12px;transform-origin:left center}
.motion .reveal{opacity:0}
.motion .reveal.in{animation:revealUp .95s cubic-bezier(.2,.7,.2,1) var(--d,0ms) both}
@keyframes revealUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.motion .label-jp.reveal::after{scale:0 1;transition:scale 1.1s cubic-bezier(.6,0,.2,1) calc(var(--d,0ms) + .35s)}
.motion .label-jp.reveal.in::after{scale:1 1}
/* 事業の図：線が順に引かれ、事業の円が現れる */
.motion .ring .mesh line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease calc(var(--i)*24ms),stroke-opacity .25s,stroke-width .25s,stroke .25s}
.motion .ring.in .mesh line{stroke-dashoffset:0}
.motion .ring .mesh a{opacity:0;transition:opacity .7s ease calc(.3s + var(--n)*80ms)}
.motion .ring.in .mesh a{opacity:1}
.ring .mesh line.lit{stroke:#C9A44A;stroke-opacity:.95;stroke-width:2.2}
.ring .pulse{pointer-events:none}
/* 代表メッセージの画像の奥行き */
.split-img{overflow:hidden}
.motion .split-img img{transform:translateY(var(--py,0px)) scale(1.12);will-change:transform}
/* カードの反応 */
.prog,.biz,.partners a,.topic-list a{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
@media (hover:hover){
  .prog:hover,.biz:hover,.partners a:hover,.topic-list a:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 30px -16px rgba(43,36,64,.45)}
}
/* 農林水畜産の循環図：上の金の帯と矢印が順に光って流れる */
.cycle li::before{content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:3px;background:var(--gold);opacity:0;animation:cycGlow 5s ease-in-out infinite}
.cycle li:not(:last-child)::after{animation:cycArrow 5s ease-in-out infinite}
.cycle li:nth-child(2)::before,.cycle li:nth-child(2)::after{animation-delay:1s}
.cycle li:nth-child(3)::before,.cycle li:nth-child(3)::after{animation-delay:2s}
.cycle li:nth-child(4)::before,.cycle li:nth-child(4)::after{animation-delay:3s}
.cycle li:nth-child(5)::before{animation-delay:4s}
@keyframes cycGlow{0%,30%,100%{opacity:0}10%,18%{opacity:1}}
@keyframes cycArrow{0%,14%,40%,100%{color:var(--fuji)}22%,30%{color:var(--gold)}}
@media (prefers-reduced-motion:reduce){.cycle li::before,.cycle li::after{animation:none!important}}

/* ---------- v12：多言語（言語切り替え・英語と中国語の書体と組み方） ---------- */
.nav-lang{font-size:14px;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-lang a{padding:4px 6px!important;text-decoration:none}
.nav-lang a[aria-current]{font-weight:700;color:var(--accent)!important}
.nav-lang .sep{opacity:.45}
@media (min-width:980px){
  .header-inner{position:relative}
  .nav-lang{position:absolute;top:2px;right:20px;font-size:12px;border:0!important}
  .nav-lang a{padding:2px 4px!important}
  .is-home .site-header:not(.scrolled) .nav-lang a{color:var(--on-dark)}
}
@media (max-width:979px){.nav-lang{padding:12px 0;border-top:1px solid var(--line)}}
html[lang^="zh-Hant"]{--serif:"Noto Serif TC","Noto Serif JP",serif;--sans:"Noto Sans TC","Noto Sans JP",sans-serif}
html[lang^="zh-Hans"]{--serif:"Noto Serif SC","Noto Serif JP",serif;--sans:"Noto Sans SC","Noto Sans JP",sans-serif}
html[lang^="zh"] body{font-family:var(--sans)}
/* 英語：縦書きのコピーは横書きに */
html[lang="en"] .hero-copy{flex-direction:column;align-items:flex-start;border-left:1px solid rgba(201,164,74,.85);padding-left:.9em;position:relative}
html[lang="en"] .vbox{writing-mode:horizontal-tb;letter-spacing:.02em;font-size:clamp(30px,4vw,50px);line-height:1.25;padding:0}
html[lang="en"] .hero-copy .vbox:first-child{border-left:0;padding-top:0}
html[lang="en"] .hero-copy .vbox:first-child::before,html[lang="en"] .hero-copy .vbox:first-child::after{display:none}
html[lang="en"] .vbox + .vbox{margin-top:.2em}
html[lang="en"] .vhead{letter-spacing:.12em}
html[lang="en"] body{word-break:normal;overflow-wrap:break-word;hyphens:auto}
/* 英語：事業の図の文字の大きさ */
html[lang="en"] .mesh a text:nth-of-type(2){font-size:12px}
html[lang="en"] .mesh > text{font-size:17px;letter-spacing:.5px}
/* v12.1：言語切り替えの位置、英語のスマホ表示 */
@media (min-width:980px){
  .header-inner{padding-top:22px;padding-bottom:8px}
  .nav-lang{top:3px}
  .is-home .site-header:not(.scrolled) .nav-lang a[aria-current]{color:var(--gold)!important}
}
html[lang] .mesh a.n6 text:nth-of-type(2){font-size:10.5px}
html[lang="en"] .hero-card{width:auto}
html[lang="en"] .hero-card span{font-size:16px}
@media (max-width:859px){
  html[lang="en"] .hero-copy{justify-self:start;max-width:100%}
  html[lang="en"] .vbox{font-size:clamp(26px,7.6vw,40px)}
  html[lang="en"] .brand-name{font-size:14px}
}