@charset "UTF-8";

/* =========================================================
   BPO Partners Co., Ltd. — Labuan, Malaysia
   配色：ネイビー #16284a ＋ ゴールド #c2a25c ＋ 白
   見出し：明朝（Noto Serif JP） + 英字セリフ（Cormorant Garamond）
   本文：ゴシック（Noto Sans JP）
   ========================================================= */

:root {
    --navy:        #16284a;
    --navy-deep:   #0f1d39;
    --navy-soft:   #1c3057;
    --gold:        #c2a25c;
    --gold-light:  #d8be86;
    --gold-deep:   #9f8243;
    --ink:         #243042;
    --text:        #2b2b2b;
    --muted:       #6b7280;
    --bg:          #f6f7f9;
    --bg-deep:     #eef1f6;
    --line:        #e4e7ec;
    --white:       #ffffff;
    --shadow:      0 10px 30px rgba(16, 29, 57, .10);
    --shadow-lg:   0 20px 50px rgba(16, 29, 57, .18);
}

html { font-size: 62.5%; scroll-behavior: smooth; }

body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
                 "Hiragino Sans", "Meiryo", sans-serif;
    font-size: 1.6rem;
    line-height: 1.85;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

.mincho {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN",
                 "Yu Mincho", "YuMincho", serif;
}

.serif-en {
    font-family: "Cormorant Garamond", "Noto Serif JP", "Times New Roman", serif;
    letter-spacing: .02em;
}

/* ---------- 共通レイアウト ---------- */
.wrap { width: min(1120px, 90%); margin-inline: auto; }

section { padding: clamp(64px, 9vw, 112px) 0; }
section.alt { background: var(--bg); }
section.dark { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--white); }

