/*
 Theme Name:   Arkhe Child
 Template:     arkhe
 Version:      2.0.0
*/

/* ==========================================
   Arkhe Parent Theme Overrides
   ========================================== */
/* Hide Arkhe's default header (we use .page-top instead) */
.l-header { display: none !important; }

/* Remove top padding/margin Arkhe adds for its sticky header */
.l-main { padding-top: 0 !important; margin-top: 0 !important; }

/* ==========================================
   Design Tokens
   ========================================== */
:root {
  --color-bg:        #111111;
  --color-bg-2:      #1a1a1a;
  --color-bg-3:      #242424;
  --color-text:      #f0f0f0;
  --color-text-sub:  #888888;
  --color-line:      #2a2a2a;
  --color-line-2:    #444444;
  --color-accent:    #ffffff;
  --font-display:    'Rajdhani', 'Helvetica Neue', Arial, sans-serif;
  --font-body:       'Barlow', 'Helvetica Neue', Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-condensed:  'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-jp:         'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    margin: 0;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* ==========================================
   Site Header (inner pages)
   ========================================== */
.l-header,
.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    width: 100%;
}
.l-container.l-header__inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: 68px;
    max-width: none;
    gap: 0;
}
.l-header__logo a {
    text-decoration: none;
}
.site-title-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.25em;
    color: var(--color-accent);
    text-decoration: none;
    font-style: normal;
}
.l-header__nav {
    display: flex;
    align-items: center;
    gap: 32px;
}
.l-header__nav a {
    font-family: var(--font-condensed);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--color-text-sub);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s;
}
.l-header__nav a:hover {
    color: var(--color-accent);
}

/* ==========================================
   Front-page Custom Header
   ========================================== */
.custom-header {
    position: relative;
    width: 100%;
    height: 68px;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-line);
    z-index: 100;
    cursor: default;
}
.custom-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.25em;
    color: var(--color-accent);
    text-transform: uppercase;
}
.custom-logo a {
    color: inherit;
    text-decoration: none;
}
.custom-nav {
    display: flex;
    gap: 32px;
    align-items: center;
}
.custom-nav span,
.custom-nav a {
    font-family: var(--font-condensed);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--color-text-sub);
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
    text-transform: uppercase;
}
.custom-nav span:hover,
.custom-nav a:hover {
    color: var(--color-accent);
}

/* ==========================================
   Buttons
   ========================================== */
.c-btn-header {
    display: inline-block;
    padding: 7px 20px;
    border: 1px solid var(--color-accent);
    color: var(--color-accent) !important;
    text-decoration: none !important;
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.2s;
    box-shadow: none !important;
}
.c-btn-header:hover {
    background: var(--color-accent);
    color: var(--color-bg) !important;
}
.c-btn-gold {
    display: inline-block;
    border: 1px solid var(--color-accent);
    color: var(--color-accent) !important;
    text-decoration: none !important;
    padding: 16px 56px;
    font-family: var(--font-condensed);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all 0.25s;
}
.c-btn-gold:hover {
    background: var(--color-accent);
    color: var(--color-bg) !important;
}

/* ==========================================
   Section Titles
   ========================================== */
.c-section-title--en,
.page-title--en {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
    font-size: 2.8rem;
    letter-spacing: 0.22em;
    margin-bottom: 0;
    text-transform: uppercase;
}
.c-section-title--en::after,
.page-title--en::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--color-accent);
    margin: 14px auto 0;
}
.c-section-title--jp {
    font-size: 0.88rem;
    color: var(--color-text-sub);
    text-align: center;
    margin-top: 16px;
    margin-bottom: 3rem;
    letter-spacing: 0.12em;
    font-family: var(--font-body);
}
.page-title--sub {
    text-align: center;
    font-size: 0.82rem;
    color: var(--color-text-sub);
    letter-spacing: 0.2em;
    margin-top: 24px;
    margin-bottom: 50px;
    font-family: var(--font-condensed);
    text-transform: uppercase;
}

.l-section { padding: 100px 0; }
.section-dark {
    background-color: var(--color-bg-2);
    border-top: 1px solid var(--color-line);
}

