/*
Theme Name: Webbranding Pro
Theme URI: https://webbranding.pro/
Author: 株式会社ウェブブランディング
Author URI: https://webbranding.pro/
Description: 株式会社ウェブブランディングのコーポレートサイト用カスタムテーマ。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webbranding-pro
*/

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #fafafa; --bg-2: #ffffff;
  --navy: #1d2080; --navy-deep: #0f1248;
  --blue: #5b6cff; --blue-soft: #e8eaff;
  --ink-dim: #374151; --line: #e5e7eb;
  --content-max: 1200px;
  --pad-x: clamp(20px, 4vw, 56px);
  --font-serif: "EB Garamond", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* ===== 本文フォント設定 =====
     ・ゴシック/明朝混在に戻したい時は、下の「ゴシック版」のコメントアウトを外し、
       「明朝統一版」をコメントアウトしてください。 */

  /* --- ゴシック版（混在用、戻したい時はこちらを有効化） --- */
  /* --font-sans: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif; */

  /* --- 明朝統一版（現在有効） --- */
  --font-sans: "EB Garamond", "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  /* --- 等幅(モノスペース)版（混在に戻したい時はこちらを有効化） --- */
  /* --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace; */

  /* --- 明朝統一版（現在有効） --- */
  --font-mono: "EB Garamond", "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--navy); font-family: var(--font-serif); font-weight: 400; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
p { font-family: var(--font-sans); }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue); color: #fff; }

/* PAGE SYSTEM */
/* (SPA page switching CSS removed for WordPress) */
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* CURSOR (custom cursor disabled — using browser default) */

/* LOADER */
.loader { position: fixed; inset:0; background: var(--navy); z-index: 10000; display: flex; align-items: center; justify-content: center; animation: loaderOut 1s 1.4s forwards cubic-bezier(.77,0,.175,1); }
.loader-inner { overflow:hidden; padding: 0 4px; text-align: center; }
.loader-text { font-family: var(--font-serif); font-size: clamp(24px,4vw,52px); font-weight: 300; letter-spacing: -.02em; color: #fff; animation: loaderUp .9s .3s forwards cubic-bezier(.77,0,.175,1); transform: translateY(110%); }
.loader-text i { font-family: var(--font-serif); font-style: italic; color: #8b95ff; }
.loader-jp { display: block; font-family: var(--font-serif); font-size: 14px; letter-spacing: .3em; color: #d4dcff; margin-top: 12px; animation: loaderUp .9s .6s forwards cubic-bezier(.77,0,.175,1); transform: translateY(200%); }
.loader-num { position: absolute; bottom: 36px; right: 36px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .15em; color: rgba(255,255,255,.7); }
@keyframes loaderUp { to { transform: translateY(0); } }
@keyframes loaderOut { to { transform: translateY(-100%); } }

/* LAYOUT */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--pad-x); }
.section { position: relative; padding-top: clamp(70px, 9vw, 130px); padding-bottom: clamp(70px, 9vw, 130px); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--line); padding-bottom: 20px; gap: 40px; flex-wrap:wrap; }
.tag { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: 12px; font-weight: 500; }
.tag::before { content:""; width: 24px; height: 1px; background: var(--blue); }
.eyebrow { font-family: var(--font-serif); font-size: 16px; letter-spacing: .25em; color: var(--ink-dim); }
.section-title-big { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.4; letter-spacing: .02em; color: var(--navy); margin-bottom: 14px; }
.section-title-big em { font-family: var(--font-serif); font-style: normal; color: var(--blue); font-weight: 500; margin: 0 .08em; }
.section-sub { font-family: var(--font-sans); font-size: 18px; color: var(--ink-dim); line-height: 1.9; }