.sec-head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .en {
    display: block;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    letter-spacing: .45em;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.sec-head h2 {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    color: var(--navy);
    font-weight: 700;
    line-height: 1.4;
}
.dark .sec-head h2 { color: var(--white); }
.sec-head h2 .bar {
    display: block;
    width: 60px; height: 2px;
    background: var(--gold);
    margin: 22px auto 0;
}

.lead {
    text-align: center;
    max-width: 780px;
    margin: 0 auto clamp(32px, 4vw, 48px);
    color: var(--ink);
    font-size: clamp(1.5rem, 2.2vw, 1.75rem);
}
.dark .lead { color: #d6dae5; }

/* ---------- ボタン ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: 17px 40px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: .06em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer;
    border: 2px solid transparent;
}
.btn-gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy-deep);
    box-shadow: 0 8px 22px rgba(194, 162, 92, .38);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(194,162,92,.48); }
.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.65);
}
.btn-outline:hover { background: rgba(255,255,255,.10); border-color: var(--gold-light); color: var(--gold-light); }

/* グループ会社（日本法人）リンク用：ゴールド細枠で差別化 */
.btn-jp {
    border-color: var(--gold);
    color: var(--gold-light);
    letter-spacing: .08em;
}
.btn-jp:hover {
    background: var(--gold);
    color: var(--navy-deep);
    border-color: var(--gold);
}

.btn-ghost {
    background: transparent;
    color: var(--navy);
    border: 2px solid var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: var(--white); }

/* ---------- ヘッダー ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: 86px;
    display: flex;
    align-items: center;
    background: rgba(15, 29, 57, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(194, 162, 92, .35);
}
.site-header .wrap {
    width: min(1240px, 94%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-header .logo { display: inline-flex; align-items: center; gap: 14px; line-height: 1; }
.site-header .logo .mark {
    width: 42px; height: 42px;
    border: 1.5px solid var(--gold-light);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: 0;
}
.site-header .logo .brand {
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 3vw, 2.3rem);
    color: #fff;
    letter-spacing: .12em;
}
.site-header .logo .sub {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.05rem;
    color: var(--gold-light);
    letter-spacing: .3em;
    margin-top: 4px;
}

.gnav ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.gnav a {
    color: #eaeef6;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: .08em;
    transition: color .2s ease;
}
.gnav a:hover { color: var(--gold-light); }
.gnav .nav-cta {
    background: var(--gold);
    color: var(--navy-deep);
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
}
.gnav .nav-cta:hover { color: var(--navy-deep); background: var(--gold-light); }

/* ---------- 言語スイッチャー ---------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(194,162,92,.5);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
}
.lang-switch .lang-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    letter-spacing: .3em;
    color: var(--gold-light);
    text-transform: uppercase;
    margin-right: 4px;
    border-right: 1px solid rgba(194,162,92,.35);
    padding-right: 10px;
}
.lang-switch .lang-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: #c8cdd9;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color .2s ease, background .2s ease;
}
.lang-switch .lang-link:hover { color: var(--gold-light); }
.lang-switch .lang-link.is-active {
    color: var(--navy-deep);
    background: var(--gold);
}
.lang-switch .lang-sep {
    color: rgba(194,162,92,.4);
    font-size: 1.2rem;
}
.lang-switch .flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    flex-shrink: 0;
    background-color: #fff;
}
.lang-switch .flag svg { display: block; width: 100%; height: 100%; border-radius: 2px; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    content: ""; position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 26px; height: 2px;
    background: var(--gold-light);
    transition: transform .25s ease, top .25s ease;
}
.nav-toggle span { top: 50%; }
.nav-toggle span::before { top: -9px; }
.nav-toggle span::after  { top: 9px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle.open span::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* ---------- ヒーロー ---------- */
.hero {
    position: relative;
    margin-top: 86px;
    min-height: clamp(560px, 86vh, 760px);
    display: flex;
    align-items: center;
    color: var(--white);
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(15,29,57,.92) 0%, rgba(15,29,57,.70) 55%, rgba(15,29,57,.50) 100%),
        radial-gradient(ellipse at 70% 40%, rgba(194,162,92,.18), transparent 60%),
        linear-gradient(135deg, #0f1d39 0%, #16284a 60%, #1c3057 100%);
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 12% 88%, rgba(194,162,92,.10), transparent 35%),
        radial-gradient(circle at 92% 18%, rgba(194,162,92,.10), transparent 35%);
    pointer-events: none;
}
.hero .wrap { width: min(1120px, 90%); position: relative; z-index: 2; }
.hero .eyebrow {
    display: inline-block;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    letter-spacing: .42em;
    color: var(--gold-light);
    border-left: 2px solid var(--gold);
    padding-left: 16px;
    margin-bottom: 26px;
    text-transform: uppercase;
}
.hero h1 {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero h1 .accent { color: var(--gold-light); }
.hero h1 .small {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--gold-light);
    margin-top: 18px;
    letter-spacing: .04em;
}
.hero p.sub {
    margin: 28px 0 40px;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    max-width: 660px;
    line-height: 1.9;
    text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.hero .hero-btns { display: flex; flex-wrap: wrap; gap: 16px; }

.hero .hero-meta {
    margin-top: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 56px);
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.18);
    max-width: 720px;
}
.hero .hero-meta dt {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    letter-spacing: .35em;
    color: var(--gold-light);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.hero .hero-meta dd {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.45rem, 2vw, 1.65rem);
    color: #fff;
    line-height: 1.5;
}

