/*
Theme Name: NUVIRA Theme
Theme URI: https://nuvira.jp
Author: NUVIRA
Description: Figma design implementation for NUVIRA.
Version: 6.19.1
Requires PHP: 7.4
Text Domain: nuvira
*/
:root {
--paper: #fbfaf7;
--ink: #16201e;
--green: #0f4d43;
--white: #fff;
--shell: 1252px;
/*
* Reem Kufi Ink occasionally resolves to corrupted colour glyphs on iOS
* WebKit when served from production caches. Keep display type local and
* deterministic; Japanese copy continues to use Noto Sans JP explicitly.
*/
--sans: "Avenir Next", Avenir, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
}
/* =========================================================
NUVIRA JOURNAL — note-level reading experience
========================================================= */
.nu-journal {
--journal-ink: #08131a;
--journal-secondary: rgba(8,19,26,.66);
--journal-muted: rgba(8,19,26,.5);
--journal-border: rgba(8,19,26,.14);
--journal-border-strong: rgba(8,19,26,.22);
--journal-surface: #fff;
--journal-subtle: #f5f8fa;
--journal-green: #0f4d43;
--journal-gold: #b0894e;
min-height: 100vh;
overflow: clip;
color: var(--journal-ink);
background: #fbfaf7;
font-family: "Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN",Arial,"Noto Sans JP",Meiryo,sans-serif;
font-weight: 400;
word-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
}
.nu-blog-shell { width: min(calc(100% - 48px),940px); margin-inline: auto; }
.nu-journal-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--journal-secondary); font-size: 14px; line-height: 1.5; }
.nu-journal-breadcrumb i { width: 16px; height: 1px; background: var(--journal-border-strong); }
.nu-journal-breadcrumb span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-journal-breadcrumb a { transition: color .25s ease; }
.nu-journal-breadcrumb a:hover { color: var(--journal-green); }
/* Blog index */
.nu-blog-hero { padding: 190px 0 76px; border-bottom: 1px solid var(--journal-border); }
.nu-blog-hero__heading { display: grid; grid-template-columns: 1fr 320px; gap: 70px; align-items: end; margin-top: 66px; }
.nu-blog-hero__heading > div > p { margin: 0 0 13px; color: var(--journal-gold); font-size: 14px; letter-spacing: .16em; }
.nu-blog-hero h1 { margin: 0; font-family: var(--sans); font-size: 88px; line-height: .85; font-weight: 400; letter-spacing: -.045em; }
.nu-blog-hero__heading > p { margin: 0 0 2px; color: var(--journal-secondary); font-size: 14px; line-height: 2; }
.nu-blog-index__layout { display: grid; grid-template-columns: minmax(0,620px) 240px; gap: 80px; align-items: start; padding: 82px 0 160px; }
.nu-blog-feed { min-width: 0; }
.nu-blog-card { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--journal-border); }
.nu-blog-card__link { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 25px; align-items: start; }
.nu-blog-card__cover { position: relative; width: 190px; aspect-ratio: 1.48/1; margin: 0; overflow: hidden; border-radius: 10px; background: #e4e9e7; }
.nu-blog-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.nu-blog-card__cover--placeholder { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; color: #fff; background: radial-gradient(circle at 78% 24%,rgba(176,137,78,.75),transparent 22%),linear-gradient(145deg,#173c35,#081f1b 66%,#0f4d43); }
.nu-blog-card__cover--placeholder::after { content: ""; position: absolute; right: -22%; bottom: -38%; width: 82%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.nu-blog-card__cover--placeholder span { position: relative; z-index: 1; font-family: var(--sans); font-size: 24px; letter-spacing: -.02em; }
.nu-blog-card__cover--placeholder small { position: relative; z-index: 1; font-size: 14px; letter-spacing: .14em; opacity: .7; }
.nu-blog-card__meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-bottom: 11px; color: var(--journal-secondary); font-size: 14px; line-height: 1.5; }
.nu-blog-card__meta span:first-child { color: var(--journal-green); font-weight: 600; }
.nu-blog-card h2 { margin: 0; font-size: 18px; line-height: 1.65; letter-spacing: .04em; font-feature-settings: "palt"; font-weight: 700; }
.nu-blog-card__content > p { display: -webkit-box; overflow: hidden; margin: 10px 0 0; color: var(--journal-secondary); font-size: 14px; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nu-blog-card__more { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; color: var(--journal-muted); font-size: 14px; letter-spacing: .13em; }
.nu-blog-card__more i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--journal-border); border-radius: 50%; font-style: normal; transition: color .3s ease,background .3s ease,transform .35s ease; }
.nu-blog-card__link:hover .nu-blog-card__cover img { transform: scale(1.025); }
.nu-blog-card__link:hover .nu-blog-card__more i { transform: rotate(45deg); color: #fff; background: var(--journal-green); }
.nu-blog-card--featured { margin-bottom: 48px; padding-bottom: 48px; }
.nu-blog-card--featured .nu-blog-card__link { display: block; }
.nu-blog-card--featured .nu-blog-card__cover { width: 100%; aspect-ratio: 16/9; margin-bottom: 25px; border-radius: 12px; }
.nu-blog-card--featured .nu-blog-card__cover--placeholder { padding: 28px; }
.nu-blog-card--featured .nu-blog-card__cover--placeholder span { font-size: 46px; }
.nu-blog-card--featured h2 { font-size: 25px; line-height: 1.55; }
.nu-blog-card--featured .nu-blog-card__content > p { font-size: 14px; -webkit-line-clamp: 3; }
.nu-blog-aside { position: sticky; top: 96px; display: grid; gap: 52px; }
.nu-blog-aside__label { margin: 0 0 17px; color: var(--journal-muted); font-size: 14px; letter-spacing: .16em; }
.nu-blog-aside nav { border-top: 1px solid var(--journal-border-strong); }
.nu-blog-aside nav a { min-height: 52px; display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; border-bottom: 1px solid var(--journal-border); color: var(--journal-secondary); font-size: 14px; transition: color .25s ease,padding-left .25s ease; }
.nu-blog-aside nav a > span { color: var(--journal-gold); font-size: 14px; }
.nu-blog-aside nav a > small { font-size: 14px; }
.nu-blog-aside nav a:hover,.nu-blog-aside nav a.is-current { padding-left: 5px; color: var(--journal-green); }
.nu-blog-aside__about > p:last-child { margin: 0; color: var(--journal-secondary); font-size: 14px; line-height: 1.9; }
.nu-blog-aside__cta { min-height: 112px; display: grid; grid-template-columns: 1fr 42px; align-content: center; padding: 20px; color: #fff; background: var(--journal-green); transition: background .25s ease; }
.nu-blog-aside__cta span { grid-column: 1/-1; margin-bottom: 9px; font-size: 14px; letter-spacing: .14em; opacity: .55; }
.nu-blog-aside__cta strong { font-size: 16px; font-weight: 500; }
.nu-blog-aside__cta i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-style: normal; transition: transform .3s ease; }
.nu-blog-aside__cta:hover { background: #0a332c; }
.nu-blog-aside__cta:hover i { transform: rotate(45deg); }
.nu-blog-empty { min-height: 320px; display: grid; place-content: center; border-top: 1px solid var(--journal-border); border-bottom: 1px solid var(--journal-border); text-align: center; }
.nu-blog-empty p { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.nu-blog-empty span { color: var(--journal-secondary); font-size: 14px; }
.nu-blog-pagination ul { display: flex; justify-content: center; gap: 8px; margin: 62px 0 0; padding: 0; list-style: none; }
.nu-blog-pagination a,.nu-blog-pagination span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--journal-border); border-radius: 50%; font-size: 14px; }
.nu-blog-pagination .current,.nu-blog-pagination a:hover { color: #fff; background: var(--journal-green); }
/* Article */
.nu-reading-progress { position: fixed; z-index: 305; top: 0; right: 0; left: 0; height: 2px; pointer-events: none; }
.nu-reading-progress span { display: block; width: 100%; height: 100%; background: var(--journal-gold); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.nu-article-header { padding: 155px 0 76px; border-bottom: 1px solid var(--journal-border); }
.nu-article-header__body { width: 620px; max-width: 100%; margin-top: 68px; }
.nu-article-header__category { margin: 0 0 17px; color: var(--journal-green); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.nu-article-header h1 { margin: 0; font-size: 32px; line-height: 48px; font-weight: 700; letter-spacing: .04em; font-feature-settings: "palt"; }
.nu-article-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--journal-secondary); font-size: 14px; letter-spacing: .08em; }
.nu-article-eyecatch { width: min(calc(100% - 48px),940px); aspect-ratio: 16/9; margin: 72px auto 0; overflow: hidden; border-radius: 12px; background: var(--journal-subtle); }
.nu-article-eyecatch img { width: 100%; height: 100%; object-fit: cover; }
.nu-article-layout { display: grid; grid-template-columns: minmax(0,620px) 240px; gap: 80px; align-items: start; padding: 86px 0 150px; }
.nu-article-main { min-width: 0; }
.nu-article-body { color: var(--journal-ink); font-size: 18px; line-height: 36px; letter-spacing: normal; font-feature-settings: normal; }
.nu-article-body > :first-child { margin-top: 0; }
.nu-article-body p { margin: 0 0 32px; }
.nu-article-body h2 { margin: 88px 0 28px; font-size: 28px; line-height: 36px; letter-spacing: .04em; font-feature-settings: "palt"; font-weight: 700; scroll-margin-top: 105px; }
.nu-article-body h3 { margin: 60px 0 22px; font-size: 22px; line-height: 34px; letter-spacing: .04em; font-feature-settings: "palt"; font-weight: 700; scroll-margin-top: 105px; }
.nu-article-body h4 { margin: 44px 0 17px; font-size: 18px; line-height: 30px; font-weight: 700; }
.nu-article-body a { color: var(--journal-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nu-article-body strong { font-weight: 700; }
.nu-article-body ul,.nu-article-body ol { margin: 0 0 34px; padding-left: 1.55em; }
.nu-article-body li { margin: 7px 0; }
.nu-article-body blockquote { margin: 48px 0; padding: 25px 28px; border-left: 3px solid var(--journal-green); color: var(--journal-secondary); background: var(--journal-subtle); }
.nu-article-body blockquote p:last-child { margin-bottom: 0; }
.nu-article-body figure,.nu-article-body .wp-block-image { margin: 52px 0; }
.nu-article-body figcaption { margin-top: 10px; color: var(--journal-secondary); font-size: 14px; line-height: 1.7; text-align: center; }
.nu-article-body hr { margin: 70px 0; border: 0; border-top: 1px solid var(--journal-border); }
.nu-article-body pre { max-width: 100%; overflow-x: auto; margin: 42px 0; padding: 22px; border-radius: 8px; color: #e9f0ed; background: #10231f; font: 13px/1.75 SFMono-Regular,Consolas,Menlo,Courier,monospace; }
.nu-article-body code { padding: .14em .35em; border-radius: 3px; background: var(--journal-subtle); font: .86em SFMono-Regular,Consolas,Menlo,Courier,monospace; }
.nu-article-body pre code { padding: 0; background: transparent; }
.nu-article-body table { width: 100%; margin: 42px 0; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.nu-article-body th,.nu-article-body td { border: 1px solid var(--journal-border); padding: 12px 14px; text-align: left; }
.nu-article-body th { background: var(--journal-subtle); }
.nu-article-aside { position: sticky; top: 96px; display: grid; gap: 45px; }
.nu-article-share > p,.nu-article-toc > p { margin: 0 0 15px; color: var(--journal-muted); font-size: 14px; letter-spacing: .16em; }
.nu-article-share > div { display: flex; gap: 8px; }
.nu-article-share a,.nu-article-share button { min-width: 44px; min-height: 44px; border: 1px solid var(--journal-border); border-radius: 999px; padding: 0 14px; display: grid; place-items: center; color: var(--journal-ink); background: transparent; font-size: 14px; cursor: pointer; transition: color .25s ease,background .25s ease,border-color .25s ease; }
.nu-article-share a:hover,.nu-article-share button:hover { border-color: var(--journal-green); color: #fff; background: var(--journal-green); }
.nu-copy-status { min-height: 18px; display: block; margin-top: 8px; color: var(--journal-green); font-size: 14px; }
.nu-article-toc { padding-top: 17px; border-top: 1px solid var(--journal-border-strong); }
.nu-article-toc ol { margin: 0; padding: 0; list-style: none; }
.nu-article-toc li { border-bottom: 1px solid var(--journal-border); }
.nu-article-toc li.is-sub { padding-left: 13px; }
.nu-article-toc a { min-height: 46px; display: flex; align-items: center; color: var(--journal-secondary); font-size: 14px; line-height: 1.55; transition: color .25s ease; }
.nu-article-toc a:hover,.nu-article-toc a.is-current { color: var(--journal-green); }
.nu-article-back { min-height: 48px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--journal-border); border-bottom: 1px solid var(--journal-border); font-size: 14px; }
.nu-article-back i { font-style: normal; }
.nu-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 70px; padding-top: 25px; border-top: 1px solid var(--journal-border); }
.nu-article-tags a { min-height: 32px; display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--journal-border); border-radius: 999px; color: var(--journal-secondary); font-size: 14px; }
.nu-article-author { display: grid; grid-template-columns: 72px 1fr; gap: 22px; margin-top: 65px; padding: 28px; border: 1px solid var(--journal-border); border-radius: 12px; background: var(--journal-surface); }
.nu-article-author__avatar img { width: 72px; height: 72px; border-radius: 50%; }
.nu-article-author span { color: var(--journal-muted); font-size: 14px; letter-spacing: .14em; }
.nu-article-author h2 { margin: 5px 0 8px; font-size: 16px; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt"; }
.nu-article-author p { margin: 0; color: var(--journal-secondary); font-size: 14px; line-height: 1.8; }
.nu-article-pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: 70px; border-top: 1px solid var(--journal-border); border-bottom: 1px solid var(--journal-border); }
.nu-article-pager > div { min-height: 110px; display: flex; flex-direction: column; justify-content: center; padding: 20px 25px 20px 0; }
.nu-article-pager > div + div { border-left: 1px solid var(--journal-border); padding-right: 0; padding-left: 25px; text-align: right; }
.nu-article-pager span { margin-bottom: 9px; color: var(--journal-muted); font-size: 14px; letter-spacing: .14em; }
.nu-article-pager a { font-size: 14px; line-height: 1.65; }
.nu-related { padding: 95px 0 120px; color: #fff; background: #0a1b18; }
.nu-related__head { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: end; }
.nu-related__head p { margin: 0; color: rgba(255,255,255,.5); font-size: 14px; letter-spacing: .15em; }
.nu-related__head h2 { margin: 0; font-size: 27px; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt"; }
.nu-related__grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 58px; border-top: 1px solid rgba(255,255,255,.22); border-left: 1px solid rgba(255,255,255,.22); }
.nu-related article { min-width: 0; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.nu-related article a { min-height: 205px; display: flex; flex-direction: column; padding: 23px; }
.nu-related article span { color: rgba(255,255,255,.48); font-size: 14px; }
.nu-related article h3 { margin: 52px 0 20px; font-size: 15px; line-height: 1.75; letter-spacing: .04em; font-feature-settings: "palt"; }
.nu-related article i { margin-top: auto; font-style: normal; align-self: end; transition: transform .3s ease; }
.nu-related article a:hover i { transform: rotate(45deg); }
.nu-journal a:focus-visible,.nu-journal button:focus-visible { outline: 2px solid var(--journal-gold); outline-offset: 4px; }
@media (max-width: 900px) {
.nu-blog-index__layout,.nu-article-layout { grid-template-columns: minmax(0,620px); justify-content: center; }
.nu-blog-aside,.nu-article-aside { position: static; }
.nu-blog-aside { grid-template-columns: 1fr 1fr; }
.nu-blog-aside__cta { grid-column: 1/-1; }
.nu-article-aside { grid-row: 1; grid-template-columns: 1fr 1fr; align-items: start; }
.nu-article-back { grid-column: 1/-1; }
.nu-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.nu-blog-shell { width: calc(100% - 32px); }
.nu-blog-hero { padding: 126px 0 55px; }
.nu-blog-hero__heading { grid-template-columns: 1fr; gap: 35px; margin-top: 48px; }
.nu-blog-hero h1 { font-size: 58px; }
.nu-blog-hero__heading > p { font-size: 14px; }
.nu-blog-index__layout { gap: 85px; padding: 58px 0 105px; }
.nu-blog-card { margin-bottom: 35px; padding-bottom: 35px; }
.nu-blog-card__link { grid-template-columns: 116px minmax(0,1fr); gap: 17px; }
.nu-blog-card__cover { width: 116px; border-radius: 8px; }
.nu-blog-card__cover--placeholder { padding: 10px; }
.nu-blog-card__cover--placeholder span { font-size: 17px; }
.nu-blog-card__meta { gap: 5px 9px; font-size: 14px; }
.nu-blog-card__meta span:last-child { display: none; }
.nu-blog-card h2 { font-size: 15px; line-height: 1.55; }
.nu-blog-card__content > p,.nu-blog-card__more { display: none; }
.nu-blog-card--featured .nu-blog-card__cover { margin-bottom: 21px; }
.nu-blog-card--featured .nu-blog-card__cover--placeholder { padding: 20px; }
.nu-blog-card--featured .nu-blog-card__cover--placeholder span { font-size: 34px; }
.nu-blog-card--featured h2 { font-size: 21px; }
.nu-blog-card--featured .nu-blog-card__content > p { display: -webkit-box; font-size: 14px; }
.nu-blog-card--featured .nu-blog-card__more { display: inline-flex; }
.nu-blog-aside { grid-template-columns: 1fr; }
.nu-blog-aside__cta { grid-column: auto; }
.nu-article-header { padding: 120px 0 58px; }
.nu-article-header__body { margin-top: 48px; }
.nu-article-header h1 { font-size: 28px; line-height: 42px; }
.nu-article-meta { margin-top: 23px; }
.nu-article-eyecatch { width: calc(100% - 32px); margin-top: 45px; border-radius: 8px; }
.nu-article-layout { gap: 65px; padding: 62px 0 100px; }
.nu-article-aside { grid-row: auto; grid-template-columns: 1fr; gap: 38px; }
.nu-article-body { font-size: 18px; line-height: 36px; }
.nu-article-body h2 { margin-top: 72px; font-size: 25px; line-height: 35px; }
.nu-article-body h3 { margin-top: 52px; font-size: 21px; line-height: 32px; }
.nu-article-body blockquote { margin: 40px -4px; padding: 22px; }
.nu-article-author { grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 18px; }
.nu-article-author__avatar img { width: 52px; height: 52px; }
.nu-article-pager { grid-template-columns: 1fr; }
.nu-article-pager > div + div { border-top: 1px solid var(--journal-border); border-left: 0; padding-left: 0; text-align: left; }
.nu-related { padding: 72px 0 85px; }
.nu-related__head { grid-template-columns: 1fr; gap: 15px; }
.nu-related__head h2 { font-size: 23px; }
.nu-related__grid { grid-template-columns: 1fr; margin-top: 40px; }
.nu-related article a { min-height: 165px; }
}
@media (prefers-reduced-motion: reduce) {
.nu-journal * { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; }
}
/* =========================================================
PDF-ACCURATE LOWER PAGES — 1440 × 7419 source frames
========================================================= */
.pdf-page {
--pdf-paper: #fbfaf7;
--pdf-ink: #16201e;
--pdf-green: #0f4d43;
--pdf-gold: #b0894e;
--pdf-gray: #ededf0;
min-height: 100vh;
overflow: hidden;
padding-top: 93px;
color: var(--pdf-ink);
background: var(--pdf-paper);
}
.pdf-page h1,.pdf-page h2,.pdf-page h3,.pdf-page p { margin-top: 0; }
.pdf-shell { width: min(calc(100% - 188px),1252px); margin-inline: auto; }
.pdf-main-hero { position: relative; padding-top: 141px; }
.pdf-main-hero h1 { margin: 0 0 29px; font-size: 84px; line-height: 1; font-weight: 400; letter-spacing: -.045em; }
.pdf-main-hero figure { width: 100%; height: 536px; margin: 0; overflow: hidden; }
.pdf-main-hero figure img { width: 100%; height: 100%; object-fit: cover; }
/* About */
.pdf-about { overflow: visible; }
/* 01: VISION / MISSION */
.pdf-about-vision { padding: 96px 0 120px; text-align: center; }
.pdf-about-vision__row + .pdf-about-vision__row { margin-top: 76px; }
.pdf-about-vision__label { margin: 0 0 22px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; letter-spacing: .22em; color: var(--pdf-gold); }
.pdf-about-vision__label span { color: #8b9692; letter-spacing: .12em; }
.pdf-about-vision__text { margin: 0 auto; max-width: 880px; font-size: 52px; line-height: 1.5; font-weight: 400; letter-spacing: -.02em; }
.pdf-about-vision__text--sub { max-width: 680px; font-family: "Noto Sans JP",sans-serif; font-size: 19px; line-height: 2; letter-spacing: 0; color: #35413e; }
/* 02: STANCE */
.pdf-about-stance { padding: 40px 0 150px; }
.pdf-about-stance__head {
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
}
.pdf-about-stance__eyebrow {
order:2;
margin:10px 0 0;
color:var(--pdf-green);
font-family:var(--sans);
font-size:14px;
line-height:1;
letter-spacing:.08em;
}
.pdf-about-stance__head h2 {
order:1;
margin:0;
font-size:40px;
line-height:1.45;
font-weight:400;
letter-spacing:-.02em;
}
.pdf-about-stance__head h2 br { display:none; }
.pdf-about-stance__list { margin-top:58px; border-top:1px solid #d9ddda; }
.pdf-about-stance__list article {
min-height:204px;
display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:36px;
align-items:end;
padding:34px 0 0;
overflow:hidden;
border-bottom:1px solid #d9ddda;
}
.pdf-about-stance__no {
align-self:end;
margin-bottom:-22px;
color:#ccd3cd;
font-family:var(--sans);
font-size:172px;
line-height:.78;
font-weight:300;
letter-spacing:-.07em;
}
.pdf-about-stance__list article > div {
align-self:center;
display:grid;
grid-template-columns:minmax(250px,.85fr) minmax(0,1fr);
gap:54px;
align-items:center;
padding:24px 0;
}
.pdf-about-stance__list h3 {
margin:0;
color:var(--pdf-green);
font-size:22px;
line-height:1.65;
font-weight:400;
letter-spacing:-.01em;
}
.pdf-about-stance__list p {
margin:0;
max-width:none;
color:#35413e;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:2;
}
/* 03: MESSAGE / STORY */
.pdf-about-message { width: min(calc(100% - 181px),1259px); display: grid; grid-template-columns: 548px 1fr; gap: 58.5px; min-height: 365px; }
.pdf-about-message figure { position: sticky; top: 104px; align-self: start; width: 548px; height: 365px; margin: 0; overflow: hidden; border-radius: 12px; }
.pdf-about-message figure img { width: 100%; height: 100%; object-fit: cover; }
.pdf-about-message > div { padding-top: 0; font-family: "Noto Sans JP",sans-serif; }
.pdf-about-message__eyebrow { margin: 0 0 16px; font-size: 14px; letter-spacing: .2em; color: var(--pdf-gold); }
.pdf-about-message h2 { margin: 0 0 34px; font-size: 27px; line-height: 1.55; font-weight: 500; letter-spacing: -.01em; }
.pdf-about-message > div > p { margin-bottom: 26px; font-size: 14px; line-height: 1.9; color: #35413e; }
.pdf-about-message__name { margin-top: 26px!important; margin-bottom: 0!important; font-size: 16px!important; line-height: 1.2!important; color: var(--pdf-ink); font-weight: 500; }
/* 04: VALUE ECOSYSTEM */
.pdf-about-ecosystem { padding: 210px 0 160px; }
.pdf-about-ecosystem__head { margin-bottom: 72px; text-align: center; }
.pdf-about-ecosystem__eyebrow { margin: 0 0 18px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; letter-spacing: .22em; color: var(--pdf-gold); }
.pdf-about-ecosystem__head h2 { margin: 0; font-size: 40px; line-height: 1.3; font-weight: 400; letter-spacing: -.02em; }
.pdf-about-ecosystem__flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0 16px; }
.pdf-about-ecosystem__step,.pdf-about-ecosystem__goal { padding: 34px 26px; border-radius: 18px; background: #fff; border: 1px solid #e6e5e2; }
.pdf-about-ecosystem__step { border-top: 3px solid var(--step-color, var(--pdf-gold)); }
.pdf-about-ecosystem__step[data-step="build"] { --step-color: #5673c4; }
.pdf-about-ecosystem__step[data-step="grow"] { --step-color: var(--pdf-green); }
.pdf-about-ecosystem__step[data-step="flow"] { --step-color: #ec794b; }
.pdf-about-ecosystem__no { display: block; margin-bottom: 12px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; letter-spacing: .16em; color: #8b9692; }
.pdf-about-ecosystem__step strong { display: block; margin-bottom: 14px; font-size: 25px; font-weight: 400; letter-spacing: -.01em; color: var(--step-color); }
.pdf-about-ecosystem__step p { margin: 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1.85; color: #35413e; }
.pdf-about-ecosystem__goal { display: flex; flex-direction: column; justify-content: center; background: var(--pdf-ink); border-color: var(--pdf-ink); text-align: center; }
.pdf-about-ecosystem__goal .pdf-about-ecosystem__no { color: rgba(255,255,255,.55); }
.pdf-about-ecosystem__goal p { margin: 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1.8; color: #fff; font-weight: 500; }
.pdf-about-ecosystem__arrow { align-self: center; position: relative; width: 16px; height: 1px; background: #c7cdca; }
.pdf-about-ecosystem__arrow::after { content: ""; position: absolute; top: 50%; right: -1px; width: 6px; height: 6px; border-right: 1px solid #c7cdca; border-bottom: 1px solid #c7cdca; transform: translateY(-50%) rotate(-45deg); }
/* 05: COMPANY PROFILE */
.pdf-about-company { display: grid; grid-template-columns: 390px 1fr; gap: 59px; padding: 60px 0 220px; }
.pdf-about-company h2 { margin: 0; font-size: 64px; line-height: 1; font-weight: 400; letter-spacing: -.04em; }
.pdf-about-company dl { margin: 0; border-top: 1px solid #e6e5e2; }
.pdf-about-company dl > div { min-height: 83px; display: grid; grid-template-columns: 177px 1fr; align-items: center; padding: 18px 0; border-bottom: 1px solid #e6e5e2; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1.7; }
.pdf-about-company dd { margin: 0; }
/* inline-flexのままだと事業内容の最終行に回り込んでしまうため、
block相当のflexにしてテキスト群の下へ落とす。.pill-linkが後方で
inline-flexを指定しているので、クラス2つ分の詳細度で上書きする。 */
.pdf-about-company__service-link.pill-link { display: flex; width: fit-content; margin-top: 22px; line-height: 1.4; }
/* Works — 絞り込み。最初は畳んでおき、押した人だけパネルを開けるようにする */
.pdf-works-filter { width: min(calc(100% - 188px),1252px); margin: 56px auto 0; }
.pdf-works-filter__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid var(--pdf-ink); border-radius: 999px; background: transparent; color: var(--pdf-ink); font-family: "Noto Sans JP",sans-serif; font-size: 13px; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.pdf-works-filter__toggle:hover { background: var(--pdf-ink); color: #fff; }
.pdf-works-filter__toggle i { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
.pdf-works-filter__toggle[aria-expanded="true"] i { transform: rotate(-135deg); }
.pdf-works-filter__panel { margin-top: 20px; padding: 30px 32px; border: 1px solid #e6e5e2; border-radius: 14px; background: #fff; }
.pdf-works-filter__panel[hidden] { display: none; }
.pdf-works-filter__group { margin: 0 0 24px; padding: 0; border: 0; }
.pdf-works-filter__group:last-of-type { margin-bottom: 0; }
.pdf-works-filter__group legend { width: 100%; padding: 0 0 13px; }
.pdf-works-filter__parent { display: inline-flex; align-items: center; gap: 9px; color: var(--pdf-ink); font-family: "Noto Sans JP",sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.pdf-works-filter__items { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 2px; }
.pdf-works-filter__child { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 1px solid #dfe2e3; border-radius: 999px; background: var(--pdf-gray); color: var(--pdf-ink); font-family: "Noto Sans JP",sans-serif; font-size: 12px; cursor: pointer; transition: border-color .25s ease, background-color .25s ease; }
.pdf-works-filter__child:has(input:checked) { border-color: var(--pdf-green); background: #fff; }
.pdf-works-filter__parent input,.pdf-works-filter__child input { width: 14px; height: 14px; accent-color: var(--pdf-green); cursor: pointer; }
.pdf-works-filter__clear { display: block; margin-top: 22px; padding: 0; border: 0; background: none; color: #8b9692; font-family: "Noto Sans JP",sans-serif; font-size: 12px; text-decoration: underline; cursor: pointer; }
/* Works — design-1 */
.pdf-works-grid { width: min(calc(100% - 188px),1252px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 46px; margin: 48px auto 260px; }
.pdf-works-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: #8b9692; font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.pdf-works-empty[hidden] { display: none; }
.pdf-work-card { min-width: 0; padding-bottom: 30px; border-bottom: 1px solid rgba(22,32,30,.14); }
.pdf-work-card > a { display: block; }
.pdf-work-card figure { width: 100%; height: auto; aspect-ratio: 562/317; margin: 0 0 22px; overflow: hidden; border-radius: 12px; background: #e4e9e7; }
.pdf-work-card figure img { width: 100%; height: 100%; object-fit: cover; }
.pdf-work-card__client { margin: 0 0 9px; color: rgba(22,32,30,.66); font-family: "Noto Sans JP",sans-serif; font-size: 14px; font-weight: 500; }
.pdf-work-card__client span { display: inline; margin-left: 14px; color: var(--pdf-green); font-size: 14px; line-height: 1; letter-spacing: .02em; }
.pdf-work-card__client span::before { content: "#"; margin-right: 2px; }
.pdf-work-card h2 { margin: 0 0 20px; font-family: "Noto Sans JP",sans-serif; font-size: 16px; line-height: 1.5; font-weight: 500; }
.pdf-work-card figure img { transition: transform .8s cubic-bezier(.22,1,.36,1); }
.pdf-work-card > a:hover figure img { transform: scale(1.025); }
.pdf-work-card .pdf-work-card__more { margin: 20px 0 0; display: inline-flex; align-items: center; gap: 9px; color: rgba(22,32,30,.55); font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1; letter-spacing: .08em; }
.pdf-work-card__more i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(22,32,30,.18); border-radius: 50%; color: var(--pdf-green); font-style: normal; transition: color .3s ease,background .3s ease,border-color .3s ease,transform .35s cubic-bezier(.22,1,.36,1); }
.pdf-work-card > a:hover .pdf-work-card__more i { border-color: var(--pdf-green); color: #fff; background: var(--pdf-green); transform: rotate(45deg); }
.pdf-work-card.is-static > div { cursor: default; }
.pdf-work-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pdf-work-detail__catch { margin: 0 0 30px!important; padding-left: 20px; border-left: 2px solid var(--pdf-gold); font-family: "Noto Sans JP",sans-serif; font-size: 18px!important; line-height: 1.9!important; font-weight: 500; color: var(--pdf-ink)!important; }
.pdf-work-tags span { display: inline-flex; min-height: 20px; align-items: center; padding: 1px 12px; border: 1px solid currentColor; border-radius: 999px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1; white-space: nowrap; }
/* Work / service detail — design-2 and design-3 */
.pdf-detail-heading { position: relative; height: 309px; padding-top: 61px; }
.pdf-detail-heading h1 { margin: 0; font-size: 84px; line-height: 1; font-weight: 400; letter-spacing: -.045em; }
.pdf-breadcrumb { position: absolute; z-index: 2; top: 130px; right: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 13px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1.5; }
.pdf-breadcrumb i { width: 14px; height: 1px; flex: 0 0 14px; background: #aaa; }
.pdf-breadcrumb span { color: #a8adab; }
.pdf-breadcrumb a { transition: color .25s ease; }
.pdf-breadcrumb a:hover { color: var(--pdf-gold); }
.pdf-main-hero > .pdf-breadcrumb,.pdf-contact-heading > .pdf-breadcrumb { top: 205px; }
.pdf-detail-layout { width: min(calc(100% - 246px),1194px); display: grid; grid-template-columns: 312px 861px; gap: 50px; margin-inline: auto; align-items: start; }
.pdf-case-sidebar,.pdf-service-detail-sidebar { padding-top: 4px; font-family: "Noto Sans JP",sans-serif; }
.pdf-case-sidebar { position: sticky; top: 104px; align-self: start; }
.pdf-case-sidebar__client { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.pdf-case-sidebar__client span { display: inline-block; margin-left: 14px; padding: 5px 11px; color: #fff; background: #000; font-size: 14px; line-height: 1; }
.pdf-case-sidebar > h2 { margin: 0 0 15px; font-size: 16px; line-height: 1.5; font-weight: 500; }
.pdf-case-sidebar > .pdf-work-tags { max-width: 300px; }
.pdf-side-nav { position: relative; margin-top: 40px; padding: 17px 0 0 11px; border-top: 1px solid var(--pdf-ink); display: flex; flex-direction: column; align-items: flex-start; }
.pdf-side-nav::before { content: ""; position: absolute; top: 27px; left: -13px; width: 4px; height: 4px; border-radius: 50%; background: var(--pdf-gold); }
.pdf-side-nav a { min-height: 22px; display: inline-flex; align-items: center; padding: 0 0; font-size: 14px; font-weight: 500; }
.pdf-side-nav a.is-active { min-height: 26px; margin-bottom: 2px; padding: 0 12px; color: #fff; border-radius: 2px; background: #000; }
.pdf-side-contact { position: relative; height: 181px; margin-top: 62px; overflow: hidden; display: flex; flex-direction: column; align-items: center; color: #fff; background: #20332f; text-align: center; }
.pdf-side-contact__video { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.pdf-side-contact::before { content: ""; position: absolute; z-index:1; inset: 0; background: rgba(4,17,15,.55); }
.pdf-side-contact > :not(.pdf-side-contact__video) { position: relative; z-index: 2; font-style: normal; }
.pdf-side-contact strong { margin-top: 17px; font-size: 30px; line-height: 1; font-weight: 400; }
.pdf-side-contact span { margin-top: 8px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.pdf-side-contact em { width: 242px; height: 61px; margin-top: 15px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border: 1px solid rgba(255,255,255,.5); font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.pdf-side-contact em i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-style: normal; transition: color .3s ease,background-color .3s ease,border-color .3s ease,transform .35s cubic-bezier(.22,1,.36,1); }
.pdf-case-sidebar .pdf-side-contact { margin-top: 49px; }
.pdf-case-sidebar .pdf-side-nav { padding-left:0; }
.pdf-work-detail__panel { padding: 42px 38px 58px; background: #fff; font-family: "Noto Sans JP",sans-serif; }
.pdf-work-detail__panel > section { scroll-margin-top: 96px; }
.pdf-work-detail__panel > section + section { margin-top: 58px; padding-top: 52px; border-top: 1px solid #e1e4e2; }
/* 罫線を減らして余白で区切る。見出し前の線は「工夫した点」だけに残す。 */
.pdf-work-detail__panel > section#concept,
.pdf-work-detail__panel > section#credits { border-top: 0; }
.pdf-work-detail__panel h2 { margin: 0 0 20px; font-size: 20px; font-weight: 500; }
.pdf-work-detail__lead { margin: 0; padding-left: 16px; border-left: 1px solid var(--pdf-gold); color: #35413e; font-size: 14px; line-height: 1.95; }
.pdf-work-detail__panel figure { margin: 30px 0 0 -38px; width: calc(100% + 76px); }
.pdf-work-detail__panel figure img { width: 100%; height: auto; }
.pdf-work-detail__panel #concept { position:relative; display:block; }
.pdf-work-detail__panel #concept > h2 {
margin-bottom:0;
font-size:25px;
line-height:1.5;
font-weight:400;
}
.pdf-work-detail__panel #concept > h2::after {
content:"Challenges & Concept";
display:block;
margin-top:5px;
color:var(--pdf-green);
font-family:var(--sans);
font-size:14px;
line-height:1.2;
letter-spacing:.07em;
}
.pdf-work-issues {
margin:38px 0 0;
padding:0;
list-style:none;
border-top:1px solid #d9ddda;
}
.pdf-work-issues li {
position:relative;
display:block;
padding:17px 8px 18px 28px;
border-bottom:1px solid #d9ddda;
color:var(--pdf-ink);
font-size:14px;
line-height:1.8;
font-weight:500;
}
.pdf-work-issues li::before {
content:"";
position:absolute;
top:26px;
left:5px;
width:7px;
height:7px;
border-radius:50%;
background:var(--pdf-green);
}
.pdf-work-detail__concept {
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:26px;
align-items:start;
margin:44px 0 0;
padding:26px 0 4px;
color:#35413e;
background:transparent;
}
.pdf-work-detail__concept-label {
padding-top:6px;
color:var(--pdf-gold);
font-family:var(--sans);
font-size:14px;
line-height:1.2;
letter-spacing:.18em;
}
.pdf-work-detail__concept-copy {
margin:0;
color:var(--pdf-ink);
font-size:15px;
line-height:2;
font-weight:400;
}
.pdf-work-point + .pdf-work-point { margin-top: 38px; }
.pdf-work-point h3 { position: relative; margin: 0 0 10px; padding-left: 14px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.pdf-work-point h3::before { content: ""; position: absolute; top: 9px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--pdf-gold); }
.pdf-work-point p { margin: 0 0 12px; color: #35413e; font-size: 14px; line-height: 1.9; }
.pdf-work-point p:last-child { margin-bottom: 0; }
.pdf-work-credits { margin: 0; }
.pdf-work-credits > div { display: grid; grid-template-columns: 128px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid #e1e4e2; }
.pdf-work-credits > div:last-child { border-bottom: 1px solid #e1e4e2; }
.pdf-work-credits dt { color: var(--pdf-gold); font-size: 14px; font-weight: 500; }
.pdf-work-credits dd { margin: 0; color: #35413e; font-size: 14px; line-height: 1.8; }
.pdf-work-credits dd span { color: #6d7772; font-size: 14px; }
.pdf-work-credits dd small { display: block; margin-top: 12px; color: #6d7772; font-size: 14px; line-height: 1.7; }
.pdf-work-credits .pdf-service-scope { margin: 0; }
.pdf-work-detail { padding-bottom: 180px; }
.pdf-service-detail .pdf-detail-heading { height: 357px; }
.pdf-service-detail-sidebar { position: sticky; top: 104px; }
.pdf-service-detail-sidebar .pdf-side-nav { margin-top: 0; }
.pdf-service-detail-sidebar .pdf-side-contact { margin-top: 35px; }
.pdf-service-detail__panel { min-height: 1018px; padding: 34px 37px 72px; border: 1px solid var(--pdf-ink); font-family: "Noto Sans JP",sans-serif; }
.pdf-service-detail__panel > h2,.pdf-service-panel > h2 { margin: 0 0 18px; font-size: 20px; line-height: 1.4; font-weight: 500; }
.pdf-service-detail__panel section,.pdf-service-panel section { margin: 0 0 31px; }
.pdf-service-detail__panel section h3,.pdf-service-panel section h3 { position: relative; margin: 0 0 7px; padding-left: 14px; font-size: 16px; line-height: 1.3; font-weight: 500; }
.pdf-service-detail__panel section h3::before,.pdf-service-panel section h3::before { content: ""; position: absolute; top: 8px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--pdf-gold); }
.pdf-service-detail__panel section p,.pdf-service-panel section p { margin: 0; color: #35413e; font-size: 14px; line-height: 1.85; }
.pdf-approach { margin: 21px 0 92px; padding: 13px 47px 17px; border: 1px solid var(--pdf-green); }
.pdf-service-detail__panel .pdf-approach { margin-top: 10px; }
.pdf-service-detail__panel > section:first-of-type { margin-bottom: 20px; }
.pdf-service-detail__panel > section:nth-of-type(2) { margin-bottom: 19px; }
.pdf-approach h3 { margin: 0 0 6px; color: var(--pdf-green); font-size: 20px; line-height: 1.4; letter-spacing: .08em; font-weight: 500; }
.pdf-approach ul { margin: 0; padding: 0; list-style: none; }
.pdf-approach li { position: relative; padding-left: 18px; color: var(--pdf-green); font-size: 14px; line-height: 1.5; }
.pdf-approach li::before { content: "●"; position: absolute; left: 0; color: var(--pdf-gold); font-size: 14px; }
.pdf-service-detail { padding-bottom: 180px; }
.pdf-service-detail.pdf-page,.pdf-service.pdf-page,.pdf-contact.pdf-page,.pdf-work-detail.pdf-page { overflow: visible; }
/* Service — design-5 */
.pdf-service-layout { width: min(calc(100% - 246px),1194px); display: grid; grid-template-columns: 312px 861px; gap: 50px; align-items: start; margin-top: 42px; padding-bottom: 180px; }
.pdf-service-aside { position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none; }
.pdf-service-aside::-webkit-scrollbar { display: none; }
.pdf-service-tabs { margin-top: 37px; border-top: 1px solid var(--pdf-ink); }
.pdf-service-tabs a { position: relative; width: 100%; display: block; overflow: hidden; border: 0; border-bottom: 1px solid #d7d9d8; padding: 8px 0 9px; color: #cfd2d1; background: transparent; text-align: left; cursor: pointer; transition: color .3s ease,background-color .3s ease; }
.pdf-service-tabs a strong { display: block; font-size: 40px; line-height: 1; font-weight: 400; }
.pdf-service-tabs a span { max-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; overflow: hidden; margin-top: 0; padding-left: 0; color: var(--pdf-ink); font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 2; opacity: 0; transform: translateY(-5px); transition: max-height .62s cubic-bezier(.22,1,.36,1),margin-top .55s cubic-bezier(.22,1,.36,1),opacity .3s ease,transform .48s cubic-bezier(.22,1,.36,1); }
.pdf-service-tabs a span br { display: none; }
.pdf-service-tabs a.is-active { height: auto; color: var(--pdf-ink); }
.pdf-service-tabs a:not(.is-active) { height: 63px; }
.pdf-service-tabs a.is-active span { max-height: 160px; margin-top: 12px; opacity: 1; transform: none; }
.pdf-service-tabs a:not(.is-active):hover { color: #7f8986; background: rgba(15,77,67,.025); }
.pdf-service-aside > .pdf-side-contact { margin-top: 31px; }
/* BUILD / GROW / FLOW を縦に通しで並べる。左メニューはページ内リンク。 */
.pdf-service-stage { background: #fff; }
.pdf-service-panel { padding: 44px 38px 56px; font-family: "Noto Sans JP",sans-serif; scroll-margin-top: 96px; }
.pdf-service-panel + .pdf-service-panel { border-top: 1px solid #e1e4e2; }
.pdf-service-panel__eyebrow { margin: 0 0 14px!important; color: var(--pdf-gold); font-size: 14px; letter-spacing: .18em; }
.pdf-service-panel .pdf-approach { margin: 34px 0 48px; }
.pdf-service-panel > h2 { margin-bottom: 13px; }
.pdf-service-panel__lead { max-width: 680px; margin: 0 0 38px!important; padding-left: 16px; border-left: 1px solid var(--pdf-gold); color: #35413e; font-size: 14px; line-height: 1.9; }
.pdf-service-panel__status { display: inline-block; margin: 0 0 13px!important; color: var(--pdf-gold); font-size: 14px; letter-spacing: .16em; }
.pdf-service-panel__note { margin: 42px 0 0!important; padding-top: 16px; border-top: 1px solid #e1e4e2; color: #727c79; font-size: 14px; line-height: 1.75; }
.pdf-service-panel section { margin-bottom: 42px; }
.pdf-service-scope { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.pdf-service-scope li { min-height: 25px; display: inline-flex; align-items: center; padding: 2px 11px; border: 1px solid #ccd3d0; border-radius: 999px; color: #586460; font-size: 14px; line-height: 1.2; }
/* note への導線。小カテゴリタグ(角丸枠線のチップ)と紛れないよう、装飾は下線のみにする */
.note-link { position: relative; margin-top: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 0 0 3px; border-bottom: 1px solid #c7cdca; color: #35413e; font-size: 14px; line-height: 1; transition: color .25s ease, border-color .25s ease; }
.note-link__mark { display: inline-flex; align-items: center; color: var(--pdf-gold); }
.note-link__mark .note-link__logo { width: 38px; height: auto; display: block; }
.note-link i { font-style: normal; color: var(--pdf-gold); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.note-link:hover { color: var(--pdf-ink); border-color: var(--pdf-ink); }
.note-link:hover i { transform: translate(2px,-2px); }
/* note記事の埋め込み。section(max-width:680px)いっぱいに広げ、本文の幅と揃える */
.note-embed-group { max-width: 100%; display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding-bottom: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c7cdca transparent; }
.note-embed-wrap { position: relative; flex: 0 0 min(100%,460px); max-width: 100%; margin-top: 18px; scroll-snap-align: start; }
.note-embed-group .note-embed-wrap { margin-top: 0; }
.note-embed-group--count-1 { overflow: visible; padding-bottom: 0; }
.note-embed-group--count-1 .note-embed-wrap { flex-basis: min(100%,460px); }
.note-embed-wrap iframe.note-embed { display: block; width: 100%; border: 0; border-radius: 10px; pointer-events: none; }
.note-embed-hit { position: absolute; z-index: 2; inset: 0; display: block; border-radius: 10px; cursor: pointer; touch-action: pan-x pan-y; }
.note-embed-hit:focus-visible { outline: 2px solid var(--pdf-gold); outline-offset: 3px; }
/* Service detail content */
.pdf-service-detail-section { scroll-margin-top: 110px; padding-bottom: 70px; margin-bottom: 70px; border-bottom: 1px solid #dce1df; }
.pdf-service-detail-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.pdf-service-detail-section > h2 { margin: 0 0 34px; font-size: 28px; line-height: 1.45; font-weight: 500; letter-spacing: -.025em; }
.pdf-service-detail__eyebrow { margin: 0 0 13px!important; color: var(--pdf-gold); font-size: 14px; letter-spacing: .14em; }
.pdf-service-detail__lead { margin: 0 0 42px!important; padding-left: 17px; border-left: 1px solid var(--pdf-gold); color: #35413e; font-size: 14px; line-height: 1.9; }
.pdf-service-detail-section .pdf-approach { margin: 30px 0 0; }
.pdf-service-deliverables { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #dce1df; border-left: 1px solid #dce1df; }
.pdf-service-deliverables section { min-height: 320px; margin: 0; padding: 24px 26px 28px; border-right: 1px solid #dce1df; border-bottom: 1px solid #dce1df; }
.pdf-service-deliverables section > span { color: var(--pdf-gold); font-size: 14px; }
.pdf-service-deliverables section h3 { margin: 54px 0 15px; padding: 0; font-size: 16px; }
.pdf-service-deliverables section h3::before { display: none; }
.pdf-service-deliverables section p { font-size: 14px; line-height: 1.85; }
.pdf-service-deliverables ul { margin: 20px 0 0; padding: 15px 0 0; border-top: 1px solid #e5e8e6; list-style: none; }
.pdf-service-deliverables li { position: relative; padding-left: 13px; font-size: 14px; line-height: 1.9; }
.pdf-service-deliverables li::before { content: ""; position: absolute; top: .78em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--pdf-gold); }
.pdf-service-flow { margin: 0; padding: 0; border-top: 1px solid var(--pdf-ink); list-style: none; }
.pdf-service-flow li { min-height: 118px; display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid #dce1df; }
.pdf-service-flow li > span { color: var(--pdf-gold); font-size: 14px; }
.pdf-service-flow h3 { margin: 0 0 8px; padding: 0; font-size: 15px; }
.pdf-service-flow h3::before { display: none; }
.pdf-service-flow p { font-size: 14px!important; }
.pdf-service-faq { border-top: 1px solid var(--pdf-ink); }
.pdf-service-faq details { border-bottom: 1px solid #dce1df; }
.pdf-service-faq summary { position: relative; min-height: 68px; display: flex; align-items: center; padding: 16px 52px 16px 0; font-size: 14px; line-height: 1.6; cursor: pointer; list-style: none; }
.pdf-service-faq summary::-webkit-details-marker { display: none; }
.pdf-service-faq summary i { position: absolute; right: 8px; font-style: normal; font-size: 18px; font-weight: 300; transition: transform .3s ease; }
.pdf-service-faq details[open] summary i { transform: rotate(45deg); }
.pdf-service-faq details p { margin: -4px 50px 22px 0; color: #596460; font-size: 14px; line-height: 1.85; }
/* Small interaction and focus polish without changing the base layout */
.pdf-page a:focus-visible,.pdf-page button:focus-visible,.pdf-page summary:focus-visible { outline: 2px solid var(--pdf-gold); outline-offset: 4px; }
.pdf-side-contact { transition:filter .35s ease; }
.pdf-side-contact em { transition: color .3s ease,background-color .3s ease,border-color .3s ease; }
.pdf-side-contact:hover { filter:brightness(1.04); }
.pdf-side-contact:hover em { color: var(--pdf-ink); border-color: #fff; background: #fff; }
.pdf-side-contact:hover em i { color:#fff; border-color:var(--pdf-green); background:var(--pdf-green); transform:rotate(45deg); }
.pdf-side-nav a { transition: color .25s ease,padding-left .3s cubic-bezier(.22,1,.36,1); }
.pdf-side-nav a:not(.is-active):hover { padding-left: 5px; color: var(--pdf-gold); }
.pdf-main-hero figure img { animation: pdf-hero-image-in 1.15s cubic-bezier(.22,1,.36,1) both; }
@keyframes pdf-hero-image-in { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes pdf-service-content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Contact — design-4 */
.pdf-contact-heading { position: relative; height: 296px; padding-top: 141px; }
.pdf-contact-heading h1 { margin: 0 0 27px; font-size: 84px; line-height: 1; font-weight: 400; letter-spacing: -.045em; }
.pdf-contact-heading p { margin: 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1.2; }
.pdf-contact-layout { min-height: 1488px; display: grid; grid-template-columns: 564px 688px; }
.pdf-contact-layout > aside { position: sticky; top: 104px; align-self: start; padding-top: 69px; font-family: "Noto Sans JP",sans-serif; }
.pdf-contact-layout > aside h2 { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.pdf-contact-layout > aside > p { margin: 0 0 15px; font-size: 14px; line-height: 1.22; }
.pdf-contact-logos { width: 479px; display: grid; grid-template-columns: 160px 159px 160px; grid-template-rows: repeat(2,73px); border-top: 1px solid #d8dcdd; border-left: 1px solid #d8dcdd; }
.pdf-contact-logos > span { display: flex; align-items: center; justify-content: center; gap: 5px; border-right: 1px solid #d8dcdd; border-bottom: 1px solid #d8dcdd; }
.pdf-contact-logos img { max-width: 70%; max-height: 45px; object-fit: contain; }
.pdf-contact-logos > span:last-child img { max-width: 34%; max-height: 35px; }
.pdf-contact-form { padding: 21px 77px 65px 120px; border-left: 2px dotted #9b9b9b; font-family: "Noto Sans JP",sans-serif; }
.pdf-contact-form fieldset { margin: 0; padding: 0; border: 0; }
.pdf-contact-form legend,.pdf-field,.pdf-name-field legend { font-size: 14px; font-weight: 500; }
.pdf-contact-form b { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid #ff3131; color: #ff3131; background: transparent; font-size: 14px; line-height: 1.2; font-weight: 400; }
.pdf-choice-grid { display: grid; gap: 10px 17px; margin-top: 12px; }
.pdf-choice-grid--two { grid-template-columns: 235px 235px; gap: 10px 19px; }
.pdf-choice-grid--four { grid-template-columns: 161px 106px 115px; gap: 10px 14px; }
.pdf-choice-grid--services { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 12px; }
/* CF7は[radio]/[checkbox]をwpcf7-form-control-wrap > wpcf7-form-control >
wpcf7-list-item > label という4段の入れ子で出力する。display:gridの
直接の子でなければ各選択肢が個別のグリッドセルにならないため、
labelまでの中間ラッパーをdisplay:contentsで消して見た目上は
labelがグリッドの直接の子であるかのように振る舞わせる。 */
.pdf-choice-grid .wpcf7-form-control-wrap,
.pdf-choice-grid .wpcf7-form-control,
.pdf-choice-grid .wpcf7-list-item { display: contents!important; }
.pdf-choice-grid label { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #dfe2e3; background: var(--pdf-gray); font-size: 14px; white-space: nowrap; cursor: pointer; }
.pdf-choice-grid label:has(input:checked) { border-color: var(--pdf-green); background: #fff; }
.pdf-choice-grid input,.pdf-privacy input { position: absolute; opacity: 0; }
/* Contact Form 7は
という構造で出力するため、独自のではなくこのspanに::beforeで丸を描く。
inputはposition:absoluteでレイアウトから外れているため、間隔はgapではなく
padding-leftで確保する。 */
.pdf-choice-grid .wpcf7-list-item-label,.pdf-privacy .wpcf7-list-item-label { position: relative; padding-left: 31px; }
.pdf-choice-grid .wpcf7-list-item-label::before,.pdf-privacy .wpcf7-list-item-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid #d1d5d6; border-radius: 50%; background: #fff; }
.pdf-choice-grid input:checked + .wpcf7-list-item-label::before { box-shadow: inset 0 0 0 4px #fff; background: var(--pdf-green); }
.pdf-service-choices { margin-top: 29px!important; }
.pdf-service-choices > h3 { margin: 17px 0 0; padding-bottom: 8px; border-bottom: 1px solid #dfe2e3; color: #d9dfe0; font-size: 14px; font-weight: 500; }
.pdf-service-choices > h3:nth-of-type(2) { margin-top: 30px; }
.pdf-service-choices > h3:nth-of-type(3) { margin-top: 22px; }
.pdf-service-choices .pdf-choice-grid { margin-top: 12px; }
.pdf-service-choices > .pdf-choice-grid:nth-of-type(1) { margin-bottom: 13px; }
.pdf-service-choices > .pdf-choice-grid:nth-of-type(2) { margin-bottom: 5px; }
.pdf-service-choices > .pdf-choice-grid:nth-of-type(3) { margin-bottom: 9px; }
.pdf-service-choices .pdf-choice-grid--four label:last-child { grid-column: 1; width: 106px; }
.pdf-field { display: block; margin-top: 31px; }
.pdf-field small,.pdf-name-field small { display: block; margin: 9px 0; color: #d9dfe0; font-size: 14px; font-weight: 400; }
.pdf-field input,.pdf-name-field input { width: 100%; height: 42px; border: 0; border-radius: 0; padding: 0 13px; color: var(--pdf-ink); background: var(--pdf-gray); outline: 0; font-size: 14px; }
.pdf-field input::placeholder,.pdf-name-field input::placeholder { color: #8f9492; opacity: 1; }
.pdf-name-field { margin-top: 21px!important; }
.pdf-name-field + .pdf-field { margin-top: 16px; }
.pdf-name-field > div { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; }
.pdf-privacy { margin-top: 63px!important; }
.pdf-privacy p { margin: 12px 0 17px; font-size: 14px; line-height: 1.5; }
.pdf-privacy label { height: 42px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #dfe2e3; background: #fff; font-size: 14px; cursor: pointer; }
.pdf-privacy input:checked + .wpcf7-list-item-label::before { border-radius: 2px; box-shadow: inset 0 0 0 4px #fff; background: var(--pdf-green); }
/* ::after はには描画できないため、送信ボタンはで
包み、サイズと装飾疑似要素をこのwrapper側に持たせる（inputは中身を100%で埋めるだけ）。 */
.pdf-submit-wrap { display: block; margin-top: 31px; }
/* display:blockはブラウザ標準の[hidden]{display:none}より強いため、
hidden属性を付けても消えない。ステップ切り替えで確実に隠すために明示する。 */
.pdf-contact-form [hidden] { display: none!important; }
/* CF7の.wpcf7-spinnerはvisibility:hiddenで見えないが幅24pxを持つため、
通常配置のままだと余白ができてしまう。絶対配置で高さに影響させない。 */
.pdf-submit-wrap .wpcf7-spinner { position: absolute; top: 50%; right: 24px; margin: 0; transform: translateY(-50%); }
/* 送信CTA: ヘッダーと同じ深緑をベースに、ゴールドは細いヘアラインとして
差し色で使う。面で金を敷くより締まって見え、サイト全体のトンマナに揃う。 */
.pdf-contact-form input[type="submit"],
.pdf-contact-form .pdf-review-btn {
display: block; width: 100%; height: 88px;
border: 0; border-radius: 2px;
color: #fff;
background: linear-gradient(150deg, #14584c 0%, #0f4d43 52%, #0b3a33 100%);
font-family: "Noto Sans JP",sans-serif;
font-size: 15px; font-weight: 500; letter-spacing: .16em;
cursor: pointer;
}
/* 確認画面: 入力内容の一覧＋「戻る」+ 実際の送信ボタン（.pdf-submit-wrapごと移動）。
確認・サンクス表示中は.pdf-contact-layoutに.is-focusedが付き、左の実績asideを隠して
フォーム側1カラムに寄せる。 */
.pdf-contact-layout.is-focused { grid-template-columns: 1fr; }
.pdf-contact-layout.is-focused > aside { display: none; }
.pdf-contact-layout.is-focused .pdf-contact-form { max-width: 640px; margin: 0 auto; padding: 21px 0 65px; border-left: 0; }
.pdf-contact-confirm { margin-top: 31px; padding: 40px 44px; border: 1px solid #e3e6e5; background: #fff; }
.pdf-contact-confirm__lead { margin: 0 0 26px; padding-left: 16px; border-left: 1px solid var(--pdf-gold); font-size: 15px; font-weight: 500; line-height: 1.6; }
.pdf-contact-confirm__list { margin: 0; border-top: 1px solid #ececec; }
.pdf-contact-confirm__row { display: grid; grid-template-columns: 140px 1fr; gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid #ececec; }
.pdf-contact-confirm__row dt { margin: 0; font-size: 13px; font-weight: 500; color: #8f9492; }
.pdf-contact-confirm__row dd { margin: 0; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.pdf-contact-confirm__actions { margin-top: 32px; }
.pdf-contact-confirm__back {
display: inline-flex; align-items: center; gap: 9px;
min-height: 39px; padding: 7px 22px;
border: 1px solid var(--pdf-ink); border-radius: 999px;
background: transparent; color: var(--pdf-ink);
font-family: "Noto Sans JP",sans-serif; font-size: 13px;
cursor: pointer; transition: background-color .25s ease, color .25s ease;
}
.pdf-contact-confirm__back:hover { background: var(--pdf-ink); color: #fff; }
/* サンクス画面: フォーム送信完了後、form全体を隠して代わりに表示する。 */
.pdf-contact-thanks { padding: 56px 44px; border: 1px solid #e3e6e5; background: #fff; text-align: center; }
.pdf-contact-thanks__icon { display: grid; place-items: center; margin: 0 auto 24px; }
.pdf-contact-thanks__title { margin: 0 0 14px; font-size: 22px; font-weight: 500; }
.pdf-contact-thanks__body { margin: 0 0 34px; font-size: 15px; line-height: 1.9; color: #4b5250; }
.pdf-contact-thanks .pill-link { margin: 0 auto; }
.pdf-contact { padding-bottom: 120px; }
@media (max-width: 900px) {
.pdf-page { padding-top: 72px; }
.pdf-shell,.pdf-detail-layout,.pdf-service-layout { width: calc(100% - 48px); }
.pdf-main-hero { padding-top: 72px; }
.pdf-main-hero h1,.pdf-detail-heading h1,.pdf-contact-heading h1 { font-size: 68px; }
.pdf-main-hero figure { height: auto; aspect-ratio: 1915/821; }
.pdf-about-vision__text { font-size: 38px; }
.pdf-about-stance__list article { grid-template-columns:140px minmax(0,1fr); gap:28px; }
.pdf-about-stance__no { font-size:116px; }
.pdf-about-stance__list article > div { grid-template-columns:1fr; gap:14px; }
.pdf-about-message { grid-template-columns: 1fr; }
.pdf-about-message figure { position: static; width: 100%; }
.pdf-about-ecosystem { padding-top: 150px; }
.pdf-about-ecosystem__flow { grid-template-columns: 1fr; gap: 16px; }
.pdf-about-ecosystem__arrow { width: 1px; height: 16px; margin: 0 auto; }
.pdf-about-ecosystem__arrow::after { top: auto; right: 50%; bottom: -1px; transform: translateX(50%) rotate(45deg); }
.pdf-about-company { grid-template-columns: 1fr; }
.pdf-works-filter { width: calc(100% - 48px); margin-top: 36px; }
.pdf-works-filter__panel { padding: 24px 20px; }
.pdf-works-grid { max-width: none; width: calc(100% - 48px); grid-template-columns: 1fr; gap: 32px; margin: 40px auto 160px; }
.pdf-work-card figure { width: 100%; height: auto; aspect-ratio: 562/317; }
.pdf-detail-layout,.pdf-service-layout { grid-template-columns: 1fr; gap: 48px; }
.pdf-case-sidebar,.pdf-service-aside,.pdf-service-detail-sidebar,.pdf-contact-layout > aside { position: static; max-height: none; overflow: visible; }
.pdf-service-aside,.pdf-service-detail-sidebar { width: min(100%,420px); }
.pdf-service-stage { min-height: 0; }
.pdf-breadcrumb,.pdf-detail-heading .pdf-breadcrumb,.pdf-main-hero > .pdf-breadcrumb,.pdf-contact-heading > .pdf-breadcrumb { position: static; display: flex; margin-top: 20px; }
.pdf-main-hero > .pdf-breadcrumb { margin-bottom: 28px; }
.pdf-contact-heading { height: auto; padding-bottom: 48px; }
.pdf-contact-layout { grid-template-columns: 1fr; }
.pdf-contact-form { padding-right: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
.pdf-shell,.pdf-detail-layout,.pdf-service-layout { width: calc(100% - 32px); }
.pdf-main-hero { padding-top: 54px; }
.pdf-main-hero h1,.pdf-detail-heading h1,.pdf-contact-heading h1 { font-size: 52px; }
.pdf-about-vision { padding: 64px 0 80px; }
.pdf-about-vision__row + .pdf-about-vision__row { margin-top: 54px; }
.pdf-about-vision__text:not(.pdf-about-vision__text--sub) { font-size: clamp(21px,6.4vw,25px); line-height: 1.55; letter-spacing: -.035em; white-space: nowrap; }
.pdf-about-vision__text--sub { font-size: 15px; line-height: 1.9; }
.pdf-about-stance { padding-bottom: 90px; }
.pdf-about-stance__head h2 { font-size: 28px; }
.pdf-about-stance__head h2 br { display: block; }
.pdf-about-stance__list { margin-top: 54px; }
.pdf-about-stance__list article { min-height:0; grid-template-columns:92px minmax(0,1fr); gap:16px; align-items:start; padding:28px 0; overflow:visible; }
.pdf-about-stance__no { align-self:start; margin:4px 0 0; font-size:66px; line-height:1; }
.pdf-about-stance__list article > div { align-self:start; padding:0; }
.pdf-about-stance__list h3 { font-size: 17px; }
.pdf-about-stance__list p { font-size: 14px; }
.pdf-about-message figure { height: auto; aspect-ratio: 548/365; }
.pdf-about-message h2 { font-size: 21px; }
.pdf-about-message > div > p { font-size: 14px; }
.pdf-about-message__name { margin-top: 50px; }
.pdf-about-ecosystem { padding-top: 90px; padding-bottom: 90px; }
.pdf-about-ecosystem__head { margin-bottom: 44px; }
.pdf-about-ecosystem__head h2 { font-size: 28px; }
.pdf-about-company h2 { font-size: 42px; }
.pdf-about-company { padding: 60px 0 120px; gap: 50px; }
.pdf-about-company dl > div { grid-template-columns: 90px 1fr; font-size: 14px; }
.pdf-works-filter { width: calc(100% - 32px); margin-top: 28px; }
.pdf-works-filter__panel { padding: 20px 16px; }
.pdf-works-filter__toggle { width: 100%; justify-content: center; }
.pdf-works-grid { width: calc(100% - 32px); gap: 28px; margin: 32px auto 120px; }
.pdf-work-card { padding-bottom: 26px; }
.pdf-work-card figure { margin-bottom: 18px; border-radius: 10px; }
.pdf-detail-heading { height: 230px; padding-top: 55px; }
.pdf-service-detail .pdf-detail-heading { height: 250px; }
.pdf-side-contact { max-width: 312px; }
.pdf-work-detail__panel,.pdf-service-detail__panel,.pdf-service-panel { padding: 28px 22px; }
.pdf-work-detail__catch { margin-bottom: 24px!important; padding-left: 14px; font-size: 15px!important; }
.pdf-work-detail__panel > p,.pdf-service-detail__panel section p,.pdf-service-panel section p { font-size: 14px; }
.pdf-service-panel__lead,.pdf-service-detail__lead { font-size: 14px; }
.pdf-service-detail-section { padding-bottom: 52px; margin-bottom: 52px; }
.pdf-service-detail-section > h2 { font-size: 24px; }
.pdf-service-deliverables { grid-template-columns: 1fr; }
.pdf-service-deliverables section { min-height: 0; }
.pdf-service-deliverables section h3 { margin-top: 35px; }
.pdf-service-flow li { grid-template-columns: 42px 1fr; gap: 12px; }
.pdf-work-detail__panel figure { width: calc(100% + 44px); margin-left: -22px; }
.pdf-approach { padding: 14px 20px; }
.pdf-approach li { font-size: 14px; }
.pdf-contact-heading { height: auto; padding-top: 55px; padding-bottom: 42px; }
.pdf-contact-layout > aside { padding-top: 45px; padding-bottom: 80px; }
.pdf-contact-logos { width: 100%; grid-template-columns: repeat(3,1fr); }
.pdf-choice-grid--two,.pdf-choice-grid--four { grid-template-columns: 1fr; }
.pdf-choice-grid--services { grid-template-columns: 1fr; }
.pdf-choice-grid label { white-space: normal; }
.pdf-service-choices .pdf-choice-grid--four label:last-child { width: auto; }
.pdf-name-field > div { gap: 12px; }
}
/* Header / menu / home motion fidelity */
.site-header { z-index: 203; }
.site-header__quick { display:flex; align-items:center; gap:32px; margin-right:48px; font-size:16px; transition:opacity .3s cubic-bezier(.4,.4,0,1); }
.site-header__quick a { position:relative; padding-block:10px; }
.site-header__quick a::after { content:""; position:absolute; right:100%; bottom:7px; left:0; height:1px; background:currentColor; transition:right .25s ease; }
.site-header__quick a:hover::after { right:0; }
.menu-button { z-index:204; width:39px; height:16px; padding:0; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.menu-button span { width:39px; height:1px; flex:0 0 1px; background:currentColor; transform-origin:center; transition:width .3s,margin .3s,transform .35s cubic-bezier(.22,1,.36,1); }
.menu-button span:nth-child(2) { width:31px; margin-left:8px; }
.menu-button[aria-expanded="true"] span:nth-child(1) { width:32px; transform:translate(4px,2.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { width:32px; margin-left:0; transform:translate(4px,-2.5px) rotate(-45deg); }
.menu-open .menu-button { color:#fff; }
/* パネル上に×が重なるので、下層ページ（ink色のバー）でも開いている間は白に */
body.menu-open .site-header .menu-button span { background:#fff; }
/* ヘッダー(z:200)はパネル(z:195)より上にあり、クイックナビがパネルに重なる。
中身はパネル側と同じ導線なので開いている間は伏せる（ロゴは残す）。 */
.menu-open .site-header__quick { opacity:0; pointer-events:none; }
/* ---------------------------------------------------------------
グローバルメニュー
soine.jp の実測値に準拠したカード型パネル。
幅260 / padding40 / radius16 / gap20（= 高さ398px）、
モーション: opacity 0→1 ＋ translate 20px -10px → 0 を
0.4s cubic-bezier(.4,.4,0,1) で。子要素は個別に動かさず
パネルごと1枚で動かす（soineも子のtransitionを切っている）。
背景は暗転させず、ページのスクロールも止めない。
--------------------------------------------------------------- */
.site-menu__scrim { position:fixed; z-index:190; inset:0; opacity:0; pointer-events:none; }
.site-menu__scrim.is-open { pointer-events:auto; }
.site-menu {
position:fixed; z-index:195; top:22px; right:50px;
width:260px; padding:40px;
display:flex; flex-direction:column; gap:20px;
color:#fff; background:var(--green);
border-radius:16px;
visibility:hidden; opacity:0; translate:20px -10px;
transition:opacity .4s cubic-bezier(.4,.4,0,1),translate .4s cubic-bezier(.4,.4,0,1),visibility 0s .4s;
}
.site-menu.is-open { visibility:visible; opacity:1; translate:0 0; transition:opacity .4s cubic-bezier(.4,.4,0,1),translate .4s cubic-bezier(.4,.4,0,1),visibility 0s; }
/* ヘッダーが縮むとハンバーガーも上がるので、パネルの角も追従させる */
.site-header.is-compact ~ .site-menu { top:12px; }
.site-menu__links { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.site-menu__links a { display:inline-flex; align-items:center; gap:7px; padding:5px 0; font-size:18px; line-height:1.6; letter-spacing:.02em; transition:transform .3s cubic-bezier(.4,.4,0,1),opacity .3s cubic-bezier(.4,.4,0,1); }
.site-menu__links a i { font-style:normal; font-size:14px; opacity:0; translate:-6px 0; transition:opacity .3s cubic-bezier(.4,.4,0,1),translate .3s cubic-bezier(.4,.4,0,1); }
.site-menu__links a:hover { transform:translateX(4px); }
.site-menu__links a:hover i { opacity:.75; translate:0 0; }
.site-menu__cta { display:flex; flex-direction:column; gap:10px; }
.site-menu__cta a { height:47px; display:grid; place-items:center; border-radius:6px; font-family:"Noto Sans JP",sans-serif; font-size:15px; transition:color .3s cubic-bezier(.4,.4,0,1),background .3s cubic-bezier(.4,.4,0,1),border-color .3s cubic-bezier(.4,.4,0,1); }
.site-menu__cta--fill { color:var(--green); background:#fff; border:1px solid #fff; }
.site-menu__cta--fill:hover { color:var(--green); background:rgba(255,255,255,.82); border-color:rgba(255,255,255,.82); }
@media (max-width:960px) { .site-menu { right:24px; } }
.video-stage { --mv-copy:1; --concept-progress:0; }
.hero__copy { animation:mv-copy-in 1.2s .18s both cubic-bezier(.22,1,.36,1); }
@keyframes mv-copy-in { from { opacity:0; filter:blur(12px); transform:translate(-50%,24px); } to { opacity:var(--mv-copy); filter:blur(calc((1 - var(--mv-copy)) * 10px)); transform:translate(-50%,0); } }
.concept__inner { opacity:var(--concept-progress); transform:translateY(calc((1 - var(--concept-progress)) * 42px)); filter:blur(calc((1 - var(--concept-progress)) * 10px)); will-change:opacity,transform,filter; }
@media (max-width: 760px) {
.site-header__quick { display:none; }
.site-menu { padding:21px 24px 22px; }
.site-menu__top > span { display:none; margin-right:0; }
.site-menu__logo { width:144px; }
.site-menu__body { grid-template-columns:1fr; gap:42px; margin:90px 0 auto; }
.site-menu__links li { grid-template-columns:32px 1fr; }
.site-menu__links a { min-height:83px; font-size:clamp(38px,12vw,54px); }
.site-menu__links a i { width:38px; height:38px; font-size:14px; }
.site-menu__aside { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:end; }
.site-menu__aside p { display:none; }
.site-menu__aside > a { font-size:14px; }
.site-menu__aside small { margin:0; text-align:right; font-size:14px; }
.site-menu__bottom { font-size:14px; }
.concept__inner { transform:translateY(calc((1 - var(--concept-progress)) * 28px)); }
}
@media (prefers-reduced-motion: reduce) {
.hero__copy { animation:none; }
.concept__inner { opacity:1; transform:none; filter:none; }
.site-menu,.site-menu__links a { transition-duration:.01ms; }
}
/* =========================================================
SUB PAGES V5 — NUVIRA editorial system
========================================================= */
:root {
--sub-bg: #f6f5f0;
--sub-ink: #13201d;
--sub-green: #103f37;
--sub-green-2: #205c50;
--sub-gold: #ae8b55;
--sub-line: rgba(19,32,29,.16);
--sub-radius: 26px;
}
.sub-page { overflow: hidden; color: var(--sub-ink); background: var(--sub-bg); }
.sub-page em { font-style: normal; color: var(--sub-gold); }
.sub-page h1,.sub-page h2,.sub-page h3,.sub-page p { margin-top: 0; }
.sub-hero { padding: 145px 0 100px; }
.sub-hero__eyebrow { display:flex; justify-content:space-between; align-items:center; padding:0 0 19px; border-bottom:1px solid var(--sub-line); font-size:14px; letter-spacing:.16em; }
.sub-hero__eyebrow a { transition:opacity .25s; }
.sub-hero__eyebrow a:hover { opacity:.5; }
.sub-hero__heading { display:grid; grid-template-columns:1fr 330px; align-items:end; gap:60px; min-height:260px; padding:58px 0 44px; }
.sub-hero__heading h1 { margin:0; font-size:clamp(88px,10.5vw,152px); line-height:.78; font-weight:400; letter-spacing:-.065em; }
.sub-hero__heading p { margin:0 0 7px; padding-left:24px; border-left:1px solid var(--sub-gold); font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2; letter-spacing:.06em; }
.sub-forest { position:relative; height:430px; margin:0; overflow:hidden; border-radius:var(--sub-radius); background:#071410; }
.sub-forest::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(3,15,11,.45)); }
.sub-forest img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
.sub-forest.is-visible img { transform:scale(1.025); }
.sub-forest figcaption { position:absolute; z-index:2; right:28px; bottom:23px; left:28px; display:flex; justify-content:space-between; color:#fff; font-size:14px; letter-spacing:.16em; }
.sub-label { display:flex; align-items:center; gap:12px; margin:0; font-size:14px; letter-spacing:.15em; }
.sub-label span { display:grid; place-items:center; width:28px; height:28px; border:1px solid currentColor; border-radius:50%; font-size:14px; }
.sub-label--light { color:#fff; }
.sub-section-head { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.sub-section-head h2 { margin:0; font-size:clamp(42px,4.8vw,68px); line-height:1.12; font-weight:400; letter-spacing:-.045em; }
.sub-next { min-height:330px; margin-top:110px; margin-bottom:110px; padding:48px 56px; display:grid; grid-template-columns:1fr auto 72px; align-items:center; gap:45px; border-radius:var(--sub-radius); color:#fff; background:var(--sub-green); transition:background .35s,transform .35s; }
.sub-next:hover { background:#0a302a; transform:translateY(-4px); }
.sub-next > span { font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:1.8; }
.sub-next > span small { display:block; margin-bottom:12px; font-family:var(--sans); font-size:14px; letter-spacing:.16em; opacity:.6; }
.sub-next strong { font-size:clamp(64px,8vw,116px); line-height:.8; font-weight:400; letter-spacing:-.06em; }
.sub-next i { display:grid; place-items:center; width:72px; height:72px; border:1px solid rgba(255,255,255,.35); border-radius:50%; font-style:normal; font-size:24px; transition:transform .35s,background .35s,color .35s; }
.sub-next:hover i { transform:rotate(45deg); background:#fff; color:var(--sub-green); }
/* About */
.about-concept { padding:110px 0 135px; }
.about-concept__body { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-top:75px; }
.about-concept__body h2 { margin:0; font-size:clamp(52px,6.1vw,88px); line-height:1.08; font-weight:400; letter-spacing:-.055em; }
.about-concept__copy { max-width:510px; padding-top:9px; font-family:"Noto Sans JP",sans-serif; }
.about-concept__copy p { font-size:14px; line-height:2.25; letter-spacing:.04em; }
.about-concept__copy .about-concept__lead { margin-bottom:45px; font-size:20px; line-height:2; letter-spacing:.06em; }
.about-concept__lead i { color:var(--sub-gold); font-family:var(--sans); font-size:1.15em; }
.about-philosophy { padding:115px 0 125px; background:#e8e9e3; }
.about-values { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:72px; }
.about-value { min-height:470px; padding:29px 30px 33px; display:flex; flex-direction:column; border-radius:20px; background:#f7f6f1; }
.about-value--dark { color:#fff; background:var(--sub-green); transform:translateY(28px); }
.about-value > span { font-size:14px; opacity:.58; }
.about-value > small { margin-top:55px; font-size:14px; letter-spacing:.16em; opacity:.6; }
.about-value h3 { margin:24px 0 0; font-family:"Noto Sans JP",sans-serif; font-size:25px; line-height:1.65; font-weight:500; letter-spacing:.03em; }
.about-value p { margin:auto 0 0; padding-top:34px; border-top:1px solid currentColor; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2; opacity:.7; }
.about-founder { display:grid; grid-template-columns:1.04fr .96fr; gap:0; padding-top:150px; padding-bottom:150px; }
.about-founder__media { position:relative; height:720px; margin:0; overflow:hidden; border-radius:var(--sub-radius) 0 0 var(--sub-radius); background:#dfe4dd; }
.about-founder__media img { width:100%; height:100%; object-fit:cover; }
.about-founder__media figcaption { position:absolute; left:25px; bottom:22px; padding:9px 13px; color:#fff; background:rgba(10,27,23,.55); backdrop-filter:blur(8px); font-size:14px; letter-spacing:.14em; }
.about-founder__copy { min-height:720px; padding:58px 62px; border:1px solid var(--sub-line); border-left:0; border-radius:0 var(--sub-radius) var(--sub-radius) 0; }
.about-founder__copy h2 { margin:100px 0 45px; font-family:"Noto Sans JP",sans-serif; font-size:clamp(36px,4.2vw,58px); line-height:1.45; font-weight:500; letter-spacing:.02em; }
.about-founder__copy > p { max-width:510px; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.2; }
.about-founder__sign { margin-top:48px; padding-top:22px; border-top:1px solid var(--sub-line); }
.about-founder__sign small,.about-founder__sign strong { display:block; }
.about-founder__sign small { font-size:14px; letter-spacing:.12em; opacity:.55; }
.about-founder__sign strong { margin-top:8px; font-family:"Noto Sans JP",sans-serif; font-size:16px; font-weight:500; }
.about-company { padding:105px 0; border-top:1px solid var(--sub-line); }
.about-company dl { width:66%; margin:75px 0 0 auto; }
.about-company dl div { display:grid; grid-template-columns:155px 1fr; gap:30px; padding:26px 0; border-top:1px solid var(--sub-line); font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:1.9; }
.about-company dl div:last-child { border-bottom:1px solid var(--sub-line); }
.about-company dt { color:var(--sub-gold); }
.about-company dd { margin:0; }
/* Works */
.works-intro { display:grid; grid-template-columns:.65fr 1.1fr .8fr; gap:50px; align-items:start; padding:110px 0 90px; }
.works-intro h2 { margin:0; font-size:clamp(48px,5.5vw,76px); line-height:1.08; font-weight:400; letter-spacing:-.05em; }
.works-intro > p:last-child { padding-top:9px; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.15; }
.works-grid { display:grid; grid-template-columns:1fr 1fr; gap:85px 18px; }
.work-tile { min-width:0; }
.work-tile--featured { grid-column:1/-1; }
.work-tile figure { height:500px; margin:0 0 23px; overflow:hidden; border-radius:20px; background:#e6e8e3; }
.work-tile--featured figure { height:690px; }
.work-tile figure img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.work-tile--featured figure img { object-fit:cover; }
.work-tile:hover figure img { transform:scale(1.025); }
.work-tile__meta,.work-tile__foot { display:flex; justify-content:space-between; align-items:center; }
.work-tile__meta { padding-bottom:18px; border-bottom:1px solid var(--sub-line); font-size:14px; letter-spacing:.14em; }
.work-tile h2,.work-tile h3 { margin:26px 0 44px; font-family:"Noto Sans JP",sans-serif; font-weight:500; letter-spacing:.02em; }
.work-tile h2 { font-size:39px; line-height:1.5; }
.work-tile h3 { min-height:78px; font-size:22px; line-height:1.65; }
.work-tile__foot { font-size:14px; letter-spacing:.08em; }
.work-tile__foot p { margin:0; font-family:"Noto Sans JP",sans-serif; }
.work-tile__foot i { display:grid; place-items:center; min-width:52px; height:52px; padding:0 17px; border:1px solid var(--sub-line); border-radius:99px; font-style:normal; transition:.3s; }
.work-tile:hover .work-tile__foot i { color:#fff; border-color:var(--sub-green); background:var(--sub-green); }
.works-confidential { display:grid; grid-template-columns:.7fr 1.6fr auto; gap:50px; align-items:center; margin-top:130px; padding:40px 0; border-top:1px solid var(--sub-line); border-bottom:1px solid var(--sub-line); }
.works-confidential span,.works-confidential a { font-size:14px; letter-spacing:.14em; }
.works-confidential p { margin:0; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2; }
/* Service overview */
.service-intro { display:grid; grid-template-columns:.6fr 1.4fr; gap:70px; padding:110px 0 85px; }
.service-intro > div { display:grid; grid-template-columns:1.1fr .7fr; gap:70px; }
.service-intro h2 { margin:0; font-size:clamp(50px,5.6vw,78px); line-height:1.08; font-weight:400; letter-spacing:-.05em; }
.service-intro > div > p { padding-top:9px; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.15; }
.capability { display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start; }
.capability__nav { position:sticky; top:95px; display:grid; gap:1px; overflow:hidden; border-radius:20px; background:var(--sub-line); }
.capability__nav button { position:relative; height:150px; display:grid; grid-template-columns:35px 1fr auto; align-items:center; padding:20px 22px; border:0; text-align:left; background:#edece6; cursor:pointer; transition:color .35s,background .35s; }
.capability__nav button span { align-self:start; padding-top:3px; font-size:14px; opacity:.55; }
.capability__nav button strong { font-size:30px; font-weight:400; letter-spacing:-.035em; }
.capability__nav button small { writing-mode:vertical-rl; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.capability__nav button.is-active { color:#fff; background:var(--sub-green); }
.capability__nav button::after { content:""; position:absolute; right:19px; bottom:17px; width:0; height:1px; background:var(--sub-gold); transition:width .35s; }
.capability__nav button.is-active::after { width:42px; }
.capability__stage { min-height:925px; }
.cap-panel { padding:55px 58px 60px; border-radius:20px; background:#fff; opacity:0; transform:translateY(14px); transition:opacity .36s,transform .36s; }
.cap-panel.is-active { opacity:1; transform:none; }
.cap-panel[hidden] { display:none; }
.cap-panel header { position:relative; min-height:300px; padding-bottom:45px; border-bottom:1px solid var(--sub-line); }
.cap-panel header p,.cap-panel header span { font-size:14px; letter-spacing:.14em; }
.cap-panel header h2 { margin:72px 0 0; font-family:"Noto Sans JP",sans-serif; font-size:clamp(38px,4.4vw,60px); line-height:1.5; font-weight:500; letter-spacing:.03em; }
.cap-panel header span { position:absolute; right:0; bottom:18px; color:var(--sub-gold); }
.cap-panel__lead { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; padding:48px 0; }
.cap-panel__lead h3 { margin:0; font-family:"Noto Sans JP",sans-serif; font-size:17px; font-weight:500; }
.cap-panel__lead p { margin:0; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.1; }
.cap-panel__cards { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--sub-line); border:1px solid var(--sub-line); }
.cap-panel__cards a { min-height:124px; display:grid; grid-template-columns:34px 1fr auto; grid-template-rows:auto auto; align-items:center; padding:20px 22px; background:#fff; transition:background .3s,color .3s; }
.cap-panel__cards a:hover { color:#fff; background:var(--sub-green); }
.cap-panel__cards a > span { grid-row:1/3; align-self:start; font-size:14px; opacity:.55; }
.cap-panel__cards a strong { font-family:"Noto Sans JP",sans-serif; font-size:15px; font-weight:500; }
.cap-panel__cards a small { align-self:start; font-size:14px; letter-spacing:.08em; opacity:.55; }
.cap-panel__cards a i { grid-column:3; grid-row:1/3; font-style:normal; transition:transform .3s; }
.cap-panel__cards a:hover i { transform:rotate(45deg); }
.service-issues { margin-top:125px; padding:100px 0; border-top:1px solid var(--sub-line); }
.service-issues h2 { margin:60px 0 60px 34%; font-size:clamp(44px,5.2vw,72px); line-height:1.15; font-weight:400; letter-spacing:-.05em; }
.service-issues ul { width:66%; margin:0 0 0 auto; padding:0; list-style:none; }
.service-issues li { position:relative; padding:25px 55px 25px 0; border-top:1px solid var(--sub-line); font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.service-issues li:last-child { border-bottom:1px solid var(--sub-line); }
.service-issues li::after { content:"↗"; position:absolute; right:5px; color:var(--sub-gold); }
/* Contact */
.sub-hero--contact { padding-bottom:30px; }
.sub-hero--contact .sub-hero__heading { min-height:340px; }
.contact-layout { display:grid; grid-template-columns:.82fr 1.18fr; border-top:1px solid var(--sub-line); }
.contact-intro { position:relative; padding:85px 75px 110px 0; border-right:1px solid var(--sub-line); }
.contact-intro h2 { margin:85px 0 45px; font-size:clamp(44px,4.7vw,66px); line-height:1.13; font-weight:400; letter-spacing:-.05em; }
.contact-intro > p { max-width:410px; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.15; }
.contact-details { margin-top:70px; }
.contact-details div { padding:18px 0; display:flex; justify-content:space-between; border-top:1px solid var(--sub-line); font-size:14px; letter-spacing:.11em; }
.contact-details div:last-child { border-bottom:1px solid var(--sub-line); }
.contact-details strong { font-weight:400; }
.contact-trust { margin-top:75px; }
.contact-trust > span { font-size:14px; letter-spacing:.13em; }
.contact-trust > div { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.contact-trust img { width:100%; height:62px; padding:13px; object-fit:contain; filter:grayscale(1); border:1px solid var(--sub-line); }
.contact-v5 { padding:85px 0 110px 80px; }
.contact-v5 fieldset,.contact-v5 > label { margin:0 0 52px; padding:0; border:0; }
.contact-v5 legend,.contact-v5 small { display:block; width:100%; margin-bottom:17px; font-family:"Noto Sans JP",sans-serif; font-size:14px; font-weight:500; }
.contact-v5 legend > span,.contact-v5 small > span { margin-right:12px; color:var(--sub-gold); font-family:var(--sans); font-size:14px; }
.contact-v5 legend i,.contact-v5 small i { float:right; padding:3px 6px; color:#fff; background:var(--sub-gold); font-style:normal; font-size:14px; font-weight:400; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.choice-grid label { cursor:pointer; }
.choice-grid input { position:absolute; opacity:0; pointer-events:none; }
.choice-grid label > span { min-height:56px; display:flex; align-items:center; padding:12px 15px; border:1px solid var(--sub-line); font-family:"Noto Sans JP",sans-serif; font-size:14px; transition:.25s; }
.choice-grid input:checked + span { color:#fff; border-color:var(--sub-green); background:var(--sub-green); }
.choice-grid--services label > span { min-height:78px; align-items:flex-start; flex-direction:column; justify-content:center; }
.choice-grid--services b { margin-bottom:4px; font-family:var(--sans); font-size:14px; font-weight:400; }
.contact-v5__row { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:52px; }
.contact-v5__row label { min-width:0; }
.contact-v5 input[type="text"],.contact-v5 input[type="email"],.contact-v5 input[type="tel"],.contact-v5 textarea { width:100%; border:0; border-bottom:1px solid var(--sub-line); border-radius:0; outline:0; background:transparent; font-family:"Noto Sans JP",sans-serif; transition:border-color .25s; }
.contact-v5 input[type="text"],.contact-v5 input[type="email"],.contact-v5 input[type="tel"] { height:55px; }
.contact-v5 textarea { min-height:185px; padding:17px 0; resize:vertical; }
.contact-v5 input:focus,.contact-v5 textarea:focus { border-color:var(--sub-green); }
.contact-v5__privacy { display:flex!important; gap:10px; align-items:center; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.contact-v5__privacy input { accent-color:var(--sub-green); }
.contact-v5__privacy a { border-bottom:1px solid; }
.contact-v5__submit { width:100%; min-height:125px; display:flex; justify-content:space-between; align-items:center; padding:25px 32px; border:0; color:#fff; background:var(--sub-gold); cursor:pointer; text-align:left; transition:background .3s; }
.contact-v5__submit:hover { background:#947343; }
.contact-v5__submit span { font-family:"Noto Sans JP",sans-serif; font-size:15px; }
.contact-v5__submit small { margin:0 0 10px; color:inherit; font-family:var(--sans); font-size:14px; letter-spacing:.13em; opacity:.65; }
.contact-v5__submit i { display:grid; place-items:center; width:55px; height:55px; border:1px solid rgba(255,255,255,.45); border-radius:50%; font-style:normal; transition:transform .3s; }
.contact-v5__submit:hover i { transform:rotate(45deg); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: var(--sans);
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
/* The expanded Works surface must not create scrollable overflow below the footer. */
.nuvira-home {
overflow: clip;
}
/* メニューはカード型でページを覆わないので、開いていてもスクロールは止めない */
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.section-shell { width: min(calc(100% - 188px), var(--shell)); margin-inline: auto; }
/* Header */
.site-header {
position: absolute;
z-index: 200; /* メニューパネル(195)より上。ハンバーガーが×として押せるように */
top: 0;
left: 0;
width: 100%;
height: 93px;
display: flex;
align-items: center;
padding: 0 50px;
color: #fff;
transition: transform .35s ease, background-color .35s ease, height .35s ease;
}
.site-header.is-compact {
position: fixed;
height: 72px;
background: rgba(11, 28, 25, .78);
backdrop-filter: blur(14px);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header--dark { color: var(--ink); }
.site-header--dark.is-compact { background: rgba(251, 250, 247, .9); color: var(--ink); }
.site-header__logo { display: block; width: 208px; margin-right: auto; }
.site-header__logo img { width: 100%; height: auto; }
.site-header__nav { display: flex; align-items: center; gap: 32px; margin-right: 48px; font-size: 16px; }
.site-header__nav a { position: relative; padding-block: 10px; }
.site-header__nav a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 7px;
height: 1px;
background: #fff;
transition: right .25s ease;
}
.site-header__nav a:hover::after { right: 0; }
.site-header--dark .site-header__nav a::after { background: var(--ink); }
.menu-button {
width: 39px;
height: 28px;
border: 0;
padding: 5px 0;
background: transparent;
display: grid;
align-content: center;
gap: 5px;
cursor: pointer;
}
.menu-button span { display: block; width: 39px; height: 1px; background: #fff; transition: transform .25s ease, opacity .25s ease; }
.site-header--dark .menu-button span { background: var(--ink); }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Video background and shared scenes */
.video-stage {
--mv-darkness: .08;
--mv-copy: 1;
position: relative;
background: #081511;
}
.video-stage__media {
position: sticky;
z-index: 0;
top: 0;
height: 100vh;
margin-bottom: -100vh;
overflow: hidden;
/* video要素そのものが描画されない環境(自動再生ブロックや
メディアを止める設定)でも背景が黒く抜けないよう、同じ絵をCSSでも敷く。
再生できる環境では動画が全面を覆うので見た目は変わらない。 */
background-image: url("assets/video/mv-poster.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #081511;
}
.video-stage__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.video-stage__media video.is-poster {
top: -2%;
left: -20%;
width: 120%;
height: 120%;
}
.video-stage__darkness {
position: absolute;
inset: 0;
background: #000;
opacity: var(--mv-darkness);
will-change: opacity;
}
.scene { position: relative; z-index: 1; min-height: 834px; overflow: hidden; }
.scene__photo {
position: absolute;
z-index: 0;
top: -2%;
left: -20%;
width: 120%;
height: 120%;
max-width: none;
object-fit: cover;
}
.scene__shade { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.scene__shade--hero { background: linear-gradient(180deg, rgba(7,17,16,.02), rgba(4,14,13,.24)); }
.scene__shade--dark { background: rgba(0, 0, 0, .52); }
.scene__shade--mist { background: rgba(255,255,255,.8); backdrop-filter: blur(3px) saturate(.85); }
/* Hero */
.hero { height: 834px; color: #fff; }
.hero__copy {
position: absolute;
z-index: 2;
top: 434px;
left: 50%;
width: min(1100px, calc(100% - 100px));
transform: translateX(-50%);
text-align: center;
opacity: var(--mv-copy);
filter: blur(calc((1 - var(--mv-copy)) * 10px));
translate: 0 calc((1 - var(--mv-copy)) * 28px);
will-change: opacity, filter, translate;
}
.hero__copy h1 {
margin: 0;
font-size: clamp(82px, 9.3vw, 134px);
line-height: 1.2;
font-weight: 400;
letter-spacing: -.035em;
white-space: nowrap;
}
.hero__copy h1 small { font-size: .55em; font-weight: 400; letter-spacing: -.025em; }
.hero__copy p { margin: -2px 0 0; font-family: "Noto Sans JP", sans-serif; font-size: 36px; line-height: 1.6; letter-spacing: .02em; }
/* MV下部のLINE CTAは、キャッチコピーと同じ進行度で一緒に消す */
.line-contact {
opacity: var(--mv-copy);
translate: 0 calc((1 - var(--mv-copy)) * 28px);
will-change: opacity, translate;
}
.video-stage.is-mv-passed .line-contact { pointer-events: none; }
.line-contact {
position: absolute;
z-index: 3;
right: 50px;
bottom: 24px;
width: 91px;
height: 91px;
border: 1px solid rgba(255,255,255,.7);
border-radius: 50%;
display: grid;
place-content: center;
gap: 2px;
text-align: center;
color: #fff;
font-family: "Noto Sans JP", sans-serif;
font-size: 12px;
line-height: 13px;
transition: background-color .25s ease, color .25s ease;
}
.line-contact:hover { background: #fff; color: var(--ink); }
.line-contact__mark { display: grid; place-items: center; height: 20px; margin-bottom: 2px; }
.line-contact__mark svg { width: 22px; height: auto; display: block; }
/* MVを過ぎてから右下に出す固定LINE CTA */
.line-float {
position: fixed;
z-index: 40;
right: 50px;
bottom: 24px;
width: 91px;
height: 91px;
display: grid;
place-content: center;
gap: 2px;
border-radius: 50%;
text-align: center;
color: #fff;
background: var(--green);
box-shadow: 0 14px 34px -14px rgba(9, 26, 22, .55);
font-family: "Noto Sans JP", sans-serif;
font-size: 12px;
line-height: 13px;
opacity: 0;
translate: 0 18px;
pointer-events: none;
visibility: hidden;
transition: opacity .38s ease, translate .38s cubic-bezier(.22,1,.36,1), background-color .25s ease, visibility 0s linear .38s;
}
.line-float.is-visible {
opacity: 1;
translate: 0 0;
pointer-events: auto;
visibility: visible;
transition: opacity .38s ease, translate .38s cubic-bezier(.22,1,.36,1), background-color .25s ease, visibility 0s;
}
.line-float:hover { background: #0b3b33; color: #fff; }
.line-float__mark { display: grid; place-items: center; height: 20px; margin-bottom: 2px; }
.line-float__mark svg { width: 22px; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) {
.line-float { transition: opacity .2s linear, visibility 0s linear .2s; translate: none; }
.line-float.is-visible { translate: none; transition: opacity .2s linear, visibility 0s; }
}
/* Concept */
.concept { height: 834px; color: #fff; }
.concept__inner { position: relative; z-index: 2; width: min(100%, 1100px); height: 100%; margin: 0 auto; padding-top: 84px; text-align: center; }
.concept h2 { margin: 0 0 28px; font-size: 64px; line-height: 1.2; font-weight: 400; }
.concept__text { font-family: "Noto Sans JP", sans-serif; font-size: 16px; line-height: 2.6; }
.concept__text p { margin: 0 0 9px; }
.concept__br--sp { display: none; }
.concept__en { margin: 24px 0 0; font-size: 20px; }
.concept__tag { margin: -4px 0 0; font-family: "Noto Sans JP", sans-serif; font-size: 36px; line-height: 2.1; }
/* Services */
.services { min-height: 930px; color: #fff; }
.services__inner { position: relative; z-index: 2; padding-top: 69px; }
.services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-bottom: 27px; }
.services__head h2 { margin: 0; font-size: 64px; line-height: 1.18; font-weight: 400; }
.services__head > p { margin: 0 0 4px; font-family: "Noto Sans JP", sans-serif; font-size: 16px; line-height: 2; }
.service-accordion { border-top: 1px solid rgba(255,255,255,.7); }
.service-row { border-bottom: 1px solid rgba(255,255,255,.62); }
.service-row > button {
width: 100%;
min-height: 83px;
display: grid;
grid-template-columns: 83px 125px auto;
align-items: center;
border: 0;
padding: 0 2px;
text-align: left;
background: transparent;
cursor: pointer;
opacity: .62;
}
.service-row.is-active > button { opacity: 1; }
.service-row__no { font-size: 20px; letter-spacing: .1em; }
.service-row strong { font-size: 34px; font-weight: 400; }
.service-row em { font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-style: normal; }
.service-row__panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.service-row.is-active .service-row__panel { grid-template-rows: 1fr; opacity: 1; }
.service-row__body {
min-height: 0;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) 483px;
gap: 98px;
padding: 0 60px 0 86px;
visibility: hidden;
transform: translateY(-10px);
transition: visibility 0s linear .45s, transform .55s cubic-bezier(.22,1,.36,1), padding .55s cubic-bezier(.22,1,.36,1);
}
.service-row.is-active .service-row__body {
visibility: visible;
transform: none;
padding-bottom: 27px;
transition-delay: 0s;
}
.service-row__body p { margin: 0 0 9px; font-family: "Noto Sans JP", sans-serif; font-size: 15px; line-height: 2; }
.service-row__body ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 12px; padding: 0; list-style: none; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 2; }
.service-row__body li::before { content: ""; width: 5px; height: 5px; margin-right: 9px; display: inline-block; border-radius: 50%; background: currentColor; vertical-align: middle; transform: translateY(-1px); }
.service-row__body img { width: 483px; height: 272px; object-fit: cover; border-radius: 2px; }
.service-row__image--grow { filter: hue-rotate(25deg) saturate(.75); }
.service-row__image--flow { filter: grayscale(.35) sepia(.18) hue-rotate(125deg); }
.pill-link {
min-width: 159px;
width: auto;
white-space: nowrap;
gap: 18px;
min-height: 39px;
padding: 7px 21px 7px 25px;
border: 1px solid var(--ink);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: space-between;
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
transition: background .25s ease, color .25s ease;
}
.pill-link:hover { background: var(--ink); color: #fff; }
.pill-link--light { border-color: #fff; }
.pill-link--light:hover { background: #fff; color: var(--ink); }
/* Works */
.works {
--works-surface-inset: 2.5%;
--works-surface-radius: 10px;
--works-surface-top: 0px;
--works-surface-bottom: 0px;
--works-surface-offset: 0px;
--works-surface-scale: 1;
--works-pinned-height: auto;
--works-pinned-width: var(--shell);
--works-content-opacity: 1;
--works-content-offset: 0px;
--works-content-blur: 0px;
height: auto;
overflow: visible;
min-height: 0;
padding-bottom: 34px;
}
.works .scene__shade--mist {
top: var(--works-surface-top);
right: var(--works-surface-inset);
bottom: var(--works-surface-bottom);
left: var(--works-surface-inset);
background: #fff;
border-radius: var(--works-surface-radius);
backdrop-filter: none;
transform: translateY(var(--works-surface-offset)) scale(var(--works-surface-scale));
transform-origin: center center;
will-change: transform, border-radius;
}
/*
* Once the Works sequence reaches the centre, keep the expanding white sheet
* in the visual viewport. A transformed absolute element can enlarge WebKit's
* scrollable overflow even when an ancestor uses overflow:clip, which showed
* up on iPhone as a large blank area below the footer.
*/
.works.is-surface-pinned .scene__shade--mist {
position: fixed;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
width: 95vw;
height: var(--works-pinned-height);
transform: translate(-50%, -50%) scale(var(--works-surface-scale));
}
.works__inner {
position: relative;
z-index: 2;
padding-top: 60px;
opacity: var(--works-content-opacity);
transform: translateY(var(--works-content-offset));
filter: blur(var(--works-content-blur));
will-change: opacity, transform, filter;
}
.works.is-content-pinned {
height: var(--works-pinned-height);
z-index: 3;
}
.works.is-content-pinned .works__inner {
position: fixed;
z-index: 4;
top: 50%;
left: 50%;
width: min(var(--works-pinned-width), calc(100% - 32px));
margin: 0;
transform: translate(-50%, calc(-50% + var(--works-content-offset)));
}
.works__head { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.works__head h2 { margin: 0; font-size: 64px; line-height: 1.2; font-weight: 400; }
.works__head p { margin: 0 0 5px; font-family: "Noto Sans JP", sans-serif; font-size: 16px; line-height: 2; text-align: right; }
.works__toolbar { position: absolute; z-index: 3; top: 178px; right: 0; display: grid; justify-items: end; gap: 30px; }
.works__arrows { display: flex; gap: 12px; }
.works__arrows button {
width: 56px; height: 56px; display: grid; place-items: center;
border: 1px solid rgba(22,32,30,.2); border-radius: 50%;
background: rgba(255,255,255,.55); backdrop-filter: blur(6px);
color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer;
transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.works__arrows button:hover { border-color: var(--green); background: var(--green); color: #fff; transform: translateY(-3px); }
.works__arrows button:active { transform: translateY(-1px); }
.works__arrows button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.works__toolbar > a {
position: relative; display: inline-flex; align-items: center; gap: 16px;
padding: 0 2px 11px; border-bottom: 1px solid rgba(22,32,30,.28);
font-family: "Noto Sans JP", sans-serif; font-size: 15px; letter-spacing: .04em;
transition: color .3s ease, border-color .3s ease;
}
.works__toolbar > a span { color: var(--green); transition: transform .32s cubic-bezier(.22,1,.36,1); }
.works__toolbar > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; border-top: 1px solid var(--green); transition: right .38s cubic-bezier(.22,1,.36,1); }
.works__toolbar > a:hover { color: var(--green); }
.works__toolbar > a:hover::after { right: 0; }
.works__toolbar > a:hover span { transform: translate(4px, -4px); }
/* activeカードは270px(queue幅)→648pxへ幅がアニメーションする。その途中、
タグが2段に折り返す瞬間があり、旧450pxだとoverflow:hiddenで下段が
見切れていた。2段になっても収まるよう余裕を持たせている。 */
.works-carousel { position: relative; height: 520px; overflow: hidden; contain: layout paint; }
.work-card { position: absolute; margin: 0; padding: 0; will-change: left,top,width,opacity,transform; transition: left .82s cubic-bezier(.22,1,.36,1),top .82s cubic-bezier(.22,1,.36,1),width .82s cubic-bezier(.22,1,.36,1),opacity .5s ease,transform .82s cubic-bezier(.22,1,.36,1),filter .55s ease; }
.work-card[data-slot="active"] { z-index: 4; top: 0; left: 0; width: 648px; opacity: 1; transform: none; filter: none; }
.work-card[data-slot="queue-1"] { z-index: 3; top: 174px; left: 688px; width: 270px; opacity: .92; transform: none; filter: saturate(.88); }
.work-card[data-slot="queue-2"] { z-index: 2; top: 174px; left: 980px; width: 270px; opacity: .52; transform: scale(.975); transform-origin: left center; filter: saturate(.55); }
.work-card[data-slot="hidden-right"] { z-index: 1; top: 174px; left: 1280px; width: 270px; opacity: 0; pointer-events: none; }
.work-card[data-slot="hidden-left"] { z-index: 1; top: 0; left: -680px; width: 648px; opacity: 0; pointer-events: none; }
.work-card[data-slot="leaving"] { z-index: 5; top: 0; left: -680px; width: 648px; opacity: 0; transform: scale(.975); pointer-events: none; }
.work-card.is-resetting { transition: none!important; opacity: 0!important; }
.work-card__image { height: 196px; overflow: hidden; border-radius: 10px; background: linear-gradient(90deg, #cfcac7, #e5e1dd, #c9c5c3); transition: height .82s cubic-bezier(.22,1,.36,1),border-radius .45s ease; }
.work-card[data-slot="active"] .work-card__image,.work-card[data-slot="leaving"] .work-card__image { height: 370px; }
.work-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.work-card a:hover .work-card__image img { transform: scale(1.018); }
.work-card__image--web img { object-position: top; object-fit: contain; padding: 14px 40px 0; }
.work-card h3 { margin: 14px 0 7px; font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; }
.work-card:not([data-slot="active"]) h3 { font-size: 14px; }
.work-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: "Noto Sans JP", sans-serif; font-size: 12px; }
.work-card li { padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px; }
.work-card:not([data-slot="active"]) li { font-size: 12px; }
.works-carousel__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* About */
/* About（トップページ）— 左に宣言文、右に3領域のベン図 */
.about { position: relative; z-index: 2; padding: 124px 0 132px; background: var(--paper); }
.about.is-scroll-linked { background: transparent; }
.about.is-scroll-linked .about__intro.reveal,
.about.is-scroll-linked .venn.reveal {
opacity: var(--about-reveal-opacity, 0);
transform: translateY(var(--about-reveal-offset, 32px));
filter: blur(var(--about-reveal-blur, 8px));
transition: none;
will-change: opacity, transform, filter;
}
.about.is-scroll-linked:not(.is-transition-ready) .about__inner {
visibility: hidden;
}
.about__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about__eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 26px; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.about__eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.about__intro h2 { margin: 0 0 54px; color: var(--green); font-size: clamp(64px, 6.6vw, 92px); line-height: 1; font-weight: 400; letter-spacing: -.02em; }
.about__statement { margin: 0 0 44px; font-family: "Noto Sans JP", sans-serif; font-size: clamp(21px, 1.85vw, 26px); line-height: 2.35; font-weight: 500; letter-spacing: .03em; }
/* ベン図 */
.venn {
position: relative;
width: min(100%, 560px);
margin-inline: auto;
aspect-ratio: 1;
color: var(--green);
isolation: isolate;
}
.venn__orbit {
position: absolute;
inset: 2%;
border: 1px solid rgba(15,77,67,.42);
border-radius: 50%;
opacity: 0;
animation: venn-orbit 15s linear infinite;
animation-play-state: paused;
transition: opacity .72s cubic-bezier(.22,1,.36,1);
will-change: transform, opacity;
}
.venn__orbit-dot {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 1px rgba(15,77,67,.05);
}
.venn__orbit-dot:nth-child(1) { top: 4.5%; left: 20%; }
.venn__orbit-dot:nth-child(2) { top: 27%; right: -.9%; }
.venn__orbit-dot:nth-child(3) { right: 11%; bottom: 8.5%; }
.venn__orbit-dot:nth-child(4) { left: -.8%; bottom: 38%; }
.venn__cluster {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
}
.venn__item {
position: absolute;
width: 38%;
aspect-ratio: 1;
border-radius: 50%;
opacity: 0;
filter: blur(6px);
transform: scale(.72);
transition:
opacity .66s cubic-bezier(.22,1,.36,1),
filter .78s cubic-bezier(.22,1,.36,1),
transform .88s cubic-bezier(.16,1,.3,1);
transform-origin: center;
backface-visibility: hidden;
will-change: opacity, filter, transform;
}
.venn__item--build { z-index: 1; top: 17%; left: 31%; background: #0f4d43; }
.venn__item--grow { z-index: 2; top: 46%; left: 14%; background: #769286; }
.venn__item--flow { z-index: 2; top: 46%; right: 14%; background: #b0894e; }
.venn__item-inner {
width: 100%;
height: 100%;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
font-size: clamp(14px, 1.34vw, 19px);
line-height: 1;
font-weight: 600;
letter-spacing: -.02em;
}
.venn__brand {
position: absolute;
z-index: 4;
top: 55.5%;
left: 50%;
color: #fff;
font-size: clamp(20px, 2.45vw, 35px);
line-height: 1;
font-weight: 600;
letter-spacing: -.045em;
opacity: 0;
filter: blur(6px);
transform: translate(-50%, -50%) scale(.7);
transition: opacity .4s ease, filter .5s ease, transform .62s cubic-bezier(.16,1,.3,1);
pointer-events: none;
}
.venn.is-entered .venn__orbit {
opacity: 1;
animation-play-state: running;
}
.venn.is-entered .venn__item,
.venn.is-entered .venn__brand {
opacity: 1;
filter: none;
}
.venn.is-entered .venn__item { transform: scale(1); }
.venn.is-entered .venn__brand { transform: translate(-50%, -50%) scale(1); }
.venn.is-entered .venn__item--build { transition-delay: .04s; }
.venn.is-entered .venn__item--grow { transition-delay: .12s; }
.venn.is-entered .venn__item--flow { transition-delay: .2s; }
.venn.is-entered .venn__brand { transition-delay: .27s; }
@keyframes venn-orbit { to { transform: rotate(360deg); } }
/* Contact */
.contact { position: relative; min-height: 424px; overflow: hidden; background: var(--green); color: #fff; }
.contact__inner { position: relative; min-height: 424px; padding-top: 120px; display: flex; justify-content: space-between; align-items: flex-start; }
.contact h2 { margin: 0 0 10px; font-family: "Noto Sans JP", sans-serif; font-size: 32px; font-weight: 400; }
.contact p:not(.contact__word) { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 16px; }
.contact__button { width: 308px; height: 84px; margin-top: 8px; padding-inline: 44px; border: 1px solid #fff; border-radius: 999px; display: flex; justify-content: space-between; align-items: center; font-family: "Noto Sans JP", sans-serif; font-size: 16px; transition: background .25s ease, color .25s ease; }
.contact__button:hover { background: #fff; color: var(--green); }
.contact__word { position: absolute; z-index: 0; left: -218px; top: 180px; margin: 0; white-space: nowrap; color: rgba(255,255,255,.12); font-size: 194px; line-height: 1.25; letter-spacing: -.035em; }
.contact__word { left:50%; width:100vw; overflow:hidden; transform:translateX(-50%); }
.contact__word-track { width:max-content; display:flex; animation:contact-word-loop 28s linear infinite; will-change:transform; }
.contact__word-set { display:flex; flex:none; }
.contact__word-set i { display:block; padding-right:.36em; font-style:normal; }
@keyframes contact-word-loop { to { transform:translate3d(-50%,0,0); } }
.contact__inner > *:not(.contact__word) { position: relative; z-index: 1; }
/* Footer */
.site-footer { padding: 92px 0 28px; color: #fff; background: #0a1b18; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 80px; padding-bottom: 76px; }
.site-footer__brand img { width: 208px; }
.site-footer__brand p { margin: 30px 0 0; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.68); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, 150px); gap: 70px; }
.site-footer__nav > div { display: flex; flex-direction: column; gap: 11px; }
.site-footer__nav p { margin: 0 0 12px; color: rgba(255,255,255,.46); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; }
.site-footer__nav a { font-size: 16px; }
.site-footer__nav a:hover { opacity: .6; }
.site-footer__bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.5); font-size: 14px; }
.site-footer__bottom div { display: flex; gap: 30px; }
/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.video-stage { --mv-copy: 1 !important; --mv-darkness: .5 !important; }
.reveal { opacity: 1; transform: none; transition: none; }
.about.is-scroll-linked .about__intro.reveal,
.about.is-scroll-linked .venn.reveal { filter: none; }
.venn.is-entered .venn__item,
.venn.is-entered .venn__brand { opacity: 1; filter: none; transition: none; }
.venn.is-entered .venn__item { transform: scale(1); }
.venn.is-entered .venn__brand { transform: translate(-50%, -50%) scale(1); }
* { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
/* About Usの円は15秒で1周するだけの穏やかな回転で、点滅も移動もしない。
視差効果を減らす設定でも意匠として回し続ける（上の * 指定を打ち消す）。 */
.venn__orbit {
animation-name: venn-orbit !important;
animation-duration: 15s !important;
animation-timing-function: linear !important;
animation-iteration-count: infinite !important;
}
}
/* =========================================================
Lower pages — editorial system
========================================================= */
.lower-page {
--lower-border: rgba(22,32,30,.18);
overflow: clip;
padding: 0 0 130px;
background:
radial-gradient(circle at 80% 4%, rgba(196,210,201,.28), transparent 24%),
var(--paper);
}
.lower-masthead { padding: 166px 0 76px; }
.lower-masthead__meta {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid var(--lower-border);
color: #65716d;
font-size: 14px;
letter-spacing: .13em;
text-transform: uppercase;
}
.lower-masthead__meta span:nth-child(2) { text-align: center; }
.lower-masthead__title-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 50px;
align-items: end;
padding: 52px 0 50px;
}
.lower-masthead__title {
margin: 0;
font-size: clamp(82px, 9.3vw, 134px);
line-height: .75;
font-weight: 400;
letter-spacing: -.055em;
text-transform: uppercase;
}
.lower-masthead__title span { display: block; overflow: hidden; padding-bottom: .16em; animation: masthead-rise .9s cubic-bezier(.22,1,.36,1) both; }
.lower-masthead__title span:nth-child(2) { animation-delay: .1s; }
.lower-masthead__title span:nth-child(2) { padding-left: .72em; color: var(--green); }
.lower-masthead__lead {
margin: 0 0 11px;
padding-left: 25px;
border-left: 1px solid var(--ink);
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
line-height: 2;
}
.lower-masthead__foot { display: flex; gap: 22px; align-items: center; color: #66716d; font-size: 14px; letter-spacing: .14em; }
.lower-masthead__line { height: 1px; flex: 1; background: var(--lower-border); }
@keyframes masthead-rise { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
.lower-content { display: grid; gap: 30px; }
.editorial-label {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
color: #5f6d68;
font-size: 14px;
letter-spacing: .14em;
text-transform: uppercase;
}
.editorial-label span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; letter-spacing: 0; }
.editorial-label--light { color: rgba(255,255,255,.64); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.section-heading h2 { margin: 0; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; font-weight: 400; letter-spacing: -.035em; }
/* About */
.about-statement {
min-height: 760px;
overflow: hidden;
border-radius: 30px;
display: grid;
grid-template-columns: .9fr 1.1fr;
background: #fff;
box-shadow: 0 24px 70px rgba(22,32,30,.08);
}
.about-statement__copy { position: relative; z-index: 2; padding: 72px 32px 66px 72px; }
.about-statement__copy h2 { margin: 76px 0 46px; font-size: clamp(52px, 5.7vw, 82px); line-height: .98; font-weight: 400; letter-spacing: -.05em; }
.about-statement__copy h2 em { color: var(--green); font-style: normal; }
.about-statement__jp { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 17px; line-height: 2; }
.about-statement__visual { position: relative; overflow: hidden; background: linear-gradient(145deg, #d8e0db, #aebdb6); }
.about-statement__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,29,25,.42)); pointer-events: none; }
.about-statement__visual img { position: absolute; z-index: 2; right: -100px; bottom: -215px; width: 760px; max-width: none; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.about-statement:hover .about-statement__visual img { transform: scale(1.025) translateY(-8px); }
.about-statement__orbit {
position: absolute;
top: 58px;
right: 54px;
width: 210px;
height: 210px;
border: 1px solid rgba(22,32,30,.22);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 14px;
letter-spacing: .13em;
animation: orbit-spin 24s linear infinite;
}
.about-statement__caption { position: absolute; z-index: 3; right: 40px; bottom: 36px; color: #fff; text-align: right; }
.about-statement__caption span { display: block; margin-bottom: 3px; font-size: 14px; letter-spacing: .12em; }
.about-statement__caption strong { font-size: 19px; font-weight: 400; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.about-manifesto {
position: relative;
min-height: 590px;
overflow: hidden;
border-radius: 30px;
padding: 76px 74px;
color: #fff;
background: #0b2520;
}
.about-manifesto__grid { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; margin-top: 105px; }
.about-manifesto__grid h2 { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: clamp(36px, 4vw, 58px); line-height: 1.5; font-weight: 400; }
.about-manifesto__grid > div { font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 2.25; }
.about-manifesto__grid p { margin: 0 0 24px; }
.about-manifesto__word { position: absolute; right: -20px; bottom: -92px; margin: 0; color: rgba(255,255,255,.055); font-size: 220px; line-height: 1; letter-spacing: -.05em; }
.about-principles { padding: 125px 0 105px; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.principle-card {
min-height: 430px;
border: 1px solid var(--lower-border);
border-radius: 22px;
padding: 28px 30px 34px;
display: flex;
flex-direction: column;
background: #fff;
transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.principle-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(22,32,30,.1); }
.principle-card--green { color: #fff; background: var(--green); }
.principle-card--sand { background: #dfd8c9; }
.principle-card__top { display: flex; justify-content: space-between; font-size: 14px; }
.principle-card__top i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.principle-card__en { margin: auto 0 0; font-size: 58px; line-height: 1; letter-spacing: -.04em; }
.principle-card h3 { margin: 13px 0 27px; font-family: "Noto Sans JP", sans-serif; font-size: 25px; font-weight: 400; }
.principle-card > p:last-child { max-width: 290px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.9; }
.about-facts { padding: 68px 0 105px; border-top: 1px solid var(--lower-border); }
.about-facts__grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 54px; }
.about-facts__grid > div { min-height: 190px; padding: 0 35px; border-left: 1px solid var(--lower-border); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.about-facts__grid > div:last-child { border-right: 1px solid var(--lower-border); }
.about-facts__grid strong { font-size: 96px; line-height: .8; font-weight: 400; letter-spacing: -.06em; }
.about-facts__grid span { padding-bottom: 2px; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.8; }
/* Works */
.works-filter {
position: sticky;
z-index: 15;
top: 72px;
min-height: 72px;
border: 1px solid var(--lower-border);
border-radius: 999px;
padding: 8px 12px 8px 26px;
display: flex;
align-items: center;
gap: 8px;
background: rgba(251,250,247,.88);
backdrop-filter: blur(15px);
}
.works-filter > span { margin-right: auto; color: #65716d; font-size: 14px; letter-spacing: .14em; }
.works-filter button { min-width: 92px; height: 48px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.works-filter button:hover, .works-filter button.is-active { color: #fff; background: var(--ink); }
.project-showcase { display: grid; gap: 30px; margin-top: 26px; }
.project-card { overflow: hidden; border-radius: 26px; background: #fff; transition: opacity .35s ease, transform .35s ease; }
.project-card.is-filtered-out { opacity: .14; transform: scale(.985); pointer-events: none; }
.project-card a { display: block; height: 100%; }
.project-card__media { position: relative; overflow: hidden; background: #d8dbd9; }
.project-card__media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.25); border-radius: inherit; pointer-events: none; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1), filter .6s ease; }
.project-card:hover .project-card__media img { transform: scale(1.035); filter: saturate(1.08); }
.project-card__info { position: relative; padding: 36px 40px; }
.project-card__info > div { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--lower-border); }
.project-card__info span, .project-card__info p { margin: 0; color: #65716d; font-size: 14px; letter-spacing: .12em; }
.project-card__info h2 { margin: 45px 0 28px; font-family: "Noto Sans JP", sans-serif; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.45; font-weight: 400; }
.project-card__desc { max-width: 420px; font-family: "Noto Sans JP", sans-serif; font-size: 14px !important; line-height: 1.9; letter-spacing: 0 !important; }
.project-card__info > i { position: absolute; right: 35px; bottom: 34px; font-size: 14px; font-style: normal; letter-spacing: .12em; }
.project-card--hero > a { min-height: 620px; display: grid; grid-template-columns: 1.55fr .75fr; }
.project-card--hero .project-card__media { min-height: 620px; border-radius: 26px 0 0 26px; }
.project-showcase__pair { display: grid; grid-template-columns: .82fr 1.18fr; gap: 30px; align-items: start; }
.project-card--portrait .project-card__media { height: 590px; }
.project-card--portrait .project-card__info h2, .project-card--landscape .project-card__info h2 { margin: 30px 0 6px; font-size: 23px; }
.project-card--portrait .project-card__info > i, .project-card--landscape .project-card__info > i { bottom: 42px; }
.project-card--landscape { margin-top: 115px; }
.project-card--landscape .project-card__media { height: 410px; }
.project-card__media--contain img { object-fit: contain; padding: 30px 65px 0; }
.project-card--wide { color: #fff; background: #102f29; }
.project-card--wide > a { min-height: 570px; display: grid; grid-template-columns: .75fr 1.25fr; }
.project-card--wide .project-card__info { padding: 50px; }
.project-card--wide .project-card__info > div { border-color: rgba(255,255,255,.2); }
.project-card--wide .project-card__info p, .project-card--wide .project-card__info span { color: rgba(255,255,255,.58); }
.project-card--wide .project-card__media { margin: 30px; border-radius: 18px; background: #dce3df; }
.project-card--wide .project-card__media img { object-fit: contain; object-position: center 18%; transform: translateY(-36%); }
.project-card--wide:hover .project-card__media img { transform: translateY(-36%) scale(1.025); }
.works-note { margin: 70px 0 80px; padding: 36px 0; border-top: 1px solid var(--lower-border); border-bottom: 1px solid var(--lower-border); display: grid; grid-template-columns: 1fr 1fr; }
.works-note span { color: #65716d; font-size: 14px; letter-spacing: .13em; }
.works-note p { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.9; }
/* Service */
.service-page-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 45px; align-items: start; }
.service-index { position: sticky; top: 108px; border-top: 1px solid var(--lower-border); padding-top: 20px; display: grid; gap: 4px; }
.service-index > p { margin: 0 0 20px; color: #65716d; font-size: 14px; letter-spacing: .14em; }
.service-index a { height: 50px; border-bottom: 1px solid var(--lower-border); display: flex; align-items: center; gap: 22px; color: #7a8581; font-size: 15px; transition: color .25s ease, padding .25s ease; }
.service-index a span { font-size: 14px; }
.service-index a:hover, .service-index a.is-active { padding-left: 8px; color: var(--green); }
.service-index small { margin-top: 26px; color: #8b9491; font-size: 14px; line-height: 1.7; letter-spacing: .08em; }
.service-chapters { display: grid; gap: 24px; }
.service-chapter { scroll-margin-top: 95px; overflow: hidden; border-radius: 30px; padding: 58px; background: #fff; }
.service-chapter--grow { background: #d8dfd9; }
.service-chapter--flow { color: #fff; background: #0f342d; }
.service-chapter header { display: flex; justify-content: space-between; padding-bottom: 19px; border-bottom: 1px solid currentColor; font-size: 14px; letter-spacing: .12em; }
.service-chapter header em { font-family: "Noto Sans JP", sans-serif; font-style: normal; letter-spacing: 0; }
.service-chapter h2 { margin: 66px 0 52px; font-family: "Noto Sans JP", sans-serif; font-size: clamp(34px, 4.5vw, 62px); line-height: 1.45; font-weight: 400; letter-spacing: -.035em; }
.service-chapter__visual { position: relative; height: 440px; overflow: hidden; border-radius: 18px; background: #cad2cd; }
.service-chapter__visual img { width: 100%; height: 100%; object-fit: cover; }
.service-chapter--grow .service-chapter__visual img { filter: hue-rotate(22deg) saturate(.78); }
.service-chapter--flow .service-chapter__visual img { object-fit: contain; object-position: center 22%; transform: translateY(-31%); }
.service-chapter__visual span { position: absolute; left: 22px; bottom: 18px; padding: 8px 12px; border-radius: 999px; color: #fff; background: rgba(9,27,23,.72); font-size: 14px; letter-spacing: .12em; }
.service-chapter__details { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 44px; }
.service-chapter__details > p { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 2; }
.service-chapter__details ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; font-family: "Noto Sans JP", sans-serif; font-size: 14px; }
.service-chapter__details li { padding-bottom: 8px; border-bottom: 1px solid currentColor; }
.service-process { margin: 110px 0; padding: 110px 0; color: #fff; background: #0a1b18; }
.service-process h2 { margin: 50px 0 80px; font-family: "Noto Sans JP", sans-serif; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.5; font-weight: 400; }
.service-process ol { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; }
.service-process li { min-height: 205px; border-left: 1px solid rgba(255,255,255,.24); padding: 22px 25px; display: flex; flex-direction: column; }
.service-process li:last-child { border-right: 1px solid rgba(255,255,255,.24); }
.service-process li > span { color: rgba(255,255,255,.48); font-size: 14px; }
.service-process li strong { margin-top: auto; font-size: 28px; font-weight: 400; }
.service-process li small { margin-top: 8px; font-family: "Noto Sans JP", sans-serif; font-size: 14px; color: rgba(255,255,255,.62); }
/* Contact */
.contact-console { overflow: hidden; border-radius: 30px; display: grid; grid-template-columns: .72fr 1.28fr; box-shadow: 0 26px 80px rgba(22,32,30,.1); }
.contact-console__aside { padding: 66px 52px; color: #fff; background: #0d312a; }
.contact-console__aside h2 { margin: 90px 0 35px; font-family: "Noto Sans JP", sans-serif; font-size: clamp(35px, 4vw, 55px); line-height: 1.5; font-weight: 400; }
.contact-console__aside > p:not(.editorial-label) { max-width: 360px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 2; color: rgba(255,255,255,.72); }
.contact-console__facts { margin-top: 105px; border-top: 1px solid rgba(255,255,255,.2); }
.contact-console__facts > div { min-height: 65px; border-bottom: 1px solid rgba(255,255,255,.2); display: flex; justify-content: space-between; align-items: center; }
.contact-console__facts span { color: rgba(255,255,255,.46); font-size: 14px; letter-spacing: .12em; }
.contact-console__facts strong { font-size: 14px; font-weight: 400; }
.contact-form--premium { padding: 66px 62px 60px; display: grid; gap: 35px; background: #fff; }
.contact-form--premium fieldset { margin: 0; border: 0; padding: 0; }
.contact-form--premium legend, .contact-form--premium label > small { display: block; margin-bottom: 14px; color: #65716d; font-size: 14px; letter-spacing: .12em; }
.contact-form--premium legend span { margin-right: 14px; color: var(--green); }
.contact-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contact-types label { display: block; cursor: pointer; }
.contact-types input { position: absolute; opacity: 0; pointer-events: none; }
.contact-types span { min-height: 54px; border: 1px solid #d5dad7; border-radius: 999px; display: grid; place-items: center; padding: 8px 14px; font-family: "Noto Sans JP", sans-serif; font-size: 14px; transition: color .25s ease, background .25s ease, border-color .25s ease; }
.contact-types input:checked + span, .contact-types label:hover span { border-color: var(--green); color: #fff; background: var(--green); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-form--premium > label, .contact-form__row label { display: block; }
.contact-form--premium input:not([type="radio"]), .contact-form--premium textarea {
width: 100%;
border: 0;
border-bottom: 1px solid #b9c1bd;
border-radius: 0;
padding: 11px 0 17px;
color: var(--ink);
background: transparent;
outline: none;
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
transition: border-color .25s ease;
}
.contact-form--premium input:focus, .contact-form--premium textarea:focus { border-color: var(--green); }
.contact-form--premium textarea { min-height: 150px; resize: vertical; }
.contact-form--premium ::placeholder { color: #a1aaa6; opacity: 1; }
.contact-form__submit { padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.contact-form__submit p { max-width: 310px; margin: 0; color: #818b87; font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.8; }
.contact-form__submit p a { text-decoration: underline; }
.contact-form__submit button { width: 210px; height: 66px; border: 0; border-radius: 999px; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: var(--ink); cursor: pointer; transition: background .25s ease, transform .25s ease; }
.contact-form__submit button:hover { background: var(--green); transform: translateY(-2px); }
.contact-form__submit button span { font-size: 14px; letter-spacing: .12em; }
.contact-form__submit button i { font-style: normal; font-size: 16px; }
.contact-after { padding: 105px 0 85px; }
.contact-after > div { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 55px; }
.contact-after article { min-height: 230px; border-left: 1px solid var(--lower-border); padding: 25px 34px; }
.contact-after article:last-child { border-right: 1px solid var(--lower-border); }
.contact-after article > span { color: #6a7571; font-size: 14px; }
.contact-after h3 { margin: 85px 0 14px; font-family: "Noto Sans JP", sans-serif; font-size: 17px; font-weight: 400; }
.contact-after p { margin: 0; font-family: "Noto Sans JP", sans-serif; color: #6a7571; font-size: 14px; line-height: 1.8; }
/* Shared page transition */
.next-page-cta {
position: relative;
min-height: 285px;
overflow: hidden;
border-radius: 30px;
padding: 44px 52px;
display: grid;
grid-template-columns: .7fr 1.3fr auto;
align-items: center;
color: #fff;
background: var(--green);
}
.next-page-cta::before { content: ""; position: absolute; inset: 100% 0 0; background: #0a1b18; transition: inset .55s cubic-bezier(.22,1,.36,1); }
.next-page-cta:hover::before { inset: 0; }
.next-page-cta > * { position: relative; z-index: 1; }
.next-page-cta span { font-family: "Noto Sans JP", sans-serif; font-size: 14px; }
.next-page-cta span small { display: block; margin-bottom: 12px; color: rgba(255,255,255,.55); font-family: var(--sans); font-size: 14px; letter-spacing: .13em; }
.next-page-cta strong { font-size: clamp(70px, 8vw, 116px); line-height: 1; font-weight: 400; letter-spacing: -.05em; }
.next-page-cta > i { width: 74px; height: 74px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 20px; transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease; }
.next-page-cta:hover > i { transform: rotate(45deg); color: var(--ink); background: #fff; }
/* Generic pages */
.phead { padding: 170px 24px 80px; color: #fff; background: var(--green); }
.phead__ttl { font-size: clamp(38px, 6vw, 72px); }
.pbody { min-height: 50vh; padding: 80px 24px; }
@media (max-width: 960px) {
.section-shell { width: min(calc(100% - 48px), var(--shell)); }
.site-header { height: 72px; padding: 0 24px; }
.site-header__logo { width: 144px; }
.site-header__nav {
position: fixed;
inset: 0;
z-index: -1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 26px;
margin: 0;
visibility: hidden;
opacity: 0;
background: rgba(8, 35, 31, .97);
font-size: 28px;
transition: opacity .25s ease, visibility .25s ease;
}
.site-header__nav.is-open { visibility: visible; opacity: 1; }
.menu-button { position: relative; z-index: 2; margin-left: 22px; }
.scene__photo { left: -45%; width: 155%; }
.hero__copy { top: 46%; width: calc(100% - 32px); }
.hero__copy h1 { font-size: clamp(46px, 11vw, 86px); }
.hero__copy p { margin-top: 10px; font-size: clamp(17px, 4.2vw, 28px); }
.concept__inner { padding: 85px 24px 30px; }
.concept__text { font-size: 14px; line-height: 2.2; }
/* concept__text内のbrはBUILD/GROW/FLOWの箇条書き区切り（構造的な改行）なので、
見出し類のbrと違って消してはいけない。消すと3項目が地続きの文章に見えてしまう。 */
.concept__tag { font-size: 25px; }
.about__inner { gap: 40px; }
.about__intro h2 { font-size: 68px; }
.about__statement { font-size: 19px; line-height: 2.2; }
.venn { width: min(100%, 460px); }
.services__head, .works__head { grid-template-columns: 1fr; gap: 16px; }
.services__head > p, .works__head p { font-size: 14px; }
.works__head p { text-align: left; } /* 1段組みになるので右揃えは解除 */
.services__head br, .works__head br { display: none; }
.service-row__body { grid-template-columns: 1fr 40%; gap: 32px; padding-left: 24px; padding-right: 24px; }
.service-row__body img { width: 100%; height: 220px; }
.works__toolbar { top: 196px; right: 0; }
.works-carousel { height: 560px; margin-top: 130px; }
.work-card[data-slot="active"] { width: 58%; }
.work-card[data-slot="queue-1"] { left: 62%; width: 22%; }
.work-card[data-slot="queue-2"] { left: 86%; width: 22%; }
.work-card[data-slot="leaving"] { left: -62%; width: 58%; }
.work-card[data-slot="hidden-left"] { top: 0; left: -62%; width: 58%; }
.about { min-height: 690px; padding: 90px 0; }
.about-card__copy { width: 60%; }
.about-card__person { right: -105px; }
.lower-page { padding: 0 0 90px; }
.lower-intro { gap: 48px; padding: 56px; }
.about-profile__copy { width: 58%; padding: 56px; }
.about-profile__image { right: -90px; }
.lower-works { padding: 48px; }
.lower-work__image { height: 280px; }
.service-list { padding-inline: 48px; }
.service-detail { grid-template-columns: 60px .7fr 1fr; gap: 22px; }
.contact-layout { gap: 48px; padding: 56px; }
}
@media (max-width: 640px) {
.section-shell { width: calc(100% - 32px); }
.scene { min-height: 720px; }
.hero { height: 100svh; min-height: 680px; }
.hero__copy h1 { display: flex; flex-wrap: wrap; justify-content: center; line-height: .95; white-space: normal; }
.hero__copy h1 small { flex-basis: 100%; margin-block: 10px; }
.line-contact { right: 16px; bottom: 92px; width: 74px; height: 74px; }
.line-float { right: 16px; bottom: 20px; width: 68px; height: 68px; font-size: 12px; line-height: 13px; }
.line-contact__mark svg, .line-float__mark svg { width: 18px; }
.concept { height: auto; }
.concept h2, .services__head h2, .works__head h2 { font-size: 48px; }
.about { padding: 76px 0 84px; }
.about__inner { grid-template-columns: 1fr; gap: 46px; }
.about__intro h2 { margin-bottom: 34px; font-size: 58px; }
.about__statement { margin-bottom: 32px; font-size: 18px; line-height: 2.15; }
.about__statement br { display: none; }
.venn { width: min(100%, 380px); }
.venn__orbit-dot { width: 7px; height: 7px; }
.venn__item-inner { font-size: 14px; }
.venn__brand { font-size: 22px; }
.concept__inner { padding-top: 72px; }
.concept__text { line-height: 2; }
.concept__br--sp { display: block; }
.concept__br--pc { display: none; }
.concept__tag { font-size: 20px; margin-top: 12px; }
.services { min-height: 900px; }
.services__inner { padding-top: 56px; }
.service-row > button { grid-template-columns: 44px 100px auto; min-height: 70px; }
.service-row__no { font-size: 14px; }
.service-row strong { font-size: 26px; }
.service-row em { font-size: 14px; }
.service-row__body { grid-template-columns: 1fr; gap: 16px; padding: 0; }
.service-row.is-active .service-row__body { padding-bottom: 24px; }
.service-row__body img { order: -1; height: 190px; }
.service-row__body ul { font-size: 14px; }
.works { height: auto; padding-bottom: 30px; }
.works__inner { padding-top: 48px; }
.works__toolbar { position: static; width: 100%; display: flex; justify-content: space-between; align-items: end; margin-top: 24px; }
.works__arrows { gap: 12px; }
.works__arrows button { width: 48px; height: 48px; }
.works-carousel { height: 350px; margin-top: 30px; }
.work-card[data-slot="active"] { top: 0; left: 0; width: 74%; }
.work-card[data-slot="queue-1"] { top: 92px; left: calc(74% + 14px); width: 50%; opacity: .82; }
.work-card[data-slot="queue-2"] { top: 92px; left: calc(124% + 28px); width: 50%; opacity: 0; }
.work-card[data-slot="leaving"] { top: 0; left: -80%; width: 74%; }
.work-card[data-slot="hidden-left"] { top: 0; left: -80%; width: 74%; }
.work-card[data-slot="hidden-right"] { top: 92px; left: 180%; width: 50%; }
.work-card__image { height: 150px; }
.work-card[data-slot="active"] .work-card__image,.work-card[data-slot="leaving"] .work-card__image { height: 240px; }
.work-card h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.about { min-height: auto; padding: 72px 0; }
.about-card { height: 700px; }
.about-card__copy { width: 100%; padding: 24px; }
.about-card__copy h2 { font-size: 48px; }
.about-card__copy p { font-size: 14px; }
.about-card__visual { inset: auto 0 0; height: 48%; }
.about-card__visual::after { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.22) 30%, transparent 58%); }
.about-card__person { right: -50px; bottom: -135px; width: 480px; }
.contact, .contact__inner { min-height: 410px; }
.contact__inner { padding-top: 72px; display: block; }
.contact h2 { font-size: 28px; }
.contact p:not(.contact__word) { font-size: 14px; }
.contact__button { width: 100%; height: 70px; margin-top: 52px; }
.contact__word { left: -55px; top: 286px; font-size: 80px; }
.site-footer { padding-top: 64px; }
.site-footer__inner { grid-template-columns: 1fr; gap: 50px; padding-bottom: 48px; }
.site-footer__nav { grid-template-columns: repeat(2,1fr); gap: 30px; }
.site-footer__bottom { align-items: flex-start; gap: 20px; }
.site-footer__bottom div { flex-direction: column; gap: 8px; text-align: right; }
.lower-page { padding: 0 0 70px; }
.lower-page__title { margin-bottom: 28px; font-size: 48px; }
.lower-panel { border-radius: 18px; }
.lower-intro { grid-template-columns: 1fr; gap: 30px; padding: 32px 24px; }
.about-profile { min-height: 720px; }
.about-profile__copy { width: 100%; padding: 36px 24px; }
.about-profile__image { right: -75px; bottom: -92px; width: 480px; }
.about-values { grid-template-columns: 1fr; }
.about-value { min-height: auto; padding: 34px 24px; }
.lower-works { grid-template-columns: 1fr; gap: 38px; padding: 24px; }
.lower-work__image { height: 240px; }
.service-list { padding: 8px 24px; }
.service-detail { grid-template-columns: 42px 1fr; gap: 12px; padding: 45px 0; }
.service-detail__body { grid-column: 1 / -1; }
.service-detail h2 { font-size: 36px; }
.service-detail__body ul { grid-template-columns: 1fr; }
.contact-layout { grid-template-columns: 1fr; gap: 38px; padding: 34px 24px; }
.contact-form button { width: 100%; }
}
/* Case study */
.case-hero { padding-top:145px; padding-bottom:80px; }
.case-hero__grid { display:grid; grid-template-columns:.84fr 1.16fr; gap:100px; padding:90px 0 0; }
.case-hero h1 { margin:70px 0 40px; font-size:clamp(100px,12vw,168px); line-height:.72; font-weight:400; letter-spacing:-.075em; }
.case-hero__client { font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.case-hero__summary { padding-top:65px; }
.case-hero__summary h2 { margin-bottom:46px; font-family:"Noto Sans JP",sans-serif; font-size:clamp(30px,3.6vw,48px); line-height:1.55; font-weight:500; }
.case-hero__summary > p { max-width:540px; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.15; }
.case-hero__summary ul { display:flex; flex-wrap:wrap; gap:7px; margin:38px 0 0; padding:0; list-style:none; }
.case-hero__summary li { padding:8px 13px; border:1px solid var(--sub-line); border-radius:99px; font-size:14px; letter-spacing:.1em; }
.case-stage { position:relative; height:min(76vw,950px); overflow:hidden; background:#1c322d; }
.case-stage__backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.68) saturate(.75); }
.case-stage::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(10,33,27,.06),rgba(10,33,27,.38)); }
.case-stage__browser { position:absolute; z-index:2; top:10%; left:15%; width:57%; max-height:112%; object-fit:cover; object-position:top; box-shadow:0 35px 90px rgba(0,0,0,.33); }
.case-stage__mobile { position:absolute; z-index:3; right:13%; top:22%; width:15.5%; max-height:82%; object-fit:cover; object-position:top; box-shadow:0 28px 65px rgba(0,0,0,.38); }
.case-stage > span { position:absolute; z-index:4; left:30px; bottom:25px; color:#fff; font-size:14px; letter-spacing:.14em; }
.case-story { padding:135px 0; }
.case-story > div { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin:70px 0 0 34%; }
.case-story h2 { margin:0; font-size:clamp(46px,5vw,72px); line-height:1.12; font-weight:400; letter-spacing:-.05em; }
.case-story > div > div { font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.2; }
.case-breakdown { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding-bottom:135px; background:var(--sub-line); }
.case-breakdown article { min-height:360px; padding:31px; display:flex; flex-direction:column; background:var(--sub-bg); }
.case-breakdown span { font-size:14px; letter-spacing:.13em; color:var(--sub-gold); }
.case-breakdown h3 { margin:100px 0 25px; font-family:"Noto Sans JP",sans-serif; font-size:20px; font-weight:500; }
.case-breakdown p { margin:auto 0 0; padding-top:25px; border-top:1px solid var(--sub-line); font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2; }
.case-result { padding:120px 0; color:#fff; background:var(--sub-green); }
.case-result h2 { margin:70px 0 85px 34%; font-size:clamp(44px,5.4vw,76px); line-height:1.13; font-weight:400; letter-spacing:-.05em; }
.case-result__stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(255,255,255,.2); }
.case-result__stats div { min-height:210px; padding:28px; border-right:1px solid rgba(255,255,255,.2); }
.case-result__stats div:last-child { border:0; }
.case-result__stats strong { display:block; font-size:80px; line-height:1; font-weight:400; color:var(--sub-gold); }
.case-result__stats span { display:block; margin-top:50px; font-size:14px; line-height:1.7; letter-spacing:.14em; }
.case-credits { padding:120px 0 70px; }
.case-credits dl { width:66%; margin:60px 0 0 auto; }
.case-credits dl div { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:22px 0; border-top:1px solid var(--sub-line); font-size:14px; letter-spacing:.08em; }
.case-credits dl div:last-child { border-bottom:1px solid var(--sub-line); }
.case-credits dd { margin:0; }
/* Service detail */
.service-detail__hero { padding-top:145px; padding-bottom:85px; }
.service-detail__heading { display:grid; grid-template-columns:.55fr 1.15fr .7fr; gap:60px; align-items:end; min-height:330px; padding:70px 0 50px; }
.service-detail__heading h1 { margin:0; font-family:"Noto Sans JP",sans-serif; font-size:clamp(72px,8.5vw,118px); line-height:1; font-weight:500; letter-spacing:-.045em; }
.service-detail__heading > p:last-child { margin-bottom:12px; padding-left:22px; border-left:1px solid var(--sub-gold); font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2; }
.service-local { position:sticky; z-index:10; top:72px; display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:110px; border:1px solid var(--sub-line); border-radius:99px; overflow:hidden; background:rgba(246,245,240,.92); backdrop-filter:blur(12px); }
.service-local a { padding:15px; border-right:1px solid var(--sub-line); text-align:center; font-family:"Noto Sans JP",sans-serif; font-size:14px; transition:.25s; }
.service-local a:last-child { border:0; }
.service-local a:hover { color:#fff; background:var(--sub-green); }
.service-overview { padding:20px 0 130px; }
.service-overview > div { display:grid; grid-template-columns:1fr 1fr; gap:85px; margin:70px 0 0 34%; }
.service-overview h2 { margin:0; font-size:clamp(48px,5.4vw,76px); line-height:1.1; font-weight:400; letter-spacing:-.05em; }
.service-overview > div > div { font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.2; }
.service-fit { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; padding:105px 0; border-top:1px solid var(--sub-line); }
.service-fit h2 { margin:60px 0 0; font-size:clamp(42px,4.6vw,64px); font-weight:400; letter-spacing:-.05em; }
.service-fit ul { margin:0; padding:0; list-style:none; }
.service-fit li { display:grid; grid-template-columns:50px 1fr; gap:15px; padding:25px 0; border-top:1px solid var(--sub-line); font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.service-fit li:last-child { border-bottom:1px solid var(--sub-line); }
.service-fit li span { color:var(--sub-gold); font-family:var(--sans); font-size:14px; }
.service-approach { padding:120px 0 135px; color:#fff; background:var(--sub-green); }
.service-approach ol { display:grid; grid-template-columns:repeat(5,1fr); margin:80px 0 0; padding:0; border:1px solid rgba(255,255,255,.2); list-style:none; }
.service-approach li { min-height:250px; display:flex; flex-direction:column; padding:24px; border-right:1px solid rgba(255,255,255,.2); }
.service-approach li:last-child { border:0; }
.service-approach li span { font-size:14px; opacity:.55; }
.service-approach li strong { margin-top:auto; font-size:24px; font-weight:400; }
.service-approach li small { margin-top:9px; font-family:"Noto Sans JP",sans-serif; font-size:14px; opacity:.65; }
.service-flow { padding:130px 0; }
.service-flow > ol { margin:75px 0 0 25%; padding:0; list-style:none; }
.service-flow > ol li { display:grid; grid-template-columns:55px 1fr 110px; gap:25px; padding:30px 0; border-top:1px solid var(--sub-line); }
.service-flow > ol li:last-child { border-bottom:1px solid var(--sub-line); }
.service-flow > ol li > span { color:var(--sub-gold); font-size:14px; }
.service-flow h3 { margin:0 0 12px; font-family:"Noto Sans JP",sans-serif; font-size:16px; font-weight:500; }
.service-flow li p { margin:0; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:1.9; }
.service-flow li > small { text-align:right; font-size:14px; letter-spacing:.12em; }
.service-faq { padding:110px 0 90px; border-top:1px solid var(--sub-line); }
.service-faq > div:last-child { width:66%; margin:70px 0 0 auto; }
.service-faq details { border-top:1px solid var(--sub-line); }
.service-faq details:last-child { border-bottom:1px solid var(--sub-line); }
.service-faq summary { position:relative; padding:28px 50px 28px 0; list-style:none; cursor:pointer; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.service-faq summary::-webkit-details-marker { display:none; }
.service-faq summary i { position:absolute; right:5px; font-style:normal; font-size:18px; transition:transform .25s; }
.service-faq details[open] summary i { transform:rotate(45deg); }
.service-faq details p { padding:0 50px 28px 0; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2; }
@media (max-width: 960px) {
.sub-hero__heading { grid-template-columns:1fr 260px; }
.sub-forest { height:360px; }
.about-concept__body,.about-founder,.contact-layout { grid-template-columns:1fr; }
.about-values { grid-template-columns:1fr 1fr; }
.about-value:last-child { grid-column:1/-1; }
.about-founder__media { border-radius:var(--sub-radius) var(--sub-radius) 0 0; }
.about-founder__copy { border:1px solid var(--sub-line); border-top:0; border-radius:0 0 var(--sub-radius) var(--sub-radius); }
.works-intro { grid-template-columns:.5fr 1.2fr; }
.works-intro > p:last-child { grid-column:2; }
.work-tile--featured figure { height:560px; }
.capability { grid-template-columns:1fr; }
.capability__nav { position:sticky; z-index:11; top:72px; grid-template-columns:repeat(3,1fr); }
.capability__nav button { height:75px; grid-template-columns:25px 1fr; }
.capability__nav button small { display:none; }
.capability__nav button::after { display:none; }
.contact-intro { padding-right:0; border-right:0; border-bottom:1px solid var(--sub-line); }
.contact-v5 { padding-left:0; }
.case-hero__grid { gap:50px; }
.case-stage__browser { left:8%; width:67%; }
.case-stage__mobile { right:7%; width:18%; }
.service-detail__heading { grid-template-columns:.45fr 1fr; }
.service-detail__heading > p:last-child { grid-column:2; }
.service-approach ol { grid-template-columns:repeat(3,1fr); }
.service-approach li { border-bottom:1px solid rgba(255,255,255,.2); }
}
@media (max-width: 640px) {
.site-header__nav { gap:20px; }
.sub-hero { padding:116px 0 65px; }
.sub-hero__eyebrow { font-size:14px; }
.sub-hero__heading { min-height:230px; grid-template-columns:1fr; gap:35px; padding:52px 0 35px; }
.sub-hero__heading h1 { font-size:clamp(67px,21vw,88px); line-height:.8; }
.sub-hero__heading p { font-size:14px; }
.sub-forest { height:265px; border-radius:18px; }
.sub-forest figcaption { right:16px; bottom:14px; left:16px; font-size:14px; }
.sub-section-head { grid-template-columns:1fr; gap:38px; }
.sub-section-head h2 { font-size:39px; }
.sub-next { min-height:280px; grid-template-columns:1fr 52px; gap:30px; margin-top:65px; margin-bottom:65px; padding:29px 23px; border-radius:19px; }
.sub-next > span { grid-column:1/-1; font-size:14px; }
.sub-next strong { font-size:56px; }
.sub-next i { width:52px; height:52px; }
.about-concept { padding:75px 0 90px; }
.about-concept__body { gap:50px; margin-top:55px; }
.about-concept__body h2 { font-size:48px; }
.about-concept__copy .about-concept__lead { font-size:15px; }
.about-concept__copy p { font-size:14px; }
.about-philosophy { padding:80px 0 105px; }
.about-values { grid-template-columns:1fr; gap:9px; margin-top:50px; }
.about-value,.about-value:last-child { grid-column:auto; min-height:380px; }
.about-value--dark { transform:none; }
.about-founder { padding-top:80px; padding-bottom:90px; }
.about-founder__media { height:480px; border-radius:18px 18px 0 0; }
.about-founder__copy { min-height:0; padding:38px 23px; border-radius:0 0 18px 18px; }
.about-founder__copy h2 { margin:70px 0 35px; font-size:31px; }
.about-founder__copy > p { font-size:14px; }
.about-company { padding:75px 0; }
.about-company dl { width:100%; margin-top:50px; }
.about-company dl div { grid-template-columns:85px 1fr; gap:15px; font-size:14px; }
.works-intro { grid-template-columns:1fr; gap:45px; padding:75px 0 60px; }
.works-intro h2 { font-size:45px; }
.works-intro > p:last-child { grid-column:auto; }
.works-grid { grid-template-columns:1fr; gap:62px; }
.work-tile--featured { grid-column:auto; }
.work-tile figure,.work-tile--featured figure { height:350px; border-radius:16px; }
.work-tile h2 { font-size:25px; }
.work-tile h3 { min-height:0; font-size:19px; }
.works-confidential { grid-template-columns:1fr; gap:25px; margin-top:85px; }
.service-intro,.service-intro > div { grid-template-columns:1fr; gap:45px; }
.service-intro { padding:75px 0 60px; }
.service-intro h2 { font-size:45px; }
.capability__nav { overflow-x:auto; grid-template-columns:repeat(3,126px); border-radius:14px; }
.capability__nav button { height:67px; padding:13px; }
.capability__nav button strong { font-size:21px; }
.capability__stage { min-height:0; }
.cap-panel { padding:34px 20px 28px; border-radius:16px; }
.cap-panel header { min-height:270px; }
.cap-panel header h2 { margin-top:60px; font-size:29px; }
.cap-panel__lead { grid-template-columns:1fr; gap:24px; padding:35px 0; }
.cap-panel__cards { grid-template-columns:1fr; }
.cap-panel__cards a { min-height:103px; }
.service-issues { margin-top:80px; padding:75px 0; }
.service-issues h2 { margin:50px 0; font-size:40px; }
.service-issues ul { width:100%; }
.service-issues li { padding-right:36px; font-size:14px; line-height:1.8; }
.sub-hero--contact .sub-hero__heading { min-height:270px; }
.contact-intro { padding:65px 0 75px; }
.contact-intro h2 { margin:65px 0 35px; font-size:42px; }
.contact-trust > div { grid-template-columns:1fr 1fr; }
.contact-v5 { padding:70px 0 85px; }
.choice-grid,.contact-v5__row { grid-template-columns:1fr; }
.contact-v5__row { gap:35px; }
.case-hero { padding-top:116px; }
.case-hero__grid { grid-template-columns:1fr; gap:20px; padding-top:60px; }
.case-hero h1 { margin:55px 0 25px; font-size:90px; }
.case-hero__summary { padding-top:30px; }
.case-hero__summary h2 { font-size:26px; }
.case-stage { height:530px; }
.case-stage__browser { top:8%; left:6%; width:78%; }
.case-stage__mobile { top:25%; right:4%; width:25%; }
.case-story { padding:85px 0; }
.case-story > div { grid-template-columns:1fr; gap:45px; margin:55px 0 0; }
.case-story h2 { font-size:42px; }
.case-breakdown { grid-template-columns:1fr; padding-bottom:85px; }
.case-breakdown article { min-height:310px; }
.case-result { padding:85px 0; }
.case-result h2 { margin:55px 0; font-size:39px; }
.case-result__stats { grid-template-columns:1fr; }
.case-result__stats div { min-height:170px; border-right:0; border-bottom:1px solid rgba(255,255,255,.2); }
.case-credits { padding:80px 0 40px; }
.case-credits dl { width:100%; }
.service-detail__hero { padding-top:116px; }
.service-detail__heading { grid-template-columns:1fr; gap:38px; min-height:370px; }
.service-detail__heading h1 { font-size:63px; }
.service-detail__heading > p:last-child { grid-column:auto; }
.service-local { overflow-x:auto; grid-template-columns:repeat(4,130px); margin-bottom:75px; border-radius:14px; }
.service-overview { padding-bottom:85px; }
.service-overview > div { grid-template-columns:1fr; gap:45px; margin:55px 0 0; }
.service-overview h2 { font-size:43px; }
.service-fit { grid-template-columns:1fr; gap:55px; padding:80px 0; }
.service-fit h2 { font-size:40px; }
.service-fit li { font-size:14px; line-height:1.8; }
.service-approach { padding:85px 0; }
.service-approach ol { grid-template-columns:1fr; margin-top:55px; }
.service-approach li { min-height:145px; border-right:0; }
.service-flow { padding:85px 0; }
.service-flow > ol { margin:55px 0 0; }
.service-flow > ol li { grid-template-columns:36px 1fr; }
.service-flow li > small { grid-column:2; text-align:left; }
.service-faq { padding:80px 0 50px; }
.service-faq > div:last-child { width:100%; margin-top:55px; }
.service-faq summary { padding-right:35px; font-size:14px; line-height:1.8; }
}
/* Lower pages — responsive refinements */
@media (max-width: 1100px) {
.lower-masthead__title-row { grid-template-columns: minmax(0,1fr) 300px; gap: 25px; }
.about-statement { min-height: 680px; }
.about-statement__copy { padding: 58px 24px 55px 52px; }
.about-statement__copy h2 { margin-top: 58px; }
.about-statement__visual img { right: -150px; }
.project-card--hero > a { grid-template-columns: 1.3fr .8fr; }
.service-page-layout { grid-template-columns: 165px minmax(0,1fr); gap: 28px; }
.service-chapter { padding: 44px; }
.contact-console__aside { padding-inline: 40px; }
.contact-form--premium { padding-inline: 44px; }
}
@media (max-width: 960px) {
.lower-masthead { padding: 138px 0 62px; }
.lower-masthead__title-row { grid-template-columns: 1fr; padding-block: 44px 38px; }
.lower-masthead__lead { max-width: 430px; margin-left: auto; }
.about-statement { grid-template-columns: 1fr; }
.about-statement__copy { min-height: 600px; }
.about-statement__visual { min-height: 670px; }
.about-statement__visual img { right: 50%; transform: translateX(50%); }
.about-statement:hover .about-statement__visual img { transform: translateX(50%) scale(1.025) translateY(-8px); }
.about-manifesto__grid { gap: 55px; }
.principle-grid { grid-template-columns: 1fr 1fr; }
.principle-card:last-child { grid-column: 1 / -1; }
.about-facts__grid strong { font-size: 70px; }
.project-card--hero > a { grid-template-columns: 1fr; }
.project-card--hero .project-card__media { min-height: 510px; border-radius: 26px 26px 0 0; }
.project-showcase__pair { gap: 18px; }
.project-card--portrait .project-card__media { height: 480px; }
.project-card--landscape .project-card__media { height: 330px; }
.project-card--wide > a { grid-template-columns: 1fr 1fr; }
.service-page-layout { grid-template-columns: 1fr; }
.service-index { z-index: 12; top: 72px; grid-template-columns: auto repeat(3,1fr); gap: 0; border: 1px solid var(--lower-border); border-radius: 999px; padding: 7px; background: rgba(251,250,247,.92); backdrop-filter: blur(15px); }
.service-index > p { margin: 0; padding: 0 20px; align-self: center; }
.service-index a { height: 44px; justify-content: center; border: 0; border-radius: 999px; }
.service-index a:hover, .service-index a.is-active { padding-left: 0; color: #fff; background: var(--green); }
.service-index small { display: none; }
.contact-console { grid-template-columns: 1fr; }
.contact-console__aside h2 { margin-top: 60px; }
.contact-console__facts { margin-top: 55px; }
}
@media (max-width: 640px) {
.lower-masthead { padding: 120px 0 48px; }
.lower-masthead__meta { grid-template-columns: 1fr auto; font-size: 14px; }
.lower-masthead__meta span:nth-child(2) { display: none; }
.lower-masthead__title-row { padding: 38px 0 30px; }
.lower-masthead__title { font-size: clamp(55px, 17.2vw, 74px); line-height: .8; }
.lower-masthead__title span:nth-child(2) { padding-left: .4em; }
.lower-masthead__lead { margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.9; }
.lower-masthead__foot { gap: 12px; font-size: 14px; }
.lower-masthead__foot span:last-child { white-space: nowrap; }
.lower-content { gap: 18px; }
.editorial-label { font-size: 14px; }
.editorial-label span { width: 25px; height: 25px; }
.section-heading { display: block; margin-bottom: 30px; }
.section-heading h2 { margin-top: 32px; font-size: 39px; }
.about-statement, .about-manifesto, .service-chapter, .contact-console, .next-page-cta { border-radius: 20px; }
.about-statement__copy { min-height: 500px; padding: 38px 24px 44px; }
.about-statement__copy h2 { margin: 72px 0 32px; font-size: 47px; }
.about-statement__jp { font-size: 14px; }
.about-statement__visual { min-height: 520px; }
.about-statement__visual img { right: 45%; bottom: -150px; width: 590px; }
.about-statement__orbit { top: 30px; right: 25px; width: 145px; height: 145px; font-size: 14px; }
.about-statement__caption { right: 24px; bottom: 22px; }
.about-manifesto { min-height: 650px; padding: 40px 24px; }
.about-manifesto__grid { grid-template-columns: 1fr; gap: 34px; margin-top: 65px; }
.about-manifesto__grid h2 { font-size: 31px; }
.about-manifesto__grid > div { font-size: 14px; line-height: 2.1; }
.about-manifesto__word { right: -8px; bottom: -30px; font-size: 94px; }
.about-principles { padding: 78px 0 60px; }
.principle-grid { grid-template-columns: 1fr; }
.principle-card:last-child { grid-column: auto; }
.principle-card { min-height: 360px; padding: 24px; }
.principle-card__en { font-size: 50px; }
.about-facts { padding: 45px 0 70px; }
.about-facts__grid { grid-template-columns: 1fr; margin-top: 35px; }
.about-facts__grid > div { min-height: 125px; padding: 25px 20px; border-right: 1px solid var(--lower-border); border-bottom: 1px solid var(--lower-border); }
.about-facts__grid strong { font-size: 64px; }
.works-filter { top: 72px; min-height: 60px; overflow-x: auto; justify-content: flex-start; border-radius: 17px; padding: 6px; scrollbar-width: none; }
.works-filter::-webkit-scrollbar { display: none; }
.works-filter > span { display: none; }
.works-filter button { min-width: 84px; height: 45px; }
.project-showcase { gap: 18px; margin-top: 0; }
.project-card { border-radius: 20px; }
.project-card--hero > a { min-height: 0; }
.project-card--hero .project-card__media { min-height: 310px; border-radius: 20px 20px 0 0; }
.project-card__info { padding: 27px 24px 30px; }
.project-card__info h2 { margin: 34px 0 42px; font-size: 29px; }
.project-card__desc { font-size: 14px !important; }
.project-showcase__pair { grid-template-columns: 1fr; }
.project-card--portrait .project-card__media, .project-card--landscape .project-card__media { height: 355px; }
.project-card--landscape { margin-top: 0; }
.project-card__media--contain img { padding: 22px 32px 0; }
.project-card--wide > a { min-height: 0; grid-template-columns: 1fr; }
.project-card--wide .project-card__info { padding: 34px 24px; }
.project-card--wide .project-card__media { height: 420px; margin: 0 18px 18px; }
.works-note { grid-template-columns: 1fr; gap: 22px; margin: 38px 0 55px; }
.works-note p { font-size: 14px; }
.service-page-layout { gap: 16px; }
.service-index { overflow-x: auto; grid-template-columns: repeat(3,108px); justify-content: flex-start; border-radius: 17px; scrollbar-width: none; }
.service-index::-webkit-scrollbar { display: none; }
.service-index > p { display: none; }
.service-index a { font-size: 14px; }
.service-chapters { gap: 16px; }
.service-chapter { scroll-margin-top: 150px; padding: 28px 22px 32px; }
.service-chapter header { font-size: 14px; }
.service-chapter h2 { margin: 48px 0 34px; font-size: 31px; line-height: 1.55; }
.service-chapter__visual { height: 275px; border-radius: 13px; }
.service-chapter__visual span { left: 14px; bottom: 13px; }
.service-chapter__details { grid-template-columns: 1fr; gap: 35px; margin-top: 32px; }
.service-chapter__details > p { font-size: 14px; }
.service-chapter__details ul { font-size: 14px; }
.service-process { margin: 72px 0; padding: 72px 0; }
.service-process h2 { margin: 40px 0 50px; font-size: 34px; }
.service-process ol { grid-template-columns: 1fr 1fr; }
.service-process li { min-height: 160px; border-bottom: 1px solid rgba(255,255,255,.24); padding: 18px; }
.service-process li:nth-child(2) { border-right: 1px solid rgba(255,255,255,.24); }
.service-process li strong { font-size: 21px; }
.contact-console__aside { padding: 40px 24px; }
.contact-console__aside h2 { margin: 70px 0 30px; font-size: 33px; }
.contact-console__facts { margin-top: 60px; }
.contact-form--premium { gap: 30px; padding: 40px 24px; }
.contact-types { grid-template-columns: 1fr; }
.contact-form__row { grid-template-columns: 1fr; gap: 30px; }
.contact-form__submit { align-items: stretch; flex-direction: column; }
.contact-form__submit button { width: 100%; }
.contact-after { padding: 70px 0 60px; }
.contact-after > div { grid-template-columns: 1fr; margin-top: 35px; }
.contact-after article { min-height: 165px; border-right: 1px solid var(--lower-border); border-bottom: 1px solid var(--lower-border); }
.contact-after h3 { margin-top: 52px; }
.next-page-cta { min-height: 330px; grid-template-columns: 1fr auto; align-content: center; gap: 35px; padding: 34px 25px; }
.next-page-cta span { grid-column: 1 / -1; }
.next-page-cta strong { font-size: 57px; }
.next-page-cta > i { width: 58px; height: 58px; }
}
/* Cascade lock: header icon and infinite works */
.menu-button { z-index:204; width:39px; height:16px; padding:0; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.menu-button span { display:block; width:39px; height:1px; flex:0 0 1px; background:currentColor; transform-origin:center; transition:width .3s,margin .3s,transform .35s cubic-bezier(.22,1,.36,1); }
.menu-button span:nth-child(2) { width:31px; margin-left:8px; }
.menu-button[aria-expanded="true"] span:nth-child(1) { width:32px; transform:translate(4px,2.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { width:32px; margin-left:0; opacity:1; transform:translate(4px,-2.5px) rotate(-45deg); }
@media (max-width:760px) { .site-header__quick { display:none; } }
/* Figma lower-page layouts */
.fg-page { overflow:hidden; padding-top:93px; color:#16201e; background:#fbfaf7; }
.fg-page h1,.fg-page h2,.fg-page h3,.fg-page p { margin-top:0; }
.fg-hero { padding-top:92px; }
.fg-hero > p { margin:0 0 24px; font-size:14px; }
.fg-hero h1 { margin:0 0 70px; font-size:96px; line-height:1; font-weight:400; letter-spacing:-.045em; }
.fg-hero figure { height:480px; margin:0; overflow:hidden; }
.fg-hero figure img { width:100%; height:100%; object-fit:cover; }
.fg-concept { padding:160px 0 175px; text-align:center; }
.fg-concept h2,.fg-philosophy > h2,.fg-company > h2 { margin:0 0 70px; font-size:64px; line-height:1; font-weight:400; }
.fg-concept > div { width:min(100%,880px); margin:auto; font-family:"Noto Sans JP",sans-serif; font-size:15px; line-height:2.3; }
.fg-concept p { margin-bottom:25px; }
.fg-philosophy { padding:130px 0 165px; border-top:1px solid #dce3df; }
.fg-philosophy > div { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce3df; border-bottom:1px solid #dce3df; }
.fg-philosophy article { min-height:330px; padding:28px 34px; border-right:1px solid #dce3df; }
.fg-philosophy article:last-child { border:0; }
.fg-philosophy span { font-size:14px; }
.fg-philosophy h3 { margin:110px 0 0; font-family:"Noto Sans JP",sans-serif; font-size:24px; line-height:1.8; font-weight:400; }
.fg-message { display:grid; grid-template-columns:1fr 1fr; min-height:650px; margin-bottom:160px; }
.fg-message figure { margin:0; overflow:hidden; }
.fg-message figure img { width:100%; height:100%; object-fit:cover; }
.fg-message > div { padding:65px 60px; border:1px solid #dce3df; }
.fg-message > div > span { font-size:14px; }
.fg-message h2 { margin:130px 0 100px; font-family:"Noto Sans JP",sans-serif; font-size:38px; line-height:1.65; font-weight:400; }
.fg-message__name { font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-company { padding:130px 0 170px; border-top:1px solid #dce3df; }
.fg-company dl { width:66%; margin:0 0 0 auto; }
.fg-company dl div,.fg-case__overview dl div,.fg-case__credits dl div,.fg-detail-section dl div { display:grid; grid-template-columns:180px 1fr; padding:24px 0; border-top:1px solid #dce3df; font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:1.8; }
.fg-company dl div:last-child,.fg-case__overview dl div:last-child,.fg-case__credits dl div:last-child,.fg-detail-section dl div:last-child { border-bottom:1px solid #dce3df; }
.fg-company dd,.fg-case__overview dd,.fg-case__credits dd,.fg-detail-section dd { margin:0; }
.fg-works__grid { display:grid; grid-template-columns:1fr 1fr; gap:110px 28px; padding-top:160px; padding-bottom:190px; }
.fg-work--main { grid-column:1/-1; width:70%; }
.fg-work figure { height:440px; margin:0 0 22px; overflow:hidden; background:#ececea; }
.fg-work--main figure { height:660px; }
.fg-work figure img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.fg-work:hover figure img { transform:scale(1.015); }
.fg-work__tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.fg-work__tags span { padding:3px 7px; border:1px solid #dceae4; border-radius:4px; font-size:14px; }
.fg-work h2 { margin:0 0 12px; font-family:"Noto Sans JP",sans-serif; font-size:20px; line-height:1.7; font-weight:400; }
.fg-work p { font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-case { padding-bottom:170px; }
.fg-case__head { padding-top:115px; }
.fg-case__head > p { margin-bottom:62px; font-size:64px; }
.fg-case__head > div { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-bottom:90px; }
.fg-case__head h1 { margin:0 0 30px; font-family:"Noto Sans JP",sans-serif; font-size:42px; line-height:1.55; font-weight:400; }
.fg-case__head ul { display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; margin:8px 0 0; padding:0; list-style:none; }
.fg-case__head li { padding:5px 8px; border:1px solid #dceae4; border-radius:4px; font-size:14px; }
.fg-case__visual { height:760px; margin-bottom:150px; overflow:hidden; }
.fg-case__visual img { width:100%; height:100%; object-fit:cover; }
.fg-case__overview { display:grid; grid-template-columns:1fr 2fr; gap:70px; padding-bottom:140px; }
.fg-case__overview > h2,.fg-case__credits > h2,.fg-case__media h2 { font-size:42px; font-weight:400; }
.fg-case__overview h3 { margin-bottom:60px; font-family:"Noto Sans JP",sans-serif; font-size:28px; line-height:1.7; font-weight:400; }
.fg-case__media { display:grid; grid-template-columns:2fr 1fr; gap:26px; padding:130px 0; border-top:1px solid #dce3df; }
.fg-case__media > div { overflow:hidden; }
.fg-case__media img { width:100%; height:650px; object-fit:cover; object-position:top; }
.fg-case__credits { display:grid; grid-template-columns:1fr 2fr; gap:70px; padding-top:140px; border-top:1px solid #dce3df; }
.fg-service { padding-bottom:180px; }
.fg-service__layout { display:grid; grid-template-columns:250px 1fr; gap:0; align-items:start; padding-top:150px; }
.fg-service__nav { position:sticky; top:90px; }
.fg-service__nav button { width:100%; min-height:105px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; padding:15px 20px; border:0; border-top:1px solid #bfc9c5; background:transparent; text-align:left; cursor:pointer; }
.fg-service__nav button:last-child { border-bottom:1px solid #bfc9c5; }
.fg-service__nav button span { font-size:14px; }
.fg-service__nav button strong { font-size:28px; font-weight:400; }
.fg-service__nav button small { font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-service__nav button:not(.is-active) { opacity:.38; }
.fg-service__content { min-height:900px; background:#fff; }
.fg-service__panel { padding:75px 75px 90px; opacity:0; transform:translateY(12px); transition:opacity .35s,transform .35s; }
.fg-service__panel.is-active { opacity:1; transform:none; }
.fg-service__panel[hidden] { display:none; }
.fg-service__panel h2 { margin-bottom:75px; font-family:"Noto Sans JP",sans-serif; font-size:36px; font-weight:400; }
.fg-service__items,.fg-service__issues { margin:0; padding:0; list-style:none; }
.fg-service__items { display:grid; grid-template-columns:1fr 1fr; margin-bottom:90px; border-top:1px solid #dce3df; }
.fg-service__items li { padding:22px 10px 22px 0; border-bottom:1px solid #dce3df; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-service__issues { border-top:1px solid #dce3df; }
.fg-service__issues li { padding:23px 0; border-bottom:1px solid #dce3df; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-service-detail { padding-bottom:170px; }
.fg-service-detail .fg-hero h1 { font-family:"Noto Sans JP",sans-serif; font-size:80px; }
.fg-service-detail__body { display:grid; grid-template-columns:260px 1fr; gap:75px; padding-top:140px; }
.fg-service-detail__body > aside { position:sticky; top:95px; display:flex; flex-direction:column; align-self:start; }
.fg-service-detail__body > aside a { padding:18px 0; border-top:1px solid #dce3df; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-service-detail__body > aside a:last-child { border-bottom:1px solid #dce3df; }
.fg-detail-intro,.fg-detail-approach,.fg-detail-section { padding-bottom:120px; margin-bottom:120px; border-bottom:1px solid #dce3df; }
.fg-detail-intro h2,.fg-detail-approach h2,.fg-detail-section h2 { margin-bottom:65px; font-family:"Noto Sans JP",sans-serif; font-size:36px; font-weight:400; }
.fg-detail-intro ul { margin:0; padding:0; list-style:none; border-top:1px solid #dce3df; }
.fg-detail-intro li { padding:22px 0; border-bottom:1px solid #dce3df; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-detail-approach ol { display:grid; grid-template-columns:repeat(5,1fr); margin:0; padding:0; list-style:none; border:1px solid #dce3df; }
.fg-detail-approach li { min-height:160px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid #dce3df; font-size:16px; }
.fg-detail-approach li:last-child { border:0; }
.fg-detail-approach li span { font-size:14px; }
.fg-detail-section > ol { margin:0; padding:0; list-style:none; }
.fg-detail-section > ol li { display:grid; grid-template-columns:55px 1fr; padding:23px 0; border-top:1px solid #dce3df; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-detail-section > ol li:last-child { border-bottom:1px solid #dce3df; }
.fg-detail-faq details { border-top:1px solid #dce3df; }
.fg-detail-faq details:last-child { border-bottom:1px solid #dce3df; }
.fg-detail-faq summary { padding:25px 0; font-family:"Noto Sans JP",sans-serif; font-size:14px; cursor:pointer; }
.fg-contact { padding-bottom:180px; }
.fg-contact__head { padding-top:105px; padding-bottom:105px; border-bottom:1px solid #dce3df; }
.fg-contact__head h1 { margin:0; font-size:96px; line-height:1; font-weight:400; }
.fg-contact__layout { display:grid; grid-template-columns:1fr 1.15fr; }
.fg-contact__layout > aside { padding:100px 85px 120px 0; border-right:1px solid #dce3df; }
.fg-contact__layout > aside h2 { margin-bottom:40px; font-family:"Noto Sans JP",sans-serif; font-size:30px; font-weight:400; }
.fg-contact__layout > aside > p { font-family:"Noto Sans JP",sans-serif; font-size:14px; line-height:2.1; }
.fg-contact__logos { margin-top:120px; }
.fg-contact__logos h3 { margin-bottom:25px; font-family:"Noto Sans JP",sans-serif; font-size:14px; font-weight:400; }
.fg-contact__logos > div { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce3df; border-left:1px solid #dce3df; }
.fg-contact__logos img { width:100%; height:90px; padding:20px; object-fit:contain; filter:grayscale(1); border-right:1px solid #dce3df; border-bottom:1px solid #dce3df; }
.fg-contact__form { padding:100px 0 120px 85px; }
.fg-contact__form > label,.fg-contact__form fieldset { display:block; margin:0 0 45px; padding:0; border:0; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-contact__form legend { margin-bottom:18px; font-family:"Noto Sans JP",sans-serif; font-size:14px; }
.fg-contact__form legend span,.fg-contact__form > label > span { color:#9a7643; font-size:14px; }
.fg-contact__form fieldset label { display:inline-flex; align-items:center; gap:6px; margin:0 25px 10px 0; }
.fg-contact__form input[type="text"],.fg-contact__form input[type="email"],.fg-contact__form input[type="tel"],.fg-contact__form textarea { width:100%; display:block; margin-top:13px; border:0; border-bottom:1px solid #aeb9b5; background:transparent; outline:0; }
.fg-contact__form input[type="text"],.fg-contact__form input[type="email"],.fg-contact__form input[type="tel"] { height:48px; }
.fg-contact__form textarea { min-height:150px; resize:vertical; }
.fg-contact__privacy { display:flex!important; align-items:center; gap:8px; }
.fg-contact__form button { width:100%; height:100px; display:flex; justify-content:space-between; align-items:center; padding:0 30px; border:0; color:#fff; background:#aa8954; cursor:pointer; }
.fg-contact__form button i { font-style:normal; }
@media (max-width:900px) {
.fg-page { padding-top:72px; }
.fg-hero { padding-top:70px; }
.fg-hero h1,.fg-contact__head h1 { font-size:74px; }
.fg-message,.fg-contact__layout { grid-template-columns:1fr; }
.fg-message > div { border-top:0; }
.fg-contact__layout > aside { border-right:0; border-bottom:1px solid #dce3df; }
.fg-contact__form { padding-left:0; }
.fg-service__layout,.fg-service-detail__body { grid-template-columns:1fr; }
.fg-service__nav { position:sticky; z-index:10; top:72px; display:grid; grid-template-columns:repeat(3,1fr); background:#fbfaf7; }
.fg-service-detail__body > aside { position:static; display:grid; grid-template-columns:repeat(4,1fr); }
.fg-work--main { width:100%; }
}
@media (max-width:640px) {
.fg-hero { padding-top:55px; }
.fg-hero h1,.fg-contact__head h1 { margin-bottom:45px; font-size:58px; }
.fg-hero figure { height:260px; }
.fg-concept,.fg-philosophy,.fg-company { padding:80px 0; }
.fg-concept h2,.fg-philosophy > h2,.fg-company > h2 { margin-bottom:48px; font-size:44px; }
.fg-concept > div { font-size:14px; text-align:left; }
.fg-concept br { display:none; }
.fg-philosophy > div { grid-template-columns:1fr; }
.fg-philosophy article { min-height:220px; border-right:0; border-bottom:1px solid #dce3df; }
.fg-philosophy h3 { margin-top:55px; font-size:20px; }
.fg-message { margin-bottom:80px; }
.fg-message figure { height:430px; }
.fg-message > div { padding:35px 25px; }
.fg-message h2 { margin:70px 0 65px; font-size:27px; }
.fg-company dl { width:100%; }
.fg-company dl div,.fg-case__overview dl div,.fg-case__credits dl div,.fg-detail-section dl div { grid-template-columns:90px 1fr; font-size:14px; }
.fg-works__grid { grid-template-columns:1fr; gap:75px; padding-top:80px; padding-bottom:100px; }
.fg-work--main { grid-column:auto; }
.fg-work figure,.fg-work--main figure { height:330px; }
.fg-case__head { padding-top:65px; }
.fg-case__head > p { margin-bottom:45px; font-size:44px; }
.fg-case__head > div,.fg-case__overview,.fg-case__credits { grid-template-columns:1fr; gap:45px; }
.fg-case__head h1 { font-size:28px; }
.fg-case__visual { height:310px; margin-bottom:80px; }
.fg-case__overview { padding-bottom:80px; }
.fg-case__media { grid-template-columns:1fr; padding:80px 0; }
.fg-case__media img { height:460px; }
.fg-service { padding-bottom:90px; }
.fg-service__layout { padding-top:80px; }
.fg-service__nav { overflow-x:auto; grid-template-columns:repeat(3,125px); }
.fg-service__nav button { min-height:70px; grid-template-columns:25px 1fr; padding:10px; }
.fg-service__nav button strong { font-size:21px; }
.fg-service__nav button small { display:none; }
.fg-service__panel { padding:45px 22px 60px; }
.fg-service__panel h2 { font-size:25px; }
.fg-service__items { grid-template-columns:1fr; }
.fg-service__items li,.fg-service__issues li { font-size:14px; }
.fg-service-detail .fg-hero h1 { font-size:48px; }
.fg-service-detail__body { padding-top:80px; }
.fg-service-detail__body > aside { overflow-x:auto; grid-template-columns:repeat(4,140px); }
.fg-detail-intro,.fg-detail-approach,.fg-detail-section { padding-bottom:75px; margin-bottom:75px; }
.fg-detail-intro h2,.fg-detail-approach h2,.fg-detail-section h2 { font-size:27px; }
.fg-detail-approach ol { grid-template-columns:1fr; }
.fg-detail-approach li { min-height:90px; border-right:0; border-bottom:1px solid #dce3df; }
.fg-contact__head { padding-top:60px; padding-bottom:60px; }
.fg-contact__layout > aside,.fg-contact__form { padding-top:70px; padding-bottom:80px; }
.fg-contact__logos { margin-top:70px; }
.fg-contact__logos > div { grid-template-columns:1fr 1fr; }
}
/* =========================================================
FIGMA LOWER PAGES — source frames 261:2081–316:567
========================================================= */
.nu-page {
--nu-line: #d7ddd9;
--nu-paper: #fbfaf7;
--nu-ink: #16201e;
--nu-green: #0f4d43;
--nu-gold: #aa8954;
overflow: hidden;
padding-top: 93px;
color: var(--nu-ink);
background: var(--nu-paper);
}
.nu-page h1,.nu-page h2,.nu-page h3,.nu-page p { margin-top: 0; }
.nu-shell { width: min(calc(100% - 188px),1252px); margin-inline: auto; }
.nu-hero { padding-top: 105px; }
.nu-hero h1 { margin: 0 0 75px; font-size: clamp(100px,10vw,144px); line-height: .82; font-weight: 400; letter-spacing: -.06em; }
.nu-hero__image { width: min(calc(100% - 188px),1252px); aspect-ratio: 1915 / 821; margin: 0 auto; overflow: hidden; }
.nu-hero__image img { width: 100%; height: 100%; object-fit: cover; }
/* About */
.nu-about-concept { padding: 190px 0 210px; text-align: center; }
.nu-about-concept h2,.nu-about-philosophy h2,.nu-about-company h2 { margin: 0; font-size: 72px; line-height: 1; font-weight: 400; letter-spacing: -.04em; }
.nu-about-concept__copy { width: min(100%,860px); margin: 92px auto 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 2.45; letter-spacing: .035em; }
.nu-about-concept__copy p { margin-bottom: 31px; }
.nu-about-philosophy { padding: 150px 0 190px; border-top: 1px solid var(--nu-line); }
.nu-about-philosophy__grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 95px; border-top: 1px solid var(--nu-line); border-bottom: 1px solid var(--nu-line); }
.nu-about-philosophy article { min-height: 385px; padding: 30px 34px; border-right: 1px solid var(--nu-line); }
.nu-about-philosophy article:last-child { border-right: 0; }
.nu-about-philosophy article > span { font-size: 14px; letter-spacing: .08em; }
.nu-about-philosophy h3 { margin: 155px 0 0; font-family: "Noto Sans JP",sans-serif; font-size: 24px; line-height: 1.8; font-weight: 400; letter-spacing: .025em; }
.nu-about-message { display: grid; grid-template-columns: 1fr 1fr; min-height: 710px; margin-bottom: 205px; }
.nu-about-message figure { margin: 0; overflow: hidden; }
.nu-about-message figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nu-about-message__copy { padding: 58px 61px; border: 1px solid var(--nu-line); }
.nu-about-message__copy > span { font-size: 14px; letter-spacing: .08em; }
.nu-about-message__copy h2 { margin: 165px 0 125px; font-family: "Noto Sans JP",sans-serif; font-size: 39px; line-height: 1.7; font-weight: 400; letter-spacing: .025em; }
.nu-about-message__copy p { margin: 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-about-company { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; padding: 155px 0 205px; border-top: 1px solid var(--nu-line); }
.nu-about-company dl { margin: 0; }
.nu-about-company dl > div,.nu-case-overview dl > div,.nu-case-credits dl > div,.nu-service-block dl > div { display: grid; grid-template-columns: 165px 1fr; gap: 30px; padding: 25px 0; border-top: 1px solid var(--nu-line); font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1.9; }
.nu-about-company dl > div:last-child,.nu-case-overview dl > div:last-child,.nu-case-credits dl > div:last-child,.nu-service-block dl > div:last-child { border-bottom: 1px solid var(--nu-line); }
.nu-about-company dd,.nu-case-overview dd,.nu-case-credits dd,.nu-service-block dd { margin: 0; }
/* Works */
.nu-works-list { display: grid; grid-template-columns: 1fr 1fr; gap: 125px 28px; padding: 190px 0 220px; }
.nu-work-card--featured { grid-column: 1 / -1; width: 100%; }
.nu-work-card figure { aspect-ratio: 1.38 / 1; margin: 0 0 24px; overflow: hidden; background: #ececea; }
.nu-work-card--featured figure { aspect-ratio: 16 / 9; }
.nu-work-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.nu-work-card:hover figure img { transform: scale(1.018); }
.nu-work-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.nu-work-card__tags span,.nu-case-head__tags span { padding: 5px 8px 4px; border: 1px solid #cfd8d4; border-radius: 3px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 1; }
.nu-work-card h2 { margin: 0 0 13px; font-family: "Noto Sans JP",sans-serif; font-size: 20px; line-height: 1.7; font-weight: 400; letter-spacing: .025em; }
.nu-work-card p { margin: 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; color: #53615d; }
/* Work detail */
.nu-case { padding-bottom: 205px; }
.nu-case-head { padding-top: 118px; }
.nu-case-head__label { margin: 0 0 90px; font-size: 72px; line-height: 1; letter-spacing: -.04em; }
.nu-case-head__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 76px; align-items: start; padding-bottom: 180px; }
.nu-case-head__info { min-height: 625px; display: flex; flex-direction: column; }
.nu-case-head__info h1 { margin: 5px 0 45px; font-family: "Noto Sans JP",sans-serif; font-size: 41px; line-height: 1.65; font-weight: 400; letter-spacing: .02em; }
.nu-case-head__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.nu-case-head__info > p { margin: auto 0 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-case-head__visual { aspect-ratio: 16 / 12.4; margin: 0; overflow: hidden; background: #e9ebe8; }
.nu-case-head__visual img { width: 100%; height: 100%; object-fit: cover; }
.nu-case-overview,.nu-case-skills,.nu-case-credits { display: grid; grid-template-columns: 1fr 2fr; gap: 75px; }
.nu-case-overview { padding: 160px 0 195px; border-top: 1px solid var(--nu-line); }
.nu-case-overview h2,.nu-case-web h2,.nu-case-line h2,.nu-case-skills h2,.nu-case-credits h2 { margin: 0; font-size: 49px; line-height: 1; font-weight: 400; letter-spacing: -.04em; }
.nu-case-overview h3 { margin: 0 0 75px; font-family: "Noto Sans JP",sans-serif; font-size: 29px; line-height: 1.7; font-weight: 400; }
.nu-case-web { padding: 155px 0 0; border-top: 1px solid var(--nu-line); }
.nu-case-web__stage { position: relative; height: 1120px; margin-top: 95px; overflow: hidden; background: #18332d; }
.nu-case-web__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.54) saturate(.75); }
.nu-case-web__browser { position: absolute; top: 95px; left: 50%; width: min(69vw,990px); max-width: none; transform: translateX(-50%); box-shadow: 0 28px 75px rgba(0,0,0,.28); }
.nu-case-line { display: grid; grid-template-columns: 1fr 2fr; gap: 75px; padding: 180px 0; }
.nu-case-line figure { height: 980px; margin: 0; overflow: hidden; background: #e5e7e3; text-align: center; }
.nu-case-line figure img { width: auto; height: 100%; margin: auto; object-fit: cover; object-position: top; }
.nu-case-skills { padding: 155px 0 175px; border-top: 1px solid var(--nu-line); }
.nu-case-skills ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nu-line); }
.nu-case-skills li { padding: 25px 0; border-bottom: 1px solid var(--nu-line); font-size: 14px; }
.nu-case-credits { padding-top: 155px; border-top: 1px solid var(--nu-line); }
.nu-case-credits dl { margin: 0; }
/* Service overview */
.nu-service { padding-bottom: 210px; }
.nu-service-layout { display: grid; grid-template-columns: 275px 1fr; align-items: start; padding-top: 185px; }
.nu-service-tabs { position: sticky; top: 93px; }
.nu-service-tabs button { width: 100%; min-height: 116px; display: grid; grid-template-columns: 37px 1fr auto; align-items: center; padding: 18px 22px 18px 0; border: 0; border-top: 1px solid #aeb9b4; color: var(--nu-ink); background: transparent; text-align: left; cursor: pointer; transition: opacity .3s,color .3s,background .3s; }
.nu-service-tabs button:last-child { border-bottom: 1px solid #aeb9b4; }
.nu-service-tabs button:not(.is-active) { opacity: .35; }
.nu-service-tabs button span { font-size: 14px; }
.nu-service-tabs button strong { font-size: 31px; line-height: 1; font-weight: 400; }
.nu-service-tabs button small { font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-service-stage { min-height: 1150px; background: #fff; }
.nu-service-panel { padding: 76px 78px 92px; opacity: 0; transform: translateY(13px); transition: opacity .36s ease,transform .36s ease; }
.nu-service-panel.is-active { opacity: 1; transform: none; }
.nu-service-panel[hidden] { display: none; }
.nu-service-panel > header { padding-bottom: 75px; }
.nu-service-panel > header > span { font-size: 14px; letter-spacing: .1em; }
.nu-service-panel > header h2 { margin: 53px 0 0; font-family: "Noto Sans JP",sans-serif; font-size: 37px; line-height: 1.55; font-weight: 400; }
.nu-service-panel__services { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nu-line); border-left: 1px solid var(--nu-line); }
.nu-service-panel__services li { min-height: 92px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; padding: 18px 21px; border-right: 1px solid var(--nu-line); border-bottom: 1px solid var(--nu-line); }
.nu-service-panel__services li > a { display: contents; }
.nu-service-panel__services span { align-self: start; font-size: 14px; opacity: .55; }
.nu-service-panel__services strong { font-family: "Noto Sans JP",sans-serif; font-size: 14px; font-weight: 400; }
.nu-service-panel__services i { font-style: normal; }
.nu-service-panel__issues { margin-top: 95px; }
.nu-service-panel__issues h3 { margin: 0 0 32px; font-family: "Noto Sans JP",sans-serif; font-size: 17px; font-weight: 400; }
.nu-service-panel__issues ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nu-line); }
.nu-service-panel__issues li { padding: 20px 0; border-bottom: 1px solid var(--nu-line); font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
/* Service detail */
.nu-service-detail { padding-bottom: 205px; }
.nu-service-detail-head { padding-top: 100px; }
.nu-service-detail-head .nu-shell > p { margin: 0 0 48px; font-size: 14px; letter-spacing: .08em; }
.nu-service-detail-head h1 { margin: 0 0 80px; font-family: "Noto Sans JP",sans-serif; font-size: clamp(82px,8.3vw,120px); line-height: 1; font-weight: 400; letter-spacing: -.04em; }
.nu-service-detail-layout { display: grid; grid-template-columns: 275px 1fr; gap: 78px; padding-top: 175px; }
.nu-service-detail-nav { position: sticky; top: 105px; align-self: start; display: flex; flex-direction: column; }
.nu-service-detail-nav a { min-height: 57px; display: flex; align-items: center; border-top: 1px solid var(--nu-line); font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-service-detail-nav a:last-child { border-bottom: 1px solid var(--nu-line); }
.nu-service-detail-main > section { scroll-margin-top: 115px; padding-bottom: 145px; margin-bottom: 145px; border-bottom: 1px solid var(--nu-line); }
.nu-service-detail-main h2 { margin: 0 0 72px; font-size: 48px; line-height: 1.2; font-weight: 400; letter-spacing: -.035em; }
.nu-service-detail-intro > h2,.nu-service-block > h2 { font-family: "Noto Sans JP",sans-serif; font-size: 35px; letter-spacing: .015em; }
.nu-service-detail-intro ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nu-line); }
.nu-service-detail-intro li { padding: 24px 0; border-bottom: 1px solid var(--nu-line); font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-service-approach ol { display: grid; grid-template-columns: repeat(5,1fr); margin: 0; padding: 0; list-style: none; border: 1px solid var(--nu-line); }
.nu-service-approach li { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 16px; border-right: 1px solid var(--nu-line); }
.nu-service-approach li:last-child { border-right: 0; }
.nu-service-approach span { font-size: 14px; }
.nu-service-approach strong { font-size: 15px; font-weight: 400; }
.nu-service-block dl { margin: 0; }
.nu-service-block > ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nu-line); }
.nu-service-block > ol li { display: grid; grid-template-columns: 70px 1fr; padding: 25px 0; border-bottom: 1px solid var(--nu-line); font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-service-block > ol strong { font-weight: 400; }
.nu-service-faq details { border-top: 1px solid var(--nu-line); }
.nu-service-faq details:last-child { border-bottom: 1px solid var(--nu-line); }
.nu-service-faq summary { padding: 26px 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; cursor: pointer; }
.nu-service-contact { min-height: 118px; display: flex; justify-content: space-between; align-items: center; padding: 0 34px; color: #fff; background: var(--nu-gold); font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-service-contact i { font-style: normal; font-size: 18px; }
/* Contact */
.nu-contact { padding-bottom: 210px; }
.nu-contact-head { padding-top: 118px; padding-bottom: 105px; }
.nu-contact-head h1 { margin: 0; font-size: clamp(100px,10vw,144px); line-height: .82; font-weight: 400; letter-spacing: -.06em; }
.nu-contact-layout { display: grid; grid-template-columns: 1fr 1.08fr; border-top: 1px solid var(--nu-line); }
.nu-contact-aside { min-height: 1370px; padding: 105px 78px 120px 0; border-right: 1px solid var(--nu-line); }
.nu-contact-aside h2 { margin: 0 0 43px; font-family: "Noto Sans JP",sans-serif; font-size: 29px; font-weight: 400; }
.nu-contact-aside > p { margin: 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; line-height: 2.2; }
.nu-contact-logos { margin-top: 165px; }
.nu-contact-logos h3 { margin: 0 0 27px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; font-weight: 400; }
.nu-contact-logos > div { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--nu-line); border-left: 1px solid var(--nu-line); }
.nu-contact-logos img { width: 100%; height: 88px; padding: 19px; object-fit: contain; filter: grayscale(1); border-right: 1px solid var(--nu-line); border-bottom: 1px solid var(--nu-line); }
.nu-contact-form { padding: 105px 0 120px 80px; }
.nu-contact-form > label,.nu-contact-form fieldset { display: block; margin: 0 0 48px; padding: 0; border: 0; font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-contact-form legend { margin-bottom: 19px; font-family: "Noto Sans JP",sans-serif; font-size: 14px; }
.nu-contact-form legend span,.nu-contact-form > label > span { margin-left: 8px; color: var(--nu-gold); font-size: 14px; }
.nu-contact-form fieldset label { display: inline-flex; align-items: center; gap: 8px; margin: 0 27px 11px 0; cursor: pointer; }
.nu-contact-form input[type="radio"],.nu-contact-form input[type="checkbox"] { position: absolute; opacity: 0; }
.nu-contact-form label b { width: 14px; height: 14px; display: inline-block; border: 1px solid #94a09b; border-radius: 50%; background: transparent; }
.nu-contact-form input:checked + b { border: 4px solid var(--nu-green); }
.nu-contact-form input[type="checkbox"] + b { border-radius: 2px; }
.nu-contact-form input[type="checkbox"]:checked + b { border: 1px solid var(--nu-green); background: var(--nu-green); box-shadow: inset 0 0 0 3px var(--nu-paper); }
.nu-contact-form input[type="text"],.nu-contact-form input[type="email"],.nu-contact-form input[type="tel"],.nu-contact-form textarea { width: 100%; display: block; margin-top: 14px; border: 0; border-bottom: 1px solid #aab5b0; border-radius: 0; color: var(--nu-ink); background: transparent; outline: 0; font: inherit; }
.nu-contact-form input[type="text"],.nu-contact-form input[type="email"],.nu-contact-form input[type="tel"] { height: 49px; }
.nu-contact-form textarea { min-height: 165px; resize: vertical; }
.nu-contact-privacy { display: flex!important; align-items: center; gap: 9px; }
.nu-contact-form button { width: 100%; height: 102px; display: flex; justify-content: space-between; align-items: center; padding: 0 31px; border: 0; color: #fff; background: var(--nu-gold); cursor: pointer; font-family: "Noto Sans JP",sans-serif; }
.nu-contact-form button i { font-style: normal; font-size: 18px; }
@media (max-width: 900px) {
.nu-page { padding-top: 72px; }
.nu-shell,.nu-hero__image { width: calc(100% - 48px); }
.nu-hero { padding-top: 75px; }
.nu-hero h1,.nu-contact-head h1 { font-size: 92px; }
.nu-about-message,.nu-contact-layout { grid-template-columns: 1fr; }
.nu-about-message__copy { border-top: 0; }
.nu-about-company,.nu-case-overview,.nu-case-line,.nu-case-skills,.nu-case-credits { grid-template-columns: 1fr; }
.nu-case-head__grid { grid-template-columns: 1fr; }
.nu-case-head__info { min-height: auto; }
.nu-case-head__info > p { margin-top: 70px; }
.nu-service-layout,.nu-service-detail-layout { grid-template-columns: 1fr; gap: 0; }
.nu-service-tabs { z-index: 10; top: 72px; display: grid; grid-template-columns: repeat(3,1fr); background: var(--nu-paper); }
.nu-service-detail-nav { position: static; display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 85px; }
.nu-contact-aside { min-height: auto; border-right: 0; border-bottom: 1px solid var(--nu-line); }
.nu-contact-form { padding-left: 0; }
}
@media (max-width: 640px) {
.nu-shell,.nu-hero__image { width: calc(100% - 32px); }
.nu-page { padding-top: 72px; }
.nu-hero { padding-top: 54px; }
.nu-hero h1,.nu-contact-head h1 { margin-bottom: 44px; font-size: 58px; line-height: .9; }
.nu-hero__image { aspect-ratio: 1.45 / 1; }
.nu-about-concept { padding: 88px 0 100px; text-align: left; }
.nu-about-concept h2,.nu-about-philosophy h2,.nu-about-company h2 { font-size: 43px; }
.nu-about-concept__copy { margin-top: 55px; font-size: 14px; line-height: 2.15; }
.nu-about-concept__copy br { display: none; }
.nu-about-philosophy { padding: 84px 0 100px; }
.nu-about-philosophy__grid { grid-template-columns: 1fr; margin-top: 55px; }
.nu-about-philosophy article { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--nu-line); }
.nu-about-philosophy article:last-child { border-bottom: 0; }
.nu-about-philosophy h3 { margin-top: 65px; font-size: 19px; }
.nu-about-message { min-height: 0; margin-bottom: 92px; }
.nu-about-message figure { height: 470px; }
.nu-about-message__copy { padding: 35px 24px; }
.nu-about-message__copy h2 { margin: 82px 0 70px; font-size: 26px; }
.nu-about-company { gap: 52px; padding: 85px 0 105px; }
.nu-about-company dl > div,.nu-case-overview dl > div,.nu-case-credits dl > div,.nu-service-block dl > div { grid-template-columns: 90px 1fr; gap: 15px; font-size: 14px; }
.nu-works-list { grid-template-columns: 1fr; gap: 82px; padding: 92px 0 115px; }
.nu-work-card--featured { grid-column: auto; }
.nu-work-card figure,.nu-work-card--featured figure { aspect-ratio: 1.25 / 1; }
.nu-work-card h2 { font-size: 16px; }
.nu-case { padding-bottom: 105px; }
.nu-case-head { padding-top: 62px; }
.nu-case-head__label { margin-bottom: 55px; font-size: 44px; }
.nu-case-head__grid { gap: 60px; padding-bottom: 92px; }
.nu-case-head__info h1 { font-size: 27px; }
.nu-case-overview { gap: 55px; padding: 88px 0 105px; }
.nu-case-overview h2,.nu-case-web h2,.nu-case-line h2,.nu-case-skills h2,.nu-case-credits h2 { font-size: 38px; }
.nu-case-overview h3 { font-size: 23px; }
.nu-case-web { padding-top: 88px; }
.nu-case-web__stage { height: 520px; margin-top: 58px; }
.nu-case-web__browser { top: 45px; width: 82vw; }
.nu-case-line { gap: 55px; padding: 95px 0; }
.nu-case-line figure { height: 660px; }
.nu-case-skills { gap: 55px; padding: 88px 0 100px; }
.nu-case-skills ul { grid-template-columns: 1fr; }
.nu-case-credits { gap: 55px; padding-top: 88px; }
.nu-service { padding-bottom: 105px; }
.nu-service-layout { width: 100%; padding-top: 92px; }
.nu-service-tabs { overflow-x: auto; grid-template-columns: repeat(3,130px); padding-left: 16px; }
.nu-service-tabs button { min-height: 76px; grid-template-columns: 25px 1fr; padding: 10px; }
.nu-service-tabs button strong { font-size: 21px; }
.nu-service-tabs button small { display: none; }
.nu-service-stage { min-height: 760px; }
.nu-service-panel { padding: 48px 22px 62px; }
.nu-service-panel > header h2 { font-size: 25px; }
.nu-service-panel__services { grid-template-columns: 1fr; }
.nu-service-panel__issues { margin-top: 70px; }
.nu-service-panel__issues li { font-size: 14px; }
.nu-service-detail { padding-bottom: 105px; }
.nu-service-detail-head { padding-top: 58px; }
.nu-service-detail-head h1 { margin-bottom: 48px; font-size: 48px; }
.nu-service-detail-layout { padding-top: 90px; }
.nu-service-detail-nav { overflow-x: auto; grid-template-columns: repeat(4,145px); margin-bottom: 75px; }
.nu-service-detail-main > section { padding-bottom: 82px; margin-bottom: 82px; }
.nu-service-detail-main h2,.nu-service-detail-intro > h2,.nu-service-block > h2 { margin-bottom: 50px; font-size: 28px; }
.nu-service-approach ol { grid-template-columns: 1fr; }
.nu-service-approach li { min-height: 92px; border-right: 0; border-bottom: 1px solid var(--nu-line); }
.nu-service-approach li:last-child { border-bottom: 0; }
.nu-contact { padding-bottom: 105px; }
.nu-contact-head { padding-top: 64px; padding-bottom: 61px; }
.nu-contact-aside { padding: 72px 0 82px; }
.nu-contact-logos { margin-top: 82px; }
.nu-contact-logos > div { grid-template-columns: 1fr 1fr; }
.nu-contact-form { padding: 78px 0 88px; }
}
/* ---------------------------------------------------------------
Work detail gallery and lower-page navigation refinements
--------------------------------------------------------------- */
.pdf-work-credits dt { color:var(--pdf-ink); }
.pdf-work-detail { overflow-x:clip; }
.pdf-side-nav { --nav-indicator-y:27px; }
.pdf-side-nav::before {
top:var(--nav-indicator-y);
transition:top .38s cubic-bezier(.22,1,.36,1);
}
.pdf-work-detail__panel .pdf-work-gallery {
position:relative;
width:calc(100% + 76px);
margin:30px 0 0 -38px;
overflow:hidden;
color:var(--pdf-ink);
background:transparent;
}
.pdf-work-gallery__viewport { overflow:hidden; background:#eef0ed; }
.pdf-work-gallery__track {
display:flex;
will-change:transform;
transform:translate3d(0,0,0);
transition:transform .68s cubic-bezier(.22,1,.36,1);
}
.pdf-work-gallery__track.is-resetting { transition:none; }
.pdf-work-gallery__slide {
position:relative;
flex:0 0 100%;
aspect-ratio:1600 / 913;
overflow:hidden;
background:#eef0ed;
}
.pdf-work-gallery__slide img {
width:100%;
height:100%;
max-width:none;
object-fit:cover;
transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.pdf-work-gallery__slide.is-contain img { object-fit:contain; }
.pdf-work-gallery__slide.is-crop img { transform:scale(1.5); }
.pdf-work-gallery__slide.is-crop--desktop img { transform-origin:69% 48%; }
.pdf-work-gallery__slide.is-crop--mobile img { transform-origin:23% 55%; }
.pdf-work-gallery__slide.is-crop--left img { transform-origin:22% 52%; }
.pdf-work-gallery__slide.is-crop--right img { transform-origin:80% 50%; }
.pdf-work-gallery__controls {
position:relative;
z-index:1;
display:flex;
justify-content:flex-end;
align-items:center;
gap:10px;
min-height:78px;
padding:16px 38px 10px;
background:#fff;
}
.pdf-work-gallery__controls button {
width:44px;
height:44px;
display:grid;
place-items:center;
padding:0;
border:1px solid rgba(22,32,30,.18);
border-radius:50%;
color:var(--pdf-ink);
background:#fff;
box-shadow:none;
cursor:pointer;
transition:color .25s ease,background-color .25s ease,transform .25s ease;
}
.pdf-work-gallery__controls button:hover {
color:#fff;
background:var(--pdf-green);
transform:translateY(-2px);
}
.pdf-work-gallery__controls button:focus-visible { outline:2px solid var(--pdf-gold); outline-offset:3px; }
.pdf-work-gallery__controls p {
min-width:58px;
margin:0;
color:var(--pdf-ink);
font-size:14px;
letter-spacing:.08em;
text-align:center;
text-shadow:none;
}
.pdf-work-gallery__controls strong { font-size:15px; font-weight:500; }
.pdf-work-gallery__controls span { margin-left:3px; }
/* 下層は初期状態をインク色、縮小ヘッダーは緑背景＋白に統一する。 */
.site-header {
transition:transform .35s ease,background-color .35s ease,height .35s ease,color .35s ease;
}
.site-header__logo img { transition:filter .35s ease,opacity .25s ease; }
.site-header--dark:not(.is-compact) { color:var(--ink); }
.site-header--dark:not(.is-compact) .menu-button span { background:currentColor; }
.site-header--dark.is-compact {
color:#fff;
background:rgba(11,28,25,.9);
}
.site-header--dark.is-compact .site-header__logo img { filter:brightness(0) invert(1); }
.site-header--dark.is-compact .menu-button span { background:currentColor; }
/* メニュー面をページとヘッダー表示より前へ出し、閉じるボタンだけ最前面に残す。 */
.site-menu__scrim { z-index:294; }
.site-menu { z-index:300; }
body.menu-open .site-header {
z-index:310;
pointer-events:none;
}
body.menu-open .site-header__logo {
opacity:0;
pointer-events:none;
}
body.menu-open .site-header__quick {
opacity:0;
pointer-events:none;
}
body.menu-open .menu-button {
position:relative;
z-index:311;
pointer-events:auto;
}
@media (max-width:760px) {
.pdf-work-detail__panel .pdf-work-gallery {
width:calc(100% + 44px);
margin-left:-22px;
}
.pdf-work-gallery__controls { min-height:68px; padding:13px 22px 8px; }
.pdf-work-gallery__controls button { width:42px; height:42px; }
.pdf-work-gallery__controls p { min-width:44px; }
.pdf-work-detail__panel #concept > h2 { font-size:21px; }
.pdf-work-issues { margin-top:30px; }
.pdf-work-issues li { padding:15px 4px 16px 24px; font-size:14px; }
.pdf-work-issues li::before { top:23px; left:3px; width:6px; height:6px; }
.pdf-work-detail__concept { grid-template-columns:1fr; gap:11px; margin-top:34px; padding-top:21px; }
.pdf-work-detail__concept-label { padding-top:0; }
.pdf-work-detail__concept-copy { font-size:14px; line-height:1.95; }
}
@media (prefers-reduced-motion:reduce) {
.pdf-side-nav::before,
.pdf-work-gallery__track,
.pdf-work-gallery__slide img { transition:none; }
}
/* Keep the original contact and footer surfaces above the expanded Works surface. */
.contact,
.site-footer {
position: relative;
z-index: 2;
}
/* =========================================================
Menu stacking + restrained contact interaction polish
========================================================= */
/*
* The header remains the close-button stacking context while open. Its surface
* must become transparent so it cannot cover the navigation panel beneath it.
*/
.site-menu__scrim { z-index:9997; }
.site-menu { z-index:9998; }
body.menu-open .site-header {
z-index:9999;
background:transparent!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
box-shadow:none!important;
pointer-events:none;
}
body.menu-open .menu-button {
position:fixed;
z-index:10000;
top:38px;
right:66px;
width:44px;
height:44px;
display:grid;
place-items:center;
padding:0;
border:1px solid rgba(255,255,255,.32);
border-radius:50%;
color:#fff;
background:rgba(255,255,255,.08);
box-shadow:0 10px 30px rgba(4,24,20,.16);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
pointer-events:auto;
transition:color .38s cubic-bezier(.22,1,.36,1),background-color .38s cubic-bezier(.22,1,.36,1),border-color .38s cubic-bezier(.22,1,.36,1),box-shadow .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1);
}
body.menu-open .menu-button span {
grid-area:1 / 1;
width:20px!important;
height:1px;
margin:0!important;
background:currentColor!important;
}
body.menu-open .menu-button span:nth-child(1) { transform:rotate(45deg)!important; }
body.menu-open .menu-button span:nth-child(2) { transform:rotate(-45deg)!important; }
body.menu-open .menu-button:focus-visible {
outline:2px solid #fff;
outline-offset:3px;
}
body.menu-open .menu-button:active { transform:scale(.94); }
@media (hover:hover) {
body.menu-open .menu-button:hover {
color:var(--green);
background:#fff;
border-color:#fff;
box-shadow:0 14px 34px rgba(4,24,20,.22);
transform:translateY(-1px) rotate(8deg);
}
}
@media (max-width:760px) {
body.menu-open .menu-button {
top:30px;
right:30px;
}
}
/* Contact controls keep their existing dimensions, colours and placement. */
.pdf-choice-grid label,
.pdf-privacy label {
position:relative;
isolation:isolate;
overflow:hidden;
transition:
border-color .42s cubic-bezier(.22,1,.36,1),
box-shadow .42s cubic-bezier(.22,1,.36,1),
transform .42s cubic-bezier(.22,1,.36,1),
background-color .42s cubic-bezier(.22,1,.36,1);
}
.pdf-choice-grid .wpcf7-list-item-label::before,
.pdf-privacy .wpcf7-list-item-label::before {
z-index:1;
transition:
border-color .36s cubic-bezier(.22,1,.36,1),
background-color .36s cubic-bezier(.22,1,.36,1),
box-shadow .36s cubic-bezier(.22,1,.36,1),
transform .36s cubic-bezier(.22,1,.36,1);
}
.pdf-choice-grid label:focus-within,
.pdf-privacy label:focus-within {
border-color:var(--pdf-green);
box-shadow:0 12px 30px -26px rgba(15,77,67,.75);
}
.pdf-field input,
.pdf-name-field input {
transition:
background-color .42s cubic-bezier(.22,1,.36,1),
box-shadow .42s cubic-bezier(.22,1,.36,1);
}
.pdf-field input:focus,
.pdf-name-field input:focus {
background:#fff;
box-shadow:
inset 0 -1px 0 rgba(15,77,67,.58),
0 16px 34px -30px rgba(15,77,67,.7);
}
.pdf-submit-wrap {
position:relative;
isolation:isolate;
overflow:hidden;
}
.pdf-contact-form input[type="submit"],
.pdf-contact-form .pdf-review-btn {
transition:
transform .46s cubic-bezier(.22,1,.36,1),
box-shadow .46s cubic-bezier(.22,1,.36,1),
letter-spacing .46s cubic-bezier(.22,1,.36,1);
}
.pdf-submit-wrap::after {
content:"";
position:absolute;
z-index:0;
inset:10px;
pointer-events:none;
border:1px solid rgba(176,137,78,.42);
transform:scaleX(.94);
transition:
border-color .5s cubic-bezier(.22,1,.36,1),
transform .5s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) {
.pdf-choice-grid label:hover,
.pdf-privacy label:hover {
transform:translateY(-1px);
border-color:rgba(15,77,67,.55);
box-shadow:0 15px 32px -28px rgba(15,77,67,.85);
}
.pdf-field input:hover,
.pdf-name-field input:hover {
box-shadow:inset 0 -1px 0 rgba(15,77,67,.24);
}
.pdf-submit-wrap:hover input[type="submit"],
.pdf-submit-wrap:hover .pdf-review-btn {
transform:translateY(-2px);
letter-spacing:.2em;
box-shadow:0 26px 50px -28px rgba(11,58,51,.85);
}
.pdf-submit-wrap:hover::after {
border-color:rgba(198,163,106,.9);
transform:scaleX(1);
}
}
.pdf-contact-form input[type="submit"]:active,
.pdf-contact-form .pdf-review-btn:active {
transform:translateY(0) scale(.995);
box-shadow:0 12px 28px -24px rgba(11,58,51,.75);
}
.pdf-contact-form input[type="submit"]:focus-visible,
.pdf-contact-form .pdf-review-btn:focus-visible {
outline:2px solid var(--pdf-green);
outline-offset:4px;
}
@media (prefers-reduced-motion:reduce) {
.pdf-choice-grid label,
.pdf-privacy label,
.pdf-choice-grid .wpcf7-list-item-label::before,
.pdf-privacy .wpcf7-list-item-label::before,
.pdf-field input,
.pdf-name-field input,
.pdf-contact-form input[type="submit"],
.pdf-contact-form .pdf-review-btn,
.pdf-submit-wrap::after {
transition:none!important;
}
}
/* =========================================================
Service reading rhythm — aligned with the Journal experience
========================================================= */
.pdf-service-panel {
padding:58px 64px 80px;
}
.pdf-service-panel > h2,
.pdf-service-panel > .pdf-service-panel__eyebrow,
.pdf-service-panel > .pdf-service-panel__status,
.pdf-service-panel > .pdf-service-panel__lead,
.pdf-service-panel > .pdf-service-panel__note {
width:100%;
max-width:680px;
margin-left:auto!important;
margin-right:auto!important;
}
.pdf-service-panel > h2 {
margin-bottom:24px;
font-size:24px;
line-height:1.55;
letter-spacing:.02em;
}
.pdf-service-panel__eyebrow {
margin-bottom:17px!important;
}
.pdf-service-panel__lead {
margin-bottom:56px!important;
padding-left:20px;
color:#35413e;
font-size:15px;
line-height:2;
}
.pdf-service-panel section {
width:100%;
max-width:680px;
margin:0 auto 68px;
}
.pdf-service-panel section h3 {
margin-bottom:14px;
padding-left:18px;
font-size:18px;
line-height:1.6;
letter-spacing:.025em;
}
.pdf-service-panel section h3::before {
top:.76em;
width:6px;
height:6px;
}
.pdf-service-panel section p {
color:#35413e;
font-size:16px;
line-height:2;
letter-spacing:.015em;
}
.pdf-service-panel .note-link {
margin-top:28px;
}
@media (max-width:900px) {
.pdf-service-panel {
padding:48px 40px 68px;
}
}
@media (max-width:640px) {
.pdf-service-panel {
padding:34px 22px 58px;
}
.pdf-service-panel > h2 {
font-size:22px;
}
.pdf-service-panel__lead {
margin-bottom:46px!important;
padding-left:16px;
font-size:14px;
line-height:1.95;
}
.pdf-service-panel section {
margin-bottom:56px;
}
.pdf-service-panel section h3 {
font-size:17px;
}
.pdf-service-panel section p {
font-size:15px;
line-height:1.95;
}
.pdf-service-panel .pdf-service-scope {
gap:8px 6px;
}
.pdf-service-panel .pdf-service-scope li {
font-size:14px;
}
}
/* Service sidebar subcategories use the full menu width in two balanced columns. */
.pdf-service-tabs a span i {
min-width:0;
width:100%;
display:inline-flex;
align-items:center;
margin:0;
font-style:normal;
white-space:nowrap;
}
.pdf-service-tabs a span i::before {
content:"";
width:5px;
height:5px;
flex:0 0 5px;
margin-right:9px;
border-radius:50%;
background:currentColor;
transform:translateY(-1px);
}
/* =========================================================
Privacy policy
========================================================= */
.nu-privacy-page {
padding-bottom:0;
background:var(--pdf-paper);
}
.nu-privacy-hero {
position:relative;
min-height:520px;
padding-top:116px;
padding-bottom:88px;
border-bottom:1px solid #dce1df;
}
.nu-privacy-hero > .pdf-breadcrumb {
top:36px;
right:0;
}
.nu-privacy-hero__eyebrow {
margin:0 0 28px;
color:var(--pdf-gold);
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:1.5;
letter-spacing:.18em;
}
.nu-privacy-hero h1 {
max-width:850px;
margin:0;
font-family:"Noto Sans JP",sans-serif;
font-size:clamp(52px,5.8vw,80px);
line-height:1.23;
font-weight:500;
letter-spacing:-.045em;
}
.nu-privacy-hero__foot {
max-width:850px;
display:grid;
grid-template-columns:minmax(0,600px) auto;
gap:60px;
align-items:end;
margin-top:62px;
font-family:"Noto Sans JP",sans-serif;
}
.nu-privacy-hero__foot p {
margin:0;
color:#4f5b57;
font-size:14px;
line-height:2;
}
.nu-privacy-hero__foot time {
color:#89928f;
font-size:14px;
line-height:1.6;
white-space:nowrap;
}
.nu-privacy-layout {
width:min(calc(100% - 246px),1100px);
display:grid;
grid-template-columns:240px minmax(0,680px);
gap:100px;
align-items:start;
padding:100px 0 190px;
}
.nu-privacy-toc {
position:sticky;
top:108px;
font-family:"Noto Sans JP",sans-serif;
}
.nu-privacy-toc > p {
margin:0;
padding:0 0 16px;
border-bottom:1px solid var(--pdf-ink);
color:var(--pdf-gold);
font-size:14px;
letter-spacing:.18em;
}
.nu-privacy-toc nav {
display:flex;
flex-direction:column;
}
.nu-privacy-toc a {
min-height:48px;
display:grid;
grid-template-columns:28px 1fr;
gap:8px;
align-items:center;
border-bottom:1px solid #dce1df;
color:#56615e;
font-size:14px;
line-height:1.5;
transition:color .28s ease,padding-left .35s cubic-bezier(.22,1,.36,1);
}
.nu-privacy-toc a span {
color:#a3aaa7;
font-size:14px;
transition:color .28s ease;
}
.nu-privacy-toc a:hover,
.nu-privacy-toc a:focus-visible {
padding-left:5px;
color:var(--pdf-green);
}
.nu-privacy-toc a:hover span,
.nu-privacy-toc a:focus-visible span {
color:var(--pdf-gold);
}
.nu-privacy-article {
min-width:0;
color:#26322f;
font-family:"Noto Sans JP",sans-serif;
font-size:16px;
line-height:2;
letter-spacing:.015em;
}
.nu-privacy-article__intro {
margin:0 0 82px;
padding:25px 28px;
border-left:3px solid var(--pdf-green);
color:#4f5b57;
background:#f5f8fa;
font-size:16px;
line-height:2;
}
.nu-privacy-article section {
scroll-margin-top:110px;
margin:0 0 72px;
padding:0 0 72px;
border-bottom:1px solid #dce1df;
}
.nu-privacy-article section:last-child {
margin-bottom:0;
}
.nu-privacy-section__no {
margin:0 0 12px!important;
color:var(--pdf-gold)!important;
font-size:14px!important;
line-height:1.5!important;
letter-spacing:.16em!important;
}
.nu-privacy-article h2 {
margin:0 0 28px;
color:var(--pdf-ink);
font-size:27px;
line-height:1.55;
font-weight:500;
letter-spacing:.015em;
}
.nu-privacy-article p {
margin:0 0 26px;
}
.nu-privacy-article p:last-child {
margin-bottom:0;
}
.nu-privacy-article ul {
margin:28px 0;
padding:0;
list-style:none;
}
.nu-privacy-article li {
position:relative;
margin:8px 0;
padding-left:19px;
}
.nu-privacy-article li::before {
content:"";
position:absolute;
top:.9em;
left:0;
width:5px;
height:5px;
border-radius:50%;
background:var(--pdf-gold);
}
.nu-privacy-contact {
padding:32px 34px 36px!important;
border-bottom:0!important;
border-left:3px solid var(--pdf-green);
background:#f5f8fa;
}
.nu-privacy-contact dl {
margin:34px 0 0;
border-top:1px solid #d4dcda;
}
.nu-privacy-contact dl > div {
display:grid;
grid-template-columns:120px 1fr;
gap:24px;
padding:16px 0;
border-bottom:1px solid #d4dcda;
font-size:14px;
line-height:1.7;
}
.nu-privacy-contact dt {
color:#7b8581;
}
.nu-privacy-contact dd {
margin:0;
}
.nu-privacy-contact a,
.pdf-privacy-link {
color:var(--pdf-green);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:4px;
transition:color .25s ease,text-decoration-color .25s ease;
}
.nu-privacy-contact a:hover,
.pdf-privacy-link:hover {
color:var(--pdf-gold);
}
.pdf-privacy-link:focus-visible {
outline:2px solid var(--pdf-green);
outline-offset:3px;
}
@media (max-width:900px) {
.nu-privacy-hero {
min-height:480px;
padding-top:100px;
}
.nu-privacy-layout {
width:calc(100% - 48px);
grid-template-columns:200px minmax(0,1fr);
gap:56px;
}
.nu-privacy-hero h1 {
font-size:56px;
}
}
@media (max-width:640px) {
.nu-privacy-hero {
min-height:0;
padding-top:70px;
padding-bottom:64px;
}
.nu-privacy-hero > .pdf-breadcrumb {
position:static;
margin:0 0 54px;
}
.nu-privacy-hero h1 {
font-size:clamp(39px,12vw,52px);
line-height:1.3;
}
.nu-privacy-hero__foot {
grid-template-columns:1fr;
gap:24px;
margin-top:44px;
}
.nu-privacy-layout {
width:calc(100% - 32px);
grid-template-columns:1fr;
gap:64px;
padding:70px 0 120px;
}
.nu-privacy-toc {
position:static;
}
.nu-privacy-toc nav {
display:grid;
grid-template-columns:1fr 1fr;
}
.nu-privacy-toc a:nth-child(odd) {
border-right:1px solid #dce1df;
padding-right:10px;
}
.nu-privacy-toc a:nth-child(even) {
padding-left:10px;
}
.nu-privacy-article {
font-size:15px;
line-height:1.95;
}
.nu-privacy-article__intro {
margin-bottom:62px;
padding:22px;
font-size:15px;
}
.nu-privacy-article section {
margin-bottom:58px;
padding-bottom:58px;
}
.nu-privacy-article h2 {
margin-bottom:22px;
font-size:23px;
}
.nu-privacy-contact {
padding:26px 22px 28px!important;
}
.nu-privacy-contact dl > div {
grid-template-columns:1fr;
gap:4px;
}
}
/* ===============================================================
Mobile home-page refinement (v6.7.0)
- compact menu card
- calmer section reveals
- single-card Works carousel with intrinsic image ratio
- About Us reading order: title / diagram / copy / CTA
=============================================================== */
@media (max-width: 640px) {
/* The current header uses the compact card menu. Neutralize the oversized
legacy full-screen navigation rules that also match .site-menu__links. */
.site-menu,
.site-header.is-compact ~ .site-menu {
top: 12px;
right: 12px;
width: min(290px, calc(100vw - 24px));
max-height: calc(100svh - 24px);
padding: 62px 22px 22px;
gap: 14px;
overflow-y: auto;
border-radius: 14px;
overscroll-behavior: contain;
}
.site-menu__links {
gap: 0;
}
.site-menu__links li {
display: block;
}
.site-menu__links a {
min-height: 0;
padding: 5px 0;
gap: 8px;
font-size: clamp(18px, 5.6vw, 23px);
line-height: 1.42;
letter-spacing: .015em;
}
.site-menu__links a i {
width: auto;
height: auto;
font-size: 14px;
}
.site-menu__cta {
gap: 8px;
}
.site-menu__cta a {
height: 43px;
border-radius: 6px;
font-size: 14px;
}
/* Give the end of Services and the Works surface a deliberate breath. */
.works {
margin-top: clamp(88px, 24vw, 124px);
}
/* All principal home sections already use .reveal. On mobile, use a
slightly longer easing and stagger the three service rows. */
.reveal {
transform: translateY(28px);
transition:
opacity .86s cubic-bezier(.22, 1, .36, 1),
transform .86s cubic-bezier(.22, 1, .36, 1);
}
.service-accordion.reveal .service-row {
opacity: 0;
transform: translateY(18px);
transition:
opacity .72s cubic-bezier(.22, 1, .36, 1),
transform .72s cubic-bezier(.22, 1, .36, 1);
}
.service-accordion.reveal.is-visible .service-row {
opacity: 1;
transform: none;
}
.service-accordion.reveal.is-visible .service-row:nth-child(1) { transition-delay: .06s; }
.service-accordion.reveal.is-visible .service-row:nth-child(2) { transition-delay: .16s; }
.service-accordion.reveal.is-visible .service-row:nth-child(3) { transition-delay: .26s; }
.works__toolbar {
opacity: 0;
transform: translateY(16px);
transition:
opacity .72s cubic-bezier(.22, 1, .36, 1),
transform .72s cubic-bezier(.22, 1, .36, 1);
}
.works__head.is-visible + .works__toolbar {
opacity: 1;
transform: none;
transition-delay: .14s;
}
/* One achievement at a time. The following card stays fully outside the
viewport while preserving the existing arrow, autoplay and swipe motion. */
.works-carousel {
width: 100%;
height: calc((100vw - 32px) * .570625 + 108px);
margin-top: 28px;
overflow: hidden;
touch-action: pan-y;
overscroll-behavior-inline: contain;
}
.work-card,
.work-card[data-slot="active"],
.work-card[data-slot="queue-1"],
.work-card[data-slot="queue-2"],
.work-card[data-slot="hidden-right"],
.work-card[data-slot="hidden-left"],
.work-card[data-slot="leaving"] {
top: 0;
width: 100%;
}
.work-card[data-slot="active"] {
left: 0;
opacity: 1;
visibility: visible;
transform: translateX(0);
filter: none;
pointer-events: auto;
}
.work-card[data-slot="queue-1"],
.work-card[data-slot="queue-2"],
.work-card[data-slot="hidden-right"] {
left: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(18px);
filter: none;
pointer-events: none;
}
.work-card[data-slot="hidden-left"],
.work-card[data-slot="leaving"] {
left: -100%;
opacity: 0;
visibility: hidden;
transform: translateX(-18px);
filter: none;
pointer-events: none;
}
.work-card__image,
.work-card[data-slot="active"] .work-card__image,
.work-card[data-slot="leaving"] .work-card__image {
height: auto;
aspect-ratio: auto;
}
.work-card__image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: contain;
-webkit-user-drag: none;
user-select: none;
}
.work-card h3 {
margin-top: 13px;
font-size: 15px;
white-space: normal;
}
.work-card ul {
gap: 6px;
font-size: 12px;
}
/* Mobile narrative order: heading, visual, copy, action. display:contents
keeps the desktop two-column markup untouched. */
.about__inner {
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.about__intro {
display: contents;
}
.about__eyebrow {
display: none;
}
.about__intro h2 {
order: 1;
margin: 0 0 24px;
}
.venn {
order: 2;
margin: 0 auto 42px;
}
.about__statement {
order: 3;
margin: 0 0 30px;
}
.about__intro .pill-link {
order: 4;
align-self: flex-start;
}
.about.is-scroll-linked .about__intro.reveal {
opacity: 1;
transform: none;
filter: none;
}
.about.is-scroll-linked .about__intro.reveal > h2,
.about.is-scroll-linked .about__intro.reveal > .about__statement,
.about.is-scroll-linked .about__intro.reveal > .pill-link {
opacity: var(--about-reveal-opacity, 0);
transform: translateY(var(--about-reveal-offset, 32px));
filter: blur(var(--about-reveal-blur, 8px));
will-change: opacity, transform, filter;
}
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
.service-accordion.reveal .service-row,
.works__toolbar,
.about.is-scroll-linked .about__intro.reveal > h2,
.about.is-scroll-linked .about__intro.reveal > .about__statement,
.about.is-scroll-linked .about__intro.reveal > .pill-link {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* Mobile Works spacing and variable-height card fix (v6.7.1) */
@media (max-width: 640px) {
.works {
min-height: 0;
padding-bottom: 22px;
}
.works__inner,
.works.is-content-pinned .works__inner {
width: calc(100% - 56px);
}
.works-carousel {
/* Fixed per viewport width: title/tag line counts never resize the
carousel or the white Works surface while slides change. */
height: calc((100vw - 56px) * .570625 + clamp(140px, 38vw, 158px));
}
.work-card ul {
padding-bottom: 2px;
line-height: 1.45;
}
.work-card li {
line-height: 1.4;
}
}
/* ===============================================================
Service mobile index refinement (v6.8.0)
Desktop remains unchanged.
=============================================================== */
@media (max-width: 640px) {
/* Mobile FV: retain the page title and breadcrumb, remove only the image. */
.pdf-service .pdf-main-hero {
padding-top: 42px;
}
.pdf-service .pdf-main-hero h1 {
margin-bottom: 22px;
}
.pdf-service .pdf-main-hero > .pdf-breadcrumb {
margin: 0 0 30px;
}
.pdf-service .pdf-main-hero figure {
display: none;
}
.pdf-service .pdf-service-layout {
width: calc(100% - 32px);
display: block;
margin-top: 0;
padding-bottom: 110px;
}
/* On mobile the former sidebar becomes the horizontal index shown in the
reference. It remains in normal flow, then sticks below the header. */
.pdf-service .pdf-service-aside {
position: sticky;
z-index: 120;
top: 72px;
width: calc(100% + 32px);
max-height: none;
margin-left: -16px;
padding: 0;
overflow: visible;
background: rgba(249,248,245,.97);
backdrop-filter: blur(16px);
transform: translateY(0);
transition: transform .35s ease, box-shadow .35s ease;
will-change: transform;
}
.pdf-service .pdf-service-aside.is-stuck {
box-shadow: 0 12px 26px rgba(12,35,30,.08);
}
/* ヘッダーとタブは高さが違うので、--service-index-shift(=ヘッダー+タブの高さ)を
両方に使い、同じ距離・同じ時間で動かして一体で出入りさせる。 */
.pdf-service .pdf-service-aside.is-scroll-hidden {
transform: translateY(calc(-1 * var(--service-index-shift, 274px)));
}
body.has-service-index .site-header.is-hidden {
transform: translateY(calc(-1 * var(--service-index-shift, 274px)));
}
/* サイドのお問い合わせCTAはスマホ固定バーへ集約する。 */
.pdf-service .pdf-service-aside > .pdf-side-contact {
display: none;
}
.pdf-service .pdf-service-tabs {
position: relative;
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
margin-top: 0;
padding-bottom: 148px;
border-bottom: 1px solid var(--pdf-ink);
}
.pdf-service .pdf-service-tabs a,
.pdf-service .pdf-service-tabs a:not(.is-active),
.pdf-service .pdf-service-tabs a.is-active {
position: static;
width: auto;
height: 50px;
min-height: 50px;
display: grid;
place-items: center;
overflow: visible;
padding: 0;
border-bottom: 1px solid rgba(22,32,30,.18);
color: #9aa19d;
background: transparent;
text-align: center;
/* 非アクティブの下線(border-bottom)とアクティブの金色(box-shadow)は、
どちらも同じセル境界(0)に描くので段差が出ない。両方を同時にtransitionさせる。 */
transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.pdf-service .pdf-service-tabs a + a {
border-left: 1px solid rgba(22,32,30,.14);
}
.pdf-service .pdf-service-tabs a.is-active {
color: var(--pdf-ink);
background: rgba(176,137,78,.09);
box-shadow: inset 0 -3px 0 0 var(--pdf-gold);
}
.pdf-service .pdf-service-tabs a strong {
width: 100%;
display: grid;
place-items: center;
font-size: 20px;
line-height: 1;
}
.pdf-service .pdf-service-tabs a span,
.pdf-service .pdf-service-tabs a.is-active span {
position: absolute;
top: 45px;
width: 100%;
max-height: none;
min-height: 142px;
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
align-content: center;
gap: 6px 16px;
margin: 0;
padding: 18px 24px 20px;
overflow: visible;
color: var(--pdf-ink);
text-align: left;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
pointer-events: none;
transition: opacity .24s ease, transform .34s cubic-bezier(.22,1,.36,1), visibility 0s .34s;
}
.pdf-service .pdf-service-tabs a:nth-child(1) span { left: 0; }
.pdf-service .pdf-service-tabs a:nth-child(2) span { left: 0; }
.pdf-service .pdf-service-tabs a:nth-child(3) span { left: 0; }
.pdf-service .pdf-service-tabs a.is-active span {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition-delay: .05s, .05s, 0s;
}
.pdf-service .pdf-service-tabs a span br {
display: none;
}
/* PC版(.pdf-service-tabs a span i / ::before)と同じ、丸ぽち+テキストの
シンプルな見た目に揃える。以前はここだけ濃色の丸に矢印"›"を入れた
別デザインになっていた。 */
.pdf-service .pdf-service-tabs a span i {
min-width: 0;
min-height: 25px;
display: inline-flex;
align-items: center;
margin: 0;
font-style: normal;
font-size: 14px;
line-height: 1.35;
white-space: nowrap;
}
.pdf-service .pdf-service-tabs a span i::before {
content: "";
width: 5px;
height: 5px;
flex: 0 0 5px;
margin-right: 9px;
border-radius: 50%;
background: currentColor;
}
.pdf-service .pdf-service-stage {
width: 100vw;
margin-top: 28px;
margin-left: calc(50% - 50vw);
}
.pdf-service .pdf-service-panel {
scroll-margin-top: 248px;
}
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
/* .pdf-service-aside はここから除外する。transitionを切るとタブだけが
瞬間移動し、アニメーションが残るヘッダーとバラバラに見えてしまうため。
ヘッダーと同じ動きで揃えることを優先する。 */
.pdf-service .pdf-service-tabs a strong::after,
.pdf-service .pdf-service-tabs a span {
transition: none;
}
}
/* ===============================================================
Mobile global action bar (v6.9.0)
=============================================================== */
.mobile-action-bar { display:none; }
@media (max-width:640px) {
.mobile-action-bar {
position:fixed;
z-index:180;
right:12px;
bottom:max(10px,env(safe-area-inset-bottom));
left:12px;
height:68px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
color:#fff;
background:rgba(10,34,29,.96);
box-shadow:0 16px 42px rgba(5,22,18,.28);
-webkit-backdrop-filter:blur(16px);
backdrop-filter:blur(16px);
opacity:1;
transform:translateY(0);
visibility:visible;
transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s;
}
.mobile-action-bar.is-mv-hidden {
opacity:0;
transform:translateY(calc(100% + 20px));
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease,transform .36s cubic-bezier(.22,1,.36,1),visibility 0s .36s;
}
.mobile-action-bar a {
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
color:inherit;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:1.2;
letter-spacing:.01em;
text-align:center;
transition:color .25s ease,background-color .25s ease;
}
.mobile-action-bar a + a { border-left:1px solid rgba(255,255,255,.14); }
.mobile-action-bar a:active { color:var(--green); background:#fff; }
.mobile-action-bar a:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.mobile-action-bar__icon { height:20px; display:grid; place-items:center; }
.mobile-action-bar__icon svg { width:22px; height:20px; display:block; }
.mobile-action-bar__icon--works svg { width:20px; height:20px; }
/* 新しい固定バーと役割が重複する、トップページの丸型LINE導線はスマホだけ外す。 */
.nuvira-home .line-contact,
.nuvira-home .line-float { display:none!important; }
/* 実績詳細のサイドCTAはスマホ固定バーへ集約する。 */
.pdf-work-detail .pdf-case-sidebar > .pdf-side-contact { display:none; }
.site-footer { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
.contact__word { left:50%; top:286px; font-size:80px; }
.contact__word-track { animation-duration:20s; }
}
@media (prefers-reduced-motion:reduce) {
.contact__word-track { animation:none; }
.mobile-action-bar { transition:none; }
}
/* ===============================================================
JOIN NUVIRA / Creators & Partners (v6.10.0)
=============================================================== */
.nu-recruit-page {
--recruit-line:rgba(22,32,30,.16);
overflow:clip;
}
.nu-recruit-page .reveal {
transform:translateY(36px);
transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.nu-recruit-page .reveal.is-visible { transform:none; }
.nu-recruit-hero {
position:relative;
min-height:calc(100svh - 93px);
padding-top:112px;
padding-bottom:74px;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.nu-recruit-hero > .pdf-breadcrumb { top:98px; }
.nu-recruit-eyebrow,
.nu-recruit-section-label {
margin:0;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:1.4;
letter-spacing:.22em;
color:var(--pdf-gold);
}
.nu-recruit-hero h1 {
margin:30px 0 68px;
font-size:clamp(94px,11vw,158px);
line-height:.78;
font-weight:400;
letter-spacing:-.07em;
}
.nu-recruit-hero__foot {
display:grid;
grid-template-columns:minmax(360px,1fr) minmax(420px,520px);
gap:80px;
align-items:end;
padding-top:33px;
border-top:1px solid var(--pdf-ink);
}
.nu-recruit-hero__statement {
margin:0;
font-size:clamp(38px,4.1vw,58px);
line-height:1.36;
letter-spacing:-.035em;
}
.nu-recruit-hero__copy,
.nu-recruit-section-head > p,
.nu-recruit-style__note {
margin:0;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:2;
color:#46514e;
}
.nu-recruit-scroll {
position:absolute;
right:0;
bottom:74px;
display:none;
align-items:center;
gap:16px;
font-size:14px;
letter-spacing:.16em;
}
.nu-recruit-scroll i { font-style:normal; color:var(--pdf-gold); }
.nu-recruit-belief {
color:#fff;
background:var(--pdf-ink);
}
.nu-recruit-belief__inner {
min-height:690px;
display:grid;
grid-template-columns:180px minmax(430px,1fr) minmax(300px,420px);
gap:70px;
align-items:center;
}
.nu-recruit-belief .nu-recruit-section-label { align-self:start; padding-top:136px; }
.nu-recruit-belief h2 {
margin:0;
font-size:clamp(48px,5.1vw,72px);
line-height:1.38;
font-weight:400;
letter-spacing:-.04em;
}
.nu-recruit-belief__inner > div:last-child {
align-self:end;
padding-bottom:132px;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:2.05;
color:rgba(255,255,255,.72);
}
.nu-recruit-belief__inner > div:last-child p { margin-bottom:22px; }
.nu-recruit-belief__inner > div:last-child p:last-child { margin-bottom:0; }
.nu-recruit-positions { padding-top:170px; padding-bottom:190px; }
.nu-recruit-section-head {
display:grid;
grid-template-columns:1fr minmax(360px,500px);
gap:80px;
align-items:end;
margin-bottom:78px;
}
.nu-recruit-section-head h2 {
margin:15px 0 0;
font-size:clamp(50px,5vw,70px);
line-height:1;
font-weight:400;
letter-spacing:-.045em;
}
.nu-recruit-position-list { border-top:1px solid var(--pdf-ink); }
.nu-recruit-position {
min-height:258px;
display:grid;
grid-template-columns:130px minmax(300px,.8fr) minmax(430px,1fr);
gap:42px;
align-items:start;
padding:48px 0 44px;
border-bottom:1px solid var(--recruit-line);
transition:background-color .35s ease,padding .35s cubic-bezier(.22,1,.36,1);
}
.nu-recruit-position__meta { display:flex; align-items:center; gap:15px; }
.nu-recruit-position__meta span { font-size:15px; color:var(--pdf-gold); }
.nu-recruit-position__meta em {
padding:4px 8px;
border:1px solid var(--recruit-line);
border-radius:99px;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
font-style:normal;
line-height:1;
letter-spacing:.12em;
color:#69736f;
}
.nu-recruit-position__title h3 {
margin:0 0 13px;
font-size:clamp(28px,2.7vw,38px);
line-height:1.15;
font-weight:400;
letter-spacing:-.035em;
}
.nu-recruit-position__title p {
margin:0;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
color:#69736f;
}
.nu-recruit-position__detail > p {
min-height:61px;
margin:0 0 29px;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:1.85;
color:#46514e;
}
.nu-recruit-position__detail ul {
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:7px;
list-style:none;
}
.nu-recruit-position__detail li {
padding:6px 11px;
border:1px solid #cfd4d1;
border-radius:99px;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:1;
color:#65706c;
background:rgba(255,255,255,.42);
}
@media (hover:hover) {
.nu-recruit-position:hover {
padding-right:22px;
padding-left:22px;
background:#f3f1eb;
}
}
.nu-recruit-style {
padding:155px 0 145px;
background:#ecebe6;
}
.nu-recruit-style__grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--pdf-ink);
border-bottom:1px solid var(--pdf-ink);
}
.nu-recruit-style__grid article {
min-height:345px;
padding:35px 38px 42px;
}
.nu-recruit-style__grid article + article { border-left:1px solid var(--recruit-line); }
.nu-recruit-style__grid span { display:block; margin-bottom:92px; font-size:14px; color:var(--pdf-gold); }
.nu-recruit-style__grid h3 { margin:0 0 20px; font-size:26px; line-height:1.5; font-weight:400; }
.nu-recruit-style__grid p {
margin:0;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:1.9;
color:#46514e;
}
.nu-recruit-style__note {
max-width:780px;
margin:33px 0 0 auto;
padding-left:20px;
border-left:2px solid var(--pdf-gold);
font-size:14px;
}
.nu-recruit-values {
display:grid;
grid-template-columns:minmax(340px,.75fr) minmax(580px,1fr);
gap:100px;
padding-top:190px;
padding-bottom:190px;
}
.nu-recruit-values__head { position:sticky; top:150px; align-self:start; }
.nu-recruit-values__head h2 {
margin:24px 0 0;
font-size:clamp(40px,4vw,56px);
line-height:1.55;
font-weight:400;
letter-spacing:-.04em;
}
.nu-recruit-values__list { margin:0; padding:0; list-style:none; border-top:1px solid var(--pdf-ink); }
.nu-recruit-values__list li {
min-height:183px;
display:grid;
grid-template-columns:72px 1fr;
gap:30px;
padding:38px 0;
border-bottom:1px solid var(--recruit-line);
}
.nu-recruit-values__list li > span { font-size:14px; color:var(--pdf-gold); }
.nu-recruit-values__list h3 { margin:0 0 16px; font-size:25px; font-weight:400; }
.nu-recruit-values__list p {
max-width:510px;
margin:0;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:1.9;
color:#46514e;
}
.nu-recruit-process { padding:155px 0 170px; background:#f0eee8; }
.nu-recruit-process__list {
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
list-style:none;
border-top:1px solid var(--pdf-ink);
border-bottom:1px solid var(--pdf-ink);
}
.nu-recruit-process__list li { position:relative; min-height:218px; padding:29px 25px; }
.nu-recruit-process__list li + li { border-left:1px solid var(--recruit-line); }
.nu-recruit-process__list li:not(:last-child)::after {
content:"→";
position:absolute;
z-index:1;
top:50%;
right:-11px;
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:50%;
color:var(--pdf-gold);
background:#f0eee8;
font-size:14px;
}
.nu-recruit-process__list span { display:block; margin-bottom:65px; font-size:14px; color:var(--pdf-gold); }
.nu-recruit-process__list strong { display:block; margin-bottom:11px; font-size:21px; font-weight:400; }
.nu-recruit-process__list p { margin:0; font-family:"Noto Sans JP",sans-serif; font-size:14px; color:#69736f; }
.nu-recruit-cta { padding:145px 0 150px; color:#fff; background:var(--pdf-green); }
.nu-recruit-cta__inner { display:grid; grid-template-columns:1fr minmax(400px,500px); gap:100px; align-items:end; }
.nu-recruit-cta__inner > div:first-child > p { margin:0 0 29px; font-size:14px; letter-spacing:.22em; color:#d5b77e; }
.nu-recruit-cta h2 { margin:0; font-size:clamp(48px,5vw,70px); line-height:1.4; font-weight:400; letter-spacing:-.045em; }
.nu-recruit-cta__inner > div:last-child > p {
margin:0 0 40px;
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
line-height:2;
color:rgba(255,255,255,.72);
}
.nu-recruit-cta a {
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 27px;
border:1px solid rgba(255,255,255,.52);
font-family:"Noto Sans JP",sans-serif;
font-size:14px;
transition:color .35s ease,background-color .35s ease,border-color .35s ease;
}
.nu-recruit-cta a i { font-size:19px; font-style:normal; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.nu-recruit-cta a:hover { color:var(--pdf-green); border-color:#fff; background:#fff; }
.nu-recruit-cta a:hover i { transform:translate(4px,-4px); }
@media (max-width:1100px) {
.nu-recruit-belief__inner { grid-template-columns:120px 1fr 330px; gap:40px; }
.nu-recruit-position { grid-template-columns:100px minmax(250px,.75fr) 1fr; gap:28px; }
.nu-recruit-values { gap:60px; }
.nu-recruit-cta__inner { gap:60px; }
}
@media (max-width:760px) {
.nu-recruit-page { padding-top:72px; }
.nu-recruit-page .pdf-shell { width:calc(100% - 44px); }
.nu-recruit-hero {
min-height:calc(100svh - 72px);
padding-top:74px;
padding-bottom:50px;
}
.nu-recruit-hero > .pdf-breadcrumb { position:static; margin:0 0 auto; }
.nu-recruit-eyebrow { margin-top:50px; }
.nu-recruit-hero h1 { margin:22px 0 52px; font-size:clamp(71px,24vw,112px); }
.nu-recruit-hero__foot { grid-template-columns:1fr; gap:28px; padding-top:24px; }
.nu-recruit-hero__statement { font-size:34px; }
.nu-recruit-hero__copy { font-size:14px; line-height:1.9; }
.nu-recruit-belief__inner {
min-height:0;
grid-template-columns:1fr;
gap:37px;
padding-top:88px;
padding-bottom:88px;
}
.nu-recruit-belief .nu-recruit-section-label { padding-top:0; }
.nu-recruit-belief h2 { font-size:40px; line-height:1.45; }
.nu-recruit-belief__inner > div:last-child { padding-bottom:0; font-size:14px; }
.nu-recruit-positions { padding-top:100px; padding-bottom:110px; }
.nu-recruit-section-head { grid-template-columns:1fr; gap:28px; margin-bottom:50px; }
.nu-recruit-section-head h2 { font-size:44px; }
.nu-recruit-section-head > p { font-size:14px; line-height:1.9; }
.nu-recruit-position {
min-height:0;
grid-template-columns:1fr;
gap:21px;
padding:34px 0 36px;
}
.nu-recruit-position__meta { justify-content:space-between; }
.nu-recruit-position__title h3 { margin-bottom:8px; font-size:31px; }
.nu-recruit-position__detail > p { min-height:0; margin-bottom:22px; font-size:14px; }
.nu-recruit-position__detail ul { gap:6px; }
.nu-recruit-style { padding:94px 0 96px; }
.nu-recruit-style__grid { grid-template-columns:1fr; }
.nu-recruit-style__grid article { min-height:0; padding:30px 0 34px; }
.nu-recruit-style__grid article + article { border-top:1px solid var(--recruit-line); border-left:0; }
.nu-recruit-style__grid span { margin-bottom:45px; }
.nu-recruit-style__grid h3 { font-size:23px; }
.nu-recruit-style__note { margin-top:28px; font-size:14px; }
.nu-recruit-values { grid-template-columns:1fr; gap:54px; padding-top:105px; padding-bottom:110px; }
.nu-recruit-values__head { position:static; }
.nu-recruit-values__head h2 { font-size:36px; }
.nu-recruit-values__list li { min-height:0; grid-template-columns:45px 1fr; gap:15px; padding:30px 0; }
.nu-recruit-values__list h3 { font-size:21px; }
.nu-recruit-process { padding:96px 0 105px; }
.nu-recruit-process__list { grid-template-columns:1fr; }
.nu-recruit-process__list li { min-height:0; display:grid; grid-template-columns:38px 1fr; gap:0 12px; padding:23px 0; }
.nu-recruit-process__list li + li { border-top:1px solid var(--recruit-line); border-left:0; }
.nu-recruit-process__list li:not(:last-child)::after { content:"↓"; top:auto; right:14px; bottom:-11px; background:#f0eee8; }
.nu-recruit-process__list span { grid-row:1 / 3; margin:3px 0 0; }
.nu-recruit-process__list strong { margin-bottom:5px; }
.nu-recruit-cta { padding:92px 0 110px; }
.nu-recruit-cta__inner { grid-template-columns:1fr; gap:52px; }
.nu-recruit-cta h2 { font-size:38px; }
.nu-recruit-cta__inner > div:last-child > p { font-size:14px; }
.nu-recruit-cta a { height:68px; padding:0 20px; font-size:14px; }
}
@media (max-width:390px) {
.nu-recruit-page .pdf-shell { width:calc(100% - 36px); }
.nu-recruit-hero h1 { font-size:70px; }
.nu-recruit-hero__statement { font-size:30px; }
.nu-recruit-position__title h3 { font-size:28px; overflow-wrap:anywhere; }
.nu-recruit-belief h2,
.nu-recruit-cta h2 { font-size:34px; }
}
@media (prefers-reduced-motion:reduce) {
.nu-recruit-page .reveal,
.nu-recruit-position,
.nu-recruit-cta a,
.nu-recruit-cta a i { transition:none; }
}
/* ===============================================================
Production mobile polish (v6.12.9)
iPhone Chrome / Brave use the same WebKit viewport behaviour.
Keep these corrections mobile-only so the approved desktop layout stays
untouched.
=============================================================== */
@media (max-width:640px) {
/* iOS focuses and magnifies controls whose computed font size is below
16px. This keeps the viewport stable while entering contact details. */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.pdf-field input,
.pdf-name-field input {
font-size:16px!important;
}
/* The privacy control uses the same circular selection language as every
other choice in the form, including its selected state. */
.pdf-privacy .wpcf7-list-item-label::before,
.pdf-privacy input:checked + .wpcf7-list-item-label::before {
border-radius:50%;
}
/* Bring the mobile Works presentation above the fixed action bar without
changing the white surface or the card design. */
.works.is-content-pinned .works__inner {
top:calc(50% - 36px);
}
.works__inner,
.works.is-content-pinned .works__inner {
padding-top:36px;
}
.works-carousel {
padding-bottom:6px;
}
/* Once the white Works surface has completed the transition, About appears
from its visual centre by opacity only. Remove the long empty lead-in and
the upward travel that looked like a layout gap on real iPhones. */
.about {
padding-top:38px;
}
.about.is-scroll-linked .about__inner {
-webkit-transform:translate3d(0,var(--about-mobile-lift,0),0);
transform:translate3d(0,var(--about-mobile-lift,0),0);
will-change:transform;
}
.about.is-scroll-linked .about__intro.reveal > h2,
.about.is-scroll-linked .about__intro.reveal > .about__statement,
.about.is-scroll-linked .about__intro.reveal > .pill-link,
.about.is-scroll-linked .venn.reveal {
transform:none;
filter:none;
}
/* Improve the hierarchy of the three Stance numbers on small screens. */
.pdf-about-stance__no {
color:rgba(15,77,67,.28);
font-weight:400;
}
/* Definition-list tables read vertically on a narrow screen. */
.pdf-about-company dl > div,
.pdf-work-credits > div,
.pdf-contact-confirm__row,
.nu-about-company dl > div,
.nu-case-overview dl > div,
.nu-case-credits dl > div,
.nu-service-block dl > div {
width:100%;
grid-template-columns:1fr;
gap:8px;
align-items:start;
text-align:left;
}
.pdf-about-company dt,
.pdf-about-company dd,
.pdf-work-credits dt,
.pdf-work-credits dd,
.pdf-contact-confirm__row dt,
.pdf-contact-confirm__row dd {
width:100%;
margin-left:0;
text-align:left;
}
.pdf-about-company dl > div,
.pdf-work-credits > div {
padding-top:18px;
padding-bottom:18px;
}
/* 確認・サンクスのカードは狭い画面では左右の余白を詰める。 */
.pdf-contact-confirm { padding:28px 20px; }
.pdf-contact-thanks { padding:40px 20px; }
.pdf-contact-confirm__row { padding:14px 0; }
/* Tighten only the work-detail reading rhythm. The large editorial gaps on
desktop remain unchanged. */
.pdf-work-detail {
padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
.pdf-work-detail .pdf-detail-layout {
gap:28px;
}
.pdf-work-detail__panel {
padding-top:24px;
padding-bottom:38px;
}
.pdf-work-detail__panel > section + section {
margin-top:34px;
padding-top:32px;
}
.pdf-work-detail__panel figure,
.pdf-work-detail__panel .pdf-work-gallery {
margin-top:22px;
}
.pdf-work-gallery__controls {
min-height:60px;
padding-top:9px;
padding-bottom:7px;
}
.pdf-work-point + .pdf-work-point {
margin-top:28px;
}
.pdf-work-point p {
margin-bottom:8px;
}
/* note's mobile embed is visually shorter than the desktop iframe. Keeping
the desktop height on iOS left an empty block below each card. */
.note-embed-wrap iframe.note-embed {
height:218px!important;
}
.pdf-service-panel section {
margin-bottom:42px;
}
/* Match the header's eased slide on the sticky Service index. translate3d
avoids WebKit repainting it as a newly visible, instant frame.
時間・イージングはヘッダー(.35s ease)と完全に一致させる。ここが以前は
.46s cubic-bezierになっており、タブだけが先に出てくる原因だった。 */
.pdf-service .pdf-service-aside {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
backface-visibility:hidden;
transition:
-webkit-transform .35s ease,
transform .35s ease,
box-shadow .35s ease!important;
}
.pdf-service .pdf-service-aside.is-scroll-hidden {
-webkit-transform:translate3d(0,calc(-1 * var(--service-index-shift, 274px)),0);
transform:translate3d(0,calc(-1 * var(--service-index-shift, 274px)),0);
}
body.has-service-index .site-header.is-hidden {
-webkit-transform:translate3d(0,calc(-1 * var(--service-index-shift, 274px)),0);
transform:translate3d(0,calc(-1 * var(--service-index-shift, 274px)),0);
}
/* Force a continuously composited marquee on iOS WebKit. */
.contact__word-track {
display:flex;
width:max-content;
-webkit-animation:contact-word-loop 20s linear infinite;
animation:contact-word-loop 20s linear infinite;
animation-play-state:running;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
backface-visibility:hidden;
}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce) {
/* ここでもタブのtransitionは切らない。ヘッダーは動き続けるため、
タブだけ瞬間移動すると「メニューと一体でない」動きになってしまう。 */
.contact__word-track {
-webkit-animation:none;
animation:none;
}
}
/* ===============================================================
Mobile Works → About sheet + work-detail index (v6.13.0)
The mobile home follows Eight Design's rounded, full-width content-sheet
rhythm. Desktop retains NUVIRA's existing pinned transition.
=============================================================== */
@media (max-width:640px) {
/* Replace the centre-expanding overlay with one edge-to-edge white sheet.
Works forms its rounded top; About continues the same surface below. */
.video-stage {
overflow:clip;
}
.works,
.works.is-content-pinned {
position:relative;
z-index:3;
width:100%;
height:auto;
min-height:0;
margin-top:clamp(84px,22vw,112px);
padding:0 0 48px;
overflow:hidden;
border-radius:28px 28px 0 0;
background:#fff;
opacity:0;
transform:translate3d(0,64px,0);
transition:
opacity .72s ease,
transform 1s cubic-bezier(.22,1,.36,1);
will-change:opacity,transform;
}
.works.is-mobile-sheet-visible {
opacity:1;
transform:translate3d(0,0,0);
}
.works .scene__shade--mist {
display:none;
}
.works__inner,
.works.is-content-pinned .works__inner {
position:relative;
top:auto;
left:auto;
width:calc(100% - 40px);
margin-inline:auto;
padding-top:42px;
opacity:1;
transform:none;
filter:none;
will-change:auto;
}
.works-carousel {
margin-bottom:0;
padding-bottom:8px;
}
.about,
.about.is-scroll-linked {
position:relative;
z-index:3;
width:100%;
margin:-1px 0 0;
padding:72px 0 calc(112px + env(safe-area-inset-bottom));
overflow:hidden;
border-radius:0 0 28px 28px;
background:#fff;
}
.about .about__inner,
.about.is-scroll-linked .about__inner {
width:calc(100% - 40px);
opacity:0;
transform:translate3d(0,34px,0);
visibility:visible;
transition:
opacity .82s ease,
transform 1s cubic-bezier(.22,1,.36,1);
will-change:opacity,transform;
}
.about.is-mobile-about-visible .about__inner,
.about.is-scroll-linked.is-mobile-about-visible .about__inner {
opacity:1;
transform:translate3d(0,0,0);
}
.about:not(.is-scroll-linked) .about__intro.reveal {
opacity:1;
transform:none;
}
.about:not(.is-scroll-linked) .about__intro.reveal > h2,
.about:not(.is-scroll-linked) .about__intro.reveal > .about__statement,
.about:not(.is-scroll-linked) .about__intro.reveal > .pill-link {
opacity:0;
transform:translate3d(0,28px,0);
transition:
opacity .78s ease,
transform .92s cubic-bezier(.22,1,.36,1);
}
.about:not(.is-scroll-linked) .about__intro.reveal.is-visible > h2,
.about:not(.is-scroll-linked) .about__intro.reveal.is-visible > .about__statement,
.about:not(.is-scroll-linked) .about__intro.reveal.is-visible > .pill-link {
opacity:1;
transform:translate3d(0,0,0);
}
.about:not(.is-scroll-linked) .about__intro.reveal.is-visible > .about__statement {
transition-delay:.08s;
}
.about:not(.is-scroll-linked) .about__intro.reveal.is-visible > .pill-link {
transition-delay:.16s;
}
/* Work detail: metadata remains comfortably inset, while the article's
white reading surface reaches both viewport edges. */
.pdf-work-detail .pdf-detail-layout.pdf-shell {
width:100%;
grid-template-columns:minmax(0,1fr);
gap:28px;
}
.pdf-work-detail .pdf-case-sidebar {
width:calc(100% - 32px);
min-width:0;
margin-inline:auto;
}
.pdf-work-detail .pdf-case-sidebar .pdf-side-nav {
width:100%;
display:flex;
flex-flow:row nowrap;
align-items:center;
gap:8px;
margin-top:34px;
padding:12px 0 4px;
overflow-x:auto;
border-top:1px solid rgba(22,32,30,.78);
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.pdf-work-detail .pdf-case-sidebar .pdf-side-nav::-webkit-scrollbar {
display:none;
}
.pdf-work-detail .pdf-case-sidebar .pdf-side-nav::before {
display:none;
}
.pdf-work-detail .pdf-case-sidebar .pdf-side-nav a,
.pdf-work-detail .pdf-case-sidebar .pdf-side-nav a.is-active {
flex:0 0 auto;
min-height:38px;
margin:0;
padding:0 14px;
border:1px solid rgba(22,32,30,.18);
border-radius:999px;
color:var(--pdf-ink);
background:#fff;
font-size:14px;
line-height:1;
white-space:nowrap;
transition:color .28s ease,background-color .28s ease,border-color .28s ease;
}
.pdf-work-detail .pdf-case-sidebar .pdf-side-nav a.is-active {
color:#fff;
border-color:var(--pdf-green);
background:var(--pdf-green);
}
.pdf-work-detail__panel {
width:100%;
min-width:0;
box-sizing:border-box;
padding:30px 20px 42px;
border-radius:0;
}
.pdf-work-detail__panel figure,
.pdf-work-detail__panel .pdf-work-gallery {
width:calc(100% + 40px);
margin-left:-20px;
}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce) {
.works,
.works.is-content-pinned,
.about .about__inner,
.about.is-scroll-linked .about__inner,
.about:not(.is-scroll-linked) .about__intro.reveal > h2,
.about:not(.is-scroll-linked) .about__intro.reveal > .about__statement,
.about:not(.is-scroll-linked) .about__intro.reveal > .pill-link {
opacity:1;
transform:none;
transition:none;
}
}