/* NAV */
header.nav { position: fixed; top:0; left:0; right:0; z-index: 100; padding: 16px max(var(--pad-x), calc((100vw - var(--content-max)) / 2)); display: flex; justify-content: space-between; align-items: center; transition: background .4s, backdrop-filter .4s, box-shadow .4s; }
header.nav.scrolled { background: rgba(250,250,250,.88); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.logo { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.logo-mark { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #fff; padding: 3px; box-shadow: 0 4px 14px rgba(29,32,128,.08); flex-shrink: 0; }
.logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.logo-name { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: .04em; line-height: 1.2; }
.logo-name small { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--ink-dim); font-weight: 500; margin-top: 2px; text-transform: uppercase; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-family: var(--font-serif); font-size: 16px; letter-spacing: .08em; color: var(--navy); font-weight: 500; position: relative; padding: 4px 0; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.77,0,.175,1); }
.nav-links a:hover::after, .nav-links a.current::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.current { color: var(--blue); }
.nav-links a.nav-cta,
.nav-links li.nav-cta > a { background: var(--navy); color: #fff !important; padding: 12px 24px; border-radius: 999px; transition: background .3s; font-family: var(--font-serif); font-size: 14px !important; }
.nav-cta:hover { background: var(--blue); }
.nav-cta::after { display:none !important; }
.nav-cta.current { background: var(--blue); }

/* ハンバーガーボタン（PC非表示・モバイル表示）*/
.nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; position: relative; z-index: 102; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--navy); transition: transform .4s cubic-bezier(.77,0,.175,1), opacity .3s, top .4s, background .3s; }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.nav-open .nav-toggle span { background: var(--navy); }
body.nav-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1100px){
  .nav-toggle { display: block; }
  .nav-links { position: fixed; inset: 0; background: rgba(250,250,250,.98); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; align-items: center; gap: 32px; opacity: 0; pointer-events: none; transition: opacity .4s cubic-bezier(.22,1,.36,1); z-index: 101; padding: 80px var(--pad-x) 40px; }
  body.nav-open .nav-links { opacity: 1; pointer-events: auto; }
  .nav-links a { font-size: 22px !important; padding: 8px 0; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
  body.nav-open .nav-links a { opacity: 1; transform: translateY(0); }
  body.nav-open .nav-links a:nth-child(1) { transition-delay: .08s; }
  body.nav-open .nav-links a:nth-child(2) { transition-delay: .12s; }
  body.nav-open .nav-links a:nth-child(3) { transition-delay: .16s; }
  body.nav-open .nav-links a:nth-child(4) { transition-delay: .20s; }
  body.nav-open .nav-links a:nth-child(5) { transition-delay: .24s; }
  body.nav-open .nav-links a:nth-child(6) { transition-delay: .28s; }
  body.nav-open .nav-links a:nth-child(7) { transition-delay: .34s; }
  .nav-cta { margin-top: 8px; padding: 18px 36px !important; font-size: 16px !important; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 560px){ .logo-name { font-size: 15px; } .logo-name small { font-size: 10px; letter-spacing: .15em; } .logo-mark { width: 32px; height: 32px; } .logo { gap: 10px !important; } }

/* HERO (HOME) */
.hero { position: relative; padding-top: clamp(100px, 14vh, 200px); padding-bottom: clamp(60px, 10vh, 140px); overflow: hidden; }
.hero-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: clamp(30px, 4vw, 52px); font-family: var(--font-mono); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); font-weight: 500; }
.hero-meta .dot { color: var(--blue); }
.hero-meta .jp-tag { font-family: var(--font-serif); text-transform: none; letter-spacing: .2em; }
.hero-title { font-family: var(--font-serif); font-size: clamp(34px, 5.5vw, 84px); line-height: 1.25; letter-spacing: .01em; font-weight: 500; color: var(--navy); }
.hero-title .line { display:block; overflow: hidden; padding-bottom: .08em; }
.hero-title .line > span { display:inline-block; animation: rise 1s 1.4s cubic-bezier(.77,0,.175,1) both; transform: translateY(110%); }
.hero-title em { font-family: var(--font-serif); font-style: normal; color: var(--blue); font-weight: 500; padding: 0 .05em; }
.hero-title .line:nth-child(2) > span { animation-delay: 1.55s; }
@keyframes rise { to { transform: translateY(0); } }
.hero-bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px 40px; margin-top: clamp(24px, 3vw, 40px); }
.hero-desc { max-width: none; font-size: 18px; color: var(--ink-dim); line-height: 1.9; opacity: 0; animation: fadeUp 1s 2s forwards; margin-top: clamp(32px, 5vw, 70px); }
.hero-desc b { color: var(--navy); font-weight: 500; }
.hero-cta-wrap { margin-top: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; font-family: var(--font-serif); font-size: 16px; font-weight: 500; letter-spacing: .05em; transition: transform .3s, background .3s, color .3s; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--blue); transform: translateY(-2px); }
.btn-secondary { border: 1px solid var(--navy); color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn span { font-size: 19px; }
.hero-jp { font-family: var(--font-serif); writing-mode: vertical-rl; font-size: 14px; color: var(--ink-dim); letter-spacing: .3em; opacity: 0; animation: fadeUp 1s 2.2s forwards; }
.hero-scroll { justify-self: end; grid-column: 2; text-align: right; font-family: var(--font-mono); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); opacity: 0; animation: fadeUp 1s 2.2s forwards; }
.hero-scroll .line-down { display: block; width: 1px; height: 42px; background: var(--line); margin: 10px 0 0 auto; position: relative; overflow: hidden; }
.hero-scroll .line-down::after { content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--blue); animation: scrollInd 2s infinite; }
@keyframes scrollInd { to { top: 100%; } }
@keyframes fadeUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@media (max-width: 860px){ .hero-bottom { grid-template-columns: 1fr; } .hero-jp { writing-mode: horizontal-tb; } .hero-meta { grid-template-columns: 1fr; gap: 6px; } }

.hero-badge { position: absolute; top: 42%; right: 5%; width: 130px; height: 130px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-top: 6px; font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.1; text-align: center; animation: floatY 4s ease-in-out infinite; box-shadow: 0 18px 50px rgba(91,108,255,.28); }
.hero-badge-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-style: normal; line-height: 1.4; }
.hero-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.hero-badge svg text { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; fill: #fff; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatY { 0%,100%{transform: translateY(0);} 50%{transform: translateY(-10px);} }
@media (max-width: 1100px){ .hero-badge{ display:none; } }

/* PAGE HERO */
.page-hero { max-width: var(--content-max); margin: 0 auto; padding: 140px var(--pad-x) 60px; border-bottom: 1px solid var(--line); position: relative; }
.page-hero-meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); font-weight: 500; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.page-hero-meta::before { content:""; width: 24px; height: 1px; background: var(--blue); }
.page-hero-title { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 56px); line-height: 1.25; letter-spacing: .01em; font-weight: 500; color: var(--navy); margin-bottom: 14px; }
.page-hero-title em { font-family: var(--font-serif); font-style: normal; color: var(--blue); font-weight: 500; margin: 0 .08em; }
.page-hero-en { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); color: var(--ink-dim); font-weight: 400; }
.crumb { position: absolute; top: 100px; left: var(--pad-x); font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--ink-dim); text-transform: uppercase; }
.crumb a:hover { color: var(--blue); }
.crumb span { margin: 0 8px; color: var(--line); }