/* ---------- About ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.about-text h3 {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    line-height: 1.6;
    margin-bottom: 18px;
}
.about-text h3 em {
    font-style: normal;
    color: var(--gold-deep);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
}
.about-text p {
    color: var(--ink);
    font-size: 1.55rem;
    margin-bottom: 16px;
}
.about-text .sig {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 20px;
    background: rgba(194,162,92,.10);
    border-left: 3px solid var(--gold);
    color: var(--navy);
    font-weight: 700;
    font-size: 1.5rem;
}

.about-visual {
    position: relative;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--white);
    padding: clamp(36px, 5vw, 56px);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.about-visual::before {
    content: "";
    position: absolute; right: -80px; top: -80px;
    width: 260px; height: 260px;
    border: 1px solid rgba(194,162,92,.25);
    border-radius: 50%;
}
.about-visual::after {
    content: "";
    position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px;
    border: 1px solid rgba(194,162,92,.18);
    border-radius: 50%;
}
.about-visual .av-eyebrow {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-light);
    letter-spacing: .35em;
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.about-visual h4 {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(2rem, 3.4vw, 2.5rem);
    line-height: 1.5;
    margin-bottom: 24px;
    position: relative;
}
.about-visual ul { display: grid; gap: 14px; position: relative; }
.about-visual li {
    padding-left: 26px;
    position: relative;
    font-size: 1.5rem;
    line-height: 1.7;
    color: #e7ebf4;
}
.about-visual li::before {
    content: "";
    position: absolute; left: 0; top: 12px;
    width: 16px; height: 1px;
    background: var(--gold-light);
}

/* ---------- Services ---------- */
.svc-intro {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 40px);
    margin-bottom: clamp(40px, 6vw, 64px);
}
.svc-intro-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);
    border-radius: 14px;
    padding: clamp(28px, 4vw, 40px);
    box-shadow: var(--shadow);
}
.svc-intro-card .tier {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold);
    letter-spacing: .3em;
    font-size: 1.35rem;
    text-transform: uppercase;
    font-weight: 600;
}
.svc-intro-card h3 {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: clamp(2rem, 3vw, 2.4rem);
    margin: 8px 0 14px;
}
.svc-intro-card p { color: var(--ink); font-size: 1.5rem; }

.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 32px);
}
.svc-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: clamp(28px, 4vw, 36px);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.svc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(194,162,92,.5);
}
.svc-card .ico {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--gold-light);
    margin-bottom: 18px;
}
.svc-card .ico svg { width: 28px; height: 28px; }
.svc-card h4 {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: 1.95rem;
    margin-bottom: 10px;
}
.svc-card .en-label {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold);
    letter-spacing: .25em;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}
.svc-card p { color: var(--ink); font-size: 1.45rem; line-height: 1.8; }

.svc-section--back .svc-grid { grid-template-columns: 1fr; }
.svc-section--back .svc-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: center;
}
.svc-section--back .svc-card .ico { width: 88px; height: 88px; margin-bottom: 0; }
.svc-section--back .svc-card .ico svg { width: 44px; height: 44px; }
.svc-section--back .svc-card h4 { font-size: 2.2rem; }

/* ---------- Why Labuan ---------- */
.why-labuan {
    background:
        linear-gradient(160deg, rgba(15,29,57,.94) 0%, rgba(15,29,57,.82) 100%),
        radial-gradient(circle at 80% 20%, rgba(194,162,92,.25), transparent 50%);
    color: var(--white);
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 36px);
}
.why-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(194,162,92,.25);
    border-radius: 14px;
    padding: clamp(28px, 4vw, 36px);
    backdrop-filter: blur(6px);
}
.why-card .num {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-light);
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1;
}
.why-card h4 {
    font-family: "Noto Serif JP", serif;
    color: #fff;
    font-size: 1.95rem;
    margin: 14px 0 12px;
    line-height: 1.5;
}
.why-card p { color: #d6dae5; font-size: 1.45rem; line-height: 1.85; }

/* ---------- Flow ---------- */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
    position: relative;
}
.flow-step {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 14px;
    padding: clamp(24px, 3vw, 32px);
    position: relative;
}
.flow-step .step-num {
    display: inline-block;
    font-family: "Cormorant Garamond", serif;
    color: var(--navy-deep);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    font-size: 1.4rem;
    letter-spacing: .2em;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(194,162,92,.28);
}
.flow-step h4 {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: clamp(1.85rem, 2.4vw, 2.05rem);
    margin: 6px 0 12px;
    line-height: 1.4;
}
.flow-step p { color: var(--ink); font-size: 1.4rem; line-height: 1.75; }

