/* ============================================================
MIG総研株式会社 — Editorial Wabi-Sabi Design System
Dark moss canvas · 5-step green ramp · warm burdock accent
------------------------------------------------------------
Production polish:
- Japanese kerning (font-feature-settings: "palt") for proper
fullwidth-character spacing in headlines and body.
- word-break:keep-all + overflow-wrap:anywhere for natural
CJK line-wrapping that avoids mid-word breaks.
- Tightened mobile gutter / section padding / type rhythm.
- Section-level breakpoints harmonised at 720 / 900 / 1100.
-
elements switched to soft-break utility on narrow
viewports so headlines reflow gracefully.
============================================================ */
/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ---- Tokens ---- */
:root{
/* green ramp */
--green-950:#16281E;
--green-900:#1B2F24;
--green-850:#20372A;
--green-800:#254434;
--green-700:#2C5A46;
--green-600:#2B6A51;
--green-500:#33936A;
--green-400:#56B488;
--green-300:#86CFA9;
/* warm accent (burdock) */
--warm:#D9C9A8;
--warm-deep:#C2AE85;
--warm-dim:rgba(217,201,168,0.16);
--teal:#1bccbd;
/* neutrals — paper */
--paper:#F8F8F5;
--paper-2:#FDFDFB;
--ink-paper:#15201A;
--ink-paper-dim:rgba(21,32,26,0.90);
--paper-hair:rgba(21,32,26,0.12);
/* dark surface text */
--text:#EAEBE3;
--text-dim:rgba(234,235,227,0.88);
--text-faint:rgba(234,235,227,0.66);
--hair:rgba(234,235,227,0.13);
--hair-strong:rgba(234,235,227,0.24);
/* state */
--danger:#C0563E;
/* type */
--serif:'Shippori Mincho B1',"游明朝","Yu Mincho",serif;
--sans:'Noto Sans JP',"Hiragino Sans","Yu Gothic",sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
/* layout */
--maxw:1320px;
--gut:clamp(22px,5vw,80px);
--sp-section:clamp(72px,10.5vw,168px);
--sp-tight:clamp(48px,7vw,96px);
--radius:16px;
--ease:cubic-bezier(.22,.61,.36,1);
--header-h:64px;
}
/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
overflow-x:hidden;
text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
font-family:var(--sans);
font-weight:400;
overflow-x:hidden;
background:var(--green-950);
color:var(--text);
line-height:1.85;
font-size:16px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
/* Proportional fullwidth-character spacing (palt) for
better Japanese kerning across the entire site. */
font-feature-settings:"palt" 1, "kern" 1;
/* Natural CJK wrapping — avoid mid-word breaks. */
word-break:normal;
overflow-wrap:anywhere; /* 문절이 한 줄보다 길 때만 강제 분리 → 컨테이너 밀림 방지 */
line-break:strict;
}
/* Japanese phrase-aware wrapping (Chrome/Edge 119+; degrades safely). */
@supports (word-break:auto-phrase){
p,li,dd,dt,h1,h2,h3,h4,figcaption,.lead,.deck,.art__t,.h-card,.h-sec,.display{word-break:auto-phrase}
}
/* Avoid a lone trailing character on the last line. */
p,li,dd,h1,h2,h3,h4,.lead,.deck,.art__t,.h-card,.h-sec,.display{text-wrap:pretty}
/* PC 전용 수동 줄바꿈 — 모바일에서는 자동 줄바꿈에 맡긴다 */
@media (max-width:820px){ br.brw{display:none} }
@media (min-width:821px){ wbr{display:none} }
/* 어떤 텍스트도 컨테이너를 넘지 않도록 */
.wrap,.section,.svc-card,.card,.engine{min-width:0}
.grid > *,.svc__top > *,.svc__cols > *,.feat-head--media > *,.who-head > *,.svc__top-text > *,
.art-grid > *,.newsgrid > *,.footer-grid > *,.whyband > *,.feat > *,.engine-grid > *,
.cat > div > *,.sec-head--split > *,.deflist > *,.kase__b > *,.case-card__row > *{min-width:0}
h1,h2,h3,h4,p,li,dd,.lead,.deck{max-width:100%}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--warm);color:var(--green-950)}
/* film grain overlay */
body::after{
content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){body::after{display:none}}
/* ---- Type scale ---- */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
h1,h2,h3,h4{
font-family:var(--serif);
font-weight:600;
line-height:1.32;
letter-spacing:.01em;
font-feature-settings:"palt" 1;
}
.display{
font-family:var(--serif);font-weight:600;
font-size:clamp(2.2rem,4.9vw,4.7rem);
line-height:1.22;
letter-spacing:.005em;
}
/* keep each hero headline line intact on desktop (no awkward mid-phrase wrap) */
@media (min-width:761px){
.hero h1 .line-rise>span{white-space:nowrap}
}
.h-sec{
font-size:clamp(1.85rem,3.6vw,3.1rem);
line-height:1.34;
font-weight:700;
}
.h-card{
font-size:clamp(1.22rem,1.9vw,1.6rem);
font-weight:700;
line-height:1.5;
}
.lead{
font-size:clamp(1rem,1.35vw,1.18rem);
line-height:1.95;
color:var(--text-dim);
font-weight:400;
letter-spacing:.005em;
}
/* mono eyebrow label */
.eyebrow{
font-family:var(--mono);font-size:.72rem;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
color:var(--warm);display:inline-flex;align-items:center;gap:.9em;
word-break:normal;
}
.eyebrow::before{
content:"";width:26px;height:1px;background:var(--warm);
opacity:.7;display:inline-block;flex:none;
}
.eyebrow.no-rule::before{display:none}
@media (max-width:560px){
.eyebrow{font-size:.66rem;letter-spacing:.22em;gap:.7em}
.eyebrow::before{width:18px}
}
/* utility: soft break that collapses on narrow widths */
.brsoft{display:block}
@media (max-width:560px){.brsoft{display:inline}.brsoft::before{content:" "}}
/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:var(--sp-tight)}
/* 모바일: 섹션 상·하 여백 축소 (빈 공간 제거) */
@media (max-width:760px){
:root{
--sp-section:clamp(48px,9vw,80px);
--sp-tight:clamp(34px,6vw,56px);
}
}
.divider{height:1px;background:var(--hair);border:none;width:100%}
/* paper (light) sections */
.paper{background:var(--paper);color:var(--ink-paper)}
.paper .lead{color:var(--ink-paper-dim)}
.paper .eyebrow{color:var(--green-600)}
.paper .eyebrow::before{background:var(--green-600)}
.paper .divider{background:var(--paper-hair)}
/* ============================================================
Header
============================================================ */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;
display:flex;align-items:center;justify-content:space-between;
padding:16px var(--gut);
transition:background .5s var(--ease),backdrop-filter .5s var(--ease),padding .4s var(--ease),border-color .5s;
border-bottom:1px solid transparent;
}
.site-header.scrolled{
background:rgba(11,20,16,.84);
backdrop-filter:blur(14px) saturate(1.2);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
border-bottom:1px solid var(--hair);
padding-block:12px;
}
.brand{display:flex;align-items:center;gap:.6em;line-height:1;z-index:1002}
.brand__logo{
display:block;height:22px;width:auto;
/* preserve aspect ratio 529:82 ≈ 6.45 */
transition:opacity .3s var(--ease);
}
/* on paper/light backgrounds swap white → green logo (CSS-only, no extra ![]()
) */
.paper .brand__logo,
.brand--green .brand__logo{
content:url("../images/hero/logo-image_green.png");
}
.brand__mark{font-family:var(--serif);font-weight:700;font-size:1.32rem;letter-spacing:.02em;color:var(--text)}
.brand__sub{
font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
color:var(--text-faint);text-transform:uppercase;
}
.brand:has(.brand__logo) .brand__sub{display:none}
@media (max-width:560px){.brand__sub{display:none}.brand__logo{height:20px}}
/* footer wordmark slightly larger */
.footer-brand .brand__logo{height:30px}
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,28px)}
.nav__inline{display:flex;align-items:center;gap:inherit}
.nav__link{
font-size:.84rem;font-weight:500;letter-spacing:.04em;color:var(--text-dim);
position:relative;padding:6px 0;transition:color .3s;
white-space:nowrap;
}
.nav__link::after{
content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--warm);transition:width .35s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--text)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:100%}
.nav__cta{
font-size:.82rem;font-weight:500;letter-spacing:.04em;
padding:10px 20px;border:1px solid var(--hair-strong);border-radius:999px;
color:var(--text);transition:all .35s var(--ease);
display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
}
.nav__cta:hover{background:var(--warm);color:var(--green-950);border-color:var(--warm)}
.nav__lang{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--text-faint);display:flex;gap:.5em;align-items:center}
.nav__lang b{color:var(--text)}
.burger{
display:none;
width:46px;height:46px;
position:relative;z-index:1002;
margin-right:-6px;
background:transparent;border:none;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.burger span{
position:absolute;
left:10px;right:10px;
height:2px;
background:var(--text);
border-radius:1px;
transition:transform .4s var(--ease),opacity .3s,top .3s,bottom .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){bottom:16px}
.burger:hover span{background:var(--warm)}
/* ============================================================
Mobile menu — right-side drawer with backdrop and X-close
============================================================ */
/* Backdrop — covers entire viewport, visible only when .menu-open */
body::before{
content:"";
position:fixed;inset:0;z-index:1000;
background:rgba(8,15,11,.55);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
opacity:0;
pointer-events:none;
transition:opacity .45s var(--ease);
}
body.menu-open::before{opacity:1;pointer-events:auto}
.mobile-menu{
position:fixed;
top:0;right:0;bottom:0;
width:min(86vw, 420px);
z-index:1001;
background:var(--green-950);
border-left:1px solid var(--hair);
display:flex;flex-direction:column;
padding:clamp(76px,12vw,110px) clamp(28px,5vw,52px) clamp(36px,5vw,56px);
transform:translateX(100%);
transition:transform .55s var(--ease), visibility .55s;
visibility:hidden;
overflow-y:auto;
box-shadow:-30px 0 60px rgba(0,0,0,.4);
}
.mobile-menu.open{
transform:translateX(0);
visibility:visible;
}
/* Close X button — top-right of drawer */
.mobile-menu__close{
position:absolute;
top:18px;right:clamp(20px, 4vw, 36px);
width:46px;height:46px;
background:transparent;border:none;
cursor:pointer;z-index:2;
-webkit-tap-highlight-color:transparent;
}
.mobile-menu__close span{
position:absolute;
left:11px;right:11px;top:50%;
height:2px;background:var(--text);
border-radius:1px;
transform-origin:center;
transition:background .3s;
}
.mobile-menu__close span:nth-child(1){transform:translateY(-50%) rotate(45deg)}
.mobile-menu__close span:nth-child(2){transform:translateY(-50%) rotate(-45deg)}
.mobile-menu__close:hover span{background:var(--warm)}
/* Menu list — simple vertical, no numbering */
.mobile-menu__list{
display:flex;flex-direction:column;
margin-top:auto;margin-bottom:auto;
}
.mobile-menu__list a{
font-family:var(--serif);
font-size:clamp(1.25rem,5.4vw,1.85rem);
font-weight:500;
letter-spacing:.01em;
color:var(--text);
padding:.55em 0;
border-bottom:1px solid var(--hair);
transition:color .3s, padding-left .3s var(--ease);
}
.mobile-menu__list a:hover{
color:var(--warm);
padding-left:.4em;
}
/* お問い合わせ — CTA pill styled distinctly */
.mobile-menu__cta{
border-bottom:none !important;
margin-top:clamp(20px,3vw,32px);
background:var(--warm);
color:var(--green-950) !important;
padding:.85em 1.1em !important;
border-radius:999px;
display:flex !important;
align-items:center;
justify-content:space-between;
font-size:clamp(1.05rem,3.8vw,1.25rem) !important;
font-weight:600;
transition:background .3s, color .3s, transform .3s var(--ease);
}
.mobile-menu__cta:hover{
background:var(--paper-2);
color:var(--green-950) !important;
padding-left:1.1em !important; /* override the generic hover indent */
}
.mobile-menu__cta .arr{transition:transform .3s var(--ease)}
.mobile-menu__cta:hover .arr{transform:translateX(4px)}
body.menu-open{overflow:hidden}
body.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){bottom:22px;transform:rotate(-45deg)}
/* Mobile/tablet (≤1000px): hide inline links AND the お問い合わせ CTA;
show only the hamburger on the right. The CTA is still reachable
from within the mobile-menu overlay (it has its own お問い合わせ link). */
@media (max-width:1000px){
.nav__inline{display:none}
.nav__cta{display:none}
.burger{display:block}
.nav{gap:8px}
}
/* ============================================================
Buttons
============================================================ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.7em;
font-size:.92rem;font-weight:500;letter-spacing:.03em;
padding:15px 28px;border-radius:999px;transition:all .4s var(--ease);
position:relative;white-space:nowrap;line-height:1.2;
}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn--primary{background:var(--warm);color:var(--green-950)}
.btn--primary:hover{background:var(--paper-2)}
.btn--ghost{border:1px solid var(--hair-strong);color:var(--text)}
.btn--ghost:hover{border-color:var(--warm);color:var(--warm)}
.paper .btn--ghost{border-color:var(--paper-hair);color:var(--ink-paper)}
.paper .btn--ghost:hover{border-color:var(--green-600);color:var(--green-600)}
.btn--green{background:var(--green-600);color:var(--paper-2)}
.btn--green:hover{background:var(--green-500)}
@media (max-width:480px){
.btn{padding:13px 22px;font-size:.88rem;width:100%}
}
/* text link with arrow */
.tlink{
display:inline-flex;align-items:center;gap:.55em;font-size:.88rem;font-weight:500;
letter-spacing:.04em;color:var(--warm);transition:gap .35s var(--ease);
white-space:nowrap;
}
.tlink:hover{gap:.95em}
.paper .tlink{color:var(--green-600)}
/* ============================================================
Hero
============================================================ */
.hero{
position:relative;min-height:100svh;
display:flex;align-items:center;overflow:hidden;
background:radial-gradient(140% 120% at 78% 8%,var(--green-850) 0%,var(--green-950) 58%);
}
@supports not (min-height:100svh){.hero{min-height:100vh}}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;z-index:0;
background:var(--green-900);
/* darken + tone-match to brand green for legibility over any frame */
filter:brightness(.92) saturate(.92) contrast(1.02);
/* prevent video controls from showing in any browser */
pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
/* still show as static poster — autoplay is paused via JS */
.hero__video{filter:brightness(.86) saturate(.92) contrast(1.02)}
}
@media (max-width:760px){
/* mobile: a touch darker so 100svh hero stays readable on bright displays */
.hero__video{filter:brightness(.80) saturate(.92) contrast(1.02);object-position:center 45%}
}
/* Veil 1 — flat brand-green tint covering the sticky video, lifts black points.
Note: removed the bottom-fade-to-green-950 since the veil now spans
hero + 課題提起; instead we use a more uniform darkness across the viewport. */
.hero__veil{
position:absolute;inset:0;z-index:1;
background:
/* 텍스트가 놓이는 좌측을 조금 더 눌러 가독성 확보 */
linear-gradient(90deg,
rgba(11,20,16,.30) 0%,
rgba(11,20,16,.14) 46%,
rgba(11,20,16,0) 72%),
linear-gradient(180deg,
rgba(11,20,16,.40) 0%,
rgba(11,20,16,.26) 30%,
rgba(11,20,16,.30) 70%,
rgba(11,20,16,.46) 100%),
/* flat brand tint */
linear-gradient(180deg, rgba(15,28,22,.26), rgba(15,28,22,.26));
}
/* 히어로 문구: 배경 영상·이미지 위에서도 또렷하게 */
.hero .display,
.hero .hero__sub,
.section--over-video .h-sec,
.section--over-video .hero__sub,
.page-hero--bg .crumb,
.page-hero--bg .crumb a,
.page-hero--bg .eyebrow,
.page-hero--bg h1,
.page-hero--bg .lead,
.contact-top .crumb,
.contact-top .eyebrow,
.contact-top h1,
.contact-top .lead,
.cta-band .eyebrow,
.cta-band .display,
.cta-band .lead{
text-shadow:0 1px 2px rgba(0,0,0,.42), 0 3px 16px rgba(0,0,0,.5);
}
@media (max-width:760px){
.hero .display,.hero .hero__sub,
.page-hero--bg h1,.page-hero--bg .lead,.page-hero--bg .crumb,
.contact-top h1,.contact-top .lead,.contact-top .crumb,
.cta-band .display,.cta-band .lead{
text-shadow:0 1px 2px rgba(0,0,0,.5), 0 2px 12px rgba(0,0,0,.58);
}
}
/* Vignette layer — focuses attention on the left text column */
.hero-pin__bg::after,
.hero:not(.hero--pinned)::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(120% 100% at 78% 50%,
transparent 0%,
rgba(11,20,16,.18) 55%,
rgba(11,20,16,.55) 100%);
}
/* ============================================================
Pinned hero region — sticky video bg covers hero + 課題提起
============================================================ */
.hero-pin{
position:relative;
background:var(--green-950); /* fallback under everything */
}
/* Sticky background layer — pins at top:0 until parent .hero-pin ends */
.hero-pin__bg{
position:sticky;
top:0;
height:100vh;
height:100svh;
z-index:0;
overflow:hidden;
}
/* Hero text section pulled up to overlap the sticky bg */
.hero-pin .hero--pinned{
margin-top:-100vh;
margin-top:-100svh;
position:relative;
z-index:1;
background:transparent;
min-height:100svh;
}
@supports not (height:100svh){
.hero-pin__bg{height:100vh}
.hero-pin .hero--pinned{margin-top:-100vh;min-height:100vh}
}
/* 課題提起 section sits on top of the sticky bg until the wrapper ends.
Background must stay transparent for the video to show through; once
the .hero-pin wrapper ends (after .solution-lead), the sticky releases
and subsequent sections cover the video naturally. */
.hero-pin .section--over-video{
position:relative;
z-index:1;
background:transparent;
}
/* Add a scrim under the 課題提起 cards so dense text stays readable
even when the video has a bright frame in view.
z-index:0 + isolation:isolate keeps the scrim behind content but above
the sticky video (which is z-index:0 in the parent flow). */
.hero-pin .section--over-video{isolation:isolate}
.hero-pin .section--over-video::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,
rgba(11,20,16,.20) 0%,
rgba(11,20,16,.50) 45%,
rgba(11,20,16,.85) 100%);
}
/* All direct children of .section--over-video need a positive z-index so
they sit above the ::before scrim. */
.hero-pin .section--over-video > *{position:relative;z-index:1}
.hero__inner{
position:relative;z-index:2;width:100%;
padding-block:clamp(80px,10vh,120px);
}
.hero h1{
margin:.5em 0 .7em;max-width:none;
line-height:1.22;
font-feature-settings:"palt" 1;
}
.hero h1 .line-rise>span{display:inline-block}
.hero__sub{max-width:64ch;margin-bottom:2.4em}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__cta .btn{width:auto}
.hero__scroll{
position:absolute;right:var(--gut);bottom:clamp(48px,7vh,90px);z-index:2;
font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;color:var(--text-faint);
writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;
}
.hero__scroll::after{
content:"";width:1px;height:58px;
background:linear-gradient(var(--warm),transparent);
animation:scrolldot 2.4s var(--ease) infinite;
}
@keyframes scrolldot{
0%{transform:scaleY(0);transform-origin:top}
45%{transform:scaleY(1);transform-origin:top}
55%{transform:scaleY(1);transform-origin:bottom}
100%{transform:scaleY(0);transform-origin:bottom}
}
@media (max-width:760px){.hero__scroll{display:none}}
@media (max-width:560px){
.hero__inner{padding-block:clamp(70px,9vh,110px)}
.hero h1{max-width:none}
.hero__sub{margin-bottom:2em}
.hero__cta{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
.hero__cta .btn{width:100%}
}
/* ============================================================
Reveal animations
============================================================ */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity 1.25s var(--ease),transform 1.25s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.14s}
[data-reveal][data-d="2"]{transition-delay:.28s}
[data-reveal][data-d="3"]{transition-delay:.42s}
[data-reveal][data-d="4"]{transition-delay:.56s}
[data-reveal][data-d="5"]{transition-delay:.70s}
.line-rise{display:block;overflow:hidden}
.line-rise>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.in .line-rise>span,[data-reveal].in .line-rise>span{transform:none}
@media (prefers-reduced-motion:reduce){
[data-reveal]{opacity:1;transform:none;transition:none}
.line-rise>span{transform:none;transition:none}
}
/* ============================================================
Generic section header
============================================================ */
.sec-head{
display:grid;grid-template-columns:minmax(0,1fr);
gap:1.4em;margin-bottom:clamp(40px,5.5vw,86px);max-width:62ch;
}
.sec-head .lead{margin-top:.2em}
.sec-head--split{max-width:none;grid-template-columns:1fr;gap:1.6em}
@media (min-width:860px){
.sec-head--split{
grid-template-columns:1fr 1.15fr;
align-items:end;
gap:clamp(36px,5vw,72px);
}
.sec-head--split .lead{max-width:52ch}
}
/* ============================================================
Cards — service / generic
============================================================ */
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){
.grid-3{grid-template-columns:minmax(0,1fr)}
.grid-2{grid-template-columns:minmax(0,1fr)}
}
.card{
position:relative;border:1px solid var(--hair);border-radius:var(--radius);
padding:clamp(26px,3vw,42px);
transition:border-color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease);
background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);
overflow:hidden;
}
.card:hover{border-color:var(--hair-strong);transform:translateY(-4px)}
.card__no{
font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;
color:var(--warm);margin-bottom:1.6em;display:block;
}
.card h3{margin-bottom:.7em}
.card p{font-size:.96rem;color:var(--text-dim);font-weight:400;line-height:1.9}
.card .tlink{margin-top:1.6em}
.card__line{position:absolute;left:0;top:0;height:2px;width:0;background:var(--warm);transition:width .6s var(--ease)}
.card:hover .card__line{width:100%}
.paper .card{border-color:var(--paper-hair);background:linear-gradient(180deg,rgba(21,32,26,.015),transparent)}
.paper .card:hover{border-color:rgba(21,32,26,.28)}
.paper .card p{color:var(--ink-paper-dim)}
.paper .card__no,.paper .eyebrow{color:var(--green-600)}
/* ============================================================
Footer
============================================================ */
.site-footer{
background:var(--green-950);border-top:1px solid var(--hair);
padding-block:clamp(56px,7vw,110px) 40px;
}
.footer-grid{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:36px}}
.footer-brand .brand__mark{font-size:1.7rem}
.footer-tag{
color:var(--text-dim);font-weight:400;font-size:.94rem;
margin-top:1.2em;max-width:34ch;line-height:1.9;
}
.footer-col h4{
font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--text-faint);margin-bottom:1.4em;
}
.footer-col li{margin-bottom:.9em}
.footer-col a{font-size:.92rem;color:var(--text-dim);transition:color .3s}
.footer-col a:hover{color:var(--warm)}
.footer-base{
display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
margin-top:clamp(40px,6vw,80px);padding-top:28px;border-top:1px solid var(--hair);
}
.footer-base small{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-faint)}
/* ============================================================
Page hero (interior pages)
============================================================ */
.page-hero{
position:relative;
min-height:clamp(560px,66vh,740px); /* unify sub-page hero height */
padding-top:clamp(130px,18vh,220px);
padding-bottom:clamp(84px,10vw,150px);
overflow:hidden;
background:radial-gradient(120% 130% at 85% 0%,var(--green-850),var(--green-950) 62%);
}
.page-hero__grid{
position:absolute;inset:0;opacity:.5;
background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
background-size:clamp(48px,7vw,96px) clamp(48px,7vw,96px);
-webkit-mask-image:radial-gradient(80% 90% at 80% 0%,#000,transparent 75%);
mask-image:radial-gradient(80% 90% at 80% 0%,#000,transparent 75%);
}
.page-hero__inner{position:relative;z-index:2}
.page-hero h1{
font-size:clamp(2.3rem,5.2vw,4.6rem);
line-height:1.22;margin:.45em 0 .5em;max-width:18ch;
}
.page-hero .lead{max-width:54ch}
.crumb{
font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
color:var(--text-faint);display:flex;gap:.7em;align-items:center;
word-break:normal;
}
.crumb a:hover{color:var(--warm)}
.crumb .sep{opacity:.5}
/* ============================================================
Page-hero AI background — right-aligned within content frame,
both edges faded, focus-pull entrance + periodic scan pulse.
STYLE: "Diffusion Focus"
Used on: strengths.html
============================================================ */
/* .page-hero__bg now lives INSIDE .wrap.page-hero__inner so it is
bounded by the content frame (max-width:1320px + gutter).
Anchored to the right edge of the content frame, extending leftward
to ~2/3 of the area, and bleeds further downward past page-hero. */
.page-hero--bg{overflow:hidden}
.page-hero--bg .page-hero__inner{position:relative}
.page-hero--bg .page-hero__bg{
position:absolute;
left:50%; /* FULL-bleed hero image */
right:auto;
transform:translateX(-50%);
width:100vw;max-width:none;
top:calc(-1 * clamp(150px,20vh,260px)); /* over-reach section top */
bottom:calc(-1 * clamp(160px,16vw,300px)); /* over-reach section bottom */
z-index:-1;
pointer-events:none;
overflow:hidden;
}
/* soft left→right scrim only where the text sits (lighter veil) */
.page-hero--bg .page-hero__bg::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,rgba(11,20,16,.42) 0%,rgba(11,20,16,.24) 40%,rgba(11,20,16,.08) 70%,transparent 100%);
}
/* The grid overlay must still clip even when the section overflows */
.page-hero--bg .page-hero__grid{
-webkit-mask-image:
radial-gradient(80% 90% at 80% 0%,#000,transparent 75%);
mask-image:
radial-gradient(80% 90% at 80% 0%,#000,transparent 75%);
}
@media (max-width:760px){
/* 모바일: 내용에 맞춰 높이 축소 (아래 빈 공간 제거) */
.page-hero{
min-height:0;
padding-top:clamp(104px,15vh,150px);
padding-bottom:clamp(38px,7vw,60px);
}
.page-hero--bg{overflow:hidden}
.page-hero--bg .page-hero__bg{
position:absolute;
left:0;right:0;
transform:none; /* 데스크톱의 -50% 이동을 해제 (모바일 밀림 버그) */
width:100%;max-width:100%;
/* 섹션 상·하 패딩까지 덮어 히어로 영역을 가득 채운다 */
top:calc(-1 * clamp(104px,15vh,150px));
bottom:calc(-1 * clamp(38px,7vw,60px));
opacity:.6;
}
/* 텍스트 가독용 스크림: 모바일은 위→아래 방향으로 */
.page-hero--bg .page-hero__bg::after{
background:linear-gradient(180deg,rgba(11,20,16,.46) 0%,rgba(11,20,16,.22) 42%,rgba(11,20,16,.30) 100%);
}
}
/* ----- 1. Image layer with focus-pull entrance -----
Default image is top_bg01.jpg. Pages override per-instance via inline
style="background-image:url('assets/images/top/...')" — inline path
resolves against the HTML document so paths stay intuitive. */
.page-hero--bg .page-hero__bg-img{
position:absolute;inset:0;
background-image:url("../images/top/top_bg01.jpg");
background-size:cover;
background-position:center 42%;
background-repeat:no-repeat;
filter:brightness(.9) saturate(.92) contrast(1.02) hue-rotate(-3deg);
transform-origin:50% 50%;
animation:
heroFadeIn 1.5s ease both,
heroDrift 22s ease-in-out -9s infinite alternate;
transform:scale(1.2) translateX(-4%);
will-change:transform, opacity;
}
@keyframes heroFadeIn{from{opacity:0}to{opacity:1}}
@keyframes heroDrift{
from{transform:scale(1.2) translateX(-4%)}
to{transform:scale(1.2) translateX(4%)}
}
@media (max-width:760px){
.page-hero--bg .page-hero__bg-img{
-webkit-mask-image:linear-gradient(to top, transparent 0%, #000 9%, #000 94%, transparent 100%);
mask-image:linear-gradient(to top, transparent 0%, #000 9%, #000 94%, transparent 100%);
/* 좁은 화면에서는 확대·좌우 드리프트를 줄여 피사체가 잘리지 않게 */
background-position:center 45%;
transform:scale(1.04);
animation:heroFadeIn 1.5s ease both;
}
}
/* Focus-pull / diffusion materialize — blur 20→0, opacity 0→1 */
@keyframes aiMaterialize{
0%{
opacity:0;
transform:scale(1.06);
filter:brightness(.35) saturate(.5) contrast(.85) blur(20px);
}
35%{
opacity:.55;
filter:brightness(.5) saturate(.7) contrast(.95) blur(10px);
}
72%{
opacity:.95;
filter:brightness(.6) saturate(.82) contrast(1.02) blur(2px);
}
100%{
opacity:1;
transform:scale(1.02);
filter:brightness(.62) saturate(.85) contrast(1.05) hue-rotate(-3deg) blur(0);
}
}
/* Subtle continuous breathing — very slow scale pulse */
@keyframes aiBreath{
from{transform:scale(1.02)}
to {transform:scale(1.045)}
}
/* ----- 2. Scan pulse — soft glow that appears periodically ----- */
.page-hero--bg .page-hero__bg-scan{
position:absolute;inset:0;
z-index:0;pointer-events:none;
background:radial-gradient(70% 50% at 50% 50%,
rgba(217,201,168,.20) 0%,
rgba(217,201,168,.08) 35%,
transparent 70%);
mix-blend-mode:screen;
opacity:0;
animation:aiPulseGlow 9s ease-in-out 2.4s infinite;
}
@keyframes aiPulseGlow{
0%,100% {opacity:0}
35% {opacity:.55}
65% {opacity:.55}
}
@media (max-width:760px){
.page-hero--bg .page-hero__bg-scan{display:none}
}
@media (prefers-reduced-motion:reduce){
.page-hero--bg .page-hero__bg-img{
animation:none;
opacity:1;transform:none;
filter:brightness(.62) saturate(.85) contrast(1.05);
}
.page-hero--bg .page-hero__bg-scan{display:none}
}
/* ============================================================
Utilities
============================================================ */
.muted{color:var(--text-dim)}
.center{text-align:center}
.maxw-prose{max-width:64ch}
.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3rem}
.stack>*+*{margin-top:1.1em}
.tag{
display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
text-transform:uppercase;padding:5px 12px;border:1px solid var(--hair);
border-radius:999px;color:var(--text-dim);white-space:nowrap;
word-break:normal;
}
.paper .tag{border-color:var(--paper-hair);color:var(--ink-paper-dim)}
.tag--warm{border-color:var(--warm);color:var(--warm)}
/* big index number watermark */
.bignum{
font-family:var(--serif);font-weight:700;line-height:1;color:var(--warm);
opacity:.16;font-size:clamp(3.6rem,10vw,9rem);
}
/* ============================================================
HOME-page modules
============================================================ */
.prob{position:relative;padding:clamp(22px,2.3vw,32px);
border:1px solid var(--hair);border-radius:var(--radius);
background:rgba(255,255,255,.045);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.prob:hover{border-color:var(--hair-strong);background:rgba(255,255,255,.075);transform:translateY(-3px)}
.prob__n{
font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
color:var(--warm);display:block;margin-bottom:1em;
}
.prob p{font-size:1.02rem;font-weight:400;line-height:1.85;color:var(--text-dim)}
.prob b{color:var(--text);font-weight:500}
@media (min-width:901px){
.grid-3 .prob:nth-child(-n+3){border-top:1px solid var(--hair)}
}
.solution-lead{
margin-top:clamp(36px,5vw,72px);
padding-top:clamp(32px,4vw,56px);
border-top:1px solid var(--hair-strong);
}
.solution-lead p{
font-family:var(--serif);
font-size:clamp(1.25rem,2.6vw,2.1rem);
font-weight:500;line-height:1.65;max-width:46ch;
}
.solution-lead em{font-style:normal;color:var(--warm)}
.whyband{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr}
@media (min-width:880px){.whyband{grid-template-columns:.9fr 1.1fr;align-items:start}}
.whyband__cta{grid-column:1/-1}
.whylist{counter-reset:w}
.whylist li{
display:flex;gap:1.2em;align-items:baseline;
padding:20px 0;border-top:1px solid var(--hair);
font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.5rem);
font-weight:500;line-height:1.55;
}
.whylist li:last-child{border-bottom:1px solid var(--hair)}
.whylist__n{
font-family:var(--mono);font-size:.74rem;font-weight:500;
color:var(--warm);letter-spacing:.1em;flex:none;padding-top:.4em;
}
.case-card{
display:flex;flex-direction:column;gap:1em;
padding:clamp(24px,2.6vw,38px);
border:1px solid var(--paper-hair);border-radius:var(--radius);
transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.case-card:hover{border-color:rgba(21,32,26,.3);transform:translateY(-4px)}
.case-card h3{margin-bottom:.2em}
.case-card__row{display:grid;grid-template-columns:auto 1fr;gap:.8em 1em;align-items:baseline}
.case-card__row span{
font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
color:var(--green-600);border:1px solid var(--paper-hair);
padding:3px 9px;border-radius:999px;white-space:nowrap;justify-self:start;
}
.case-card__row p{font-size:.92rem;color:var(--ink-paper-dim);font-weight:400;line-height:1.8}
.case-card .tlink{margin-top:.4em}
.newsgrid{
display:grid;gap:clamp(14px,1.4vw,22px);grid-template-columns:repeat(4,1fr);
}
@media (max-width:980px){.newsgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.newsgrid{grid-template-columns:1fr}}
.news-item{
display:flex;flex-direction:column;gap:.7em;
padding:clamp(20px,1.8vw,28px);min-height:176px;
border:1px solid var(--hair);border-radius:var(--radius);
background:rgba(255,255,255,.035);
transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.news-item:hover{background:rgba(255,255,255,.07);border-color:var(--hair-strong);transform:translateY(-4px)}
.news-item__cat{
font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--warm);word-break:normal;
}
.news-item h3{font-size:1.04rem;font-weight:500;line-height:1.55;transition:color .3s}
.news-item:hover h3{color:var(--warm)}
.news-item time{font-size:.74rem;color:var(--text-faint);letter-spacing:.06em;margin-top:auto}
.news-item--seminar{
grid-column:1/-1;flex-direction:row;align-items:center;
justify-content:space-between;gap:1.2em;flex-wrap:wrap;min-height:0;
}
.news-item--seminar time{margin-top:0}
@media (max-width:560px){
.news-item--seminar{flex-direction:column;align-items:flex-start;gap:.8em}
}
.cta-band{
background:linear-gradient(160deg,var(--green-700),var(--green-800));
padding-block:clamp(64px,9vw,130px);
}
.cta-band__inner{
display:grid;gap:clamp(32px,4vw,60px);
grid-template-columns:1fr;align-items:end;
}
@media (min-width:840px){.cta-band__inner{grid-template-columns:1.4fr .8fr}}
.cta-band__btns{display:flex;flex-direction:column;gap:14px;align-items:stretch;width:100%;max-width:340px}
@media (min-width:840px){
.cta-band__btns{align-items:flex-end;max-width:none}
}
.cta-band__btns .btn{width:100%}
@media (min-width:840px){.cta-band__btns .btn{width:auto}}
/* ============================================================
STRENGTHS page
============================================================ */
.str-list{display:flex;flex-direction:column}
.str{
display:grid;grid-template-columns:minmax(0,1fr);
gap:clamp(18px,3vw,48px);
padding:clamp(36px,5vw,72px) 0;
}
.str-list > .str:first-child{padding-top:0}
.str-list > .str:last-child{padding-bottom:0}
@media (max-width:760px){.str{padding:clamp(24px,4.5vw,40px) 0}}
@media (min-width:840px){
.str{grid-template-columns:.42fr .58fr;align-items:start}
}
.str__lead{position:relative;display:block}
.str__lead .bignum{opacity:.22}
.str__body h2{margin-bottom:.65em;line-height:1.44;font-size:clamp(1.16rem,1.72vw,1.48rem);letter-spacing:-.012em}
.str__body .lead{max-width:54ch}
/* ============================================================
BUSINESS page
============================================================ */
.svc-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:2.2em}
.svc-nav a{
font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
padding:9px 16px;border:1px solid var(--hair);border-radius:999px;
color:var(--text-dim);transition:all .35s var(--ease);
word-break:normal;
}
.svc-nav a:hover{border-color:var(--warm);color:var(--warm)}
.svc{scroll-margin-top:90px}
.svc__top{
display:grid;grid-template-columns:minmax(0,1fr);gap:1.4em;
margin-bottom:clamp(36px,5vw,72px);
}
@media (min-width:860px){
.svc__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:clamp(40px,6vw,90px)}
}
.svc__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px)}
@media (min-width:900px){.svc__cols{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.svc__h{
font-family:var(--mono);font-size:.72rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--warm);
margin-bottom:1.6em;padding-bottom:1em;border-bottom:1px solid var(--hair);
word-break:normal;
}
.paper .svc__h{color:var(--green-600);border-color:var(--paper-hair)}
.deflist{counter-reset:d}
.deflist li{
display:grid;grid-template-columns:1fr;gap:.4em;
padding:18px 0;border-bottom:1px solid var(--hair);
}
@media (min-width:620px){.deflist li{grid-template-columns:.4fr .6fr;gap:1.4em}}
.paper .deflist li{border-color:var(--paper-hair)}
.deflist b{font-family:var(--serif);font-size:1.1rem;font-weight:600}
.deflist span{font-size:.94rem;color:var(--text-dim);font-weight:400;line-height:1.85}
.paper .deflist span{color:var(--ink-paper-dim)}
.taglist{display:flex;flex-wrap:wrap;gap:8px}
.usecase li{padding:14px 0;border-bottom:1px solid var(--hair);font-size:.94rem;color:var(--text-dim);font-weight:400;line-height:1.85}
.usecase b{display:block;font-family:var(--serif);color:var(--text);font-size:1.02rem;font-weight:600;margin-bottom:.25em}
.paper .usecase li{border-color:var(--paper-hair);color:var(--ink-paper-dim)}
.paper .usecase b{color:var(--ink-paper)}
/* ============================================================
CASES page
============================================================ */
.kase{
display:grid;grid-template-columns:1fr;
gap:clamp(20px,3vw,48px);
padding:clamp(40px,5.5vw,80px) 0;
border-top:1px solid var(--hair);
scroll-margin-top:90px;
}
.kase:last-of-type{border-bottom:1px solid var(--hair)}
@media (min-width:900px){.kase{grid-template-columns:.3fr .7fr;align-items:start}}
.kase__rail{display:flex;align-items:center;gap:1em;flex-wrap:wrap}
.kase__rail .bignum{opacity:.22}
.kase__title{line-height:1.42;margin-bottom:clamp(24px,3vw,44px)}
.kase__blocks{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair)}
.kase__b{
background:var(--green-950);padding:clamp(20px,2.4vw,30px);
display:grid;grid-template-columns:1fr;gap:.9em;
}
@media (min-width:640px){
.kase__b{grid-template-columns:auto 1fr;gap:1.5em;align-items:baseline}
}
.kase__lbl{
font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
color:var(--text-dim);border:1px solid var(--hair-strong);
padding:5px 13px;border-radius:999px;justify-self:start;white-space:nowrap;
}
.kase__b--issue .kase__lbl{color:var(--warm);border-color:var(--warm)}
.kase__b--result .kase__lbl{color:var(--green-300);border-color:var(--green-600)}
.kase__b p{font-size:.98rem;color:var(--text-dim);font-weight:400;line-height:1.9}
.kase__b--result p{color:var(--text)}
.cases-note{margin-top:clamp(32px,4vw,56px);font-size:.84rem;color:var(--text-faint);font-weight:400}
.paper .cases-note{color:var(--ink-paper-dim)}
/* ============================================================
NEWS page
============================================================ */
.cat-list{display:flex;flex-direction:column}
.cat{
display:grid;grid-template-columns:auto 1fr;
gap:1.3em;padding:24px 0;
border-top:1px solid var(--hair);align-items:baseline;
}
.cat:last-child{border-bottom:1px solid var(--hair)}
.cat__n{font-family:var(--mono);font-size:.76rem;color:var(--warm);letter-spacing:.12em;flex:none}
.cat>div{display:grid;grid-template-columns:14em 1fr;gap:clamp(1.2em,2.4vw,3em);align-items:baseline}
.cat h2{margin-bottom:0}
.cat p{font-size:.96rem;color:var(--text-dim);font-weight:400;line-height:1.85;max-width:60ch}
@media (max-width:720px){
.cat>div{grid-template-columns:1fr;gap:.5em}
.cat h2{margin-bottom:.2em}
}
.feat{
display:grid;grid-template-columns:1fr;gap:0;
border:1px solid var(--paper-hair);border-radius:var(--radius);overflow:hidden;
margin-bottom:clamp(24px,3vw,40px);transition:border-color .5s;
}
.feat:hover{border-color:rgba(21,32,26,.3)}
@media (min-width:780px){.feat{grid-template-columns:1.05fr 1fr}}
.feat__media{
position:relative;min-height:280px;
background:linear-gradient(135deg,var(--green-800),var(--green-600));
display:flex;align-items:center;justify-content:center;
}
.ph-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:rgba(255,255,255,.5)}
.feat__body{padding:clamp(26px,3vw,48px);display:flex;flex-direction:column;gap:1em}
.feat__body h3{font-size:clamp(1.3rem,2.4vw,1.95rem);font-weight:600;line-height:1.5}
.feat__body p{font-size:.98rem;color:var(--ink-paper-dim);font-weight:400;line-height:1.9}
.feat__body time{font-size:.74rem;color:var(--ink-paper-dim);letter-spacing:.06em;margin-top:auto}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
@media (max-width:880px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.art-grid{grid-template-columns:1fr}}
.art{display:flex;flex-direction:column;gap:.85em}
.art__media{
aspect-ratio:16/9;
background:linear-gradient(135deg,var(--green-800),var(--green-700));
border-radius:var(--radius);
transition:transform .5s var(--ease);
}
.art:hover .art__media{transform:translateY(-4px)}
.art h3{font-size:1.1rem;font-weight:700;line-height:1.6;transition:color .3s}
.art:hover h3{color:var(--green-600)}
.art time{font-size:.74rem;color:var(--ink-paper-dim);letter-spacing:.06em}
/* ============================================================
COMPANY page
============================================================ */
.mission-sec{text-align:center}
.mission{
font-family:var(--serif);font-weight:500;
font-size:clamp(1.65rem,4.2vw,3.4rem);
line-height:1.55;position:relative;max-width:24ch;margin-inline:auto;
letter-spacing:.01em;
}
.mission em{font-style:normal;color:var(--warm)}
.mission__q{
font-size:clamp(3.6rem,8vw,7rem);color:var(--warm);opacity:.4;
display:block;line-height:.6;margin-bottom:.1em;font-family:var(--serif);
}
.msg{display:grid;grid-template-columns:1fr;gap:clamp(30px,3.6vw,54px) clamp(32px,5vw,72px)}
.msg__eyebrow{margin-bottom:.4em}
@media (min-width:860px){
.msg{grid-template-columns:.42fr .58fr;align-items:start}
/* row1: Message label (left only) · row2: portrait | heading+body
→ image top aligns with the 代表メッセージ heading top */
.msg__eyebrow{grid-column:1;grid-row:1;margin:0}
.msg__aside{grid-column:1;grid-row:2}
.msg__body{grid-column:2;grid-row:2}
.msg__body h2{margin-top:-.15em}
}
.portrait{
aspect-ratio:4/5;
background:linear-gradient(160deg,var(--green-700),var(--green-600));
border-radius:var(--radius);
display:flex;align-items:center;justify-content:center;
}
.portrait .ph-label{color:rgba(255,255,255,.55)}
.msg__name{margin-top:1.2em;display:flex;flex-direction:column;gap:.2em}
.msg__name span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--ink-paper-dim)}
.msg__name b{font-family:var(--serif);font-size:1.22rem;font-weight:600}
.msg__body h2{margin-bottom:.9em}
.msg__body p{
font-size:1.04rem;line-height:2;
color:var(--ink-paper-dim);font-weight:400;
margin-bottom:1.3em;max-width:54ch;
}
.msg__body b{color:var(--ink-paper);font-weight:500}
.info{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px)}
@media (min-width:860px){.info{grid-template-columns:.3fr .7fr;align-items:start}}
.info__table{grid-column:auto}
.info__row{
display:grid;grid-template-columns:1fr;gap:.3em;
padding:20px 0;border-bottom:1px solid var(--hair);
}
.info__row:first-child{border-top:1px solid var(--hair)}
@media (min-width:560px){
.info__row{grid-template-columns:9em 1fr;gap:1.4em;align-items:baseline}
}
.info__row dt{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--warm)}
.info__row dd{font-size:1rem;color:var(--text);font-weight:400}
.info__row dd.ph{color:var(--text-faint);font-style:italic}
/* ============================================================
CAREERS page
============================================================ */
.persona{
display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
background:var(--hair);border:1px solid var(--hair);
}
@media (max-width:680px){.persona{grid-template-columns:1fr}}
.persona li{
background:var(--green-950);
padding:clamp(26px,3vw,42px);
display:flex;gap:1.2em;align-items:flex-start;
}
.persona__n{
font-family:var(--mono);font-size:.78rem;color:var(--warm);
letter-spacing:.1em;padding-top:.4em;flex:none;
}
.persona p{font-size:1.02rem;color:var(--text-dim);font-weight:400;line-height:1.9}
.persona b{color:var(--text);font-weight:500}
.jobs{display:flex;flex-direction:column}
.job{
display:flex;align-items:center;justify-content:space-between;
gap:1.4em;flex-wrap:wrap;padding:28px 0;
border-top:1px solid var(--paper-hair);
}
.job:last-child{border-bottom:1px solid var(--paper-hair)}
.job__main{display:flex;gap:1.4em;align-items:baseline;flex:1 1 60%;min-width:0}
.job__no{font-family:var(--mono);font-size:.78rem;color:var(--green-600);letter-spacing:.1em;flex:none}
.job h3{font-size:clamp(1.18rem,1.95vw,1.55rem);font-weight:600;margin-bottom:.35em}
.job p{font-size:.94rem;color:var(--ink-paper-dim);font-weight:400;line-height:1.85;max-width:56ch}
@media (max-width:560px){
.job{align-items:flex-start}
.job__main{flex:1 1 100%}
}
/* ============================================================
CONTACT page — hero + 窓口案内 share one full-width background
image (top_bg09) so the visual extends through both sections
until the form panel begins.
============================================================ */
.contact-top{
position:relative;
background:var(--green-950); /* base color while image loads */
overflow:hidden;
}
/* Full-bleed image layer covering both sections */
.contact-top__bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
}
.contact-top__bg-img{
position:absolute;inset:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
/* image set inline per page; fade only bottom edge into the form section */
-webkit-mask-image:linear-gradient(to bottom,
#000 0%, #000 70%, transparent 100%);
mask-image:linear-gradient(to bottom,
#000 0%, #000 70%, transparent 100%);
filter:brightness(.42) saturate(.85) contrast(1.05) hue-rotate(-3deg);
transform:scale(1.02);
animation:contactBgPan 26s ease-in-out infinite alternate;
}
@keyframes contactBgPan{
from{transform:scale(1.02) translate3d(0,0,0)}
to {transform:scale(1.06) translate3d(-1.4%, .4%, 0)}
}
/* Dark veil + brand tint for text legibility across the whole region */
.contact-top__veil{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg,
rgba(11,20,16,.55) 0%,
rgba(11,20,16,.32) 25%,
rgba(11,20,16,.40) 65%,
rgba(11,20,16,.78) 100%),
linear-gradient(180deg, rgba(15,28,22,.30), rgba(15,28,22,.30));
}
/* Sections inside the region: transparent so the bg shows through */
.contact-top > .page-hero,
.contact-top > .section{
position:relative;
z-index:1;
background:transparent !important;
}
@media (prefers-reduced-motion:reduce){
.contact-top__bg-img{animation:none;transform:none}
}
/* ============================================================
CONTACT — form layout (original split)
============================================================ */
.form-wrap{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px)}
@media (min-width:900px){.form-wrap{grid-template-columns:.36fr .64fr;align-items:start}}
.form-aside .lead{color:var(--ink-paper-dim)}
.req-note{margin-top:1.4em;font-size:.86rem;color:var(--ink-paper-dim)}
.req{color:var(--danger);font-style:normal}
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px)}
@media (max-width:600px){.field-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.55em;margin-bottom:clamp(14px,1.8vw,22px)}
.field--full{margin-top:0}
.field>span{font-size:.86rem;font-weight:500;color:var(--ink-paper);display:flex;align-items:center;gap:.6em}
.field i{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;padding:2px 7px;border-radius:3px}
.field i.req{color:var(--danger);background:rgba(192,86,62,.1)}
.field i.opt{color:var(--ink-paper-dim);background:rgba(21,32,26,.06)}
.field input,.field select,.field textarea{
font-family:var(--sans);font-size:1rem;color:var(--ink-paper);
background:var(--paper-2);border:1px solid var(--paper-hair);border-radius:var(--radius);
padding:13px 15px;width:100%;transition:border-color .3s,box-shadow .3s;line-height:1.6;
letter-spacing:.01em;
}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(43,106,81,.12);
}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,86,62,.12)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-paper-dim);opacity:.5}
.form-note{min-height:1.4em;color:var(--danger);font-size:.88rem;font-weight:500;margin:.4em 0 1em}
.form-submit{margin-top:.4em}
@media (min-width:480px){.form-submit{width:auto}}
.form-done{text-align:center;padding:clamp(36px,6vw,80px) 0;max-width:46ch;margin-inline:auto}
.form-done .lead{color:var(--ink-paper-dim)}
.form-done__mark{
display:inline-flex;align-items:center;justify-content:center;
width:60px;height:60px;border-radius:50%;
background:var(--green-600);color:var(--paper-2);
font-size:1.7rem;margin-bottom:1em;
}
.form-done h2{margin-bottom:.5em;font-size:clamp(1.45rem,2.8vw,2.2rem);white-space:nowrap}
@media (max-width:640px){.form-done h2{white-space:normal}}
/* ============================================================
Print
============================================================ */
@media print{
body{background:#fff;color:#000}
body::after,.hero__canvas,.page-hero__grid,.site-header,.mobile-menu,.cta-band,.site-footer{display:none!important}
.hero,.page-hero{background:#fff;color:#000;min-height:auto;padding:1rem 0}
*{color:#000!important;border-color:#999!important}
}
/* ============================================================
BUSINESS page — service cards, platform feature,
group engines & value flow (in-theme, added 2026)
============================================================ */
/* Positioning triad reuses .grid/.card; small helper */
.svc__lead{max-width:60ch}
/* Sub-service cards inside each business area */
.svc-cards{margin-top:clamp(30px,3.6vw,52px)}
.svc-card{position:relative;border:1px solid var(--hair);border-radius:var(--radius);
padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);
transition:border-color .5s var(--ease),transform .5s var(--ease)}
.svc-card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--warm);transition:width .6s var(--ease)}
.svc-card:hover{border-color:var(--hair-strong);transform:translateY(-4px)}
.svc-card:hover::before{width:100%}
.svc-card__no{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--warm);
padding-bottom:1.3em;margin-bottom:1.3em;border-bottom:1px solid var(--hair);display:block}
.svc-card h3{font-family:var(--serif);font-size:clamp(1.2rem,1.55vw,1.42rem);font-weight:700;line-height:1.45;margin-bottom:.6em}
@media (min-width:900px){.svc-card h3{white-space:nowrap}}
@media (max-width:899px){.svc-card h3{white-space:normal}}
.svc-card p{font-size:.92rem;color:var(--text-dim);font-weight:400;line-height:1.9}
.paper .svc-card{border-color:var(--paper-hair);background:linear-gradient(180deg,rgba(21,32,26,.015),transparent)}
.paper .svc-card:hover{border-color:rgba(21,32,26,.28)}
.paper .svc-card p{color:var(--ink-paper-dim)}
.paper .svc-card__no{color:var(--green-600);border-color:var(--paper-hair)}
/* Singulaforce platform feature */
.feat-head{max-width:none}
.feat-title{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,7vw,5rem);
line-height:1.02;letter-spacing:.005em;margin:.4em 0 .55em}
.feat-lead{max-width:60ch}
.feat-tags{margin-top:1.9em}
.feat-list{display:grid;gap:clamp(20px,2vw,30px);grid-template-columns:1fr;margin-top:clamp(40px,4.6vw,68px)}
@media(min-width:820px){.feat-list{grid-template-columns:repeat(3,1fr)}}
.pfeat{position:relative;display:block;border:0;border-top:1px solid var(--hair-strong);border-radius:0;margin:0;padding-top:1.5em;overflow:visible}
.pfeat::before{content:"";position:absolute;left:0;top:-1px;width:38px;height:2px;background:var(--warm)}
.pfeat b{display:block;font-family:var(--serif);font-size:1.14rem;font-weight:700;margin-bottom:.55em;color:var(--text)}
.pfeat p{font-size:.9rem;color:var(--text-dim);font-weight:400;line-height:1.85}
.pfeat__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--warm);display:block;margin-bottom:.9em}
.paper .pfeat{border-color:var(--paper-hair)}
.paper .pfeat b{color:var(--ink-paper)}
.paper .pfeat p{color:var(--ink-paper-dim)}
.paper .pfeat__k{color:var(--green-600)}
/* Group engines */
.engine-grid{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr;margin-top:clamp(34px,4vw,56px)}
@media(min-width:640px){.engine-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.engine-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.engine{position:relative;border:1px solid var(--hair);border-radius:var(--radius);
padding:clamp(26px,2.4vw,34px) clamp(24px,2.4vw,32px);display:flex;flex-direction:column;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.014),transparent);
transition:border-color .5s var(--ease),transform .5s var(--ease)}
.engine::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--warm);transition:width .6s var(--ease)}
.engine:hover{border-color:var(--hair-strong);transform:translateY(-4px)}
.engine:hover::before{width:100%}
.engine--lead{border-color:var(--warm);background:linear-gradient(180deg,var(--warm-dim),transparent)}
.engine--lead::before{width:100%}
.engine__eng{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;color:var(--warm);
text-transform:uppercase;margin-bottom:1.3em;line-height:1.5;min-height:2.2em}
.engine__name{font-family:var(--serif);font-size:1.1rem;font-weight:600;line-height:1.5;margin-bottom:.5em}
.engine__co{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--text-faint);
padding-bottom:1.3em;margin-bottom:1.3em;border-bottom:1px solid var(--hair)}
.engine__role{font-size:.88rem;color:var(--text-dim);font-weight:400;line-height:1.85;margin-bottom:1.5em}
.engine__pts{margin-top:auto;padding-top:.2em;display:flex;flex-direction:column;gap:.6em}
.engine__pts li{font-size:.82rem;color:var(--text-dim);font-weight:400;line-height:1.65;padding-left:1.1em;position:relative}
.engine__pts li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--green-400)}
.engine__badge{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--warm);border:1px solid var(--warm);border-radius:100px;padding:.35em .85em;background:var(--green-950)}
/* Value flow: 構想→資本→実装→グローバル展開→未来 */
.flow-wrap{margin-top:clamp(52px,6vw,88px);border-top:1px solid var(--hair);padding-top:clamp(30px,3.4vw,46px)}
.flow-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--text-faint);display:flex;align-items:center;gap:.9em;margin-bottom:clamp(20px,2.4vw,32px)}
.flow-label::before{content:"";width:28px;height:1px;background:var(--warm)}
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(8px,1.1vw,14px)}
.flow__step{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.3em;flex:1 1 0;min-width:130px;
border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(18px,1.9vw,26px);
transition:border-color .4s var(--ease),background .4s var(--ease)}
.flow__step:hover{border-color:var(--hair-strong);background:rgba(255,255,255,.02)}
.flow__step b{font-family:var(--serif);font-size:1.06rem;font-weight:600}
.flow__step span{font-size:.75rem;color:var(--text-faint);font-weight:400}
.flow__arw{align-self:center;color:var(--warm);font-family:var(--mono);font-size:1.05rem;opacity:.7}
.flow__goal{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.3em;flex:1.35 1 0;min-width:160px;
border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(18px,1.9vw,26px);
transition:border-color .4s var(--ease),background .4s var(--ease)}
.flow__goal:hover{border-color:var(--hair-strong);background:rgba(255,255,255,.02)}
.flow__goal b{font-family:var(--serif);font-size:1.06rem;font-weight:600}
.flow__goal span{font-size:.75rem;color:var(--text-faint);font-weight:400}
@media(max-width:760px){.flow__arw{display:none}.flow__step,.flow__goal{flex-basis:100%}}
.group-close{margin-top:clamp(40px,5vw,68px);font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.5rem);
font-weight:500;line-height:1.65;max-width:54ch;color:var(--text)}
/* ============================================================
Gray image placeholders — replace with real images
(clearly marked drop-zones; works on light & dark sections)
============================================================ */
.imgph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
width:100%;border-radius:var(--radius);overflow:hidden;color:#43433e;
background-color:#c7c7c1;
background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.045) 0 14px,rgba(0,0,0,.085) 14px 28px);
border:1px dashed rgba(0,0,0,.34)}
.imgph--21x9{aspect-ratio:21/9}
.imgph--16x9{aspect-ratio:16/9}
.imgph--3x2{aspect-ratio:3/2}
.imgph--4x3{aspect-ratio:4/3}
.imgph--1x1{aspect-ratio:1/1}
.imgph--4x5{aspect-ratio:4/5}
.imgph__in{display:flex;flex-direction:column;align-items:center;gap:.5em;padding:1.3em 1.5em;max-width:90%}
.imgph__ico{width:32px;height:32px;border:1.5px solid rgba(0,0,0,.42);border-radius:5px;position:relative;opacity:.65;margin-bottom:.15em}
.imgph__ico::before{content:"";position:absolute;left:6px;top:6px;width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.42)}
.imgph__ico::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:12px;background:rgba(0,0,0,.42);clip-path:polygon(0 100%,34% 40%,55% 68%,78% 28%,100% 62%,100% 100%)}
.imgph__t{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#33332f;font-weight:500}
.imgph__d{font-family:var(--mono);font-size:.63rem;letter-spacing:.04em;color:#5a5a53;line-height:1.65}
/* strengths: number + tag overlaid on top of the image */
.str__img{margin:0;border:0;outline:0;box-shadow:none}
.str__img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(158deg,rgba(11,20,16,.62),rgba(11,20,16,.12) 42%,transparent 68%)}
.str__badge{position:absolute;top:0;left:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
gap:.55em;padding:clamp(12px,1.6vw,22px) clamp(14px,1.7vw,24px)}
/* 태그를 큰 숫자 우측 상단에 나란히 (전 항목 공통) */
.str__badge{flex-direction:row;align-items:flex-start;gap:clamp(6px,.7vw,11px)}
.str__badge .tag{margin-top:clamp(7px,.9vw,14px);flex:0 0 auto;white-space:nowrap}
@media (max-width:520px){
.str__badge{gap:6px}
.str__badge .tag{margin-top:5px;font-size:.6rem;padding:3px 8px}
}
.str__badge .bignum{opacity:1;line-height:.82;font-size:clamp(3.2rem,7vw,6.6rem);
text-shadow:0 2px 24px rgba(0,0,0,.55)}
.str__badge .tag{background:rgba(11,20,16,.5);border-color:rgba(217,201,168,.62);color:var(--warm);backdrop-filter:blur(3px)}
/* spacing helper for standalone visual bands */
.visual-band{margin:0}
/* ============================================================
Subtle section-background zones (faint watermark image area)
— marks sections where an "うっすら" background image can go
============================================================ */
.secbg{position:relative;overflow:hidden}
.secbg > .wrap{position:relative;z-index:2}
.secbg__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
background:repeating-linear-gradient(45deg,rgba(140,140,140,.05) 0 24px,rgba(140,140,140,.09) 24px 48px);
-webkit-mask-image:radial-gradient(130% 120% at 82% 8%,#000,transparent 76%);
mask-image:radial-gradient(130% 120% at 82% 8%,#000,transparent 76%)}
.paper .secbg__bg{background:repeating-linear-gradient(45deg,rgba(21,32,26,.035) 0 24px,rgba(21,32,26,.06) 24px 48px)}
.secbg__tag{position:absolute;top:14px;right:16px;z-index:1;pointer-events:none;
font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-faint);border:1px dashed var(--hair-strong);border-radius:100px;padding:.4em .95em}
.paper .secbg__tag{color:var(--ink-paper-dim);border-color:var(--paper-hair)}
@media(max-width:640px){.secbg__tag{display:none}}
/* ============================================================
Line icons (thin stroke, currentColor; warm on dark / green on paper)
============================================================ */
.ic{display:inline-flex;line-height:0;color:var(--warm)}
.ic svg{display:block;width:26px;height:26px}
.paper .ic{color:var(--green-600)}
/* placements */
.card .ic{margin-bottom:1.3em}
.svc-card .ic{margin-bottom:1.15em}
.area__ic{margin-bottom:1.1em}
.pfeat .ic{margin-bottom:.95em}
.flow__ic{display:flex;justify-content:center;color:var(--warm);margin-bottom:.6em}
.flow__ic svg{width:22px;height:22px}
.flow__ic img{width:clamp(42px,4.4vw,54px);height:auto;display:block}
/* challenge-item icons */
.prob__ic{margin-bottom:.9em;color:var(--warm)}
.prob__ic svg{width:24px;height:24px}
/* ============================================================
Sensory interactions (motion; JS gates reduced-motion & touch)
============================================================ */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;pointer-events:none;
background:linear-gradient(90deg,var(--green-500),var(--warm))}
/* refined reveal: soft focus-in */
@media (prefers-reduced-motion:no-preference){
[data-reveal]{filter:blur(5px);
transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
[data-reveal].in{filter:blur(0)}
}
/* magnetic targets get a smooth transform return */
.btn,.nav__cta{transition:transform .35s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
/* faster transform for card tilt/lift */
.card,.svc-card,.engine{transition:border-color .5s var(--ease),background .5s var(--ease),transform .25s var(--ease)}
/* cursor spotlight sheen */
.card::after,.svc-card::after,.engine::after{content:"";position:absolute;inset:0;border-radius:inherit;
pointer-events:none;opacity:0;z-index:2;transition:opacity .5s var(--ease);
background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(217,201,168,.14),transparent 60%)}
.paper .card::after,.paper .svc-card::after{
background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(43,106,81,.12),transparent 60%)}
.card:hover::after,.svc-card:hover::after,.engine:hover::after{opacity:1}
/* icon micro-motion on card hover */
.ic svg{transition:transform .5s var(--ease)}
.card:hover .ic svg,.svc-card:hover .ic svg,.pfeat:hover .ic svg{transform:translateY(-2px) scale(1.08)}
/* filled image placeholders (real image applied) */
.imgph--filled{border-color:transparent;background-color:var(--green-950);
background-size:cover;background-position:center;background-repeat:no-repeat}
.imgph--filled .imgph__in{display:none}
/* real blurred photo section backgrounds (replaces placeholder texture) */
.secbg__bg--photo{background-size:cover;background-position:center;background-repeat:no-repeat;
filter:blur(16px) saturate(.8);opacity:.05;transform:scale(1.08)}
.paper .secbg__bg--photo{opacity:.04;filter:blur(16px) saturate(.8)}
.secbg__tag{display:none}
/* challenge illustration icons (custom PNG) */
.prob__img{display:block;width:clamp(52px,6vw,66px);height:auto;margin-bottom:.85em;
transition:transform .5s var(--ease)}
.prob:hover .prob__img{transform:translateY(-3px) scale(1.05)}
/* service cards with photo background (paper overlay for legibility) */
.card--simg{background-size:auto 120% !important;background-position:center !important;overflow:hidden}
.paper .card--simg{border-color:rgba(21,32,26,.14)}
.card--simg::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(90deg,rgba(11,20,16,.80) 0%,rgba(11,20,16,.56) 42%,rgba(11,20,16,.28) 72%,rgba(11,20,16,.08) 100%)}
.card--simg > .ic,.card--simg > .card__no,.card--simg > h3,.card--simg > p,.card--simg > .tlink{position:relative;z-index:1}
/* dark box: light text */
.paper .card--simg .ic{color:var(--warm)}
.paper .card--simg .card__no{color:var(--warm)}
.paper .card--simg h3{color:var(--text)}
.paper .card--simg p{color:var(--text-dim)}
.paper .card--simg .tlink{color:var(--warm)}
.paper .card--simg:hover{border-color:rgba(21,32,26,.30)}
.paper .card--simg .card__no,.paper .card--simg h3,.paper .card--simg p{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.paper .card--simg::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(217,201,168,.16),transparent 60%)}
/* subtle background video in bottom CTA band */
.cta-band{position:relative;overflow:hidden}
.cta-band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
z-index:0;opacity:.55;pointer-events:none;filter:saturate(.95) brightness(1.02)}
.cta-band__inner{position:relative;z-index:1}
/* News section — subtly distinct background panel */
.news-sec{
background:
radial-gradient(90% 120% at 50% 0%,rgba(86,180,136,.06),transparent 60%),
linear-gradient(180deg,var(--green-850),var(--green-800) 55%,var(--green-850));
}
/* service dark cards: hover = background color change only (no move) */
.card--simg::before{transition:background .45s var(--ease)}
.paper .card--simg:hover{transform:none}
.paper .card--simg:hover .ic svg{transform:none}
.paper .card--simg:hover::before{
background:linear-gradient(90deg,rgba(11,20,16,.80) 0%,rgba(11,20,16,.56) 42%,rgba(11,20,16,.28) 72%,rgba(11,20,16,.08) 100%)}
/* Services section — slightly darker paper background */
.svc-sec{background:#F3F3EF}
/* Singulaforce callout card — darker bg + stronger border */
.paper .card--sf{background:rgba(21,32,26,.055);border-color:rgba(21,32,26,.34)}
.paper .card--sf:hover{border-color:rgba(21,32,26,.5)}
/* ============================================================
Business area sections — sticky card-stack scroll effect
============================================================ */
@media (min-width:761px){
.svc-stack{
position:sticky;top:0;min-height:100vh;
display:flex;flex-direction:column;justify-content:center;
overflow:hidden;
}
.svc-stack:not(.paper){
background:
radial-gradient(120% 90% at 82% 8%,rgba(86,180,136,.10),transparent 55%),
radial-gradient(90% 70% at 8% 100%,rgba(43,106,81,.16),transparent 60%),
var(--green-950);
}
.svc-stack.paper{
background:
radial-gradient(120% 90% at 85% 6%,rgba(43,106,81,.09),transparent 55%),
radial-gradient(80% 70% at 6% 100%,rgba(11,20,16,.05),transparent 60%),
var(--paper);
}
}
/* subtle tech-grid texture behind area content (01-04) */
@media (max-width:760px){.svc-stack{position:relative}}
.svc-stack > .wrap{position:relative;z-index:1}
.svc-stack::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(234,235,227,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(234,235,227,.05) 1px,transparent 1px);
background-size:clamp(56px,6vw,92px) clamp(56px,6vw,92px);
-webkit-mask-image:radial-gradient(115% 100% at 84% 6%,#000,transparent 72%);
mask-image:radial-gradient(115% 100% at 84% 6%,#000,transparent 72%);
}
.svc-stack.paper::before{
background-image:
linear-gradient(rgba(21,32,26,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(21,32,26,.06) 1px,transparent 1px);
}
/* ============================================================
Typography polish — avoid single-char / period orphans on
the last line, and improve body readability (site-wide)
============================================================ */
p, li, .lead, figcaption, blockquote,
.card p, .svc-card p, .pfeat p, .engine__role, .deflist span,
.cat p, .prob p, .news-item h3, .feat p, .h-card, .h-sec{
text-wrap:pretty;
}
/* News section background — more visible than default secbg */
.news-sec .secbg__bg--photo{opacity:.10;filter:blur(12px) saturate(.9)}
/* strengths: match image height to text, fade right edge into bg */
@media (min-width:840px){
.str{align-items:stretch}
.str__lead{height:100%}
.str__img{aspect-ratio:auto;height:100%;min-height:260px;
-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%);
mask-image:linear-gradient(90deg,#000 55%,transparent 100%)}
}
/* per-area background differentiation: 01/03 stronger, 02/04 dot pattern */
#research::before, #web3::before{
background-image:
linear-gradient(rgba(21,32,26,.09) 1px,transparent 1px),
linear-gradient(90deg,rgba(21,32,26,.09) 1px,transparent 1px);
background-size:clamp(50px,5.4vw,84px) clamp(50px,5.4vw,84px);
-webkit-mask-image:radial-gradient(120% 100% at 84% 5%,#000,transparent 70%);
mask-image:radial-gradient(120% 100% at 84% 5%,#000,transparent 70%);
}
#aibx::before, #education::before{
background-image:radial-gradient(rgba(217,201,168,.12) 1.5px,transparent 1.5px);
background-size:clamp(26px,2.6vw,40px) clamp(26px,2.6vw,40px);
-webkit-mask-image:radial-gradient(125% 100% at 14% 8%,#000,transparent 66%);
mask-image:radial-gradient(125% 100% at 14% 8%,#000,transparent 66%);
}
@media (min-width:761px){
#research, #web3{
background:
radial-gradient(120% 95% at 85% 4%,rgba(43,106,81,.17),transparent 52%),
radial-gradient(95% 85% at 3% 100%,rgba(11,20,16,.10),transparent 56%),
var(--paper);
}
#aibx, #education{
background:
linear-gradient(135deg,rgba(27,204,189,.26) 0%,rgba(27,204,189,.11) 30%,transparent 58%),
radial-gradient(105% 85% at 12% 6%,rgba(86,180,136,.14),transparent 55%),
radial-gradient(80% 72% at 92% 96%,rgba(43,106,81,.17),transparent 60%),
var(--green-950);
}
}
/* Singulaforce (Platform) section — noticeably darker background */
#singulaforce{background:#EFEFEA}
#singulaforce.secbg .secbg__bg--photo{opacity:.06}
/* company: bottom note right-aligned */
.cases-note--right{text-align:right;margin-top:clamp(8px,1.2vw,14px)}
/* company info note — place under the table (right column) */
@media (min-width:860px){
.info .cases-note{grid-column:2;grid-row:2;justify-self:end}
}
/* company 会社情報 section — subtle background pattern */
.info-sec{position:relative;overflow:hidden}
.info-sec > .wrap{position:relative;z-index:1}
.info-sec::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(rgba(217,201,168,.11) 1.6px,transparent 1.6px),
radial-gradient(95% 80% at 84% 10%,rgba(86,180,136,.12),transparent 60%);
background-size:clamp(26px,2.4vw,40px) clamp(26px,2.4vw,40px), 100% 100%;
-webkit-mask-image:radial-gradient(125% 105% at 82% 8%,#000,transparent 85%);
mask-image:radial-gradient(125% 105% at 82% 8%,#000,transparent 85%);
}
/* careers: subtle background patterns (two distinct textures) */
.careers-pos,.careers-bene{position:relative;overflow:hidden}
.careers-pos > .wrap,.careers-bene > .wrap{position:relative;z-index:1}
/* Open Positions (paper) — faint grid lines + soft glow */
.careers-pos::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(21,32,26,.09) 1px,transparent 1px),
linear-gradient(90deg,rgba(21,32,26,.09) 1px,transparent 1px),
radial-gradient(90% 80% at 12% 8%,rgba(43,106,81,.11),transparent 58%);
background-size:clamp(50px,5.4vw,84px) clamp(50px,5.4vw,84px),clamp(50px,5.4vw,84px) clamp(50px,5.4vw,84px),100% 100%;
-webkit-mask-image:radial-gradient(125% 105% at 13% 7%,#000,transparent 84%);
mask-image:radial-gradient(125% 105% at 13% 7%,#000,transparent 84%);
}
/* Environment & Benefits (dark) — warm dot matrix + glow */
.careers-bene::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(rgba(217,201,168,.11) 1.6px,transparent 1.6px),
radial-gradient(95% 80% at 84% 10%,rgba(86,180,136,.12),transparent 60%);
background-size:clamp(26px,2.4vw,40px) clamp(26px,2.4vw,40px),100% 100%;
-webkit-mask-image:radial-gradient(125% 105% at 82% 8%,#000,transparent 85%);
mask-image:radial-gradient(125% 105% at 82% 8%,#000,transparent 85%);
}
.careers-bene::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(135deg,rgba(27,204,189,.26) 0%,rgba(27,204,189,.11) 30%,transparent 58%);
mix-blend-mode:screen;
}
/* CEO portrait photo + message creed lines */
.portrait--photo{background:var(--green-950) center/cover no-repeat}
.portrait--photo .ph-label{display:none}
.msg__creed{border-left:2px solid var(--warm);padding-left:1.1em;margin:1.6em 0}
.msg__creed b{color:var(--ink-paper);font-weight:600}
.msg__creed span{color:var(--ink-paper-dim);font-size:.86em}
/* news thumbnails filled with photos */
.feat__media--photo,.art__media--photo{background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important}
.feat__media--photo .ph-label{display:none}
/* (news-hero override removed — uses the shared full-bleed hero) */
/* index news — horizontal swipe row of thumbnail cards */
.news-swipe{
display:flex;gap:clamp(16px,1.8vw,26px);
overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
margin-top:clamp(18px,2.6vw,40px);padding-top:8px;padding-bottom:16px;
scrollbar-width:thin;scrollbar-color:var(--hair-strong) transparent;
}
.news-swipe .art{flex:0 0 clamp(240px,25vw,320px);scroll-snap-align:start}
.news-sec .art h3{color:var(--text)}
.news-sec .art time{color:var(--text-faint)}
.news-swipe::-webkit-scrollbar{height:6px}
.news-swipe::-webkit-scrollbar-thumb{background:var(--hair-strong);border-radius:999px}
.news-swipe::-webkit-scrollbar-track{background:transparent}
/* news header link → right-aligned inside the content area */
.news-sec .sec-head--split .lead{text-align:right;margin-left:auto}
@media (max-width:760px){.news-sec .sec-head--split .lead{text-align:left}}
/* news carousel nav buttons */
.news-carousel{position:relative;padding-top:58px}
.news-carousel .news-swipe{margin-top:0}
.news-nav{
position:absolute;top:0;z-index:3;
width:44px;height:44px;border-radius:999px;
border:1px solid var(--hair-strong);background:transparent;
color:var(--text);
display:flex;align-items:center;justify-content:center;cursor:pointer;
font-size:1.4rem;line-height:1;padding-bottom:2px;
transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),opacity .3s;
}
.news-nav:hover{background:var(--warm);color:#0B1410;border-color:transparent}
.news-nav--prev{right:54px}
.news-nav--next{right:0}
.news-nav[disabled]{opacity:.25;pointer-events:none}
/* edge opacity fade — shown only when more cards exist that way */
.news-swipe{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.news-swipe.at-start{
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 95%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 95%,transparent 100%);
}
.news-swipe.at-end{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 100%);
}
.news-swipe.at-start.at-end{-webkit-mask-image:none;mask-image:none}
@media (max-width:760px){.news-nav{display:none}
.news-swipe.at-start,.news-swipe.at-end,.news-swipe{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%)}}
/* contact page: hero + inquiry share one region → tighten the gap */
.contact-top .page-hero{min-height:auto;padding-bottom:clamp(20px,2.6vw,44px)}
.contact-top .section--tight{padding-top:clamp(6px,1.4vw,24px)}
/* remove the in-card cursor spotlight (moved to section backgrounds) */
.card::after,.svc-card::after,.engine::after,
.paper .card::after,.paper .svc-card::after,.paper .card--simg::after{display:none !important}
/* section background — warm highlight following the cursor (fills flat dark areas) */
.mglow{position:relative}
.mglow::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(clamp(200px,20vw,340px) circle at var(--gx,-400px) var(--gy,-400px),
rgba(217,201,168,.10),rgba(217,201,168,.03) 30%,transparent 62%);
opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:screen;
}
.mglow.on::before{opacity:1}
.mglow > .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.mglow::before{display:none}}
/* 02/04 sticky areas — cursor glow via ::after (keeps sticky + existing ::before pattern) */
#aibx::after,#education::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(clamp(200px,20vw,340px) circle at var(--gx,-400px) var(--gy,-400px),
rgba(217,201,168,.10),rgba(217,201,168,.03) 30%,transparent 62%);
opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:screen;
}
#aibx.on::after,#education.on::after{opacity:1}
@media (prefers-reduced-motion:reduce){#aibx::after,#education::after{display:none}}
/* diagonal teal sheen over main-color (dark green) backgrounds */
.secbg:not(.paper)::after,
.cta-band::after,
.page-hero::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(135deg,
rgba(27,204,189,.26) 0%,
rgba(27,204,189,.11) 30%,
transparent 58%);
mix-blend-mode:screen;
}
.cta-band__inner,.page-hero > .wrap{position:relative;z-index:2}
.contact-top .page-hero::after{display:none}
/* 求める人物像 (dark) — diagonal teal */
.careers-who{position:relative;overflow:hidden}
.careers-who > .wrap{position:relative;z-index:1}
.careers-who::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(135deg,rgba(27,204,189,.26) 0%,rgba(27,204,189,.11) 30%,transparent 58%);mix-blend-mode:screen;}
/* News & Column on HOME — light (paper) variant */
.news-sec.paper{
background:
radial-gradient(90% 120% at 50% 0%,rgba(43,106,81,.05),transparent 60%),
linear-gradient(180deg,var(--paper-2),var(--paper) 60%);
}
.news-sec.paper .art h3{color:var(--ink-paper)}
.news-sec.paper .art:hover h3{color:var(--green-600)}
.news-sec.paper .art time{color:var(--ink-paper-dim)}
.news-sec.paper .news-item__cat,.news-sec.paper .tag--warm{color:var(--green-600)}
.news-sec.paper .news-nav{border-color:var(--paper-hair);color:var(--ink-paper)}
.news-sec.paper .news-nav:hover{background:var(--green-600);color:#fff;border-color:transparent}
.news-sec.paper .eyebrow,.news-sec.paper .tlink{color:var(--green-600)}
/* desktop: shift hero video right so the centered "AI" appears toward the right */
@media (min-width:761px){
.hero{overflow:hidden}
.hero__video{transform:scale(1.34) translateX(10%);transform-origin:center center}
}
/* ===== icons removed → strengthen titles for structure & interest ===== */
/* card titles: larger + tighter */
.h-card{font-size:clamp(1.5rem,2.35vw,2.05rem);line-height:1.34;letter-spacing:-.005em}
.card h3,.card--simg h3,.svc-card h3{margin-bottom:.5em}
/* number / label gets a short accent rule where the icon used to anchor */
.card__no{font-size:.8rem;letter-spacing:.2em;margin-bottom:1em;display:flex;align-items:center;gap:.85em}
.card__no::before{content:"";width:30px;height:2px;background:currentColor;opacity:.9;flex:0 0 auto}
.card--simg .card__no::before{opacity:1}
/* SingulaForce feature blocks: bigger titles + accent */
.pfeat b{font-size:clamp(1.42rem,2.1vw,1.82rem);line-height:1.34;color:var(--warm)}
.pfeat{padding-top:1.15em}
/* flow diagram steps: bigger bold titles (icon removed) */
.flow__step b,.flow__goal b{font-size:clamp(1.18rem,1.75vw,1.5rem);line-height:1.3}
.flow__step,.flow__goal{padding-top:clamp(6px,1vw,12px)}
/* 課題提起 cards — beige mono number (smaller) + growing underline effect */
.prob__no{
display:inline-block;position:relative;font-family:var(--serif);
font-weight:600;font-style:normal;font-size:clamp(2rem,2.7vw,2.7rem);
line-height:1;letter-spacing:.02em;
background:linear-gradient(165deg,#F0E2C4 0%,var(--warm) 46%,var(--warm-deep) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
margin-bottom:.7em;padding-bottom:.22em;-webkit-text-stroke:0;
transform-origin:left bottom;
transition:transform .5s var(--ease),filter .5s var(--ease);
}
.prob__no::after{
content:"";position:absolute;left:0;bottom:0;height:2px;width:1.3em;
background:var(--warm);opacity:.45;
transition:width .5s var(--ease),opacity .5s var(--ease);
}
.prob:hover .prob__no{transform:translateY(-4px) scale(1.07);filter:drop-shadow(0 6px 20px rgba(217,201,168,.4))}
.prob:hover .prob__no::after{width:2.6em;opacity:1}
/* dark card serif titles → beige */
.card h3.h-card.serif{color:var(--warm)}
.paper .card h3.h-card.serif{color:var(--green-600)}
/* dark AIBX service-card titles → beige, slightly larger */
.svc-stack:not(.paper) .svc-card h3{color:var(--warm);font-size:clamp(1.34rem,1.85vw,1.62rem)}
/* #web3 (light) service cards have long titles → shrink to fit one line */
#web3 .svc-card h3{font-size:clamp(1.05rem,1.3vw,1.24rem);letter-spacing:-.01em;white-space:normal;line-height:1.4}
/* all card titles on green (dark) backgrounds → beige */
.section:not(.paper) .svc-card h3,
.section:not(.paper) .card h3,
.secbg:not(.paper) .svc-card h3,
.secbg:not(.paper) .card h3{color:var(--warm)}
/* strengths feature titles (dark bg) → beige */
.str__body h2.h-card.serif{color:var(--warm)}
/* Positioning: text (1 column) + right image */
.svc__top--media{gap:clamp(28px,4vw,64px)}
.svc__top--media .svc__top-text{display:flex;flex-direction:column;gap:1.2em}
.svc__top--media .svc__lead{max-width:none}
.pos-media{
border-radius:6px;min-height:clamp(220px,26vw,340px);
background-size:cover;background-position:center;
}
@media (max-width:859px){.pos-media{aspect-ratio:16/10;min-height:0}}
@media (min-width:860px){
.svc__top--media{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center}
}
/* SingulaForce head: text + right image */
.feat-head--media{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.feat-head--media .feat-head__text{min-width:0}
.sf-media{
border-radius:var(--radius);min-height:clamp(240px,28vw,380px);
background-size:cover;background-position:center;
}
@media (min-width:900px){
.feat-head--media{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media (max-width:899px){.sf-media{aspect-ratio:16/10;margin-top:clamp(18px,4vw,30px)}}
/* SingulaForce head: tighten title spacing + top-align image to header lines */
.feat-head--media{align-items:start}
.feat-head--media .feat-title{margin:.12em 0 .25em;line-height:1}
/* SingulaForce 서비스 로고 */
.feat-title--logo{margin:clamp(20px,2.4vw,34px) 0 clamp(14px,1.6vw,22px) !important;line-height:1}
.sf-logo{width:clamp(230px,26vw,360px);height:auto;display:block}
.paper .sf-logo{filter:none}
.feat-head--media .solution-lead{margin-top:.55em;padding-top:0;border-top:none}
.feat-head--media .feat-head__text > p{margin-top:1em}
.sf-media{aspect-ratio:4/3;min-height:0;margin-top:clamp(30px,3.4vw,54px);border-radius:6px}
/* SingulaForce lead: smaller in the narrower column so line-breaks read naturally */
.feat-head--media .solution-lead p{font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.7}
.feat-head--media .feat-head__text > p{font-size:.94rem;line-height:1.85}
/* SingulaForce feature blocks → 3 distinct boxes with internal divider lines */
.feat-list .pfeat{
border:1px solid var(--paper-hair);border-top:1px solid var(--paper-hair);
border-radius:var(--radius);padding:clamp(24px,2.8vw,38px);
background:linear-gradient(180deg,rgba(21,32,26,.022),transparent);
overflow:hidden;
}
.feat-list .pfeat::before{display:none}
.feat-list .pfeat b{margin-bottom:1em;padding-bottom:.85em;border-bottom:1px solid var(--paper-hair)}
.feat-list .engine__co{border-bottom-color:var(--paper-hair)}
.feat-list .pfeat .engine__co:last-of-type{border-bottom:none;padding-bottom:0;margin-bottom:0}
/* 採用 求める人物像: text left (1 column) + right image */
.who-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center;margin-bottom:clamp(34px,5vw,66px)}
.who-head__text{display:flex;flex-direction:column;gap:1em}
.who-head .lead{max-width:none}
.who-media{border-radius:6px;aspect-ratio:16/10;background-size:cover;background-position:center}
@media (min-width:860px){.who-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
/* ===== Article (news/column) detail page ===== */
.article-hero{padding-top:clamp(120px,16vh,180px);padding-bottom:0}
.article-hero .crumb{margin-bottom:clamp(20px,3vw,34px)}
.article__cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--green-600);text-transform:uppercase;display:block;margin-bottom:1.1em}
.article__title{font-family:var(--serif);font-weight:700;font-size:clamp(1.55rem,3.2vw,2.7rem);line-height:1.3;letter-spacing:-.015em;color:var(--ink-paper);max-width:none}
@media (min-width:900px){.article__title--nowrap{white-space:nowrap}}
.article__deck{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.7;color:var(--ink-paper-dim);margin-top:1em;max-width:44ch;font-weight:500}
.article__meta{margin-top:clamp(20px,2.6vw,34px);display:flex;gap:1.4em;align-items:center;font-family:var(--mono);font-size:.78rem;color:var(--green-600);letter-spacing:.04em}
.article__cover{margin-top:clamp(26px,3.4vw,48px);border-radius:8px;overflow:hidden;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--green-900)}
.article-body{padding-top:clamp(22px,2.6vw,36px);padding-bottom:clamp(60px,8vw,120px)}
.article-body .prose{max-width:none;margin-inline:0}
.article-body .prose > p{font-size:1.02rem;line-height:2.05;color:var(--ink-paper-dim);margin:0 0 1.6em}
.article-body .prose > p:first-child{margin-top:0}
.article-body .prose h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,2.3vw,1.9rem);line-height:1.5;color:var(--ink-paper);margin:1.7em 0 .8em;padding-top:.85em;border-top:1px solid var(--paper-hair)}
.article-body .prose h2:first-child{border-top:none;padding-top:0;margin-top:0}
.article-body .prose strong{color:var(--ink-paper);font-weight:700}
.article-back{max-width:none;margin:clamp(40px,5vw,72px) 0 0;padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--paper-hair)}
.article-back a{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--green-600)}
.article-fig{max-width:none;margin:2.4em 0;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background-size:cover;background-position:center;background-color:var(--green-900)}
.article-fig + h2{margin-top:2.4em}
/* article dark hero: label + meta in warm */
.article-hero .article__cat--hero{color:var(--warm);margin-bottom:0}
.article-hero .article__meta--hero{margin-top:clamp(18px,2.4vw,30px);color:var(--warm)}
.article-hero .article__meta--hero span{color:var(--text-faint)}
.article-hero .crumb{margin-bottom:clamp(16px,2.4vw,28px)}
/* article page: keep header solid so white GNB stays visible over light hero */
.article-page .site-header{
background:rgba(11,20,16,.84);
-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
border-bottom:1px solid var(--hair);
}
/* ===== Privacy policy modal ===== */
.modal-overlay{position:fixed;inset:0;z-index:3000;display:none;align-items:flex-start;justify-content:center;
background:rgba(11,20,16,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
padding:clamp(20px,5vh,64px) 16px;overflow-y:auto;overscroll-behavior:contain}
.modal-overlay.open{display:flex}
.modal{position:relative;background:var(--paper-2);color:var(--ink-paper);max-width:840px;width:100%;
border-radius:12px;padding:clamp(28px,4vw,56px);box-shadow:0 30px 90px rgba(0,0,0,.45);margin:auto;
animation:modalIn .4s var(--ease) both}
@keyframes modalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:12px;right:14px;width:42px;height:42px;border:none;background:transparent;
font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink-paper-dim);border-radius:999px;transition:background .3s,color .3s}
.modal__close:hover{background:rgba(21,32,26,.06);color:var(--ink-paper)}
.modal__title{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.72rem);font-weight:700;margin:0 0 .3em;color:var(--ink-paper);line-height:1.4}
.modal__org{font-size:.9rem;color:var(--ink-paper-dim);margin:0 0 1.5em}
.modal__body h3{font-family:var(--serif);font-weight:700;font-size:1.06rem;margin:1.9em 0 .6em;padding-top:1.1em;border-top:1px solid var(--paper-hair);color:var(--ink-paper)}
.modal__body p{font-size:.9rem;line-height:1.95;color:var(--ink-paper-dim);margin:0 0 .9em}
.modal__body ul,.modal__body ol{margin:.3em 0 1em;padding-left:1.35em}
.modal__body li{font-size:.9rem;line-height:1.85;color:var(--ink-paper-dim);margin-bottom:.35em}
.modal__body table{width:100%;border-collapse:collapse;margin:.6em 0 1.3em;font-size:.85rem}
.modal__body th,.modal__body td{border:1px solid var(--paper-hair);padding:.6em .8em;text-align:left;vertical-align:top;color:var(--ink-paper-dim);line-height:1.7}
.modal__body th{background:rgba(21,32,26,.045);color:var(--ink-paper);font-weight:600}
.modal__body .modal__meta th{width:130px;white-space:nowrap}
.modal__addr{background:rgba(21,32,26,.03);border:1px solid var(--paper-hair);border-radius:8px;padding:1em 1.2em;font-size:.88rem;line-height:1.9;color:var(--ink-paper-dim)}
.modal__addr b{color:var(--ink-paper)}
@media (max-width:560px){.modal__body th,.modal__body td{padding:.5em .6em;font-size:.8rem}}
/* select: custom chevron with proper right padding (avoid edge-hugging native arrow) */
.field select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
padding-right:44px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%232B6A51' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 16px center;
background-size:13px 9px;
cursor:pointer;
}
.field select::-ms-expand{display:none}
/* HOME 課題提起: long heading + solution lead should span the full content width */
.section--over-video .sec-head--split{grid-template-columns:minmax(0,1fr) !important;max-width:none}
.section--over-video .sec-head--split > div{max-width:none}
.section--over-video .h-sec{max-width:34ch;font-size:clamp(1.6rem,2.9vw,2.5rem);line-height:1.45}
.section--over-video .solution-lead p{max-width:38ch}
.section--over-video .hero__sub{max-width:72ch}
@media (min-width:1100px){
.section--over-video .h-sec{max-width:40ch}
.section--over-video .solution-lead p{max-width:44ch}
}
/* article body: bullet list */
.article-body .prose .prose-list{margin:0 0 1.8em;padding-left:1.3em;list-style:disc}
.article-body .prose .prose-list li{font-size:1rem;line-height:1.95;color:var(--ink-paper-dim);margin-bottom:.7em}
.article-body .prose .prose-list li::marker{color:var(--green-600)}
/* ===== MIG取り組み (strengths) — 서브타이틀 / 항목 리스트 / 세미나 안내 ===== */
.str__sub{
font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;
color:var(--green-500);margin:-.15em 0 1.1em;line-height:1.7;
}
.str__listh{
display:inline-block;margin:1.6em 0 .85em;padding-bottom:.4em;
font-size:.86rem;font-weight:600;letter-spacing:.06em;color:var(--warm);
border-bottom:1px solid rgba(217,201,168,.42);
}
.str__list{margin:0;padding:0;list-style:none;display:grid;gap:.62em}
.str__list li{
position:relative;padding-left:1.15em;
font-size:.93rem;line-height:1.8;color:var(--text-dim);
}
.str__list li::before{
content:"";position:absolute;left:0;top:.78em;
width:6px;height:1px;background:var(--warm);opacity:.75;
}
.str-note{
margin-top:1.9em;padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);
border:1px solid rgba(217,201,168,.34);border-radius:var(--radius);
background:linear-gradient(135deg,rgba(217,201,168,.07),rgba(27,204,189,.05) 60%,transparent);
}
.str-note__h{
font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--warm);
margin-bottom:.85em;
}
.str-note__t{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:700;color:var(--warm);line-height:1.5}
.str-note__c{font-size:.93rem;line-height:1.85;color:var(--text-dim);margin-top:.5em}
.str-note__c b{color:var(--text)}
.str-note .tlink{margin-top:1em}
.str-outro{
margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3.4vw,44px);
border-top:1px solid var(--hair);
}
.str-outro p{font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.95;color:var(--text-dim)}
@media (max-width:760px){
.str__sub{margin-bottom:.9em}
.str__list li{font-size:.9rem}
}
/* ===== 기사: 세로 포스터 커버 / 개최개요 표 / 주석 ===== */
.article__cover--poster{
aspect-ratio:auto; height:auto; min-height:0;
max-width:520px; margin-inline:auto;
background:none;
}
.article__cover--poster::before{
content:""; display:block; padding-top:156.3%;
background-image:inherit; background-size:contain;
background-position:center; background-repeat:no-repeat;
}
@media (max-width:560px){.article__cover--poster{max-width:100%}}
/* 본문 안 세로 포스터 — 잘림 없이 전체가 보이게 */
.article-body .prose .article-fig--poster{
aspect-ratio:auto; max-width:470px; margin:2.4em auto 2.8em;
background:none; border-radius:0;
}
.article-body .prose .article-fig--poster::before{
content:""; display:block; padding-top:156.3%;
background-image:inherit; background-size:contain;
background-position:center; background-repeat:no-repeat;
}
@media (max-width:560px){.article-body .prose .article-fig--poster{max-width:100%}}
.article-body .prose .prose-callout{
margin:0 0 1.8em; padding:1.05em 1.3em;
background:rgba(21,32,26,.035);
border-left:3px solid var(--green-600);
border-radius:0 6px 6px 0;
font-size:.95rem; line-height:1.9; color:var(--ink-paper-dim);
}
.article-body .prose .prose-spec{
margin:0 0 2em; display:grid; grid-template-columns:auto minmax(0,1fr);
gap:0; border-top:1px solid var(--paper-hair);
}
.article-body .prose .prose-spec dt{
padding:.85em 1.4em .85em 0; border-bottom:1px solid var(--paper-hair);
font-size:.9rem; font-weight:600; color:var(--ink-paper); white-space:nowrap;
}
.article-body .prose .prose-spec dd{
padding:.85em 0; border-bottom:1px solid var(--paper-hair);
font-size:.95rem; line-height:1.85; color:var(--ink-paper-dim); margin:0;
}
@media (max-width:520px){
.article-body .prose .prose-spec{grid-template-columns:minmax(0,1fr)}
.article-body .prose .prose-spec dt{padding-bottom:.15em; border-bottom:none}
.article-body .prose .prose-spec dd{padding-top:0}
}
.article-body .prose .tlink{color:var(--green-600); font-size:.95rem}
/* ===== ① 카드 본문: 문절 단위 줄바꿈 해제 (짧은 줄 남는 현상 방지) ===== */
.card p,.svc-card p,.pfeat p,.prob p,.str__list li{word-break:normal}
/* ===== ② SingulaForce 특장 카드 본문: 모노 → 본문 서체로 통일 ===== */
.feat-list .engine__co{
font-family:var(--sans);
font-size:.94rem;
letter-spacing:0;
line-height:1.85;
color:var(--ink-paper-dim);
text-transform:none;
word-break:normal;
}
.paper .feat-list .engine__co{color:var(--ink-paper-dim)}
@media (max-width:760px){.feat-list .engine__co{font-size:.9rem;line-height:1.8}}
/* ===== 05 Executive AI Community — 3열 카드 ===== */
#community .svc-cards{margin-top:clamp(30px,3.6vw,52px)}
/* 좌측 타이틀 블록을 우측 본문 첫 줄에 맞춰 상단 정렬 */
@media (min-width:860px){
#community .svc__top{align-items:start}
#community .svc__top > div:first-child{padding-top:clamp(3px,.45vw,8px)}
}
/* 기사 본문: 핵심 문장 강조 */
.article-body .prose .prose-key{
margin:1.6em 0 1.8em; padding:.15em 0 .15em 1.15em;
border-left:3px solid var(--warm-deep);
font-size:1.06rem; line-height:1.95; font-weight:600; color:var(--ink-paper);
}
@media (max-width:640px){.article-body .prose .prose-key{font-size:1rem}}
/* ===== 사업 섹션 01~05: 상하 여백 축소 ===== */
@media (min-width:761px){
/* sticky 스택 유지하되 한 화면을 꽉 채우던 높이를 낮춤 */
.svc-stack{min-height:76vh;padding-block:clamp(28px,3.2vw,52px)}
}
/* 세로로 긴 모니터에서는 상한을 둬 과도한 여백 방지 */
@media (min-width:761px) and (min-height:980px){
.svc-stack{min-height:720px}
}
@media (max-width:760px){
.svc-stack{padding-block:clamp(30px,5.5vw,48px)}
}
.svc-cards{margin-top:clamp(18px,2.2vw,32px)}
#community .svc-cards{margin-top:clamp(18px,2.2vw,32px)}
@media (min-width:860px){
.svc__top{gap:clamp(32px,4.6vw,68px)}
}
.svc__top{margin-bottom:clamp(18px,2.4vw,34px)}