/* MARQUEE */
.marquee { background: var(--navy); color: #fff; overflow: hidden; padding: 22px 0; display: flex; gap: 50px; white-space: nowrap; }
.marquee-track { display: flex; gap: 50px; align-items: center; animation: slide 50s linear infinite; flex-shrink: 0; }
.marquee span { font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.8vw, 36px); display: flex; align-items: center; gap: 50px; }
.marquee span em { font-family: var(--font-serif); font-style: italic; color: #8b95ff; font-weight: 300; margin: 0 .1em; }
.marquee span::after { content:"✦"; color: #8b95ff; font-size: .5em; font-style: normal; }
@keyframes slide { to { transform: translateX(-100%); } }

/* LOGO MEANING */
.logo-section .about-grid { display: grid; grid-template-columns: 1fr 2.4fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.logo-visual { position: sticky; top: 110px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 50px 36px; text-align: center; box-shadow: 0 30px 80px rgba(29,32,128,.06); overflow: hidden; }
.logo-visual::before { content:""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, var(--blue-soft) 0%, transparent 40%), radial-gradient(circle at 80% 80%, var(--blue-soft) 0%, transparent 45%); pointer-events: none; }
.logo-visual-inner { position: relative; }
.logo-visual img { margin: 0 auto 20px; width: 70%; max-width: 260px; border-radius: 16px; box-shadow: 0 20px 50px rgba(29,32,128,.12); }
.logo-visual-caption { font-family: var(--font-serif); font-style: italic; color: var(--blue); font-size: 22px; margin-top: 8px; }
.logo-visual-jp { font-family: var(--font-serif); font-size: 13px; letter-spacing: .25em; color: var(--ink-dim); margin-top: 6px; }
.logo-meanings { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); margin-top: 30px; }
.meaning { display: grid; grid-template-columns: 50px 220px 1fr; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding .3s, background .3s; }
.meaning:hover { background: rgba(91,108,255,.03); padding-left: 14px; padding-right: 14px; }
.meaning-num { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--blue); font-weight: 300; letter-spacing: -.02em; }
.meaning-key { font-family: var(--font-serif); font-size: 19px; font-weight: 500; color: var(--navy); letter-spacing: .02em; }
.meaning-desc { font-family: var(--font-sans); font-size: 18px; color: var(--ink-dim); line-height: 1.8; }
.manifesto-closing { margin-top: clamp(50px, 6vw, 80px); padding: clamp(32px, 4vw, 56px); background: var(--navy); color: #fff; border-radius: 6px; font-family: var(--font-serif); font-size: clamp(21px, 1.8vw, 24px); line-height: 2; letter-spacing: .02em; font-weight: 400; text-align: center; }
.manifesto-closing em { font-family: var(--font-serif); font-style: normal; color: #d4dcff; font-weight: 500; margin: 0 .08em; }
@media (max-width: 860px){ .logo-section .about-grid { grid-template-columns: 1fr; } .logo-visual { position: static; } .meaning { grid-template-columns: 34px 1fr; gap: 14px; } .meaning-desc { grid-column: 1 / -1; margin-top: 4px; } }

/* STRENGTH */
.strength-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.strength-card { padding: 32px 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); position: relative; transition: transform .4s, box-shadow .4s, border-color .4s; overflow: hidden; }
.strength-card::before { content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.77,0,.175,1); }
.strength-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(29,32,128,.1); border-color: var(--navy); }
.strength-card:hover::before { transform: scaleX(1); }
.strength-number { font-family: var(--font-serif); font-style: italic; font-size: clamp(38px, 4vw, 56px); font-weight: 300; line-height: 1; color: var(--blue); letter-spacing: -.04em; margin-bottom: 22px; }
.strength-number .jp-word { font-family: var(--font-serif); font-style: normal; font-weight: 700; font-size: .72em; color: var(--blue); letter-spacing: .02em; }
.strength-title { font-family: var(--font-serif); font-size: 21px; font-weight: 700; margin-bottom: 10px; letter-spacing: .02em; color: var(--navy); }
.strength-desc { font-family: var(--font-sans); color: var(--ink-dim); font-size: 18px; line-height: 1.8; }
@media (max-width: 860px){ .strength-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .strength-grid { grid-template-columns: 1fr; } }

