@charset "utf-8";

/* Fonts loaded via <link> in index.html (faster than @import). Inter dropped: redundant with Plus Jakarta Sans. */

/* ============================================================
   Light institutional palette (white base / deep navy primary).
   ============================================================ */
:root {
  /* navy scale — brand + accent */
  --navy-900: #0A1A2F; --navy-800: #0E2542; --navy-700: #123A63; --navy-500: #2C5B8F;
  --navy-tint: rgba(18, 58, 99, 0.06); --navy-tint-strong: rgba(18, 58, 99, 0.12); --navy-ring: rgba(18, 58, 99, 0.18);
  /* surfaces */
  --bg-page: #FFFFFF; --bg-soft: #F5F7FA; --bg-card: #FFFFFF; --bg-inset: #F8FAFC;
  --border: #E3E8EF; --border-strong: #8695A9;
  /* text */
  /* --text-muted は #F5F7FA 背景上でも 5.1:1 を確保できる濃さに調整（#64748B だと 4.26:1 で基準割れ） */
  --text-main: #0A1A2F; --text-body: #33445C; --text-muted: #5A6A80;
  /* footer (dark anchor block) */
  --footer-bg: #0A1A2F; --footer-text: #C7D2E0; --footer-dim: #7C8CA3; --footer-border: rgba(255, 255, 255, 0.10);
  /* semantic */
  --accent-verified: #059669;
  /* type + motion */
  --font-serif: 'Noto Serif JP', Georgia, serif; --font-sans: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace;
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(10, 26, 47, 0.04), 0 8px 24px rgba(10, 26, 47, 0.06);
  --shadow-lift: 0 2px 4px rgba(10, 26, 47, 0.05), 0 16px 40px rgba(10, 26, 47, 0.10);
}

* { margin: 0px; padding: 0px; box-sizing: border-box; }

html { scroll-behavior: smooth; font-family: var(--font-sans); background-color: var(--bg-page); color: var(--text-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }

body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; position: relative; background-color: var(--bg-page); }

a { color: inherit; text-decoration: none; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s; }

ul { list-style: none; }

.container { width: 100%; max-width: 1140px; margin: 0px auto; padding: 0px 24px; }

/* ===== header ===== */
.site-header { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: background 0.3s, border-color 0.3s; }

.nav-wrapper { display: flex; align-items: center; justify-content: space-between; height: 80px; }

.brand-logo { display: flex; align-items: center; gap: 14px; cursor: pointer; }

.brand-mark { width: 40px; height: 40px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%); border: 1px solid var(--navy-800); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 4px 14px rgba(10, 26, 47, 0.18); }

.brand-mark::before { content: ""; width: 16px; height: 16px; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; transform: rotate(45deg); position: absolute; top: 10px; left: 10px; }

.brand-mark::after { content: ""; width: 7px; height: 7px; background: #FFFFFF; border-radius: 50%; position: absolute; bottom: 10px; right: 10px; }

.brand-text { display: flex; flex-direction: column; }

.brand-name { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: var(--text-main); letter-spacing: 0.04em; line-height: 1.2; }

.nav-links { display: flex; align-items: center; gap: 32px; }

.nav-item { font-size: 0.92rem; font-weight: 500; color: var(--text-body); position: relative; padding: 8px 0px; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s; }

.nav-item:hover, .nav-item.active { color: var(--navy-700); }

.nav-item::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 0px; height: 2px; background: var(--navy-700); transition: width 0.3s var(--transition-smooth); }

.nav-item.active::after, .nav-item:hover::after { width: 100%; }

/* ===== sections ===== */
.page-section { display: block; padding: 60px 0; scroll-margin-top: 84px; }
#top { padding-top: 104px; background: var(--bg-page); }
#business, #contact { background: var(--bg-soft); }
#company, #privacy { background: var(--bg-page); }
#business, #company, #contact, #privacy { border-top: 1px solid var(--border); }

/* ===== hero ===== */
.hero-wrapper { position: relative; padding: 76px 36px 84px; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%); border: 1px solid var(--border); box-shadow: var(--shadow-card); }

/* faded photographic texture — atmosphere without a dark photo fighting the light layout */
.hero-wrapper::before { content: ""; position: absolute; inset: 0; background: url("./hero_trust_bg.webp") center center / cover no-repeat; opacity: 0.07; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, transparent 85%); mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, transparent 85%); pointer-events: none; }

.hero-content { position: relative; z-index: 2; max-width: 820px; margin: 0px auto; text-align: center; }

.hero-title { font-family: var(--font-serif); font-size: 3rem; font-weight: 700; color: var(--text-main); line-height: 1.3; letter-spacing: 0.01em; margin-bottom: 22px; }

.hero-title span { color: var(--navy-700); }

.hero-subtitle { font-size: 1.1rem; color: var(--text-body); max-width: 640px; margin: 0px auto 32px; font-weight: 400; line-height: 1.8; }

.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* ===== buttons ===== */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 30px; background: var(--navy-700); color: #FFFFFF; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-sm); border: 1px solid var(--navy-700); cursor: pointer; box-shadow: 0 2px 8px rgba(18, 58, 99, 0.18); transition: color .3s, background-color .3s, border-color .3s, box-shadow .3s, transform .3s, opacity .3s; }