/* ==========================================
   Teaser / Front Page
   ========================================== */
.teaser-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--color-bg);
}
.teaser-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}
.teaser-slider__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.42);
    z-index: 1;
}
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0;
    animation: fadeZoom 15s infinite;
}
.slide1 { animation-delay: 0s; }
.slide2 { animation-delay: 5s; }
.slide3 { animation-delay: 10s; }
@keyframes fadeZoom {
    0%   { opacity: 0; transform: scale(1); }
    10%  { opacity: 1; transform: scale(1.02); }
    33%  { opacity: 1; transform: scale(1.05); }
    43%  { opacity: 0; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.1); }
}
.teaser-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
#teaser-click-layer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; cursor: pointer;
}

/* ==========================================
   Inner Page Header (same look as teaser-top)
   ========================================== */
.page-top {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 40px;
    box-sizing: border-box;
    width: 100%;
    cursor: default;
}
.page-top .teaser-logo a {
    text-decoration: none;
    color: inherit;
}

/* Top overlay bar */
.teaser-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 40px;
    cursor: pointer;
}
.teaser-top__left {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}
.teaser-logo {
    display: flex;
    flex-direction: column;
    line-height: 0.88;
}
/* 漢字ロゴ（最大サイズ / 太字） */
.teaser-logo__name {
    font-family: var(--font-jp);
    font-weight: 900;
    font-size: 3.8rem;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    display: block;
    line-height: 1;
}
/* ローマ字サブ（一回り小さい） */
.teaser-logo__sub {
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.28em;
    color: rgba(240,240,240,0.6);
    display: block;
    margin-top: 8px;
    text-transform: uppercase;
}
/* ロゴ画像バリエーション（horizontal = 横長ロゴ / hanko = ハンコ＋文字） */
.teaser-logo__img {
    display: block;
    width: auto;
}
.teaser-logo__img--horizontal {
    height: 80px;
}
.teaser-logo--hanko,
.teaser-logo--hanko a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.teaser-logo__img--hanko {
    height: 66px;
}
.teaser-logo__texts {
    display: flex;
    flex-direction: column;
    line-height: 0.88;
}
.teaser-logo--hanko .teaser-logo__name {
    font-size: 2.6rem;
}

.teaser-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding-top: 8px;
}
.teaser-desc p {
    font-family: var(--font-condensed);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: rgba(240,240,240,0.65);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.7;
}
.teaser-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
    align-items: start;
    cursor: pointer;
}
.teaser-nav__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-condensed);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240,240,240,0.75);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.teaser-nav__item::before {
    content: '□';
    font-size: 0.88em;
    line-height: 1;
}
.teaser-nav__item.is-active {
    color: var(--color-accent);
}
.teaser-nav__item.is-active::before {
    content: '■';
}
.teaser-nav__item:hover {
    color: var(--color-accent);
}

/* Bottom catch bar */
.teaser-catch {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    padding: 0 40px 28px;
    cursor: pointer;
}
.teaser-catch__line {
    height: 1px;
    background: rgba(255,255,255,0.55);
    margin-bottom: 14px;
    width: 0;
    animation: lineExpand 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.6s;
}
@keyframes lineExpand {
    from { width: 0; }
    to   { width: 100%; }
}

/* Click to enter（右下配置） */
.teaser-enter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.teaser-enter__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: dotBlink 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
.teaser-enter__text {
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: rgba(240,240,240,0.7);
    text-transform: uppercase;
}