/* MEDIA */
.media-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.media-card { position: relative; background: var(--navy); aspect-ratio: 4/3; border-radius: 8px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3.5vw, 44px); transition: transform .5s, box-shadow .5s; overflow: hidden; }
.media-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -20px rgba(29,32,128,.45); }
.media-card:hover .media-arrow { transform: translate(4px, -4px); color: #fff; }

/* 暗背景上のコンテンツが背景より前面に来るよう z-index 指定 */
.media-top, .media-body, .media-bottom { position: relative; z-index: 2; }

/* メディアごとのテーマグラデーション背景 */
.mv1 { background: radial-gradient(circle at 30% 40%, #5b6cff 0%, transparent 55%), radial-gradient(circle at 75% 70%, #8b95ff 0%, transparent 50%), var(--navy); }
.mv2 { background: linear-gradient(135deg, #5b6cff, var(--navy)); }
.mv3 { background: radial-gradient(circle at 50% 0%, #5b6cff 0%, transparent 60%), linear-gradient(180deg, var(--navy) 30%, var(--navy-deep) 100%); }
.mv4 { background: radial-gradient(ellipse at bottom left, #5b6cff 0%, transparent 55%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }

/* 上段: 番号 + カテゴリ */
.media-top { display: flex; justify-content: space-between; align-items: center; }
.media-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; color: #d4dcff; font-weight: 500; }
.media-cat { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #d4dcff; font-weight: 500; padding: 5px 12px; border: 1px solid rgba(212,220,255,.3); border-radius: 999px; background: rgba(15,18,72,.3); backdrop-filter: blur(4px); }

/* 中段: メディア名 + キャッチ */
.media-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.media-name { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: .005em; line-height: 1.25; color: #fff; margin-bottom: 16px; transition: color .4s; }
.media-tagline { font-family: var(--font-sans); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; color: #d4dcff; letter-spacing: .02em; max-width: 28em; }

/* 下段: URL + Visit */
.media-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); }
.media-url { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.media-arrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .15em; color: #d4dcff; font-weight: 500; transition: transform .4s, color .4s; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 860px){ .media-grid { grid-template-columns: 1fr; } .media-card { aspect-ratio: auto; min-height: 320px; } }

/* QUOTE */
.quote { padding-top: clamp(70px, 9vw, 120px); padding-bottom: clamp(70px, 9vw, 120px); text-align: center; }
.quote-mark { font-family: var(--font-serif); font-size: 76px; color: var(--blue); line-height: 0.3; font-weight: 300; }
.quote-text { font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.7; max-width: 900px; margin: 30px auto; letter-spacing: .02em; color: var(--navy); }
.quote-text em { font-family: var(--font-serif); font-style: normal; color: var(--blue); font-weight: 500; margin: 0 .08em; }
.quote-cite { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); font-weight: 500; }
.quote-cite b { color: var(--navy); font-weight: 600; margin-right: 12px; font-family: var(--font-serif); }

/* CONTACT CTA */
.contact-cta { background: var(--blue-soft); color: var(--navy); padding: clamp(48px, 6vw, 80px) max(var(--pad-x), calc((100vw - var(--content-max)) / 2)) 50px; position: relative; overflow: hidden; }
.contact-cta::before { content:""; position: absolute; top:-30%; right:-15%; width: 70%; height: 180%; background: radial-gradient(circle, rgba(91,108,255,.18), transparent 60%); pointer-events: none; }
.contact-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; color: var(--blue); font-weight: 500; }
.contact-eyebrow::before { content:""; width: 24px; height: 1px; background: var(--blue); }
.contact-title { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.3; letter-spacing: .01em; font-weight: 500; margin: 24px 0 14px; position: relative; }
.contact-title em { font-family: var(--font-serif); font-style: normal; color: var(--blue); font-weight: 500; margin: 0 .08em; }
.contact-lead { font-family: var(--font-sans); font-size: 19px; color: var(--ink-dim); max-width: 700px; line-height: 1.9; margin-bottom: 50px; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; border-top: 1px solid rgba(29,32,128,.15); padding-top: 40px; position: relative; }
.contact-col-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; color: var(--blue); font-weight: 500; }
.contact-col a, .contact-col p { font-family: var(--font-serif); font-size: 20px; line-height: 1.6; font-weight: 400; display: block; margin-bottom: 4px; letter-spacing: .01em; }
.contact-col a { border-bottom: 1px solid transparent; transition: border .3s, color .3s; }
.contact-col a:hover { border-bottom-color: var(--blue); color: var(--blue); }
.contact-cta-btn { display: inline-flex; align-items: center; gap: 14px; padding: 17px 28px; background: var(--navy); color: #fff !important; border-radius: 999px; font-family: var(--font-serif); font-size: 16px; letter-spacing: .08em; font-weight: 600; margin-top: 20px; transition: background .3s, color .3s, transform .3s; border-bottom: none !important; }
.contact-cta-btn:hover { background: var(--blue); color: #fff !important; transform: translateY(-2px); border-bottom: none !important; }
.contact-cta-btn span { font-size: 19px; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }

/* INFO TABLE */
.info-table { width: 100%; border-collapse: collapse; margin-top: 30px; }
.info-table tr { border-bottom: 1px solid var(--line); }
.info-table th, .info-table td { padding: 20px 8px; text-align: left; vertical-align: top; font-family: var(--font-serif); font-size: 18px; line-height: 1.8; }
.info-table th { width: 200px; font-weight: 500; color: var(--ink-dim); font-size: 14px; letter-spacing: .12em; padding-right: 20px; }
.info-table td { color: var(--navy); }
.info-table a { color: var(--blue); border-bottom: 1px solid currentColor; }
@media (max-width: 680px){ .info-table th, .info-table td { display: block; width: 100%; padding: 10px 0; } .info-table th { padding-top: 20px; border: none; font-size: 13px; } .info-table td { padding-bottom: 20px; } }

/* VALUES */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.value-card { padding: 36px 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); transition: transform .4s, box-shadow .4s, border-color .4s; }
.value-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(29,32,128,.08); border-color: var(--navy); }
.value-num { font-family: var(--font-serif); font-style: italic; font-size: 44px; color: var(--blue); font-weight: 300; line-height: 1; margin-bottom: 18px; }
.value-title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: .02em; color: var(--navy); margin-bottom: 6px; }
.value-en { font-family: var(--font-serif); font-style: italic; color: var(--blue); font-size: 16px; margin-bottom: 14px; }
.value-desc { font-family: var(--font-sans); font-size: 18px; line-height: 1.85; color: var(--ink-dim); }
@media (max-width: 860px){ .values-grid { grid-template-columns: 1fr; } }

/* PROSE */
.prose { max-width: 820px; margin: 0 auto; font-family: var(--font-sans); font-size: 19px; line-height: 2.1; color: var(--navy); }
.prose p { margin-bottom: 1.6em; }
.prose p.lead { font-size: clamp(22px, 2vw, 24px); font-weight: 500; line-height: 1.7; margin-bottom: 2em; color: var(--navy); }
.prose em { font-family: var(--font-sans); font-style: normal; color: var(--blue); font-weight: 500; margin: 0 .08em; }
.prose .sig { font-family: var(--font-sans); margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--line); text-align: right; font-size: 18px; color: var(--ink-dim); }
.prose .sig b { font-family: var(--font-sans); font-size: 22px; color: var(--navy); display: block; margin-top: 4px; }

/* SERVICE LIST */
.service-list { border-top: 1px solid var(--line); margin-top: 30px; }
.service-item { display: grid; grid-template-columns: 80px 1fr 50px; align-items: center; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding .3s, background .3s; }
.service-item:hover { padding-left: 16px; padding-right: 16px; background: var(--bg-2); }
.service-item:hover .service-arrow { transform: translateX(6px); color: var(--blue); }
/* 静的表示（div版）は矢印列なし・ホバー効果なし */
div.service-item { grid-template-columns: 80px 1fr; }
div.service-item:hover { padding-left: 0; padding-right: 0; background: transparent; }
.service-item-num { font-family: var(--font-mono); font-size: 14px; color: var(--ink-dim); letter-spacing: .12em; font-weight: 500; }
.service-item-content h3 { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; line-height: 1.3; color: var(--navy); margin-bottom: 8px; }
.service-item-content h3 em { font-family: var(--font-serif); font-style: normal; color: var(--blue); font-weight: 500; margin: 0 .08em; }
.service-item-content p { font-family: var(--font-serif); font-size: 18px; color: var(--ink-dim); line-height: 1.8; max-width: 700px; }
.service-arrow { font-family: var(--font-serif); font-size: 26px; color: var(--ink-dim); transition: transform .4s, color .4s; }
@media (max-width: 680px){ .service-item { grid-template-columns: 40px 1fr 30px; gap: 16px; } div.service-item { grid-template-columns: 40px 1fr; } }

/* FORM */
.form-wrap { max-width: 780px; margin: 0 auto; }
.form-row { margin-bottom: 28px; }
.form-row label { display: block; font-family: var(--font-serif); font-size: 16px; letter-spacing: .04em; color: var(--navy); font-weight: 500; margin-bottom: 10px; }
.form-row label .req { color: var(--blue); margin-left: 6px; font-size: 12px; font-family: var(--font-mono); }
.form-row input, .form-row textarea, .form-row select { width: 100%; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; font-family: var(--font-serif); font-size: 19px; color: var(--navy); transition: border-color .3s, box-shadow .3s; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91,108,255,.12); }
.form-row textarea { min-height: 160px; resize: vertical; font-family: var(--font-serif); line-height: 1.8; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 680px){ .form-row-2 { grid-template-columns: 1fr; } }
.form-submit { display: inline-flex; align-items: center; gap: 12px; padding: 16px 36px; background: var(--navy); color: #fff; border-radius: 999px; font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: .08em; border: none; transition: background .3s, transform .3s; cursor: pointer; }
.form-submit:hover { background: var(--blue); transform: translateY(-2px); }

/* RECRUIT PERKS */
.recruit-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.perk-card { padding: 26px 22px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.perk-card:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: 0 14px 40px rgba(29,32,128,.08); }
.perk-icon { font-family: var(--font-serif); font-style: italic; font-size: 34px; color: var(--blue); line-height: 1; margin-bottom: 18px; }
.perk-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.perk-desc { font-family: var(--font-sans); font-size: 18px; color: var(--ink-dim); line-height: 1.8; }
@media (max-width: 860px){ .recruit-perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .recruit-perks { grid-template-columns: 1fr; } }

/* FOOTER */
footer { background: var(--navy); color: #d4dcff; padding: 60px max(var(--pad-x), calc((100vw - var(--content-max)) / 2)) 26px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand .logo-mark { background: #fff; }
.footer-brand p { font-family: var(--font-serif); font-size: 16px; line-height: 1.9; margin-top: 18px; color: #fff; max-width: 340px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fff; font-weight: 500; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { display: block; font-family: var(--font-serif); font-size: 16px; color: #d4dcff; transition: color .3s; margin-bottom: 9px; }
.footer-col a:hover { color: #fff; }
.footer-col a .ext { font-family: var(--font-mono); font-size: 12px; margin-left: 4px; opacity: .6; }
.footer-bottom { padding-top: 26px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; text-align: center; }
.footer-bottom .copyright { color: #d4dcff; }
@media (max-width: 860px){ .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top { grid-template-columns: 1fr; } }

/* SCROLL REVEAL */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ===== EXTRACTED FROM INLINE STYLES ===== */

/* PC表示時のみ改行 */
br.pc-only { display: none; }
@media (min-width: 861px) { br.pc-only { display: inline; } }

/* セクション冒頭の幅制限ラッパー */
.section-intro { max-width: 900px; }
.section-intro.is-narrow { max-width: 860px; }
.section-intro.has-mb-lg { margin-bottom: clamp(32px, 4vw, 56px); }
.section-intro.has-mb-md { margin-bottom: 20px; }
.section-intro.has-mb-sm { margin-bottom: 10px; }
.section-intro.is-centered { margin-left: auto; margin-right: auto; margin-bottom: 50px; }

/* ロゴマーク解説のリード文 */
.logo-meaning-lead { font-family: var(--font-sans); font-size: 19px; line-height: 2; color: var(--ink-dim); margin-bottom: 24px; }

/* 会社情報テーブル内の英語社名 */
.company-en { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); letter-spacing: .1em; }

/* コンタクトCTA内の補足キャプション */
.contact-col-caption { font-size: 16px; color: var(--ink-dim); margin-top: 8px; }

/* 中央寄せモディファイア */
.is-text-centered { text-align: center; }

/* ヒーロー用の大きめタイトルサイズ */
.section-title-big.is-hero-size { font-size: clamp(26px, 3vw, 44px); }

/* セクション冒頭の section-sub に下マージンを足す */
.section-sub.has-mb-lg { margin-bottom: 40px; }

/* logo-meanings の上マージンをリセット */
.logo-meanings.is-flush { margin-top: 0; }

/* フォーム同意行 */
.form-agree { display: flex; align-items: flex-start; gap: 12px; }
.form-agree input[type="checkbox"] { width: auto; margin-top: 4px; }
.form-agree label { margin: 0; font-size: 16px; line-height: 1.7; }
.form-agree a { color: var(--blue); border-bottom: 1px solid currentColor; }

/* 送信ボタン行 */
.form-submit-row { text-align: center; margin-top: 36px; }
.form-submit-arrow { font-size: 19px; }

/* フッターロゴ名 */
.footer-logo-name { color: #fff; }
.footer-logo-name small { color: #d4dcff; }

/* ===== WORDPRESS INTEGRATION ===== */

/* wp_nav_menu() の <ul><li> 出力を既存のflex内に透過配置 */
.nav-links ul.menu,
.nav-links ul.menu > li {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* スマホメニュー展開時、liがflexの子になるので個別調整 */
@media (max-width: 1100px){
  .nav-links ul.menu {
    display: contents;
  }
  .nav-links ul.menu > li {
    display: contents;
  }
}

/* ===== CONTACT FORM 7 INTEGRATION ===== */

/* CF7 のフォーム要素に既存スタイルを適用 */
.wpcf7 {
  margin: 0;
}
.wpcf7 form.wpcf7-form {
  display: grid;
  gap: 28px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--navy);
  transition: border-color .3s, box-shadow .3s;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(91,108,255,.12);
}
.wpcf7 textarea {
  min-height: 160px;
  resize: vertical;
}
.wpcf7 .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 680px){
  .wpcf7 .form-row-2 { grid-template-columns: 1fr; }
}
.wpcf7 .form-row label {
  display: block;
  font-family: var(--font-serif);
  letter-spacing: .12em;
  color: var(--ink-dim);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wpcf7 .req {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--blue);
  letter-spacing: .15em;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--blue);
  border-radius: 2px;
  vertical-align: middle;
}
.wpcf7 .form-agree input[type="checkbox"] {
  width: auto !important;
  margin-top: 4px;
}
.wpcf7 .form-agree label {
  margin: 0;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0;
}
.wpcf7 .form-agree a {
  color: var(--blue);
  border-bottom: 1px solid currentColor;
}
.wpcf7 input.form-submit,
.wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  border: none;
  cursor: pointer;
  width: auto;
  transition: background .3s, transform .3s;
}
.wpcf7 input.form-submit:hover,
.wpcf7 input[type="submit"]:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

/* CF7のバリデーションメッセージ */
.wpcf7-not-valid-tip {
  color: #d33;
  font-size: 13px;
  margin-top: 6px;
  display: block;
}
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 16px 20px !important;
  border-width: 1px !important;
  border-radius: 4px !important;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #3fa84a !important;
  background: #f0f9f1;
  color: #1f5128;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #d33 !important;
  background: #fdf4f4;
  color: #8b1f1f;
}

/* フッターメニュー: wp_nav_menu の <ul><li> 出力を既存の縦並びに透過配置 */
.footer-col ul.footer-menu {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col ul.footer-menu > li {
  display: contents;
  list-style: none;
}

/* ===== BLOCK EDITOR (Gutenberg) FRONT-END STYLES ===== */

/* page.php の本文ラッパー */
.page-content {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.9;
  color: var(--navy);
}

/* 段落 */
.page-content p {
  margin-bottom: 1.5em;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.9;
  color: var(--navy);
}

/* 段落内の em（強調）— 全体のem基準と統一 */
.page-content em {
  font-style: normal;
  font-weight: 500;
  color: var(--blue);
}
.page-content strong, .page-content b { font-weight: 700; }

/* 見出し */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: .02em;
  line-height: 1.4;
  margin-top: 2.4em;
  margin-bottom: .8em;
}
.page-content h1 { font-size: clamp(28px, 3.4vw, 38px); }
.page-content h2 { font-size: clamp(24px, 2.8vw, 32px); padding-bottom: .4em; border-bottom: 1px solid var(--line); }
.page-content h3 { font-size: clamp(20px, 2.2vw, 24px); }
.page-content h4 { font-size: clamp(18px, 1.9vw, 20px); }
.page-content h5 { font-size: 18px; }
.page-content h6 { font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }

/* リンク */
.page-content a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .3s;
}
.page-content a:hover { color: var(--navy-deep); }

/* リスト */
.page-content ul,
.page-content ol {
  margin: 1.2em 0 1.6em;
  padding-left: 1.6em;
}
.page-content li {
  margin-bottom: .5em;
  line-height: 1.9;
}
.page-content ul li::marker { color: var(--blue); }
.page-content ol li::marker { color: var(--blue); font-family: var(--font-mono); }

/* 引用 */
.page-content .wp-block-quote,
.page-content blockquote {
  border-left: 3px solid var(--blue);
  padding: 18px 0 18px 28px;
  margin: 2em 0;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--ink-dim);
  line-height: 1.8;
}
.page-content .wp-block-quote cite,
.page-content blockquote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--ink-dim);
  font-style: normal;
  text-transform: uppercase;
}
.page-content .wp-block-pullquote {
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
  margin: 3em 0;
}
.page-content .wp-block-pullquote p {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--navy);
}

/* 区切り線 */
.page-content hr,
.page-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--line);
  margin: 3em auto;
  max-width: 100%;
}
.page-content .wp-block-separator.is-style-wide { max-width: 100%; }
.page-content .wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
  line-height: 1;
  background: none;
}

