/* =========================================================
   作品②：白背景の明るい版（クライアント修正 2026-09-27）
   ①背景を白に ②帯・ボタンの暗い緑を明るい緑に
   ========================================================= */
:root {
  --washi: #ffffff;
  --washi-2: #f3f6ef;
  --paper: #ffffff;
  --green: #4f8a3c;       /* ボタン・強調：明るい緑 */
  --green-2: #5e9a48;
  --leaf: #8cbf6a;
  --green-l: #b9dca0;
  --green-bg: #eef5e8;
  --line: rgba(40, 60, 40, .12);
}
body { background: #fff; }
body::before { opacity: .18; }
.hero, .page-hero { background-color: #fff; }
.hero { background-image: none; }
.page-hero { background: url(../img/generated/hero-washi-enso-bg.webp) right center / auto 130% no-repeat, #fff; }

/* 帯（ヘッダー）：白地に緑の文字 */
.header { background: rgba(255, 255, 255, .95); color: var(--text); border-bottom: 1px solid var(--line); }
.header-logo img { content: url(../img/logo.png); }
.gnav ul a { color: var(--text); }
.gnav ul a::after { background: var(--green); }
.gnav .btn-primary { background: var(--green); color: #fff; }
.gnav .btn-primary:hover { background: #437a32; }
.menu-btn { background: var(--green); border: 0; }
.menu-btn span { background: #fff; }
.menu-open .menu-btn { background: #fff; }
.menu-open .menu-btn span { background: var(--green); }
.drawer { background: linear-gradient(160deg, #5e9a48, #3f7431); }

/* ボタン */
.btn-primary { background: var(--green); box-shadow: 0 10px 22px -12px rgba(79, 138, 60, .6); }
.btn-primary:hover { background: #437a32; }
.btn-ghost { border-color: var(--green); color: var(--green); background: #fff; }
.btn-ghost:hover { background: var(--green); color: #fff; }
.link-more { color: var(--green); }
.to-top { background: var(--green); }

/* 深緑だったパネルを明るい緑に */
.panel-green, .num, .vm-card, .cta-band .cta-box, .hub2-out {
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(160deg, #6aa653, #4a8338) !important;
}
.vm-card:nth-child(2) { background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(160deg, #5a9645, #3f7431) !important; }
.work-date b, .tag, .artist-vname { background: linear-gradient(160deg, #6aa653, #4a8338); }

/* ムービー欄：暗い緑の帯を白地に */
.movie { background: var(--green-bg); color: var(--text); }
.movie .eyebrow { color: var(--green); }
.movie .h2 { color: var(--sumi); }
.movie-head p { color: var(--text); }

/* 半透明動画のヒーロー：より明るく */
.v2 .hero2 { background: #fff; }
.v2 .hero2::before { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5) 70%, rgba(255, 255, 255, .25)), linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 25%, transparent 75%, #fff); }

/* フッター：明るい緑 */
.footer { background: linear-gradient(160deg, #5e9a48, #3f7431); }

/* 事業カードの写真 */
.biz-card-img { background: var(--green-bg); }

/* クライアント修正：事業内容は1枚画像 */
.biz-photo { margin: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 40px -26px rgba(28, 31, 27, .5); aspect-ratio: 16 / 10; }
.biz-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.biz-photo:hover img { transform: scale(1.04); }
/* ストーリー：ポスター画像 */
.story-poster { width: 38%; max-width: 200px; right: 18px; bottom: 18px; border-radius: 8px; animation: none; filter: none; box-shadow: 0 14px 30px -18px rgba(28, 31, 27, .5); }
.orig-photo { padding: 0; }
.orig-photo img { max-height: none; width: 100%; height: 100%; object-fit: cover; }

.biz-photo:has(img[src*="rev_u1"]) { background: var(--green-bg); }
.biz-photo img[src*="rev_u1"] { object-fit: contain; }

/* 下層ページの見出し帯を低く */
.page-hero { padding: clamp(26px, 3.2vw, 44px) 0 clamp(22px, 2.6vw, 34px); background-size: auto 150%; background-position: right 45%; }
.page-hero .breadcrumb { margin-bottom: 8px; }
.page-title { font-size: clamp(28px, 3.4vw, 42px); }
.page-lead { margin-top: 8px; font-size: 14px; line-height: 1.85; }
.page-nav { margin-top: 14px; }
.page-nav a { padding: 6px 14px; }

/* 見出し帯：左の白い隙間をなくす（和紙を全面に敷き、円相は右に） */
.page-hero { background: url(../img/generated/hero-enso.webp) right center / auto 112% no-repeat, url(../img/generated/washi.webp) center / cover; }
@media (max-width: 700px) { .page-hero { background: url(../img/generated/hero-enso.webp) 130% center / auto 100% no-repeat, url(../img/generated/washi.webp) center / cover; } .page-hero .container { position: relative; } .page-lead { background: rgba(255,255,255,.6); } }

/* ストーリー：本文とポスターを左右に並べ、重ならないように */
.story { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 22px; align-items: center; min-height: 0; }
.story-text { max-width: none; }
.story-poster { position: static; width: 100%; max-width: none; justify-self: center; }
@media (max-width: 560px) { .story { grid-template-columns: 1fr; } .story-poster { width: 70%; margin: 0 auto; } }

/* 見出しの補足が重複しているので右側を隠す */
.rule-head:has(.rule-sub) > p { display: none; }

/* 会社概要とフォームの高さをそろえる（フォームを詰める） */
.company-contact { align-items: stretch; }
.company-contact > .card { height: 100%; }
.contact-form { gap: 12px; }
.contact-form .f-row { gap: 4px; }
.contact-form .f-2col { gap: 12px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select { min-height: 44px; padding: 9px 12px; }
.contact-form textarea { min-height: 96px; height: 96px; padding: 9px 12px; }
.contact-form .card-title { margin-bottom: 4px; }
.submit-row .btn { min-height: 48px; }
.contact-form .f-status:empty { display: none; }

/* スマホ：見出し帯は円相を外して文字を読みやすく */
@media (max-width: 700px) { .page-hero { background: url(../img/generated/washi.webp) center / cover; } .page-lead { background: none; } }

/* ムービー直後の見出しが詰まっていたので余白を足す */
.movie + #artists, .movie + .sec { padding-top: clamp(48px, 5vw, 72px); }
/* 下層ページ末尾の問い合わせパネル上の余白を詰める */
.cta-band { padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 5vw, 64px); }

/* ===== 2026-09-27 全体バランス調整 ===== */
/* ② トップの背景動画をはっきり見せる */
.v2 .hero2-video { opacity: .7; filter: saturate(.95); }
.v2 .hero2::before { background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(255,255,255,.82), rgba(255,255,255,.35) 70%, rgba(255,255,255,.1)), linear-gradient(180deg, rgba(255,255,255,.35), transparent 22%, transparent 80%, #fff); }
.v2 .hero2 .hero-title, .v2 .hero2 .hero-lead, .v2 .hero2 .hero-label { text-shadow: 0 0 18px #fff, 0 0 30px rgba(255,255,255,.9); }
.v2 .hero2 { min-height: min(80svh, 720px); }

/* ③ 余白：セクションの上下を一律に詰める */
.sec { padding: clamp(44px, 4.6vw, 68px) 0; }
.sec + .sec:not(.tight), .sec.tight { padding-top: 0; }
.movie { padding: clamp(44px, 4.6vw, 64px) 0; }
.movie + .sec, .movie + #artists { padding-top: clamp(40px, 4.2vw, 60px); }
.movie-head { margin-bottom: 24px; }
.sec-head { margin-bottom: clamp(22px, 2.6vw, 34px); }
.rule-head { margin-bottom: 20px; }
.work-block, .biz-detail, .artist { padding: clamp(32px, 3.4vw, 48px) 0; }
.hub2 { gap: 20px; }
.hub2-tag { margin-top: -4px; }
#system { padding-bottom: clamp(28px, 3vw, 44px); }
.steps-box { margin-top: 0; }
.cta-band { padding: clamp(12px, 1.6vw, 24px) 0 clamp(40px, 4vw, 56px); }
.projects-more { margin-top: 12px; }
.origin-row { margin-top: clamp(28px, 3vw, 44px); }

/* 活動実績「2026年の歩み」：左右の高さをそろえ、中を詰める */
.works-overview { align-items: stretch; margin-top: 0; }
.works-overview > * { display: flex; }
.works-overview .tl, .works-overview .rbars { flex: 1; }
.tl { display: flex; flex-direction: column; justify-content: center; padding: 26px 7% 14px; }
.tl-evs { height: 104px; }
.rbars { gap: 10px; padding: 20px 22px; }
.rbars li:not(.rbars-title) { gap: 0 12px; }
.rbars small { margin-top: 2px; }
.rbars b { font-size: 16px; }
.tl { padding-left: 11%; padding-right: 11%; }
.company-table > div { padding: 15px 0; }
#contact { padding-top: clamp(40px, 4.2vw, 60px); }

/* 年表：文字を大きくして枠の高さを内容で満たす */
.tl { padding: 34px 10% 26px; justify-content: space-between; }
.tl-months { margin-top: 14px; font-size: 16px; }
.tl-evs { height: 196px; margin-top: 22px; }
.tl-ev { width: 170px; gap: 8px; }
.tl-ev:nth-child(even) { top: 100px; }
.tl-ev b { font-size: 18px; letter-spacing: .06em; }
.tl-ev small { font-size: 13.5px; padding: 2px 12px; }
.tl-ev::before { width: 18px; height: 18px; top: var(--dot-top, -80px); }
.tl-ev:nth-child(even)::before { top: calc(var(--dot-top, -80px) - 100px); }
/* 右のグラフも文字を大きく */
.rbars-title { font-size: 17px !important; }
.rbars li:not(.rbars-title) { grid-template-columns: 66px 1fr 48px; }
.rb-l { font-size: 16px; }
.rb-bar { height: 16px; }
.rbars b { font-size: 20px; }
.rbars small { font-size: 13px; }

.tl { --dot-top: -130px; }

.tl { padding: 24px 13%; justify-content: center; }
.tl-evs { margin-top: 18px; height: 204px; }
.tl-ev:nth-child(even) { top: 104px; }
.tl-ev:nth-child(even)::before { top: calc(var(--dot-top) - 104px); }
.tl-ev b { font-size: 19px; }

.tl-ev em { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.3; margin-top: -4px; }
.tl-evs { height: 236px; }
.tl-ev:nth-child(even) { top: 124px; }
.tl-ev:nth-child(even)::before { top: calc(var(--dot-top) - 124px); }
.tl { --dot-top: -74px; }

.tl-evs { height: 222px; }
.tl-ev:nth-child(even) { top: 150px; }
.tl-ev:nth-child(even)::before { top: calc(var(--dot-top) - 150px); }

.tl-evs { height: 214px; }
.tl-ev:nth-child(even) { top: 142px; }
.tl-ev:nth-child(even)::before { top: calc(var(--dot-top) - 142px); }
@media (max-width: 700px) { .tl-evs { height: auto; } .tl-ev:nth-child(even) { top: 0; } .tl-ev::before, .tl-ev:nth-child(even)::before { top: 6px; } .tl { padding: 22px 18px 22px 50px; } .tl-ev b { font-size: 16px; } }