/* ---------- Company ---------- */
.company-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}
.company-info dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}
.company-info dt,
.company-info dd {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.5rem;
}
.company-info dt {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-weight: 700;
    letter-spacing: .05em;
}
.company-info dd { color: var(--ink); }
.company-info dd .en {
    display: block;
    font-family: "Cormorant Garamond", serif;
    color: var(--muted);
    font-size: 1.35rem;
    letter-spacing: .04em;
    margin-top: 4px;
}

.company-map {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--white);
    border-radius: 18px;
    padding: clamp(32px, 4vw, 44px);
    box-shadow: var(--shadow-lg);
}
.company-map .cm-eyebrow {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-light);
    letter-spacing: .35em;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.company-map h4 {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(2rem, 3.2vw, 2.4rem);
    margin-bottom: 18px;
    line-height: 1.5;
}
.company-map address {
    font-style: normal;
    color: #e7ebf4;
    font-size: 1.5rem;
    line-height: 1.85;
    margin-bottom: 24px;
}
.company-map .map-svg {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    border: 1px solid rgba(194,162,92,.3);
    background:
        radial-gradient(circle at 60% 60%, rgba(194,162,92,.25), transparent 60%),
        linear-gradient(135deg, #14284b 0%, #0d1a33 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-light);
    font-family: "Cormorant Garamond", serif;
    letter-spacing: .25em;
}

/* ---------- Contact ---------- */
.contact-block {
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--white);
    border-radius: 20px;
    padding: clamp(40px, 6vw, 72px);
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.contact-block::before {
    content: "";
    position: absolute; right: -120px; top: -120px;
    width: 320px; height: 320px;
    border: 1px solid rgba(194,162,92,.2);
    border-radius: 50%;
}
.contact-block::after {
    content: "";
    position: absolute; left: -120px; bottom: -120px;
    width: 320px; height: 320px;
    border: 1px solid rgba(194,162,92,.15);
    border-radius: 50%;
}
.contact-block .c-eyebrow {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-light);
    letter-spacing: .45em;
    font-size: 1.4rem;
    text-transform: uppercase;
    position: relative;
}
.contact-block h2 {
    font-family: "Noto Serif JP", serif;
    color: #fff;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1.5;
    margin: 14px 0 16px;
    position: relative;
}
.contact-block p {
    color: #d6dae5;
    font-size: clamp(1.5rem, 2vw, 1.7rem);
    max-width: 640px;
    margin: 0 auto 36px;
    position: relative;
}
.contact-block .c-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    position: relative;
}
.contact-block .c-email {
    display: block;
    margin-top: 28px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    color: var(--gold-light);
    letter-spacing: .08em;
    position: relative;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--navy-deep);
    color: #c8cdd9;
    padding: 56px 0 28px;
}
.site-footer .wrap { width: min(1240px, 94%); }
.foot-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.foot-brand .fb-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 2.2rem;
    color: #fff;
    letter-spacing: .14em;
    margin-bottom: 6px;
}
.foot-brand .fb-jp {
    font-family: "Noto Serif JP", serif;
    color: var(--gold-light);
    font-size: 1.4rem;
    letter-spacing: .2em;
    margin-bottom: 16px;
}
.foot-brand p { font-size: 1.4rem; line-height: 1.85; color: #aab2c3; }
.foot-col h5 {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-light);
    font-size: 1.3rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.foot-col ul { display: grid; gap: 10px; }
.foot-col a {
    font-size: 1.4rem;
    color: #c8cdd9;
    transition: color .2s ease;
}
.foot-col a:hover { color: var(--gold-light); }
.foot-bottom {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 1.25rem;
    color: #8a90a0;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
    .nav-toggle { display: inline-block; }
    .gnav {
        position: fixed;
        inset: 86px 0 0 0;
        background: rgba(15,29,57,.98);
        backdrop-filter: blur(12px);
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
    }
    .gnav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .gnav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 24px clamp(20px, 5vw, 40px);
    }
    .gnav ul li { border-bottom: 1px solid rgba(255,255,255,.08); }
    .gnav ul li a {
        display: block;
        padding: 18px 0;
        font-size: 1.6rem;
    }
    .gnav .nav-cta {
        margin-top: 14px;
        display: inline-block;
        text-align: center;
    }
    .gnav .lang-switch {
        margin-top: 18px;
        align-self: flex-start;
    }
    .about-grid,
    .svc-intro,
    .svc-grid,
    .company-grid { grid-template-columns: 1fr; }
    .svc-section--back .svc-card {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .svc-section--back .svc-card .ico { margin-bottom: 14px; }
    .why-grid { grid-template-columns: 1fr; }
    .flow-steps { grid-template-columns: 1fr 1fr; }
    .foot-top { grid-template-columns: 1fr; }
    .company-info dl { grid-template-columns: 120px 1fr; }
}

@media (max-width: 540px) {
    .flow-steps { grid-template-columns: 1fr; }
    .company-info dl { grid-template-columns: 1fr; }
    .company-info dt { padding-bottom: 4px; border-bottom: 0; }
    .company-info dd { padding-top: 4px; }
    .hero .hero-btns .btn { flex: 1 1 auto; }
}

/* =========================================================
   v2 — 拡張セクション（PDFスペックに沿った増設）
   ========================================================= */

/* ---------- Hero 補助 ---------- */
.hero-note {
    margin-top: 14px;
    font-size: 1.35rem;
    color: var(--gold-light);
    opacity: .85;
}

/* ---------- Pain Points ---------- */
.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    max-width: 980px;
    margin: 0 auto clamp(28px, 4vw, 40px);
}
.pain-grid li {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    padding: 16px 18px 16px 14px;
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1.65;
    box-shadow: 0 2px 8px rgba(16,29,57,.06);
    display: flex;
    align-items: center;
    gap: 14px;
}
.pain-grid .pain-ico {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(194,162,92,.18), rgba(194,162,92,.08));
    border-radius: 50%;
    color: var(--gold-deep);
}
.pain-grid .pain-ico svg { width: 22px; height: 22px; }
.pain-grid li > span:not(.pain-ico) {
    flex: 1;
    color: var(--ink);
    font-weight: 500;
    font-size: 1.45rem;
}
.pain-solution {
    text-align: center;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    color: var(--navy);
    font-weight: 700;
    padding: 28px 20px;
    background: linear-gradient(135deg, rgba(194,162,92,.18), rgba(194,162,92,.08));
    border-radius: 14px;
    margin-bottom: 28px;
    line-height: 1.6;
}
.pain-cta { text-align: center; }