/* 画像 */
.page-content .wp-block-image {
  margin: 2em 0;
}
.page-content .wp-block-image img {
  border-radius: 6px;
  max-width: 100%;
  height: auto;
}
.page-content .wp-block-image figcaption {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink-dim);
  text-align: center;
  margin-top: 12px;
}

/* 整列クラス（alignwide / alignfull） */
.page-content .alignwide {
  max-width: var(--content-max);
  margin-left: calc(50% - 50vw + var(--pad-x));
  margin-right: calc(50% - 50vw + var(--pad-x));
  width: auto;
}
.page-content .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* テーブル */
.page-content .wp-block-table {
  margin: 2em 0;
  overflow-x: auto;
}
.page-content .wp-block-table table,
.page-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 16px;
}
.page-content .wp-block-table th,
.page-content .wp-block-table td,
.page-content table th,
.page-content table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.page-content .wp-block-table th,
.page-content table th {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
  background: rgba(232,234,255,.3);
  letter-spacing: .04em;
}

/* ボタン */
.page-content .wp-block-buttons {
  margin: 2em 0;
}
.page-content .wp-block-button__link {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .3s, transform .3s;
  display: inline-block;
}
.page-content .wp-block-button__link:hover {
  background: var(--blue);
  transform: translateY(-2px);
  color: #fff;
}
.page-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}