.teaser-catch__middle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}
.teaser-enter-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.teaser-license {
    text-align: right;
}
.teaser-license p {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(240,240,240,0.45);
    margin: 0;
    line-height: 1.8;
}
/* キャッチコピー：ロゴと同じ最大サイズ・太さ */
.teaser-catch__text p {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 3.8rem;
    line-height: 1.05;
    color: var(--color-accent);
    margin: 0;
    letter-spacing: 0.02em;
}
.teaser-catch__foot {
    display: flex;
    align-items: center;
}
.teaser-copy {
    font-family: var(--font-condensed);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: rgba(240,240,240,0.45);
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .page-top { padding: 18px 20px; flex-wrap: wrap; gap: 14px; }
    .teaser-top { padding: 18px 20px; flex-wrap: wrap; gap: 14px; }
    .teaser-logo__name { font-size: 2.4rem; }
    .teaser-logo__sub { font-size: 0.8rem; }
    .teaser-logo__img--horizontal { height: 54px; }
    .teaser-logo__img--hanko { height: 48px; }
    .teaser-logo--hanko .teaser-logo__name { font-size: 1.9rem; }
    .teaser-desc { display: none; }
    .teaser-nav { gap: 8px 20px; }
    .teaser-nav__item { font-size: 0.78rem; }
    .teaser-catch { padding: 0 20px 20px; }
    .teaser-catch__text p { font-size: 2rem; }
}

/* ==========================================
   Modal
   ========================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: all 0.4s ease;
}
.modal-overlay.is-active { opacity: 1; visibility: visible; }
.modal-content {
    background: var(--color-bg-2);
    padding: 60px 50px;
    border: 1px solid var(--color-line-2);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 90%; max-width: 420px;
}
.modal-overlay.is-active .modal-content { transform: translateY(0); }
.modal-content h2 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.28em;
    margin-bottom: 16px;
    font-size: 1.8rem;
    text-transform: uppercase;
}
.modal-content p {
    color: var(--color-text-sub);
    font-size: 0.82rem;
    margin-bottom: 35px;
    line-height: 1.9;
    font-family: var(--font-body);
}
.modal-content input[type="text"],
.modal-content input[type="password"] {
    width: 100%; padding: 15px; margin-bottom: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--color-line);
    border-bottom-color: var(--color-line-2);
    color: var(--color-text);
    text-align: center;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.25s;
    box-sizing: border-box;
}
.modal-content input[type="password"] { letter-spacing: 0.3em; margin-bottom: 28px; }
.modal-content input[type="text"]:focus,
.modal-content input[type="password"]:focus {
    outline: none;
    border-color: var(--color-accent);
}
.modal-content .c-btn-header {
    width: 100%;
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent) !important;
    font-weight: 700;
    padding: 16px;
    font-size: 0.9rem;
    letter-spacing: 0.28em;
    cursor: pointer;
    font-family: var(--font-condensed);
    text-transform: uppercase;
}
.modal-content .c-btn-header:hover {
    background: var(--color-accent);
    color: var(--color-bg) !important;
}

/* ==========================================
   Home Hero
   ========================================== */
.home-hero { position: relative; height: 90vh; min-height: 600px; overflow: hidden; }
.home-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.h-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0;
    display: flex; justify-content: center; align-items: center;
    animation: homeSlider 20s infinite;
}
.h-slide::after {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1;
}
.h-slide1 { animation-delay: 0s; } .h-slide2 { animation-delay: 5s; }
.h-slide3 { animation-delay: 10s; } .h-slide4 { animation-delay: 15s; }
@keyframes homeSlider {
    0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; transform: scale(1.02); }
    20% { opacity: 1; transform: scale(1.05); } 25% { opacity: 0; transform: scale(1.06); } 100% { opacity: 0; }
}
.h-slide__text {
    position: relative; z-index: 2;
    text-align: left;
    padding: 0 60px 60px;
    color: var(--color-text);
    width: 100%;
    align-self: flex-end;
}
.h-slide__sub {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    color: rgba(240,240,240,0.55);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.h-slide__text h2 {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 3.2rem;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    line-height: 1.15;
}
.h-slide__text p {
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    line-height: 1.9;
    color: rgba(240,240,240,0.6);
    font-family: var(--font-condensed);
    text-transform: uppercase;
}

/* ==========================================
   Home Page — Editorial Layout (R-GO style)
   ========================================== */

/* Section head: big heading + filter row */
.home-ed-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0;
}
.home-ed-headline {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 1.15;
    color: var(--color-text);
    margin: 0;
    letter-spacing: 0.01em;
}
.home-ed-headline__jp {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-sub);
    letter-spacing: 0.14em;
    margin-top: 12px;
    font-family: var(--font-body);
    font-weight: 400;
}
.home-ed-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
}
.home-ed-filter__label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--color-text-sub);
    text-transform: uppercase;
    padding-right: 12px;
}
.home-ed-filter__item {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--color-text-sub);
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    padding: 2px 8px;
    border: 1px solid transparent;
}
.home-ed-filter__item.is-active { color: var(--color-accent); border-color: var(--color-accent); }
.home-ed-filter__item:hover { color: var(--color-accent); }

