:root {
    --c-primary: #1a1a2e;
    --c-secondary: #16213e;
    --c-accent: #c9a84c;
    --c-accent-h: #dbbe6a;
    --c-text: #e8e8e8;
    --c-muted: #8a8a9a;
    --c-bg: #0f0f1a;
    --c-card: #1a1a2e;
    --c-white: #ffffff;
    --c-border: #2a2a4a;
    --f-head: "Noto Serif JP", "Helvetica Neue", sans-serif;
    --f-body: "Noto Serif JP", "Helvetica Neue", sans-serif;
    --f-en: "Cormorant Garamond", "Times New Roman", serif;
    --fs-base: 16px;
    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-h3: 24px;
    --fw-head: 700;
    --fw-body: 400;
    --lh: 1.8;
    --ls: 0.05em;
    --mw: 1200px;
    --sec-pad: 100px;
    --rad: 8px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:var(--fs-base)}
body{font-family:var(--f-body);font-weight:var(--fw-body);line-height:var(--lh);letter-spacing:var(--ls);color:var(--c-text);background:var(--c-bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:all .3s}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:var(--fw-head);line-height:1.25;letter-spacing:0.04em}
h1{font-size:clamp(32px,5vw,var(--fs-h1))}
h2{font-size:clamp(26px,4vw,var(--fs-h2))}
h3{font-size:var(--fs-h3)}
.container{width:100%;max-width:var(--mw);margin:0 auto;padding:0 32px}
.en{font-family:var(--f-en)}

/* === HEADER === */
.hd{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all .4s}
.hd--top{background:transparent;border-bottom:1px solid rgba(255,255,255,.06)}
.hd--scroll{background:rgba(8,8,15,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--c-border);box-shadow:0 4px 40px rgba(0,0,0,.4)}
.hd__inner{display:flex;justify-content:space-between;align-items:center;height:90px;max-width:var(--mw);margin:0 auto;padding:0 32px}
.hd__logo{display:flex;align-items:center}
.hd__logo-img{width:20vw !important;height:auto !important;max-width:200px !important;display:block;transition:opacity .3s}
.hd__logo:hover .hd__logo-img{opacity:.8}
.hd__nav{display:flex;align-items:center;gap:0}
.hd__nav-item{position:relative}
.hd__nav-link{display:block;padding:34px 18px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .3s}
.hd__nav-link::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:2px;background:var(--c-accent);transform:scaleX(0);transition:transform .3s}
.hd__nav-link:hover,.hd__nav-link.active{color:var(--c-white)}
.hd__nav-link:hover::after,.hd__nav-link.active::after{transform:scaleX(1)}

/* Mega Menu */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:480px;background:rgba(10,10,20,.97);backdrop-filter:blur(24px);border:1px solid var(--c-border);border-radius:0 0 var(--rad) var(--rad);padding:28px 32px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hd__nav-item:hover .mega{opacity:1;visibility:visible}
.mega a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--c-muted);border-radius:var(--rad);transition:all .2s}
.mega a:hover{background:rgba(201,168,76,.08);color:var(--c-accent)}
.mega a .num{font-family:var(--f-en);font-size:11px;color:var(--c-accent);min-width:24px}

.hd__ham{display:none;flex-direction:column;gap:6px;cursor:pointer;padding:10px;background:none;border:none;z-index:1100}
.hd__ham span{display:block;width:26px;height:1.5px;background:var(--c-white);transition:all .3s}
.hd__ham.active span:nth-child(1){transform:rotate(45deg) translateY(7.5px)}
.hd__ham.active span:nth-child(2){opacity:0}
.hd__ham.active span:nth-child(3){transform:rotate(-45deg) translateY(-7.5px)}

.mobile-nav{position:fixed;inset:0;background:rgba(8,8,15,.98);z-index:1050;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;opacity:0;visibility:hidden;transition:all .4s}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav a{font-size:18px;color:var(--c-white);letter-spacing:.1em;padding:12px 0}
.mobile-nav a:hover{color:var(--c-accent)}