/* コード */
.page-content code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--blue-soft);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--navy);
}
.page-content .wp-block-code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--blue-soft);
  padding: 18px 22px;
  border-radius: 4px;
  border-left: 3px solid var(--blue);
  margin: 1.5em 0;
  color: var(--navy);
  overflow-x: auto;
}

/* カラム */
.page-content .wp-block-columns {
  gap: 32px;
  margin: 2em 0;
}

/* テキストカラーユーティリティ（カラーパレット連動）*/
.page-content .has-navy-color { color: var(--navy); }
.page-content .has-navy-deep-color { color: var(--navy-deep); }
.page-content .has-blue-color { color: var(--blue); }
.page-content .has-ink-dim-color { color: var(--ink-dim); }
.page-content .has-navy-background-color { background-color: var(--navy); }
.page-content .has-blue-background-color { background-color: var(--blue); }
.page-content .has-blue-soft-background-color { background-color: var(--blue-soft); }
.page-content .has-bg-background-color { background-color: var(--bg); }

/* 背景色を持つブロックの内側余白 */
.page-content .has-background {
  padding: 24px 28px;
  border-radius: 4px;
}

/* レスポンシブ */
@media (max-width: 680px){
  .page-content { font-size: 17px; }
  .page-content p { font-size: 17px; line-height: 1.85; }
  .page-content .wp-block-columns { flex-direction: column; }
}

/* ===== CTA / NAV ARROW: 矢印をテキスト矢印として表示 ===== */
/* font-variant-emoji: text で OS のカラー絵文字フォールバックを抑制 */
.contact-cta-btn span {
  font-variant-emoji: text;
  display: inline-block;
}