/* Horizontal rule divider */
.home-ed-rule {
    height: 1px;
    background: var(--color-line);
    margin: 40px 0 0;
}

/* Editorial item: image left + meta right */
.home-ed-item {
    display: grid;
    grid-template-columns: 45% 55%;
    padding: 40px 0;
    border-bottom: 1px solid var(--color-line);
}
.home-ed-item__img {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    margin-right: 50px;
    flex-shrink: 0;
}
.home-ed-item__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 4px;
}

/* Metadata rows */
.home-ed-meta { margin-bottom: 22px; }
.home-ed-meta__row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-line);
}
.home-ed-meta__row:first-child { border-top: 1px solid var(--color-line); }
.home-ed-meta__label {
    font-family: var(--font-condensed);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--color-text-sub);
    text-transform: uppercase;
    min-width: 90px;
    flex-shrink: 0;
}
.home-ed-meta__value {
    font-family: var(--font-condensed);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    color: var(--color-text);
    text-transform: uppercase;
}

/* Item title */
.home-ed-item__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 10px;
    letter-spacing: 0.01em;
}
.home-ed-item__title span {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-sub);
    letter-spacing: 0.12em;
    margin-top: 8px;
    font-weight: 400;
}

/* Explore link */
.home-ed-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--color-text-sub);
    text-transform: uppercase;
    text-decoration: none;
    margin-top: auto;
    padding-top: 24px;
    transition: color 0.2s;
}
.home-ed-explore:hover { color: var(--color-accent); }

/* Bilingual description */
.home-ed-bilingual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 60px;
    padding: 28px 0 0;
    border-top: 1px solid var(--color-line);
    margin-top: 28px;
}
.home-ed-bilingual__en p,
.home-ed-bilingual__jp p {
    font-size: 0.88rem;
    line-height: 1.95;
    color: var(--color-text-sub);
    margin-bottom: 14px;
}
.home-ed-bilingual__en p:last-child,
.home-ed-bilingual__jp p:last-child { margin-bottom: 0; }
.home-ed-bilingual__jp {
    border-left: 1px solid var(--color-line);
    padding-left: 60px;
}
.home-ed-bilingual small {
    font-size: 0.76rem;
    color: #555;
    display: block;
    margin-top: 4px;
    letter-spacing: 0.04em;
}

/* Membership item (full-width, no image) */
.home-mem-item {
    padding: 40px 0;
    border-bottom: 1px solid var(--color-line);
}
.home-mem-item .home-ed-meta { margin-bottom: 22px; }
.home-mem-item .home-ed-item__title { margin-bottom: 0; }

/* ==========================================
   Home System / Gallery (legacy — kept for reference)
   ========================================== */
.home-system .lp-2col { display: flex; gap: 4rem; align-items: stretch !important; }
.system-box {
    background: var(--color-bg-2);
    padding: 4rem 3rem;
    border: 1px solid var(--color-line);
    display: flex; flex-direction: column; width: 100%;
}
.system-list { list-style: none; padding: 0; margin: 0; }
.system-list li {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.75;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 1.5rem;
    color: var(--color-text);
}
.system-list li:last-child { border-bottom: none; }
.system-list .note { font-size: 0.82rem; color: var(--color-text-sub); display: block; margin-top: 5px; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.gallery-item {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 3; cursor: pointer;
}
.gallery-img {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.6s;
}
.gallery-item:hover .gallery-img { transform: scale(1.08); }
.gallery-title {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 40px 20px 20px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-align: left;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}
.gallery-title span {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-sub);
    margin-top: 5px;
    font-family: var(--font-condensed);
    letter-spacing: 0.16em;
    font-weight: 400;
    text-transform: uppercase;
}