/* === HERO === */
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero__slide.active{opacity:1}
.hero__slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);transition:transform 8s ease}
.hero__slide.active .hero__slide-bg{transform:scale(1)}
.hero__slide-bg--1{background:linear-gradient(135deg,#0a0a14 0%,#16213e 40%,#1a1a2e 100%)}
.hero__slide-bg--2{background:linear-gradient(135deg,#12121f 0%,#1a1a2e 50%,#0a0a14 100%)}
.hero__slide-bg--3{background:linear-gradient(135deg,#1a1a2e 0%,#0a0a14 60%,#16213e 100%)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,15,.3) 0%,rgba(8,8,15,.7) 100%)}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px}
.hero__content{position:relative;z-index:10;height:100%;display:flex;align-items:center}
.hero__inner{max-width:var(--mw);margin:0 auto;padding:0 32px;width:100%}
.hero__label{font-family:var(--f-en);font-size:13px;letter-spacing:.35em;color:var(--c-accent);text-transform:uppercase;margin-bottom:28px;overflow:hidden}
.hero__label span{display:inline-block;transform:translateY(100%);animation:slideUp .6s .5s forwards}
.hero__title{color:var(--c-white);margin-bottom:24px;overflow:hidden}
.hero__title span{display:inline-block;transform:translateY(100%);animation:slideUp .7s .7s forwards}
.hero__catch{font-family:var(--f-en);font-size:clamp(20px,3vw,32px);color:var(--c-accent);letter-spacing:.12em;font-weight:400;margin-bottom:28px;overflow:hidden}
.hero__catch span{display:inline-block;transform:translateY(100%);animation:slideUp .7s .9s forwards}
.hero__desc{font-size:14px;color:rgba(255,255,255,.5);line-height:2;max-width:520px;margin-bottom:48px;opacity:0;animation:fadeIn .8s 1.2s forwards}
.hero__btn{opacity:0;animation:fadeIn .8s 1.5s forwards}
@keyframes slideUp{to{transform:translateY(0)}}
@keyframes fadeIn{to{opacity:1}}

.hero__dots{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:16px}
.hero__dot{width:10px;height:10px;border:1px solid rgba(255,255,255,.3);border-radius:50%;cursor:pointer;transition:all .3s;background:transparent}
.hero__dot.active{border-color:var(--c-accent);background:var(--c-accent);box-shadow:0 0 12px rgba(201,168,76,.4)}
.hero__dot:hover{border-color:var(--c-accent)}
.hero__scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:fadeIn .8s 2s forwards}
.hero__scroll span{font-family:var(--f-en);font-size:10px;letter-spacing:.25em;color:var(--c-muted);text-transform:uppercase;writing-mode:vertical-rl}
.hero__scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,var(--c-accent),transparent);animation:scrollPulse 2s infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
.hero__counter{position:absolute;left:40px;bottom:40px;z-index:20;font-family:var(--f-en);font-size:13px;color:var(--c-muted);letter-spacing:.1em}
.hero__counter .current{color:var(--c-white);font-size:24px;font-weight:600}

/* === SECTIONS === */
.sec{padding:var(--sec-pad) 0;position:relative}
.sec--dark{background:var(--c-primary)}
.sec--card{background:var(--c-card)}
.sec__head{margin-bottom:64px}
.sec__head--center{text-align:center}
.sec__en{font-family:var(--f-en);font-size:12px;letter-spacing:.35em;color:var(--c-accent);text-transform:uppercase;margin-bottom:16px;display:block}
.sec__title{color:var(--c-white);margin-bottom:20px}
.sec__line{width:40px;height:1px;background:var(--c-accent)}
.sec__head--center .sec__line{margin:20px auto 0}
.sec__desc{color:var(--c-muted);font-size:14px;margin-top:20px;max-width:600px;line-height:2;white-space:pre-line}
.sec__head--center .sec__desc{margin-left:auto;margin-right:auto}

/* === SERVICE CARDS (full-width visual) === */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.svc-card{position:relative;overflow:hidden;min-height:480px;cursor:pointer}
.svc-card__bg{position:absolute;inset:0;transition:transform .6s}
.svc-card__bg--1{background:linear-gradient(135deg,#141428,#1c1c3a)}
.svc-card__bg--2{background:linear-gradient(135deg,#1a1a2e,#0f1a2e)}
.svc-card__bg--3{background:linear-gradient(135deg,#0f1a2e,#141428)}
.svc-card__bg--4{background:linear-gradient(135deg,#161630,#1a1a2e)}
.svc-card__bg--5{background:linear-gradient(135deg,#101020,#1c1c3a)}
.svc-card__bg--6{background:linear-gradient(135deg,#1c1c3a,#101020)}
.svc-card:hover .svc-card__bg{transform:scale(1.08)}
.svc-card__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,15,.2) 0%,rgba(8,8,15,.85) 100%);transition:background .4s}
.svc-card:hover .svc-card__overlay{background:linear-gradient(180deg,rgba(8,8,15,.1) 0%,rgba(8,8,15,.7) 100%)}
.svc-card__content{position:relative;z-index:2;padding:40px 32px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.svc-card__num{font-family:var(--f-en);font-size:64px;font-weight:300;color:rgba(201,168,76,.15);position:absolute;top:24px;right:28px}
.svc-card__en{font-family:var(--f-en);font-size:11px;letter-spacing:.2em;color:var(--c-accent);text-transform:uppercase;margin-bottom:8px}
.svc-card__title{color:var(--c-white);font-size:20px;margin-bottom:12px;font-weight:700}
.svc-card__desc{color:rgba(255,255,255,.5);font-size:13px;line-height:1.8;max-height:0;overflow:hidden;transition:max-height .5s,opacity .4s;opacity:0;white-space:pre-line}
.svc-card:hover .svc-card__desc{max-height:200px;opacity:1}
.svc-card__arrow{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--f-en);font-size:12px;letter-spacing:.15em;color:var(--c-accent);text-transform:uppercase;opacity:0;transform:translateX(-10px);transition:all .4s}
.svc-card:hover .svc-card__arrow{opacity:1;transform:translateX(0)}

/* === MVV === */
.mvv-item{padding:80px 0;border-bottom:1px solid var(--c-border)}
.mvv-item:last-child{border-bottom:none}
.mvv-item__label{font-family:var(--f-en);font-size:11px;letter-spacing:.35em;color:var(--c-accent);text-transform:uppercase;margin-bottom:24px}
.mvv-item__statement{font-size:clamp(22px,3.5vw,36px);font-weight:700;color:var(--c-white);line-height:1.5;margin-bottom:28px}
.mvv-item__desc{color:var(--c-muted);font-size:14px;line-height:2.1;white-space:pre-line;max-width:700px}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:80px}
.val-card{background:var(--c-card);padding:48px 28px;text-align:center;border:1px solid var(--c-border);position:relative;overflow:hidden;transition:all .4s}
.val-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--c-accent);transform:scaleX(0);transition:transform .4s}
.val-card:hover{border-color:var(--c-accent);transform:translateY(-3px)}
.val-card:hover::before{transform:scaleX(1)}
.val-card__en{font-family:var(--f-en);font-size:10px;letter-spacing:.25em;color:var(--c-accent);text-transform:uppercase;margin-bottom:16px}
.val-card__title{color:var(--c-white);font-size:18px;margin-bottom:16px}
.val-card__desc{color:var(--c-muted);font-size:12px;line-height:1.9;white-space:pre-line}

/* === ABOUT SPLIT === */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:600px}
.about-split__img{position:relative;overflow:hidden}
.about-split__img-inner{position:absolute;inset:0;background:linear-gradient(135deg,#141428,#1c1c3a);transition:transform .6s}
.about-split:hover .about-split__img-inner{transform:scale(1.03)}
.about-split__img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--c-muted);font-size:13px;letter-spacing:.1em}
.about-split__body{display:flex;flex-direction:column;justify-content:center;padding:80px 64px;background:var(--c-card)}
.about-split__body p{white-space:pre-line;color:var(--c-muted);font-size:14px;line-height:2.2;margin-bottom:20px}

/* === COMPANY TABLE === */
.co-table{width:100%;max-width:800px}
.co-table tr{border-bottom:1px solid var(--c-border)}
.co-table th,.co-table td{padding:22px 20px;text-align:left;font-size:14px;vertical-align:top}
.co-table th{color:var(--c-accent);font-weight:500;width:160px;white-space:nowrap;font-size:13px;letter-spacing:.05em}

/* === NEWS === */
.news-list{max-width:900px}
.news-item{display:grid;grid-template-columns:120px 90px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--c-border);align-items:center;transition:all .3s}
.news-item:hover{padding-left:8px}
.news-date{font-family:var(--f-en);font-size:14px;color:var(--c-muted)}
.news-cat{font-size:10px;color:var(--c-accent);border:1px solid rgba(201,168,76,.3);padding:3px 12px;border-radius:2px;text-align:center;letter-spacing:.05em}
.news-title{color:var(--c-text);font-size:14px;transition:color .3s}
.news-item:hover .news-title{color:var(--c-accent)}

/* === CONTACT === */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-info{padding:40px 0}
.contact-info__item{margin-bottom:32px}
.contact-info__label{font-family:var(--f-en);font-size:11px;letter-spacing:.2em;color:var(--c-accent);text-transform:uppercase;margin-bottom:8px}
.contact-info__value{font-size:15px}
.contact-info__value a{color:var(--c-accent)}
.form .form-row{margin-bottom:24px}
.form label{display:block;font-size:12px;color:var(--c-muted);margin-bottom:8px;letter-spacing:.05em}
.form .req{color:var(--c-accent);font-size:10px;margin-left:6px}
.form input,.form textarea,.form select{width:100%;padding:14px 16px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--rad);color:var(--c-text);font-size:14px;font-family:var(--f-body);transition:border-color .3s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--c-accent)}
.form textarea{min-height:160px;resize:vertical}

/* === CTA === */
.cta{position:relative;padding:120px 0;text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--c-primary),var(--c-bg))}
.cta__content{position:relative;z-index:2}
.cta__en{font-family:var(--f-en);font-size:12px;letter-spacing:.35em;color:var(--c-accent);text-transform:uppercase;margin-bottom:20px}
.cta__title{color:var(--c-white);margin-bottom:16px}
.cta__desc{color:var(--c-muted);font-size:14px;margin-bottom:40px}

/* === PAGE HERO === */
.page-hero{position:relative;height:50vh;min-height:360px;display:flex;align-items:flex-end;overflow:hidden}
.page-hero__bg{position:absolute;inset:0;background:linear-gradient(180deg,var(--c-primary) 0%,var(--c-bg) 100%)}
.page-hero__content{position:relative;z-index:2;max-width:var(--mw);margin:0 auto;padding:0 32px 64px;width:100%}
.page-hero__en{font-family:var(--f-en);font-size:13px;letter-spacing:.35em;color:var(--c-accent);text-transform:uppercase;margin-bottom:16px}
.page-hero__title{color:var(--c-white)}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;font-size:13px;font-weight:500;letter-spacing:.12em;border:none;cursor:pointer;transition:all .3s;border-radius:var(--rad);font-family:var(--f-body);text-transform:uppercase}
.btn-primary{background:var(--c-accent);color:var(--c-bg)}
.btn-primary:hover{background:var(--c-accent-h);color:var(--c-bg);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,.2)}
.btn-outline{background:transparent;color:var(--c-accent);border:1px solid var(--c-accent)}
.btn-outline:hover{background:var(--c-accent);color:var(--c-bg)}
.btn-white{background:transparent;color:var(--c-white);border:1px solid rgba(255,255,255,.3)}
.btn-white:hover{border-color:var(--c-white);background:rgba(255,255,255,.06)}

/* === FOOTER === */
.ft{background:var(--c-primary);border-top:1px solid var(--c-border);padding:80px 0 0}
.ft__inner{display:grid;grid-template-columns:280px 1fr;gap:64px;max-width:var(--mw);margin:0 auto;padding:0 32px}
.ft__brand .ft__logo{font-family:var(--f-en);font-size:20px;color:var(--c-white);letter-spacing:.18em;margin-bottom:8px}
.ft__brand .ft__logo-img{height:28px;width:auto;margin-bottom:8px;opacity:.85}
.ft__brand .ft__logo-img:hover{opacity:1}
.ft__brand .ft__company{font-size:12px;color:var(--c-muted);margin-bottom:20px}
.ft__brand .ft__address{font-size:12px;color:var(--c-muted);line-height:2}
.ft__navs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ft__nav-title{font-size:11px;font-weight:700;color:var(--c-white);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.ft__nav a{display:block;font-size:12px;color:var(--c-muted);padding:4px 0;transition:color .2s}
.ft__nav a:hover{color:var(--c-accent)}
.ft__bottom{text-align:center;padding:32px 0;margin-top:60px;border-top:1px solid var(--c-border);font-size:11px;color:var(--c-muted);letter-spacing:.08em}

/* === ANIMATIONS === */
.r{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.r.v{opacity:1;transform:translateY(0)}
.r-l{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease}
.r-l.v{opacity:1;transform:translateX(0)}
.r-r{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease}
.r-r.v{opacity:1;transform:translateX(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* === RESPONSIVE === */
@media(max-width:1024px){
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .svc-card{min-height:360px}
    .val-grid{grid-template-columns:repeat(2,1fr)}
    .contact-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    :root{--sec-pad:80px}
    .hd__inner{height:70px}
    .hd__nav{display:none}
    .hd__ham{display:flex}
    .svc-grid{grid-template-columns:1fr}
    .svc-card{min-height:280px}
    .svc-card__desc{max-height:none;opacity:1}
    .svc-card__arrow{opacity:1;transform:translateX(0)}
    .val-grid{grid-template-columns:1fr}
    .about-split{grid-template-columns:1fr}
    .about-split__img{min-height:300px}
    .about-split__body{padding:48px 32px}
    .news-item{grid-template-columns:1fr;gap:8px}
    .ft__inner{grid-template-columns:1fr}
    .ft__navs{grid-template-columns:repeat(2,1fr)}
    .hero__dots{right:20px}
    .hero__counter{left:20px;bottom:20px}
    .co-table th{width:100px;font-size:12px}
    .mega{display:none}
    .page-hero{height:40vh;min-height:280px}
}