/* フッターの外部メディアリンクの矢印 - 絵文字化を防止 */
.footer-col .ext-arrow {
  font-variant-emoji: text;
  font-size: 0.9em;
  margin-left: 4px;
  opacity: .8;
}

/* 同セッション内でloaderを2回以上表示しない（ページ遷移時はスキップ）*/
html.loader-skip .loader {
  display: none !important;
  animation: none !important;
}

/* 汎用ページ(page.php)のヒーロー直下のセクション余白を縮小 */
.section.section-narrow-top {
  padding-top: clamp(40px, 5vw, 70px);
}

/* リンクではない静的な value-card はホバー効果を無効化 */
.value-card.is-static { cursor: default; }
.value-card.is-static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

/* スマホメニュー展開中、header の backdrop-filter が
   .nav-links (position: fixed) の containing block を
   ヘッダー領域に縮小してしまう問題への対策 */
body.nav-open header.nav,
body.nav-open header.nav.scrolled {
  backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* スマホ表示時、CTAの背景グラデーションがちらつかないよう調整 */
@media (max-width: 860px) {
  .contact-cta::before {
    top: -20%;
    right: -50%;
    width: 200%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(91,108,255,.32), transparent 70%);
  }
}

/* 会社案内: 事業内容セクションの「詳細を見る」ボタン */
.company-action { margin-top: 60px; }

/* 会社案内: 取引先銀行リスト */
.bank-list { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 20px; }
.bank-item {
  padding: 18px 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--navy);
  font-weight: 500;
}

/* 会社案内: 事業内容カード内のリンクが正しく表示されるよう */
.value-desc a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .3s;
}
.value-desc a:hover { color: var(--navy-deep); }


/* 代表挨拶: h2 を .prose と同じ幅(820px)・中央寄せで揃える + 下余白 */
.message-heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(36px, 4vw, 56px);
}

/* ===== 経営理念ページ用CSS ===== */

/* values-grid のバリアント: 4カラム / 2カラム */
.values-grid.is-4col { grid-template-columns: repeat(4, 1fr); }
.values-grid.is-2col { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .values-grid.is-4col { grid-template-columns: 1fr 1fr; }
  .values-grid.is-2col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .values-grid.is-4col { grid-template-columns: 1fr; }
}

/* 経営理念: 説明文ブロック（.prose と同じ幅・スタイルで揃える） */
.philosophy-text {
  max-width: 820px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 2.1;
  color: var(--navy);
}
.philosophy-text p { margin: 0; }

/* 社名ブロック */
.company-name-block {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.company-name-ja {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: .04em;
}
.company-name-en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--blue);
  letter-spacing: .1em;
}

/* コールアウトボックス（強調ブロック） */
.callout-box {
  background: var(--blue-soft);
  border-left: 4px solid var(--navy);
  padding: 28px 32px;
  margin: 2em 0;
  border-radius: 4px;
}
.callout-box p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.9;
  color: var(--navy);
  margin: 0;
}
.callout-box p b { font-weight: 700; }
@media (max-width: 680px) {
  .callout-box { padding: 22px 22px; }
}

/* チェックリスト */
.philosophy-list {
  list-style: none;
  padding: 0;
  margin: 1.6em 0;
}
.philosophy-list li {
  padding: 10px 0 10px 32px;
  position: relative;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 2.1;
  color: var(--navy);
}
.philosophy-list li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--blue);
  font-weight: 700;
  font-size: 18px;
}

/* 注釈テキスト */
.philosophy-note {
  font-size: 15px !important;
  color: var(--ink-dim) !important;
  border-top: 1px solid var(--line);
  padding-top: 1.5em;
  margin-top: 2em;
}

/* 経営理念ページ: 価値循環図解 */
.value-cycle-diagram {
  max-width: 680px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
}
.value-cycle-diagram img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== 経営理念ページ追加スタイル ===== */

/* is-left-content: 中央寄せ解除 + 幅制約解除（幅いっぱいに表示） */
.section.is-left-content .prose,
.section.is-left-content .philosophy-text,
.section.is-left-content .values-grid.is-2col {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
}
.section.is-left-content .company-name-block {
  text-align: left;
  margin-left: 0;
}

/* セクション間の余白を縮小（連続するセクション用） */
.section.is-tight {
  padding-top: clamp(40px, 5vw, 70px);
  padding-bottom: clamp(40px, 5vw, 70px);
}

/* callout-box バリアント: ネイビー背景＋白テキスト（左ボーダー削除） */
.callout-box.is-navy {
  background: var(--navy);
  border-left: none;
  color: #fff;
}
.callout-box.is-navy p,
.callout-box.is-navy p b {
  color: #fff;
}

/* callout-box バリアント: h2スタイル（背景・ボーダーなしの装飾的見出し風） */
.callout-box.is-h2 {
  background: transparent;
  border-left: none;
  padding: 0;
}
.callout-box.is-h2 p {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--navy);
}
/* callout-box.is-h2 内のem: 明朝のまま青色強調 */
.callout-box.is-h2 em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  color: var(--blue);
}

/* 経営理念: 強調テキスト（背景なし・通常より少し大きく・太字） */
.prose p.is-emphasis {
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.9;
}
.prose p.is-emphasis b {
  font-weight: 700;
}

/* ===== 事業内容ページ追加スタイル ===== */

/* メディア詳細ブロック */
.media-detail {
  padding: clamp(28px, 3vw, 40px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 28px;
}
.media-detail:last-child { margin-bottom: 0; }

.media-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.media-detail-logo {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
}
.media-detail-name {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: .02em;
}

.media-detail-section { margin-bottom: 22px; }
.media-detail-section:last-of-type { margin-bottom: 28px; }
.media-detail-label {
  display: inline-block;
  background: var(--blue-soft);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 500;
}
.media-detail-section p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--navy);
  margin: 0;
}
.media-detail-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.media-detail-section ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--navy);
}
.media-detail-section ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}

.media-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.media-detail-links a {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--blue-soft);
  color: var(--navy);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: background .3s, color .3s;
  text-decoration: none;
}
.media-detail-links a:hover {
  background: var(--navy);
  color: #fff;
}

