/* ===== from index.html ===== */
/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;background:#ffffff;color:#1c1917;overflow-x:hidden;line-height:1;}
img{max-width:100%;display:block;} a{text-decoration:none;color:inherit;}
/* ═══ TOKENS ═══ */
:root{
--ink:#1c1917;--ink2:#f4f3f0;--ink3:#e8e6e1;
--te:#e6a700;--te2:#b98a06;--te3:#fff6da;
--go:#9c7a08;--gl:#f5b301;--re:#6b6560;--or:#cf9200;
--wm:#ffffff;--gr:#7c756e;--gr2:#55504b;
--serif:'Shippori Mincho',serif;
--disp:'Cormorant Garamond',serif;
--max:1180px;
}
/* ═══ TYPE SCALE（全体的に大きく） ═══ */
/* 見出し */
.h-hero {font-family:var(--serif);font-size:clamp(44px,5.5vw,76px);font-weight:800;line-height:1.24;}
.h-xl {font-family:var(--serif);font-size:clamp(36px,4.5vw,62px);font-weight:800;line-height:1.28;}
.h-lg {font-family:var(--serif);font-size:clamp(28px,3.5vw,48px);font-weight:700;line-height:1.32;}
.h-md {font-family:var(--serif);font-size:clamp(22px,2.8vw,36px);font-weight:700;line-height:1.38;}
.h-sm {font-family:var(--serif);font-size:clamp(18px,2.2vw,26px);font-weight:700;line-height:1.45;}
.h-xs {font-family:var(--serif);font-size:clamp(15px,1.8vw,20px);font-weight:700;line-height:1.5;}
/* ディスプレイ */
.d-xl {font-family:var(--disp);font-size:clamp(56px,7vw,100px);font-weight:300;line-height:1.06;letter-spacing:-.02em;}
.d-lg {font-family:var(--disp);font-size:clamp(40px,5vw,68px);font-weight:300;line-height:1.1;}
.d-md {font-family:var(--disp);font-size:clamp(28px,3.5vw,44px);font-weight:300;line-height:1.18;}
.d-num{font-family:var(--disp);font-size:clamp(52px,6.5vw,88px);font-weight:300;line-height:1;}
/* 本文 */
.t-xl {font-size:clamp(18px,2vw,22px);line-height:2.0;}
.t-lg {font-size:clamp(16px,1.8vw,20px);line-height:1.96;}
.t-md {font-size:clamp(15px,1.6vw,18px);line-height:1.92;}
.t-sm {font-size:clamp(14px,1.4vw,16px);line-height:1.88;}
.t-xs {font-size:clamp(13px,1.3vw,15px);line-height:1.82;}
.t-2xs{font-size:clamp(12px,1.2vw,14px);line-height:1.76;}
/* ラベル */
.eyebrow{font-family:var(--disp);font-size:clamp(11px,1vw,13px);letter-spacing:5px;text-transform:uppercase;display:block;}
/* ═══ LAYOUT ═══ */
.container{max-width:var(--max);margin:0 auto;padding:0 48px;}
.section{padding:120px 0;}
.section-sm{padding:80px 0;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.flex-c{display:flex;align-items:center;}
.gap2{gap:16px;} .gap3{gap:24px;} .gap4{gap:32px;}
.tc{text-align:center;}
.text-gold{color:var(--gl);} .text-teal{color:var(--te2);} .text-muted{color:var(--gr);}
.mt1{margin-top:8px;} .mt2{margin-top:16px;} .mt3{margin-top:24px;}
.mt4{margin-top:32px;} .mt5{margin-top:48px;} .mt6{margin-top:64px;}
.rule-go{height:1.5px;background:linear-gradient(90deg,var(--go),transparent);margin:20px 0;}
.rule-te{height:1.5px;background:linear-gradient(90deg,var(--te),transparent);margin:20px 0;}
/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:clamp(15px,1.5vw,18px);font-weight:700;padding:16px 32px;cursor:pointer;transition:all .24s;letter-spacing:.04em;}
.btn-primary{background:var(--te);color:#1c1917;border:2px solid var(--te);}
.btn-primary:hover{background:var(--te2);border-color:var(--te2);transform:translateY(-3px);box-shadow:0 12px 32px rgba(230,167,0,.25);}
.btn-outline{background:transparent;color:#1c1917;border:1.5px solid rgba(0,0,0,.32);}
.btn-outline:hover{border-color:var(--gl);color:var(--gl);transform:translateY(-3px);}
.btn-gold{background:var(--go);color:#1c1917;border:2px solid var(--go);}
.btn-gold:hover{background:var(--gl);border-color:var(--gl);transform:translateY(-3px);}
.btn-sm{padding:11px 22px;font-size:clamp(13px,1.3vw,15px);}
/* ═══ NAV ═══ */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:72px;display:flex;align-items:center;padding:0 48px;transition:background .35s,backdrop-filter .35s;}
#nav.scrolled{background:rgba(0,0,0,.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06);}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.nav-brand-vortex{width:38px;height:38px;object-fit:contain;flex-shrink:0;animation:vx-appear 1.1s cubic-bezier(.23,1,.32,1) both;}
@keyframes vx-appear{
0%{opacity:0;transform:rotate(-270deg) scale(.1);}
65%{opacity:1;transform:rotate(18deg) scale(1.1);}
82%{transform:rotate(-5deg) scale(.97);}
100%{opacity:1;transform:rotate(0deg) scale(1);}
}
.nav-brand-text{font-family:var(--disp);font-size:22px;font-weight:300;color:rgba(41,37,36,.92);letter-spacing:3px;animation:vx-slide-in .6s ease both;animation-delay:.38s;}
@keyframes vx-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
.nav-links{display:flex;align-items:center;gap:36px;margin-left:auto;}
.nav-links a{font-size:clamp(13px,1.2vw,15px);font-weight:500;color:rgba(41,37,36,.65);letter-spacing:.04em;transition:color .2s;padding:4px 0;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gl);transform:scaleX(0);transition:transform .2s;}
.nav-links a:hover,.nav-links a.active{color:#1c1917;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{margin-left:16px;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;margin-left:auto;padding:4px;background:none;border:none;z-index:1001;}
.nav-hamburger span{display:block;width:24px;height:1.5px;background:rgba(0,0,0,.85);border-radius:2px;transition:transform .25s,opacity .25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-links.mobile-open{display:flex!important;flex-direction:column;position:fixed;top:72px;left:0;right:0;background:rgba(0,0,0,.97);backdrop-filter:blur(20px);padding:28px 32px 36px;gap:0;border-bottom:1px solid rgba(0,0,0,.07);z-index:999;animation:slide-down .25s ease;}
.nav-links.mobile-open a{padding:16px 0;font-size:18px;border-bottom:1px solid rgba(0,0,0,.06);color:rgba(41,37,36,.8)!important;}
.nav-links.mobile-open .nav-cta{display:block;text-align:center;padding:15px 20px;background:var(--te);color:#1c1917!important;font-size:17px;margin-top:16px;border-bottom:none;}
@keyframes slide-down{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
/* ═══ PAGE HERO (sub pages) ═══ */
.page-hero{position:relative;min-height:460px;display:flex;align-items:flex-end;overflow:hidden;padding-top:72px;}
.page-hero-bg{position:absolute;inset:0;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.02);}
.page-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.9) 100%);}
.page-hero-inner{position:relative;z-index:1;padding:0 48px 64px;max-width:var(--max);margin:0 auto;width:100%;}
.page-hero-inner .eyebrow{color:rgba(41,37,36,.45);margin-bottom:16px;}
.page-hero-title{font-family:var(--serif);font-size:clamp(30px,4.5vw,58px);font-weight:800;color:#1c1917;line-height:1.28;}
.page-hero-title em{font-style:normal;color:var(--gl);}
.page-hero-sub{font-size:clamp(15px,1.6vw,18px);color:rgba(41,37,36,.6);margin-top:14px;max-width:580px;line-height:1.78;}
.vx-page-hero{position:absolute;right:36px;bottom:28px;width:100px;height:100px;object-fit:contain;opacity:.15;pointer-events:none;animation:vx-spin 18s linear infinite;}
/* ═══ FOOTER ═══ */
footer{background:#f4f3f0;padding:96px 0 32px;border-top:1px solid rgba(0,0,0,.04);position:relative;overflow:hidden;}
.vx-footer-bg{position:absolute;bottom:-50px;right:-50px;width:260px;height:260px;object-fit:contain;opacity:.055;pointer-events:none;animation:vx-spin 24s linear infinite reverse;}
.footer-grid{display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:52px;margin-bottom:52px;}
.footer-logo img{height:28px;margin-bottom:24px;}
.footer-desc{font-size:clamp(13px,1.3vw,15px);color:var(--gr);line-height:1.84;}
.footer-col-title{font-family:var(--disp);font-size:clamp(10px,1vw,12px);letter-spacing:4px;text-transform:uppercase;color:var(--go);margin-bottom:22px;display:block;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:11px;}
.footer-links a{font-size:clamp(13px,1.3vw,15px);color:var(--gr);transition:color .2s;}
.footer-links a:hover{color:var(--gl);}
.footer-info{display:flex;flex-direction:column;gap:9px;}
.fi-row{display:flex;gap:10px;}
.fi-l{font-family:var(--disp);font-size:clamp(9px,0.9vw,11px);letter-spacing:2px;text-transform:uppercase;color:var(--te2);width:56px;flex-shrink:0;padding-top:2px;}
.fi-v{font-size:clamp(13px,1.3vw,15px);color:var(--gr2);line-height:1.58;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid rgba(0,0,0,.04);font-size:clamp(12px,1.2vw,14px);color:var(--gr);}
.footer-nav{display:flex;gap:24px;}
.footer-nav a{font-size:clamp(12px,1.2vw,14px);color:var(--gr);transition:color .2s;}
.footer-nav a:hover{color:var(--gl);}
/* ═══ REVEAL ANIMATIONS ═══ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
/* ═══ VORTEX ═══ */
.hero-vortex-inline{position:absolute;pointer-events:none;z-index:1;opacity:0;animation:vx-hero-expand 2.4s cubic-bezier(.16,1,.3,1) .4s both;}
@keyframes vx-hero-expand{
0%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(-540deg);}
45%{opacity:.18;transform:translate(-50%,-50%) scale(.7) rotate(-60deg);}
72%{opacity:.11;transform:translate(-50%,-50%) scale(1.04) rotate(10deg);}
87%{opacity:.08;transform:translate(-50%,-50%) scale(.97) rotate(-2deg);}
100%{opacity:.08;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
}
@keyframes vx-float{
0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
30%{transform:translate(-50%,-50%) scale(1.03) rotate(5deg);}
65%{transform:translate(-50%,-50%) scale(.97) rotate(-4deg);}
}
.vx-divider{display:flex;align-items:center;gap:20px;margin:64px 0;opacity:0;transform:rotate(-180deg) scale(.5);transition:opacity .75s ease,transform .85s cubic-bezier(.23,1,.32,1);}
.vx-divider.vx-in{opacity:1;transform:rotate(0deg) scale(1);}
.vx-divider::before,.vx-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);}
.vx-divider img{width:36px;height:36px;object-fit:contain;animation:vx-spin 16s linear infinite;}
@keyframes vx-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
/* ═══ CARDS ═══ */
.card{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 56px rgba(0,0,0,.28);}
.card-w{background:#fff;border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card-w:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,0,0,.12);}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,167,0,.12);border:1px solid rgba(230,167,0,.28);color:var(--gl);font-size:clamp(11px,1vw,13px);font-weight:500;padding:5px 12px;border-radius:2px;}
/* ═══ TICKER ═══ */
.ticker{background:var(--te);overflow:hidden;padding:12px 0;border-top:1px solid rgba(0,0,0,.07);border-bottom:1px solid rgba(0,0,0,.07);}
.ticker-inner{display:flex;gap:52px;animation:tick 28s linear infinite;white-space:nowrap;}
.ticker-item{font-family:var(--disp);font-size:clamp(13px,1.2vw,15px);letter-spacing:3px;text-transform:uppercase;color:rgba(41,37,36,.8);display:flex;align-items:center;gap:36px;}
.ticker-dot{width:5px;height:5px;background:var(--gl);border-radius:50%;flex-shrink:0;}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
.container{padding:0 32px;}
#nav{padding:0 32px;}
.footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
.grid2{grid-template-columns:1fr;gap:40px;}
.grid3{grid-template-columns:1fr 1fr;gap:28px;}
.grid4{grid-template-columns:1fr 1fr;gap:24px;}
}
@media(max-width:768px){
:root{--max:100%;}
.container{padding:0 20px;}
#nav{padding:0 20px;height:62px;}
.nav-links{display:none;}
.nav-hamburger{display:flex;}
.section{padding:72px 0;}
.section-sm{padding:52px 0;}
.page-hero{min-height:340px;}
.page-hero-inner{padding:0 20px 44px;}
.footer-grid{grid-template-columns:1fr;gap:32px;}
.footer-bottom{flex-direction:column;gap:10px;text-align:center;}
.grid3{grid-template-columns:1fr;}
.grid4{grid-template-columns:1fr;}
}
@media(max-width:480px){
.container{padding:0 16px;}
#nav{padding:0 16px;}
.btn{padding:14px 24px;font-size:15px;}
}
/* ===== from index.html ===== */
/* ── HERO ── */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:brightness(1.02);}
.hero-grad{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.32) 62%,rgba(230,167,0,.18) 100%);}
.hero-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 48px;padding-top:88px;display:grid;grid-template-columns:1fr 460px;gap:80px;align-items:center;}
.hero-kicker{display:flex;align-items:center;gap:16px;margin-bottom:28px;}
.hero-kicker-line{width:32px;height:1.5px;background:var(--gl);}
.hero-kicker span{font-family:var(--disp);font-size:clamp(11px,1vw,13px);letter-spacing:5px;text-transform:uppercase;color:var(--gl);}
/* ── メインメッセージ（大きく・インパクト） ── */
.hero-message{margin-bottom:32px;}
.hero-msg-line1{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);font-weight:500;color:rgba(41,37,36,.75);line-height:1.6;margin-bottom:8px;}
.hero-msg-line2{font-family:var(--serif);font-size:clamp(36px,5.5vw,78px);font-weight:800;color:#1c1917;line-height:1.18;margin-bottom:12px;letter-spacing:-.01em;}
.hero-msg-line2 em{font-style:normal;color:var(--gl);}
.hero-msg-line3{font-family:var(--serif);font-size:clamp(16px,2vw,26px);font-weight:500;color:rgba(41,37,36,.6);line-height:1.6;border-left:3px solid var(--go);padding-left:16px;margin-top:16px;}
.hero-sub{font-size:clamp(15px,1.6vw,19px);line-height:1.96;color:rgba(41,37,36,.68);margin-bottom:40px;max-width:520px;}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px;}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(0,0,0,.08);}
.hero-stat{padding:18px 20px;border-right:1px solid rgba(0,0,0,.08);}
.hero-stat:last-child{border-right:none;}
.hero-stat-n{font-family:var(--disp);font-size:clamp(32px,3.5vw,48px);font-weight:300;line-height:1;}
.hero-stat-l{font-size:clamp(11px,1vw,13px);color:var(--gr2);margin-top:6px;font-weight:500;line-height:1.45;}
.hero-stat-s{font-size:clamp(10px,.9vw,12px);color:var(--gr);margin-top:3px;}
/* ── ヒーロー右：3枚写真コラージュ ── */
.hero-photos{position:relative;height:560px;}
.hero-photo-main{position:absolute;top:0;right:0;width:300px;border-radius:4px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5);border:2px solid rgba(0,0,0,.08);}
.hero-photo-main img{width:100%;height:360px;object-fit:cover;object-position:center 20%;}
.hero-photo-s1{position:absolute;bottom:40px;left:0;width:230px;border-radius:4px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.45);border:2px solid rgba(0,0,0,.08);}
.hero-photo-s1 img{width:100%;height:200px;object-fit:cover;object-position:center 30%;}
.hero-photo-s2{position:absolute;top:240px;right:40px;width:200px;border-radius:4px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.4);border:2px solid rgba(0,0,0,.08);}
.hero-photo-s2 img{width:100%;height:160px;object-fit:cover;object-position:center 40%;}
.hero-photo-badge{position:absolute;top:16px;left:16px;background:var(--te);color:#1c1917;font-family:var(--serif);font-size:12px;font-weight:700;padding:5px 12px;border-radius:2px;}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(41,37,36,.35);z-index:2;animation:bounce 2s ease-in-out infinite;}
.hero-scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent);}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}
/* ── 利用者様ファースト セクション ── */
.user-first{background:var(--wm);color:var(--ink);}
.uf-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.uf-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.uf-photo{border-radius:4px;overflow:hidden;}
.uf-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s;}
.uf-photo:hover img{transform:scale(1.04);}
.uf-photo.tall img{aspect-ratio:3/4;}
.uf-photo-wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;}
.uf-photo-wrap .uf-photo:first-child{grid-row:span 2;}
.quote-block{background:#f4f3f0;padding:28px 32px;border-left:4px solid var(--te);margin-top:28px;}
.quote-text{font-family:var(--disp);font-size:clamp(18px,2vw,24px);font-style:italic;color:rgba(41,37,36,.88);line-height:1.72;}
.quote-text em{font-style:normal;color:var(--gl);}
.quote-src{font-size:clamp(12px,1.1vw,14px);color:var(--gr);margin-top:10px;}
/* ── KPI STRIP ── */
.kpi-strip{background:var(--ink2);border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.kpi-cell{padding:36px 40px;border-right:1px solid rgba(0,0,0,.05);display:flex;align-items:center;gap:20px;}
.kpi-cell:last-child{border-right:none;}
.kpi-num{font-family:var(--disp);font-size:clamp(44px,5vw,64px);font-weight:300;line-height:1;flex-shrink:0;}
.kpi-label{font-size:clamp(14px,1.4vw,17px);font-weight:500;line-height:1.5;color:var(--gr2);}
.kpi-src{font-size:clamp(11px,1vw,13px);color:var(--gr);margin-top:4px;}
/* ── NAV CARDS ── */
.nav-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);}
.nav-card{position:relative;overflow:hidden;aspect-ratio:16/7;cursor:pointer;display:block;}
.nav-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:brightness(1);}
.nav-card:hover img{transform:scale(1.04);filter:brightness(1.05);}
.nav-card-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,transparent 55%);}
.nav-card-body{position:absolute;bottom:0;left:0;right:0;padding:32px 36px;}
.nav-card-ey{font-family:var(--disp);font-size:clamp(10px,.9vw,12px);letter-spacing:4px;text-transform:uppercase;color:var(--go);display:block;margin-bottom:8px;}
.nav-card-title{font-family:var(--serif);font-size:clamp(18px,2vw,26px);font-weight:700;color:#1c1917;line-height:1.38;margin-bottom:8px;}
.nav-card-sub{font-size:clamp(12px,1.2vw,15px);color:rgba(41,37,36,.58);line-height:1.62;}
.nav-card-arrow{position:absolute;top:28px;right:28px;width:36px;height:36px;border:1px solid rgba(0,0,0,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(41,37,36,.5);transition:.25s;}
.nav-card:hover .nav-card-arrow{background:var(--te);border-color:var(--te2);color:#1c1917;}
/* ── SUPERVISOR ── */
.sv-strip{background:var(--ink2);border:1px solid rgba(0,0,0,.06);padding:36px 44px;display:flex;align-items:center;gap:36px;}
.sv-photo{width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--go);}
.sv-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;}
.sv-info .sv-label{font-family:var(--disp);font-size:clamp(9px,.9vw,11px);letter-spacing:3px;text-transform:uppercase;color:var(--go);display:block;margin-bottom:5px;}
.sv-name{font-family:var(--serif);font-size:clamp(18px,1.8vw,22px);font-weight:700;color:#1c1917;}
.sv-title{font-size:clamp(12px,1.1vw,14px);color:var(--gr);margin-top:3px;}
.sv-quote{flex:1;font-family:var(--disp);font-size:clamp(16px,1.6vw,20px);font-style:italic;line-height:1.72;color:rgba(41,37,36,.8);border-left:2px solid var(--go);padding-left:24px;}
.sv-quote em{font-style:normal;color:var(--gl);}
/* ── CONTACT ── */
#contact{background:var(--te);position:relative;overflow:hidden;}
.contact-bg{position:absolute;inset:0;}
.contact-bg img{width:100%;height:100%;object-fit:cover;opacity:.07;}
.contact-inner{position:relative;z-index:1;text-align:center;padding:120px 48px;}
.contact-title{font-family:var(--serif);font-size:clamp(30px,4vw,56px);font-weight:800;color:#1c1917;line-height:1.34;}
.contact-title em{font-style:normal;color:var(--gl);}
.contact-form{max-width:580px;margin:44px auto 0;display:flex;flex-direction:column;gap:16px;text-align:left;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:clamp(13px,1.2vw,15px);color:rgba(41,37,36,.75);font-weight:500;}
.form-field input,.form-field textarea,.form-field select{background:rgba(0,0,0,.11);border:1px solid rgba(0,0,0,.22);color:#1c1917;padding:14px 16px;font-size:clamp(14px,1.3vw,16px);font-family:var(--sans);outline:none;transition:border .2s;border-radius:2px;}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(41,37,36,.38);}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--gl);}
.form-field textarea{resize:vertical;min-height:110px;}
.form-field select option{background:#f4f3f0;color:#1c1917;}
.form-submit{background:#fff;color:var(--te2);font-family:var(--serif);font-size:clamp(15px,1.5vw,17px);font-weight:700;padding:16px;border:none;cursor:pointer;transition:.22s;border-radius:2px;}
.form-submit:hover{background:var(--gl);color:var(--ink);}
/* responsive */
@media(max-width:1024px){
.hero-inner{grid-template-columns:1fr;gap:40px;padding-top:80px;}
.hero-photos{display:none;}
.hero-stats{grid-template-columns:1fr 1fr 1fr;}
.uf-grid{grid-template-columns:1fr;}
.kpi-grid{grid-template-columns:1fr;}
.kpi-cell{border-right:none;border-bottom:1px solid rgba(0,0,0,.05);}
.nav-cards{grid-template-columns:1fr;}
.sv-strip{flex-wrap:wrap;gap:24px;}
.sv-quote{border-left:none;border-top:1px solid rgba(230,167,0,.2);padding:16px 0 0;width:100%;}
}
@media(max-width:768px){
.hero-stats{grid-template-columns:1fr;}
.hero-stat{border-right:none;border-bottom:1px solid rgba(0,0,0,.07);}
.contact-inner{padding:72px 20px;}
.form-row{grid-template-columns:1fr;}
}
/* ===== from index.html ===== */
/* ── ORINOA ロゴ渦（ヒーロー中央・大型回転） ── */
.hero-vx{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(940px,96vw);aspect-ratio:1/1;pointer-events:none;z-index:1;opacity:.34;}
.hero-vx-fade{width:100%;height:100%;opacity:0;transform:scale(.55);
animation:hero-vx-in 1.9s cubic-bezier(.16,1,.3,1) .35s forwards;}
@keyframes hero-vx-in{to{opacity:1;transform:scale(1);}}
.hero-vx-spin{width:100%;height:100%;object-fit:contain;
animation:vx-spin 42s linear infinite;
filter:drop-shadow(0 0 80px rgba(230,167,0,.34));}
@media(max-width:768px){.hero-vx{opacity:.22;width:min(600px,116vw);}}
@media(prefers-reduced-motion:reduce){.hero-vx-spin{animation:none;}}
/* ── i terrace がつなぐ人々（人物イラスト） ── */
.personas{background:var(--ink2);position:relative;overflow:hidden;}
.personas-frame{background:linear-gradient(180deg,#fdfbf6,#f3eee2);
border:1px solid rgba(230,167,0,.20);border-radius:12px;
padding:clamp(14px,3vw,40px);box-shadow:0 34px 90px rgba(0,0,0,.38);}
.personas-frame img{width:100%;height:auto;border-radius:5px;display:block;}
.personas-legend{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px;}
.persona-chip{text-align:center;padding:0 6px;}
.persona-chip .pc-no{font-family:var(--disp);font-size:clamp(24px,2.6vw,34px);
font-weight:300;color:var(--gl);line-height:1;}
.persona-chip .pc-t{font-size:clamp(12px,1.2vw,14.5px);color:var(--gr2);
margin-top:9px;line-height:1.5;font-weight:500;}
@media(max-width:768px){.personas-legend{grid-template-columns:1fr 1fr;gap:20px 14px;}}
/* ===== from index.html ===== */
/* ===== i terrace ロゴ：回転をやめ、ゆれ/フロートに（iが反転しないように） ===== */
.hero-vx{opacity:.62 !important;}
.hero-vx-spin{animation:itr-float 7s ease-in-out infinite !important;
filter:drop-shadow(0 8px 26px rgba(60,50,40,.14)) !important;}
@keyframes itr-float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-12px) scale(1.012);}}
.vx-page-hero{animation:itr-bob 8s ease-in-out infinite !important;}
@keyframes itr-bob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7px) rotate(0);}}
.vx-divider img{animation:none !important;}
.vx-footer-bg{animation:none !important;opacity:.06 !important;}
/* フッターのワードマーク */
.footer-logo img{height:46px !important;width:auto !important;margin-bottom:22px;}
/* ===== from company.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;background:#ffffff;color:#1c1917;overflow-x:hidden;line-height:1;}
img{max-width:100%;display:block;}a{text-decoration:none;color:inherit;}
:root{--ink:#1c1917;--ink2:#f4f3f0;--te:#e6a700;--te2:#b98a06;--te3:#fff6da;--go:#9c7a08;--gl:#f5b301;--re:#6b6560;--or:#cf9200;--wm:#ffffff;--gr:#7c756e;--gr2:#55504b;--serif:'Shippori Mincho',serif;--disp:'Cormorant Garamond',serif;--max:1180px;}
.container{max-width:var(--max);margin:0 auto;padding:0 40px;}
.section{padding:96px 0;}.section-sm{padding:64px 0;}
.eyebrow{font-family:var(--disp);font-size:11px;letter-spacing:5px;text-transform:uppercase;display:block;}
.h-serif{font-family:var(--serif);font-weight:700;line-height:1.38;}
.body-md{font-size:15px;line-height:1.88;}.body-sm{font-size:13px;line-height:1.85;}.body-xs{font-size:12px;line-height:1.75;}
.text-gold{color:var(--gl);}.text-teal{color:var(--te2);}.text-muted{color:var(--gr);}
.mt2{margin-top:16px;}.mt3{margin-top:24px;}.mt4{margin-top:32px;}.mt5{margin-top:48px;}.mt6{margin-top:64px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;font-weight:700;padding:12px 24px;cursor:pointer;transition:all .22s;letter-spacing:.04em;}
.btn-primary{background:var(--te);color:#1c1917;border:2px solid var(--te);}
.btn-primary:hover{background:var(--te2);border-color:var(--te2);transform:translateY(-2px);}
.btn-outline{background:transparent;color:#1c1917;border:1.5px solid rgba(0,0,0,.3);}
.btn-outline:hover{border-color:var(--gl);color:var(--gl);transform:translateY(-2px);}
.btn-gold{background:var(--go);color:#1c1917;border:2px solid var(--go);}.btn-gold:hover{background:var(--gl);transform:translateY(-2px);}
.btn-sm{padding:9px 18px;font-size:12px;}
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;padding:0 40px;transition:background .35s,backdrop-filter .35s;}
#nav.scrolled{background:rgba(0,0,0,.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06);}
.nav-logo img{height:30px;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto;}
.nav-links a{font-size:13px;font-weight:500;color:rgba(41,37,36,.62);letter-spacing:.04em;transition:color .2s;padding:4px 0;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gl);transform:scaleX(0);transition:transform .2s;}
.nav-links a:hover,.nav-links a.active{color:#1c1917;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{margin-left:12px;}
.page-hero{position:relative;min-height:400px;display:flex;align-items:flex-end;overflow:hidden;padding-top:64px;}
.page-hero-bg{position:absolute;inset:0;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.3);}
.page-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.9) 100%);}
.page-hero-inner{position:relative;z-index:1;padding:0 40px 56px;max-width:var(--max);margin:0 auto;width:100%;}
footer{background:#f4f3f0;padding:80px 0 28px;border-top:1px solid rgba(0,0,0,.04);}
.footer-grid{display:grid;grid-template-columns:240px 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-logo img{height:24px;margin-bottom:20px;}
.footer-desc{font-size:12px;color:var(--gr);line-height:1.82;}
.footer-col-title{font-family:var(--disp);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--go);margin-bottom:20px;display:block;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-links a{font-size:13px;color:var(--gr);transition:color .2s;}.footer-links a:hover{color:var(--gl);}
.footer-info{display:flex;flex-direction:column;gap:7px;}
.fi-row{display:flex;gap:8px;}
.fi-l{font-family:var(--disp);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--te2);width:48px;flex-shrink:0;padding-top:2px;}
.fi-v{font-size:12px;color:var(--gr2);line-height:1.55;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(0,0,0,.04);font-size:11px;color:var(--gr);}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
.rule-gold{height:1px;background:linear-gradient(90deg,var(--go),transparent);margin:24px 0;}
.rule-teal{height:1px;background:linear-gradient(90deg,var(--te),transparent);margin:24px 0;}
.card{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.25);}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,167,0,.12);border:1px solid rgba(230,167,0,.28);color:var(--gl);font-size:11px;font-weight:500;padding:4px 10px;border-radius:2px;}
.axis-fill{height:100%;background:linear-gradient(to right,var(--te),var(--te2));border-radius:4px;transition:width 1.1s ease;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}#nav{padding:0 20px;}.container{padding:0 20px;}}
@media(max-width:768px){.nav-links{display:none;}.footer-grid{grid-template-columns:1fr;}}
/* 渦巻きコンテナ */
.orinoa-vortex {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orinoa-vortex img {
animation: vortex-spin-in 1.2s cubic-bezier(.23,1,.32,1) both;
}
.vortex-reveal.in {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* セクション区切りの渦アクセント */
.vortex-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(26,102,64,.4), transparent);
}
.vortex-divider img {
width: 28px;
height: 28px;
object-fit: contain;
animation: vortex-slow-spin 12s linear infinite;
opacity: .6;
}
@keyframes vortex-slow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ナビロゴエリア */
.nav-brand-vortex {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-in 1s cubic-bezier(.23,1,.32,1) both;
animation-delay: .1s;
opacity: 0;
animation-fill-mode: both;
}
.nav-brand-logo {
height: 24px;
animation: fade-in-right .6s ease both;
animation-delay: .4s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-in-right {
from { opacity:0; transform: translateX(-8px); }
to { opacity:1; transform: translateX(0); }
}
/* フッターの大きな渦 */
.footer-vortex {
position: absolute;
right: -40px;
bottom: -40px;
width: 220px;
height: 220px;
opacity: .04;
pointer-events: none;
animation: vortex-float 10s ease-in-out infinite;
}
/* セクション内の渦アクセント（右下） */
.section-vortex-accent {
position: absolute;
opacity: .05;
pointer-events: none;
animation: vortex-float 9s ease-in-out infinite reverse;
}
/* ナビブランド */
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vortex-appear 1.0s cubic-bezier(.23,1,.32,1) both;
}
.nav-brand-text {
font-family: 'Cormorant Garamond', serif;
font-size: 19px;
font-weight: 300;
color: rgba(0,0,0,.9);
letter-spacing: 3px;
animation: fade-slide-right .65s ease both;
animation-delay: .35s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-slide-right {
from { opacity:0; transform: translateX(-10px); }
to { opacity:1; transform: translateX(0); }
}
/* スクロール連動回転 */
.nav-brand-vortex.scroll-spin {
transition: transform .1s linear;
}
/* ─── Hero 渦出現アニメ ─── */
.hero-vortex-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-vortex-core {
width: 600px;
height: 600px;
object-fit: contain;
opacity: 0;
transform: scale(0.05) rotate(-540deg);
animation: vortex-expand 2.2s cubic-bezier(.16,1,.3,1) .3s both;
}
.vortex-divider.vd-in {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(230,167,0,.35), transparent);
}
.vortex-divider img {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-slow 14s linear infinite;
opacity: .55;
}
.greeting-photo{position:relative;overflow:hidden;border-radius:2px;}
.greeting-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 20%;}
.company-table{width:100%;border-collapse:collapse;}
.company-table tr{border-bottom:1px solid rgba(0,0,0,.05);}
.company-table th{font-family:var(--disp);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--te2);padding:18px 20px 18px 0;text-align:left;width:140px;vertical-align:top;}
.company-table td{padding:18px 0;font-size:14px;color:var(--gr2);line-height:1.72;}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.mv-card{padding:36px;border-left:3px solid;}
.biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.biz-card{padding:28px;position:relative;overflow:hidden;}
.biz-num{font-family:var(--disp);font-size:64px;font-weight:300;color:rgba(41,37,36,.05);position:absolute;top:8px;right:16px;line-height:1;}
@media(max-width:1024px){.greeting-grid{grid-template-columns:1fr;}.mv-grid{grid-template-columns:1fr;}.biz-grid{grid-template-columns:1fr;}}
/* ══════════════════════════════
ORINOA VORTEX — 全ページ共通
══════════════════════════════ */
/* ナビ ブランドエリア */
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vx-appear 1.1s cubic-bezier(.23,1,.32,1) both;
}
@keyframes vx-appear {
0% { opacity:0; transform:rotate(-270deg) scale(.1); }
65% { opacity:1; transform:rotate(18deg) scale(1.1); }
82% { transform:rotate(-5deg) scale(.97); }
100% { opacity:1; transform:rotate(0deg) scale(1); }
}
.nav-brand-text {
font-family:'Cormorant Garamond',serif;
font-size:19px; font-weight:300;
color:rgba(41,37,36,.9);
letter-spacing:3px;
animation:vx-slide-in .6s ease both;
animation-delay:.38s;
}
@keyframes vx-slide-in {
from { opacity:0; transform:translateX(-8px); }
to { opacity:1; transform:translateX(0); }
}
/* ヒーロー内 inline SVG渦 */
.hero-vortex-inline {
position:absolute;
pointer-events:none;
z-index:1;
opacity:0;
animation:vx-hero-expand 2.4s cubic-bezier(.16,1,.3,1) .4s both;
}
@keyframes vx-hero-expand {
0% { opacity:0; transform:translate(-50%,-50%) scale(.04) rotate(-540deg); }
45% { opacity:.18; transform:translate(-50%,-50%) scale(.7) rotate(-60deg); }
72% { opacity:.11; transform:translate(-50%,-50%) scale(1.04) rotate(10deg); }
87% { opacity:.08; transform:translate(-50%,-50%) scale(.97) rotate(-2deg); }
100% { opacity:.08; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
/* フロートアニメ（expand完了後） */
@keyframes vx-float {
0%,100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
30% { transform:translate(-50%,-50%) scale(1.03) rotate(5deg); }
65% { transform:translate(-50%,-50%) scale(.97) rotate(-4deg); }
}
/* セクション区切り渦 */
.vx-divider {
display:flex;
align-items:center;
gap:18px;
margin:52px 0;
opacity:0;
transform:rotate(-180deg) scale(.5);
transition:opacity .75s ease, transform .85s cubic-bezier(.23,1,.32,1);
}
.vx-divider.vx-in {
opacity:1;
transform:rotate(0deg) scale(1);
}
.vx-divider::before, .vx-divider::after {
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);
}
.vx-divider img {
width:32px; height:32px;
object-fit:contain;
animation:vx-spin 16s linear infinite;
}
@keyframes vx-spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* フッター背景渦 */
.vx-footer-bg {
position:absolute;
bottom:-50px; right:-50px;
width:240px; height:240px;
object-fit:contain;
opacity:.055;
pointer-events:none;
animation:vx-spin 24s linear infinite reverse;
}
/* ページヒーロー右下 渦 */
.vx-page-hero {
position:absolute;
right:28px; bottom:20px;
width:88px; height:88px;
object-fit:contain;
opacity:.15;
pointer-events:none;
animation:vx-spin 18s linear infinite;
}
/* UPSIZE */
/* ═══ 文字サイズ全体アップ ═══ */
body { font-size: 16px; }
.eyebrow { font-size: clamp(11px,1vw,14px) !important; letter-spacing: 5px; }
.h-serif, .head-xl, .head-lg, .head-md, .head-sm { font-family: 'Shippori Mincho', serif; }
/* 見出しを全体的に1.3倍 */
h1 { font-size: clamp(36px,5vw,68px) !important; }
h2 { font-size: clamp(28px,3.8vw,52px) !important; }
h3 { font-size: clamp(22px,2.8vw,38px) !important; }
h4 { font-size: clamp(18px,2.2vw,28px) !important; }
/* 本文を大きく */
p, .body-md, .body-lg, .body-sm, .b, .bs, .bx { font-size: clamp(15px,1.5vw,18px) !important; line-height: 1.96 !important; }
.body-xs, .body-sm { font-size: clamp(14px,1.4vw,17px) !important; }
/* キャプション */
.body-xs, small, .caption { font-size: clamp(13px,1.2vw,15px) !important; }
/* ナビ */
.nav-links a { font-size: clamp(14px,1.3vw,16px) !important; }
/* フッター */
.footer-desc { font-size: clamp(14px,1.3vw,16px) !important; }
.footer-links a { font-size: clamp(14px,1.3vw,16px) !important; }
.fi-v { font-size: clamp(14px,1.3vw,16px) !important; }
/* カード内テキスト */
.feat-title, .feat-t, .tc-org, .team-desc, .tc-desc { font-size: clamp(14px,1.3vw,17px) !important; }
/* ページヒーロー */
.page-hero-title { font-size: clamp(34px,4.5vw,62px) !important; }
.page-hero-sub { font-size: clamp(16px,1.8vw,20px) !important; }
/* ボタン */
.btn { font-size: clamp(15px,1.5vw,18px) !important; padding: 16px 32px !important; }
.btn-sm { font-size: clamp(13px,1.3vw,15px) !important; padding: 11px 22px !important; }
/* table */
.calc-table th, .calc-table td { font-size: clamp(14px,1.3vw,16px) !important; }
/* FAQ */
.faq-q { font-size: clamp(16px,1.6vw,20px) !important; }
.faq-a { font-size: clamp(14px,1.4vw,17px) !important; }
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.vx-divider{display:flex;align-items:center;gap:20px;margin:64px 0;opacity:0;transform:rotate(-180deg) scale(.5);transition:opacity .75s ease,transform .85s cubic-bezier(.23,1,.32,1);}
.vx-divider.vx-in{opacity:1;transform:rotate(0deg) scale(1);}
.vx-divider::before,.vx-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);}
.vx-divider img{width:36px;height:36px;object-fit:contain;animation:vx-spin 16s linear infinite;}
.vx-page-hero{position:absolute;right:36px;bottom:28px;width:100px;height:100px;object-fit:contain;opacity:.15;pointer-events:none;animation:vx-spin 18s linear infinite;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
@keyframes vx-appear{0%{opacity:0;transform:rotate(-270deg) scale(.1);}65%{opacity:1;transform:rotate(18deg) scale(1.1);}82%{transform:rotate(-5deg) scale(.97);}100%{opacity:1;transform:rotate(0deg) scale(1);}}
@keyframes vx-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes vx-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vx-hero-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(-540deg);}45%{opacity:.18;transform:translate(-50%,-50%) scale(.7) rotate(-60deg);}72%{opacity:.11;transform:translate(-50%,-50%) scale(1.04) rotate(10deg);}87%{opacity:.08;transform:translate(-50%,-50%) scale(.97) rotate(-2deg);}100%{opacity:.08;transform:translate(-50%,-50%) scale(1) rotate(0deg);}}
@keyframes vx-float{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}30%{transform:translate(-50%,-50%) scale(1.03) rotate(5deg);}65%{transform:translate(-50%,-50%) scale(.97) rotate(-4deg);}}
/* ===== from app.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;background:#ffffff;color:#1c1917;overflow-x:hidden;line-height:1;}
img{max-width:100%;display:block;}a{text-decoration:none;color:inherit;}
:root{--ink:#1c1917;--ink2:#f4f3f0;--ink3:#e8e6e1;--te:#e6a700;--te2:#b98a06;--te3:#fff6da;--go:#9c7a08;--gl:#f5b301;--re:#6b6560;--or:#cf9200;--wm:#ffffff;--gr:#7c756e;--gr2:#55504b;--serif:'Shippori Mincho',serif;--disp:'Cormorant Garamond',serif;--sans:'Noto Sans JP',sans-serif;--max:1180px;}
.container{max-width:var(--max);margin:0 auto;padding:0 40px;}
.section{padding:96px 0;}.section-sm{padding:64px 0;}
.eyebrow{font-family:var(--disp);font-size:11px;letter-spacing:5px;text-transform:uppercase;display:block;}
.h-serif{font-family:var(--serif);font-weight:700;line-height:1.38;}
.body-lg{font-size:17px;line-height:1.92;}.body-md{font-size:15px;line-height:1.88;}.body-sm{font-size:13px;line-height:1.85;}.body-xs{font-size:12px;line-height:1.75;}
.text-gold{color:var(--gl);}.text-teal{color:var(--te2);}.text-muted{color:var(--gr);}
.mt2{margin-top:16px;}.mt3{margin-top:24px;}.mt4{margin-top:32px;}.mt5{margin-top:48px;}.mt6{margin-top:64px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;font-weight:700;padding:12px 24px;cursor:pointer;transition:all .22s;letter-spacing:.04em;}
.btn-primary{background:var(--te);color:#1c1917;border:2px solid var(--te);}
.btn-primary:hover{background:var(--te2);border-color:var(--te2);transform:translateY(-2px);}
.btn-outline{background:transparent;color:#1c1917;border:1.5px solid rgba(0,0,0,.3);}
.btn-outline:hover{border-color:var(--gl);color:var(--gl);transform:translateY(-2px);}
.btn-gold{background:var(--go);color:#1c1917;border:2px solid var(--go);}.btn-gold:hover{background:var(--gl);border-color:var(--gl);transform:translateY(-2px);}
.btn-sm{padding:9px 18px;font-size:12px;}
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;padding:0 40px;transition:background .35s,backdrop-filter .35s;}
#nav.scrolled{background:rgba(0,0,0,.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06);}
.nav-logo img{height:30px;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto;}
.nav-links a{font-size:13px;font-weight:500;color:rgba(41,37,36,.62);letter-spacing:.04em;transition:color .2s;padding:4px 0;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gl);transform:scaleX(0);transition:transform .2s;}
.nav-links a:hover,.nav-links a.active{color:#1c1917;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{margin-left:12px;}
.page-hero{position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;padding-top:64px;}
.page-hero-bg{position:absolute;inset:0;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.02);}
.page-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.88) 100%);}
.page-hero-inner{position:relative;z-index:1;padding:0 40px 56px;max-width:var(--max);margin:0 auto;width:100%;}
footer{background:#f4f3f0;padding:80px 0 28px;border-top:1px solid rgba(0,0,0,.04);}
.footer-grid{display:grid;grid-template-columns:240px 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-logo img{height:24px;margin-bottom:20px;}
.footer-desc{font-size:12px;color:var(--gr);line-height:1.82;}
.footer-col-title{font-family:var(--disp);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--go);margin-bottom:20px;display:block;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-links a{font-size:13px;color:var(--gr);transition:color .2s;}.footer-links a:hover{color:var(--gl);}
.footer-info{display:flex;flex-direction:column;gap:7px;}
.fi-row{display:flex;gap:8px;}
.fi-l{font-family:var(--disp);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--te2);width:48px;flex-shrink:0;padding-top:2px;}
.fi-v{font-size:12px;color:var(--gr2);line-height:1.55;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(0,0,0,.04);font-size:11px;color:var(--gr);}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
.rule-gold{height:1px;background:linear-gradient(90deg,var(--go),transparent);margin:24px 0;}
.rule-teal{height:1px;background:linear-gradient(90deg,var(--te),transparent);margin:24px 0;}
.card{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.25);}
.card-w{background:#fff;border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card-w:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.1);}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,167,0,.12);border:1px solid rgba(230,167,0,.28);color:var(--gl);font-size:11px;font-weight:500;padding:4px 10px;border-radius:2px;}
.bar-chart{display:flex;flex-direction:column;gap:14px;}
.bar-row{display:grid;grid-template-columns:130px 1fr 44px;gap:12px;align-items:center;}
.bar-label{font-size:12px;color:var(--gr2);text-align:right;font-weight:500;}
.bar-track{height:18px;background:rgba(0,0,0,.06);border-radius:2px;overflow:hidden;}
.bar-fill{height:100%;border-radius:2px;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;transition:width 1.1s cubic-bezier(.25,.46,.45,.94);}
.bar-fill span{font-size:10px;color:#1c1917;font-weight:700;}
.bar-val{font-size:13px;font-weight:700;}
.michelin-axes{display:flex;flex-direction:column;gap:14px;}
.axis-row{display:flex;align-items:center;gap:14px;}
.axis-label{font-size:13px;font-weight:500;width:160px;flex-shrink:0;}
.axis-bar{flex:1;height:8px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden;}
.axis-fill{height:100%;background:linear-gradient(to right,var(--te),var(--te2));border-radius:4px;transition:width 1.1s ease;}
.axis-val{font-size:12px;font-weight:700;color:var(--te2);width:28px;flex-shrink:0;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}#nav{padding:0 20px;}.container{padding:0 20px;}}
@media(max-width:768px){.nav-links{display:none;}.footer-grid{grid-template-columns:1fr;}}
/* 渦巻きコンテナ */
.orinoa-vortex {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orinoa-vortex img {
animation: vortex-spin-in 1.2s cubic-bezier(.23,1,.32,1) both;
}
.vortex-reveal.in {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* セクション区切りの渦アクセント */
.vortex-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(26,102,64,.4), transparent);
}
.vortex-divider img {
width: 28px;
height: 28px;
object-fit: contain;
animation: vortex-slow-spin 12s linear infinite;
opacity: .6;
}
@keyframes vortex-slow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ナビロゴエリア */
.nav-brand-vortex {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-in 1s cubic-bezier(.23,1,.32,1) both;
animation-delay: .1s;
opacity: 0;
animation-fill-mode: both;
}
.nav-brand-logo {
height: 24px;
animation: fade-in-right .6s ease both;
animation-delay: .4s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-in-right {
from { opacity:0; transform: translateX(-8px); }
to { opacity:1; transform: translateX(0); }
}
/* フッターの大きな渦 */
.footer-vortex {
position: absolute;
right: -40px;
bottom: -40px;
width: 220px;
height: 220px;
opacity: .04;
pointer-events: none;
animation: vortex-float 10s ease-in-out infinite;
}
/* セクション内の渦アクセント（右下） */
.section-vortex-accent {
position: absolute;
opacity: .05;
pointer-events: none;
animation: vortex-float 9s ease-in-out infinite reverse;
}
/* ナビブランド */
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vortex-appear 1.0s cubic-bezier(.23,1,.32,1) both;
}
.nav-brand-text {
font-family: 'Cormorant Garamond', serif;
font-size: 19px;
font-weight: 300;
color: rgba(0,0,0,.9);
letter-spacing: 3px;
animation: fade-slide-right .65s ease both;
animation-delay: .35s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-slide-right {
from { opacity:0; transform: translateX(-10px); }
to { opacity:1; transform: translateX(0); }
}
/* スクロール連動回転 */
.nav-brand-vortex.scroll-spin {
transition: transform .1s linear;
}
/* ─── Hero 渦出現アニメ ─── */
.hero-vortex-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-vortex-core {
width: 600px;
height: 600px;
object-fit: contain;
opacity: 0;
transform: scale(0.05) rotate(-540deg);
animation: vortex-expand 2.2s cubic-bezier(.16,1,.3,1) .3s both;
}
.vortex-divider.vd-in {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(230,167,0,.35), transparent);
}
.vortex-divider img {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-slow 14s linear infinite;
opacity: .55;
}
.feat-section:last-child{margin-bottom:0;}
.feat-section.rev{direction:rtl;}
.feat-section.rev>*{direction:ltr;}
.phone-wrap{position:relative;display:flex;justify-content:center;}
.phone-bg{position:absolute;width:280px;height:280px;border-radius:50%;opacity:.08;filter:blur(40px);top:50%;left:50%;transform:translate(-50%,-50%);}
.phone-img{width:240px;position:relative;z-index:1;}
.phone-img img{width:100%;border-radius:24px;box-shadow:0 32px 80px rgba(0,0,0,.3);}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:28px;}
.feat-item{display:flex;gap:16px;align-items:flex-start;padding:18px;border-left:3px solid;transition:transform .2s;}
.feat-item:hover{transform:translateX(5px);}
.feat-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;border-radius:2px;}
.feat-title{font-family:var(--serif);font-size:14px;font-weight:700;margin-bottom:4px;}
.feat-desc{font-size:12.5px;color:var(--gr);line-height:1.78;}
/* carestar section */
.cs-section{background:var(--wm);color:var(--ink);}
.cs-axes{display:flex;flex-direction:column;gap:16px;}
.cs-row{display:flex;align-items:center;gap:16px;}
.cs-label{font-size:13px;font-weight:500;color:var(--ink);width:165px;flex-shrink:0;}
.cs-bar{flex:1;height:10px;background:rgba(230,167,0,.12);border-radius:5px;overflow:hidden;}
.cs-fill{height:100%;background:linear-gradient(to right,var(--te),var(--te2));border-radius:5px;transition:width 1.1s ease;}
.cs-val{font-size:12px;font-weight:700;color:var(--te2);width:30px;flex-shrink:0;}
.cs-card{background:#fff;border:1px solid rgba(0,0,0,.07);padding:28px;border-top:3px solid var(--te);}
/* compare table */
.cmp-table{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.cmp-col{}
.cmp-head{padding:18px 24px;text-align:center;font-family:var(--serif);font-size:15px;font-weight:700;}
.cmp-row{padding:14px 24px;display:flex;align-items:center;gap:12px;border-top:1px solid rgba(0,0,0,.04);font-size:13px;font-weight:500;}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;}
.flow-step{padding:24px 16px;text-align:center;position:relative;}
.flow-step::after{content:'→';position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--te2);z-index:1;}
.flow-step:last-child::after{display:none;}
.flow-num{font-family:var(--disp);font-size:28px;font-weight:300;line-height:1;margin-bottom:8px;}
.flow-title{font-family:var(--serif);font-size:13px;font-weight:700;margin-bottom:4px;}
.flow-desc{font-size:11px;color:var(--gr);line-height:1.65;}
@media(max-width:1024px){.feat-section{grid-template-columns:1fr;}.feat-section.rev{direction:ltr;}.flow-steps{grid-template-columns:1fr;}}
/* ══════════════════════════════
ORINOA VORTEX — 全ページ共通
══════════════════════════════ */
/* ナビ ブランドエリア */
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vx-appear 1.1s cubic-bezier(.23,1,.32,1) both;
}
@keyframes vx-appear {
0% { opacity:0; transform:rotate(-270deg) scale(.1); }
65% { opacity:1; transform:rotate(18deg) scale(1.1); }
82% { transform:rotate(-5deg) scale(.97); }
100% { opacity:1; transform:rotate(0deg) scale(1); }
}
.nav-brand-text {
font-family:'Cormorant Garamond',serif;
font-size:19px; font-weight:300;
color:rgba(41,37,36,.9);
letter-spacing:3px;
animation:vx-slide-in .6s ease both;
animation-delay:.38s;
}
@keyframes vx-slide-in {
from { opacity:0; transform:translateX(-8px); }
to { opacity:1; transform:translateX(0); }
}
/* ヒーロー内 inline SVG渦 */
.hero-vortex-inline {
position:absolute;
pointer-events:none;
z-index:1;
opacity:0;
animation:vx-hero-expand 2.4s cubic-bezier(.16,1,.3,1) .4s both;
}
@keyframes vx-hero-expand {
0% { opacity:0; transform:translate(-50%,-50%) scale(.04) rotate(-540deg); }
45% { opacity:.18; transform:translate(-50%,-50%) scale(.7) rotate(-60deg); }
72% { opacity:.11; transform:translate(-50%,-50%) scale(1.04) rotate(10deg); }
87% { opacity:.08; transform:translate(-50%,-50%) scale(.97) rotate(-2deg); }
100% { opacity:.08; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
/* フロートアニメ（expand完了後） */
@keyframes vx-float {
0%,100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
30% { transform:translate(-50%,-50%) scale(1.03) rotate(5deg); }
65% { transform:translate(-50%,-50%) scale(.97) rotate(-4deg); }
}
/* セクション区切り渦 */
.vx-divider {
display:flex;
align-items:center;
gap:18px;
margin:52px 0;
opacity:0;
transform:rotate(-180deg) scale(.5);
transition:opacity .75s ease, transform .85s cubic-bezier(.23,1,.32,1);
}
.vx-divider.vx-in {
opacity:1;
transform:rotate(0deg) scale(1);
}
.vx-divider::before, .vx-divider::after {
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);
}
.vx-divider img {
width:32px; height:32px;
object-fit:contain;
animation:vx-spin 16s linear infinite;
}
@keyframes vx-spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* フッター背景渦 */
.vx-footer-bg {
position:absolute;
bottom:-50px; right:-50px;
width:240px; height:240px;
object-fit:contain;
opacity:.055;
pointer-events:none;
animation:vx-spin 24s linear infinite reverse;
}
/* ページヒーロー右下 渦 */
.vx-page-hero {
position:absolute;
right:28px; bottom:20px;
width:88px; height:88px;
object-fit:contain;
opacity:.15;
pointer-events:none;
animation:vx-spin 18s linear infinite;
}
/* UPSIZE */
/* ═══ 文字サイズ全体アップ ═══ */
body { font-size: 16px; }
.eyebrow { font-size: clamp(11px,1vw,14px) !important; letter-spacing: 5px; }
.h-serif, .head-xl, .head-lg, .head-md, .head-sm { font-family: 'Shippori Mincho', serif; }
/* 見出しを全体的に1.3倍 */
h1 { font-size: clamp(36px,5vw,68px) !important; }
h2 { font-size: clamp(28px,3.8vw,52px) !important; }
h3 { font-size: clamp(22px,2.8vw,38px) !important; }
h4 { font-size: clamp(18px,2.2vw,28px) !important; }
/* 本文を大きく */
p, .body-md, .body-lg, .body-sm, .b, .bs, .bx { font-size: clamp(15px,1.5vw,18px) !important; line-height: 1.96 !important; }
.body-xs, .body-sm { font-size: clamp(14px,1.4vw,17px) !important; }
/* キャプション */
.body-xs, small, .caption { font-size: clamp(13px,1.2vw,15px) !important; }
/* ナビ */
.nav-links a { font-size: clamp(14px,1.3vw,16px) !important; }
/* フッター */
.footer-desc { font-size: clamp(14px,1.3vw,16px) !important; }
.footer-links a { font-size: clamp(14px,1.3vw,16px) !important; }
.fi-v { font-size: clamp(14px,1.3vw,16px) !important; }
/* カード内テキスト */
.feat-title, .feat-t, .tc-org, .team-desc, .tc-desc { font-size: clamp(14px,1.3vw,17px) !important; }
/* ページヒーロー */
.page-hero-title { font-size: clamp(34px,4.5vw,62px) !important; }
.page-hero-sub { font-size: clamp(16px,1.8vw,20px) !important; }
/* ボタン */
.btn { font-size: clamp(15px,1.5vw,18px) !important; padding: 16px 32px !important; }
.btn-sm { font-size: clamp(13px,1.3vw,15px) !important; padding: 11px 22px !important; }
/* table */
.calc-table th, .calc-table td { font-size: clamp(14px,1.3vw,16px) !important; }
/* FAQ */
.faq-q { font-size: clamp(16px,1.6vw,20px) !important; }
.faq-a { font-size: clamp(14px,1.4vw,17px) !important; }
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.vx-divider{display:flex;align-items:center;gap:20px;margin:64px 0;opacity:0;transform:rotate(-180deg) scale(.5);transition:opacity .75s ease,transform .85s cubic-bezier(.23,1,.32,1);}
.vx-divider.vx-in{opacity:1;transform:rotate(0deg) scale(1);}
.vx-divider::before,.vx-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);}
.vx-divider img{width:36px;height:36px;object-fit:contain;animation:vx-spin 16s linear infinite;}
.vx-page-hero{position:absolute;right:36px;bottom:28px;width:100px;height:100px;object-fit:contain;opacity:.15;pointer-events:none;animation:vx-spin 18s linear infinite;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
@keyframes vx-appear{0%{opacity:0;transform:rotate(-270deg) scale(.1);}65%{opacity:1;transform:rotate(18deg) scale(1.1);}82%{transform:rotate(-5deg) scale(.97);}100%{opacity:1;transform:rotate(0deg) scale(1);}}
@keyframes vx-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes vx-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vx-hero-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(-540deg);}45%{opacity:.18;transform:translate(-50%,-50%) scale(.7) rotate(-60deg);}72%{opacity:.11;transform:translate(-50%,-50%) scale(1.04) rotate(10deg);}87%{opacity:.08;transform:translate(-50%,-50%) scale(.97) rotate(-2deg);}100%{opacity:.08;transform:translate(-50%,-50%) scale(1) rotate(0deg);}}
@keyframes vx-float{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}30%{transform:translate(-50%,-50%) scale(1.03) rotate(5deg);}65%{transform:translate(-50%,-50%) scale(.97) rotate(-4deg);}}
/* ===== from development.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;background:#ffffff;color:#1c1917;overflow-x:hidden;line-height:1;}
img{max-width:100%;display:block;}a{text-decoration:none;color:inherit;}
:root{--ink:#1c1917;--ink2:#f4f3f0;--te:#e6a700;--te2:#b98a06;--te3:#fff6da;--go:#9c7a08;--gl:#f5b301;--re:#6b6560;--or:#cf9200;--wm:#ffffff;--gr:#7c756e;--gr2:#55504b;--serif:'Shippori Mincho',serif;--disp:'Cormorant Garamond',serif;--max:1180px;}
.container{max-width:var(--max);margin:0 auto;padding:0 40px;}
.section{padding:96px 0;}.section-sm{padding:64px 0;}
.eyebrow{font-family:var(--disp);font-size:11px;letter-spacing:5px;text-transform:uppercase;display:block;}
.h-serif{font-family:var(--serif);font-weight:700;line-height:1.38;}
.body-md{font-size:15px;line-height:1.88;}.body-sm{font-size:13px;line-height:1.85;}.body-xs{font-size:12px;line-height:1.75;}
.text-gold{color:var(--gl);}.text-teal{color:var(--te2);}.text-muted{color:var(--gr);}
.mt2{margin-top:16px;}.mt3{margin-top:24px;}.mt4{margin-top:32px;}.mt5{margin-top:48px;}.mt6{margin-top:64px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;font-weight:700;padding:12px 24px;cursor:pointer;transition:all .22s;letter-spacing:.04em;}
.btn-primary{background:var(--te);color:#1c1917;border:2px solid var(--te);}
.btn-primary:hover{background:var(--te2);border-color:var(--te2);transform:translateY(-2px);}
.btn-outline{background:transparent;color:#1c1917;border:1.5px solid rgba(0,0,0,.3);}
.btn-outline:hover{border-color:var(--gl);color:var(--gl);transform:translateY(-2px);}
.btn-gold{background:var(--go);color:#1c1917;border:2px solid var(--go);}.btn-gold:hover{background:var(--gl);transform:translateY(-2px);}
.btn-sm{padding:9px 18px;font-size:12px;}
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;padding:0 40px;transition:background .35s,backdrop-filter .35s;}
#nav.scrolled{background:rgba(0,0,0,.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06);}
.nav-logo img{height:30px;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto;}
.nav-links a{font-size:13px;font-weight:500;color:rgba(41,37,36,.62);letter-spacing:.04em;transition:color .2s;padding:4px 0;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gl);transform:scaleX(0);transition:transform .2s;}
.nav-links a:hover,.nav-links a.active{color:#1c1917;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{margin-left:12px;}
.page-hero{position:relative;min-height:400px;display:flex;align-items:flex-end;overflow:hidden;padding-top:64px;}
.page-hero-bg{position:absolute;inset:0;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.3);}
.page-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.9) 100%);}
.page-hero-inner{position:relative;z-index:1;padding:0 40px 56px;max-width:var(--max);margin:0 auto;width:100%;}
footer{background:#f4f3f0;padding:80px 0 28px;border-top:1px solid rgba(0,0,0,.04);}
.footer-grid{display:grid;grid-template-columns:240px 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-logo img{height:24px;margin-bottom:20px;}
.footer-desc{font-size:12px;color:var(--gr);line-height:1.82;}
.footer-col-title{font-family:var(--disp);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--go);margin-bottom:20px;display:block;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-links a{font-size:13px;color:var(--gr);transition:color .2s;}.footer-links a:hover{color:var(--gl);}
.footer-info{display:flex;flex-direction:column;gap:7px;}
.fi-row{display:flex;gap:8px;}
.fi-l{font-family:var(--disp);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--te2);width:48px;flex-shrink:0;padding-top:2px;}
.fi-v{font-size:12px;color:var(--gr2);line-height:1.55;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(0,0,0,.04);font-size:11px;color:var(--gr);}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
.rule-gold{height:1px;background:linear-gradient(90deg,var(--go),transparent);margin:24px 0;}
.rule-teal{height:1px;background:linear-gradient(90deg,var(--te),transparent);margin:24px 0;}
.card{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.25);}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,167,0,.12);border:1px solid rgba(230,167,0,.28);color:var(--gl);font-size:11px;font-weight:500;padding:4px 10px;border-radius:2px;}
.axis-fill{height:100%;background:linear-gradient(to right,var(--te),var(--te2));border-radius:4px;transition:width 1.1s ease;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}#nav{padding:0 20px;}.container{padding:0 20px;}}
@media(max-width:768px){.nav-links{display:none;}.footer-grid{grid-template-columns:1fr;}}
/* 渦巻きコンテナ */
.orinoa-vortex {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orinoa-vortex img {
animation: vortex-spin-in 1.2s cubic-bezier(.23,1,.32,1) both;
}
.vortex-reveal.in {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* セクション区切りの渦アクセント */
.vortex-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(26,102,64,.4), transparent);
}
.vortex-divider img {
width: 28px;
height: 28px;
object-fit: contain;
animation: vortex-slow-spin 12s linear infinite;
opacity: .6;
}
@keyframes vortex-slow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ナビロゴエリア */
.nav-brand-vortex {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-in 1s cubic-bezier(.23,1,.32,1) both;
animation-delay: .1s;
opacity: 0;
animation-fill-mode: both;
}
.nav-brand-logo {
height: 24px;
animation: fade-in-right .6s ease both;
animation-delay: .4s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-in-right {
from { opacity:0; transform: translateX(-8px); }
to { opacity:1; transform: translateX(0); }
}
/* フッターの大きな渦 */
.footer-vortex {
position: absolute;
right: -40px;
bottom: -40px;
width: 220px;
height: 220px;
opacity: .04;
pointer-events: none;
animation: vortex-float 10s ease-in-out infinite;
}
/* セクション内の渦アクセント（右下） */
.section-vortex-accent {
position: absolute;
opacity: .05;
pointer-events: none;
animation: vortex-float 9s ease-in-out infinite reverse;
}
/* ナビブランド */
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vortex-appear 1.0s cubic-bezier(.23,1,.32,1) both;
}
.nav-brand-text {
font-family: 'Cormorant Garamond', serif;
font-size: 19px;
font-weight: 300;
color: rgba(0,0,0,.9);
letter-spacing: 3px;
animation: fade-slide-right .65s ease both;
animation-delay: .35s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-slide-right {
from { opacity:0; transform: translateX(-10px); }
to { opacity:1; transform: translateX(0); }
}
/* スクロール連動回転 */
.nav-brand-vortex.scroll-spin {
transition: transform .1s linear;
}
/* ─── Hero 渦出現アニメ ─── */
.hero-vortex-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-vortex-core {
width: 600px;
height: 600px;
object-fit: contain;
opacity: 0;
transform: scale(0.05) rotate(-540deg);
animation: vortex-expand 2.2s cubic-bezier(.16,1,.3,1) .3s both;
}
.vortex-divider.vd-in {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(230,167,0,.35), transparent);
}
.vortex-divider img {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-slow 14s linear infinite;
opacity: .55;
}
.kobori-photo{position:relative;overflow:hidden;}
.kobori-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .5s;}
.kobori-wrap:hover .kobori-photo img{transform:scale(1.04);}
.kobori-photo-ov{position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(17,28,40,.98) 100%);}
.kobori-info{background:var(--ink2);padding:48px 48px;display:flex;flex-direction:column;justify-content:center;}
.kobori-quote{font-family:var(--disp);font-size:18px;font-style:italic;font-weight:300;line-height:1.72;color:rgba(41,37,36,.88);margin:20px 0;border-left:2px solid var(--go);padding-left:24px;position:relative;}
.kobori-quote::before{content:'"';position:absolute;left:-4px;top:-14px;font-size:52px;color:rgba(230,167,0,.16);font-family:var(--disp);line-height:1;}
.kobori-quote em{font-style:normal;color:var(--gl);}
/* team grid */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.team-card{overflow:hidden;}
.tc-photo{aspect-ratio:3/4;overflow:hidden;position:relative;}
.tc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .5s;filter:grayscale(15%);}
.team-card:hover .tc-photo img{transform:scale(1.04);filter:grayscale(0%);}
.tc-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,transparent 60%);padding:16px;}
.tc-role{font-family:var(--disp);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gl);display:block;margin-bottom:4px;}
.tc-name{font-family:var(--serif);font-size:16px;font-weight:700;color:#1c1917;line-height:1.3;}
.tc-body{padding:16px 18px 20px;}
.tc-org{font-size:11px;color:var(--go);font-weight:500;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.tc-org::before{content:'';width:12px;height:1px;background:var(--go);}
.tc-desc{font-size:12px;color:var(--gr);line-height:1.8;}
.tc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.tc-tag{font-size:10px;color:var(--te2);background:rgba(230,167,0,.1);border:1px solid rgba(230,167,0,.2);padding:2px 7px;border-radius:2px;font-weight:500;}
/* philosophy */
.phil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.phil-card{padding:32px;border-top:3px solid;}
.phil-num{font-family:var(--disp);font-size:52px;font-weight:300;color:rgba(41,37,36,.07);line-height:1;margin-bottom:12px;}
@media(max-width:1024px){.kobori-wrap{grid-template-columns:1fr;}.kobori-photo{height:320px;}.team-grid{grid-template-columns:repeat(2,1fr);}.phil-grid{grid-template-columns:1fr;}}
/* ══════════════════════════════
ORINOA VORTEX — 全ページ共通
══════════════════════════════ */
/* ナビ ブランドエリア */
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vx-appear 1.1s cubic-bezier(.23,1,.32,1) both;
}
@keyframes vx-appear {
0% { opacity:0; transform:rotate(-270deg) scale(.1); }
65% { opacity:1; transform:rotate(18deg) scale(1.1); }
82% { transform:rotate(-5deg) scale(.97); }
100% { opacity:1; transform:rotate(0deg) scale(1); }
}
.nav-brand-text {
font-family:'Cormorant Garamond',serif;
font-size:19px; font-weight:300;
color:rgba(41,37,36,.9);
letter-spacing:3px;
animation:vx-slide-in .6s ease both;
animation-delay:.38s;
}
@keyframes vx-slide-in {
from { opacity:0; transform:translateX(-8px); }
to { opacity:1; transform:translateX(0); }
}
/* ヒーロー内 inline SVG渦 */
.hero-vortex-inline {
position:absolute;
pointer-events:none;
z-index:1;
opacity:0;
animation:vx-hero-expand 2.4s cubic-bezier(.16,1,.3,1) .4s both;
}
@keyframes vx-hero-expand {
0% { opacity:0; transform:translate(-50%,-50%) scale(.04) rotate(-540deg); }
45% { opacity:.18; transform:translate(-50%,-50%) scale(.7) rotate(-60deg); }
72% { opacity:.11; transform:translate(-50%,-50%) scale(1.04) rotate(10deg); }
87% { opacity:.08; transform:translate(-50%,-50%) scale(.97) rotate(-2deg); }
100% { opacity:.08; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
/* フロートアニメ（expand完了後） */
@keyframes vx-float {
0%,100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
30% { transform:translate(-50%,-50%) scale(1.03) rotate(5deg); }
65% { transform:translate(-50%,-50%) scale(.97) rotate(-4deg); }
}
/* セクション区切り渦 */
.vx-divider {
display:flex;
align-items:center;
gap:18px;
margin:52px 0;
opacity:0;
transform:rotate(-180deg) scale(.5);
transition:opacity .75s ease, transform .85s cubic-bezier(.23,1,.32,1);
}
.vx-divider.vx-in {
opacity:1;
transform:rotate(0deg) scale(1);
}
.vx-divider::before, .vx-divider::after {
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);
}
.vx-divider img {
width:32px; height:32px;
object-fit:contain;
animation:vx-spin 16s linear infinite;
}
@keyframes vx-spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* フッター背景渦 */
.vx-footer-bg {
position:absolute;
bottom:-50px; right:-50px;
width:240px; height:240px;
object-fit:contain;
opacity:.055;
pointer-events:none;
animation:vx-spin 24s linear infinite reverse;
}
/* ページヒーロー右下 渦 */
.vx-page-hero {
position:absolute;
right:28px; bottom:20px;
width:88px; height:88px;
object-fit:contain;
opacity:.15;
pointer-events:none;
animation:vx-spin 18s linear infinite;
}
/* UPSIZE */
/* ═══ 文字サイズ全体アップ ═══ */
body { font-size: 16px; }
.eyebrow { font-size: clamp(11px,1vw,14px) !important; letter-spacing: 5px; }
.h-serif, .head-xl, .head-lg, .head-md, .head-sm { font-family: 'Shippori Mincho', serif; }
/* 見出しを全体的に1.3倍 */
h1 { font-size: clamp(36px,5vw,68px) !important; }
h2 { font-size: clamp(28px,3.8vw,52px) !important; }
h3 { font-size: clamp(22px,2.8vw,38px) !important; }
h4 { font-size: clamp(18px,2.2vw,28px) !important; }
/* 本文を大きく */
p, .body-md, .body-lg, .body-sm, .b, .bs, .bx { font-size: clamp(15px,1.5vw,18px) !important; line-height: 1.96 !important; }
.body-xs, .body-sm { font-size: clamp(14px,1.4vw,17px) !important; }
/* キャプション */
.body-xs, small, .caption { font-size: clamp(13px,1.2vw,15px) !important; }
/* ナビ */
.nav-links a { font-size: clamp(14px,1.3vw,16px) !important; }
/* フッター */
.footer-desc { font-size: clamp(14px,1.3vw,16px) !important; }
.footer-links a { font-size: clamp(14px,1.3vw,16px) !important; }
.fi-v { font-size: clamp(14px,1.3vw,16px) !important; }
/* カード内テキスト */
.feat-title, .feat-t, .tc-org, .team-desc, .tc-desc { font-size: clamp(14px,1.3vw,17px) !important; }
/* ページヒーロー */
.page-hero-title { font-size: clamp(34px,4.5vw,62px) !important; }
.page-hero-sub { font-size: clamp(16px,1.8vw,20px) !important; }
/* ボタン */
.btn { font-size: clamp(15px,1.5vw,18px) !important; padding: 16px 32px !important; }
.btn-sm { font-size: clamp(13px,1.3vw,15px) !important; padding: 11px 22px !important; }
/* table */
.calc-table th, .calc-table td { font-size: clamp(14px,1.3vw,16px) !important; }
/* FAQ */
.faq-q { font-size: clamp(16px,1.6vw,20px) !important; }
.faq-a { font-size: clamp(14px,1.4vw,17px) !important; }
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.vx-divider{display:flex;align-items:center;gap:20px;margin:64px 0;opacity:0;transform:rotate(-180deg) scale(.5);transition:opacity .75s ease,transform .85s cubic-bezier(.23,1,.32,1);}
.vx-divider.vx-in{opacity:1;transform:rotate(0deg) scale(1);}
.vx-divider::before,.vx-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);}
.vx-divider img{width:36px;height:36px;object-fit:contain;animation:vx-spin 16s linear infinite;}
.vx-page-hero{position:absolute;right:36px;bottom:28px;width:100px;height:100px;object-fit:contain;opacity:.15;pointer-events:none;animation:vx-spin 18s linear infinite;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
@keyframes vx-appear{0%{opacity:0;transform:rotate(-270deg) scale(.1);}65%{opacity:1;transform:rotate(18deg) scale(1.1);}82%{transform:rotate(-5deg) scale(.97);}100%{opacity:1;transform:rotate(0deg) scale(1);}}
@keyframes vx-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes vx-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vx-hero-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(-540deg);}45%{opacity:.18;transform:translate(-50%,-50%) scale(.7) rotate(-60deg);}72%{opacity:.11;transform:translate(-50%,-50%) scale(1.04) rotate(10deg);}87%{opacity:.08;transform:translate(-50%,-50%) scale(.97) rotate(-2deg);}100%{opacity:.08;transform:translate(-50%,-50%) scale(1) rotate(0deg);}}
@keyframes vx-float{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}30%{transform:translate(-50%,-50%) scale(1.03) rotate(5deg);}65%{transform:translate(-50%,-50%) scale(.97) rotate(-4deg);}}
/* ===== from pricing.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;background:#ffffff;color:#1c1917;overflow-x:hidden;line-height:1;}
img{max-width:100%;display:block;}a{text-decoration:none;color:inherit;}
:root{--ink:#1c1917;--ink2:#f4f3f0;--te:#e6a700;--te2:#b98a06;--te3:#fff6da;--go:#9c7a08;--gl:#f5b301;--re:#6b6560;--or:#cf9200;--wm:#ffffff;--gr:#7c756e;--gr2:#55504b;--serif:'Shippori Mincho',serif;--disp:'Cormorant Garamond',serif;--max:1180px;}
.container{max-width:var(--max);margin:0 auto;padding:0 40px;}
.section{padding:96px 0;}.section-sm{padding:64px 0;}
.eyebrow{font-family:var(--disp);font-size:11px;letter-spacing:5px;text-transform:uppercase;display:block;}
.h-serif{font-family:var(--serif);font-weight:700;line-height:1.38;}
.body-md{font-size:15px;line-height:1.88;}.body-sm{font-size:13px;line-height:1.85;}.body-xs{font-size:12px;line-height:1.75;}
.text-gold{color:var(--gl);}.text-teal{color:var(--te2);}.text-muted{color:var(--gr);}
.mt2{margin-top:16px;}.mt3{margin-top:24px;}.mt4{margin-top:32px;}.mt5{margin-top:48px;}.mt6{margin-top:64px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;font-weight:700;padding:12px 24px;cursor:pointer;transition:all .22s;letter-spacing:.04em;}
.btn-primary{background:var(--te);color:#1c1917;border:2px solid var(--te);}
.btn-primary:hover{background:var(--te2);border-color:var(--te2);transform:translateY(-2px);}
.btn-outline{background:transparent;color:#1c1917;border:1.5px solid rgba(0,0,0,.3);}
.btn-outline:hover{border-color:var(--gl);color:var(--gl);transform:translateY(-2px);}
.btn-gold{background:var(--go);color:#1c1917;border:2px solid var(--go);}.btn-gold:hover{background:var(--gl);transform:translateY(-2px);}
.btn-sm{padding:9px 18px;font-size:12px;}
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;padding:0 40px;transition:background .35s,backdrop-filter .35s;}
#nav.scrolled{background:rgba(0,0,0,.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06);}
.nav-logo img{height:30px;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto;}
.nav-links a{font-size:13px;font-weight:500;color:rgba(41,37,36,.62);letter-spacing:.04em;transition:color .2s;padding:4px 0;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gl);transform:scaleX(0);transition:transform .2s;}
.nav-links a:hover,.nav-links a.active{color:#1c1917;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{margin-left:12px;}
.page-hero{position:relative;min-height:400px;display:flex;align-items:flex-end;overflow:hidden;padding-top:64px;}
.page-hero-bg{position:absolute;inset:0;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.3);}
.page-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.9) 100%);}
.page-hero-inner{position:relative;z-index:1;padding:0 40px 56px;max-width:var(--max);margin:0 auto;width:100%;}
footer{background:#f4f3f0;padding:80px 0 28px;border-top:1px solid rgba(0,0,0,.04);}
.footer-grid{display:grid;grid-template-columns:240px 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-logo img{height:24px;margin-bottom:20px;}
.footer-desc{font-size:12px;color:var(--gr);line-height:1.82;}
.footer-col-title{font-family:var(--disp);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--go);margin-bottom:20px;display:block;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-links a{font-size:13px;color:var(--gr);transition:color .2s;}.footer-links a:hover{color:var(--gl);}
.footer-info{display:flex;flex-direction:column;gap:7px;}
.fi-row{display:flex;gap:8px;}
.fi-l{font-family:var(--disp);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--te2);width:48px;flex-shrink:0;padding-top:2px;}
.fi-v{font-size:12px;color:var(--gr2);line-height:1.55;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(0,0,0,.04);font-size:11px;color:var(--gr);}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
.rule-gold{height:1px;background:linear-gradient(90deg,var(--go),transparent);margin:24px 0;}
.rule-teal{height:1px;background:linear-gradient(90deg,var(--te),transparent);margin:24px 0;}
.card{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.25);}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,167,0,.12);border:1px solid rgba(230,167,0,.28);color:var(--gl);font-size:11px;font-weight:500;padding:4px 10px;border-radius:2px;}
.axis-fill{height:100%;background:linear-gradient(to right,var(--te),var(--te2));border-radius:4px;transition:width 1.1s ease;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}#nav{padding:0 20px;}.container{padding:0 20px;}}
@media(max-width:768px){.nav-links{display:none;}.footer-grid{grid-template-columns:1fr;}}
/* 渦巻きコンテナ */
.orinoa-vortex {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orinoa-vortex img {
animation: vortex-spin-in 1.2s cubic-bezier(.23,1,.32,1) both;
}
.vortex-reveal.in {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* セクション区切りの渦アクセント */
.vortex-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(26,102,64,.4), transparent);
}
.vortex-divider img {
width: 28px;
height: 28px;
object-fit: contain;
animation: vortex-slow-spin 12s linear infinite;
opacity: .6;
}
@keyframes vortex-slow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ナビロゴエリア */
.nav-brand-vortex {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-in 1s cubic-bezier(.23,1,.32,1) both;
animation-delay: .1s;
opacity: 0;
animation-fill-mode: both;
}
.nav-brand-logo {
height: 24px;
animation: fade-in-right .6s ease both;
animation-delay: .4s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-in-right {
from { opacity:0; transform: translateX(-8px); }
to { opacity:1; transform: translateX(0); }
}
/* フッターの大きな渦 */
.footer-vortex {
position: absolute;
right: -40px;
bottom: -40px;
width: 220px;
height: 220px;
opacity: .04;
pointer-events: none;
animation: vortex-float 10s ease-in-out infinite;
}
/* セクション内の渦アクセント（右下） */
.section-vortex-accent {
position: absolute;
opacity: .05;
pointer-events: none;
animation: vortex-float 9s ease-in-out infinite reverse;
}
/* ナビブランド */
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vortex-appear 1.0s cubic-bezier(.23,1,.32,1) both;
}
.nav-brand-text {
font-family: 'Cormorant Garamond', serif;
font-size: 19px;
font-weight: 300;
color: rgba(0,0,0,.9);
letter-spacing: 3px;
animation: fade-slide-right .65s ease both;
animation-delay: .35s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-slide-right {
from { opacity:0; transform: translateX(-10px); }
to { opacity:1; transform: translateX(0); }
}
/* スクロール連動回転 */
.nav-brand-vortex.scroll-spin {
transition: transform .1s linear;
}
/* ─── Hero 渦出現アニメ ─── */
.hero-vortex-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-vortex-core {
width: 600px;
height: 600px;
object-fit: contain;
opacity: 0;
transform: scale(0.05) rotate(-540deg);
animation: vortex-expand 2.2s cubic-bezier(.16,1,.3,1) .3s both;
}
.vortex-divider.vd-in {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(230,167,0,.35), transparent);
}
.vortex-divider img {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-slow 14s linear infinite;
opacity: .55;
}
.price-card{padding:40px 32px;border-top:4px solid;position:relative;}
.price-card.featured{background:rgba(230,167,0,.08);border:2px solid rgba(230,167,0,.3);border-top:4px solid var(--te2);position:relative;z-index:1;transform:scale(1.02);}
.price-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--te);color:#1c1917;font-family:var(--serif);font-size:11px;font-weight:700;padding:4px 16px;border-radius:2px;white-space:nowrap;}
.price-label{font-family:var(--disp);font-size:11px;letter-spacing:4px;text-transform:uppercase;margin-bottom:12px;display:block;}
.price-name{font-family:var(--serif);font-size:20px;font-weight:700;color:#1c1917;margin-bottom:20px;}
.price-num{font-family:var(--disp);font-size:56px;font-weight:300;line-height:1;margin-bottom:4px;}
.price-period{font-size:14px;font-weight:500;margin-left:4px;}
.price-note{font-size:12px;color:var(--gr);margin-bottom:24px;}
.price-divider{height:1px;background:rgba(0,0,0,.07);margin:24px 0;}
.price-features{list-style:none;display:flex;flex-direction:column;gap:10px;}
.price-feature{font-size:13px;color:var(--gr2);display:flex;align-items:flex-start;gap:8px;}
.price-feature::before{content:'✓';color:var(--te2);font-weight:700;flex-shrink:0;}
/* calc table */
.calc-table{width:100%;border-collapse:collapse;}
.calc-table th{font-family:var(--disp);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--go);padding:12px 16px;text-align:left;border-bottom:1px solid rgba(0,0,0,.06);}
.calc-table td{padding:14px 16px;font-size:13px;border-bottom:1px solid rgba(0,0,0,.04);}
.calc-table tr:hover td{background:rgba(0,0,0,.02);}
.calc-bad{color:var(--re);font-weight:700;}
.calc-good{color:var(--te2);font-weight:700;}
/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:0;}
.faq-item{border-bottom:1px solid rgba(0,0,0,.06);}
.faq-q{width:100%;background:none;border:none;color:#1c1917;font-family:var(--serif);font-size:15px;font-weight:700;padding:20px 0;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.faq-icon{font-size:20px;color:var(--te2);transition:transform .2s;}
.faq-a{font-size:13px;color:var(--gr);line-height:1.85;padding-bottom:20px;display:none;}
.faq-a.open{display:block;}
@media(max-width:1024px){.price-cards{grid-template-columns:1fr;}.price-card.featured{transform:none;}}
/* ══════════════════════════════
ORINOA VORTEX — 全ページ共通
══════════════════════════════ */
/* ナビ ブランドエリア */
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vx-appear 1.1s cubic-bezier(.23,1,.32,1) both;
}
@keyframes vx-appear {
0% { opacity:0; transform:rotate(-270deg) scale(.1); }
65% { opacity:1; transform:rotate(18deg) scale(1.1); }
82% { transform:rotate(-5deg) scale(.97); }
100% { opacity:1; transform:rotate(0deg) scale(1); }
}
.nav-brand-text {
font-family:'Cormorant Garamond',serif;
font-size:19px; font-weight:300;
color:rgba(41,37,36,.9);
letter-spacing:3px;
animation:vx-slide-in .6s ease both;
animation-delay:.38s;
}
@keyframes vx-slide-in {
from { opacity:0; transform:translateX(-8px); }
to { opacity:1; transform:translateX(0); }
}
/* ヒーロー内 inline SVG渦 */
.hero-vortex-inline {
position:absolute;
pointer-events:none;
z-index:1;
opacity:0;
animation:vx-hero-expand 2.4s cubic-bezier(.16,1,.3,1) .4s both;
}
@keyframes vx-hero-expand {
0% { opacity:0; transform:translate(-50%,-50%) scale(.04) rotate(-540deg); }
45% { opacity:.18; transform:translate(-50%,-50%) scale(.7) rotate(-60deg); }
72% { opacity:.11; transform:translate(-50%,-50%) scale(1.04) rotate(10deg); }
87% { opacity:.08; transform:translate(-50%,-50%) scale(.97) rotate(-2deg); }
100% { opacity:.08; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
/* フロートアニメ（expand完了後） */
@keyframes vx-float {
0%,100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
30% { transform:translate(-50%,-50%) scale(1.03) rotate(5deg); }
65% { transform:translate(-50%,-50%) scale(.97) rotate(-4deg); }
}
/* セクション区切り渦 */
.vx-divider {
display:flex;
align-items:center;
gap:18px;
margin:52px 0;
opacity:0;
transform:rotate(-180deg) scale(.5);
transition:opacity .75s ease, transform .85s cubic-bezier(.23,1,.32,1);
}
.vx-divider.vx-in {
opacity:1;
transform:rotate(0deg) scale(1);
}
.vx-divider::before, .vx-divider::after {
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);
}
.vx-divider img {
width:32px; height:32px;
object-fit:contain;
animation:vx-spin 16s linear infinite;
}
@keyframes vx-spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* フッター背景渦 */
.vx-footer-bg {
position:absolute;
bottom:-50px; right:-50px;
width:240px; height:240px;
object-fit:contain;
opacity:.055;
pointer-events:none;
animation:vx-spin 24s linear infinite reverse;
}
/* ページヒーロー右下 渦 */
.vx-page-hero {
position:absolute;
right:28px; bottom:20px;
width:88px; height:88px;
object-fit:contain;
opacity:.15;
pointer-events:none;
animation:vx-spin 18s linear infinite;
}
/* UPSIZE */
/* ═══ 文字サイズ全体アップ ═══ */
body { font-size: 16px; }
.eyebrow { font-size: clamp(11px,1vw,14px) !important; letter-spacing: 5px; }
.h-serif, .head-xl, .head-lg, .head-md, .head-sm { font-family: 'Shippori Mincho', serif; }
/* 見出しを全体的に1.3倍 */
h1 { font-size: clamp(36px,5vw,68px) !important; }
h2 { font-size: clamp(28px,3.8vw,52px) !important; }
h3 { font-size: clamp(22px,2.8vw,38px) !important; }
h4 { font-size: clamp(18px,2.2vw,28px) !important; }
/* 本文を大きく */
p, .body-md, .body-lg, .body-sm, .b, .bs, .bx { font-size: clamp(15px,1.5vw,18px) !important; line-height: 1.96 !important; }
.body-xs, .body-sm { font-size: clamp(14px,1.4vw,17px) !important; }
/* キャプション */
.body-xs, small, .caption { font-size: clamp(13px,1.2vw,15px) !important; }
/* ナビ */
.nav-links a { font-size: clamp(14px,1.3vw,16px) !important; }
/* フッター */
.footer-desc { font-size: clamp(14px,1.3vw,16px) !important; }
.footer-links a { font-size: clamp(14px,1.3vw,16px) !important; }
.fi-v { font-size: clamp(14px,1.3vw,16px) !important; }
/* カード内テキスト */
.feat-title, .feat-t, .tc-org, .team-desc, .tc-desc { font-size: clamp(14px,1.3vw,17px) !important; }
/* ページヒーロー */
.page-hero-title { font-size: clamp(34px,4.5vw,62px) !important; }
.page-hero-sub { font-size: clamp(16px,1.8vw,20px) !important; }
/* ボタン */
.btn { font-size: clamp(15px,1.5vw,18px) !important; padding: 16px 32px !important; }
.btn-sm { font-size: clamp(13px,1.3vw,15px) !important; padding: 11px 22px !important; }
/* table */
.calc-table th, .calc-table td { font-size: clamp(14px,1.3vw,16px) !important; }
/* FAQ */
.faq-q { font-size: clamp(16px,1.6vw,20px) !important; }
.faq-a { font-size: clamp(14px,1.4vw,17px) !important; }
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.vx-divider{display:flex;align-items:center;gap:20px;margin:64px 0;opacity:0;transform:rotate(-180deg) scale(.5);transition:opacity .75s ease,transform .85s cubic-bezier(.23,1,.32,1);}
.vx-divider.vx-in{opacity:1;transform:rotate(0deg) scale(1);}
.vx-divider::before,.vx-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);}
.vx-divider img{width:36px;height:36px;object-fit:contain;animation:vx-spin 16s linear infinite;}
.vx-page-hero{position:absolute;right:36px;bottom:28px;width:100px;height:100px;object-fit:contain;opacity:.15;pointer-events:none;animation:vx-spin 18s linear infinite;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
@keyframes vx-appear{0%{opacity:0;transform:rotate(-270deg) scale(.1);}65%{opacity:1;transform:rotate(18deg) scale(1.1);}82%{transform:rotate(-5deg) scale(.97);}100%{opacity:1;transform:rotate(0deg) scale(1);}}
@keyframes vx-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes vx-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vx-hero-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(-540deg);}45%{opacity:.18;transform:translate(-50%,-50%) scale(.7) rotate(-60deg);}72%{opacity:.11;transform:translate(-50%,-50%) scale(1.04) rotate(10deg);}87%{opacity:.08;transform:translate(-50%,-50%) scale(.97) rotate(-2deg);}100%{opacity:.08;transform:translate(-50%,-50%) scale(1) rotate(0deg);}}
@keyframes vx-float{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}30%{transform:translate(-50%,-50%) scale(1.03) rotate(5deg);}65%{transform:translate(-50%,-50%) scale(.97) rotate(-4deg);}}
/* ===== from social.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;background:#ffffff;color:#1c1917;overflow-x:hidden;line-height:1;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
:root{
--ink:#1c1917;--ink2:#f4f3f0;--ink3:#e8e6e1;
--te:#e6a700;--te2:#b98a06;--te3:#fff6da;
--go:#9c7a08;--gl:#f5b301;
--re:#6b6560;--or:#cf9200;
--wm:#ffffff;--gr:#7c756e;--gr2:#55504b;
--serif:'Shippori Mincho',serif;
--disp:'Cormorant Garamond',serif;
--sans:'Noto Sans JP',sans-serif;
--max:1180px;
}
.container{max-width:var(--max);margin:0 auto;padding:0 40px;}
.section{padding:96px 0;}
.section-sm{padding:64px 0;}
.eyebrow{font-family:var(--disp);font-size:11px;letter-spacing:5px;text-transform:uppercase;display:block;}
.h-serif{font-family:var(--serif);font-weight:700;line-height:1.38;}
.body-lg{font-size:17px;line-height:1.92;}
.body-md{font-size:15px;line-height:1.88;}
.body-sm{font-size:13px;line-height:1.85;}
.body-xs{font-size:12px;line-height:1.75;}
.text-gold{color:var(--gl);}
.text-teal{color:var(--te2);}
.text-muted{color:var(--gr);}
.mt2{margin-top:16px;}.mt3{margin-top:24px;}.mt4{margin-top:32px;}.mt5{margin-top:48px;}.mt6{margin-top:64px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:14px;font-weight:700;padding:12px 24px;cursor:pointer;transition:all .22s;letter-spacing:.04em;}
.btn-primary{background:var(--te);color:#1c1917;border:2px solid var(--te);}
.btn-primary:hover{background:var(--te2);border-color:var(--te2);transform:translateY(-2px);}
.btn-outline{background:transparent;color:#1c1917;border:1.5px solid rgba(0,0,0,.3);}
.btn-outline:hover{border-color:var(--gl);color:var(--gl);transform:translateY(-2px);}
.btn-gold{background:var(--go);color:#1c1917;border:2px solid var(--go);}
.btn-gold:hover{background:var(--gl);border-color:var(--gl);transform:translateY(-2px);}
.btn-sm{padding:9px 18px;font-size:12px;}
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;padding:0 40px;transition:background .35s,backdrop-filter .35s;}
#nav.scrolled{background:rgba(0,0,0,.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06);}
.nav-logo img{height:30px;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto;}
.nav-links a{font-size:13px;font-weight:500;color:rgba(41,37,36,.62);letter-spacing:.04em;transition:color .2s;padding:4px 0;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gl);transform:scaleX(0);transition:transform .2s;}
.nav-links a:hover,.nav-links a.active{color:#1c1917;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{margin-left:12px;}
.page-hero{position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;padding-top:64px;}
.page-hero-bg{position:absolute;inset:0;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.02);}
.page-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.88) 100%);}
.page-hero-inner{position:relative;z-index:1;padding:0 40px 56px;max-width:var(--max);margin:0 auto;width:100%;}
footer{background:#f4f3f0;padding:80px 0 28px;border-top:1px solid rgba(0,0,0,.04);}
.footer-grid{display:grid;grid-template-columns:240px 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-logo img{height:24px;margin-bottom:20px;}
.footer-desc{font-size:12px;color:var(--gr);line-height:1.82;}
.footer-col-title{font-family:var(--disp);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--go);margin-bottom:20px;display:block;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-links a{font-size:13px;color:var(--gr);transition:color .2s;}
.footer-links a:hover{color:var(--gl);}
.footer-info{display:flex;flex-direction:column;gap:7px;}
.fi-row{display:flex;gap:8px;}
.fi-l{font-family:var(--disp);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--te2);width:48px;flex-shrink:0;padding-top:2px;}
.fi-v{font-size:12px;color:var(--gr2);line-height:1.55;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(0,0,0,.04);font-size:11px;color:var(--gr);}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
.rule-gold{height:1px;background:linear-gradient(90deg,var(--go),transparent);margin:24px 0;}
.rule-teal{height:1px;background:linear-gradient(90deg,var(--te),transparent);margin:24px 0;}
.card{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.25);}
.card-w{background:#fff;border:1px solid rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;}
.card-w:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.1);}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,167,0,.12);border:1px solid rgba(230,167,0,.28);color:var(--gl);font-size:11px;font-weight:500;padding:4px 10px;border-radius:2px;}
.bar-chart{display:flex;flex-direction:column;gap:14px;}
.bar-row{display:grid;grid-template-columns:130px 1fr 44px;gap:12px;align-items:center;}
.bar-label{font-size:12px;color:var(--gr2);text-align:right;font-weight:500;}
.bar-track{height:18px;background:rgba(0,0,0,.06);border-radius:2px;overflow:hidden;}
.bar-fill{height:100%;border-radius:2px;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;transition:width 1.1s cubic-bezier(.25,.46,.45,.94);}
.bar-fill span{font-size:10px;color:#1c1917;font-weight:700;}
.bar-val{font-size:13px;font-weight:700;}
.michelin-axes{display:flex;flex-direction:column;gap:14px;}
.axis-row{display:flex;align-items:center;gap:14px;}
.axis-label{font-size:13px;font-weight:500;width:150px;flex-shrink:0;}
.axis-bar{flex:1;height:8px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden;}
.axis-fill{height:100%;background:linear-gradient(to right,var(--te),var(--te2));border-radius:4px;transition:width 1.1s ease;}
.axis-val{font-size:12px;font-weight:700;color:var(--te2);width:28px;flex-shrink:0;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}#nav{padding:0 20px;}.container{padding:0 20px;}}
@media(max-width:768px){.nav-links{display:none;}.footer-grid{grid-template-columns:1fr;}}
/* 渦巻きコンテナ */
.orinoa-vortex {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orinoa-vortex img {
animation: vortex-spin-in 1.2s cubic-bezier(.23,1,.32,1) both;
}
.vortex-reveal.in {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* セクション区切りの渦アクセント */
.vortex-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(26,102,64,.4), transparent);
}
.vortex-divider img {
width: 28px;
height: 28px;
object-fit: contain;
animation: vortex-slow-spin 12s linear infinite;
opacity: .6;
}
@keyframes vortex-slow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ナビロゴエリア */
.nav-brand-vortex {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-in 1s cubic-bezier(.23,1,.32,1) both;
animation-delay: .1s;
opacity: 0;
animation-fill-mode: both;
}
.nav-brand-logo {
height: 24px;
animation: fade-in-right .6s ease both;
animation-delay: .4s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-in-right {
from { opacity:0; transform: translateX(-8px); }
to { opacity:1; transform: translateX(0); }
}
/* フッターの大きな渦 */
.footer-vortex {
position: absolute;
right: -40px;
bottom: -40px;
width: 220px;
height: 220px;
opacity: .04;
pointer-events: none;
animation: vortex-float 10s ease-in-out infinite;
}
/* セクション内の渦アクセント（右下） */
.section-vortex-accent {
position: absolute;
opacity: .05;
pointer-events: none;
animation: vortex-float 9s ease-in-out infinite reverse;
}
/* ナビブランド */
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vortex-appear 1.0s cubic-bezier(.23,1,.32,1) both;
}
.nav-brand-text {
font-family: 'Cormorant Garamond', serif;
font-size: 19px;
font-weight: 300;
color: rgba(0,0,0,.9);
letter-spacing: 3px;
animation: fade-slide-right .65s ease both;
animation-delay: .35s;
opacity: 0;
animation-fill-mode: both;
}
@keyframes fade-slide-right {
from { opacity:0; transform: translateX(-10px); }
to { opacity:1; transform: translateX(0); }
}
/* スクロール連動回転 */
.nav-brand-vortex.scroll-spin {
transition: transform .1s linear;
}
/* ─── Hero 渦出現アニメ ─── */
.hero-vortex-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-vortex-core {
width: 600px;
height: 600px;
object-fit: contain;
opacity: 0;
transform: scale(0.05) rotate(-540deg);
animation: vortex-expand 2.2s cubic-bezier(.16,1,.3,1) .3s both;
}
.vortex-divider.vd-in {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.vortex-divider::before,
.vortex-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(230,167,0,.35), transparent);
}
.vortex-divider img {
width: 32px;
height: 32px;
object-fit: contain;
animation: vortex-spin-slow 14s linear infinite;
opacity: .55;
}
.stat-cell{padding:32px 24px;text-align:center;}
.stat-num{font-family:var(--disp);font-size:52px;font-weight:300;line-height:1;}
.stat-label{font-size:12px;color:var(--gr2);font-weight:500;margin-top:8px;line-height:1.45;}
.stat-src{font-size:10px;color:var(--gr);margin-top:4px;}
/* issue grid */
.issue-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.issue-card{border-top:3px solid;padding:28px;transition:transform .25s;}
.issue-card:hover{transform:translateY(-4px);}
.ic-num{font-family:var(--disp);font-size:48px;font-weight:300;color:rgba(41,37,36,.1);line-height:1;margin-bottom:12px;}
.ic-title{font-family:var(--serif);font-size:17px;font-weight:700;color:#1c1917;margin-bottom:12px;line-height:1.45;}
.ic-body{font-size:13px;color:var(--gr);line-height:1.85;}
/* timeline */
.tl{position:relative;max-width:760px;margin:0 auto;}
.tl-line{position:absolute;left:52px;top:8px;bottom:8px;width:1px;background:linear-gradient(to bottom,var(--go),var(--te),transparent);}
.tl-item{display:grid;grid-template-columns:52px 16px 1fr;gap:0 20px;margin-bottom:36px;}
.tl-year{font-family:var(--disp);font-size:22px;font-weight:300;color:var(--gl);text-align:right;padding-right:14px;padding-top:2px;line-height:1;}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--go);border:2px solid var(--ink);margin-top:4px;position:relative;z-index:1;box-shadow:0 0 0 3px rgba(230,167,0,.15);}
.tl-heading{font-family:var(--serif);font-size:15px;font-weight:700;color:#1c1917;margin-bottom:4px;}
.tl-body{font-size:13px;color:var(--gr);line-height:1.82;}
/* story cards */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.story-card{padding:32px;position:relative;}
.story-num{font-family:var(--disp);font-size:80px;font-weight:300;color:rgba(230,167,0,.08);line-height:1;position:absolute;top:16px;right:20px;}
.story-icon{font-size:32px;margin-bottom:16px;}
.story-title{font-family:var(--serif);font-size:17px;font-weight:700;color:#1c1917;margin-bottom:12px;line-height:1.45;}
.story-body{font-size:13px;color:var(--gr);line-height:1.85;}
/* 2col intro */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.intro-photo{position:relative;border-radius:2px;overflow:hidden;}
.intro-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.intro-photo-ov{position:absolute;inset:0;background:linear-gradient(to right,transparent 55%,var(--ink) 100%);}
/* ══════════════════════════════
ORINOA VORTEX — 全ページ共通
══════════════════════════════ */
/* ナビ ブランドエリア */
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-brand-vortex {
width: 34px;
height: 34px;
object-fit: contain;
flex-shrink: 0;
animation: vx-appear 1.1s cubic-bezier(.23,1,.32,1) both;
}
@keyframes vx-appear {
0% { opacity:0; transform:rotate(-270deg) scale(.1); }
65% { opacity:1; transform:rotate(18deg) scale(1.1); }
82% { transform:rotate(-5deg) scale(.97); }
100% { opacity:1; transform:rotate(0deg) scale(1); }
}
.nav-brand-text {
font-family:'Cormorant Garamond',serif;
font-size:19px; font-weight:300;
color:rgba(41,37,36,.9);
letter-spacing:3px;
animation:vx-slide-in .6s ease both;
animation-delay:.38s;
}
@keyframes vx-slide-in {
from { opacity:0; transform:translateX(-8px); }
to { opacity:1; transform:translateX(0); }
}
/* ヒーロー内 inline SVG渦 */
.hero-vortex-inline {
position:absolute;
pointer-events:none;
z-index:1;
opacity:0;
animation:vx-hero-expand 2.4s cubic-bezier(.16,1,.3,1) .4s both;
}
@keyframes vx-hero-expand {
0% { opacity:0; transform:translate(-50%,-50%) scale(.04) rotate(-540deg); }
45% { opacity:.18; transform:translate(-50%,-50%) scale(.7) rotate(-60deg); }
72% { opacity:.11; transform:translate(-50%,-50%) scale(1.04) rotate(10deg); }
87% { opacity:.08; transform:translate(-50%,-50%) scale(.97) rotate(-2deg); }
100% { opacity:.08; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
/* フロートアニメ（expand完了後） */
@keyframes vx-float {
0%,100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
30% { transform:translate(-50%,-50%) scale(1.03) rotate(5deg); }
65% { transform:translate(-50%,-50%) scale(.97) rotate(-4deg); }
}
/* セクション区切り渦 */
.vx-divider {
display:flex;
align-items:center;
gap:18px;
margin:52px 0;
opacity:0;
transform:rotate(-180deg) scale(.5);
transition:opacity .75s ease, transform .85s cubic-bezier(.23,1,.32,1);
}
.vx-divider.vx-in {
opacity:1;
transform:rotate(0deg) scale(1);
}
.vx-divider::before, .vx-divider::after {
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);
}
.vx-divider img {
width:32px; height:32px;
object-fit:contain;
animation:vx-spin 16s linear infinite;
}
@keyframes vx-spin {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* フッター背景渦 */
.vx-footer-bg {
position:absolute;
bottom:-50px; right:-50px;
width:240px; height:240px;
object-fit:contain;
opacity:.055;
pointer-events:none;
animation:vx-spin 24s linear infinite reverse;
}
/* ページヒーロー右下 渦 */
.vx-page-hero {
position:absolute;
right:28px; bottom:20px;
width:88px; height:88px;
object-fit:contain;
opacity:.15;
pointer-events:none;
animation:vx-spin 18s linear infinite;
}
/* UPSIZE */
/* ═══ 文字サイズ全体アップ ═══ */
body { font-size: 16px; }
.eyebrow { font-size: clamp(11px,1vw,14px) !important; letter-spacing: 5px; }
.h-serif, .head-xl, .head-lg, .head-md, .head-sm { font-family: 'Shippori Mincho', serif; }
/* 見出しを全体的に1.3倍 */
h1 { font-size: clamp(36px,5vw,68px) !important; }
h2 { font-size: clamp(28px,3.8vw,52px) !important; }
h3 { font-size: clamp(22px,2.8vw,38px) !important; }
h4 { font-size: clamp(18px,2.2vw,28px) !important; }
/* 本文を大きく */
p, .body-md, .body-lg, .body-sm, .b, .bs, .bx { font-size: clamp(15px,1.5vw,18px) !important; line-height: 1.96 !important; }
.body-xs, .body-sm { font-size: clamp(14px,1.4vw,17px) !important; }
/* キャプション */
.body-xs, small, .caption { font-size: clamp(13px,1.2vw,15px) !important; }
/* ナビ */
.nav-links a { font-size: clamp(14px,1.3vw,16px) !important; }
/* フッター */
.footer-desc { font-size: clamp(14px,1.3vw,16px) !important; }
.footer-links a { font-size: clamp(14px,1.3vw,16px) !important; }
.fi-v { font-size: clamp(14px,1.3vw,16px) !important; }
/* カード内テキスト */
.feat-title, .feat-t, .tc-org, .team-desc, .tc-desc { font-size: clamp(14px,1.3vw,17px) !important; }
/* ページヒーロー */
.page-hero-title { font-size: clamp(34px,4.5vw,62px) !important; }
.page-hero-sub { font-size: clamp(16px,1.8vw,20px) !important; }
/* ボタン */
.btn { font-size: clamp(15px,1.5vw,18px) !important; padding: 16px 32px !important; }
.btn-sm { font-size: clamp(13px,1.3vw,15px) !important; padding: 11px 22px !important; }
/* table */
.calc-table th, .calc-table td { font-size: clamp(14px,1.3vw,16px) !important; }
/* FAQ */
.faq-q { font-size: clamp(16px,1.6vw,20px) !important; }
.faq-a { font-size: clamp(14px,1.4vw,17px) !important; }
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.vx-divider{display:flex;align-items:center;gap:20px;margin:64px 0;opacity:0;transform:rotate(-180deg) scale(.5);transition:opacity .75s ease,transform .85s cubic-bezier(.23,1,.32,1);}
.vx-divider.vx-in{opacity:1;transform:rotate(0deg) scale(1);}
.vx-divider::before,.vx-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(230,167,0,.38),transparent);}
.vx-divider img{width:36px;height:36px;object-fit:contain;animation:vx-spin 16s linear infinite;}
.vx-page-hero{position:absolute;right:36px;bottom:28px;width:100px;height:100px;object-fit:contain;opacity:.15;pointer-events:none;animation:vx-spin 18s linear infinite;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-r.in{opacity:1;transform:translateX(0);}
@keyframes vx-appear{0%{opacity:0;transform:rotate(-270deg) scale(.1);}65%{opacity:1;transform:rotate(18deg) scale(1.1);}82%{transform:rotate(-5deg) scale(.97);}100%{opacity:1;transform:rotate(0deg) scale(1);}}
@keyframes vx-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes vx-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vx-hero-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(-540deg);}45%{opacity:.18;transform:translate(-50%,-50%) scale(.7) rotate(-60deg);}72%{opacity:.11;transform:translate(-50%,-50%) scale(1.04) rotate(10deg);}87%{opacity:.08;transform:translate(-50%,-50%) scale(.97) rotate(-2deg);}100%{opacity:.08;transform:translate(-50%,-50%) scale(1) rotate(0deg);}}
@keyframes vx-float{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}30%{transform:translate(-50%,-50%) scale(1.03) rotate(5deg);}65%{transform:translate(-50%,-50%) scale(.97) rotate(-4deg);}}
/* ===== v3: ブロックエディタ版ページ用の調整 ===== */
.wp-block-group{margin-top:0;margin-bottom:0;}
figure.wp-block-image{margin:0;}
figure.wp-block-table{margin:0;}
.itr-band{padding:74px 24px 60px;background:#fff;text-align:center;}
.itr-band .itr-logo img{height:clamp(124px,16vw,184px);width:auto;display:inline-block;}
.itr-band .itr-logo{margin:0 0 24px;}
.itr-lead{max-width:580px;margin:0 auto;color:var(--gr2);font-size:clamp(14px,1.5vw,17px);line-height:1.95;}
.greeting-wrap{background:#f4f3f0;padding:80px 24px;}
.greeting-title{font-family:var(--serif);font-size:clamp(20px,3vw,34px);color:#1c1917;margin-bottom:40px;}
.greeting-wrap .greeting-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1100px;margin:0 auto;align-items:start;}
.greeting-col .greeting-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;}
.greeting-name{margin-top:18px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08);font-size:13px;color:var(--gr);line-height:1.9;}
.greeting-name strong{font-family:var(--serif);font-size:20px;color:#1c1917;}
.greeting-h3{font-family:var(--serif);font-size:clamp(18px,2.5vw,26px);color:#1c1917;margin-bottom:18px;line-height:1.5;}
.greeting-col p{font-size:15px;color:var(--gr2);line-height:2;margin:0 0 16px;}
.greeting-sign{font-family:var(--disp);font-size:22px;font-style:italic;color:var(--gr);margin-top:14px;}
.cinfo-wrap{background:var(--ink2);padding:64px 24px;}
.cinfo-title{font-family:var(--serif);font-size:clamp(20px,3vw,34px);color:#1c1917;margin-bottom:40px;}
.cinfo-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1100px;margin:0 auto;}
.company-table table{width:100%;border-collapse:collapse;}
@media(max-width:768px){
.greeting-wrap .greeting-grid{grid-template-columns:1fr;gap:32px;}
.cinfo-grid{grid-template-columns:1fr;gap:24px;}
}
/* ===== v3: 料金ページ ブロック版 ===== */
.calc-wrap{background:var(--ink2);padding:64px 24px;}
.calc-title{font-family:var(--serif);font-size:clamp(20px,3vw,32px);color:#1c1917;margin-bottom:40px;}
.calc-table{margin:0 auto;max-width:1000px;overflow-x:auto;}
.calc-table table{width:100%;border-collapse:collapse;background:#fff;}
.calc-table table td:nth-child(3){color:var(--te2);font-weight:700;}
.calc-note{max-width:1000px;margin:24px auto 0;background:rgba(230,167,0,.08);border:1px solid rgba(230,167,0,.2);padding:24px 28px;font-size:14px;color:var(--gr2);line-height:1.8;}
.calc-note strong{color:#1c1917;}
/* ===== v3.1: ナビ＆ヒーローのコントラスト修正＋月を縮小 ===== */
/* ナビ：上部に薄い影を敷き、文字を明るく（スクロール後の黒背景でも読める） */
#nav:not(.scrolled){background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);}
.nav-brand-text{color:rgba(255,255,255,.95) !important;}
.nav-links a{color:rgba(255,255,255,.82) !important;}
.nav-links a:hover,.nav-links a.active{color:#fff !important;}
.hamburger span{background:#fff !important;}
/* ホームのヒーロー文字を白系に（暗い背景で読める） */
.hero-msg-line1{color:rgba(255,255,255,.9) !important;}
.hero-msg-line2{color:#ffffff !important;}
.hero-msg-line2 em{color:var(--gl) !important;font-style:normal;}
.hero-msg-line3{color:rgba(255,255,255,.82) !important;}
.hero-sub{color:rgba(255,255,255,.85) !important;}
.hero-stat-l{color:rgba(255,255,255,.82) !important;}
.hero-stat-s{color:rgba(255,255,255,.6) !important;}
/* ヒーローの円（月）を小さく・控えめに */
.hero-vx{width:min(380px,66vw) !important;opacity:.4 !important;}
/* 下層ページのバナー文字も白系に統一（合同会社ORINOA 等） */
.page-hero-inner h1{color:#ffffff !important;}
.page-hero-inner p{color:rgba(255,255,255,.85) !important;}
.page-hero-inner .eyebrow{color:rgba(255,255,255,.7) !important;}
/* ===== v3.2: CONTACT見出し＆ホームのナビカード文字を可読に ===== */
/* CONTACT「つくりませんか。」を白で強調（黄色背景で埋もれていた） */
.contact-title em{color:#ffffff !important;}
/* ホーム下部ナビカード：暗い帯の上に白文字（写真に埋もれていた） */
.nav-card-ov{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 38%,transparent 72%) !important;}
.nav-card-title{color:#ffffff !important;}
.nav-card-sub{color:rgba(255,255,255,.9) !important;}
.nav-card-ey{color:var(--gl) !important;}
.nav-card-arrow{color:rgba(255,255,255,.85) !important;border-color:rgba(255,255,255,.45) !important;}
/* ===== v3.2: CONTACT黄色背景＆ナビカードの文字可読性 ===== */
/* CONTACT：金色背景で文字を読めるように */
.contact-title{color:#1c1917 !important;}
.contact-title em{color:#ffffff !important;text-shadow:0 1px 6px rgba(70,45,0,.6),0 0 1px rgba(0,0,0,.5);}
.contact-inner .eyebrow{color:rgba(28,25,23,.6) !important;}
#contact .contact-bg img{opacity:.12 !important;}
/* ナビカード：文字の所に暗い帯を敷いて写真の上でも読めるように */
.nav-card-ov{background:linear-gradient(to top,rgba(0,0,0,.97) 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,.3) 55%,transparent 78%) !important;}
.nav-card-body{background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0)) !important;padding:32px 32px 28px !important;}
.nav-card-title{color:#ffffff !important;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.nav-card-sub{color:rgba(255,255,255,.92) !important;}
.nav-card-ey{color:var(--gl) !important;}
/* ===== v3.3: スマホ表示の修正（グリッド縦積み＋ドロワー文字） ===== */
@media(max-width:768px){
/* 社会課題などの多カラムをスマホで1列に（文字が潰れないように） */
.issue-grid{grid-template-columns:1fr !important;gap:20px !important;}
.story-grid{grid-template-columns:1fr !important;gap:20px !important;}
.stat-grid{grid-template-columns:1fr 1fr !important;}
.intro-grid{grid-template-columns:1fr !important;gap:32px !important;}
.issue-card,.story-card{padding:24px !important;}
}
/* ドロワー（ハンバーガーメニュー）：黒背景に白文字で統一 */
.nav-links.mobile-open{background:rgba(0,0,0,.97) !important;}
.nav-links.mobile-open a{color:#ffffff !important;border-bottom:1px solid rgba(255,255,255,.12) !important;}
.nav-links.mobile-open a.active{color:var(--gl) !important;}
.nav-links.mobile-open .nav-cta{color:#1c1917 !important;border-bottom:none !important;}
/* ===== v3.4: アプリ詳細 比較表（濃紺背景セクション）の文字可読性 ===== */
section[style*="08121a"] .eyebrow{color:rgba(255,255,255,.55) !important;}
section[style*="08121a"] h2{color:#ffffff !important;}
section[style*="08121a"] .cmp-row{color:rgba(255,255,255,.9) !important;border-top-color:rgba(255,255,255,.08) !important;}
section[style*="08121a"] .cmp-head[style*="230,167"]{color:#ffd24a !important;}
section[style*="08121a"] .cmp-head[style*="191,58"]{color:#ff9a8c !important;}