/* ==========================================
   Vehicle Sales
   ========================================== */
.vehicle-gallery-section { padding: 60px 0 120px; }
.vehicle-scroll-container {
    display: flex; gap: 20px; padding: 10px 50px 40px;
    overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.vehicle-scroll-container::-webkit-scrollbar { display: none; }
.vehicle-card {
    flex: 0 0 calc(33.333% - 14px); min-width: 320px;
    border: 1px solid var(--color-line);
    background: var(--color-bg-2);
    cursor: pointer;
    transition: transform 0.3s, border-color 0.3s;
}
.vehicle-card:hover { transform: translateY(-4px); border-color: var(--color-line-2); }
.vehicle-img { width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.vehicle-info { padding: 25px; }
.v-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.v-spec {
    font-size: 0.8rem;
    color: var(--color-text-sub);
    margin-bottom: 14px;
    font-family: var(--font-condensed);
    letter-spacing: 0.1em;
}
.v-price {
    font-family: var(--font-condensed);
    font-size: 1rem;
    color: var(--color-accent);
    letter-spacing: 0.14em;
    border-top: 1px solid var(--color-line);
    padding-top: 12px;
}

/* ==========================================
   Parts Sales
   ========================================== */
.parts-catalog-section { padding: 60px 0 120px; }
.parts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.parts-card {
    border: 1px solid var(--color-line);
    background: var(--color-bg-2);
    cursor: pointer;
    transition: transform 0.3s, border-color 0.3s;
}
.parts-card:hover { transform: translateY(-4px); border-color: var(--color-line-2); }
.parts-img {
    width: 100%; aspect-ratio: 1 / 1;
    background-size: cover; background-position: center;
    border-bottom: 1px solid var(--color-line);
}
.parts-info { padding: 20px; }
.p-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.p-price {
    font-family: var(--font-condensed);
    font-size: 1rem;
    color: var(--color-accent);
    letter-spacing: 0.14em;
}
.parts-advice-box {
    margin-top: 80px; padding: 50px;
    background: var(--color-bg-2);
    border: 1px solid var(--color-line);
    text-align: center;
}
.parts-advice-box h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-accent);
    letter-spacing: 0.18em;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.parts-advice-box p { color: var(--color-text-sub); line-height: 1.9; }

/* ==========================================
   Race Info
   ========================================== */
.race-info-section { padding: 60px 0 120px; }
.race-team-intro {
    display: flex; flex-wrap: wrap; gap: 50px; align-items: center; margin-top: 50px;
    background: var(--color-bg-2);
    border: 1px solid var(--color-line);
    padding: 40px;
}
.race-intro-img { flex: 1; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.race-intro-text { flex: 1; }
.r-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-accent);
    letter-spacing: 0.14em;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
/* ロゴはカード幅いっぱいの1行目、画像と説明文はその下の2カラム */
.r-title--logo {
    width: 100%;
    margin-bottom: 0;
}
.r-title--logo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}
.r-desc { font-size: 1rem; line-height: 1.9; color: var(--color-text-sub); }
.race-machine-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.race-machine-card { border: 1px solid var(--color-line); background: var(--color-bg-2); }
.machine-img {
    width: 100%; aspect-ratio: 16 / 9;
    background-size: cover; background-position: center;
    border-bottom: 1px solid var(--color-line);
}
.machine-info { padding: 25px; }
.machine-info h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.machine-info p { font-size: 0.9rem; color: var(--color-text-sub); line-height: 1.75; }

/* ==========================================
   Events
   ========================================== */