/* パートナーシップ: 対応可能な取り組み例 */
.partnership-options {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 24px 0;
}
.partnership-options-label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.partnership-options .philosophy-list {
  margin: 0;
}
.partnership-options .philosophy-list li {
  padding: 6px 0 6px 28px;
  font-size: 16px;
}
.partnership-cta {
  margin-top: 32px;
}

/* 事業内容ページ: 「私たちの強み」セクションの上線削除＋余白縮小 */
.section.is-tight .service-list {
  border-top: none;
  margin-top: 8px;
}

/* メディア詳細ブロックのテキスト色を ink-dim に */
.media-detail-section p,
.media-detail-section ul li {
  color: var(--ink-dim);
}

/* 事業内容ページ: 「私たちの強み」の本文を右端いっぱいに広げる */
.section.is-tight .service-item-content p {
  max-width: none;
}

/* CTA: ボタン1つだけの中央配置（共通CTA用） */
.contact-single-action {
  text-align: center;
  margin-top: clamp(40px, 5vw, 60px);
}

/* お問い合わせページ: フォーム上のリード文 */
.contact-lead-text {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 56px);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 2;
  color: var(--ink-dim);
}
.contact-lead-text p {
  margin-bottom: 1em;
}
.contact-lead-text p:last-child {
  margin-bottom: 0;
}
.contact-lead-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-lead-text a:hover {
  color: var(--navy-deep);
}

/* ===== 採用情報ページ追加スタイル ===== */

/* メインリード */
.recruit-lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 2;
  color: var(--ink-dim);
  margin-top: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(28px, 3vw, 40px);
}
.recruit-lead-emphasis {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.8;
  margin: 0;
}

/* 採用ページ: 注釈テキスト（※印など） */
.prose p.recruit-note {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.8;
  margin-top: -0.4em;
  margin-bottom: 1.2em;
}

/* 採用ページの図表 */
.recruit-diagram {
  margin: clamp(28px, 3.5vw, 48px) 0;
  text-align: center;
}
.recruit-diagram img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 募集ポジションのブロック */
.recruit-position-block {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  margin-bottom: 24px;
}
.recruit-position-block:last-of-type {
  margin-bottom: 0;
}
.recruit-position-heading {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--blue);
  display: inline-block;
}
.recruit-position-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recruit-position-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
}
.recruit-position-list li:last-child {
  border-bottom: none;
}
.recruit-position-list li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--blue);
  font-weight: 700;
}

/* オフィス写真ギャラリー */
.recruit-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin: clamp(24px, 3vw, 40px) 0;
}
.recruit-photo {
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.recruit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
}
@media (max-width: 680px) {
  .recruit-photo-grid {
    grid-template-columns: 1fr;
  }
}

/* 募集情報リスト */
.recruit-info-list {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  border-top: 1px solid var(--line);
}
.recruit-info-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
}
.recruit-info-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
}
.recruit-info-value {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-dim);
}
@media (max-width: 680px) {
  .recruit-info-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .recruit-info-value {
    font-size: 14px;
  }
}

/* callout-box.is-h2 内のサブ引用テキスト */
.quote-cite-inline {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-dim);
  margin-top: 0.6em;
}

/* トップページ: 私たちの強みカードのアイコン */
.strength-icon {
  width: 64px;
  height: 64px;
  margin: 0 0 20px;
}
.strength-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 680px) {
  .strength-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
  }
}

/* ===== PC/スマホで別メニューを切り替え ===== */

/* PC用メニュー（ul）: PCで横並び表示 */
.nav-links .menu-pc {
  display: flex !important;
  gap: 26px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links .menu-pc li { list-style: none; }

/* スマホ用メニュー（ul）: PCでは非表示 */
.nav-links .menu-mobile {
  display: none !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links .menu-mobile li { list-style: none; }

/* スマホ表示時: PC用を非表示、スマホ用を縦並び表示 */
@media (max-width: 1100px) {
  .nav-links .menu-pc { display: none !important; }
  .nav-links .menu-mobile {
    display: flex !important;
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }
  /* スマホメニュー: a要素の入場アニメーション（li基準で順次遅延） */
  .nav-links .menu-mobile li:nth-child(1) a { transition-delay: .08s; }
  .nav-links .menu-mobile li:nth-child(2) a { transition-delay: .12s; }
  .nav-links .menu-mobile li:nth-child(3) a { transition-delay: .16s; }
  .nav-links .menu-mobile li:nth-child(4) a { transition-delay: .20s; }
  .nav-links .menu-mobile li:nth-child(5) a { transition-delay: .24s; }
  .nav-links .menu-mobile li:nth-child(6) a { transition-delay: .28s; }
  .nav-links .menu-mobile li:nth-child(7) a { transition-delay: .32s; }
  .nav-links .menu-mobile li:nth-child(8) a { transition-delay: .36s; }
}

/* section-title-big: 中央寄せバリアント */
.section-title-big.is-centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ===== パスワード保護されたページ ===== */
.password-protected-wrap {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(24px, 3vw, 40px) 0;
}
.password-message {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink-dim);
  line-height: 2;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.password-message em {
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--blue);
  font-weight: 500;
}

/* WordPress標準の <form class="post-password-form"> をスタイル */
.post-password-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 380px;
  margin: 0 auto;
}
.post-password-form p {
  margin: 0;
  width: 100%;
}
.post-password-form p:first-of-type {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-dim);
  text-align: left;
  line-height: 1.7;
  letter-spacing: .04em;
}
.post-password-form label {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--navy);
  letter-spacing: .04em;
  text-align: left;
}
.post-password-form input[type="password"] {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color .3s;
  box-sizing: border-box;
}
.post-password-form input[type="password"]:focus {
  outline: none;
  border-color: var(--blue);
}
.post-password-form input[type="submit"] {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #fff;
  background: var(--navy);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s, transform .3s;
  margin-top: 4px;
}
.post-password-form input[type="submit"]:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

/* page.php(汎用ページ)でのパスワードフォーム表示時 */
.page-content .post-password-form {
  margin: 40px auto;
}