/* ---------- Categories (6 cards) ---------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 28px);
}
.cat-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 14px;
    padding: clamp(24px, 3vw, 32px);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.cat-card--featured {
    background: linear-gradient(160deg, rgba(194,162,92,.06), rgba(255,255,255,1));
    border-color: rgba(194,162,92,.35);
}
.cat-ico {
    width: 64px; height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--gold-light);
    margin-bottom: 16px;
}
.cat-ico svg { width: 32px; height: 32px; }
.cat-card .cat-label {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold);
    font-size: 1.25rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    font-weight: 600;
}
.cat-card h3 {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: clamp(1.8rem, 2.4vw, 2.1rem);
    margin: 10px 0 14px;
    line-height: 1.4;
}
.cat-items {
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1.85;
}
.cat-note {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(15,29,57,.05);
    border-left: 2px solid var(--navy);
    border-radius: 0 8px 8px 0;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1.7;
}

/* ---------- Why grid (6 items) — 3x2 ＋ アイコン ---------- */
.why-grid {
    grid-template-columns: repeat(3, 1fr);
}
.why-card {
    position: relative;
    padding-top: 64px;
}
.why-ico {
    position: absolute;
    top: clamp(20px, 3vw, 28px);
    right: clamp(20px, 3vw, 28px);
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(194,162,92,.18);
    border: 1px solid rgba(194,162,92,.35);
    color: var(--gold-light);
}
.why-ico svg { width: 24px; height: 24px; }