.event-info-section { padding: 60px 0 120px; }
.l-container--sm { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.event-list { margin-top: 60px; display: flex; flex-direction: column; gap: 40px; }
.event-item {
    display: flex; gap: 40px; align-items: center;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 40px;
}
.event-item:last-child { border-bottom: none; padding-bottom: 0; }
.is-upcoming { background: var(--color-bg-2); padding: 30px; border: 1px solid var(--color-line); }
.event-img { flex: 0 0 320px; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.event-text { flex: 1; }
.event-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.e-date {
    font-family: var(--font-condensed);
    color: var(--color-text-sub);
    letter-spacing: 0.14em;
    font-size: 0.88rem;
}
.e-category {
    font-size: 0.68rem; font-weight: 600;
    padding: 3px 10px; letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-condensed);
}
.cat-announce { background: var(--color-accent); color: var(--color-bg); }
.cat-report { background: var(--color-bg-3); color: var(--color-text-sub); border: 1px solid var(--color-line); }
.e-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.e-excerpt { font-size: 0.9rem; color: var(--color-text-sub); line-height: 1.85; }

/* ==========================================
   Contact
   ========================================== */
.contact-section { padding: 60px 0 120px; }
.contact-intro { text-align: center; margin-bottom: 50px; color: var(--color-text-sub); line-height: 1.9; }
.contact-form-wrapper { max-width: 700px; margin: 0 auto; }
.luxury-form label {
    display: block; margin-bottom: 30px;
    font-family: var(--font-condensed);
    font-size: 0.82rem;
    color: var(--color-text);
    letter-spacing: 0.16em;
    font-weight: 600;
    text-transform: uppercase;
}
.luxury-form .req { color: var(--color-accent); margin-left: 5px; }
.luxury-form input[type="text"],
.luxury-form input[type="email"],
.luxury-form input[type="tel"],
.luxury-form select,
.luxury-form textarea {
    width: 100%; padding: 16px 18px; margin-top: 10px;
    background: var(--color-bg-2);
    border: 1px solid var(--color-line);
    border-bottom-color: var(--color-line-2);
    color: var(--color-text);
    font-size: 1rem; box-sizing: border-box;
    font-family: var(--font-body);
    transition: all 0.2s ease;
    border-radius: 0; -webkit-appearance: none;
}
.luxury-form input:focus,
.luxury-form select:focus,
.luxury-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg-3);
}
.luxury-form textarea { height: 250px; resize: vertical; }
.form-submit-wrap { text-align: center; margin-top: 50px; }
.form-submit-wrap input[type="submit"] {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 18px 60px;
    font-size: 0.88rem;
    letter-spacing: 0.28em;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--font-condensed);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0;
}
.form-submit-wrap input[type="submit"]:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* ==========================================
   Footer
   ========================================== */
.l-footer,
.site-footer {
    padding: 28px 0;
    border-top: 1px solid var(--color-line);
    background-color: var(--color-bg);
}
.site-footer__bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.7rem;
    color: var(--color-text-sub);
    gap: 30px;
    font-family: var(--font-condensed);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.site-footer__link { display: none; }
.site-footer__link a { color: var(--color-text-sub); text-decoration: none; transition: color 0.2s; }
.site-footer__link a:hover { color: var(--color-accent); }

/* ==========================================
   Company Page
   ========================================== */
.company-page { min-height: 80vh; padding-top: 100px; }
.lp-company-list { border-top: 1px solid var(--color-line); }
.lp-company-list__row {
    display: flex; border-bottom: 1px solid var(--color-line);
    padding: 2.5rem 0;
    padding-left: calc(50% - 350px);
    padding-right: calc(50% - 350px);
}
.lp-company-list__row dt {
    width: 30%;
    color: var(--color-text-sub);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    font-family: var(--font-condensed);
    text-transform: uppercase;
    font-weight: 600;
    padding-top: 3px;
}
.lp-company-list__row dd { width: 70%; font-size: 1rem; color: var(--color-text); line-height: 1.75; }
.company-back-link { margin-top: 4rem; text-align: center; }

/* ==========================================
   Image Placeholder
   ========================================== */
