/*
Theme Name: FEVV Theme
Theme URI: https://fev-v.com/
Author: FEVV Inc.
Author URI: https://fev-v.com/
Description: 株式会社FEVV コーポレートサイト専用テーマ。
Version: 0.17.14
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fevv
Tags: portfolio, dark, minimal, custom-post-type
*/

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--black:#0a0a0a;--white:#fafaf7;--gray1:#888;--gray2:rgba(255,255,255,.35);--gray3:rgba(17,17,17,.4);--font-stack:'Raleway','Noto Sans JP',sans-serif}
html{font-family:var(--font-stack)!important}
html.has-scroll-smooth{overflow:hidden}
html.has-scroll-smooth body{overflow:hidden}
body,h1,h2,h3,h4,h5,h6,p,a,span,div,button,input,textarea,select,nav,footer{font-family:var(--font-stack)}
body{color:#fff;background:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none}
img{max-width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}

/* HYBRID CURSOR SYSTEM — Blend + Trail + Magnet + Text + Shape */
.cur-main{position:fixed;pointer-events:none;z-index:9998;width:32px;height:32px;background:#fff;border-radius:50%;mix-blend-mode:difference;transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),border-radius .45s cubic-bezier(.22,1,.36,1)}
.cur-main.is-view{width:90px;height:90px}
.cur-main.is-text{width:3px;height:30px;border-radius:1px}
.cur-main.is-magnet{width:55px;height:55px}
.cur-main.is-btn{border-radius:2px}
.cur-main.is-ring{width:20px;height:20px;background:transparent;border:1.5px solid #fff}
.cur-label{position:fixed;pointer-events:none;z-index:9999;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .3s;font-family:'Raleway','Noto Sans JP',sans-serif;white-space:nowrap;transform:translate(-50%,-50%)}
.cur-label.show{opacity:1}
.trail-dot{position:fixed;pointer-events:none;z-index:9997;border-radius:50%;background:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .4s cubic-bezier(.22,1,.36,1),width .6s,height .6s,background .6s,border .6s}
.trail-dot.ring{background:transparent;border:1px solid #fff}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:2rem 3.5rem;display:flex;justify-content:space-between;align-items:center;mix-blend-mode:difference;transition:padding .4s}
.nav.compact{padding:1.2rem 3.5rem}
.nav-logo img{height:18px;width:auto;display:block}
.nav-right{display:flex;gap:2.5rem;align-items:center}
.nav-right a{font-size:.65rem;letter-spacing:.25em;color:#fff;text-decoration:none;text-transform:uppercase;position:relative;padding:.3rem 0}
.nav-right a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:#fff;transition:width .5s cubic-bezier(.22,1,.36,1)}
.nav-right a:hover::after{width:100%}
.nav-cta{border:1px solid rgba(255,255,255,.4)!important;padding:.5rem 1.8rem!important;font-size:.6rem!important;letter-spacing:.2em!important;transition:all .4s!important}
.nav-cta:hover{background:rgba(255,255,255,.1)!important}

/* === HAMBURGER TOGGLE (mobile) ===
   親の .nav に mix-blend-mode:difference が当たっているため、
   color:#fff のままで背景に対し自動反転（黒背景→白、白背景→黒）。
*/
.nav-toggle{display:none;background:transparent;border:none;width:34px;height:24px;position:relative;cursor:pointer;padding:0;z-index:200;color:#fff}
.nav-toggle span{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;border-radius:1px;transition:transform .4s cubic-bezier(.22,1,.36,1),top .35s,opacity .25s}
.nav-toggle span:nth-child(1){top:7px}
.nav-toggle span:nth-child(2){top:16px}
.nav-toggle.is-open span:nth-child(1){top:11px;transform:rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){top:11px;transform:rotate(-45deg)}
/* メニュー展開中は nav の mix-blend を切ってオーバーレイ上で安定表示 */
body.nav-locked .nav{mix-blend-mode:normal}
body.nav-locked .nav-toggle{color:#fff}
body.nav-locked .nav-logo img{filter:brightness(0) invert(1)}

/* === FULLSCREEN OVERLAY MENU === */
.nav-overlay{position:fixed;inset:0;background:var(--black);z-index:150;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .55s cubic-bezier(.22,1,.36,1),visibility .55s}
.nav-overlay.is-open{opacity:1;visibility:visible}
.nav-overlay-inner{text-align:center;padding:2rem}
.nav-overlay-link{display:block;font-size:clamp(2rem,8vw,3.4rem);font-weight:200;color:#fff;text-decoration:none;letter-spacing:.08em;margin:1.4rem 0;opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),color .3s}
.nav-overlay.is-open .nav-overlay-link{opacity:1;transform:translateY(0)}
.nav-overlay.is-open .nav-overlay-link:nth-child(1){transition-delay:.18s}
.nav-overlay.is-open .nav-overlay-link:nth-child(2){transition-delay:.28s}
.nav-overlay.is-open .nav-overlay-link:nth-child(3){transition-delay:.38s}
.nav-overlay-link:hover,.nav-overlay-link:focus-visible{color:rgba(255,255,255,.55)}

/* body lock when menu is open */
body.nav-locked{overflow:hidden;touch-action:none}

/* === Award badge (TOP - WHY FEVV内、黒背景) === */
.why-award{display:flex;align-items:center;gap:1.5rem;margin-top:3rem;padding:1.8rem 2rem;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.why-award::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,rgba(59,130,246,.6),rgba(59,130,246,.15))}
.why-award-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.why-award-icon svg{width:36px;height:36px}
.why-award-info{flex:1}
.why-award-label{font-size:.5rem;letter-spacing:.25em;color:rgba(255,255,255,.45);text-transform:uppercase;margin-bottom:.3rem}
.why-award-title{font-size:.9rem;font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.95)}
.why-award-detail{font-size:.7rem;color:rgba(255,255,255,.7);margin-top:.3rem;letter-spacing:.03em}

/* === Awards (About - 白背景版) === */
.about-award-box{display:flex;align-items:center;gap:2rem;padding:2rem 2.5rem;border:1px solid rgba(17,17,17,.12);position:relative;overflow:hidden;margin-bottom:2.5rem;background:rgba(0,0,0,.02)}
.about-award-box::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,rgba(59,130,246,.7),rgba(59,130,246,.2))}
.about-award-icon{width:54px;height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.about-award-icon svg{width:42px;height:42px}
.about-award-info{flex:1}
.about-award-label{font-size:.55rem;letter-spacing:.25em;color:rgba(17,17,17,.55);text-transform:uppercase;margin-bottom:.4rem}
.about-award-title{font-size:1rem;font-weight:500;color:#111;letter-spacing:.04em;margin-bottom:.3rem}
.about-award-detail{font-size:.7rem;color:rgba(17,17,17,.65);letter-spacing:.03em;line-height:1.7}

@media(max-width:768px){
  .why-award{padding:1.2rem 1.5rem;gap:1rem;flex-direction:column;text-align:center}
  .why-award-icon{width:40px;height:40px}
  .about-award-box{flex-direction:column;text-align:center;padding:1.5rem;gap:1rem}
}

/* HERO */
.hero{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg-inner{position:absolute;inset:-10%;background:radial-gradient(ellipse at 30% 50%,#1a1a2a 0%,var(--black) 70%)}
.hero-particles{position:absolute;inset:0}
.hero-particle{position:absolute;width:2px;height:2px;background:rgba(255,255,255,.15);border-radius:50%}
.hero-content{position:relative;z-index:2}
.hero-eyebrow{font-size:.55rem;letter-spacing:.8em;color:rgba(255,255,255,.2);text-transform:uppercase;margin-bottom:2.5rem;overflow:hidden}
.hero-eyebrow span{display:inline-block}
.hero-title{overflow:hidden;margin-bottom:1rem}
.hero-title-line{font-size:clamp(2rem,5vw,3.8rem);font-weight:200;letter-spacing:.06em;line-height:1.4}
.hero-title-line em{font-style:normal;font-weight:500}
.hero-sub{font-size:.75rem;letter-spacing:.15em;color:rgba(255,255,255,.25);margin-top:1.5rem;overflow:hidden}
.hero-sub span{display:inline-block}
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.8rem}
.hero-scroll-text{font-size:.5rem;letter-spacing:.4em;color:rgba(255,255,255,.15);text-transform:uppercase;writing-mode:vertical-rl}
.hero-scroll-line{width:1px;height:50px;position:relative;overflow:hidden}
.hero-scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.4),transparent);animation:scrollLine 2.5s infinite}
@keyframes scrollLine{0%{top:-100%}100%{top:100%}}

/* HORIZONTAL LINE DIVIDER */
.h-line{width:60px;height:1px;background:rgba(255,255,255,.1);margin:0 auto}

/* MESSAGE */
.message{padding:10rem 3rem;position:relative;background:var(--black)}
.message-inner{max-width:800px;margin:0 auto;position:relative}
.message-line{font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:200;line-height:2.4;letter-spacing:.04em;color:rgba(255,255,255,.15)}
.message-line.is-inview{color:rgba(255,255,255,.85);transition:color .8s}
.message-line strong{font-weight:400;color:#fff}
.message-accent{display:block;width:40px;height:1px;background:rgba(255,255,255,.2);margin:2.5rem 0}

/* WORKS */
.works{padding:8rem 0 10rem;background:var(--black)}
.works-header{padding:0 3.5rem;margin-bottom:4rem;display:flex;justify-content:space-between;align-items:flex-end}
.works-header-left{}
.section-num{font-size:.55rem;letter-spacing:.4em;color:rgba(255,255,255,.15);text-transform:uppercase;margin-bottom:.5rem}
.section-heading{font-size:2rem;font-weight:200;letter-spacing:.08em}
.works-header-right a{font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.3);text-decoration:none;text-transform:uppercase;transition:color .3s}
.works-header-right a:hover{color:#fff}
.works-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;padding:0 3.5rem}
.work-item{position:relative;overflow:hidden;cursor:pointer}
.work-item:nth-child(1){grid-column:1/8;aspect-ratio:16/9}
.work-item:nth-child(2){grid-column:8/13;aspect-ratio:4/5}
.work-item:nth-child(3){grid-column:1/5;aspect-ratio:4/5}
.work-item:nth-child(4){grid-column:5/9;aspect-ratio:16/9}
.work-item:nth-child(5){grid-column:9/13;aspect-ratio:16/9}
.work-img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
.work-item:hover .work-img{transform:scale(1.06)}
.work-meta{position:absolute;bottom:0;left:0;right:0;padding:2rem;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);transform:translateY(20px);opacity:0;transition:all .5s cubic-bezier(.25,.46,.45,.94)}
.work-item:hover .work-meta{transform:translateY(0);opacity:1}
.work-phase{font-size:.55rem;letter-spacing:.25em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:.3rem;display:inline-block;border:1px solid rgba(255,255,255,.15);padding:.2rem .6rem;border-radius:1px}
.work-name{font-size:.95rem;font-weight:300;letter-spacing:.05em;margin-top:.5rem}
.work-client{font-size:.65rem;color:rgba(255,255,255,.6);margin-top:.2rem}

/* (works hover handled by hybrid cursor) */

/* EPOCH-STYLE SECTION TRANSITION (about section morphs dark→light) */
.epoch-section{position:relative;overflow:hidden}
.epoch-section .section-num-light,.epoch-section .why-heading,
.epoch-section .why-lead,.epoch-section .why-lead-line,
.epoch-section .why-strengths,.epoch-section .why-s-title,.epoch-section .why-s-body,
.epoch-section .why-founder,.epoch-section .why-f-name,.epoch-section .why-f-role,.epoch-section .why-f-bio,
.epoch-section .why-team,.epoch-section .why-funnel-label{transition:none}

/* LIGHT ZONE (sections fully in light mode) */
.light-zone{background:var(--white);color:#111}
.section-num-light{font-size:.55rem;letter-spacing:.4em;color:rgba(17,17,17,.15);text-transform:uppercase;margin-bottom:.5rem}
.section-heading-light{font-size:2rem;font-weight:200;letter-spacing:.08em;color:#111}

/* WHY FEVV (formerly About) */
.why-fevv{padding:12rem 3.5rem 6rem}
.why-inner{max-width:900px;margin:0 auto}
/* Why heading split animation */
.why-heading{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:200;letter-spacing:.08em;margin-bottom:2.5rem;overflow:hidden}
.why-char{display:inline-block;opacity:0;transform:translateY(100%);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.why-heading.is-inview .why-char{opacity:1;transform:translateY(0)}
.why-char-q{color:rgba(255,255,255,.5);font-weight:300;font-style:italic}
/* Lead text with marker sweep */
.why-lead{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:200;line-height:2.2;letter-spacing:.04em;color:rgba(255,255,255,.7);margin-bottom:3.5rem;position:relative}
.why-lead-line{display:inline;background-image:linear-gradient(rgba(59,130,246,.25),rgba(59,130,246,.25));background-size:0% 40%;background-position:0 85%;background-repeat:no-repeat;transition:background-size 0s}
.why-lead.is-inview .why-lead-line{background-size:100% 40%;transition:background-size 1s cubic-bezier(.22,1,.36,1)}
.why-lead.is-inview .why-lead-line:nth-child(1){transition-delay:.6s}
.why-lead.is-inview .why-lead-line:nth-child(3){transition-delay:1s}
/* Funnel visual — trapezoid style */
.why-content-row{display:grid;grid-template-columns:1fr 240px;gap:3rem;align-items:start;margin:3rem 0}
.why-funnel-visual{position:relative;padding:1rem 0;display:flex;flex-direction:column;align-items:center}
.why-funnel-step{display:flex;align-items:center;justify-content:center;position:relative;height:36px;margin-bottom:2px;opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.why-funnel-step.is-inview{opacity:1;transform:translateY(0)}
.why-funnel-step:nth-child(1){transition-delay:.1s}
.why-funnel-step:nth-child(2){transition-delay:.2s}
.why-funnel-step:nth-child(3){transition-delay:.3s}
.why-funnel-step:nth-child(4){transition-delay:.4s}
.why-funnel-step:nth-child(5){transition-delay:.5s}
.why-funnel-bar{height:100%;border-radius:2px;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center;transition:background .5s}
.why-funnel-step:nth-child(1) .why-funnel-bar{width:220px}
.why-funnel-step:nth-child(2) .why-funnel-bar{width:185px}
.why-funnel-step:nth-child(3) .why-funnel-bar{width:150px}
.why-funnel-step:nth-child(4) .why-funnel-bar{width:115px}
.why-funnel-step:nth-child(5) .why-funnel-bar{width:80px;background:rgba(59,130,246,.2)}
.why-funnel-label{font-size:.55rem;letter-spacing:.12em;color:rgba(255,255,255,.4);white-space:nowrap}
/* Strength cards */
.why-strengths{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:0}
.why-s-card{padding:2rem;border:1px solid rgba(255,255,255,.06);transition:border-color .4s}
.why-s-card:hover{border-color:rgba(255,255,255,.15)}
.why-s-num{font-size:.5rem;letter-spacing:.3em;color:rgba(255,255,255,.12);margin-bottom:.8rem}
.why-s-title{font-size:.95rem;font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.85);margin-bottom:.6rem}
.why-s-body{font-size:.75rem;line-height:1.9;color:rgba(255,255,255,.6)}
/* Founder compact */
.why-founder{display:flex;align-items:center;gap:1.8rem;margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.06)}
.why-f-photo{width:72px;height:72px;border-radius:50%;background:#333;flex-shrink:0;overflow:hidden}
.why-f-info{flex:1}
.why-f-name{font-size:.9rem;font-weight:400;letter-spacing:.06em;color:rgba(255,255,255,.8)}
.why-f-role{font-size:.55rem;letter-spacing:.2em;color:rgba(255,255,255,.2);text-transform:uppercase;margin-top:.15rem}
.why-f-bio{font-size:.72rem;line-height:1.8;color:rgba(255,255,255,.6);margin-top:.5rem}
/* Team line */
.why-team{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:1.5rem;letter-spacing:.05em;line-height:1.9}

/* FUNNEL — light section with horizontal timeline */
.funnel{padding:8rem 3.5rem 10rem;background:#f2f2ed;position:relative;overflow:hidden}
.funnel-bg-num{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-size:clamp(18rem,28vw,26rem);font-weight:200;color:rgba(17,17,17,.025);pointer-events:none;line-height:1;transition:opacity .6s;font-family:'Raleway','Noto Sans JP',sans-serif;letter-spacing:-.04em;width:1em;text-align:center}
.funnel-intro{max-width:600px;margin:0 auto 5rem;text-align:center}
.funnel-intro p{font-size:.8rem;color:rgba(17,17,17,.7);line-height:1.9}
/* horizontal timeline nav */
.funnel-timeline{max-width:900px;margin:0 auto 4rem;position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.funnel-timeline::before{content:'';position:absolute;top:15px;left:30px;right:30px;height:1px;background:rgba(17,17,17,.08)}
.funnel-timeline-progress{position:absolute;top:15px;left:30px;height:1px;background:rgba(17,17,17,.5);transition:width .6s cubic-bezier(.22,1,.36,1);width:0}
.ft-item{flex:1;text-align:center;cursor:pointer;position:relative;z-index:2;padding:0 .5rem}
.ft-dot{width:30px;height:30px;border-radius:50%;border:1px solid rgba(17,17,17,.12);margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:500;color:rgba(17,17,17,.2);background:#f2f2ed;transition:all .5s cubic-bezier(.22,1,.36,1);position:relative}
.ft-item.active .ft-dot{border-color:#111;color:#fff;background:#111;transform:scale(1.2)}
.ft-item:hover .ft-dot{border-color:rgba(17,17,17,.4);transform:scale(1.15)}
.ft-item:hover .ft-label{color:rgba(17,17,17,.6)}
.ft-label{font-size:.65rem;font-weight:400;letter-spacing:.08em;color:rgba(17,17,17,.55);transition:color .4s}
.ft-item.active .ft-label{color:#111}
.ft-sub{font-size:.5rem;color:rgba(17,17,17,.4);margin-top:.2rem;letter-spacing:.05em;transition:color .4s}
.ft-item.active .ft-sub{color:rgba(17,17,17,.35)}
/* content panel */
.funnel-content{max-width:700px;margin:0 auto;position:relative;min-height:280px}
.funnel-content-inner{transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.funnel-content h3{font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:200;letter-spacing:.06em;margin-bottom:.8rem;color:#111;line-height:1.5}
.funnel-content .fc-target{font-size:.55rem;letter-spacing:.2em;color:rgba(17,17,17,.25);text-transform:uppercase;margin-bottom:1.8rem;padding:.4rem 1rem;border:1px solid rgba(17,17,17,.1);display:inline-block;border-radius:1px}
.funnel-content p{font-size:.8rem;line-height:2.2;color:rgba(17,17,17,.7)}
.funnel-content .fc-types{display:flex;gap:.6rem;margin-top:2rem;flex-wrap:wrap}
.funnel-content .fc-type{font-size:.6rem;letter-spacing:.1em;padding:.55rem 1.2rem;background:rgba(17,17,17,.04);color:rgba(17,17,17,.45);border:1px solid rgba(17,17,17,.06);border-radius:1px;transition:all .4s;cursor:default}
.funnel-content .fc-type:hover{background:rgba(17,17,17,.08);color:rgba(17,17,17,.7);border-color:rgba(17,17,17,.15)}
.funnel-content .fc-point{margin-top:2rem;font-size:.65rem;color:rgba(17,17,17,.3);line-height:1.9;padding-left:1rem;border-left:1px solid rgba(17,17,17,.1)}

/* SERVICE */
.service{padding:8rem 3.5rem;background:var(--white)}
.service-tagline{font-size:.85rem;color:rgba(17,17,17,.7);margin-top:1.5rem;letter-spacing:.06em;line-height:1.8}
.service-skills-wrap{max-width:900px;margin:4rem auto 0;text-align:center}
.service-skills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:3rem}
.service-skill{display:inline-block;font-size:.75rem;letter-spacing:.06em;padding:.7rem 1.5rem;border:1px solid rgba(17,17,17,.18);color:rgba(17,17,17,.75);background:rgba(17,17,17,.02);border-radius:1px;transition:all .35s}
.service-skill:hover{border-color:#111;background:#111;color:#fff}
.service-note{font-size:.78rem;line-height:2;color:rgba(17,17,17,.7);letter-spacing:.04em;text-align:center;max-width:700px;margin:3rem auto 0}

/* SERVICE — 放射図（全体横長 rx=350, ry=210、中央は円形） */
.service-radial{position:relative;width:840px;height:560px;margin:5rem auto 0;display:block;max-width:100%}
.service-radial-svg{position:absolute;top:50%;left:50%;width:840px;height:560px;transform:translate(-50%,-50%);pointer-events:none;z-index:1;max-width:100%}
.service-radial-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;background:var(--white);border:1px solid #111;display:flex;align-items:center;justify-content:center;z-index:3}
.service-radial-center img{max-width:100px;max-height:34px;width:auto;height:auto;display:block}
.service-radial-tag{position:absolute;top:50%;left:50%;transform:translate(calc(-50% + 350px * cos(var(--angle))),calc(-50% + 210px * sin(var(--angle))));border:1px solid #111;color:#111;padding:.5rem 1.1rem;background:var(--white);font-size:.72rem;letter-spacing:.05em;white-space:nowrap;z-index:2;transition:all .35s}
.service-radial-tag:hover{background:#111;color:#fff;border-color:#111;transform:translate(calc(-50% + 350px * cos(var(--angle))),calc(-50% + 210px * sin(var(--angle)))) scale(1.08)}
.service-skill-list{display:none;list-style:none;padding:0;margin:0}

@media(max-width:820px){
  .service-radial{display:none}
  .service-skill-list{display:flex !important;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:3rem;padding:0;list-style:none}
  .service-skill-list li{display:inline-block;font-size:.75rem;letter-spacing:.06em;padding:.6rem 1.3rem;border:1px solid rgba(17,17,17,.3);color:rgba(17,17,17,.8);background:var(--white);border-radius:1px}
}
.service-flex{max-width:1100px;margin:3rem auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(17,17,17,.06)}
.service-item{background:var(--white);padding:3rem;transition:background .4s,box-shadow .4s;position:relative;overflow:hidden}
.service-item:hover{box-shadow:0 8px 30px rgba(0,0,0,.05)}
.service-item .si-glow{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(17,17,17,.04) 0%,transparent 60%)}
.service-item:hover .si-glow{opacity:1}
.service-item .si-num{font-size:.5rem;letter-spacing:.3em;color:rgba(17,17,17,.12);margin-bottom:1rem}
.service-item h3{font-size:1.1rem;font-weight:400;letter-spacing:.05em;color:#111;margin-bottom:.8rem}
.service-item p{font-size:.75rem;line-height:1.9;color:rgba(17,17,17,.65)}
.service-item .si-arrow{position:absolute;bottom:2rem;right:2.5rem;font-size:1.2rem;color:rgba(17,17,17,.08);transition:all .4s;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.service-item .si-arrow svg{display:block;width:18px;height:18px}
.service-item:hover .si-arrow{color:rgba(17,17,17,.3);transform:translate(4px,-4px)}
.service-main-tag{display:inline-block;font-size:.5rem;letter-spacing:.15em;padding:.25rem .6rem;background:#111;color:#fff;border-radius:1px;margin-bottom:1rem}

/* FLOW */
.flow{padding:8rem 3.5rem;background:#f2f2ed}
.flow-container{max-width:1000px;margin:3rem auto 0;position:relative}
.flow-line{position:absolute;top:28px;left:60px;right:60px;height:1px;background:rgba(17,17,17,.08)}
.flow-items{display:flex;justify-content:space-between;position:relative}
.flow-item{text-align:center;flex:1;cursor:default}
.flow-dot{width:56px;height:56px;border-radius:50%;border:1px solid rgba(17,17,17,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;font-size:.65rem;font-weight:500;color:rgba(17,17,17,.3);background:var(--white);position:relative;z-index:2;transition:all .5s cubic-bezier(.25,.46,.45,.94)}
.flow-item:hover .flow-dot{background:#111;color:#fff;border-color:#111;transform:scale(1.15)}
.flow-item h4{font-size:.8rem;font-weight:500;color:#111;margin-bottom:.3rem;letter-spacing:.03em}
.flow-item p{font-size:.65rem;color:rgba(17,17,17,.55);line-height:1.5}

/* CTA */
/* FRONT PAGE — FEATURES (4つの特徴・ライトテーマ、周囲とトーンを統一) */
.top-features{padding:10rem 3.5rem;background:var(--white);position:relative;overflow:hidden}
.top-features-inner{max-width:1200px;margin:0 auto}
.top-features-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:4rem}
.top-feature-card{padding:2.5rem 2.2rem;border:1px solid rgba(17,17,17,.1);background:rgba(255,255,255,.5);transition:border-color .4s,background .4s,box-shadow .4s;position:relative;overflow:hidden}
.top-feature-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,rgba(17,17,17,.35),rgba(17,17,17,.05))}
.top-feature-card:hover{border-color:rgba(17,17,17,.25);background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.04)}
.top-feature-num{font-size:.5rem;letter-spacing:.3em;color:rgba(17,17,17,.3);margin-bottom:1.2rem;text-transform:uppercase}
.top-feature-title{font-size:1.05rem;font-weight:500;color:#111;letter-spacing:.05em;margin-bottom:1rem;line-height:1.5}
.top-feature-body{font-size:.78rem;line-height:2;color:rgba(17,17,17,.7);letter-spacing:.04em}

.cta{padding:10rem 3.5rem;background:var(--white);text-align:center;position:relative}
.cta-heading{font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:200;letter-spacing:.06em;color:#111;margin-bottom:.8rem;line-height:1.6}
.cta-sub{font-size:.75rem;color:rgba(17,17,17,.55);margin-bottom:3rem;letter-spacing:.05em}
.cta-btn{display:inline-flex;align-items:center;gap:1rem;font-size:.7rem;letter-spacing:.2em;color:#111;text-decoration:none;border:1px solid rgba(17,17,17,.2);padding:1rem 3rem;transition:all .4s;text-transform:uppercase;position:relative;overflow:hidden}
.cta-btn::before{content:'';position:absolute;inset:0;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cta-btn:hover{color:#fff;border-color:#111}
.cta-btn:hover::before{transform:scaleX(1)}
.cta-btn span{position:relative;z-index:1}
.cta-btn .cta-arrow{position:relative;z-index:1;transition:transform .3s}
.cta-btn:hover .cta-arrow{transform:translateX(6px)}

/* FOOTER */
.footer{background:#111;padding:4rem 3.5rem 2.5rem;display:flex;justify-content:space-between;align-items:flex-start}
.footer-left{}
.footer-logo img{height:14px;width:auto;display:block;opacity:.35}
.footer-info{font-size:.6rem;color:rgba(255,255,255,.4);line-height:2;margin-top:1.2rem;max-width:520px}
.footer-office-label{display:inline-block;font-size:.45rem;letter-spacing:.25em;color:rgba(255,255,255,.25);text-transform:uppercase;width:7em}
.footer-right{text-align:right}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links a{font-size:.6rem;letter-spacing:.15em;color:rgba(255,255,255,.2);text-decoration:none;text-transform:uppercase;transition:color .3s}
.footer-links a:hover{color:rgba(255,255,255,.5)}
.footer-copy{font-size:.5rem;color:rgba(255,255,255,.08);margin-top:2rem;letter-spacing:.1em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.04);margin-top:3rem;padding-top:1.5rem;text-align:center}
.footer-bottom p{font-size:.5rem;color:rgba(255,255,255,.06);letter-spacing:.15em}

/* REVEAL */
.rv{opacity:0;transform:translateY(50px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.rv.is-inview{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* SPLIT TEXT ANIMATION */
.split-char{display:inline-block;opacity:0;transform:translateY(100%);transition:all .6s cubic-bezier(.22,1,.36,1)}
.split-char.show{opacity:1;transform:translateY(0)}

/* ============================================
   WORKS DETAIL (元 fevv-works-detail.html 完全移植)
   ============================================ */

/* WORKS DETAIL — Cursor mode (is-back) */
.cur-main.is-back{width:60px;height:60px;background:#fff;border:none}

/* WORKS DETAIL — HERO */
.work-hero{position:relative;height:100vh;overflow:hidden}
.work-hero-img-wrap{position:absolute;top:-20%;left:0;width:100%;height:140%}
.work-hero-img{width:100%;height:100%;object-fit:cover;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast;-ms-interpolation-mode:bicubic}
.work-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.2) 0%,rgba(10,10,10,.6) 100%)}
.work-hero-content{position:absolute;bottom:8rem;left:3.5rem;right:3.5rem;z-index:2}
.work-hero-category{font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1rem;display:inline-block;border:1px solid rgba(255,255,255,.15);padding:.3rem .8rem}
.work-hero-title{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:200;letter-spacing:.06em;line-height:1.4;max-width:700px;color:#fff}
.work-hero-client{font-size:.7rem;letter-spacing:.15em;color:rgba(255,255,255,.35);margin-top:1rem}
.work-hero-scroll{position:absolute;bottom:2.5rem;right:3.5rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;z-index:2}
.work-hero-scroll-text{font-size:.5rem;letter-spacing:.4em;color:rgba(255,255,255,.15);text-transform:uppercase;writing-mode:vertical-rl}
.work-hero-scroll-line{width:1px;height:50px;position:relative;overflow:hidden}
.work-hero-scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.4),transparent);animation:scrollLine 2.5s infinite}

/* WORKS DETAIL — LEAD (案件概要リード文) */
.work-lead{padding:8rem 3.5rem 4rem;background:var(--black);text-align:center;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.work-lead-inner{max-width:780px;margin:0 auto;font-size:clamp(1rem,1.7vw,1.4rem);font-weight:300;line-height:2.1;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.work-lead-inner p{margin:0 0 1rem}
.work-lead-inner p:last-child{margin-bottom:0}

/* WORKS DETAIL — PROJECT INFO BAR */
.work-info-section{background:var(--black);margin:0;padding:0;display:block;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.work-info{padding:4rem 3.5rem;background:var(--black);display:flex;justify-content:space-between;align-items:flex-start;max-width:1200px;margin:0 auto;gap:3rem;flex-wrap:wrap}
/* スクロール in/out で揺れるのを抑制 — reveal系クラスが付いても初期表示・アニメ無効 */
.work-info,.work-info.reveal-up,.work-info.is-inview{opacity:1!important;transform:none!important;transition:none!important}
.work-info-item{flex:1;min-width:120px}
.work-info-label{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:.5rem}
.work-info-value{font-size:.75rem;letter-spacing:.05em;color:rgba(255,255,255,.6);line-height:1.6}

/* WORKS DETAIL — GALLERY LAYOUTS */
.gallery{padding:0 0 8rem;background:var(--black)}
.g-single{max-width:1000px;margin:0 auto;padding:2rem 3.5rem}
.g-single-inner{overflow:hidden;position:relative}
.g-single-inner img{width:100%;display:block;will-change:transform;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1);image-rendering:high-quality;image-rendering:-webkit-optimize-contrast}
.g-single-inner.is-inview img{opacity:1}
.g-wide{width:100%;height:70vh;position:relative;overflow:hidden;margin:3rem 0}
.g-wide img{position:absolute;top:-15%;left:0;width:100%;height:130%;object-fit:cover;will-change:transform;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast}
.g-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:1200px;margin:2rem auto;padding:2rem 3.5rem}
.g-two-item{overflow:hidden;position:relative}
.g-two-item img{width:100%;display:block;will-change:transform;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1)}
.g-two-item.is-inview img{opacity:1}
.g-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin:2rem auto;padding:2rem 3.5rem}
.g-three-item{overflow:hidden;position:relative}
.g-three-item img{width:100%;display:block;will-change:transform;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1);image-rendering:high-quality;image-rendering:-webkit-optimize-contrast}
.g-three-item.is-inview img{opacity:1}
/* 4カラム */
.g-four{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;max-width:1200px;margin:2rem auto;padding:2rem 3.5rem}
.g-four-item{overflow:hidden;position:relative;aspect-ratio:1/1}
.g-four-item img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1);image-rendering:high-quality}
.g-four-item.is-inview img{opacity:1}
/* 左大右小 split-l / 左小右大 split-r */
.g-split{display:grid;gap:1rem;max-width:1200px;margin:2rem auto;padding:2rem 3.5rem;align-items:stretch}
.g-split.g-split-l{grid-template-columns:2fr 1fr}
.g-split.g-split-r{grid-template-columns:1fr 2fr}
.g-split-item{overflow:hidden;position:relative}
.g-split-item img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1);image-rendering:high-quality}
.g-split-item.is-inview img{opacity:1}
/* 縦長シングル */
.g-portrait{max-width:600px;margin:2rem auto;padding:2rem 3.5rem}
.g-portrait-inner{overflow:hidden;position:relative}
.g-portrait-inner img{width:100%;display:block;will-change:transform;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1);image-rendering:high-quality}
.g-portrait-inner.is-inview img{opacity:1}
/* 2x2 グリッド */
.g-grid4{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:900px;margin:2rem auto;padding:2rem 3.5rem}
.g-grid4-item{overflow:hidden;position:relative;aspect-ratio:1/1}
.g-grid4-item img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1);image-rendering:high-quality}
.g-grid4-item.is-inview img{opacity:1}
.g-stagger{max-width:1200px;margin:2rem auto;padding:2rem 3.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.g-stagger-left{padding-top:4rem;overflow:hidden}
.g-stagger-right{overflow:hidden}
.g-stagger-left img,.g-stagger-right img{width:100%;display:block;will-change:transform;object-fit:cover;opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1)}
.g-stagger-left.is-inview img,.g-stagger-right.is-inview img{opacity:1}
.g-video{max-width:1000px;margin:3rem auto;padding:2rem 3.5rem}
.g-video-inner{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:#111}
.g-video-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* WORKS DETAIL — NEXT WORK */
.next-work{position:relative;height:60vh;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.next-work-img{position:absolute;top:-20%;left:0;width:100%;height:140%;object-fit:cover;will-change:transform}
.next-work-overlay{position:absolute;inset:0;background:rgba(10,10,10,.55);transition:background .6s}
.next-work:hover .next-work-overlay{background:rgba(10,10,10,.4)}
.next-work-content{position:relative;z-index:2;text-align:center}
.next-work-label{font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1.5rem}
.next-work-title{font-size:clamp(1.2rem,2.5vw,2rem);font-weight:200;letter-spacing:.06em;line-height:1.5;max-width:500px;margin:0 auto;color:#fff}
.next-work-arrow{margin-top:2rem;font-size:1.5rem;color:rgba(255,255,255,.3);transition:all .4s}
.next-work:hover .next-work-arrow{color:#fff;transform:translateX(10px)}

/* WORKS DETAIL — BACK TO WORKS */
.back-works{position:fixed;top:50%;left:2rem;transform:translateY(-50%);z-index:90;writing-mode:vertical-rl;text-orientation:mixed;opacity:0;pointer-events:none;transition:opacity .6s}
.back-works.is-visible{opacity:1;pointer-events:auto}
.back-works a{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.15);text-decoration:none;mix-blend-mode:difference;transition:color .4s}
.back-works a:hover{color:rgba(255,255,255,.5)}

/* WORKS DETAIL — PILLAR (side text) */
.pillar{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:90;padding:0 1rem}
.pillar-right{position:absolute;right:1rem;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:.5rem;letter-spacing:.3em;color:rgba(255,255,255,.06);text-transform:uppercase;mix-blend-mode:difference}

/* WORKS DETAIL — REVEAL ANIMATION (works-detail独自) */
.reveal-up{opacity:0;transform:translateY(60px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal-up.is-inview,.reveal-up.in-view{opacity:1;transform:translateY(0)}
.reveal-fade{opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1)}
.reveal-fade.is-inview,.reveal-fade.in-view{opacity:1}

/* WORKS DETAIL — Footer (ライトテーマ版、bird-and-insect参考)
   背景は明るい#fafaf7、テキストはダーク #111 系
   SNS/電話/メアド非表示、Contactフォームへ誘導のみ */
.footer-works{background:#fafaf7;padding:6rem 3.5rem 3rem;position:relative;color:#111}
.footer-works-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:4rem;align-items:start}
.footer-works-col-label{font-size:.5rem;letter-spacing:.3em;color:rgba(17,17,17,.4);text-transform:uppercase;margin-bottom:1rem}
.footer-works-brand{font-size:1.1rem;font-weight:300;letter-spacing:.18em;color:#111;margin-bottom:.6rem}
.footer-works-tagline{font-size:.65rem;color:rgba(17,17,17,.5);line-height:1.9;letter-spacing:.06em}
.footer-works-office{}
.footer-works-address{font-size:.65rem;color:rgba(17,17,17,.65);line-height:2;letter-spacing:.04em}
.footer-works-cta{display:inline-flex;align-items:center;gap:.8rem;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:#111;text-decoration:none;border:1px solid rgba(17,17,17,.25);padding:.85rem 1.6rem;transition:all .4s;position:relative;overflow:hidden}
.footer-works-cta::before{content:'';position:absolute;inset:0;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.footer-works-cta:hover{color:#fff;border-color:#111}
.footer-works-cta:hover::before{transform:scaleX(1)}
.footer-works-cta span{position:relative;z-index:1}
.footer-works-cta-arrow{transition:transform .3s}
.footer-works-cta:hover .footer-works-cta-arrow{transform:translateX(4px)}
.footer-works-bottom{max-width:1200px;margin:4rem auto 0;padding-top:2rem;border-top:1px solid rgba(17,17,17,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-works-copy{font-size:.5rem;color:rgba(17,17,17,.4);letter-spacing:.15em;text-transform:uppercase}
.footer-works-back{font-size:.55rem;letter-spacing:.2em;color:rgba(17,17,17,.5);text-decoration:none;text-transform:uppercase;transition:color .3s}
.footer-works-back:hover{color:#111}
/* Side pillar text (right) — bird-and-insect風 */
.footer-works-side{position:fixed;right:1rem;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:.5rem;letter-spacing:.3em;color:rgba(17,17,17,.18);text-transform:uppercase;pointer-events:none;z-index:90}

/* WORKS DETAIL — Mobile */
@media(max-width:768px){
  .nav{padding:1.5rem 1.5rem}
  .work-hero-content{left:1.5rem;right:1.5rem;bottom:5rem}
  .work-info{padding:3rem 1.5rem;flex-direction:column;gap:2rem}
  .g-single,.g-two,.g-three,.g-four,.g-split,.g-portrait,.g-grid4,.g-stagger,.g-video{padding:1rem 1.5rem}
  .g-two{grid-template-columns:1fr}
  .g-three{grid-template-columns:1fr}
  .g-four{grid-template-columns:1fr 1fr}
  .g-split.g-split-l,.g-split.g-split-r{grid-template-columns:1fr}
  .g-grid4{grid-template-columns:1fr 1fr}
  .g-stagger{grid-template-columns:1fr}
  .g-stagger-left{padding-top:0}
  .back-works{display:none}
  .pillar{display:none}
  .footer-works{padding:3rem 1.5rem 2rem}
  .footer-works-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-works-side{display:none}
}

/* ============================================
   ABOUT ページ
   ============================================ */
/* VISION */
.about-vision{padding:10rem 3.5rem 8rem;background:var(--black);position:relative;overflow:hidden}
.about-vision::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:560px;height:560px;background:radial-gradient(circle,rgba(59,130,246,.05) 0%,transparent 70%);pointer-events:none}
.about-vision-statement{margin:3rem 0 4rem;position:relative}
.about-vision-tag{font-size:.75rem;letter-spacing:.5em;color:rgba(59,130,246,.75);text-transform:uppercase;margin-bottom:1.5rem;font-weight:400}
.about-vision-text{font-size:clamp(2rem,5vw,3.6rem);font-weight:300;letter-spacing:.06em;line-height:1.4;color:#fff}
.about-vision-body{font-size:.9rem;line-height:2.3;color:rgba(255,255,255,.6);letter-spacing:.05em;max-width:620px;margin:0 auto;position:relative}

.about-hero{padding:14rem 3.5rem 8rem;background:var(--black);text-align:center}
.about-hero-inner{max-width:900px;margin:0 auto}
.about-hero-eyebrow{font-size:.55rem;letter-spacing:.8em;color:rgba(255,255,255,.25);text-transform:uppercase;margin-bottom:2.5rem}
.about-hero-title{font-size:clamp(2.2rem,5vw,4rem);font-weight:200;letter-spacing:.06em;line-height:1.5;color:#fff;margin-bottom:2rem}
.about-hero-title em{font-style:normal;font-weight:500;color:#fff}
.about-hero-lead{font-size:clamp(.95rem,1.6vw,1.2rem);font-weight:300;color:rgba(255,255,255,.7);line-height:2.1;letter-spacing:.06em}

.about-section{padding:7rem 3.5rem;background:var(--black);position:relative}
.about-inner{max-width:1100px;margin:0 auto}
.about-inner-narrow{max-width:780px}
.about-section-num{font-size:.55rem;letter-spacing:.4em;color:rgba(255,255,255,.25);text-transform:uppercase;margin-bottom:1rem}
.about-section-heading{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:200;letter-spacing:.06em;color:#fff;margin-bottom:2rem}
.about-section-lead{font-size:clamp(.85rem,1.3vw,1rem);font-weight:300;color:rgba(255,255,255,.55);line-height:2;letter-spacing:.05em;margin-bottom:3rem}

/* MISSION cards */
.about-mission-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.about-mission-card{padding:2rem;border:1px solid rgba(255,255,255,.06);transition:border-color .4s}
.about-mission-card:hover{border-color:rgba(255,255,255,.18)}
.about-card-num{font-size:.5rem;letter-spacing:.3em;color:rgba(255,255,255,.2);margin-bottom:1rem}
.about-card-title{font-size:1rem;font-weight:400;color:rgba(255,255,255,.85);margin-bottom:.8rem;letter-spacing:.05em}
.about-card-body{font-size:.75rem;line-height:1.9;color:rgba(255,255,255,.45)}

/* STORY */
.about-story-body{font-size:clamp(.9rem,1.3vw,1.05rem);line-height:2.1;color:rgba(255,255,255,.7);letter-spacing:.04em}
.about-story-body p{margin-bottom:1.4rem}
.about-story-body strong{color:#fff;font-weight:400}

/* FOUNDER */
.about-founder-grid{display:grid;grid-template-columns:120px 1fr;gap:2rem;align-items:center;margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.06)}
.about-founder-photo img,.about-founder-photo-placeholder{width:120px;height:120px;border-radius:50%;background:#333;object-fit:cover}
.about-founder-name{font-size:1.1rem;font-weight:400;color:#fff;letter-spacing:.05em}
.about-founder-role{font-size:.55rem;letter-spacing:.2em;color:rgba(255,255,255,.3);text-transform:uppercase;margin-top:.3rem;margin-bottom:1rem}
.about-founder-bio{font-size:.75rem;line-height:1.8;color:rgba(255,255,255,.5)}
.about-founder-message{font-size:clamp(.9rem,1.3vw,1.05rem);line-height:2.1;color:rgba(255,255,255,.75);letter-spacing:.04em;padding:0 0 0 1.5rem;border-left:2px solid rgba(59,130,246,.25)}
.about-founder-message p{margin-bottom:1.2rem}
.about-founder-message p:last-child{margin-bottom:0}

/* CLIENTS MARQUEE */
.client-marquee{overflow:hidden;padding:2.5rem 0;background:var(--black);position:relative;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.client-marquee-track{display:flex;width:max-content;animation:clientMarquee 40s linear infinite}
.client-marquee-item{flex:0 0 auto;padding:0 2.5rem;display:flex;align-items:center;justify-content:center;height:70px}
.client-marquee-item img{max-height:50px;max-width:140px;width:auto;height:auto;object-fit:contain;opacity:.85;transition:opacity .4s,transform .4s}
.client-marquee-item img:hover{opacity:1;transform:scale(1.06)}
@keyframes clientMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.client-marquee:hover .client-marquee-track{animation-play-state:paused}

/* === Client marquee: 2列・上下逆方向スライド（全画面） ===
   ロゴ配列を 4 回繰り返して出力するので、translateX(-50%) で「2セット分」
   動いて初期位置に戻る → 無限ループが綺麗に繋がる。
   時間も 4回出力に合わせて倍にして見た目の速度を維持。
*/
.client-marquee-dual .client-marquee-track + .client-marquee-track{margin-top:1.2rem}
.client-marquee-dual .client-marquee-track-row1{animation:clientMarquee 72s linear infinite}
.client-marquee-dual .client-marquee-track-row2{animation:clientMarquee 72s linear infinite reverse}
@media(max-width:768px){
  .client-marquee-dual .client-marquee-track + .client-marquee-track{margin-top:.6rem}
  .client-marquee-dual .client-marquee-track-row1{animation-duration:56s}
  .client-marquee-dual .client-marquee-track-row2{animation-duration:56s}
}

.about-scale-list{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.about-scale-item{padding:1.5rem 1.8rem;border:1px solid rgba(255,255,255,.05)}
.about-scale-label{font-size:.5rem;letter-spacing:.3em;color:rgba(255,255,255,.3);text-transform:uppercase;margin-bottom:.6rem}
.about-scale-value{font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.6;letter-spacing:.04em}

/* COMPANY */
.about-company-list{display:grid;grid-template-columns:8rem 1fr;gap:1.2rem 2rem;font-size:.8rem;letter-spacing:.04em}
.about-company-list dt{color:rgba(255,255,255,.35);font-weight:400}
.about-company-list dd{color:rgba(255,255,255,.85);font-weight:300;line-height:1.7}

/* FEATURES */
.about-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.about-feature-card{padding:2.2rem 2rem;border:1px solid rgba(255,255,255,.07);transition:border-color .4s,background .4s;position:relative;overflow:hidden}
.about-feature-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,rgba(59,130,246,.5),rgba(59,130,246,.1))}
.about-feature-card:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.015)}
.about-feature-num{font-size:.5rem;letter-spacing:.3em;color:rgba(59,130,246,.6);margin-bottom:1rem;text-transform:uppercase}
.about-feature-title{font-size:1.05rem;font-weight:500;color:#fff;letter-spacing:.05em;margin-bottom:.9rem;line-height:1.5}
.about-feature-body{font-size:.78rem;line-height:2;color:rgba(255,255,255,.55);letter-spacing:.04em}

/* SERVICE tags (AWARDSセクション内) */
.about-service-wrap{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.05)}
.about-service-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.about-skill-tag{display:inline-block;font-size:.7rem;letter-spacing:.06em;padding:.55rem 1.2rem;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);background:rgba(255,255,255,.02);border-radius:1px;transition:all .4s}
.about-skill-tag:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff}

/* CTA sub */
.about-cta-sub{font-size:.75rem;line-height:2;color:rgba(255,255,255,.5);margin-bottom:2.5rem;letter-spacing:.04em}

/* CTA */
.about-cta{padding:10rem 3.5rem;background:var(--black)}
.about-cta-heading{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:200;letter-spacing:.06em;color:#fff;margin-bottom:2.5rem;line-height:1.7}
.about-cta-btn{display:inline-flex;align-items:center;gap:1rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);padding:1rem 3rem;transition:all .4s;position:relative;overflow:hidden}
.about-cta-btn::before{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.about-cta-btn:hover{color:#111;border-color:#fff}
.about-cta-btn:hover::before{transform:scaleX(1)}
.about-cta-btn span{position:relative;z-index:1}
.about-cta-arrow{transition:transform .3s}
.about-cta-btn:hover .about-cta-arrow{transform:translateX(6px)}

/* ABOUT mobile */
@media(max-width:900px){
  .about-hero{padding:8rem 1.5rem 5rem}
  .about-section{padding:5rem 1.5rem}
  .about-vision{padding:6rem 1.5rem 5rem}
  .about-vision::before{width:300px;height:300px}
  .about-mission-cards{grid-template-columns:1fr;gap:1.2rem}
  .about-feature-grid{grid-template-columns:1fr;gap:1.2rem}
  .about-feature-card{padding:1.8rem 1.5rem}
  .about-founder-grid{grid-template-columns:1fr;text-align:center;gap:1.2rem}
  .about-founder-photo{display:flex;justify-content:center}
  .about-founder-photo img,.about-founder-photo-placeholder{width:100px;height:100px}
  .about-scale-list{grid-template-columns:1fr;gap:1rem}
  .about-company-list{grid-template-columns:1fr;gap:.4rem 0}
  .about-company-list dt{margin-top:1rem;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase}
  .about-cta{padding:5rem 1.5rem}
  .client-marquee-item{padding:0 1.5rem;height:60px}
  .client-marquee-item img{max-height:40px;max-width:100px}
}

/* ============================================
   WORKS ARCHIVE (一覧ページ — /works/)
   元 mockup には無いがWP化のため追加：
   ============================================ */
.works-archive{padding:10rem 3.5rem 8rem;background:var(--black);min-height:100vh}
.works-archive-header{max-width:1400px;margin:0 auto 5rem;text-align:left}
.works-archive-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:200;letter-spacing:.06em;color:#fff;margin-bottom:1rem}
.works-archive-lead{font-size:.85rem;color:rgba(255,255,255,.4);line-height:1.9;max-width:600px}
.works-archive-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.work-card{position:relative;overflow:hidden;aspect-ratio:16/10;background:#1a1a1a;cursor:pointer}
.work-card-img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
.work-card:hover .work-card-img{transform:scale(1.06)}
.work-card-meta{position:absolute;bottom:0;left:0;right:0;padding:2rem;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%)}
.work-card-tag{display:inline-block;font-size:.55rem;letter-spacing:.25em;color:rgba(255,255,255,.55);text-transform:uppercase;border:1px solid rgba(255,255,255,.15);padding:.2rem .6rem;border-radius:1px;margin-bottom:.6rem}
.work-card-title{font-size:1rem;font-weight:300;letter-spacing:.05em;color:#fff;margin-bottom:.3rem}
.work-card-client{font-size:.7rem;color:rgba(255,255,255,.45);letter-spacing:.05em}
.works-archive-empty{text-align:center;padding:5rem 0;color:rgba(255,255,255,.3);font-size:.85rem;letter-spacing:.1em}

/* MOBILE */
@media(max-width:900px){
  body{cursor:auto}
  .cur-main,.cur-label,.trail-dot{display:none!important}
  .nav{padding:1.2rem 1.5rem}
  .nav.compact{padding:.8rem 1.5rem}
  .nav-right{display:none}
  .nav-toggle{display:block}
  .hero-title-line{font-size:1.6rem}
  .works-grid{grid-template-columns:1fr;padding:0 1.5rem}
  .works-grid .work-item{grid-column:auto!important;aspect-ratio:16/9!important}
  .works-header{padding:0 1.5rem}
  .why-fevv{padding:6rem 1.5rem 4rem}
  .why-content-row{grid-template-columns:1fr;gap:2rem}
  .why-funnel-visual{order:-1}
  .why-strengths{grid-template-columns:1fr}
  .why-founder{flex-direction:column;text-align:center;gap:1rem}
  .why-f-photo{width:60px;height:60px}
  .funnel{padding:5rem 1.5rem 6rem}
  .funnel-bg-num{font-size:10rem;right:-5%}
  .funnel-timeline{overflow-x:auto;gap:0;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
  .ft-item{min-width:80px}
  .ft-sub{display:none}
  .funnel-content{min-height:220px}
  .service{padding:5rem 1.5rem}
  .service-flex{grid-template-columns:1fr}
  .flow{padding:5rem 1.5rem}
  .flow-items{flex-direction:column;gap:2rem}
  .flow-line{display:none}
  .cta{padding:5rem 1.5rem}
  .top-features{padding:5rem 1.5rem}
  .top-features-grid{grid-template-columns:1fr;gap:1rem;margin-top:2rem}
  .top-feature-card{padding:1.8rem 1.5rem}
  .footer{flex-direction:column;gap:2rem;padding:3rem 1.5rem 2rem}
  .footer-right{text-align:left}
  .section-heading,.section-heading-light{font-size:1.5rem}
  .works-archive{padding:7rem 1.5rem 5rem}
  .works-archive-grid{grid-template-columns:1fr;gap:1rem}
}

/* === CONTACT PAGE === */
.contact-page{min-height:100vh;padding:10rem 3.5rem 6rem;background:var(--white);color:#111}
.contact-inner{max-width:680px;margin:0 auto;width:100%}
.contact-label{font-size:.55rem;letter-spacing:.35em;color:rgba(17,17,17,.45);text-transform:uppercase;margin-bottom:1rem}
.contact-heading{font-size:clamp(2rem,5vw,3.4rem);font-weight:200;letter-spacing:.06em;margin-bottom:1.2rem;line-height:1.2;color:#111}
.contact-sub{font-size:.85rem;line-height:1.95;color:rgba(17,17,17,.65);margin-bottom:4rem;letter-spacing:.03em}
.contact-sub-note{display:inline-block;margin-top:.6rem;font-size:.7rem;color:rgba(17,17,17,.5);letter-spacing:.05em}
.contact-form-area{margin-bottom:3rem}

/* === Contact Form 7 === */
.wpcf7{margin:0}
.wpcf7-form{display:block}
.wpcf7-form p{margin-bottom:2rem;line-height:1.6}
.wpcf7 label{display:block;font-size:.7rem;letter-spacing:.12em;color:rgba(17,17,17,.6);margin-bottom:.7rem;font-weight:400}
.wpcf7-required,.wpcf7 .req{color:#c8453d;margin-left:.35rem;font-size:1rem;font-weight:600;vertical-align:middle;line-height:1}
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):not(.wpcf7-checkbox){width:100%;background:transparent;border:none;border-bottom:1px solid rgba(17,17,17,.18);color:#111;font-family:var(--font-stack);font-size:.9rem;font-weight:300;letter-spacing:.03em;padding:.8rem 0;outline:none;transition:border-color .4s;-webkit-appearance:none;appearance:none;border-radius:0}
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):not(.wpcf7-checkbox):focus{border-bottom-color:#111}
.wpcf7-form textarea{resize:vertical;height:90px;min-height:90px;line-height:1.85}
.wpcf7-form ::placeholder{color:rgba(17,17,17,.3)}

.wpcf7-radio{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;padding:.5rem 0}
.wpcf7-radio .wpcf7-list-item{margin:0}
.wpcf7-radio .wpcf7-list-item-label{font-size:.8rem;font-weight:300;letter-spacing:.03em;color:#111;cursor:pointer;margin-left:.4rem}
.wpcf7-radio input[type="radio"]{accent-color:#111;cursor:pointer;width:14px;height:14px;vertical-align:middle}

.wpcf7-submit{display:inline-flex;align-items:center;background:transparent;border:1px solid rgba(17,17,17,.3);color:#111;font-family:var(--font-stack);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;padding:1.2rem 3rem;cursor:pointer;transition:all .5s cubic-bezier(.22,1,.36,1);margin-top:1rem;font-weight:500;border-radius:0}
.wpcf7-submit:hover{border-color:#111;padding-left:3.5rem;padding-right:3.5rem;background:#111;color:var(--white)}
.wpcf7-spinner{margin-left:1rem}

.wpcf7-not-valid-tip{color:#c8453d;font-size:.7rem;margin-top:.4rem;letter-spacing:.03em}
.wpcf7-response-output{margin:2rem 0 0 0!important;padding:1.2rem 1.4rem!important;border:1px solid rgba(17,17,17,.15)!important;font-size:.75rem!important;letter-spacing:.03em!important;line-height:1.8!important;color:#111!important}
.wpcf7 form.sent .wpcf7-response-output{border-color:rgba(42,127,79,.4)!important;color:#2a7f4f!important;background:rgba(42,127,79,.05)!important}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:rgba(200,69,61,.4)!important;color:#c8453d!important;background:rgba(200,69,61,.05)!important}

/* reCAPTCHA バッジ非表示（Google規約に従い、フォーム下に利用明示文言を表示） */
.grecaptcha-badge{visibility:hidden !important;opacity:0 !important}

.contact-privacy-note{font-size:.65rem;color:rgba(17,17,17,.45);line-height:1.95;letter-spacing:.03em;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(17,17,17,.08)}
.contact-privacy-note a{color:rgba(17,17,17,.7);border-bottom:1px solid rgba(17,17,17,.2);padding-bottom:1px;text-decoration:none;transition:color .3s,border-color .3s}
.contact-privacy-note a:hover{color:#111;border-bottom-color:#111}

/* reCAPTCHA 利用明示文言（バッジ非表示時の代替表示） */
.contact-recaptcha-note{font-size:.55rem;color:rgba(17,17,17,.45);line-height:1.8;letter-spacing:.03em;margin-top:1.5rem;text-align:center}
.contact-recaptcha-note a{color:rgba(17,17,17,.65);border-bottom:1px solid rgba(17,17,17,.18);padding-bottom:1px;text-decoration:none;transition:color .3s,border-color .3s}
.contact-recaptcha-note a:hover{color:#111;border-bottom-color:#111}

@media(max-width:768px){
  .contact-page{padding:8rem 1.5rem 4rem}
  .contact-heading{margin-bottom:.8rem}
  .contact-sub{margin-bottom:3rem;font-size:.78rem}
  .wpcf7-submit{width:100%;justify-content:center;padding-left:1rem;padding-right:1rem}
  .wpcf7-radio{gap:.6rem 1.2rem}
}

/* === PRIVACY POLICY / LEGAL PAGE === */
.legal-page{padding:9rem 3.5rem 6rem;background:var(--white);color:#111;min-height:80vh}
.legal-inner{max-width:760px;margin:0 auto;width:100%}
.legal-label{font-size:.55rem;letter-spacing:.35em;color:rgba(17,17,17,.45);text-transform:uppercase;margin-bottom:1rem}
.legal-heading{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:300;letter-spacing:.06em;margin-bottom:3rem;line-height:1.3;color:#111}
.legal-body{font-size:.85rem;line-height:1.95;color:rgba(17,17,17,.85);letter-spacing:.02em}
.legal-body h2{font-size:1.05rem;font-weight:500;letter-spacing:.04em;margin:3rem 0 1rem;padding-top:1.8rem;border-top:1px solid rgba(17,17,17,.08);color:#111}
.legal-body h2:first-child{padding-top:0;border-top:none;margin-top:0}
.legal-body h3{font-size:.9rem;font-weight:500;letter-spacing:.04em;margin:1.8rem 0 .8rem;color:#111}
.legal-body p{margin-bottom:1.2rem}
.legal-body ul{margin:1rem 0 1.5rem 1.5rem;padding:0;list-style:disc}
.legal-body li{margin-bottom:.5rem;line-height:1.85}
.legal-body a{color:#111;border-bottom:1px solid rgba(17,17,17,.3);padding-bottom:1px;text-decoration:none}
.legal-body a:hover{border-bottom-color:#111}
.legal-body hr{border:none;border-top:1px solid rgba(17,17,17,.1);margin:2.5rem 0}
.legal-body strong{font-weight:500}

@media(max-width:768px){
  .legal-page{padding:7rem 1.5rem 4rem}
  .legal-heading{margin-bottom:2rem}
  .legal-body{font-size:.78rem}
  .legal-body h2{font-size:.95rem;margin:2rem 0 .8rem}
}