/* ---------- Pricing ---------- */
.price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.5vw, 26px);
    margin-bottom: 28px;
}
.price-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: clamp(26px, 3vw, 34px) clamp(22px, 2.5vw, 28px);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.price-card--featured {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    border-color: var(--gold);
    box-shadow: 0 16px 40px rgba(16,29,57,.22);
}
.price-card--featured .price-name,
.price-card--featured .price-hours,
.price-card--featured .price-amount,
.price-card--featured .price-target,
.price-card--featured .price-items { color: #fff; }
.price-card--featured .price-items { color: #d6dae5; }
.price-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy-deep);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .15em;
    padding: 6px 18px;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}
.price-name {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-deep);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.price-hours {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: 1.5rem;
    margin-bottom: 4px;
}
.price-amount {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.price-amount--big {
    font-size: 2.4rem;
    color: var(--gold-light);
}
.price-card--featured .price-amount { border-bottom-color: rgba(194,162,92,.3); }
.price-target {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.7;
    margin-bottom: 10px;
}
.price-items {
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1.85;
    flex-grow: 1;
    margin-bottom: 20px;
}
.price-cta {
    display: inline-block;
    text-align: center;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy-deep);
    font-weight: 700;
    font-size: 1.4rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(194,162,92,.3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.price-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(194,162,92,.45); }
.price-note {
    text-align: center;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto;
}

/* ---------- Case Studies ---------- */
.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 28px);
}
.case-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--navy);
    border-radius: 14px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: var(--shadow);
}
.case-ico {
    width: 60px; height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--gold-light);
    margin-bottom: 14px;
}
.case-ico svg { width: 30px; height: 30px; }
.case-card .case-label {
    display: block;
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-deep);
    font-size: 1.3rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
}
.case-card h3 {
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: clamp(1.8rem, 2.4vw, 2.1rem);
    margin-bottom: 18px;
    line-height: 1.4;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.case-row { margin-bottom: 14px; }
.case-row:last-child { margin-bottom: 0; }
.case-row-h {
    font-family: "Noto Serif JP", serif;
    color: var(--gold-deep);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 4px;
}
.case-row-b {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.75;
}
.case-row--result {
    padding: 14px;
    background: rgba(194,162,92,.08);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
}
.case-row--result .case-row-h { color: var(--navy); }
.case-row--result .case-row-b { color: var(--navy); font-weight: 500; }

/* ---------- Process — 6 step (アイコン＋矢印) ---------- */
.flow-steps--6 {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3.5vw, 44px) clamp(36px, 4vw, 56px);
    position: relative;
}
.flow-steps--6 .flow-step {
    padding-top: clamp(80px, 8vw, 96px);
    position: relative;
}
.flow-ico {
    position: absolute;
    top: clamp(16px, 2vw, 22px);
    left: clamp(20px, 3vw, 26px);
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy-deep);
    box-shadow: 0 6px 14px rgba(194,162,92,.35);
}
.flow-ico svg { width: 26px; height: 26px; }
/* 矢印・点線はすべて削除。レスポンシブで崩れる原因になるため。
   ステップ番号を強調することで順序を視覚化する。 */

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .25s ease;
}
.faq-item[open] { box-shadow: var(--shadow); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 56px 20px 24px;
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-size: clamp(1.5rem, 2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    transition: background .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "Q.";
    font-family: "Cormorant Garamond", serif;
    color: var(--gold);
    margin-right: 10px;
    font-weight: 700;
}
.faq-item summary::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: translateY(-65%) rotate(45deg);
    transition: transform .25s ease;
}
.faq-item[open] summary::after {
    transform: translateY(-25%) rotate(-135deg);
}
.faq-item summary:hover { background: rgba(194,162,92,.06); }
.faq-a {
    padding: 0 24px 22px 24px;
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1.85;
}
.faq-a::before {
    content: "A.";
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-deep);
    font-weight: 700;
    margin-right: 10px;
}