.img-placeholder {
    background: var(--color-bg-2);
    border: 1px dashed var(--color-line-2);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 20px;
    box-sizing: border-box;
}
.img-placeholder__label {
    font-size: 0.72rem; letter-spacing: 0.14em;
    font-family: var(--font-condensed);
    font-weight: 600; color: var(--color-text-sub);
    text-transform: uppercase;
}
.img-placeholder__note { font-size: 0.68rem; color: #444; letter-spacing: 0.06em; }

/* ==========================================
   Vehicle Detail Pages
   ========================================== */
.vd-hero { position: relative; height: 75vh; min-height: 500px; overflow: hidden; }
.vd-hero__img { width: 100%; height: 100%; }
.vd-hero__overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 60px 5%;
    background: linear-gradient(transparent, rgba(0,0,0,0.88));
    color: var(--color-text);
}
.vd-hero__en {
    display: block;
    font-family: var(--font-condensed);
    color: var(--color-text-sub);
    font-size: 0.8rem;
    letter-spacing: 0.38em;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.vd-hero__title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 15px;
    line-height: 1.2;
    text-transform: uppercase;
}
.vd-hero__sub {
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    color: rgba(240,240,240,0.7);
    line-height: 1.75;
    font-family: var(--font-condensed);
}

.vd-stats {
    background: var(--color-bg-2);
    border-bottom: 1px solid var(--color-line);
    padding: 40px 0;
    display: flex; justify-content: center;
}
.vd-stats__item {
    flex: 1; text-align: center; padding: 0 30px;
    border-right: 1px solid var(--color-line);
}
.vd-stats__item:last-child { border-right: none; }
.vd-stats__value {
    display: block;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.vd-stats__label {
    font-size: 0.7rem;
    color: var(--color-text-sub);
    letter-spacing: 0.22em;
    font-family: var(--font-condensed);
    text-transform: uppercase;
}

.vd-overview__inner { display: flex; gap: 80px; align-items: flex-start; }
.vd-overview__text { flex: 1; }
.vd-overview__img-wrap { flex: 0 0 380px; }
.vd-overview__img { width: 100%; aspect-ratio: 3 / 4; }
.vd-overview__lead {
    font-size: 1.4rem;
    line-height: 1.9;
    color: var(--color-text);
    margin-bottom: 30px;
    letter-spacing: 0.02em;
}
.vd-overview__body { font-size: 0.95rem; color: var(--color-text-sub); line-height: 2; margin-bottom: 20px; }
.vd-overview__tag {
    display: inline-block;
    border: 1px solid var(--color-line-2);
    color: var(--color-text-sub);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    padding: 5px 14px;
    margin: 4px 4px 4px 0;
    font-family: var(--font-condensed);
    text-transform: uppercase;
}

.vd-spec { background: var(--color-bg-2); border-top: 1px solid var(--color-line); padding: 100px 0; }
.vd-spec-table { width: 100%; border-collapse: collapse; margin-top: 50px; }
.vd-spec-table tr { border-bottom: 1px solid var(--color-line); }
.vd-spec-table th {
    width: 35%; padding: 22px 0;
    color: var(--color-text-sub);
    font-family: var(--font-condensed);
    font-size: 0.78rem; letter-spacing: 0.18em;
    text-align: left; font-weight: 600;
    vertical-align: top; text-transform: uppercase;
}
.vd-spec-table td { padding: 22px 0; color: var(--color-text); font-size: 0.95rem; line-height: 1.75; vertical-align: top; }

.vd-gallery { padding: 100px 0; }
.vd-gallery__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-top: 50px;
}
.vd-gallery__item { aspect-ratio: 4 / 3; overflow: hidden; }

.vd-cta {
    background: var(--color-bg-2);
    border-top: 1px solid var(--color-line);
    padding: 100px 0; text-align: center;
}
.vd-cta__title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-accent);
    letter-spacing: 0.22em;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.vd-cta__text { color: var(--color-text-sub); font-size: 0.92rem; line-height: 2; margin-bottom: 50px; letter-spacing: 0.06em; }

.vd-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 25px 5%;
    border-top: 1px solid var(--color-line);
    background: var(--color-bg);
}
.vd-nav a {
    color: var(--color-text-sub); text-decoration: none;
    font-size: 0.8rem; letter-spacing: 0.18em;
    font-family: var(--font-condensed);
    text-transform: uppercase; transition: color 0.2s;
}
.vd-nav a:hover { color: var(--color-accent); }
.vd-nav__back { color: var(--color-text-sub) !important; font-size: 0.76rem; }