.btn-primary:hover { transform: translateY(-2px); background: var(--navy-800); border-color: var(--navy-800); box-shadow: 0 8px 22px rgba(18, 58, 99, 0.26); }

/* ===== section headings ===== */
.section-title-wrap { text-align: center; max-width: 680px; margin: 0px auto 40px; }

.section-tag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--navy-500); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; display: block; }

.section-title { font-family: var(--font-serif); font-size: 2.1rem; color: var(--text-main); font-weight: 700; line-height: 1.3; margin-bottom: 14px; }

.section-desc { font-size: 0.98rem; color: var(--text-muted); }

/* ===== business pillars =====
   主ブロック（方針を内包）＋従ブロックの階層。
   主従の差は面の高さ（影の有無）と分量で付け、左パディングは揃える。 */
.pillar-main, .pillar-sub { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 36px 40px; }

.pillar-main { box-shadow: var(--shadow-card); margin-bottom: 20px; }

.pillar-sub { padding-top: 30px; padding-bottom: 30px; margin-bottom: 40px; }

.pillar-title { font-family: var(--font-serif); color: var(--text-main); line-height: 1.35; margin-bottom: 16px; }

.pillar-main .pillar-title { font-size: 1.45rem; }

.pillar-sub .pillar-title { font-size: 1.15rem; margin-bottom: 10px; }

.pillar-lead { font-size: 1rem; color: var(--text-body); line-height: 1.85; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }

.pillar-sub p { font-size: 0.93rem; color: var(--text-body); line-height: 1.75; }

@media (max-width: 768px) {
  .pillar-main, .pillar-sub { padding: 26px 20px; }
  .pillar-main .pillar-title { font-size: 1.2rem; }
}

.policy-item { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--border); }

.policy-item:last-child { border-bottom: none; padding-bottom: 0; }

.policy-item dt { font-size: 0.9rem; font-weight: 600; color: var(--navy-800); }

.policy-item dd { font-size: 0.93rem; color: var(--text-body); line-height: 1.75; }

@media (max-width: 768px) {
  .policy-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ===== compliance callout ===== */
.compliance-box { background: var(--bg-inset); border: 1px solid var(--border); border-left: 4px solid var(--navy-700); border-radius: var(--radius-md); padding: 28px 32px; margin-bottom: 40px; }

.compliance-box h4 { font-family: var(--font-serif); font-size: 1.1rem; color: var(--navy-800); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }

.compliance-box h4 svg { width: 20px; height: 20px; flex-shrink: 0; }

.compliance-box p { font-size: 0.93rem; color: var(--text-body); line-height: 1.8; }

.compliance-box strong { color: var(--navy-800); font-weight: 600; }

/* ===== corporate table ===== */
/* overflow-x:auto — 長い値が入っても切り取らずスクロールで読めるようにする */
.corp-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; margin-bottom: 40px; box-shadow: var(--shadow-card); }

.corp-table { width: 100%; border-collapse: collapse; }

.corp-table th, .corp-table td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--border); }

.corp-table tr:last-child th, .corp-table tr:last-child td { border-bottom: none; }

.corp-table th { width: 25%; background: var(--bg-soft); color: var(--navy-800); font-weight: 600; font-size: 0.9rem; }

.corp-table td { color: var(--text-body); font-size: 0.95rem; }

.copy-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 10px; background: var(--navy-tint); border: 1px solid var(--navy-tint-strong); border-radius: 4px; color: var(--navy-700); font-size: 0.75rem; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s; }

.copy-btn:hover { background: var(--navy-700); border-color: var(--navy-700); color: #FFFFFF; }

/* ===== representative message ===== */
.policy-card { line-height: 1.8; }

.message-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 40px; margin-bottom: 40px; box-shadow: var(--shadow-card); }

.message-header { margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }

.message-role { font-family: var(--font-mono); font-size: 0.78rem; color: var(--navy-500); letter-spacing: 0.1em; text-transform: uppercase; }

.message-name { font-family: var(--font-serif); font-size: 1.6rem; color: var(--text-main); font-weight: 700; }

.message-body p { margin-bottom: 14px; line-height: 1.8; font-size: 0.95rem; color: var(--text-body); }

/* ===== form ===== */
.form-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 40px; max-width: 720px; margin: 0px auto; box-shadow: var(--shadow-card); }

.form-group { margin-bottom: 20px; }

.form-label { display: block; font-size: 0.88rem; color: var(--text-main); font-weight: 600; margin-bottom: 6px; }

.form-label .required { color: #DC2626; margin-left: 4px; }

.form-control { width: 100%; padding: 12px 16px; background: #FFFFFF; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-main); font-size: 0.95rem; font-family: var(--font-sans); transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s; }

.form-control::placeholder { color: var(--text-muted); }

/* outline:none にすると詳細度でグローバルの :focus-visible を打ち消し、
   入力欄だけフォーカスリングが消える。色変化のみに留める。 */
.form-control:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--navy-ring); }

.form-control:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