/* ---------- Inquiry Form ---------- */
.bpo-form {
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: var(--shadow);
}
.form-row { margin-bottom: 22px; }
.form-row label,
.form-grouplabel {
    display: block;
    font-family: "Noto Serif JP", serif;
    color: var(--navy);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 8px;
    letter-spacing: .03em;
}
.form-req {
    background: var(--gold);
    color: var(--navy-deep);
    font-size: 1rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: .08em;
}
.form-opt {
    background: var(--line);
    color: var(--muted);
    font-size: 1rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: .08em;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1.4rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(194,162,92,.18);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.form-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.form-chk {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-weight: 500 !important;
    color: var(--ink) !important;
    font-size: 1.35rem !important;
    cursor: pointer;
    margin: 0 !important;
    transition: border-color .2s ease, background .2s ease;
}
.form-chk:hover { border-color: var(--gold); background: rgba(194,162,92,.05); }
.form-chk input { width: 16px; height: 16px; accent-color: var(--gold); }
.form-privacy {
    color: var(--muted);
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 18px;
}
.form-reply-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    margin: -4px 0 22px;
    background: linear-gradient(135deg, rgba(194,162,92,.12), rgba(194,162,92,.04));
    border-left: 3px solid var(--gold);
    border-radius: 0 10px 10px 0;
    color: var(--navy);
    font-size: 1.35rem;
    line-height: 1.75;
}
.form-reply-note .form-reply-ico {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy-deep);
    border-radius: 50%;
}
.form-reply-note .form-reply-ico svg { width: 18px; height: 18px; }
.form-reply-note strong {
    font-family: "Cormorant Garamond", serif;
    color: var(--gold-deep);
    letter-spacing: .03em;
}
.form-submit-row { text-align: center; }
.form-submit-row .btn { padding: 16px 56px; font-size: 1.6rem; }

/* ---------- Calendar booking placeholder ---------- */
.cal-embed {
    max-width: 880px;
    margin: 0 auto;
    background: var(--white);
    border: 2px dashed rgba(194,162,92,.4);
    border-radius: 16px;
    padding: clamp(36px, 5vw, 56px);
    text-align: center;
}
.cal-placeholder {
    margin-bottom: 24px;
}
.cal-placeholder svg {
    width: 64px;
    height: 64px;
    color: var(--gold);
    margin-bottom: 18px;
}
.cal-placeholder p {
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1.7;
}
.cal-btns { text-align: center; }

/* ---------- Mobile Fixed CTA ---------- */
.mobile-fixed-cta {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 90;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy-deep);
    text-align: center;
    padding: 16px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: .04em;
    box-shadow: 0 12px 28px rgba(16,29,57,.28), 0 0 0 1px rgba(255,255,255,.4) inset;
}

/* ---------- レスポンシブ拡張 ---------- */
@media (max-width: 900px) {
    .cat-grid,
    .case-grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .flow-steps--6 { grid-template-columns: 1fr 1fr; }
    .form-checks { grid-template-columns: 1fr; }
    .form-row--2col { grid-template-columns: 1fr; }
    .pain-grid { grid-template-columns: 1fr; }
    .mobile-fixed-cta { display: block; }
    .site-footer { padding-bottom: 92px; }
}
@media (max-width: 540px) {
    .price-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .flow-steps--6 { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------
   2026-07-20 「日本法人アクセス」ボタンを非表示（太田さん指示）
   HTMLとLPTHP/のデータはそのまま残してある。
   再表示したいときは、この2行を削除するだけ。
   ------------------------------------------------------------------ */
.btn-jp { display: none; }