/* =========================================================
   全体の質感をそろえる（「しくみ」の欄と同じ仕上げ）
   金の細い縁・深緑の光沢パネル・墨のにじみ・丸いカード
   ========================================================= */
:root { --gold: #c9b88f; --radius: 16px; }

/* 「生まれるもの」は操作できる部品ではないので、矢印と動きを外す */
.hub2-out li { grid-template-columns: 28px 1fr; cursor: default; }
.hub2-out li b { display: none; }
.hub2-out li:hover { background: rgba(255, 255, 255, .05); transform: none; }

/* 見出しの添え書き */
.rule-sub { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: .3em; color: var(--muted); }
.rule-head h2 { line-height: 1.3; }

/* 墨のにじみ（欄の背景にうすく） */
.inked { position: relative; overflow: hidden; }
.inked::before, .inked::after { content: ""; position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 792 / 344; background: url(../img/generated/ink-wash.webp) center / contain no-repeat; }
.inked::before { width: 40%; left: -8%; bottom: -6%; opacity: .22; transform: scaleX(-1); }
.inked::after { width: 32%; right: -6%; top: 0; opacity: .16; transform: rotate(180deg); }
.inked > * { position: relative; z-index: 1; }

/* カード共通：丸み・やわらかい影・金の縁が浮かぶ */
.biz-card, .pj-card, .kanji-card, .num, .artist-card, .card, .word-card, .value-card, .orig-card, .artist-cols > div, .biz-list li, .record-table, .story, .tl, .rbars {
  border-radius: var(--radius);
}
.biz-card, .pj-card, .kanji-card, .artist-card, .word-card, .value-card, .orig-card, .story, .card, .num {
  border: 1px solid rgba(28, 31, 27, .07); background: rgba(251, 249, 244, .94);
  box-shadow: 0 14px 30px -22px rgba(28, 31, 27, .45);
}
.biz-card:hover, .pj-card:hover, .kanji-card:hover, .artist-card:hover, .word-card:hover, .value-card:hover, .orig-card:hover, .num:hover {
  box-shadow: 0 0 0 1px var(--gold), 0 24px 44px -26px rgba(28, 31, 27, .5);
}

/* アイコンの丸：金の縁＋淡い緑の内側（しくみの丸と同じ） */
.step-ic, .value-ic-wrap, .kanji-card .kj {
  background: radial-gradient(circle, #e8ede0 0 58%, var(--paper) 59%);
  border: 1.5px solid var(--gold); box-shadow: 0 8px 18px -12px rgba(28, 31, 27, .45);
}
.step-ic { width: 72px; height: 72px; }
.step:hover .step-ic { background: var(--green); border-color: var(--gold); }
.kanji-card .kj { border-radius: 50%; width: 84px; height: 84px; }
.kanji-card .kj::before { inset: -7px; border-color: rgba(74, 116, 70, .5); border-right-color: transparent; }
.steps-title { color: var(--sumi); }
.steps-title b { color: var(--green); }

/* 事業カード：写真の下に金の細線、番号は白抜き */
.biz-card-img { border-bottom: 1px solid var(--gold); }
.biz-card-no { font-size: 38px; color: transparent; -webkit-text-stroke: 1px #fff; text-shadow: none; }
.biz-card-en { font-size: 17px; letter-spacing: .18em; }
.biz-card-ja::after { border-color: var(--gold); }

/* 深緑の光沢パネル（「生まれるもの」と同じ仕上げ） */
.panel-green, .num, .vm-card, .cta-band .cta-box {
  color: #fff; border: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(123, 163, 90, .25), transparent 60%), linear-gradient(160deg, #2f4d39, #1f3528);
  box-shadow: 0 0 0 1px rgba(201, 184, 143, .5) inset, 0 24px 50px -28px rgba(28, 31, 27, .7);
}
.num { position: relative; overflow: hidden; }
.num::after, .vm-card::after { content: ""; position: absolute; right: -20%; bottom: -30%; width: 90%; aspect-ratio: 792 / 344; background: url(../img/generated/ink-wash.webp) center / contain no-repeat; filter: invert(1); opacity: .1; pointer-events: none; }
.num-v, .num-v b { color: #fff; }
.num-v small { color: var(--gold); }
.num-l { color: rgba(255, 255, 255, .9); }
.num-l small { color: rgba(255, 255, 255, .6); }
.num:hover { box-shadow: 0 0 0 1px var(--gold) inset, 0 24px 44px -26px rgba(28, 31, 27, .6); }
.vm-card:nth-child(2) { background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(123, 163, 90, .18), transparent 60%), linear-gradient(160deg, #283a2e, #16211a); }
.vm-card h3 { padding-bottom: 14px; border-bottom: 1px solid rgba(201, 184, 143, .45); }
.vm-card .eyebrow { color: var(--gold); }

/* 連携書道家カード：写真側に金の細線 */
.artist-card-img { border-right: 1px solid var(--gold); }
@media (max-width: 520px) { .artist-card-img { border-right: 0; border-bottom: 1px solid var(--gold); } }
.artist-card-body h3 { padding-bottom: 8px; border-bottom: 1px solid rgba(201, 184, 143, .55); }

/* プロジェクトカード */
.pj-card-img { border-bottom: 1px solid var(--gold); }
.story { box-shadow: 0 0 0 1px rgba(201, 184, 143, .45) inset, 0 14px 30px -22px rgba(28, 31, 27, .45); }

/* 会社概要：深緑の見出し帯 */
.card-title { position: relative; padding-bottom: 12px; border-bottom: 1px solid rgba(201, 184, 143, .6); }
.company-table dt { color: var(--green); }

/* 下層ページの見出し帯・カード */
.page-hero { border-bottom: 1px solid rgba(201, 184, 143, .5); }
.page-nav a { border-color: rgba(201, 184, 143, .6); }
.value-card .value-ic { padding: 12px; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle, #e8ede0 0 58%, var(--paper) 59%); border: 1.5px solid var(--gold); }
.word-card::before { background: linear-gradient(90deg, var(--green), var(--gold)); }
.biz-list li, .chips li { border-color: rgba(201, 184, 143, .6); }
.work-date b, .tag { background: linear-gradient(160deg, #2f4d39, #1f3528); }
.artist-cols > div { background: rgba(251, 249, 244, .94); border-color: rgba(201, 184, 143, .45); }
.artist-cols h3 { border-bottom: 1px solid rgba(201, 184, 143, .55); padding-bottom: 8px; }
.artist-photo::before { border-color: var(--gold); }
.artist-vname { background: linear-gradient(160deg, #2f4d39, #1f3528); box-shadow: 0 0 0 1px var(--gold) inset; }
.cta-band { background: transparent; }
.cta-band .container { max-width: 980px; }
.cta-band .cta-box { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 50px); border-radius: 20px; }
.cta-band .cta-box h2 { color: #fff; }
.cta-band .cta-box p { color: rgba(255, 255, 255, .85); }
.cta-band .cta-box .btn-primary { background: var(--washi); color: var(--sumi); }
.cta-band .cta-box::after { content: ""; position: absolute; right: -10%; bottom: -40%; width: 70%; aspect-ratio: 792 / 344; background: url(../img/generated/ink-wash.webp) center / contain no-repeat; filter: invert(1); opacity: .1; pointer-events: none; }
.tl, .rbars { box-shadow: 0 14px 30px -22px rgba(28, 31, 27, .45); border-color: rgba(201, 184, 143, .45); }
.cy-node { border: 1.5px solid var(--gold); background: radial-gradient(circle, #eef2e8 0 60%, var(--paper) 61%); }
.cy-core { box-shadow: 0 0 0 6px rgba(251, 249, 244, .9), 0 0 0 7.5px var(--gold); }

/* ムービー枠にも金の縁 */
.movie-frame { box-shadow: 0 0 0 1px rgba(201, 184, 143, .6), 0 40px 90px -40px rgba(0, 0, 0, .8); border-radius: 16px; }
.hero-film-frame { box-shadow: 0 0 0 1px rgba(201, 184, 143, .7), 0 40px 80px -40px rgba(28, 31, 27, .7); }

/* フッター：2段・折り返しなしのコンパクト版 */
.footer { padding: 40px 0 18px; }
.footer-top { display: grid; gap: 22px; padding-bottom: 24px; align-items: center; }
@media (min-width: 980px) { .footer-top { grid-template-columns: auto 1fr; gap: 60px; } }
.footer-brand { display: flex; align-items: center; gap: 22px; }
.footer-brand img { width: 128px; }
.footer-hand { margin: 0; font-size: 15px; letter-spacing: .16em; transform: none; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .35); }
.footer-info { display: grid; gap: 10px; justify-items: end; text-align: right; }
.footer-nav { gap: 6px 26px; flex-wrap: nowrap; }
.footer-addr { margin: 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.footer-bottom { padding-top: 14px; padding-right: 70px; }
@media (max-width: 979px) {
  .footer-info { justify-items: start; text-align: left; }
  .footer-nav { flex-wrap: wrap; }
  .footer-brand { flex-wrap: wrap; gap: 12px 18px; }
  .footer-brand img { width: 110px; }
  .footer-hand { font-size: 13.5px; padding-left: 16px; }
  .footer-bottom { padding-right: 60px; }
}