/* native select needs explicit colors (Windows dark mode) */
select.form-control { background-color: #FFFFFF; color: var(--text-main); }

textarea.form-control { min-height: 120px; resize: vertical; }

.form-notice { font-size: 0.82rem; color: var(--text-muted); margin-top: 16px; text-align: center; }

.form-notice a { color: var(--navy-700); text-decoration: underline; }

.form-notice a:hover { color: var(--navy-500); }

/* 越境移転の同意チェック。チェックボックスとテキストを grid で分けるのは、
   テキストが複数行に折り返してもボックスが1行目に留まるようにするため。 */
.consent-group { margin: 26px 0 0; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }

.consent-label { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; cursor: pointer; font-size: 0.86rem; line-height: 1.75; color: var(--text-body); }

.consent-label input[type="checkbox"] { width: 17px; height: 17px; margin: 4px 0 0; accent-color: var(--navy-700); cursor: pointer; flex-shrink: 0; }

.consent-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

.consent-label a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 2px; }

.consent-label a:hover { color: var(--navy-500); }

.consent-label .required { color: #DC2626; margin-left: 3px; }

/* ===== toast =====
   visibility:hidden を併用する。opacity:0 だけだと支援技術のツリーに常時露出し、
   非表示のはずのトースト文言が本文の一部として読み上げられてしまう。 */
.toast-notification { position: fixed; bottom: 24px; right: 24px; background: #FFFFFF; border: 1px solid var(--border-strong); color: var(--text-main); padding: 12px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); display: flex; align-items: center; gap: 10px; z-index: 2000; transform: translateY(80px); opacity: 0; visibility: hidden; transition: transform .3s var(--transition-smooth), opacity .3s var(--transition-smooth), visibility .3s; }

.toast-notification.show { transform: translateY(0px); opacity: 1; visibility: visible; }

/* ===== footer (dark anchor) ===== */
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--footer-border); padding: 50px 0px 24px; margin-top: auto; color: var(--footer-text); }

/* ロゴ左・ナビ右の一列。ナビを横並びにして、縦長のリンク列が作る
   L字の空白（ブランド説明文を削除して以降できていた）をなくす。 */
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 30px; }

.site-footer .brand-name { color: #FFFFFF; }
.site-footer .brand-mark { background: rgba(255, 255, 255, 0.10); border-color: var(--footer-border); box-shadow: none; }

.footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }

.footer-links a { font-size: 0.88rem; color: var(--footer-dim); }

.footer-links a:hover { color: #FFFFFF; }

.footer-bottom { padding-top: 20px; border-top: 1px solid var(--footer-border); display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--footer-dim); gap: 16px; flex-wrap: wrap; }

/* ===== mobile ===== */
.mobile-menu-btn { display: none; background: none; border: none; color: var(--text-main); cursor: pointer; padding: 4px; }

.mobile-menu-btn svg { width: 22px; height: 22px; display: block; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-menu-btn { display: block; }
  .hero-title { font-size: 2.2rem; }
  .hero-wrapper { padding: 56px 22px 60px; }
  .message-card, .form-container { padding: 26px 20px; }
  .compliance-box { padding: 22px 20px; }
  .corp-table th, .corp-table td { padding: 12px 14px; }
  .corp-table th { width: 34%; }
}

@media (max-width: 768px) {
  .nav-links.open { display: flex; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 16px; background: rgba(255, 255, 255, 0.98); padding: 20px 24px;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lift); }
}

/* 商号を1行で表示するため、狭い端末ではロゴの文字を詰める。
   320px幅だとロゴとメニューボタンの間隔が3pxまで詰まるため。 */
@media (max-width: 360px) {
  .brand-name { font-size: 1.1rem; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark::before { width: 13px; height: 13px; top: 9px; left: 9px; }
  .brand-mark::after { width: 6px; height: 6px; bottom: 9px; right: 9px; }
}

:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 3px; }
.copy-btn, .nav-item, .brand-logo { cursor: pointer; }

/* ===== Web Interface Guidelines / frontend-design polish ===== */
html { color-scheme: light; }

/* Netlify Forms の honeypot。人間には見せず、botだけが埋めるおとり項目 */
.hidden-field { display: none; }

/* 見た目には出さず、支援技術にだけ渡す見出し（フォームのアクセシブルネーム用） */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* プライバシーポリシー本文の小見出し（h2→h3。見た目は従来のh4相当を維持） */
.policy-heading { font-size: 1rem; color: var(--navy-800); margin: 20px 0 10px; font-family: var(--font-sans); font-weight: 600; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 3000; padding: 10px 16px;
  background: var(--navy-700); color: #FFFFFF; border-radius: var(--radius-sm);
  font-weight: 600; transition: top .2s var(--transition-smooth); }
.skip-link:focus { top: 16px; }
button, a, .nav-item, .btn-primary, .copy-btn {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hero-title, .section-title, .message-name, .pillar-title, .compliance-box h4 { text-wrap: balance; }
/* 中央寄せの短い段落は行長を揃える（末尾1文字だけの行＝widowを防ぐ） */
.hero-subtitle, .section-desc { text-wrap: balance; }
.corp-table td, .message-name { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}