/* ==========================================
   PC/SP image switcher
   ========================================== */
.bg-switcher { background-image: var(--bg-pc); }
@media (max-width: 768px) { .bg-switcher { background-image: var(--bg-sp); } }

/* ==========================================
   Responsive (SP)
   ========================================== */
@media (max-width: 768px) {
    .l-container.l-header__inner { padding: 0 20px; height: 58px; }
    .site-title-text { font-size: 1.25rem; letter-spacing: 0.18em; }
    .l-header__nav { gap: 14px; }
    .l-header__nav a { font-size: 0.76rem; }

    .custom-header { padding: 0 20px; height: 58px; }
    .custom-logo { font-size: 1.25rem; letter-spacing: 0.18em; }
    .custom-nav { gap: 12px; }
    .custom-nav span, .custom-nav a { font-size: 0.76rem; letter-spacing: 0.12em; }

    .modal-content { padding: 40px 25px; }

    .c-section-title--en, .page-title--en { font-size: 2rem; margin-top: 50px; }
    .l-section { padding: 70px 0; }
    .home-system .lp-2col { flex-direction: column; gap: 2rem; }
    .system-box { padding: 2rem; }
    .gallery-grid { grid-template-columns: 1fr; gap: 2px; }
    .home-ed-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .home-ed-headline { font-size: 2.2rem; }
    .home-ed-filter { flex-wrap: wrap; }
    .home-ed-item { grid-template-columns: 1fr; }
    .home-ed-item__img { margin-right: 0; margin-bottom: 24px; }
    .home-ed-bilingual { grid-template-columns: 1fr; gap: 0; }
    .home-ed-bilingual__jp { border-left: none; padding-left: 0; border-top: 1px solid var(--color-line); padding-top: 20px; margin-top: 20px; }
    .h-slide__text { padding: 0 24px 40px; }
    .h-slide__text h2 { font-size: 2rem; }

    .vehicle-scroll-container { padding: 10px 20px 30px; gap: 15px; }
    .vehicle-card { flex: 0 0 85%; min-width: 280px; }

    .parts-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .parts-advice-box { padding: 30px 20px; }

    .race-team-intro { flex-direction: column; padding: 20px; gap: 30px; }
    .race-intro-img { width: 100%; }
    .race-machine-grid { grid-template-columns: 1fr; gap: 20px; }

    .event-item { flex-direction: column; gap: 20px; padding-bottom: 30px; }
    .event-img { flex: none; width: 100%; aspect-ratio: 16 / 9; }
    .is-upcoming { padding: 20px; }

    .luxury-form input[type="text"],
    .luxury-form input[type="email"],
    .luxury-form input[type="tel"],
    .luxury-form select,
    .luxury-form textarea { padding: 14px; }
    .lp-company-list__row { flex-direction: column; padding-left: 20px; padding-right: 20px; }
    .lp-company-list__row dt { width: 100%; margin-bottom: 0.6rem; }
    .lp-company-list__row dd { width: 100%; }
    .site-footer__bottom { flex-direction: column; gap: 1rem; }

    .vd-hero { height: 60vh; min-height: 380px; }
    .vd-hero__title { font-size: 2rem; }
    .vd-hero__overlay { padding: 40px 20px; }
    .vd-stats { flex-wrap: wrap; }
    .vd-stats__item { flex: 0 0 50%; padding: 20px 10px; border-right: none; border-bottom: 1px solid var(--color-line); }
    .vd-stats__item:nth-child(odd) { border-right: 1px solid var(--color-line); }
    .vd-stats__item:nth-child(3), .vd-stats__item:nth-child(4) { border-bottom: none; }
    .vd-overview__inner { flex-direction: column-reverse; gap: 40px; }
    .vd-overview__img-wrap { flex: none; width: 100%; }
    .vd-overview__img { aspect-ratio: 4 / 3; }
    .vd-gallery__grid { grid-template-columns: 1fr; }
    .vd-spec-table th { width: 42%; font-size: 0.76rem; }
    .vd-nav { flex-direction: column; gap: 15px; text-align: center; }
}