/* v183: 埋め込み画像の定義（各1回だけ保持し、参照側は var() で共有） */
:root{
--img-008d323d: url("/images/photo-008d323d.jpg");
--img-100f9b8a: url("/images/photo-100f9b8a.jpg");
--img-160bb934: url("/images/photo-160bb934.jpg");
--img-6aca9ab6: url("/images/photo-6aca9ab6.jpg");
--img-a9df24f4: url("/images/photo-a9df24f4.jpg");
--img-da3dcba2: url("/images/photo-da3dcba2.jpg");
--img-e87323e4: url("/images/photo-e87323e4.jpg");
--img-e9d2c9f1: url("/images/photo-e9d2c9f1.jpg");
--img-ec1f2132: url("/images/photo-ec1f2132.jpg");
--img-ef943304: url("/images/photo-ef943304.jpg");
}
:root {
--merge-deep:#0e2818;
--merge-green:#224630;
--merge-cream:#f0eee5;
--merge-paper:#f8f7f2;
--merge-ink:#17241c;
--merge-line:rgba(34,70,48,.16);
}
html { scroll-behavior:smooth; }
body {
margin:0;
color:var(--merge-ink);
background:var(--merge-paper);
font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
}
.merge-header {
position:fixed; inset:0 0 auto 0; height:76px; z-index:99999;
display:flex; align-items:center; gap:24px; padding:0 30px;
background:rgba(248,247,242,.95); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(34,70,48,.10);
}
.merge-brand { display:block; flex:0 0 auto; }
.merge-logo {
display:block; width:285px; height:52px;
background-image:url("/images/logo-original.png");
background-repeat:no-repeat; background-size:contain; background-position:left center;
}
.merge-nav {
margin-left:auto; display:flex; align-items:center; gap:clamp(10px,1.15vw,18px);
font-size:13.5px; white-space:nowrap;
}
.merge-nav a { position:relative; color:var(--merge-ink); text-decoration:none; padding:12px 0; }
.merge-nav a:hover { opacity:.55; }
.merge-nav a.is-current::after {
content:""; position:absolute; left:0; right:0; bottom:5px; height:1px; background:var(--merge-green);
}
.merge-mobile { display:none; margin-left:auto; }
.merge-mobile summary { cursor:pointer; list-style:none; font-size:12px; letter-spacing:.12em; }
.merge-mobile nav {
position:fixed; top:68px; left:0; right:0; padding:24px 20px 32px;
background:rgba(14,40,24,.98); color:white;
}
.merge-mobile nav a { display:block; color:white; text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.merged-site { padding-top:0; }
.merged-page {
display:none;
scroll-margin-top:76px;
position:relative;
min-height:calc(100vh - 76px);
}
.merged-page.is-active { display:block; }
/* Ensure the top-page reveal content is visible without relying on its original page-level JS. */
#page-home .reveal { opacity:1 !important; transform:none !important; }
#page-home .opening { display:none !important; }
.merge-footer {
padding:64px 0 28px; background:var(--merge-cream); border-top:1px solid var(--merge-line);
}
.merge-footer__inner {
width:min(1180px,calc(100vw - 64px)); margin:auto;
display:flex; justify-content:space-between; gap:60px; padding-bottom:46px;
}
.merge-footer__brand { display:flex; flex-direction:column; gap:14px; }
.merge-footer__address { margin:0 0 0 18px; font-size:13.5px; line-height:1.8; }
.merge-footer__links { display:grid; grid-template-columns:repeat(4,1fr); gap:16px 26px; font-size:13.5px; }
.merge-footer__links a { color:inherit; text-decoration:none; }
.merge-footer__bottom {
width:min(1180px,calc(100vw - 64px)); margin:auto; padding-top:22px;
border-top:1px solid var(--merge-line); text-align:center; font-size:10px;
}
@media(max-width:1180px) {
.merge-nav { display:none; }
.merge-mobile { display:block; }
}
@media(max-width:767px) {
.merge-header { height:68px; padding:0 16px; }
.merge-logo { width:170px; height:44px; }
.merged-site { padding-top:0; }
.merged-page { scroll-margin-top:68px; }
.merge-footer__inner { width:calc(100vw - 32px); flex-direction:column; gap:34px; }
.merge-footer__links { grid-template-columns:repeat(2,1fr); }
.merge-footer__bottom { width:calc(100vw - 32px); }
}
/* ===== index.html ===== */
#page-home{
--ink: #17241c;
--green: #224630;
--deep: #0e2818;
--leaf: #71806d;
--pale: #dfe5dc;
--cream: #f0eee5;
--paper: #f8f7f2;
--white: #fff;
--line: rgba(23, 36, 28, .18);
--serif: "Noto Serif JP", serif;
--sans: "Noto Sans JP", sans-serif;
--content: min(1200px, calc(100vw - 9vw));
}
#page-home *{ box-sizing: border-box; }
#page-home{ scroll-behavior: smooth; }
#page-home{
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: var(--sans);
font-weight: 300;
line-height: 1.9;
-webkit-font-smoothing: antialiased;
}
#page-home.menu-open{ overflow: hidden; }
#page-home a{ color: inherit; text-decoration: none; }
#page-home button{ font: inherit; }
#page-home img{ max-width: 100%; }
#page-home .content-wrap{ width: var(--content); margin-inline: auto; }
#page-home .section{ position: relative; }
#page-home .opening{
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-content: center;
justify-items: center;
gap: 22px;
background: var(--cream);
transition: opacity .8s cubic-bezier(.76,0,.24,1), visibility .8s;
}
#page-home .opening.is-hidden{ opacity: 0; visibility: hidden; }
#page-home .opening__mark{ width: 1px; height: 0; background: var(--green); animation: openingLine 1.15s cubic-bezier(.76,0,.24,1) forwards; }
#page-home .opening p{ margin: 0; font-size: 9px; letter-spacing: .38em; opacity: 0; animation: openingCopy .7s .25s forwards; }
@keyframes openingLine { 0%{height:0} 55%{height:105px} 100%{height:0;transform:translateY(135px)} }
@keyframes openingCopy { to{opacity:1} }
#page-home .progress{ position: fixed; z-index: 500; top: 0; left: 0; width: 100%; height: 2px; }
#page-home .progress span{ display: block; width: 0; height: 100%; background: #94a68c; }
#page-home .site-header{
position: fixed;
top: 0;
left: 0;
z-index: 400;
width: 100%;
min-height: 92px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 18px 3vw;
color: var(--white);
transition: color .35s, background .35s, min-height .35s, box-shadow .35s;
}
#page-home .site-header.is-scrolled{
min-height: 72px;
color: var(--ink);
background: rgba(248,247,242,.95);
backdrop-filter: blur(18px);
box-shadow: 0 8px 30px rgba(20,35,24,.06);
}
#page-home .brand{ position: relative; z-index: 403; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
#page-home .brand__logo{ width: 58px; height: 54px; object-fit: contain; background: transparent; padding: 0; border-radius: 0; }
#page-home .brand__text{ display: flex; flex-direction: column; line-height: 1.3; }
#page-home .brand__text b{ font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: .11em; }
#page-home .brand__text small{ margin-top: 5px; font-size: 7px; font-weight: 500; letter-spacing: .2em; }
#page-home .desktop-nav{ display: flex; align-items: center; gap: clamp(15px,1.9vw,32px); margin-left: auto; font-size: 10px; font-weight: 500; letter-spacing: .09em; white-space: nowrap; }
#page-home .desktop-nav > a{ position: relative; padding-block: 10px; }
#page-home .desktop-nav > a:not(.desktop-nav__contact)::after{ content: ""; position: absolute; left: 0; bottom: 4px; width: 0; height: 1px; background: currentColor; transition: width .3s; }
#page-home .desktop-nav > a:hover::after{ width: 100%; }
#page-home .desktop-nav__contact{ padding: 13px 18px !important; border: 1px solid rgba(255,255,255,.65); transition: .3s; }
#page-home .site-header.is-scrolled .desktop-nav__contact{ border-color: var(--ink); }
#page-home .desktop-nav__contact:hover{ background: var(--white); color: var(--deep); }
#page-home .site-header.is-scrolled .desktop-nav__contact:hover{ background: var(--deep); color: var(--white); }
#page-home .menu-button{
position: relative;
z-index: 404;
display: none;
width: 52px;
height: 48px;
padding: 0;
border: 0;
color: inherit;
background: transparent;
cursor: pointer;
}
#page-home .menu-button span{ position: absolute; right: 0; width: 31px; height: 1px; background: currentColor; transition: .4s; }
#page-home .menu-button span:nth-child(1){ top: 13px; }
#page-home .menu-button span:nth-child(2){ top: 23px; width: 22px; }
#page-home .menu-button em{ position: absolute; right: 0; bottom: 0; font-style: normal; font-size: 7px; letter-spacing: .2em; }
#page-home .menu-open .menu-button{ color: var(--cream); }
#page-home .menu-open .menu-button span:nth-child(1){ top: 20px; transform: rotate(45deg); }
#page-home .menu-open .menu-button span:nth-child(2){ top: 20px; width: 31px; transform: rotate(-45deg); }
#page-home .global-nav{
position: fixed;
inset: 0;
z-index: 402;
visibility: hidden;
opacity: 0;
background: var(--deep);
color: var(--cream);
transition: opacity .45s, visibility .45s;
}
#page-home .global-nav::before{
content: "";
position: absolute;
inset: 0 55% 0 0;
background:
linear-gradient(rgba(14,40,24,.28),rgba(14,40,24,.72)),
var(--img-a9df24f4) center/cover;
transform: scale(1.06);
transition: transform 1s cubic-bezier(.76,0,.24,1);
}
#page-home .menu-open .global-nav{ visibility: visible; opacity: 1; }
#page-home .menu-open .global-nav::before{ transform: scale(1); }
#page-home .global-nav__inner{ position: relative; width: 50%; height: 100%; margin-left: 50%; padding: 10vh 8vw 6vh; display: flex; flex-direction: column; justify-content: center; }
#page-home .global-nav__eyebrow{ margin: 0 0 3vh; font-size: 8px; letter-spacing: .32em; opacity: .55; }
#page-home .global-nav__inner > a{ display: flex; align-items: baseline; gap: 22px; padding: 5px 0; font-family: var(--serif); font-size: clamp(18px,2vw,29px); letter-spacing: .08em; }
#page-home .global-nav__inner > a span{ font-family: var(--sans); font-size: 8px; opacity: .55; }
#page-home .global-nav__meta{ margin-top: 3vh; padding-top: 2.5vh; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; gap: 24px; font-size: 10px; line-height: 1.8; opacity: .75; }
#page-home .global-nav__meta p{ margin: 0; }
#page-home .global-nav__meta a{ font-size: 17px; }
#page-home .hero{ position: relative; min-height: 100svh; overflow: hidden; color: var(--white); background: var(--deep); }
#page-home .hero__image{
position: absolute;
inset: -6%;
background-image: var(--img-a9df24f4);
background-size: cover;
background-position: center;
transform: scale(1.06);
animation: heroZoom 7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
#page-home .hero__veil{ position: absolute; inset: 0; background: linear-gradient(90deg,rgba(6,27,14,.78) 0%,rgba(6,27,14,.44) 48%,rgba(6,27,14,.22) 75%,rgba(6,27,14,.44) 100%); }
#page-home .hero__veil::after{ content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.42)); }
#page-home .hero__content{ position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 110px; padding-bottom: 80px; }
#page-home .hero__eyebrow{ margin: 0 0 30px; font-size: 8px; font-weight: 500; letter-spacing: .3em; opacity: .75; }
#page-home .hero h1{ margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .12em; font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: .06em; }
#page-home .hero h1 span{ font-size: clamp(58px,8vw,120px); }
#page-home .hero h1 i{ font-size: clamp(30px,4.4vw,66px); font-style: normal; font-weight: 300; opacity: .72; }
#page-home .hero h1 strong{ width: 100%; margin-top: .12em; font-size: clamp(48px,7vw,105px); font-weight: 400; }
#page-home .hero__lead{ margin: 31px 0 0; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.7); font-family: var(--serif); font-size: clamp(17px,1.5vw,23px); letter-spacing: .14em; }
#page-home .hero__body{ max-width: 580px; margin: 22px 0 0 23px; font-size: 12px; line-height: 2; letter-spacing: .05em; opacity: .85; }
#page-home .hero__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0 23px; }
#page-home .button{ display: inline-flex; justify-content: space-between; align-items: center; min-width: 220px; gap: 25px; padding: 15px 18px; font-size: 10px; font-weight: 500; letter-spacing: .1em; transition: .3s; }
#page-home .button--light{ background: var(--white); color: var(--deep); }
#page-home .button--light:hover{ background: var(--pale); }
#page-home .button--line{ border: 1px solid rgba(255,255,255,.6); }
#page-home .button--line:hover{ background: rgba(255,255,255,.13); }
#page-home .hero__side{ position: absolute; z-index: 2; top: 50%; right: 2.5vw; margin: 0; font-size: 7px; letter-spacing: .28em; writing-mode: vertical-rl; transform: translateY(-50%); opacity: .72; }
#page-home .scroll-cue{ position: absolute; z-index: 2; right: 4vw; bottom: 5vh; display: flex; align-items: center; gap: 12px; font-size: 7px; letter-spacing: .24em; writing-mode: vertical-rl; }
#page-home .scroll-cue i{ position: relative; display: block; width: 1px; height: 58px; overflow: hidden; background: rgba(255,255,255,.35); }
#page-home .scroll-cue i::after{ content: ""; position: absolute; inset: -100% 0 0; background: var(--white); animation: scrollLine 2s infinite; }
@keyframes scrollLine { to { transform: translateY(200%); } }
#page-home .quick-info{ background: var(--deep); color: var(--white); }
#page-home .quick-info__inner{ display: grid; grid-template-columns: repeat(3,1fr); }
#page-home .quick-info__inner > div{ min-height: 132px; display: flex; align-items: center; gap: 20px; padding: 28px 4vw; border-right: 1px solid rgba(255,255,255,.16); }
#page-home .quick-info__inner > div:last-child{ border-right: 0; }
#page-home .quick-info span{ font-family: Georgia,serif; font-size: 10px; opacity: .52; }
#page-home .quick-info p{ margin: 0; font-size: 11px; line-height: 1.8; opacity: .78; }
#page-home .quick-info b{ font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: .07em; opacity: 1; }
#page-home .section-index{ position: absolute; z-index: 2; top: 8vh; left: 2.6vw; font-family: Georgia,serif; font-size: 10px; letter-spacing: .18em; color: var(--leaf); }
#page-home .eyebrow{ margin: 0 0 18px; font-size: 8px; font-weight: 600; letter-spacing: .3em; color: var(--leaf); }
#page-home .section-heading h2{ margin: 0; font-family: var(--serif); font-size: clamp(34px,4vw,60px); font-weight: 400; line-height: 1.55; letter-spacing: .08em; }
#page-home .intro{ padding: 18vh 0 0; background: var(--paper); }
#page-home .intro__grid{ display: grid; grid-template-columns: 1.06fr .78fr; gap: 10vw; align-items: start; padding-bottom: 13vh; }
#page-home .intro__body{ padding-top: 3vh; font-size: 13px; line-height: 2.25; }
#page-home .intro__body p{ margin: 0 0 1.65em; }
#page-home .intro__lead{ font-family: var(--serif); font-size: 17px; line-height: 2 !important; letter-spacing: .05em; }
#page-home .intro__visual{ position: relative; width: 88vw; height: min(60vw,760px); margin-left: auto; overflow: hidden; }
#page-home .intro__photo{ position: absolute; inset: -7%; background: var(--img-100f9b8a) center/cover; }
#page-home .intro__caption{ position: absolute; left: 0; bottom: 0; width: min(430px,47vw); padding: 42px 48px; background: rgba(248,247,242,.94); }
#page-home .intro__caption span{ font-size: 7px; font-weight: 600; letter-spacing: .28em; color: var(--leaf); }
#page-home .intro__caption p{ margin: 18px 0 0; font-family: var(--serif); font-size: clamp(19px,2vw,28px); line-height: 1.75; letter-spacing: .1em; }
#page-home .services{ padding: 18vh 0 15vh; background: var(--cream); }
#page-home .services__head, #page-home .works__head, #page-home .flow__head{ display: grid; grid-template-columns: 1fr .68fr; gap: 10vw; align-items: end; margin-bottom: 10vh; }
#page-home .services__lead, #page-home .works__lead, #page-home .flow__lead{ max-width: 470px; margin: 0 0 14px; font-size: 13px; line-height: 2.15; }
#page-home .service-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
#page-home .service-card{ background: var(--paper); }
#page-home .service-card__image{ position: relative; aspect-ratio: 1 / .85; overflow: hidden; background-size: cover; background-position: center; }
#page-home .service-card__image::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.28),transparent 46%); }
#page-home .service-card__image span{ position: absolute; z-index: 2; left: 22px; bottom: 18px; color: var(--white); font-family: Georgia,serif; font-size: 11px; letter-spacing: .15em; }
#page-home .service-card__image--garden{ background-image: var(--img-ec1f2132); }
#page-home .service-card__image--maintenance{ background-image: var(--img-e9d2c9f1); }
#page-home .service-card__image--forest{ background-image: var(--img-ef943304); }
#page-home .service-card__content{ padding: 32px 30px 35px; }
#page-home .service-card__en{ margin: 0 0 10px; font-size: 7px; font-weight: 600; letter-spacing: .2em; color: var(--leaf); }
#page-home .service-card h3{ margin: 0 0 18px; font-family: var(--serif); font-size: clamp(24px,2.4vw,34px); font-weight: 400; letter-spacing: .07em; }
#page-home .service-card__content > p:last-child{ margin: 0; font-size: 12px; line-height: 2; }
#page-home .service-note{ margin-top: 42px; padding: 26px 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
#page-home .service-note p{ margin: 0; font-family: var(--serif); font-size: 15px; letter-spacing: .05em; }
#page-home .service-note a{ display: inline-flex; align-items: center; gap: 42px; min-width: 210px; padding: 12px 0; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .1em; }
#page-home .promise{ min-height: 82vh; display: flex; align-items: center; overflow: hidden; color: var(--white); background: var(--deep); }
#page-home .promise__image{ position: absolute; inset: -9%; background: var(--img-160bb934) center 45%/cover; }
#page-home .promise__shade{ position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,28,15,.86),rgba(7,28,15,.18)); }
#page-home .promise__content{ position: relative; }
#page-home .promise .eyebrow{ color: #c4d1c0; }
#page-home .promise h2{ max-width: 800px; margin: 0 0 30px; font-family: var(--serif); font-size: clamp(43px,5.6vw,82px); font-weight: 400; line-height: 1.45; letter-spacing: .1em; }
#page-home .promise__content > p:last-child{ max-width: 500px; margin: 0; font-size: 13px; line-height: 2.2; }
#page-home .works{ padding: 18vh 0 15vh; overflow: hidden; background: var(--paper); }
#page-home .works::before{ content: "LANDSCAPE"; position: absolute; top: 11vh; right: -1vw; font-family: Georgia,serif; font-size: 14vw; line-height: 1; color: rgba(35,68,47,.04); }
#page-home .works__head{ position: relative; }
#page-home .works-gallery{ width: min(1440px,94vw); margin: auto; display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 115px; gap: 18px; }
#page-home .work{ position: relative; margin: 0; overflow: hidden; grid-column: span 4; grid-row: span 4; background: #d5d8d2; }
#page-home .work--large{ grid-column: span 8; }
#page-home .work--portrait{ grid-column: span 4; grid-row: span 5; }
#page-home .work__image{ position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.1s cubic-bezier(.2,.75,.25,1); }
#page-home .work:hover .work__image{ transform: scale(1.045); }
#page-home .work::after{ content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.62)); }
#page-home .work__image--01{ background-image: var(--img-a9df24f4); }
#page-home .work__image--02{ background-image: var(--img-e9d2c9f1); }
#page-home .work__image--03{ background-image: var(--img-ef943304); }
#page-home .work__image--04{ background-image: var(--img-6aca9ab6); }
#page-home .work__image--05{ background-image: var(--img-e87323e4); }
#page-home .work figcaption{ position: absolute; z-index: 2; left: 27px; bottom: 23px; display: flex; flex-direction: column; color: var(--white); }
#page-home .work figcaption span{ font-size: 7px; font-weight: 500; letter-spacing: .24em; opacity: .73; }
#page-home .work figcaption b{ margin-top: 4px; font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .08em; }
#page-home .works__action{ margin-top: 7vh; text-align: right; }
#page-home .text-link{ display: inline-flex; align-items: center; gap: 50px; padding: 15px 0; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .1em; }
#page-home .flow{ padding: 17vh 0; background: #e3e7df; }
#page-home .flow-list{ list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#page-home .flow-list li{ position: relative; min-height: 300px; padding: 34px 30px; border-right: 1px solid var(--line); }
#page-home .flow-list li:last-child{ border-right: 0; }
#page-home .flow-list li:not(:last-child)::after{ content: "→"; position: absolute; top: 37px; right: -10px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e3e7df; color: var(--leaf); font-size: 12px; }
#page-home .flow-list span{ font-family: Georgia,serif; font-size: 9px; letter-spacing: .14em; color: var(--leaf); }
#page-home .flow-list h3{ margin: 52px 0 18px; font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: .06em; }
#page-home .flow-list p{ margin: 0; font-size: 11px; line-height: 2; }
#page-home .company{ padding: 18vh 0; background: var(--cream); }
#page-home .company__top{ display: grid; grid-template-columns: 1fr .88fr; gap: 10vw; align-items: start; }
#page-home .company__history{ padding-top: 2vh; }
#page-home .history-row{ display: grid; grid-template-columns: 100px 1fr; gap: 28px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--line); }
#page-home .history-row:first-child{ border-top: 1px solid var(--line); }
#page-home .history-row b{ font-family: Georgia,serif; font-size: 28px; font-weight: 400; color: var(--green); }
#page-home .history-row p{ margin: 0; font-size: 12px; }
#page-home .company__summary{ margin: 30px 0 0; font-size: 12px; line-height: 2.1; }
#page-home .company__body{ display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; margin-top: 12vh; align-items: start; }
#page-home .company-table{ border-top: 1px solid var(--line); }
#page-home .company-table dl{ margin: 0; }
#page-home .company-table dl > div{ display: grid; grid-template-columns: 145px 1fr; gap: 35px; padding: 21px 0; border-bottom: 1px solid var(--line); }
#page-home .company-table dt{ font-size: 9px; font-weight: 600; letter-spacing: .13em; color: var(--leaf); }
#page-home .company-table dd{ margin: 0; font-size: 12px; }
#page-home .company-points{ padding: 38px; background: var(--deep); color: var(--white); }
#page-home .company-points .eyebrow{ color: #b9c8b5; }
#page-home .company-points h3{ margin: 0 0 25px; font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.65; letter-spacing: .07em; }
#page-home .company-points ul{ margin: 0; padding: 0; list-style: none; }
#page-home .company-points li{ position: relative; padding: 13px 0 13px 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; line-height: 1.8; opacity: .82; }
#page-home .company-points li:last-child{ border-bottom: 1px solid rgba(255,255,255,.14); }
#page-home .company-points li::before{ content: "—"; position: absolute; left: 0; color: #aebfa9; }
#page-home .recruit{ min-height: 86vh; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--deep); color: var(--white); }
#page-home .recruit__image{ background: linear-gradient(rgba(16,39,25,.05),rgba(16,39,25,.18)),var(--img-e9d2c9f1) center/cover; }
#page-home .recruit__content{ padding: 10vh 7vw; display: flex; flex-direction: column; justify-content: center; }
#page-home .recruit .eyebrow{ color: #bcc9b8; }
#page-home .recruit h2{ margin: 0 0 27px; font-family: var(--serif); font-size: clamp(40px,5vw,68px); font-weight: 400; line-height: 1.48; letter-spacing: .1em; }
#page-home .recruit__content > p:not(.eyebrow){ max-width: 470px; margin: 0 0 27px; font-size: 12px; line-height: 2.15; opacity: .82; }
#page-home .recruit__facts{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
#page-home .recruit__facts span{ padding: 6px 11px; border: 1px solid rgba(255,255,255,.25); font-size: 9px; letter-spacing: .08em; }
#page-home .outline-button{ display: flex; justify-content: space-between; align-items: center; max-width: 420px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.48); font-size: 10px; font-weight: 500; letter-spacing: .1em; transition: .3s; }
#page-home .outline-button:hover{ background: var(--white); color: var(--deep); }
#page-home .contact{ padding: 15vh 0; background: var(--pale); }
#page-home .contact__inner{ display: grid; grid-template-columns: .92fr 1.08fr; gap: 9vw; align-items: start; }
#page-home .contact h2{ margin: 0; font-family: var(--serif); font-size: clamp(34px,4vw,57px); font-weight: 400; line-height: 1.55; letter-spacing: .08em; }
#page-home .contact__heading > p:last-child{ max-width: 510px; margin: 27px 0 0; font-size: 12px; line-height: 2.05; }
#page-home .contact__actions{ display: flex; flex-direction: column; gap: 12px; }
#page-home .contact-card{ padding: 29px 31px; border: 1px solid rgba(23,36,28,.25); display: flex; flex-direction: column; transition: transform .3s, background .3s; }
#page-home .contact-card:hover{ transform: translateY(-3px); background: rgba(255,255,255,.35); }
#page-home .contact-card span{ font-size: 7px; font-weight: 600; letter-spacing: .24em; color: var(--leaf); }
#page-home .contact-card b{ margin: 8px 0 4px; font-family: var(--serif); font-size: clamp(22px,2.4vw,34px); font-weight: 400; letter-spacing: .05em; }
#page-home .contact-card small{ font-size: 9px; opacity: .65; }
#page-home .contact-card--dark{ background: var(--deep); color: var(--white); border-color: var(--deep); }
#page-home .contact-card--dark:hover{ background: #173c25; }
#page-home .contact-card--dark span{ color: #b6c7b2; }
#page-home .site-footer{ padding: 9vh 0 4vh; background: #0a1d10; color: #dde5da; }
#page-home .site-footer__top{ display: flex; justify-content: space-between; gap: 60px; padding-bottom: 8vh; }
#page-home .brand--footer .brand__logo{ width: 66px; height: 61px; }
#page-home .brand--footer .brand__text b{ font-size: 21px; }
#page-home .site-footer__links{ width: min(600px,52vw); display: grid; grid-template-columns: repeat(3,1fr); gap: 16px 25px; font-size: 10px; letter-spacing: .07em; }
#page-home .site-footer__bottom{ padding-top: 25px; border-top: 1px solid rgba(255,255,255,.13); display: flex; justify-content: space-between; gap: 30px; font-size: 8px; letter-spacing: .07em; opacity: .58; }
#page-home .site-footer__bottom p{ margin: 0; }
#page-home .reveal{ opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
#page-home .reveal.is-visible{ opacity: 1; transform: none; }
@media (max-width: 1080px) {
#page-home .desktop-nav{ display: none; }
#page-home .menu-button{ display: block; }
}
@media (max-width: 900px) {
#page-home{ --content: min(100% - 44px, 720px); }
#page-home .site-header{ min-height: 76px; padding: 12px 20px; }
#page-home .site-header.is-scrolled{ min-height: 66px; }
#page-home .brand__logo{ width: 48px; height: 45px; }
#page-home .brand__text b{ font-size: 15px; }
#page-home .global-nav::before{ inset: 0; opacity: .2; }
#page-home .global-nav__inner{ width: 100%; margin-left: 0; padding: 10vh 10vw 5vh; }
#page-home .global-nav__meta{ flex-direction: column; gap: 6px; }
#page-home .hero__content{ padding-top: 105px; }
#page-home .hero__side{ display: none; }
#page-home .hero h1 span{ font-size: clamp(55px,12vw,90px); }
#page-home .hero h1 strong{ font-size: clamp(46px,11vw,80px); }
#page-home .hero__body{ max-width: 520px; }
#page-home .quick-info__inner > div{ padding-inline: 2.5vw; }
#page-home .section-index{ display: none; }
#page-home .intro{ padding-top: 13vh; }
#page-home .intro__grid, #page-home .services__head, #page-home .works__head, #page-home .flow__head, #page-home .company__top, #page-home .contact__inner{ grid-template-columns: 1fr; gap: 5vh; }
#page-home .intro__visual{ width: calc(100% - 22px); height: 70vh; max-height: 680px; }
#page-home .service-grid{ grid-template-columns: 1fr; gap: 28px; }
#page-home .service-card{ display: grid; grid-template-columns: .95fr 1.05fr; }
#page-home .service-card__image{ aspect-ratio: auto; min-height: 350px; }
#page-home .services{ padding: 13vh 0; }
#page-home .promise{ min-height: 70vh; }
#page-home .works{ padding: 13vh 0; }
#page-home .works-gallery{ width: calc(100% - 28px); grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
#page-home .work, #page-home .work--large, #page-home .work--portrait{ grid-column: span 1; grid-row: span 2; }
#page-home .work--large{ grid-column: span 2; }
#page-home .flow{ padding: 13vh 0; }
#page-home .flow-list{ grid-template-columns: 1fr 1fr; }
#page-home .flow-list li{ min-height: 260px; }
#page-home .flow-list li:nth-child(2){ border-right: 0; }
#page-home .flow-list li:nth-child(-n/**/+2){ border-bottom: 1px solid var(--line); }
#page-home .flow-list li:nth-child(2)::after{ display: none; }
#page-home .company{ padding: 13vh 0; }
#page-home .company__body{ grid-template-columns: 1fr; gap: 7vh; margin-top: 9vh; }
#page-home .recruit{ grid-template-columns: 1fr; }
#page-home .recruit__image{ min-height: 55vh; }
#page-home .recruit__content{ padding: 9vh 8vw; }
#page-home .contact{ padding: 12vh 0; }
#page-home .site-footer__top{ flex-direction: column; }
#page-home .site-footer__links{ width: 100%; grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
#page-home{ --content: calc(100% - 36px); }
#page-home .brand__text small{ display: none; }
#page-home .brand__text b{ font-size: 14px; }
#page-home .brand__logo{ width: 43px; height: 40px; }
#page-home .menu-button{ width: 45px; }
#page-home .hero{ min-height: 880px; }
#page-home .hero__content{ min-height: 880px; justify-content: center; padding-top: 90px; padding-bottom: 110px; }
#page-home .hero__eyebrow{ max-width: 280px; line-height: 1.8; }
#page-home .hero h1{ gap: .07em; }
#page-home .hero h1 span{ font-size: 54px; }
#page-home .hero h1 i{ font-size: 30px; }
#page-home .hero h1 strong{ font-size: 47px; line-height: 1.3; }
#page-home .hero__lead{ margin-top: 24px; font-size: 16px; }
#page-home .hero__body{ margin-left: 0; font-size: 11px; }
#page-home .hero__actions{ margin-left: 0; width: 100%; flex-direction: column; }
#page-home .button{ width: 100%; }
#page-home .scroll-cue{ right: 18px; }
#page-home .quick-info__inner{ grid-template-columns: 1fr; }
#page-home .quick-info__inner > div{ min-height: 95px; padding: 20px 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
#page-home .quick-info__inner > div:last-child{ border-bottom: 0; }
#page-home .section-heading h2{ font-size: 31px; }
#page-home .intro__grid{ padding-bottom: 9vh; }
#page-home .intro__visual{ width: 100%; height: 58vh; }
#page-home .intro__caption{ width: calc(100% - 28px); padding: 26px 28px; }
#page-home .intro__caption p{ font-size: 19px; }
#page-home .service-card{ display: block; }
#page-home .service-card__image{ min-height: 68vw; }
#page-home .service-card__content{ padding: 26px 23px 30px; }
#page-home .service-note{ align-items: flex-start; flex-direction: column; padding-inline: 0; }
#page-home .promise h2{ font-size: 39px; }
#page-home .works-gallery{ grid-template-columns: 1fr; grid-auto-rows: 190px; }
#page-home .work, #page-home .work--large, #page-home .work--portrait{ grid-column: span 1; grid-row: span 2; }
#page-home .flow-list{ grid-template-columns: 1fr; }
#page-home .flow-list li{ min-height: auto; padding: 30px 20px 35px; border-right: 0; border-bottom: 1px solid var(--line); }
#page-home .flow-list li:last-child{ border-bottom: 0; }
#page-home .flow-list li::after{ display: none; }
#page-home .flow-list h3{ margin-top: 28px; }
#page-home .history-row{ grid-template-columns: 75px 1fr; gap: 20px; }
#page-home .history-row b{ font-size: 24px; }
#page-home .company-table dl > div{ grid-template-columns: 1fr; gap: 5px; padding: 18px 0; }
#page-home .company-points{ padding: 30px 24px; }
#page-home .recruit__image{ min-height: 43vh; }
#page-home .recruit__content{ padding: 8vh 22px; }
#page-home .contact-card{ padding: 24px 22px; }
#page-home .site-footer__bottom{ flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
#page-home{ scroll-behavior: auto; }
#page-home *, #page-home *::before, #page-home *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* =========================================================
Design refinement v5 — 2026-08-17
Layout polish only. Existing content and functionality kept.
========================================================= */
#page-home{
--ink: #1b271f;
--green: #1d432d;
--deep: #0d2819;
--leaf: #6d7f70;
--pale: #e3e8e1;
--cream: #f1eee5;
--paper: #faf9f5;
--content: min(1160px, calc(100vw - 10vw));
}
#page-home{ letter-spacing: .01em; }
/* Header: lighter, quieter, better integrated with photography */
#page-home .site-header{
min-height: 84px;
padding: 15px 3.2vw;
}
#page-home .site-header.is-scrolled{ min-height: 68px; }
#page-home .brand{ gap: 12px; }
#page-home .brand__logo{
width: 50px;
height: 47px;
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
#page-home .brand__text b{ font-size: 17px; letter-spacing: .09em; }
#page-home .brand__text small{ font-size: 6.5px; letter-spacing: .18em; }
#page-home .desktop-nav{ gap: clamp(16px,1.65vw,27px); font-size: 9px; }
#page-home .desktop-nav__contact{ padding: 11px 16px !important; }
/* Hero: stronger hierarchy, more breathing room */
#page-home .hero{ min-height: 96svh; }
#page-home .hero__image{ inset: -4%; }
#page-home .hero__veil{
background:
linear-gradient(90deg,rgba(6,27,14,.72) 0%,rgba(6,27,14,.48) 40%,rgba(6,27,14,.20) 72%,rgba(6,27,14,.30) 100%),
linear-gradient(0deg,rgba(0,0,0,.18),transparent 45%);
}
#page-home .hero__content{
min-height: 96svh;
padding-top: 118px;
padding-bottom: 118px;
justify-content: center;
}
#page-home .hero__eyebrow{ margin-bottom: 24px; font-size: 7px; opacity: .72; }
#page-home .hero h1{ max-width: 830px; gap: .1em; line-height: 1.04; }
#page-home .hero h1 span{ font-size: clamp(38px,4.8vw,68px); letter-spacing: .08em; }
#page-home .hero h1 i{ font-size: clamp(22px,2.6vw,38px); opacity: .58; }
#page-home .hero h1 strong{
margin-top: .23em;
font-size: clamp(58px,6.4vw,92px);
letter-spacing: .11em;
}
#page-home .hero__lead{
margin-top: 34px;
padding-left: 20px;
font-size: clamp(16px,1.35vw,20px);
letter-spacing: .15em;
}
#page-home .hero__body{
max-width: 520px;
margin-top: 17px;
font-size: 11px;
line-height: 2.05;
}
#page-home .hero__actions{ margin-top: 27px; }
#page-home .button{ min-width: 205px; padding: 13px 16px; }
#page-home .hero__side{ right: 2vw; opacity: .58; }
/* Feature strip: floating card to bridge the hero and the body */
#page-home .quick-info{
position: relative;
z-index: 8;
margin-top: -54px;
background: transparent;
color: var(--ink);
}
#page-home .quick-info__inner{
width: min(1080px, calc(100vw - 12vw));
background: rgba(250,249,245,.97);
box-shadow: 0 24px 70px rgba(16,38,23,.12);
}
#page-home .quick-info__inner > div{
min-height: 108px;
padding: 24px 34px;
border-right: 1px solid var(--line);
}
#page-home .quick-info span{ color: var(--leaf); opacity: .82; }
#page-home .quick-info p{ color: var(--ink); opacity: .78; }
#page-home .quick-info b{ color: var(--green); font-size: 16px; }
/* Shared section typography */
#page-home .eyebrow{ margin-bottom: 15px; font-size: 7px; }
#page-home .section-heading h2{
font-size: clamp(32px,3.5vw,50px);
line-height: 1.58;
letter-spacing: .075em;
}
#page-home .section-index{ top: 7vh; left: 2.2vw; opacity: .7; }
/* Philosophy */
#page-home .intro{ padding-top: 15vh; }
#page-home .intro__grid{
grid-template-columns: .95fr .82fr;
gap: 9vw;
padding-bottom: 10vh;
}
#page-home .intro__body{ padding-top: 1.4vh; font-size: 12px; line-height: 2.15; }
#page-home .intro__lead{ font-size: 16px; }
#page-home .intro__visual{
width: 91vw;
height: min(54vw,690px);
}
#page-home .intro__caption{
width: min(390px,44vw);
padding: 34px 40px;
border-top: 1px solid rgba(23,36,28,.08);
}
#page-home .intro__caption p{ margin-top: 14px; font-size: clamp(18px,1.8vw,24px); }
/* Services */
#page-home .services{ padding: 15vh 0 13vh; }
#page-home .services__head, #page-home .works__head, #page-home .flow__head{
grid-template-columns: 1fr .62fr;
gap: 9vw;
margin-bottom: 7.5vh;
}
#page-home .services__lead, #page-home .works__lead, #page-home .flow__lead{ font-size: 12px; line-height: 2.05; }
#page-home .service-grid{ gap: 18px; }
#page-home .service-card{
transition: transform .35s ease, box-shadow .35s ease;
border-top: 1px solid rgba(23,36,28,.07);
}
#page-home .service-card:hover{
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(23,36,28,.09);
}
#page-home .service-card__image{ aspect-ratio: 1 / .78; }
#page-home .service-card__content{ padding: 27px 27px 31px; }
#page-home .service-card h3{ margin-bottom: 13px; font-size: clamp(22px,2vw,30px); }
#page-home .service-card__content > p:last-child{ font-size: 11px; line-height: 1.95; }
#page-home .service-note{ margin-top: 34px; padding: 22px 4px; }
/* Promise image section */
#page-home .promise{ min-height: 74vh; }
#page-home .promise__shade{ background: linear-gradient(90deg,rgba(7,28,15,.82) 0%,rgba(7,28,15,.45) 42%,rgba(7,28,15,.12) 76%); }
#page-home .promise h2{ max-width: 730px; font-size: clamp(39px,4.7vw,68px); }
#page-home .promise__content > p:last-child{ font-size: 12px; }
/* Works: balanced editorial grid instead of loose masonry */
#page-home .works{ padding: 15vh 0 13vh; }
#page-home .works::before{ top: 9vh; font-size: 12vw; }
#page-home .works-gallery{
width: min(1320px,92vw);
grid-template-columns: repeat(12,1fr);
grid-template-rows: repeat(8, 88px);
grid-auto-rows: 88px;
gap: 14px;
}
#page-home .work, #page-home .work--large, #page-home .work--portrait{ grid-column: auto; grid-row: auto; }
#page-home .works-gallery .work:nth-child(1){ grid-column: 1 / 8; grid-row: 1 / 5; }
#page-home .works-gallery .work:nth-child(2){ grid-column: 8 / 13; grid-row: 1 / 3; }
#page-home .works-gallery .work:nth-child(3){ grid-column: 8 / 13; grid-row: 3 / 5; }
#page-home .works-gallery .work:nth-child(4){ grid-column: 1 / 5; grid-row: 5 / 9; }
#page-home .works-gallery .work:nth-child(5){ grid-column: 5 / 13; grid-row: 5 / 9; }
#page-home .work figcaption{ left: 22px; bottom: 18px; }
#page-home .work figcaption b{ font-size: 16px; }
#page-home .works__action{ margin-top: 5vh; }
/* Process */
#page-home .flow{ padding: 14vh 0; }
#page-home .flow-list li{ min-height: 260px; padding: 29px 26px; }
#page-home .flow-list h3{ margin-top: 42px; font-size: 21px; }
#page-home .flow-list p{ font-size: 10.5px; }
/* Company */
#page-home .company{ padding: 15vh 0; }
#page-home .company__top{ grid-template-columns: .95fr .9fr; gap: 9vw; }
#page-home .history-row{ padding: 19px 0; }
#page-home .history-row b{ font-size: 25px; }
#page-home .company__body{ gap: 6vw; margin-top: 9vh; }
#page-home .company-table dl > div{ grid-template-columns: 125px 1fr; gap: 28px; padding: 18px 0; }
#page-home .company-points{ padding: 34px 32px; }
#page-home .company-points h3{ font-size: 23px; }
/* Recruit */
#page-home .recruit{ min-height: 78vh; grid-template-columns: 1.08fr .92fr; }
#page-home .recruit__content{ padding: 9vh 6.5vw; }
#page-home .recruit h2{ font-size: clamp(37px,4.3vw,59px); }
/* Contact + footer */
#page-home .contact{ padding: 12vh 0; }
#page-home .contact__inner{ grid-template-columns: .9fr 1.1fr; gap: 8vw; }
#page-home .contact h2{ font-size: clamp(32px,3.5vw,48px); }
#page-home .contact-card{ padding: 25px 27px; }
#page-home .site-footer{ padding-top: 7vh; }
#page-home .site-footer__top{ padding-bottom: 6vh; }
/* Motion polish */
#page-home .reveal{ transform: translateY(24px); transition-duration: .8s; }
@media (max-width: 900px) {
#page-home{ --content: min(100% - 44px, 760px); }
#page-home .quick-info{ margin-top: -34px; }
#page-home .quick-info__inner{ width: calc(100% - 44px); }
#page-home .quick-info__inner > div{ min-height: 96px; padding: 20px 22px; }
#page-home .intro{ padding-top: 11vh; }
#page-home .intro__visual{ height: 64vh; }
#page-home .works-gallery{
width: calc(100% - 32px);
grid-template-columns: repeat(2,1fr);
grid-template-rows: none;
grid-auto-rows: 170px;
}
#page-home .works-gallery .work:nth-child(n){ grid-column: span 1; grid-row: span 2; }
#page-home .works-gallery .work:nth-child(1), #page-home .works-gallery .work:nth-child(5){ grid-column: span 2; }
}
@media (max-width: 620px) {
#page-home{ --content: calc(100% - 32px); }
#page-home .site-header{ padding-inline: 16px; }
#page-home .hero{ min-height: 780px; }
#page-home .hero__content{ min-height: 780px; padding-top: 105px; padding-bottom: 90px; }
#page-home .hero h1 span{ font-size: 38px; }
#page-home .hero h1 i{ font-size: 21px; }
#page-home .hero h1 strong{ font-size: 50px; letter-spacing: .08em; }
#page-home .hero__lead{ margin-top: 27px; }
#page-home .hero__body{ font-size: 10.5px; line-height: 1.95; }
#page-home .quick-info{
margin-top: 0;
background: var(--deep);
padding: 0 16px 18px;
}
#page-home .quick-info__inner{
width: 100%;
grid-template-columns: 1fr;
box-shadow: none;
}
#page-home .quick-info__inner > div{
min-height: 82px;
padding: 16px 18px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
#page-home .section-heading h2{ font-size: 29px; }
#page-home .intro__visual{ height: 54vh; }
#page-home .intro__caption{ width: calc(100% - 20px); padding: 23px 24px; }
#page-home .services{ padding-top: 11vh; }
#page-home .service-card__image{ min-height: 64vw; }
#page-home .promise{ min-height: 64vh; }
#page-home .promise h2{ font-size: 35px; }
#page-home .works-gallery{
width: calc(100% - 24px);
grid-template-columns: 1fr;
grid-auto-rows: 170px;
gap: 10px;
}
#page-home .works-gallery .work:nth-child(n){ grid-column: 1; grid-row: span 2; }
#page-home .flow-list li{ padding: 27px 18px 31px; }
#page-home .company-points{ padding: 27px 22px; }
#page-home .recruit__content{ padding-inline: 20px; }
#page-home .contact{ padding: 10vh 0; }
}
/* Logo transparency: final override */
#page-home .brand__logo{ background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
/* =========================================================
Top page refinement v7 — Header & HERO responsive polish
========================================================= */
/* Header navigation: larger and easier to read on desktop */
#page-home .site-header{
padding-inline: clamp(22px, 3.1vw, 52px);
}
#page-home .desktop-nav{
gap: clamp(18px, 1.75vw, 30px);
font-size: clamp(11.5px, .88vw, 13.5px);
font-weight: 500;
letter-spacing: .075em;
}
#page-home .desktop-nav > a{
padding-block: 13px;
}
#page-home .desktop-nav__contact{
min-width: 118px;
justify-content: center;
padding: 13px 19px !important;
}
/* HERO: stronger typography and more editorial spacing */
#page-home .hero__content{
width: min(1280px, calc(100vw - 8vw));
padding-top: 124px;
padding-bottom: 112px;
}
#page-home .hero__eyebrow{
font-size: 9px;
letter-spacing: .27em;
}
#page-home .hero h1{
max-width: 940px;
}
#page-home .hero__lead{
margin-top: 36px;
font-size: clamp(19px, 1.55vw, 24px);
line-height: 1.7;
}
#page-home .hero__body{
max-width: none;
width: 100%;
margin-top: 18px;
font-size: clamp(15px, 1.06vw, 16.5px);
line-height: 1.9;
letter-spacing: .025em;
opacity: .94;
text-shadow: 0 1px 18px rgba(0,0,0,.22);
}
/* Keep the long explanatory sentence on one line on roomy PCs only */
@media (min-width: 1180px) {
#page-home .hero__body{ white-space: nowrap; }
}
/* Buttons: larger text, correct arrow direction, refined interaction */
#page-home .hero__actions{
gap: 14px;
margin-top: 34px;
}
#page-home .button{
min-width: 252px;
min-height: 58px;
padding: 13px 15px 13px 21px;
gap: 24px;
font-size: 13px;
font-weight: 500;
letter-spacing: .07em;
line-height: 1;
white-space: nowrap;
}
#page-home .button span{
flex: 0 0 auto;
width: 31px;
height: 31px;
display: grid;
place-items: center;
border: 1px solid currentColor;
border-radius: 999px;
font-family: Arial, sans-serif;
font-size: 17px;
line-height: 1;
transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
#page-home .button:hover span{ transform: translateX(3px); }
#page-home .button--light span{ border-color: rgba(13,40,25,.28); }
#page-home .button--light:hover span{ background: var(--deep); color: var(--white); border-color: var(--deep); }
#page-home .button--line{
background: rgba(255,255,255,.045);
backdrop-filter: blur(8px);
}
#page-home .button--line:hover{ background: rgba(255,255,255,.15); }
/* A subtle accent under the HERO copy for a more polished brand feel */
#page-home .hero__content::after{
content: "";
width: 74px;
height: 1px;
margin: 38px 0 0 23px;
background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,0));
opacity: .75;
}
/* Tablet */
@media (min-width: 621px) and (max-width: 1080px) {
#page-home .site-header{
min-height: 82px;
padding: 13px 24px;
}
#page-home .brand__text b{ font-size: 17px; }
#page-home .brand__text small{ font-size: 7px; }
#page-home .menu-button{ width: 55px; height: 50px; }
#page-home .menu-button em{ font-size: 8px; }
#page-home .global-nav__inner > a{
gap: 24px;
padding: 7px 0;
font-size: clamp(24px, 3.7vw, 32px);
}
#page-home .global-nav__inner > a span{ font-size: 9px; }
#page-home .hero__content{
width: min(100% - 54px, 820px);
padding-top: 116px;
padding-bottom: 100px;
}
#page-home .hero__eyebrow{ font-size: 8.5px; }
#page-home .hero__lead{ font-size: clamp(18px, 2.35vw, 22px); }
#page-home .hero__body{
max-width: 760px;
font-size: clamp(14px, 1.75vw, 16px);
line-height: 1.95;
white-space: normal;
text-wrap: pretty;
}
#page-home .button{
min-width: 240px;
min-height: 56px;
font-size: 12.5px;
}
}
/* Mobile */
@media (max-width: 620px) {
#page-home .site-header{
min-height: 74px;
padding: 11px 16px;
}
#page-home .brand{ gap: 10px; }
#page-home .brand__text b{
font-size: clamp(14px, 4vw, 16px);
letter-spacing: .06em;
}
#page-home .brand__logo{ width: 44px; height: 41px; }
#page-home .menu-button{ width: 48px; height: 46px; }
#page-home .menu-button span{ width: 29px; }
#page-home .menu-button em{ font-size: 8px; letter-spacing: .17em; }
#page-home .global-nav__inner{
padding: 10vh 8vw 5vh;
}
#page-home .global-nav__eyebrow{ font-size: 8px; }
#page-home .global-nav__inner > a{
gap: 17px;
padding: 7px 0;
font-size: clamp(21px, 6.3vw, 27px);
line-height: 1.4;
}
#page-home .global-nav__inner > a span{ font-size: 8px; }
#page-home .hero{
min-height: max(760px, 100svh);
}
#page-home .hero__content{
width: calc(100% - 34px);
min-height: max(760px, 100svh);
padding-top: 100px;
padding-bottom: 78px;
}
#page-home .hero__eyebrow{
max-width: 100%;
margin-bottom: 20px;
font-size: 7.5px;
line-height: 1.75;
letter-spacing: .2em;
}
#page-home .hero h1{ max-width: 100%; }
#page-home .hero h1 span{ font-size: clamp(36px, 11vw, 45px); }
#page-home .hero h1 i{ font-size: clamp(20px, 6vw, 25px); }
#page-home .hero h1 strong{
font-size: clamp(46px, 14vw, 58px);
letter-spacing: .055em;
}
#page-home .hero__lead{
margin-top: 26px;
padding-left: 15px;
font-size: clamp(17px, 4.8vw, 20px);
letter-spacing: .09em;
}
#page-home .hero__body{
width: 100%;
margin: 17px 0 0;
font-size: clamp(13px, 3.55vw, 15px);
line-height: 1.9;
letter-spacing: .015em;
white-space: normal;
text-wrap: pretty;
}
#page-home .hero__actions{
width: 100%;
margin: 27px 0 0;
gap: 10px;
}
#page-home .button{
width: 100%;
min-width: 0;
min-height: 56px;
padding: 12px 13px 12px 18px;
font-size: clamp(12px, 3.5vw, 14px);
}
#page-home .button span{ width: 30px; height: 30px; font-size: 16px; }
#page-home .hero__content::after{
width: 58px;
margin: 28px 0 0;
}
}
/* =========================================================
Responsive system v8 — full top-page pass
Desktop / Tablet / Mobile consistency and overflow safety
========================================================= */
#page-home{
--page-gutter: clamp(24px, 5vw, 72px);
--content: min(1180px, calc(100vw - (var(--page-gutter) * 2)));
--section-space: clamp(88px, 10vw, 150px);
--section-gap: clamp(44px, 6vw, 86px);
}
#page-home, #page-home{ max-width: 100%; }
#page-home{ overflow-x: hidden; }
#page-home{
overflow-x: hidden;
overflow-x: clip;
font-size: clamp(14px, .92vw, 16px);
}
#page-home main, #page-home section, #page-home header, #page-home footer, #page-home nav, #page-home div, #page-home article, #page-home aside, #page-home figure, #page-home ol, #page-home li, #page-home .content-wrap, #page-home .hero__content, #page-home .quick-info__inner, #page-home .intro__grid, #page-home .services__head, #page-home .service-grid, #page-home .works__head, #page-home .works-gallery, #page-home .flow__head, #page-home .flow-list, #page-home .company__top, #page-home .company__body, #page-home .recruit, #page-home .contact__inner, #page-home .site-footer__top, #page-home .site-footer__bottom{
min-width: 0;
}
#page-home img, #page-home video, #page-home iframe, #page-home canvas, #page-home svg{
display: block;
max-width: 100%;
height: auto;
}
#page-home p, #page-home h1, #page-home h2, #page-home h3, #page-home dt, #page-home dd, #page-home a, #page-home span, #page-home b, #page-home small{
overflow-wrap: break-word;
}
#page-home .content-wrap{ width: var(--content); max-width: 100%; }
/* Unified responsive typography */
#page-home .eyebrow{
font-size: clamp(8px, .62vw, 10px);
line-height: 1.6;
}
#page-home .section-heading h2{
font-size: clamp(34px, 3.45vw, 52px);
line-height: 1.5;
}
#page-home .services__lead, #page-home .works__lead, #page-home .flow__lead, #page-home .intro__body, #page-home .promise__content > p:last-child, #page-home .company__summary, #page-home .company-table dd, #page-home .recruit__content > p:not(.eyebrow), #page-home .contact__heading > p:last-child{
font-size: clamp(13px, .92vw, 15px);
}
/* Header */
#page-home .site-header{
min-height: clamp(78px, 6vw, 92px);
padding: 14px clamp(24px, 3.2vw, 52px);
gap: clamp(20px, 2.4vw, 38px);
}
#page-home .site-header.is-scrolled{ min-height: 70px; }
#page-home .brand{ min-width: 0; }
#page-home .brand__logo{
flex: 0 0 auto;
width: clamp(46px, 3.6vw, 54px);
height: clamp(43px, 3.4vw, 51px);
}
#page-home .brand__text{ min-width: 0; }
#page-home .brand__text b{
font-size: clamp(16px, 1.17vw, 19px);
white-space: nowrap;
}
#page-home .brand__text small{ font-size: clamp(6.5px, .48vw, 8px); }
#page-home .desktop-nav{
gap: clamp(17px, 1.65vw, 29px);
font-size: clamp(12px, .86vw, 13.5px);
}
#page-home .desktop-nav__contact{ min-width: 122px; }
/* Hero */
#page-home .hero{ min-height: min(980px, max(760px, 100svh)); }
#page-home .hero__content{
width: min(1280px, calc(100vw - (var(--page-gutter) * 2)));
max-width: 1280px;
min-height: min(980px, max(760px, 100svh));
padding-top: clamp(112px, 9vw, 150px);
padding-bottom: clamp(92px, 8vw, 128px);
}
#page-home .hero__eyebrow{ font-size: clamp(8px, .64vw, 10px); }
#page-home .hero h1{ max-width: min(940px, 100%); }
#page-home .hero h1 span{ font-size: clamp(42px, 4.7vw, 70px); }
#page-home .hero h1 i{ font-size: clamp(24px, 2.65vw, 39px); }
#page-home .hero h1 strong{ font-size: clamp(60px, 6.25vw, 94px); }
#page-home .hero__lead{ font-size: clamp(19px, 1.48vw, 24px); }
#page-home .hero__body{
max-width: 100%;
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.9;
}
#page-home .hero__actions{ max-width: 100%; }
#page-home .button{
min-height: 58px;
min-width: min(252px, 100%);
font-size: clamp(12.5px, .86vw, 14px);
}
/* Quick features */
#page-home .quick-info__inner{
width: min(1080px, calc(100vw - (var(--page-gutter) * 2)));
max-width: 1080px;
}
#page-home .quick-info__inner > div{ min-width: 0; }
#page-home .quick-info p{ font-size: clamp(12px, .83vw, 14px); }
#page-home .quick-info b{ font-size: clamp(16px, 1.18vw, 18px); }
/* Section rhythm */
#page-home .intro{ padding-top: var(--section-space); }
#page-home .intro__grid{ gap: clamp(48px, 8vw, 116px); padding-bottom: clamp(68px, 8vw, 112px); }
#page-home .intro__body{ line-height: 2.15; }
#page-home .intro__lead{ font-size: clamp(16px, 1.18vw, 18px); }
#page-home .intro__visual{
width: min(91vw, 1440px);
max-width: 100%;
height: clamp(500px, 52vw, 690px);
}
#page-home .intro__caption{ max-width: min(430px, 90%); }
#page-home .services{ padding: var(--section-space) 0; }
#page-home .services__head, #page-home .works__head, #page-home .flow__head{ margin-bottom: var(--section-gap); }
#page-home .service-grid{ align-items: stretch; }
#page-home .service-card{ min-width: 0; height: 100%; }
#page-home .service-card__image{ width: 100%; }
#page-home .service-card__content{ min-width: 0; }
#page-home .service-card h3{ font-size: clamp(23px, 2vw, 30px); }
#page-home .service-card__content > p:last-child{ font-size: clamp(12.5px, .84vw, 14px); }
#page-home .service-note{ max-width: 100%; }
#page-home .service-note p{ font-size: clamp(14px, 1.02vw, 16px); }
#page-home .service-note a{ font-size: clamp(11px, .78vw, 13px); }
#page-home .promise{ min-height: clamp(560px, 72vh, 780px); }
#page-home .promise__content{ padding-block: clamp(84px, 9vw, 130px); }
#page-home .promise h2{ font-size: clamp(40px, 4.6vw, 68px); }
#page-home .works{ padding: var(--section-space) 0; }
#page-home .works-gallery{ max-width: calc(100vw - 32px); }
#page-home .work{ min-width: 0; }
#page-home .work figcaption{ max-width: calc(100% - 38px); }
#page-home .work figcaption b{ font-size: clamp(15px, 1.18vw, 18px); }
#page-home .text-link{ font-size: clamp(11px, .76vw, 13px); max-width: 100%; }
#page-home .flow{ padding: var(--section-space) 0; }
#page-home .flow-list li{ min-width: 0; }
#page-home .flow-list h3{ font-size: clamp(20px, 1.55vw, 23px); }
#page-home .flow-list p{ font-size: clamp(12px, .82vw, 14px); }
#page-home .company{ padding: var(--section-space) 0; }
#page-home .company__top, #page-home .company__body{ gap: clamp(48px, 7vw, 100px); }
#page-home .history-row{ min-width: 0; }
#page-home .history-row p{ font-size: clamp(12.5px, .85vw, 14px); }
#page-home .company-table dl > div{ min-width: 0; }
#page-home .company-table dd{ min-width: 0; }
#page-home .company-points li{ font-size: clamp(12px, .82vw, 14px); }
#page-home .recruit{ min-height: clamp(620px, 78vh, 840px); }
#page-home .recruit__image{ min-width: 0; }
#page-home .recruit__content{ min-width: 0; }
#page-home .recruit h2{ font-size: clamp(38px, 4.25vw, 60px); }
#page-home .recruit__facts span{ font-size: clamp(10px, .7vw, 12px); }
#page-home .outline-button{
width: min(420px, 100%);
min-height: 56px;
font-size: clamp(11px, .76vw, 13px);
}
#page-home .contact{ padding: var(--section-space) 0; }
#page-home .contact h2{ font-size: clamp(34px, 3.5vw, 50px); }
#page-home .contact-card{ min-width: 0; }
#page-home .contact-card b{ font-size: clamp(22px, 2.2vw, 32px); overflow-wrap: anywhere; }
#page-home .contact-card small{ font-size: clamp(10px, .7vw, 12px); }
#page-home .site-footer{ padding: clamp(64px, 7vw, 96px) 0 clamp(30px, 3vw, 46px); }
#page-home .site-footer__top{ gap: clamp(40px, 6vw, 80px); padding-bottom: clamp(54px, 6vw, 82px); }
#page-home .site-footer__links{ font-size: clamp(11px, .76vw, 13px); }
#page-home .site-footer__bottom{ font-size: clamp(9px, .64vw, 11px); }
/* ---------- Desktop ---------- */
@media (min-width: 1181px) {
#page-home .desktop-nav{ display: flex; }
#page-home .menu-button{ display: none; }
#page-home .hero__body{ white-space: nowrap; }
}
/* ---------- Tablet ---------- */
@media (min-width: 768px) and (max-width: 1180px) {
#page-home{
--page-gutter: clamp(28px, 5vw, 52px);
--section-space: clamp(82px, 10vw, 112px);
--section-gap: clamp(42px, 6vw, 64px);
}
#page-home .desktop-nav{ display: none; }
#page-home .menu-button{ display: block; }
#page-home .site-header{ min-height: 80px; padding: 13px var(--page-gutter); }
#page-home .site-header.is-scrolled{ min-height: 70px; }
#page-home .brand__text b{ font-size: clamp(16px, 2vw, 18px); }
#page-home .global-nav::before{ inset: 0 52% 0 0; opacity: .42; }
#page-home .global-nav__inner{
width: 58%;
margin-left: 42%;
padding: 9vh 7vw 5vh;
}
#page-home .global-nav__inner > a{ font-size: clamp(23px, 3.2vw, 31px); padding: 6px 0; }
#page-home .global-nav__meta{ font-size: 11px; }
#page-home .hero{ min-height: max(760px, 92svh); }
#page-home .hero__content{
width: var(--content);
min-height: max(760px, 92svh);
padding-top: 112px;
padding-bottom: 94px;
}
#page-home .hero__side{ display: none; }
#page-home .hero h1 span{ font-size: clamp(42px, 6.6vw, 64px); }
#page-home .hero h1 i{ font-size: clamp(24px, 3.8vw, 36px); }
#page-home .hero h1 strong{ font-size: clamp(58px, 8.6vw, 82px); }
#page-home .hero__lead{ font-size: clamp(19px, 2.4vw, 23px); }
#page-home .hero__body{
max-width: 790px;
font-size: clamp(14.5px, 1.8vw, 16.5px);
white-space: normal;
text-wrap: pretty;
}
#page-home .hero__actions{ gap: 12px; }
#page-home .button{ min-width: 235px; }
#page-home .quick-info{ margin-top: -34px; }
#page-home .quick-info__inner{ width: var(--content); grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page-home .quick-info__inner > div{ min-height: 100px; padding: 20px clamp(18px, 2.5vw, 28px); gap: 14px; }
#page-home .intro__grid{ grid-template-columns: 1fr; gap: 38px; }
#page-home .intro__body{ max-width: 760px; padding-top: 0; }
#page-home .intro__visual{ width: calc(100% - var(--page-gutter)); height: clamp(500px, 66vw, 660px); }
#page-home .services__head, #page-home .works__head, #page-home .flow__head{
grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
gap: clamp(32px, 5vw, 58px);
align-items: end;
}
#page-home .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#page-home .service-card{ display: block; }
#page-home .service-card__image{ min-height: 0; aspect-ratio: 1 / .78; }
#page-home .service-grid .service-card:nth-child(3){
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
#page-home .service-grid .service-card:nth-child(3) .service-card__image{ min-height: 320px; aspect-ratio: auto; }
#page-home .service-grid .service-card:nth-child(3) .service-card__content{ align-self: center; }
#page-home .promise{ min-height: 66vh; }
#page-home .promise__content{ padding-block: 92px; }
#page-home .promise h2{ max-width: 700px; }
#page-home .works-gallery{
width: calc(100% - 32px);
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: clamp(155px, 20vw, 210px);
gap: 12px;
}
#page-home .works-gallery .work:nth-child(n){ grid-column: span 1; grid-row: span 2; }
#page-home .works-gallery .work:nth-child(1), #page-home .works-gallery .work:nth-child(5){ grid-column: span 2; }
#page-home .flow-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-home .flow-list li{ min-height: 245px; padding: 28px 26px; }
#page-home .flow-list li:nth-child(2n){ border-right: 0; }
#page-home .flow-list li:nth-child(-n/**/+2){ border-bottom: 1px solid var(--line); }
#page-home .flow-list li:nth-child(2)::after{ display: none; }
#page-home .flow-list li:nth-child(3)::after{ display: block; }
#page-home .company__top{ grid-template-columns: 1fr; gap: 42px; }
#page-home .company__history{ max-width: 820px; padding-top: 0; }
#page-home .company__body{ grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); margin-top: 72px; }
#page-home .company-table dl > div{ grid-template-columns: 128px minmax(0, 1fr); gap: 24px; }
#page-home .recruit{ grid-template-columns: 1fr; min-height: 0; }
#page-home .recruit__image{ min-height: clamp(430px, 56vw, 620px); }
#page-home .recruit__content{ padding: 78px var(--page-gutter); }
#page-home .contact__inner{ grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(36px, 6vw, 64px); }
#page-home .site-footer__top{ flex-direction: column; }
#page-home .site-footer__links{ width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Narrow tablet adjustments */
@media (min-width: 768px) and (max-width: 899px) {
#page-home .global-nav::before{ inset: 0; opacity: .18; }
#page-home .global-nav__inner{ width: 100%; margin-left: 0; padding-inline: 9vw; }
#page-home .services__head, #page-home .works__head, #page-home .flow__head{ grid-template-columns: 1fr; gap: 28px; }
#page-home .services__lead, #page-home .works__lead, #page-home .flow__lead{ max-width: 680px; margin-bottom: 0; }
#page-home .company__body{ grid-template-columns: 1fr; gap: 50px; }
#page-home .contact__inner{ grid-template-columns: 1fr; gap: 46px; }
}
/* ---------- Mobile ---------- */
@media (max-width: 767px) {
#page-home{
--page-gutter: clamp(16px, 4.8vw, 22px);
--content: calc(100vw - (var(--page-gutter) * 2));
--section-space: clamp(70px, 19vw, 92px);
--section-gap: clamp(32px, 10vw, 46px);
}
#page-home{ font-size: clamp(14px, 3.75vw, 15px); }
#page-home .content-wrap{ width: var(--content); }
#page-home .site-header{ min-height: 72px; padding: 10px var(--page-gutter); gap: 12px; }
#page-home .site-header.is-scrolled{ min-height: 66px; }
#page-home .brand{ gap: 9px; max-width: calc(100% - 52px); }
#page-home .brand__logo{ width: 42px; height: 39px; }
#page-home .brand__text b{ font-size: clamp(13.5px, 4vw, 15.5px); letter-spacing: .055em; }
#page-home .brand__text small{ display: none; }
#page-home .menu-button{ display: block; flex: 0 0 46px; width: 46px; height: 44px; }
#page-home .menu-button span{ right: 0; width: 28px; }
#page-home .menu-button span:nth-child(2){ width: 20px; }
#page-home .menu-button em{ font-size: 7.5px; }
#page-home .global-nav::before{ inset: 0; opacity: .17; }
#page-home .global-nav__inner{
width: 100%;
height: 100%;
margin-left: 0;
padding: max(88px, 9vh) var(--page-gutter) 32px;
justify-content: center;
overflow-y: auto;
}
#page-home .global-nav__eyebrow{ margin-bottom: 18px; font-size: 8px; }
#page-home .global-nav__inner > a{
gap: 14px;
padding: 5px 0;
font-size: clamp(20px, 6vw, 25px);
line-height: 1.45;
}
#page-home .global-nav__inner > a span{ flex: 0 0 22px; font-size: 8px; }
#page-home .global-nav__meta{
margin-top: 20px;
padding-top: 18px;
flex-direction: column;
gap: 6px;
font-size: 9.5px;
}
#page-home .global-nav__meta a{ font-size: 16px; }
#page-home .hero{
min-height: max(720px, 100svh);
}
#page-home .hero__image{ inset: -3%; background-position: 58% center; }
#page-home .hero__veil{
background:
linear-gradient(90deg,rgba(6,27,14,.78),rgba(6,27,14,.43) 70%,rgba(6,27,14,.34)),
linear-gradient(0deg,rgba(0,0,0,.26),transparent 48%);
}
#page-home .hero__content{
width: var(--content);
min-height: max(720px, 100svh);
padding-top: 94px;
padding-bottom: 74px;
}
#page-home .hero__eyebrow{
max-width: 100%;
margin-bottom: 18px;
font-size: clamp(7px, 2.2vw, 8px);
line-height: 1.75;
letter-spacing: .17em;
}
#page-home .hero h1{ max-width: 100%; gap: .06em; }
#page-home .hero h1 span{ font-size: clamp(34px, 10.5vw, 44px); }
#page-home .hero h1 i{ font-size: clamp(19px, 5.8vw, 24px); }
#page-home .hero h1 strong{
margin-top: .2em;
font-size: clamp(43px, 13.2vw, 56px);
line-height: 1.22;
letter-spacing: .045em;
}
#page-home .hero__lead{
margin-top: 24px;
padding-left: 14px;
font-size: clamp(16px, 4.65vw, 19px);
letter-spacing: .075em;
}
#page-home .hero__body{
width: 100%;
margin: 16px 0 0;
font-size: clamp(13px, 3.65vw, 14.5px);
line-height: 1.88;
white-space: normal;
text-wrap: pretty;
}
#page-home .hero__actions{
width: 100%;
margin: 24px 0 0;
flex-direction: column;
gap: 9px;
}
#page-home .button{
width: 100%;
min-width: 0;
min-height: 54px;
padding: 11px 12px 11px 17px;
font-size: clamp(12px, 3.45vw, 13.5px);
}
#page-home .button span{ width: 30px; height: 30px; font-size: 16px; }
#page-home .hero__content::after{ margin: 26px 0 0; }
#page-home .hero__side{ display: none; }
#page-home .scroll-cue{ right: var(--page-gutter); bottom: 25px; }
#page-home .quick-info{
margin-top: 0;
padding: 0 var(--page-gutter) 16px;
background: var(--deep);
}
#page-home .quick-info__inner{
width: 100%;
grid-template-columns: 1fr;
box-shadow: none;
}
#page-home .quick-info__inner > div{
min-height: 78px;
padding: 15px 16px;
gap: 14px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
#page-home .quick-info__inner > div:last-child{ border-bottom: 0; }
#page-home .quick-info span{ flex: 0 0 24px; }
#page-home .quick-info p{ font-size: 12.5px; line-height: 1.7; }
#page-home .quick-info b{ font-size: 15.5px; }
#page-home .section-index{ display: none; }
#page-home .eyebrow{ margin-bottom: 11px; font-size: 8px; letter-spacing: .22em; }
#page-home .section-heading h2{
font-size: clamp(28px, 8.6vw, 36px);
line-height: 1.55;
letter-spacing: .055em;
}
#page-home .intro__grid{ grid-template-columns: 1fr; gap: 30px; padding-bottom: 52px; }
#page-home .intro__body{ padding-top: 0; font-size: clamp(13.5px, 3.7vw, 15px); line-height: 2; }
#page-home .intro__lead{ font-size: clamp(15px, 4.2vw, 17px); line-height: 1.9 !important; }
#page-home .intro__visual{
width: 100%;
height: clamp(420px, 112vw, 570px);
max-height: none;
}
#page-home .intro__photo{ inset: -4%; }
#page-home .intro__caption{
left: 0;
width: calc(100% - 18px);
max-width: 380px;
padding: 22px 22px 24px;
}
#page-home .intro__caption p{ margin-top: 10px; font-size: clamp(18px, 5.5vw, 22px); line-height: 1.65; }
#page-home .services__head, #page-home .works__head, #page-home .flow__head{
grid-template-columns: 1fr;
gap: 22px;
margin-bottom: var(--section-gap);
}
#page-home .services__lead, #page-home .works__lead, #page-home .flow__lead{
max-width: 100%;
margin: 0;
font-size: clamp(13.5px, 3.65vw, 15px);
line-height: 1.95;
}
#page-home .service-grid{ grid-template-columns: 1fr; gap: 18px; }
#page-home .service-card, #page-home .service-grid .service-card:nth-child(3){ display: block; grid-column: auto; }
#page-home .service-card__image, #page-home .service-grid .service-card:nth-child(3) .service-card__image{
min-height: 0;
aspect-ratio: 1 / .72;
}
#page-home .service-card__content{ padding: 23px 20px 27px; }
#page-home .service-card h3{ margin-bottom: 12px; font-size: clamp(22px, 6.6vw, 27px); }
#page-home .service-card__content > p:last-child{ font-size: clamp(13px, 3.55vw, 14.5px); line-height: 1.9; }
#page-home .service-note{
margin-top: 28px;
padding: 20px 0;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
#page-home .service-note p{ font-size: 14px; line-height: 1.8; }
#page-home .service-note a{ width: 100%; min-width: 0; justify-content: space-between; font-size: 12.5px; }
#page-home .promise{ min-height: clamp(520px, 78svh, 650px); }
#page-home .promise__image{ inset: -5%; background-position: 62% center; }
#page-home .promise__shade{ background: linear-gradient(90deg,rgba(7,28,15,.86),rgba(7,28,15,.40)); }
#page-home .promise__content{ padding-block: 78px; }
#page-home .promise h2{ margin-bottom: 22px; font-size: clamp(32px, 9.8vw, 41px); line-height: 1.48; }
#page-home .promise__content > p:last-child{ font-size: clamp(13.5px, 3.65vw, 15px); line-height: 2; }
#page-home .works::before{ top: 62px; right: -8vw; font-size: 23vw; }
#page-home .works-gallery{
width: calc(100% - (var(--page-gutter) * 2));
max-width: 100%;
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-rows: auto;
gap: 10px;
}
#page-home .works-gallery .work:nth-child(n){
grid-column: 1;
grid-row: auto;
min-height: 0;
aspect-ratio: 4 / 3;
}
#page-home .works-gallery .work:nth-child(1), #page-home .works-gallery .work:nth-child(5){ aspect-ratio: 16 / 10; }
#page-home .work figcaption{ left: 18px; right: 18px; bottom: 16px; max-width: none; }
#page-home .work figcaption b{ font-size: 16px; }
#page-home .works__action{ margin-top: 32px; text-align: left; }
#page-home .text-link{ width: 100%; justify-content: space-between; gap: 18px; font-size: 12px; }
#page-home .flow-list{ grid-template-columns: 1fr; }
#page-home .flow-list li{
min-height: 0;
padding: 25px 18px 29px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
#page-home .flow-list li:last-child{ border-bottom: 0; }
#page-home .flow-list li::after{ display: none !important; }
#page-home .flow-list h3{ margin: 22px 0 12px; font-size: clamp(20px, 6vw, 24px); }
#page-home .flow-list p{ font-size: clamp(13px, 3.55vw, 14.5px); line-height: 1.9; }
#page-home .company__top, #page-home .company__body{ grid-template-columns: 1fr; gap: 38px; }
#page-home .company__history{ padding-top: 0; }
#page-home .history-row{ grid-template-columns: 68px minmax(0, 1fr); gap: 16px; padding: 15px 0; }
#page-home .history-row b{ font-size: 22px; }
#page-home .history-row p{ font-size: 13px; line-height: 1.8; }
#page-home .company__summary{ margin-top: 23px; font-size: 13.5px; line-height: 1.95; }
#page-home .company__body{ margin-top: 56px; }
#page-home .company-table dl > div{ grid-template-columns: 1fr; gap: 5px; padding: 16px 0; }
#page-home .company-table dt{ font-size: 9px; }
#page-home .company-table dd{ font-size: 13.5px; line-height: 1.8; overflow-wrap: anywhere; }
#page-home .company-points{ padding: 26px 21px; }
#page-home .company-points h3{ margin-bottom: 18px; font-size: clamp(21px, 6vw, 25px); }
#page-home .company-points li{ padding: 11px 0 11px 18px; font-size: 13px; }
#page-home .recruit{ grid-template-columns: 1fr; min-height: 0; }
#page-home .recruit__image{ min-height: clamp(300px, 78vw, 420px); }
#page-home .recruit__content{ padding: 62px var(--page-gutter) 68px; }
#page-home .recruit h2{ margin-bottom: 20px; font-size: clamp(31px, 9.2vw, 39px); }
#page-home .recruit__content > p:not(.eyebrow){ margin-bottom: 22px; font-size: 13.5px; line-height: 1.95; }
#page-home .recruit__facts{ margin-bottom: 26px; gap: 6px; }
#page-home .recruit__facts span{ padding: 6px 9px; font-size: 10.5px; }
#page-home .outline-button{ width: 100%; max-width: none; min-height: 54px; padding: 14px 16px; font-size: 12px; }
#page-home .contact__inner{ grid-template-columns: 1fr; gap: 36px; }
#page-home .contact h2{ font-size: clamp(29px, 8.7vw, 37px); line-height: 1.55; }
#page-home .contact__heading > p:last-child{ margin-top: 19px; font-size: 13.5px; line-height: 1.95; }
#page-home .contact__actions{ gap: 10px; }
#page-home .contact-card{ padding: 21px 19px; }
#page-home .contact-card span{ font-size: 8px; }
#page-home .contact-card b{ margin-top: 6px; font-size: clamp(21px, 6.3vw, 27px); }
#page-home .contact-card small{ font-size: 10.5px; line-height: 1.6; }
#page-home .site-footer{ padding-top: 58px; }
#page-home .site-footer__top{ flex-direction: column; gap: 36px; padding-bottom: 46px; }
#page-home .brand--footer{ max-width: 100%; }
#page-home .brand--footer .brand__logo{ width: 50px; height: 47px; }
#page-home .brand--footer .brand__text b{ font-size: 17px; }
#page-home .brand--footer .brand__text small{ display: block; font-size: 6.5px; }
#page-home .site-footer__links{
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px 18px;
font-size: 12px;
}
#page-home .site-footer__bottom{
padding-top: 20px;
flex-direction: column;
gap: 9px;
font-size: 9.5px;
line-height: 1.7;
}
}
/* Very small phones */
@media (max-width: 374px) {
#page-home{ --page-gutter: 15px; }
#page-home .brand__text b{ font-size: 13px; }
#page-home .hero h1 span{ font-size: 33px; }
#page-home .hero h1 i{ font-size: 18px; }
#page-home .hero h1 strong{ font-size: 41px; }
#page-home .hero__lead{ font-size: 15.5px; }
#page-home .hero__body{ font-size: 12.8px; }
#page-home .button{ font-size: 11.8px; }
#page-home .site-footer__links{ grid-template-columns: 1fr; }
}
/* Touch devices: preserve polish without relying on hover */
@media (hover: none) {
#page-home .service-card:hover, #page-home .contact-card:hover{ transform: none; }
#page-home .work:hover .work__image{ transform: none; }
}
/* =========================================================
Header visibility fix v9 — 2026-08-17
Preserve the existing header layout while improving contrast,
alignment and responsive stability over bright HERO imagery.
========================================================= */
#page-home .site-header{
min-height: 86px;
padding-top: 12px;
padding-bottom: 12px;
align-items: center;
background: linear-gradient(180deg, rgba(6, 27, 14, .66) 0%, rgba(6, 27, 14, .34) 68%, rgba(6, 27, 14, .08) 100%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
#page-home .site-header.is-scrolled{
min-height: 70px;
color: var(--ink);
background: rgba(248,247,242,.96);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
#page-home .brand{
align-items: center;
gap: 12px;
min-width: 250px;
}
#page-home .brand__logo{
width: 50px;
height: 46px;
flex: 0 0 50px;
}
#page-home .brand__text{
justify-content: center;
min-width: 0;
color: inherit;
}
#page-home .brand__text b{
display: block;
font-size: clamp(17px, 1.15vw, 19px);
line-height: 1.25;
letter-spacing: .075em;
white-space: nowrap;
}
#page-home .brand__text small{
display: block;
margin-top: 4px;
font-size: 7px;
line-height: 1.3;
letter-spacing: .17em;
white-space: nowrap;
}
#page-home .desktop-nav{
align-self: center;
margin-left: auto;
color: inherit;
line-height: 1.2;
}
#page-home .desktop-nav > a{
display: flex;
align-items: center;
min-height: 42px;
}
#page-home .desktop-nav__contact{
min-height: 44px;
}
@media (min-width: 1181px) {
#page-home .site-header{ padding-inline: clamp(28px, 3vw, 48px); }
#page-home .desktop-nav{ gap: clamp(18px, 1.55vw, 28px); }
}
@media (min-width: 768px) and (max-width: 1180px) {
#page-home .site-header{
min-height: 80px;
padding: 11px var(--page-gutter);
background: linear-gradient(180deg, rgba(6,27,14,.70), rgba(6,27,14,.30));
}
#page-home .brand{ min-width: 0; }
#page-home .brand__logo{ width: 48px; height: 44px; flex-basis: 48px; }
#page-home .brand__text b{ font-size: clamp(16px, 2vw, 18px); }
#page-home .menu-button{ align-self: center; }
}
@media (max-width: 767px) {
#page-home .site-header{
min-height: 72px;
padding: 9px var(--page-gutter);
background: linear-gradient(180deg, rgba(6,27,14,.74), rgba(6,27,14,.32));
}
#page-home .site-header.is-scrolled{ min-height: 64px; }
#page-home .brand{
min-width: 0;
max-width: calc(100% - 58px);
gap: 9px;
}
#page-home .brand__logo{ width: 42px; height: 39px; flex-basis: 42px; }
#page-home .brand__text b{
font-size: clamp(13.5px, 4vw, 15.5px);
letter-spacing: .05em;
}
#page-home .brand__text small{ display: none; }
#page-home .menu-button{ align-self: center; }
}
/* =========================================================
Header transparency refinement v12 — 2026-08-17
More transparent over HERO while preserving readability.
========================================================= */
#page-home .site-header{
background: linear-gradient(
180deg,
rgba(6, 27, 14, .34) 0%,
rgba(6, 27, 14, .16) 62%,
rgba(6, 27, 14, .025) 100%
);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
}
#page-home .site-header.is-scrolled{
background: rgba(248, 247, 242, .90);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
@media (min-width: 768px) and (max-width: 1180px) {
#page-home .site-header{
background: linear-gradient(
180deg,
rgba(6, 27, 14, .38) 0%,
rgba(6, 27, 14, .16) 72%,
rgba(6, 27, 14, .03) 100%
);
}
}
@media (max-width: 767px) {
#page-home .site-header{
background: linear-gradient(
180deg,
rgba(6, 27, 14, .42) 0%,
rgba(6, 27, 14, .18) 74%,
rgba(6, 27, 14, .035) 100%
);
}
}
/* v13: keep philosophy lead on one line on desktop */
@media (min-width: 1181px) {
#page-home .intro__lead{
white-space: nowrap;
font-size: clamp(15px, 1.05vw, 17px);
letter-spacing: .035em;
}
}
/* v14: quick-info numbering and emphasis */
#page-home .quick-info span{
font-size: clamp(12px, 0.95vw, 16px) !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
}
#page-home .quick-info b{
font-weight: 700 !important;
}
@media (max-width: 768px) {
#page-home .quick-info span{
font-size: 13px !important;
}
#page-home .quick-info b{
font-weight: 700 !important;
}
}
/* v15: enlarge 01/02/03 numbers a bit more */
#page-home .quick-info span{
font-size: clamp(15px, 1.15vw, 19px) !important;
}
@media (max-width: 768px) {
#page-home .quick-info span{
font-size: 16px !important;
}
}
/* v16: enlarge 01/02/03 numbers by about 5px more */
#page-home .quick-info span{
font-size: clamp(20px, 1.45vw, 24px) !important;
line-height: 1 !important;
}
@media (max-width: 768px) {
#page-home .quick-info span{
font-size: 21px !important;
}
}
/* v17: refine OUR MISSION visual block */
#page-home .intro__visual{ overflow: visible; }
#page-home .intro__caption{
left: clamp(20px, 2.8vw, 34px) !important;
bottom: clamp(20px, 2.8vw, 34px) !important;
width: min(470px, 44vw) !important;
padding: 34px 34px 34px 40px !important;
background: rgba(248,247,242,.80) !important;
border: 1px solid rgba(255,255,255,.56) !important;
box-shadow: 0 22px 44px rgba(17,34,22,.18) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#page-home .intro__caption::before{
content: "";
position: absolute;
left: 40px;
top: 24px;
width: 52px;
height: 2px;
background: linear-gradient(90deg, var(--green), rgba(22,145,58,.12));
}
#page-home .intro__caption span{
display: inline-block;
margin-top: 10px;
font-size: 8px !important;
font-weight: 700 !important;
letter-spacing: .34em !important;
color: rgba(76,108,83,.82) !important;
}
#page-home .intro__caption p{
margin-top: 18px !important;
font-size: clamp(24px, 2.15vw, 32px) !important;
line-height: 1.58 !important;
letter-spacing: .08em !important;
color: #243228 !important;
}
@media (max-width: 1024px) {
#page-home .intro__caption{
width: min(430px, calc(100% - 36px)) !important;
padding: 28px 28px 30px 32px !important;
}
#page-home .intro__caption::before{ left: 32px; top: 20px; width: 46px; }
#page-home .intro__caption p{ font-size: clamp(22px, 3vw, 28px) !important; }
}
@media (max-width: 767px) {
#page-home .intro__caption{
left: 14px !important;
right: 14px;
bottom: 14px !important;
width: auto !important;
padding: 24px 22px 24px 24px !important;
background: rgba(248,247,242,.84) !important;
box-shadow: 0 16px 30px rgba(17,34,22,.16) !important;
}
#page-home .intro__caption::before{ left: 24px; top: 18px; width: 42px; }
#page-home .intro__caption span{ font-size: 7px !important; }
#page-home .intro__caption p{
margin-top: 14px !important;
font-size: clamp(20px, 5.5vw, 24px) !important;
line-height: 1.55 !important;
}
}
/* v18: premium and simple refinement for OUR MISSION */
#page-home .intro__caption{
left: clamp(26px, 3vw, 42px) !important;
bottom: clamp(26px, 3vw, 42px) !important;
width: min(430px, 40vw) !important;
padding: 38px 42px 40px 42px !important;
background: rgba(250,249,245,.92) !important;
border: 1px solid rgba(32,52,37,.10) !important;
box-shadow: 0 12px 28px rgba(20,36,25,.10) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#page-home .intro__caption::before{
left: 42px !important;
top: 24px !important;
width: 34px !important;
height: 1px !important;
background: rgba(36,50,40,.38) !important;
}
#page-home .intro__caption span{
margin-top: 0 !important;
font-size: 7px !important;
font-weight: 600 !important;
letter-spacing: .30em !important;
color: rgba(76,95,81,.76) !important;
}
#page-home .intro__caption p{
margin-top: 18px !important;
font-size: clamp(25px, 2vw, 31px) !important;
line-height: 1.7 !important;
letter-spacing: .06em !important;
color: #1f2d23 !important;
}
@media (max-width: 1024px) {
#page-home .intro__caption{
width: min(400px, calc(100% - 44px)) !important;
padding: 32px 34px 34px 34px !important;
}
#page-home .intro__caption::before{
left: 34px !important;
top: 22px !important;
}
#page-home .intro__caption p{
font-size: clamp(22px, 2.8vw, 28px) !important;
}
}
@media (max-width: 767px) {
#page-home .intro__caption{
left: 16px !important;
right: 16px !important;
bottom: 16px !important;
width: auto !important;
padding: 26px 24px 26px 24px !important;
background: rgba(250,249,245,.95) !important;
box-shadow: 0 10px 22px rgba(20,36,25,.08) !important;
}
#page-home .intro__caption::before{
left: 24px !important;
top: 18px !important;
width: 30px !important;
}
#page-home .intro__caption p{
margin-top: 14px !important;
font-size: clamp(20px, 5.6vw, 23px) !important;
line-height: 1.62 !important;
}
}
/* v19: keep philosophy heading in clean two lines */
#page-home .intro .section-heading h2 span{
display: block;
white-space: nowrap;
}
@media (max-width: 767px) {
#page-home .intro .section-heading h2 span{
white-space: normal;
}
}
/* v20: reduce the philosophy image size so it does not compete with HERO */
#page-home .intro__visual{
width: min(var(--content), 1120px) !important;
max-width: calc(100% - var(--page-gutter)) !important;
height: clamp(360px, 40vw, 520px) !important;
margin-inline: auto !important;
}
#page-home .intro__photo{
inset: -3% !important;
}
@media (max-width: 1180px) {
#page-home .intro__visual{
width: calc(100% - var(--page-gutter)) !important;
height: clamp(360px, 52vw, 500px) !important;
}
}
@media (max-width: 767px) {
#page-home .intro__visual{
width: 100% !important;
height: clamp(340px, 82vw, 440px) !important;
}
}
/* v21: option 2 — make the philosophy image much smaller */
#page-home .intro__visual{
width: min(860px, calc(100% - (var(--page-gutter) * 2))) !important;
max-width: 860px !important;
height: clamp(280px, 30vw, 390px) !important;
margin-inline: auto !important;
}
#page-home .intro__photo{
inset: -2% !important;
}
#page-home .intro__caption{
max-width: min(390px, 88%) !important;
}
@media (max-width: 1180px) {
#page-home .intro__visual{
width: min(760px, calc(100% - var(--page-gutter))) !important;
height: clamp(280px, 42vw, 360px) !important;
}
}
@media (max-width: 767px) {
#page-home .intro__visual{
width: 100% !important;
max-width: none !important;
height: clamp(280px, 72vw, 340px) !important;
}
#page-home .intro__caption{
max-width: min(320px, calc(100% - 22px)) !important;
}
}
/* v22: make mission box smaller and fit copy into two lines */
#page-home .intro__caption{
max-width: min(340px, 84%) !important;
width: auto !important;
padding: 24px 26px 24px 26px !important;
}
#page-home .intro__caption::before{
width: 26px !important;
left: 26px !important;
top: 18px !important;
}
#page-home .intro__caption span{
font-size: 6.5px !important;
letter-spacing: .26em !important;
}
#page-home .intro__caption p{
margin-top: 14px !important;
font-size: clamp(17px, 1.55vw, 23px) !important;
line-height: 1.82 !important;
letter-spacing: .045em !important;
}
#page-home .intro__caption p span{
display: block;
font-size: inherit !important;
letter-spacing: inherit !important;
white-space: nowrap;
}
@media (max-width: 767px) {
#page-home .intro__caption{
max-width: min(300px, calc(100% - 24px)) !important;
padding: 20px 20px 20px 20px !important;
}
#page-home .intro__caption::before{
left: 20px !important;
top: 16px !important;
width: 24px !important;
}
#page-home .intro__caption p{
margin-top: 12px !important;
font-size: clamp(16px, 4.6vw, 20px) !important;
line-height: 1.75 !important;
}
#page-home .intro__caption p span{
white-space: normal;
}
}
/* v23: make mission copy one line and more compact */
#page-home .intro__caption{
max-width: min(430px, 88%) !important;
padding: 22px 24px 22px 24px !important;
}
#page-home .intro__caption::before{
left: 24px !important;
top: 16px !important;
width: 24px !important;
}
#page-home .intro__caption p{
margin-top: 12px !important;
font-size: clamp(15px, 1.22vw, 18px) !important;
line-height: 1.7 !important;
letter-spacing: .03em !important;
}
#page-home .intro__caption p span{
display: block;
white-space: nowrap;
}
@media (max-width: 767px) {
#page-home .intro__caption{
max-width: min(320px, calc(100% - 20px)) !important;
padding: 18px 18px 18px 18px !important;
}
#page-home .intro__caption::before{
left: 18px !important;
top: 14px !important;
width: 22px !important;
}
#page-home .intro__caption p{
margin-top: 10px !important;
font-size: clamp(14px, 3.8vw, 16px) !important;
line-height: 1.65 !important;
}
#page-home .intro__caption p span{
white-space: normal;
}
}
/* v24: philosophy photo only — remove mission copy */
#page-home .intro__visual{
width: min(860px, calc(100% - (var(--page-gutter) * 2))) !important;
max-width: 860px !important;
height: clamp(280px, 30vw, 390px) !important;
margin-inline: auto !important;
overflow: hidden !important;
}
#page-home .intro__photo{ inset: -2% !important; }
@media (max-width: 1180px) {
#page-home .intro__visual{
width: min(760px, calc(100% - var(--page-gutter))) !important;
height: clamp(280px, 42vw, 360px) !important;
}
}
@media (max-width: 767px) {
#page-home .intro__visual{
width: 100% !important;
max-width: none !important;
height: clamp(260px, 68vw, 330px) !important;
}
}
/* v25: add space below the philosophy photo */
#page-home .intro__visual{
margin-bottom: clamp(28px, 4vw, 54px) !important;
}
@media (max-width: 767px) {
#page-home .intro__visual{
margin-bottom: 24px !important;
}
}
/* v26: reduce service card title size by about 3px */
#page-home .service-card h3{
font-size: clamp(20px, 1.8vw, 27px) !important;
}
@media (max-width: 767px) {
#page-home .service-card h3{
font-size: clamp(19px, 5.8vw, 24px) !important;
}
}
/* v27: redesign service-note section */
#page-home .service-note{
margin-top: 42px !important;
padding: 28px 30px !important;
border: 1px solid rgba(58,82,63,.16) !important;
background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.2)) !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) auto !important;
align-items: center !important;
gap: 28px !important;
}
#page-home .service-note__text{min-width:0;}
#page-home .service-note__eyebrow{
display:inline-block;
margin:0 0 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
color: var(--leaf);
}
#page-home .service-note p{
margin:0 !important;
font-family: var(--serif) !important;
font-size: clamp(15px, 1.06vw, 18px) !important;
line-height: 1.9 !important;
letter-spacing: .04em !important;
color: var(--ink) !important;
}
#page-home .service-note__button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap: 14px !important;
min-width: 230px !important;
padding: 16px 22px !important;
border: 1px solid rgba(27,49,32,.22) !important;
background: rgba(255,255,255,.65) !important;
box-shadow: 0 10px 24px rgba(25,39,29,.06) !important;
text-decoration: none !important;
}
#page-home .service-note__label{
font-size: clamp(11px, .78vw, 13px);
font-weight: 600;
letter-spacing: .14em;
color: var(--ink);
}
#page-home .service-note__icon{
width: 26px;
height: 26px;
display:grid;
place-items:center;
border-radius:50%;
background: var(--deep);
color: var(--white);
font-size: 12px;
line-height: 1;
flex: 0 0 26px;
}
#page-home .service-note__button:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.9) !important;
}
@media (max-width: 767px){
#page-home .service-note{
grid-template-columns: 1fr !important;
gap: 18px !important;
padding: 22px 18px !important;
}
#page-home .service-note__eyebrow{
margin-bottom: 8px;
font-size: 9px;
}
#page-home .service-note p{
font-size: 14px !important;
line-height: 1.8 !important;
}
#page-home .service-note__button{
width: 100% !important;
min-width: 0 !important;
justify-content: space-between !important;
padding: 15px 18px !important;
}
}
/* v28: change consultation button icon to a normal horizontal arrow */
#page-home .service-note__button{
gap: 12px !important;
}
#page-home .service-note__icon{
width: auto !important;
height: auto !important;
display: inline-block !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ink) !important;
font-size: 14px !important;
line-height: 1 !important;
flex: 0 0 auto !important;
}
/* v29: make HERO arrows plain horizontal arrows */
#page-home .hero__actions .button{
gap: 12px !important;
}
#page-home .hero__actions .button span{
width: auto !important;
height: auto !important;
display: inline-block !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: currentColor !important;
font-family: inherit !important;
font-size: 16px !important;
line-height: 1 !important;
flex: 0 0 auto !important;
}
#page-home .hero__actions .button:hover span{
transform: translateX(3px) !important;
}
/* v30: make promise section same style as the right-side photo-only section */
#page-home .promise{
min-height: auto !important;
display: block !important;
padding: 0 0 var(--section-space) !important;
background: var(--paper) !important;
color: inherit !important;
overflow: visible !important;
}
#page-home .promise__frame{
position: relative !important;
width: min(860px, calc(100% - (var(--page-gutter) * 2))) !important;
max-width: 860px !important;
height: clamp(280px, 30vw, 390px) !important;
margin: 0 auto !important;
overflow: hidden !important;
}
#page-home .promise__image{
position: absolute !important;
inset: -2% !important;
background: var(--img-160bb934) center/cover !important;
}
@media (max-width: 1180px){
#page-home .promise{
padding: 0 0 var(--section-space) !important;
}
#page-home .promise__frame{
width: min(760px, calc(100% - var(--page-gutter))) !important;
height: clamp(280px, 42vw, 360px) !important;
}
}
@media (max-width: 767px){
#page-home .promise{
padding: 0 0 var(--section-space) !important;
}
#page-home .promise__frame{
width: 100% !important;
max-width: none !important;
height: clamp(260px, 68vw, 330px) !important;
}
}
/* v31: remove redundant promise photo and refine section transition */
#page-home .services + .works{
border-top: 1px solid rgba(58,82,63,.10);
padding-top: clamp(82px, 8vw, 120px) !important;
}
@media (max-width: 767px) {
#page-home .services + .works{
padding-top: 68px !important;
}
}
/* v32: remove background LANDSCAPE text behind works section */
#page-home .works::before{
content: none !important;
display: none !important;
}
/* v33: unify all arrows to simple horizontal arrows */
#page-home .text-link span, #page-home .outline-button span, #page-home .service-note__icon, #page-home .hero__actions .button span{
font-family: inherit !important;
}
/* Flow arrows between steps: simple horizontal arrows, no circle */
#page-home .flow-list li:not(:last-child)::after{
content: "→" !important;
width: auto !important;
height: auto !important;
display: block !important;
background: transparent !important;
border-radius: 0 !important;
color: var(--leaf) !important;
font-size: 18px !important;
line-height: 1 !important;
right: -16px !important;
top: 34px !important;
place-items: initial !important;
}
@media (max-width: 767px) {
#page-home .flow-list li:not(:last-child)::after{
right: 50% !important;
top: auto !important;
bottom: -18px !important;
transform: translateX(50%) rotate(90deg) !important;
font-size: 18px !important;
}
}
/* v34: refine works photo placement with a more editorial layout */
#page-home .works-gallery{
width: min(1180px, calc(100% - (var(--page-gutter) * 2))) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
grid-auto-rows: 70px !important;
gap: 18px !important;
}
#page-home .work, #page-home .work--large, #page-home .work--portrait{
grid-column: auto !important;
grid-row: auto !important;
min-height: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
#page-home .works-gallery .work:nth-child(1){
grid-column: 1 / 8 !important;
grid-row: 1 / 5 !important;
}
#page-home .works-gallery .work:nth-child(2){
grid-column: 8 / 13 !important;
grid-row: 1 / 3 !important;
}
#page-home .works-gallery .work:nth-child(3){
grid-column: 8 / 13 !important;
grid-row: 3 / 5 !important;
}
#page-home .works-gallery .work:nth-child(4){
grid-column: 1 / 5 !important;
grid-row: 5 / 8 !important;
}
#page-home .works-gallery .work:nth-child(5){
grid-column: 5 / 13 !important;
grid-row: 5 / 8 !important;
}
/* Slightly cleaner caption placement for the new layout */
#page-home .work figcaption{
left: 22px !important;
bottom: 20px !important;
}
#page-home .work figcaption b{
font-size: 17px !important;
}
/* Tablet */
@media (max-width: 1100px){
#page-home .works-gallery{
width: calc(100% - var(--page-gutter)) !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows: clamp(170px, 24vw, 230px) !important;
gap: 16px !important;
}
#page-home .works-gallery .work:nth-child(1){
grid-column: 1 / 3 !important;
grid-row: span 2 !important;
}
#page-home .works-gallery .work:nth-child(2){
grid-column: 1 / 2 !important;
grid-row: span 1 !important;
}
#page-home .works-gallery .work:nth-child(3){
grid-column: 2 / 3 !important;
grid-row: span 1 !important;
}
#page-home .works-gallery .work:nth-child(4){
grid-column: 1 / 2 !important;
grid-row: span 2 !important;
}
#page-home .works-gallery .work:nth-child(5){
grid-column: 2 / 3 !important;
grid-row: span 2 !important;
}
}
/* Mobile */
@media (max-width: 767px){
#page-home .works-gallery{
width: 100% !important;
grid-template-columns: 1fr !important;
grid-auto-rows: auto !important;
gap: 12px !important;
}
#page-home .works-gallery .work:nth-child(1), #page-home .works-gallery .work:nth-child(2), #page-home .works-gallery .work:nth-child(3), #page-home .works-gallery .work:nth-child(4), #page-home .works-gallery .work:nth-child(5){
grid-column: auto !important;
grid-row: auto !important;
min-height: 240px !important;
}
#page-home .work figcaption{
left: 18px !important;
bottom: 16px !important;
}
#page-home .work figcaption b{
font-size: 16px !important;
}
}
/* v35: redesign flow section with refined card layout and matched 2-color scheme */
#page-home .flow{
padding: var(--section-space) 0 !important;
background: var(--cream) !important; /* same family as services */
}
#page-home .flow__head{
margin-bottom: clamp(34px, 5vw, 56px) !important;
}
#page-home .flow-list{
list-style: none !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
border: 0 !important;
background: transparent !important;
}
#page-home .flow-list li{
position: relative !important;
min-height: 290px !important;
padding: 28px 28px 30px !important;
border: 1px solid var(--line) !important;
background: var(--paper) !important; /* same family as works */
box-shadow: 0 10px 26px rgba(16, 35, 22, .04) !important;
}
#page-home .flow-list li:nth-child(2), #page-home .flow-list li:nth-child(4){
transform: translateY(12px);
}
#page-home .flow-list li::before{
content: "" !important;
position: absolute !important;
left: 28px !important;
top: 24px !important;
width: 34px !important;
height: 1px !important;
background: rgba(57, 80, 63, .28) !important;
}
#page-home .flow-list li:not(:last-child)::after{
content: "→" !important;
position: absolute !important;
top: 26px !important;
right: -14px !important;
z-index: 3 !important;
width: 28px !important;
height: 28px !important;
display: grid !important;
place-items: center !important;
background: var(--cream) !important;
border: 1px solid rgba(57, 80, 63, .12) !important;
border-radius: 999px !important;
color: var(--leaf) !important;
font-size: 13px !important;
line-height: 1 !important;
}
#page-home .flow-list span{
display: inline-block !important;
margin-top: 20px !important;
font-family: Georgia, serif !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: .18em !important;
color: var(--leaf) !important;
}
#page-home .flow-list h3{
margin: 54px 0 16px !important;
font-family: var(--serif) !important;
font-size: clamp(22px, 1.6vw, 27px) !important;
font-weight: 400 !important;
letter-spacing: .05em !important;
line-height: 1.5 !important;
}
#page-home .flow-list p{
margin: 0 !important;
font-size: clamp(12.5px, .88vw, 14px) !important;
line-height: 2 !important;
color: rgba(21, 39, 27, .88) !important;
}
/* Tablet */
@media (max-width: 1100px){
#page-home .flow-list{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
#page-home .flow-list li{
min-height: 250px !important;
padding: 26px 24px 28px !important;
transform: none !important;
}
#page-home .flow-list li:nth-child(2n)::after{
display: none !important;
}
#page-home .flow-list li:nth-child(1)::after, #page-home .flow-list li:nth-child(3)::after{
display: grid !important;
}
#page-home .flow-list li::before{
left: 24px !important;
top: 22px !important;
}
#page-home .flow-list span{
margin-top: 18px !important;
}
#page-home .flow-list h3{
margin-top: 44px !important;
font-size: clamp(21px, 2.6vw, 25px) !important;
}
}
/* Mobile */
@media (max-width: 767px){
#page-home .flow{
padding: var(--section-space) 0 !important;
}
#page-home .flow-list{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
#page-home .flow-list li{
min-height: auto !important;
padding: 22px 18px 24px !important;
box-shadow: none !important;
transform: none !important;
}
#page-home .flow-list li::before{
left: 18px !important;
top: 18px !important;
width: 28px !important;
}
#page-home .flow-list li::after{
display: none !important;
}
#page-home .flow-list span{
margin-top: 14px !important;
font-size: 9px !important;
}
#page-home .flow-list h3{
margin: 20px 0 10px !important;
font-size: clamp(20px, 6vw, 24px) !important;
line-height: 1.45 !important;
}
#page-home .flow-list p{
font-size: clamp(13px, 3.55vw, 14.5px) !important;
line-height: 1.85 !important;
}
}
/* v36: refine flow arrows and keep "現地確認・ヒアリング" on one line */
#page-home .flow-list li:not(:last-child)::after{
content: "→" !important;
width: 34px !important;
height: 26px !important;
right: -18px !important;
top: 28px !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
background: linear-gradient(180deg, rgba(250,249,245,.96), rgba(241,238,229,.96)) !important;
border: 1px solid rgba(57,80,63,.16) !important;
box-shadow: 0 6px 16px rgba(16,35,22,.06) !important;
color: var(--leaf) !important;
font-size: 13px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
/* thinner, more refined card headings */
#page-home .flow-list h3{
white-space: nowrap !important;
font-size: clamp(20px, 1.45vw, 25px) !important;
letter-spacing: .03em !important;
}
/* specifically ensure step 02 fits in one line cleanly */
#page-home .flow-list li:nth-child(2) h3{
font-size: clamp(19px, 1.32vw, 23px) !important;
letter-spacing: .02em !important;
}
@media (max-width: 1100px){
#page-home .flow-list li:not(:last-child)::after{
right: -16px !important;
top: 24px !important;
}
#page-home .flow-list h3{
font-size: clamp(19px, 2.25vw, 24px) !important;
}
#page-home .flow-list li:nth-child(2) h3{
font-size: clamp(18px, 2.05vw, 22px) !important;
}
}
@media (max-width: 767px){
#page-home .flow-list h3{
white-space: normal !important;
font-size: clamp(20px, 6vw, 24px) !important;
}
}
/* v37: place flow arrows outside the boxes, without capsule frame */
#page-home .flow-list li:not(:last-child)::after{
width: auto !important;
height: auto !important;
right: -24px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: block !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: rgba(57,80,63,.72) !important;
font-size: 18px !important;
line-height: 1 !important;
}
@media (max-width: 1100px) {
#page-home .flow-list li:not(:last-child)::after{
right: -22px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 17px !important;
}
}
@media (max-width: 767px) {
#page-home .flow-list li:not(:last-child)::after{
display: none !important;
}
}
/* v38: remove all flow arrows */
#page-home .flow-list li::after{
content: none !important;
display: none !important;
}
/* v39: force-remove all arrows only in flow section */
#page-home .flow-list li::after, #page-home .flow-list li:not(:last-child)::after, #page-home .flow-list li:nth-child(1)::after, #page-home .flow-list li:nth-child(2)::after, #page-home .flow-list li:nth-child(3)::after, #page-home .flow-list li:nth-child(4)::after{
content: none !important;
display: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* v40: alternate background color for section 05 (company) */
#page-home .company{
background: var(--paper) !important;
}
/* v41: make company history more compact and use normal font for year numbers */
#page-home .company__history{
max-width: 760px !important;
padding-top: 0 !important;
}
#page-home .history-row{
grid-template-columns: 88px 1fr !important;
gap: 22px !important;
padding: 13px 0 !important;
}
#page-home .history-row b{
font-family: var(--sans) !important;
font-size: 22px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
color: var(--green) !important;
}
#page-home .history-row p{
font-size: 12.5px !important;
line-height: 1.8 !important;
}
@media (max-width: 767px) {
#page-home .history-row{
grid-template-columns: 72px 1fr !important;
gap: 14px !important;
padding: 11px 0 !important;
}
#page-home .history-row b{
font-size: 20px !important;
}
#page-home .history-row p{
font-size: 12.5px !important;
line-height: 1.75 !important;
}
}
/* v42: lighter year numbers and slightly larger unified company info text */
#page-home .history-row b{
font-weight: 400 !important;
font-size: 21px !important;
letter-spacing: .01em !important;
}
#page-home .company-table dd{
font-size: 13.5px !important;
line-height: 1.85 !important;
}
/* Make the company name row feel properly sized and balanced */
#page-home .company-table dl > div:first-child dd{
font-size: 13.5px !important;
font-weight: 500 !important;
}
@media (max-width: 767px) {
#page-home .history-row b{
font-weight: 400 !important;
font-size: 19px !important;
}
#page-home .company-table dd, #page-home .company-table dl > div:first-child dd{
font-size: 13.5px !important;
}
}
/* v43: add 年 to history years with subtle styling */
#page-home .history-year-suffix{
margin-left: 2px;
font-size: .62em;
font-weight: 300;
letter-spacing: 0;
vertical-align: .06em;
color: inherit;
}
/* v44: soften WORKPLACE block to a light green palette */
#page-home .company-points{
background: #e3ede2 !important;
color: #183024 !important;
border: 1px solid rgba(76, 112, 86, .18) !important;
}
#page-home .company-points .eyebrow{
color: #5e7a66 !important;
}
#page-home .company-points h3{
color: #173126 !important;
}
#page-home .company-points li{
border-top: 1px solid rgba(76, 112, 86, .20) !important;
color: rgba(24, 48, 36, .88) !important;
opacity: 1 !important;
}
#page-home .company-points li:last-child{
border-bottom: 1px solid rgba(76, 112, 86, .20) !important;
}
#page-home .company-points li::before{
color: #5e7a66 !important;
}
/* v45: refine only RECRUIT section */
#page-home .recruit{
min-height: auto !important;
grid-template-columns: minmax(0, 1fr) minmax(420px, .86fr) !important;
gap: 24px !important;
padding: clamp(26px, 3vw, 36px) !important;
background: var(--paper) !important;
color: var(--white) !important;
align-items: stretch !important;
}
#page-home .recruit__image{
min-height: clamp(420px, 42vw, 560px) !important;
border: 1px solid rgba(58,82,63,.12) !important;
background-position: center center !important;
}
#page-home .recruit__content{
position: relative !important;
padding: clamp(44px, 5vw, 62px) clamp(34px, 4vw, 54px) !important;
background: linear-gradient(180deg, #063a1c 0%, #012f16 100%) !important;
border: 1px solid rgba(255,255,255,.06) !important;
justify-content: center !important;
}
#page-home .recruit__content::before{
content: "" !important;
position: absolute !important;
left: clamp(34px, 4vw, 54px) !important;
top: 30px !important;
width: 42px !important;
height: 1px !important;
background: rgba(255,255,255,.32) !important;
}
#page-home .recruit .eyebrow{
margin: 18px 0 18px !important;
color: #c7d5c4 !important;
letter-spacing: .28em !important;
}
#page-home .recruit h2{
margin: 0 0 24px !important;
font-size: clamp(36px, 4.05vw, 58px) !important;
line-height: 1.56 !important;
letter-spacing: .08em !important;
}
#page-home .recruit__content > p:not(.eyebrow){
max-width: 510px !important;
margin: 0 0 28px !important;
font-size: clamp(13px, .96vw, 15px) !important;
line-height: 2 !important;
opacity: .9 !important;
}
#page-home .recruit__facts{
gap: 10px !important;
margin-bottom: 34px !important;
}
#page-home .recruit__facts span{
padding: 8px 12px !important;
border: 1px solid rgba(255,255,255,.22) !important;
background: rgba(255,255,255,.03) !important;
font-size: clamp(10px, .72vw, 11.5px) !important;
letter-spacing: .08em !important;
}
#page-home .recruit .outline-button{
width: min(420px, 100%) !important;
justify-content: space-between !important;
padding: 18px 20px !important;
border-color: rgba(255,255,255,.28) !important;
}
@media (max-width: 1180px){
#page-home .recruit{
grid-template-columns: 1fr !important;
padding: 24px !important;
gap: 18px !important;
}
#page-home .recruit__image{
min-height: clamp(340px, 48vw, 500px) !important;
}
#page-home .recruit__content{
padding: 46px 30px 42px !important;
}
#page-home .recruit__content::before{
left: 30px !important;
top: 24px !important;
}
}
@media (max-width: 767px){
#page-home .recruit{
padding: 18px !important;
gap: 14px !important;
}
#page-home .recruit__image{
min-height: clamp(250px, 68vw, 360px) !important;
}
#page-home .recruit__content{
padding: 38px 20px 34px !important;
}
#page-home .recruit__content::before{
left: 20px !important;
top: 20px !important;
width: 34px !important;
}
#page-home .recruit .eyebrow{
margin: 12px 0 14px !important;
}
#page-home .recruit h2{
margin-bottom: 18px !important;
font-size: clamp(30px, 8.2vw, 38px) !important;
line-height: 1.5 !important;
}
#page-home .recruit__content > p:not(.eyebrow){
margin-bottom: 22px !important;
font-size: 13.5px !important;
line-height: 1.9 !important;
}
#page-home .recruit__facts{
margin-bottom: 24px !important;
gap: 8px !important;
}
#page-home .recruit .outline-button{
width: 100% !important;
padding: 16px 18px !important;
}
}
/* v46: RECRUIT redesigned to mirror section 01 layout */
#page-home .recruit{
min-height:auto !important;
display:block !important;
padding:var(--section-space) 0 !important;
background:var(--paper) !important;
color:var(--ink) !important;
}
#page-home .recruit__inner{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(360px,.78fr) !important;
gap:clamp(48px,8vw,110px) !important;
align-items:start !important;
padding-bottom:clamp(56px,7vw,90px) !important;
}
#page-home .recruit__heading .eyebrow{
color:var(--leaf) !important;
margin:0 0 18px !important;
}
#page-home .recruit__heading h2{
margin:0 !important;
font-family:var(--serif) !important;
font-size:clamp(38px,4vw,58px) !important;
font-weight:400 !important;
line-height:1.55 !important;
letter-spacing:.08em !important;
color:var(--ink) !important;
}
#page-home .recruit__body{
padding-top:8px !important;
}
#page-home .recruit__body>p{
max-width:520px !important;
margin:0 0 26px !important;
font-size:clamp(13px,.95vw,15px) !important;
line-height:2 !important;
color:rgba(23,49,38,.84) !important;
}
#page-home .recruit__facts{
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
margin-bottom:28px !important;
}
#page-home .recruit__facts span{
padding:7px 11px !important;
border:1px solid rgba(58,82,63,.16) !important;
background:#fff !important;
color:var(--ink) !important;
font-size:clamp(10px,.7vw,12px) !important;
letter-spacing:.06em !important;
}
#page-home .recruit .outline-button{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
width:min(390px,100%) !important;
max-width:none !important;
padding:16px 18px !important;
border:1px solid rgba(58,82,63,.22) !important;
color:var(--ink) !important;
background:transparent !important;
}
#page-home .recruit .outline-button:hover{
background:rgba(58,82,63,.06) !important;
color:var(--ink) !important;
}
#page-home .recruit__visual{
width:min(760px,calc(100% - (var(--page-gutter) * 2))) !important;
height:clamp(260px,28vw,350px) !important;
margin:0 auto !important;
overflow:hidden !important;
}
#page-home .recruit__image{
width:100% !important;
height:100% !important;
min-height:0 !important;
background:linear-gradient(rgba(16,39,25,.04),rgba(16,39,25,.10)),var(--img-e9d2c9f1) center/cover !important;
border:1px solid rgba(58,82,63,.12) !important;
}
@media(max-width:1180px){
#page-home .recruit__inner{
grid-template-columns:1fr !important;
gap:34px !important;
padding-bottom:52px !important;
}
#page-home .recruit__body{padding-top:0 !important;max-width:760px !important;}
#page-home .recruit__visual{
width:min(680px,calc(100% - var(--page-gutter))) !important;
height:clamp(250px,42vw,330px) !important;
}
}
@media(max-width:767px){
#page-home .recruit{
padding:var(--section-space) 0 !important;
}
#page-home .recruit__inner{
gap:26px !important;
padding-bottom:38px !important;
}
#page-home .recruit__heading h2{
font-size:clamp(29px,8.2vw,38px) !important;
line-height:1.5 !important;
}
#page-home .recruit__body>p{
font-size:13.5px !important;
line-height:1.9 !important;
}
#page-home .recruit__facts{margin-bottom:22px !important;}
#page-home .recruit .outline-button{width:100% !important;}
#page-home .recruit__visual{
width:100% !important;
height:clamp(220px,62vw,290px) !important;
}
}
/* v47: change background from RECRUIT heading onward */
#page-home .recruit{
background: var(--cream) !important;
}
/* v48: make recruit fact labels darker and slightly clearer */
#page-home .recruit__facts span{
color: #173126 !important;
font-weight: 600 !important;
border-color: rgba(58, 82, 63, .22) !important;
}
/* v49: refine CONTACT section only */
#page-home .contact{
padding: 15vh 0 !important;
background: linear-gradient(180deg, #eef2ea 0%, #e8eee6 100%) !important;
}
#page-home .contact__inner{
position: relative;
grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr) !important;
gap: clamp(44px, 7vw, 76px) !important;
align-items: center !important;
}
#page-home .contact__heading{
padding: clamp(6px, 1vw, 10px) 0;
}
#page-home .contact h2{
font-size: clamp(32px, 3.8vw, 55px) !important;
line-height: 1.5 !important;
letter-spacing: .07em !important;
}
#page-home .contact h2 span{
display: block;
white-space: nowrap;
}
#page-home .contact__heading > p:last-child{
max-width: 540px !important;
margin-top: 22px !important;
font-size: 12.5px !important;
line-height: 2.05 !important;
color: rgba(21,39,27,.82) !important;
}
#page-home .contact__actions{
gap: 16px !important;
}
#page-home .contact-card{
padding: 31px 32px !important;
background: rgba(255,255,255,.52) !important;
border: 1px solid rgba(58,82,63,.16) !important;
box-shadow: 0 10px 26px rgba(17,34,22,.04) !important;
}
#page-home .contact-card:hover{
transform: translateY(-3px) !important;
background: rgba(255,255,255,.7) !important;
}
#page-home .contact-card span{
color: #5f7565 !important;
letter-spacing: .26em !important;
}
#page-home .contact-card b{
margin: 10px 0 6px !important;
font-size: clamp(23px, 2.5vw, 35px) !important;
letter-spacing: .04em !important;
}
#page-home .contact-card small{
font-size: 9.5px !important;
color: rgba(21,39,27,.68) !important;
opacity: 1 !important;
}
#page-home .contact-card--dark{
background: linear-gradient(180deg, #0c4523 0%, #0a361d 100%) !important;
color: var(--white) !important;
border-color: rgba(12,69,35,.9) !important;
box-shadow: 0 14px 30px rgba(8,29,17,.10) !important;
}
#page-home .contact-card--dark:hover{
background: linear-gradient(180deg, #11502a 0%, #0c3c20 100%) !important;
}
#page-home .contact-card--dark span{
color: #c7d5c4 !important;
}
#page-home .contact-card--dark small{
color: rgba(255,255,255,.72) !important;
}
@media (max-width: 899px) {
#page-home .contact__inner{
grid-template-columns: 1fr !important;
gap: 40px !important;
align-items: start !important;
}
}
@media (max-width: 767px) {
#page-home .contact{
padding: var(--section-space) 0 !important;
}
#page-home .contact h2{
font-size: clamp(29px, 8.6vw, 40px) !important;
line-height: 1.5 !important;
}
#page-home .contact h2 span{
white-space: normal;
}
#page-home .contact__heading > p:last-child{
margin-top: 18px !important;
font-size: 13px !important;
}
#page-home .contact__actions{
gap: 12px !important;
}
#page-home .contact-card{
padding: 24px 20px !important;
box-shadow: none !important;
}
}
/* v50: make CONTACT heading fit cleanly and change background color */
#page-home .contact{
background: linear-gradient(180deg, #f4f1e9 0%, #efece3 100%) !important;
}
#page-home .contact__heading{
min-width: 0 !important;
}
#page-home .contact h2{
max-width: 650px !important;
font-size: clamp(29px, 3.15vw, 46px) !important;
line-height: 1.48 !important;
letter-spacing: .055em !important;
}
#page-home .contact h2 span{
display: block !important;
white-space: nowrap !important;
}
@media (max-width: 1180px) {
#page-home .contact h2{
font-size: clamp(28px, 4.2vw, 42px) !important;
}
}
@media (max-width: 767px) {
#page-home .contact{
background: #f4f1e9 !important;
}
#page-home .contact h2{
max-width: 100% !important;
font-size: clamp(27px, 7.8vw, 36px) !important;
line-height: 1.48 !important;
letter-spacing: .04em !important;
}
#page-home .contact h2 span{
white-space: normal !important;
}
}
/* v51: unified, borderless CONTACT actions */
#page-home .contact__actions{
gap: 0 !important;
border-top: 1px solid rgba(58,82,63,.22) !important;
}
#page-home .contact-card, #page-home .contact-card--dark{
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-height: 150px !important;
padding: 26px 54px 26px 2px !important;
background: transparent !important;
color: #173126 !important;
border: 0 !important;
border-bottom: 1px solid rgba(58,82,63,.22) !important;
box-shadow: none !important;
transform: none !important;
}
#page-home .contact-card::after, #page-home .contact-card--dark::after{
content: "→" !important;
position: absolute !important;
right: 6px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 18px !important;
line-height: 1 !important;
color: rgba(23,49,38,.72) !important;
transition: transform .25s ease, color .25s ease !important;
}
#page-home .contact-card:hover, #page-home .contact-card--dark:hover{
background: transparent !important;
transform: none !important;
}
#page-home .contact-card:hover::after, #page-home .contact-card--dark:hover::after{
transform: translate(4px,-50%) !important;
color: #173126 !important;
}
#page-home .contact-card span, #page-home .contact-card--dark span{
color: #607267 !important;
font-size: 8px !important;
font-weight: 700 !important;
letter-spacing: .28em !important;
}
#page-home .contact-card b, #page-home .contact-card--dark b{
margin: 10px 0 5px !important;
color: #173126 !important;
font-family: var(--serif) !important;
font-size: clamp(25px, 2.4vw, 36px) !important;
font-weight: 400 !important;
letter-spacing: .04em !important;
}
#page-home .contact-card small, #page-home .contact-card--dark small{
color: rgba(23,49,38,.62) !important;
font-size: 10px !important;
line-height: 1.6 !important;
opacity: 1 !important;
}
@media (max-width: 767px) {
#page-home .contact-card, #page-home .contact-card--dark{
min-height: 126px !important;
padding: 22px 44px 22px 0 !important;
}
#page-home .contact-card::after, #page-home .contact-card--dark::after{
right: 2px !important;
font-size: 16px !important;
}
#page-home .contact-card b, #page-home .contact-card--dark b{
font-size: clamp(22px, 6.5vw, 29px) !important;
}
}
/* v52: clear two-tone CONTACT background */
#page-home .contact{
position: relative !important;
background: linear-gradient(
90deg,
#f3efe6 0%,
#f3efe6 50%,
#e4ece3 50%,
#e4ece3 100%
) !important;
}
/* Keep content readable over the two-tone background */
#page-home .contact__inner{
position: relative !important;
z-index: 1 !important;
}
/* Make the dividing line subtle but intentional */
#page-home .contact::after{
content: "" !important;
position: absolute !important;
top: clamp(52px, 6vw, 88px) !important;
bottom: clamp(52px, 6vw, 88px) !important;
left: 50% !important;
width: 1px !important;
background: rgba(58,82,63,.10) !important;
pointer-events: none !important;
}
@media (max-width: 899px) {
#page-home .contact{
background: linear-gradient(
180deg,
#f3efe6 0%,
#f3efe6 48%,
#e4ece3 48%,
#e4ece3 100%
) !important;
}
#page-home .contact::after{
top: 48% !important;
bottom: auto !important;
left: var(--page-gutter) !important;
right: var(--page-gutter) !important;
width: auto !important;
height: 1px !important;
}
}
/* v53: CONTACT uses one full-section background; keep site-wide two-color alternation */
#page-home .contact{
background: var(--paper) !important;
}
#page-home .contact::before, #page-home .contact::after{
content: none !important;
display: none !important;
}
#page-home .contact__inner{
position: relative !important;
z-index: 1 !important;
}
/* v54: compact RECRUIT spacing only */
#page-home .recruit{
padding: clamp(54px, 6vw, 86px) 0 !important;
}
#page-home .recruit__inner{
gap: clamp(30px, 5vw, 66px) !important;
padding-bottom: clamp(30px, 4vw, 48px) !important;
}
#page-home .recruit__heading .eyebrow{
margin-bottom: 12px !important;
}
#page-home .recruit__body{
padding-top: 2px !important;
}
#page-home .recruit__body > p{
margin-bottom: 20px !important;
}
#page-home .recruit__facts{
margin-bottom: 22px !important;
}
@media (max-width: 1180px) {
#page-home .recruit{
padding: 58px 0 !important;
}
#page-home .recruit__inner{
gap: 24px !important;
padding-bottom: 34px !important;
}
}
@media (max-width: 767px) {
#page-home .recruit{
padding: 46px 0 !important;
}
#page-home .recruit__inner{
gap: 20px !important;
padding-bottom: 28px !important;
}
}
/* v55: unify major section titles at 25px */
#page-home .section-heading h2, #page-home .recruit h2, #page-home .contact h2{
font-size: 25px !important;
line-height: 1.55 !important;
}
@media (max-width: 767px) {
#page-home .section-heading h2, #page-home .recruit h2, #page-home .contact h2{
font-size: 25px !important;
line-height: 1.55 !important;
}
}
/* v56: unify section main headings at 40px */
#page-home .section-heading h2, #page-home .recruit h2, #page-home .contact h2{
font-size: 40px !important;
}
@media (max-width: 767px) {
#page-home .section-heading h2, #page-home .recruit h2, #page-home .contact h2{
font-size: 40px !important;
}
}
/* v57: unify company information text at 12.5px */
#page-home .company-table dt, #page-home .company-table dd, #page-home .company-table dd a{
font-size: 12.5px !important;
}
/* v58: company information 13px on desktop, responsive on tablet/mobile */
#page-home .company-table dt, #page-home .company-table dd, #page-home .company-table dd a{
font-size: 13px !important;
line-height: 1.9 !important;
}
@media (max-width: 1024px) {
#page-home .company-table dt, #page-home .company-table dd, #page-home .company-table dd a{
font-size: 12.5px !important;
line-height: 1.85 !important;
}
}
@media (max-width: 767px) {
#page-home .company-table dt, #page-home .company-table dd, #page-home .company-table dd a{
font-size: 12px !important;
line-height: 1.8 !important;
}
}
/* v59: refresh footer color to a soft green palette */
#page-home .site-footer{
background: #dfe9df !important;
color: #173126 !important;
}
#page-home .site-footer .brand__text b, #page-home .site-footer .brand__text small, #page-home .site-footer__links a, #page-home .site-footer__bottom{
color: #173126 !important;
}
#page-home .site-footer__bottom{
border-top-color: rgba(58, 82, 63, .20) !important;
opacity: .78 !important;
}
#page-home .site-footer__links a{
opacity: .88;
}
#page-home .site-footer__links a:hover{
opacity: 1;
}
/* v60: align footer with the site's two-color background system */
#page-home .site-footer{
background: var(--cream) !important;
color: var(--ink) !important;
border-top: 1px solid rgba(58, 82, 63, .12) !important;
}
#page-home .site-footer .brand__text b, #page-home .site-footer .brand__text small, #page-home .site-footer__links a, #page-home .site-footer__bottom, #page-home .site-footer address, #page-home .site-footer p{
color: var(--ink) !important;
}
#page-home .site-footer__bottom{
border-top-color: rgba(58, 82, 63, .14) !important;
opacity: .8 !important;
}
#page-home .site-footer__links a{
opacity: .88 !important;
}
#page-home .site-footer__links a:hover{
opacity: 1 !important;
}
/* v61: move footer address under logo and center copyright */
#page-home .site-footer__brand-group{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 14px !important;
max-width: 420px !important;
}
#page-home .site-footer__address{
margin: 0 !important;
font-size: 12px !important;
line-height: 1.85 !important;
color: var(--ink) !important;
}
#page-home .site-footer__bottom{
justify-content: center !important;
text-align: center !important;
}
#page-home .site-footer__bottom p{
width: 100% !important;
text-align: center !important;
}
@media (max-width: 767px) {
#page-home .site-footer__brand-group{
gap: 10px !important;
}
#page-home .site-footer__address{
font-size: 11.5px !important;
line-height: 1.8 !important;
}
}
/* v62: replace header/footer logo with uploaded horizontal logo */
#page-home .site-header .brand__text, #page-home .site-footer .brand__text{
display: none !important;
}
#page-home .site-header .brand, #page-home .site-footer .brand{
gap: 0 !important;
}
#page-home .site-header .brand__logo{
width: clamp(220px, 21vw, 330px) !important;
height: auto !important;
max-width: 100% !important;
flex-basis: auto !important;
}
#page-home .site-footer .brand__logo{
width: clamp(220px, 24vw, 320px) !important;
height: auto !important;
max-width: 100% !important;
flex-basis: auto !important;
}
@media (max-width: 1024px) {
#page-home .site-header .brand__logo{
width: clamp(190px, 28vw, 260px) !important;
}
#page-home .site-footer .brand__logo{
width: clamp(190px, 30vw, 250px) !important;
}
}
@media (max-width: 767px) {
#page-home .site-header .brand__logo{
width: clamp(150px, 42vw, 210px) !important;
}
#page-home .site-footer .brand__logo{
width: clamp(170px, 48vw, 220px) !important;
}
}
/* v64: align footer address start with visible logo start */
#page-home .site-footer__address{
margin-left: 18px !important;
}
@media (max-width: 767px) {
#page-home .site-footer__address{
margin-left: 14px !important;
}
}
/* v65: unify footer links and address to 13.5px */
#page-home .site-footer__links a, #page-home .site-footer__address{
font-size: 13.5px !important;
line-height: 1.85 !important;
}
@media (max-width: 1024px) {
#page-home .site-footer__links a, #page-home .site-footer__address{
font-size: 13.5px !important;
}
}
@media (max-width: 767px) {
#page-home .site-footer__links a, #page-home .site-footer__address{
font-size: 13.5px !important;
line-height: 1.8 !important;
}
}
/* v66: unify header menu text to 13.5px on desktop */
#page-home .desktop-nav, #page-home .desktop-nav > a, #page-home .desktop-nav__contact{
font-size: 13.5px !important;
}
/* Keep tablet/mobile navigation comfortably readable */
@media (max-width: 1180px) {
#page-home .global-nav__inner > a{
font-size: clamp(22px, 3.1vw, 30px) !important;
}
}
@media (max-width: 767px) {
#page-home .global-nav__inner > a{
font-size: clamp(21px, 6vw, 27px) !important;
}
}
/* v67: update header menu contents to match provided reference */
#page-home .desktop-nav{
gap: clamp(12px, 1.2vw, 20px) !important;
}
#page-home .desktop-nav > a, #page-home .desktop-nav__contact{
white-space: nowrap !important;
}
@media (max-width: 1320px) {
#page-home .desktop-nav{
gap: clamp(10px, 1vw, 16px) !important;
}
#page-home .desktop-nav, #page-home .desktop-nav > a, #page-home .desktop-nav__contact{
font-size: 12.5px !important;
}
}
/* v68: compact header while preserving logo/menu readability */
@media (min-width: 1181px) {
#page-home .site-header{
min-height: 62px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
padding-inline: clamp(24px, 2.5vw, 40px) !important;
}
#page-home .site-header.is-scrolled{
min-height: 58px !important;
}
#page-home .site-header .brand__logo{
width: clamp(180px, 15vw, 220px) !important;
height: auto !important;
}
#page-home .desktop-nav > a{
min-height: 34px !important;
padding-block: 6px !important;
}
}
@media (min-width: 768px) and (max-width: 1180px) {
#page-home .site-header{
min-height: 62px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
#page-home .site-header.is-scrolled{
min-height: 58px !important;
}
#page-home .site-header .brand__logo{
width: clamp(170px, 25vw, 210px) !important;
height: auto !important;
}
}
@media (max-width: 767px) {
#page-home .site-header{
min-height: 58px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
#page-home .site-header.is-scrolled{
min-height: 54px !important;
}
#page-home .site-header .brand__logo{
width: clamp(145px, 41vw, 180px) !important;
height: auto !important;
}
#page-home .menu-button{
height: 42px !important;
}
}
/* v69: slightly taller header than v68 */
@media (min-width: 1181px) {
#page-home .site-header{
min-height: 70px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
#page-home .site-header.is-scrolled{
min-height: 64px !important;
}
}
@media (min-width: 768px) and (max-width: 1180px) {
#page-home .site-header{
min-height: 68px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
#page-home .site-header.is-scrolled{
min-height: 62px !important;
}
}
@media (max-width: 767px) {
#page-home .site-header{
min-height: 64px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
#page-home .site-header.is-scrolled{
min-height: 58px !important;
}
}
/* v73: slightly taller header */
@media (min-width: 1181px) {
#page-home .site-header{
min-height: 76px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
#page-home .site-header.is-scrolled{
min-height: 70px !important;
}
}
@media (min-width: 768px) and (max-width: 1180px) {
#page-home .site-header{
min-height: 72px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
#page-home .site-header.is-scrolled{
min-height: 66px !important;
}
}
@media (max-width: 767px) {
#page-home .site-header{
min-height: 68px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
#page-home .site-header.is-scrolled{
min-height: 62px !important;
}
}
/* ===== works.html ===== */
#page-works{--deep:#0e2818;--green:#224630;--cream:#f0eee5;--paper:#f8f7f2;--ink:#17241c;--leaf:#71806d;--line:rgba(34,70,48,.16);--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;--sans:"Noto Sans JP","Yu Gothic",sans-serif;--content:min(1180px,calc(100vw - 64px));}
#page-works *{box-sizing:border-box}
#page-works{scroll-behavior:smooth}
#page-works{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
#page-works a{color:inherit;text-decoration:none}
#page-works .site-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:70px;padding:0 30px;display:flex;align-items:center;background:rgba(248,247,242,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(34,70,48,.10)}
#page-works .brand{display:flex;align-items:center}
#page-works .brand__logo{width:clamp(190px,18vw,285px);height:auto}
#page-works .desktop-nav{margin-left:auto;display:flex;gap:clamp(10px,1.15vw,18px);font-size:13.5px;white-space:nowrap}
#page-works .desktop-nav a{position:relative;padding:12px 0}
#page-works .desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--green);transition:.25s}
#page-works .desktop-nav a:hover::after, #page-works .desktop-nav a.current::after{right:0}
#page-works .menu-button{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;position:relative}
#page-works .menu-button:before, #page-works .menu-button:after{content:"";position:absolute;left:8px;right:8px;height:1px;background:var(--ink)}
#page-works .menu-button:before{top:16px}
#page-works .menu-button:after{top:27px}
#page-works .mobile-nav{display:none;position:fixed;inset:70px 0 0;z-index:999;background:rgba(14,40,24,.98);color:white;padding:44px 28px}
#page-works .mobile-nav.open{display:flex;flex-direction:column}
#page-works .mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--serif);font-size:24px}
#page-works .wrap{width:var(--content);margin:auto}
#page-works .hero{padding:150px 0 76px;background:var(--cream)}
#page-works .breadcrumb{font-size:11px;color:var(--leaf);margin:0 0 44px}
#page-works .hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;align-items:end}
#page-works .eyebrow{font-size:10px;font-weight:700;letter-spacing:.26em;color:var(--leaf);margin:0 0 14px}
#page-works h1{font-family:var(--serif);font-size:45px;font-weight:400;letter-spacing:.07em;margin:0}
#page-works .hero-copy{font-size:14px;line-height:2.1;margin:0;color:rgba(23,36,28,.78)}
#page-works .summary{padding:58px 0;background:var(--paper);border-bottom:1px solid var(--line)}
#page-works .summary-inner{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:30px;align-items:center}
#page-works .summary p{font-size:13px;line-height:2;margin:0;max-width:820px}
#page-works .source-link{font-size:12px;border-bottom:1px solid var(--ink);padding:10px 0;white-space:nowrap}
#page-works .records{padding:84px 0 110px;background:var(--paper)}
#page-works .record-list{width:var(--content);margin:auto;display:grid;gap:20px}
#page-works .record{display:grid;grid-template-columns:360px 1fr;min-height:250px;background:var(--cream);border:1px solid rgba(34,70,48,.10);overflow:hidden}
#page-works .record:nth-child(even){background:#f5f3ed}
#page-works .record-image{background-size:cover;background-position:center;min-height:250px}
#page-works .record-body{padding:34px 38px;display:flex;flex-direction:column;justify-content:center}
#page-works .record-meta{display:flex;gap:18px;align-items:center;font-size:10px;letter-spacing:.12em;color:var(--leaf);margin-bottom:14px}
#page-works .record h2{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.55;letter-spacing:.04em;margin:0 0 15px}
#page-works .record p{font-size:13px;line-height:2;margin:0;color:rgba(23,36,28,.78)}
#page-works .category{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid rgba(34,70,48,.14);font-size:9px;color:var(--green)}
#page-works .related{padding:90px 0;background:var(--cream)}
#page-works .related-inner{width:var(--content);margin:auto;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;border-top:1px solid var(--line);padding-top:40px}
#page-works .related h2{font-family:var(--serif);font-size:40px;font-weight:400;margin:0;line-height:1.5}
#page-works .related p{font-size:13px;line-height:2;color:rgba(23,36,28,.75)}
#page-works .text-link{display:inline-flex;gap:30px;align-items:center;border-bottom:1px solid var(--ink);padding:14px 0;font-size:13px;font-weight:600}
#page-works .site-footer{padding:62px 0 28px;background:var(--paper);border-top:1px solid var(--line)}
#page-works .footer-top{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:60px;padding-bottom:48px}
#page-works .footer-brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
#page-works .footer-logo{width:260px}
#page-works .footer-address{font-size:13.5px;margin:0 0 0 18px;line-height:1.8}
#page-works .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 25px;font-size:13.5px}
#page-works .footer-bottom{width:var(--content);margin:auto;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:10px;color:rgba(23,36,28,.68)}
@media(max-width:1180px){#page-works{--content:min(920px,calc(100vw - 44px))}
#page-works .desktop-nav{display:none}
#page-works .menu-button{display:block}
#page-works .hero-grid{grid-template-columns:1fr;gap:30px}
#page-works .record{grid-template-columns:300px 1fr}}
@media(max-width:767px){#page-works{--content:calc(100vw - 32px)}
#page-works .site-header{height:68px;padding:0 16px}
#page-works .brand__logo{width:170px}
#page-works .mobile-nav{inset:68px 0 0}
#page-works .hero{padding:118px 0 58px}
#page-works h1{font-size:40px}
#page-works .hero-copy{font-size:13px}
#page-works .summary-inner{flex-direction:column;align-items:flex-start}
#page-works .records{padding:58px 0 76px}
#page-works .record{grid-template-columns:1fr}
#page-works .record-image{min-height:230px}
#page-works .record-body{padding:26px 20px}
#page-works .record h2{font-size:22px}
#page-works .related-inner{grid-template-columns:1fr;gap:24px}
#page-works .related h2{font-size:34px}
#page-works .footer-top{flex-direction:column;gap:34px}
#page-works .footer-logo{width:210px}
#page-works .footer-address{margin-left:14px}
#page-works .footer-links{grid-template-columns:repeat(2,1fr)}}
/* v91: force summary description to 13px */
#page-works .summary p{
font-size: 15px !important;
}
/* v94: current-site-style works archive */
#page-works .legacy-works{
padding: 72px 0 110px !important;
background: var(--paper) !important;
}
#page-works .legacy-works__inner{
width: min(1040px, calc(100vw - 48px));
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 34px;
align-items: center;
}
#page-works .legacy-work-sheet{
margin: 0;
width: 100%;
background: #fff;
border: 1px solid rgba(34,70,48,.10);
box-shadow: 0 10px 28px rgba(16,35,22,.04);
overflow: hidden;
}
#page-works .legacy-work-sheet img{
width: 100%;
height: auto;
display: block;
}
#page-works .legacy-work-sheet--narrow{
width: min(760px, 100%);
}
#page-works .hero h1{
font-size: 45px !important;
}
#page-works .hero-copy{
font-size: 15px !important;
line-height: 1.95 !important;
}
@media (max-width: 767px) {
#page-works .legacy-works{
padding: 44px 0 72px !important;
}
#page-works .legacy-works__inner{
width: calc(100vw - 24px);
gap: 18px;
}
#page-works .legacy-work-sheet{
box-shadow: none;
}
#page-works .hero h1{
font-size: 40px !important;
}
#page-works .hero-copy{
font-size: 13.5px !important;
}
}
/* v95: match current works page presentation */
#page-works .works-current-head{
padding: 148px 0 42px !important;
background: var(--paper) !important;
}
#page-works .works-current-head .breadcrumb{
margin-bottom: 34px !important;
}
#page-works .works-current-head h1{
margin: 0 !important;
font-family: var(--serif) !important;
font-size: 45px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
letter-spacing: .07em !important;
}
#page-works .works-current{
padding: 10px 0 88px !important;
background: var(--paper) !important;
}
#page-works .works-current__inner{
width: min(1060px, calc(100vw - 48px));
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 34px;
}
#page-works .works-current__img{
display: block;
width: 100%;
height: auto;
object-fit: contain;
background: transparent;
}
#page-works .works-current__img--01{ max-width: 974px; }
#page-works .works-current__img--02{ max-width: 1022px; }
#page-works .works-current__img--03{ max-width: 703px; }
@media (max-width: 767px) {
#page-works .works-current-head{
padding: 112px 0 30px !important;
}
#page-works .works-current-head h1{
font-size: 40px !important;
}
#page-works .works-current{
padding: 4px 0 62px !important;
}
#page-works .works-current__inner{
width: calc(100vw - 20px);
gap: 18px;
}
}
/* v96: make works images blend into the page instead of looking like paper sheets */
#page-works .works-current{
background: #fff !important;
padding-top: 34px !important;
padding-bottom: 90px !important;
}
#page-works .works-current__inner{
width: min(1060px, calc(100vw - 48px)) !important;
gap: 0 !important;
background: #fff !important;
}
#page-works .works-current__img{
display: block !important;
margin: 0 auto !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: #fff !important;
}
#page-works .works-current__img + .works-current__img{
margin-top: 18px !important;
}
@media (max-width: 767px) {
#page-works .works-current{
padding-top: 18px !important;
padding-bottom: 64px !important;
}
#page-works .works-current__inner{
width: calc(100vw - 20px) !important;
}
#page-works .works-current__img + .works-current__img{
margin-top: 10px !important;
}
}
/* v97: match current /works year-tab + results table layout */
#page-works .works-list-page{
background: #fff;
}
#page-works .works-list-section{
padding: 72px 0 110px;
background: #f6f7f8;
}
#page-works .works-list-wrap{
width: min(1535px, calc(100vw - 96px));
margin: 0 auto;
}
#page-works .works-list-wrap h1{
margin: 0;
text-align: center;
font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 30px;
line-height: 1.35;
font-weight: 700;
color: #172b44;
letter-spacing: .02em;
}
#page-works .works-list-wrap h2{
margin: 24px 0 28px;
text-align: center;
font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 23px;
line-height: 1.5;
font-weight: 700;
color: #24384f;
}
#page-works .year-tabs{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin: 0 0 32px;
}
#page-works .year-tab{
min-height: 48px;
padding: 10px 12px;
border: 0;
border-radius: 5px;
background: #e2e5e9;
color: #23364e;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
cursor: default;
}
#page-works .year-tab.is-active{
background: #13bb89;
color: #fff;
}
#page-works .works-table-scroll{
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#page-works .works-table{
width: 100%;
min-width: 980px;
border-collapse: collapse;
table-layout: fixed;
background: #fff;
color: #172b44;
font-size: 15px;
line-height: 1.4;
}
#page-works .works-table .col-name{ width: 59%; }
#page-works .works-table .col-client{ width: 25%; }
#page-works .works-table .col-type{ width: 16%; }
#page-works .works-table th, #page-works .works-table td{
padding: 10px 16px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #d7dce2;
}
#page-works .works-table thead th{
padding-top: 14px;
padding-bottom: 14px;
background: #dfe3e8;
font-weight: 700;
letter-spacing: .03em;
}
#page-works .works-table tbody tr:nth-child(even) td{
background: #f2f3f5;
}
#page-works .works-table tbody tr:nth-child(odd) td{
background: #fff;
}
@media (max-width: 1100px) {
#page-works .works-list-wrap{
width: min(100% - 48px, 1120px);
}
#page-works .year-tabs{
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
#page-works .works-list-section{
padding: 48px 0 72px;
}
#page-works .works-list-wrap{
width: calc(100% - 24px);
}
#page-works .works-list-wrap h1{
font-size: 25px;
}
#page-works .works-list-wrap h2{
margin: 18px 0 22px;
font-size: 19px;
}
#page-works .year-tabs{
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 22px;
}
#page-works .year-tab{
min-height: 44px;
font-size: 12.5px;
padding: 8px 6px;
}
#page-works .works-table{
font-size: 13px;
}
#page-works .works-table th, #page-works .works-table td{
padding: 9px 12px;
}
}
/* v98: add about two characters of vertical space below header */
#page-works .works-list-section{
padding-top: 104px !important;
}
@media (max-width: 767px) {
#page-works .works-list-section{
padding-top: 76px !important;
}
}
/* v100: multi-year switching */
#page-works .year-tab{
cursor: pointer !important;
transition: background-color .2s ease, color .2s ease, transform .2s ease !important;
}
#page-works .year-tab:hover{
transform: translateY(-1px);
}
/* v101: JavaScript-free year switching for sandbox/browser compatibility */
#page-works .year-switcher{ position: relative; }
#page-works .year-radio{
position: absolute !important;
inline-size: 1px !important;
block-size: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
#page-works .year-tabs .year-tab{
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px;
padding: 10px 12px;
border: 0;
border-radius: 5px;
background: #e2e5e9;
color: #23364e;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
cursor: pointer !important;
user-select: none;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
#page-works .year-tabs .year-tab:hover{ transform: translateY(-1px); }
#page-works .year-panel{ display: none; }
#page-works .year-panel > h2{
margin: 0 0 28px;
text-align: center;
font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 23px;
line-height: 1.5;
font-weight: 700;
color: #24384f;
}
#page-works #year-2024:checked ~ .year-tabs label[for="year-2024"], #page-works #year-2023:checked ~ .year-tabs label[for="year-2023"], #page-works #year-2022:checked ~ .year-tabs label[for="year-2022"], #page-works #year-2021:checked ~ .year-tabs label[for="year-2021"], #page-works #year-2020:checked ~ .year-tabs label[for="year-2020"], #page-works #year-2019:checked ~ .year-tabs label[for="year-2019"]{
background: #13bb89 !important;
color: #fff !important;
}
#page-works #year-2024:checked ~ .year-panels .year-panel-2024, #page-works #year-2023:checked ~ .year-panels .year-panel-2023, #page-works #year-2022:checked ~ .year-panels .year-panel-2022, #page-works #year-2021:checked ~ .year-panels .year-panel-2021, #page-works #year-2020:checked ~ .year-panels .year-panel-2020, #page-works #year-2019:checked ~ .year-panels .year-panel-2019{ display: block; }
@media (max-width: 767px) {
#page-works .year-tabs .year-tab{ min-height: 44px; font-size: 12.5px; padding: 8px 6px; }
#page-works .year-panel > h2{ margin-bottom: 22px; font-size: 19px; }
}
/* v102: place year tabs directly below the active Reiwa-year heading */
#page-works .year-heading-group{
margin: 24px 0 18px;
}
#page-works .year-heading{
display: none;
margin: 0;
text-align: center;
font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 23px;
line-height: 1.5;
font-weight: 700;
color: #24384f;
}
#page-works #year-2024:checked ~ .year-heading-group .year-heading-2024, #page-works #year-2023:checked ~ .year-heading-group .year-heading-2023, #page-works #year-2022:checked ~ .year-heading-group .year-heading-2022, #page-works #year-2021:checked ~ .year-heading-group .year-heading-2021, #page-works #year-2020:checked ~ .year-heading-group .year-heading-2020, #page-works #year-2019:checked ~ .year-heading-group .year-heading-2019{
display: block;
}
#page-works .year-tabs{
margin-top: 0 !important;
margin-bottom: 32px !important;
}
@media (max-width: 767px) {
#page-works .year-heading-group{
margin: 18px 0 14px;
}
#page-works .year-heading{
font-size: 19px;
}
#page-works .year-tabs{
margin-bottom: 22px !important;
}
}
/* ===== cases.html ===== */
#page-cases{
--deep:#0e2818;--green:#224630;--cream:#f0eee5;--paper:#f8f7f2;
--ink:#17241c;--leaf:#71806d;--line:rgba(34,70,48,.16);
--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
--sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
--content:min(1180px,calc(100vw - 64px));
}
#page-cases *{box-sizing:border-box}
#page-cases{scroll-behavior:smooth}
#page-cases{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
#page-cases a{color:inherit;text-decoration:none}
#page-cases img{display:block;max-width:100%}
/* header */
#page-cases .site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;padding:0 30px;
display:flex;align-items:center;background:rgba(248,247,242,.90);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(34,70,48,.10);
}
#page-cases .brand{display:flex;align-items:center;flex:0 0 auto}
#page-cases .brand__logo{width:clamp(190px,18vw,285px);height:auto;object-fit:contain}
#page-cases .desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.15vw,18px);font-size:13.5px;white-space:nowrap}
#page-cases .desktop-nav a{position:relative;padding:12px 0}
#page-cases .desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--green);transition:.25s}
#page-cases .desktop-nav a:hover::after, #page-cases .desktop-nav a.is-current::after{right:0}
#page-cases .menu-button{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;position:relative;cursor:pointer}
#page-cases .menu-button::before, #page-cases .menu-button::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:var(--ink)}
#page-cases .menu-button::before{top:16px}
#page-cases .menu-button::after{top:27px}
#page-cases .mobile-nav{display:none;position:fixed;inset:72px 0 0;background:rgba(14,40,24,.98);color:#fff;z-index:999;padding:44px 28px}
#page-cases .mobile-nav.is-open{display:flex;flex-direction:column}
#page-cases .mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--serif);font-size:24px}
/* hero */
#page-cases .wrap{width:var(--content);margin:auto}
#page-cases .page-hero{padding:158px 0 86px;background:var(--cream)}
#page-cases .breadcrumb{margin:0 0 48px;font-size:11px;letter-spacing:.08em;color:var(--leaf)}
#page-cases .hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw;align-items:end}
#page-cases .eyebrow{margin:0 0 15px;font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--leaf)}
#page-cases h1{margin:0;font-family:var(--serif);font-size:45px;font-weight:400;line-height:1.25;letter-spacing:.08em}
#page-cases .hero-copy{margin:0;font-size:14px;line-height:2.1;color:rgba(23,36,28,.78)}
/* overview */
#page-cases .intro{padding:80px 0;background:var(--paper)}
#page-cases .intro-grid{width:var(--content);margin:auto;display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;align-items:start}
#page-cases .intro h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.55;letter-spacing:.06em}
#page-cases .intro p{margin:0;font-size:14px;line-height:2.15;color:rgba(23,36,28,.8)}
/* cases */
#page-cases .case-list{background:var(--cream)}
#page-cases .case{
width:var(--content);margin:auto;padding:88px 0;
display:grid;grid-template-columns:1.08fr .92fr;gap:7vw;align-items:center;
border-bottom:1px solid var(--line)
}
#page-cases .case:nth-child(even){grid-template-columns:.92fr 1.08fr}
#page-cases .case:nth-child(even) .case-image{order:2}
#page-cases .case:nth-child(even) .case-content{order:1}
#page-cases .case-image{position:relative;min-height:420px;overflow:hidden;background:#d6dbd4}
#page-cases .case-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .7s ease}
#page-cases .case:hover .case-image img{transform:scale(1.025)}
#page-cases .case-index{display:inline-block;margin-bottom:18px;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--green)}
#page-cases .case-label{margin:0 0 10px;font-size:9px;font-weight:700;letter-spacing:.24em;color:var(--leaf)}
#page-cases .case h2{margin:0 0 22px;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.5;letter-spacing:.06em}
#page-cases .case-text{margin:0 0 30px;font-size:14px;line-height:2.05;color:rgba(23,36,28,.82)}
#page-cases .case-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
#page-cases .case-points span{font-size:12px;line-height:1.75;color:rgba(23,36,28,.76)}
#page-cases .case-points span::before{content:"—";margin-right:9px;color:var(--leaf)}
/* link block */
#page-cases .related{padding:92px 0;background:var(--paper)}
#page-cases .related-inner{width:var(--content);margin:auto;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;border-top:1px solid var(--line);padding-top:42px}
#page-cases .related h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.5;letter-spacing:.06em}
#page-cases .related p{margin:12px 0 0;font-size:13px;line-height:2;color:rgba(23,36,28,.74)}
#page-cases .text-link{display:inline-flex;align-items:center;gap:36px;padding:15px 0;border-bottom:1px solid var(--ink);font-size:13px;font-weight:600;letter-spacing:.08em}
/* footer */
#page-cases .site-footer{padding:64px 0 28px;background:var(--cream);border-top:1px solid var(--line)}
#page-cases .footer-top{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:60px;padding-bottom:52px}
#page-cases .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#page-cases .footer-logo{width:260px;height:auto}
#page-cases .footer-address{margin:0 0 0 18px;font-size:13.5px;line-height:1.8}
#page-cases .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;font-size:13.5px}
#page-cases .footer-bottom{width:var(--content);margin:auto;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:10px;color:rgba(23,36,28,.7)}
@media(max-width:1180px){
#page-cases{--content:min(920px,calc(100vw - 44px))}
#page-cases .site-header{height:72px}
#page-cases .desktop-nav{display:none}
#page-cases .menu-button{display:block}
#page-cases .hero-grid, #page-cases .intro-grid{grid-template-columns:1fr;gap:34px}
#page-cases .case, #page-cases .case:nth-child(even){grid-template-columns:1fr;gap:34px;padding:64px 0}
#page-cases .case:nth-child(even) .case-image, #page-cases .case:nth-child(even) .case-content{order:initial}
#page-cases .case-image{min-height:400px}
}
@media(max-width:767px){
#page-cases{--content:calc(100vw - 32px)}
#page-cases .site-header{height:68px;padding:0 16px}
#page-cases .brand__logo{width:170px}
#page-cases .mobile-nav{inset:68px 0 0}
#page-cases .page-hero{padding:120px 0 58px}
#page-cases .breadcrumb{margin-bottom:32px}
#page-cases h1{font-size:40px}
#page-cases .hero-copy{font-size:13px}
#page-cases .intro{padding:62px 0}
#page-cases .intro h2, #page-cases .case h2, #page-cases .related h2{font-size:34px}
#page-cases .intro p, #page-cases .case-text{font-size:13.5px}
#page-cases .case{width:100%;padding:56px 16px}
#page-cases .case-image{min-height:280px}
#page-cases .case-points{grid-template-columns:1fr}
#page-cases .related{padding:68px 0}
#page-cases .related-inner{grid-template-columns:1fr;gap:26px}
#page-cases .footer-top{flex-direction:column;gap:34px;padding-bottom:40px}
#page-cases .footer-logo{width:210px}
#page-cases .footer-address{margin-left:14px}
#page-cases .footer-links{grid-template-columns:repeat(2,1fr)}
}
/* v80: stack intro heading and copy vertically */
#page-cases .intro-grid{
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#page-cases .intro h2{
white-space: nowrap !important;
}
#page-cases .intro-grid > p{
max-width: 920px !important;
margin-top: 0 !important;
}
@media (max-width: 767px) {
#page-cases .intro h2{
white-space: normal !important;
}
}
/* v81: reduce intro heading on cases page */
#page-cases .intro h2{
font-size: 25px !important;
}
/* v82: refine OUR WORK label only */
#page-cases .intro .eyebrow{
margin-bottom: 6px !important;
font-size: 13px !important;
letter-spacing: 0 !important;
}
/* ===== about.html ===== */
#page-about{
--deep:#0e2818;--green:#224630;--cream:#f0eee5;--paper:#f8f7f2;
--ink:#17241c;--leaf:#71806d;--line:rgba(34,70,48,.16);
--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
--sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
--content:min(1180px,calc(100vw - 64px));
}
#page-about *{box-sizing:border-box}
#page-about{scroll-behavior:smooth}
#page-about{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
#page-about a{color:inherit;text-decoration:none}
#page-about img{display:block;max-width:100%}
/* header */
#page-about .site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;padding:0 30px;
display:flex;align-items:center;background:rgba(248,247,242,.90);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(34,70,48,.10);
}
#page-about .brand{display:flex;align-items:center;flex:0 0 auto}
#page-about .brand__logo{width:clamp(190px,18vw,285px);height:auto;object-fit:contain}
#page-about .desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.15vw,18px);font-size:13.5px;white-space:nowrap}
#page-about .desktop-nav a{position:relative;padding:12px 0}
#page-about .desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--green);transition:.25s}
#page-about .desktop-nav a:hover::after, #page-about .desktop-nav a.is-current::after{right:0}
#page-about .menu-button{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;position:relative;cursor:pointer}
#page-about .menu-button::before, #page-about .menu-button::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:var(--ink)}
#page-about .menu-button::before{top:16px}
#page-about .menu-button::after{top:27px}
#page-about .mobile-nav{display:none;position:fixed;inset:72px 0 0;background:rgba(14,40,24,.98);color:#fff;z-index:999;padding:44px 28px}
#page-about .mobile-nav.is-open{display:flex;flex-direction:column}
#page-about .mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--serif);font-size:24px}
/* hero */
#page-about .wrap{width:var(--content);margin:auto}
#page-about .page-hero{padding:158px 0 86px;background:var(--cream)}
#page-about .breadcrumb{margin:0 0 48px;font-size:11px;letter-spacing:.08em;color:var(--leaf)}
#page-about .hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw;align-items:end}
#page-about .eyebrow{margin:0 0 15px;font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--leaf)}
#page-about h1{margin:0;font-family:var(--serif);font-size:45px;font-weight:400;line-height:1.25;letter-spacing:.08em}
#page-about .hero-copy{margin:0;font-size:14px;line-height:2.1;color:rgba(23,36,28,.78)}
/* overview */
#page-about .intro{padding:80px 0;background:var(--paper)}
#page-about .intro-grid{width:var(--content);margin:auto;display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;align-items:start}
#page-about .intro h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.55;letter-spacing:.06em}
#page-about .intro p{margin:0;font-size:14px;line-height:2.15;color:rgba(23,36,28,.8)}
/* cases */
#page-about .case-list{background:var(--cream)}
#page-about .case{
width:var(--content);margin:auto;padding:88px 0;
display:grid;grid-template-columns:1.08fr .92fr;gap:7vw;align-items:center;
border-bottom:1px solid var(--line)
}
#page-about .case:nth-child(even){grid-template-columns:.92fr 1.08fr}
#page-about .case:nth-child(even) .case-image{order:2}
#page-about .case:nth-child(even) .case-content{order:1}
#page-about .case-image{position:relative;min-height:420px;overflow:hidden;background:#d6dbd4}
#page-about .case-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .7s ease}
#page-about .case:hover .case-image img{transform:scale(1.025)}
#page-about .case-index{display:inline-block;margin-bottom:18px;font-size:13px;font-weight:200;letter-spacing:.12em;color:var(--green)}
#page-about .case-label{margin:0 0 10px;font-size:9px;font-weight:700;letter-spacing:.24em;color:var(--leaf)}
#page-about .case h2{margin:0 0 22px;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.5;letter-spacing:.06em}
#page-about .case-text{margin:0 0 30px;font-size:14px;line-height:2.05;color:rgba(23,36,28,.82)}
#page-about .case-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
#page-about .case-points span{font-size:12px;line-height:1.75;color:rgba(23,36,28,.76)}
#page-about .case-points span::before{content:"—";margin-right:9px;color:var(--leaf)}
/* link block */
#page-about .related{padding:92px 0;background:var(--paper)}
#page-about .related-inner{width:var(--content);margin:auto;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;border-top:1px solid var(--line);padding-top:42px}
#page-about .related h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.5;letter-spacing:.06em}
#page-about .related p{margin:12px 0 0;font-size:13px;line-height:2;color:rgba(23,36,28,.74)}
#page-about .text-link{display:inline-flex;align-items:center;gap:36px;padding:15px 0;border-bottom:1px solid var(--ink);font-size:13px;font-weight:600;letter-spacing:.08em}
/* footer */
#page-about .site-footer{padding:64px 0 28px;background:var(--cream);border-top:1px solid var(--line)}
#page-about .footer-top{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:60px;padding-bottom:52px}
#page-about .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#page-about .footer-logo{width:260px;height:auto}
#page-about .footer-address{margin:0 0 0 18px;font-size:13.5px;line-height:1.8}
#page-about .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;font-size:13.5px}
#page-about .footer-bottom{width:var(--content);margin:auto;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:10px;color:rgba(23,36,28,.7)}
@media(max-width:1180px){
#page-about{--content:min(920px,calc(100vw - 44px))}
#page-about .site-header{height:72px}
#page-about .desktop-nav{display:none}
#page-about .menu-button{display:block}
#page-about .hero-grid, #page-about .intro-grid{grid-template-columns:1fr;gap:34px}
#page-about .case, #page-about .case:nth-child(even){grid-template-columns:1fr;gap:34px;padding:64px 0}
#page-about .case:nth-child(even) .case-image, #page-about .case:nth-child(even) .case-content{order:initial}
#page-about .case-image{min-height:400px}
}
@media(max-width:767px){
#page-about{--content:calc(100vw - 32px)}
#page-about .site-header{height:68px;padding:0 16px}
#page-about .brand__logo{width:170px}
#page-about .mobile-nav{inset:68px 0 0}
#page-about .page-hero{padding:120px 0 58px}
#page-about .breadcrumb{margin-bottom:32px}
#page-about h1{font-size:40px}
#page-about .hero-copy{font-size:13px}
#page-about .intro{padding:62px 0}
#page-about .intro h2, #page-about .case h2, #page-about .related h2{font-size:34px}
#page-about .intro p, #page-about .case-text{font-size:13.5px}
#page-about .case{width:100%;padding:56px 16px}
#page-about .case-image{min-height:280px}
#page-about .case-points{grid-template-columns:1fr}
#page-about .related{padding:68px 0}
#page-about .related-inner{grid-template-columns:1fr;gap:26px}
#page-about .footer-top{flex-direction:column;gap:34px;padding-bottom:40px}
#page-about .footer-logo{width:210px}
#page-about .footer-address{margin-left:14px}
#page-about .footer-links{grid-template-columns:repeat(2,1fr)}
}
/* v80: stack intro heading and copy vertically */
#page-about .intro-grid{
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#page-about .intro h2{
white-space: nowrap !important;
}
#page-about .intro-grid > p{
max-width: 920px !important;
margin-top: 0 !important;
}
@media (max-width: 767px) {
#page-about .intro h2{
white-space: normal !important;
}
}
/* v81: reduce intro heading on cases page */
#page-about .intro h2{
font-size: 25px !important;
}
/* v82: refine OUR WORK label only */
#page-about .intro .eyebrow{
margin-bottom: 6px !important;
font-size: 13px !important;
letter-spacing: 0 !important;
}
/* v103 ABOUT PAGE */
#page-about .about-hero{padding:146px 0 80px;background:var(--cream)}
#page-about .about-hero .breadcrumb{margin-bottom:42px}
#page-about .about-hero-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:8vw;align-items:center}
#page-about .about-hero h1{font-size:45px}
#page-about .about-hero .lead{margin:28px 0 0;font-size:14px;line-height:2.05;color:rgba(23,36,28,.76)}
#page-about .about-hero-image{margin:0;min-height:360px;overflow:hidden;background:#dde1db}
#page-about .about-hero-image img{width:100%;height:100%;min-height:360px;object-fit:cover;transform:scale(1.01)}
#page-about .about-anchor-nav{position:sticky;top:76px;z-index:90;background:rgba(248,247,242,.96);border-top:1px solid var(--line);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
#page-about .about-anchor-inner{min-height:58px;display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.2vw,50px);overflow-x:auto;white-space:nowrap}
#page-about .about-anchor-inner a{font-size:12px;letter-spacing:.04em;transition:opacity .2s}
#page-about .about-anchor-inner a:hover{opacity:.52}
#page-about .about-section{scroll-margin-top:142px}
#page-about .about-wrap{width:var(--content);margin:auto}
#page-about .section-no{margin:0 0 8px;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--leaf)}
#page-about .about-section h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.55;letter-spacing:.06em}
#page-about .split-wide{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw}
#page-about .philosophy-section{padding:96px 0;background:var(--paper)}
#page-about .about-copy{padding-top:29px}
#page-about .about-copy p{margin:0 0 22px;font-size:14px;line-height:2.15;color:rgba(23,36,28,.80)}
#page-about .history-section{padding:96px 0;background:var(--cream)}
#page-about .history-grid{display:grid;grid-template-columns:1fr .92fr;gap:7vw;align-items:center}
#page-about .timeline{margin-top:44px;border-top:1px solid var(--line)}
#page-about .timeline-row{display:grid;grid-template-columns:130px 1fr;gap:28px;padding:25px 0;border-bottom:1px solid var(--line)}
#page-about .timeline-year{font-family:var(--sans);font-size:24px;font-weight:400;letter-spacing:.03em;color:var(--green)}
#page-about .timeline-year small{margin-left:3px;font-size:11px;font-weight:400}
#page-about .timeline-row strong{display:block;margin-bottom:6px;font-family:var(--serif);font-size:17px;font-weight:500}
#page-about .timeline-row p{margin:0;font-size:12.5px;line-height:1.9;color:rgba(23,36,28,.72)}
#page-about .history-image{margin:0}
#page-about .history-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
#page-about .history-image figcaption{margin-top:12px;font-size:10px;letter-spacing:.04em;color:var(--leaf)}
#page-about .profile-section{padding:96px 0;background:var(--paper)}
#page-about .section-head{display:grid;grid-template-columns:1fr .85fr;gap:8vw;align-items:end;margin-bottom:48px}
#page-about .section-head>p{margin:0 0 7px;font-size:13px;line-height:2;color:rgba(23,36,28,.72)}
#page-about .profile-list{margin:0;border-top:1px solid var(--line)}
#page-about .profile-list>div{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--line)}
#page-about .profile-list dt, #page-about .profile-list dd{margin:0;padding:20px 0;font-size:13.5px;line-height:1.9}
#page-about .profile-list dt{color:var(--leaf);font-weight:500}
#page-about .profile-list dd{padding-left:38px}
#page-about .credentials-section{padding:96px 0;background:var(--cream)}
#page-about .credentials-grid{display:grid;gap:84px}
#page-about .credential-block{display:grid;grid-template-columns:.88fr 1.12fr;gap:7vw;align-items:center}
#page-about .credential-block-reverse{grid-template-columns:1.12fr .88fr}
#page-about .credential-block figure{margin:0;overflow:hidden;background:#d8ddd6}
#page-about .credential-block figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
#page-about .plain-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
#page-about .plain-list li{padding:15px 0;border-bottom:1px solid var(--line);font-size:13.5px}
#page-about .plain-list li::before{content:"—";margin-right:12px;color:var(--leaf)}
#page-about .initiatives-section{padding:96px 0;background:var(--paper)}
#page-about .initiatives-head{align-items:start}
#page-about .initiative-grid{border-top:1px solid var(--line)}
#page-about .initiative-item{display:grid;grid-template-columns:72px 1fr 150px;gap:34px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line)}
#page-about .initiative-number{font-size:11px;letter-spacing:.12em;color:var(--leaf)}
#page-about .initiative-item h3{margin:0 0 10px;font-family:var(--serif);font-size:21px;font-weight:500}
#page-about .initiative-item p{margin:0;max-width:760px;font-size:13px;line-height:2;color:rgba(23,36,28,.72)}
#page-about .initiative-mark, #page-about .initiative-photo{width:118px;height:118px;object-fit:contain;justify-self:end}
#page-about .initiative-photo{object-fit:cover}
#page-about .access-section{padding:96px 0 108px;background:var(--deep);color:#fff}
#page-about .access-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw}
#page-about .access-section .eyebrow, #page-about .access-section .section-no{color:rgba(255,255,255,.55)}
#page-about .access-info{padding-top:26px}
#page-about .access-info p{margin:0 0 18px;font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.78)}
#page-about .access-company{font-family:var(--serif);font-size:20px!important;color:#fff!important}
#page-about .map-link{display:inline-flex;gap:34px;align-items:center;margin-top:18px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.7);font-size:12.5px}
@media(max-width:1180px){
#page-about .about-anchor-nav{top:72px}
#page-about .about-hero-grid, #page-about .split-wide, #page-about .history-grid, #page-about .credential-block, #page-about .credential-block-reverse, #page-about .access-grid{grid-template-columns:1fr;gap:38px}
#page-about .about-hero-image{min-height:420px}
#page-about .section-head{grid-template-columns:1fr;gap:22px}
#page-about .history-image{max-width:760px}
#page-about .credential-block-reverse figure{order:2}
#page-about .credential-block-reverse .credential-copy{order:1}
}
@media(max-width:767px){
#page-about .about-hero{padding:116px 0 56px}
#page-about .about-hero h1{font-size:40px}
#page-about .about-hero .lead{font-size:13px}
#page-about .about-hero-image, #page-about .about-hero-image img{min-height:250px}
#page-about .about-anchor-nav{top:68px}
#page-about .about-anchor-inner{justify-content:flex-start;gap:28px;padding-right:16px}
#page-about .about-section{scroll-margin-top:130px}
#page-about .philosophy-section, #page-about .history-section, #page-about .profile-section, #page-about .credentials-section, #page-about .initiatives-section, #page-about .access-section{padding:64px 0}
#page-about .about-section h2{font-size:32px}
#page-about .timeline-row{grid-template-columns:88px 1fr;gap:16px}
#page-about .timeline-year{font-size:20px}
#page-about .profile-list>div{grid-template-columns:1fr}
#page-about .profile-list dt{padding:15px 0 3px}
#page-about .profile-list dd{padding:0 0 15px}
#page-about .initiative-item{grid-template-columns:44px 1fr;gap:18px}
#page-about .initiative-mark, #page-about .initiative-photo{grid-column:2;width:100px;height:100px;justify-self:start;margin-top:8px}
}
/* v105: about top aligned with works page */
#page-about .about-hero{
padding: 146px 0 58px;
background: var(--cream);
}
#page-about .about-hero-simple{
max-width: 720px;
}
#page-about .about-hero .breadcrumb{
margin-bottom: 34px;
}
#page-about .about-hero .eyebrow{
margin-bottom: 18px;
}
#page-about .about-hero h1{
margin: 0;
font-size: 45px;
line-height: 1.35;
}
@media (max-width: 767px){
#page-about .about-hero{
padding: 116px 0 42px;
}
#page-about .about-hero h1{
font-size: 40px;
}
}
/* v106: keep philosophy heading to exactly two lines */
#page-about .philosophy-heading{
font-size: 36px !important;
}
#page-about .philosophy-heading span{
display: block;
white-space: nowrap;
}
@media (max-width: 1180px) {
#page-about .philosophy-heading{
font-size: 36px !important;
}
}
@media (max-width: 767px) {
#page-about .philosophy-heading{
font-size: clamp(25px, 7.2vw, 32px) !important;
letter-spacing: .035em !important;
}
}
/* v109: refined full-width alternating bands on ABOUT page */
#page-about .about-section .section-no{
color: var(--leaf) !important;
}
/* 01 */
#page-about .philosophy-section{
background: var(--cream) !important;
}
/* 02 */
#page-about .history-section{
background: var(--paper) !important;
}
/* 03 */
#page-about .profile-section{
background: var(--cream) !important;
}
/* 04 */
#page-about .registration-section{
padding: 96px 0;
background: var(--paper) !important;
}
/* 05 */
#page-about .associations-section{
padding: 96px 0;
background: var(--cream) !important;
}
/* 06 */
#page-about .initiatives-section{
background: var(--paper) !important;
}
/* 07 */
#page-about .access-section{
background: var(--deep) !important;
}
#page-about .registration-section .credential-block, #page-about .associations-section .credential-block{
margin: 0;
}
#page-about .registration-section .credential-block{
grid-template-columns: .88fr 1.12fr;
}
#page-about .associations-section .credential-block{
grid-template-columns: 1.12fr .88fr;
}
@media (max-width: 1180px) {
#page-about .registration-section .credential-block, #page-about .associations-section .credential-block{
grid-template-columns: 1fr;
gap: 38px;
}
#page-about .associations-section .credential-block figure{
order: 2;
}
#page-about .associations-section .credential-copy{
order: 1;
}
}
@media (max-width: 767px) {
#page-about .registration-section, #page-about .associations-section{
padding: 64px 0;
}
}
/* v110: make 07 Access continue the alternating background rhythm */
#page-about .access-section{
background: var(--cream) !important;
color: var(--ink) !important;
}
#page-about .access-section .eyebrow, #page-about .access-section .section-no{
color: var(--leaf) !important;
}
#page-about .access-info p{
color: rgba(23,36,28,.78) !important;
}
#page-about .access-company{
color: var(--ink) !important;
}
#page-about .map-link{
color: var(--ink) !important;
border-bottom-color: rgba(23,36,28,.55) !important;
}
/* v111: activity declaration */
#page-about .activity-declaration{
margin-top: 28px;
padding: 24px 0 4px;
border-top: 1px solid var(--line);
}
#page-about .activity-declaration-label{
margin: 0 0 12px !important;
font-size: 10px !important;
font-weight: 600;
letter-spacing: .16em;
color: var(--leaf) !important;
}
#page-about .activity-declaration-text{
margin: 0 !important;
font-family: var(--serif);
font-size: 27px !important;
font-weight: 500;
line-height: 1.55 !important;
letter-spacing: .055em;
color: var(--ink) !important;
}
#page-about .activity-declaration-note{
margin: 12px 0 0 !important;
font-size: 10.5px !important;
letter-spacing: .03em;
color: rgba(23,36,28,.54) !important;
}
@media (max-width: 767px) {
#page-about .activity-declaration{
margin-top: 22px;
padding-top: 20px;
}
#page-about .activity-declaration-text{
font-size: 23px !important;
}
}
/* v112: framed activity declaration like provided sample */
#page-about .activity-declaration{
margin-top: 30px;
}
#page-about .activity-declaration-frame{
position: relative;
padding: 28px 28px 30px;
background: #f8f6ef;
border: 1px solid #d4b53f;
box-shadow: inset 0 0 0 2px rgba(212,181,63,.92), inset 0 0 0 6px rgba(212,181,63,.22);
}
#page-about .activity-declaration-frame::before{
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(212,181,63,.72);
pointer-events: none;
}
#page-about .activity-declaration-frame .activity-declaration-label{
margin: 0 0 18px !important;
font-size: 11px !important;
font-weight: 500;
letter-spacing: .08em;
color: rgba(23,36,28,.78) !important;
text-align: left;
position: relative;
z-index: 1;
}
#page-about .activity-declaration-frame .activity-declaration-text{
margin: 0 !important;
font-family: var(--serif);
font-size: 25px !important;
font-weight: 500;
line-height: 1.75 !important;
letter-spacing: .03em;
color: var(--ink) !important;
text-align: center;
position: relative;
z-index: 1;
white-space: normal;
}
#page-about .activity-declaration-note{
display: none !important;
}
@media (max-width: 767px) {
#page-about .activity-declaration-frame{
padding: 22px 18px 24px;
}
#page-about .activity-declaration-frame::before{
inset: 8px;
}
#page-about .activity-declaration-frame .activity-declaration-label{
margin-bottom: 14px !important;
font-size: 10.5px !important;
}
#page-about .activity-declaration-frame .activity-declaration-text{
font-size: 20px !important;
line-height: 1.7 !important;
}
}
/* v113: move declaration outside 02 and reserve photo area above it */
#page-about .activity-external-block{
margin-top: 52px;
}
#page-about .activity-photo-placeholder{
width: 100%;
aspect-ratio: 16 / 5.2;
display: grid;
place-items: center;
background:
linear-gradient(135deg, rgba(99,116,91,.045) 25%, transparent 25%) -12px 0/24px 24px,
linear-gradient(225deg, rgba(99,116,91,.045) 25%, transparent 25%) -12px 0/24px 24px,
linear-gradient(315deg, rgba(99,116,91,.045) 25%, transparent 25%) 0 0/24px 24px,
linear-gradient(45deg, rgba(99,116,91,.045) 25%, transparent 25%) 0 0/24px 24px,
#efeee8;
border: 1px solid rgba(23,36,28,.10);
}
#page-about .activity-photo-placeholder-inner{
text-align: center;
color: rgba(23,36,28,.38);
}
#page-about .placeholder-label{
display: block;
margin-bottom: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: .22em;
}
#page-about .placeholder-text{
display: block;
font-size: 12px;
letter-spacing: .04em;
}
#page-about .activity-declaration-external{
margin-top: 28px !important;
max-width: 100%;
}
@media (max-width: 767px) {
#page-about .activity-external-block{
margin-top: 36px;
}
#page-about .activity-photo-placeholder{
aspect-ratio: 16 / 8;
}
#page-about .placeholder-text{
font-size: 11px;
}
#page-about .activity-declaration-external{
margin-top: 18px !important;
}
}
/* v114: split photo placeholder into two side-by-side slots */
#page-about .activity-photo-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
#page-about .activity-photo-placeholder{
width: 100%;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
background:
linear-gradient(135deg, rgba(99,116,91,.045) 25%, transparent 25%) -12px 0/24px 24px,
linear-gradient(225deg, rgba(99,116,91,.045) 25%, transparent 25%) -12px 0/24px 24px,
linear-gradient(315deg, rgba(99,116,91,.045) 25%, transparent 25%) 0 0/24px 24px,
linear-gradient(45deg, rgba(99,116,91,.045) 25%, transparent 25%) 0 0/24px 24px,
#efeee8;
border: 1px solid rgba(23,36,28,.10);
}
@media (max-width: 767px) {
#page-about .activity-photo-grid{
grid-template-columns: 1fr;
gap: 14px;
}
#page-about .activity-photo-placeholder{
aspect-ratio: 16 / 10;
}
}
/* v115: refined editorial declaration design */
#page-about .activity-declaration-modern{
position: relative;
display: grid;
grid-template-columns: 190px 1fr;
gap: 54px;
align-items: center;
margin-top: 34px !important;
padding: 34px 0 36px;
border-top: 1px solid rgba(72, 96, 72, .42);
border-bottom: 1px solid rgba(23,36,28,.12);
background: transparent !important;
box-shadow: none !important;
}
#page-about .activity-declaration-modern::before{
content: "";
position: absolute;
top: -1px;
left: 0;
width: 92px;
height: 2px;
background: var(--green);
}
#page-about .activity-declaration-modern::after{
display: none !important;
}
#page-about .declaration-meta{
align-self: start;
padding-top: 8px;
}
#page-about .declaration-en{
display: block;
margin-bottom: 12px;
font-size: 8px;
font-weight: 600;
letter-spacing: .24em;
color: var(--leaf);
}
#page-about .activity-declaration-modern .activity-declaration-label{
display: block;
margin: 0 !important;
font-family: var(--serif);
font-size: 13px !important;
font-weight: 500;
letter-spacing: .08em;
line-height: 1.7;
color: var(--ink) !important;
text-align: left;
}
#page-about .declaration-message{
position: relative;
min-height: 92px;
display: flex;
align-items: center;
padding-left: 34px;
}
#page-about .declaration-mark{
position: absolute;
left: -4px;
top: -19px;
font-family: Georgia, serif;
font-size: 82px;
line-height: 1;
font-weight: 400;
color: rgba(76,104,78,.10);
pointer-events: none;
}
#page-about .activity-declaration-modern .activity-declaration-text{
position: relative;
z-index: 1;
margin: 0 !important;
font-family: var(--serif);
font-size: clamp(25px, 2.2vw, 34px) !important;
font-weight: 400;
line-height: 1.6 !important;
letter-spacing: .055em;
color: var(--ink) !important;
text-align: left;
}
@media (max-width: 767px) {
#page-about .activity-declaration-modern{
grid-template-columns: 1fr;
gap: 20px;
margin-top: 24px !important;
padding: 28px 0 30px;
}
#page-about .activity-declaration-modern::before{
width: 68px;
}
#page-about .declaration-meta{
padding-top: 0;
}
#page-about .declaration-en{
margin-bottom: 8px;
}
#page-about .declaration-message{
min-height: 74px;
padding-left: 24px;
}
#page-about .declaration-mark{
left: -3px;
top: -14px;
font-size: 64px;
}
#page-about .activity-declaration-modern .activity-declaration-text{
font-size: clamp(22px, 6.5vw, 28px) !important;
line-height: 1.65 !important;
}
}
/* v117: premium declaration statement */
#page-about .activity-declaration-premium{
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 220px 1fr;
gap: 72px;
min-height: 300px;
margin-top: 34px;
padding: 54px 62px 52px;
background: #173126;
color: #f4f1e8;
}
#page-about .declaration-side{
position: relative;
z-index: 2;
padding-top: 6px;
}
#page-about .declaration-kicker{
display: block;
margin-bottom: 16px;
font-size: 8px;
font-weight: 600;
letter-spacing: .28em;
color: rgba(244,241,232,.58);
}
#page-about .declaration-jp{
display: block;
font-family: var(--serif);
font-size: 13px;
font-weight: 400;
line-height: 1.8;
letter-spacing: .12em;
color: rgba(244,241,232,.88);
}
#page-about .declaration-main{
position: relative;
z-index: 2;
align-self: center;
}
#page-about .declaration-statement{
margin: 0;
font-family: var(--serif);
font-size: clamp(32px, 3vw, 46px);
font-weight: 400;
line-height: 1.55;
letter-spacing: .065em;
color: #f8f5ed;
}
#page-about .declaration-statement span{
color: #d9e7d7;
}
#page-about .declaration-rule{
width: 74px;
height: 1px;
margin: 28px 0 15px;
background: rgba(216,230,215,.72);
}
#page-about .declaration-sub{
margin: 0;
font-size: 7.5px;
font-weight: 500;
letter-spacing: .22em;
color: rgba(244,241,232,.38);
}
#page-about .declaration-ghost{
position: absolute;
right: -18px;
bottom: -28px;
font-family: var(--sans);
font-size: clamp(72px, 9vw, 142px);
font-weight: 700;
line-height: .85;
letter-spacing: -.035em;
color: rgba(255,255,255,.035);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
@media (max-width: 900px) {
#page-about .activity-declaration-premium{
grid-template-columns: 1fr;
gap: 32px;
min-height: 0;
padding: 42px 36px 44px;
}
#page-about .declaration-side{
padding-top: 0;
}
#page-about .declaration-statement{
font-size: clamp(30px, 5.8vw, 40px);
}
}
@media (max-width: 767px) {
#page-about .activity-declaration-premium{
margin-top: 24px;
padding: 34px 24px 36px;
}
#page-about .declaration-statement{
font-size: clamp(26px, 7vw, 34px);
line-height: 1.62;
letter-spacing: .045em;
}
#page-about .declaration-rule{
margin-top: 24px;
}
#page-about .declaration-ghost{
right: -8px;
bottom: -12px;
font-size: 58px;
}
}
@media (max-width: 767px) {
/* v120: declaration section matched to provided sample */
#page-about .declaration-centered-band{
margin-top: 40px;
padding: 8px 18px 14px;
}
#page-about .declaration-band-line{
height: 2px;
background: #c6a13f;
opacity: .98;
}
#page-about .declaration-band-line.top{
margin-bottom: 58px;
}
#page-about .declaration-band-line.bottom{
margin-top: 56px;
}
#page-about .declaration-band-label{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
margin-bottom: 30px;
}
#page-about .declaration-band-label .label-line{
width: 30px;
height: 1px;
background: #c6a13f;
opacity: .95;
}
#page-about .declaration-band-label .label-text{
font-size: 12px;
letter-spacing: .18em;
color: #8a6d20;
font-weight: 500;
white-space: nowrap;
}
#page-about .declaration-band-message{
margin:0;
text-align:center;
font-family: var(--sans);
font-size: clamp(28px, 3.05vw, 52px);
line-height: 1.35;
letter-spacing: .01em;
color: #15243a;
font-weight: 800;
}
@media (max-width: 767px){
#page-about .declaration-centered-band{
margin-top: 28px;
padding: 4px 10px 10px;
}
#page-about .declaration-band-line{
height: 1px;
}
#page-about .declaration-band-line.top{
margin-bottom: 34px;
}
#page-about .declaration-band-line.bottom{
margin-top: 34px;
}
#page-about .declaration-band-label{
gap:10px;
margin-bottom:18px;
}
#page-about .declaration-band-label .label-line{
width: 18px;
}
#page-about .declaration-band-label .label-text{
font-size: 10px;
letter-spacing: .12em;
}
#page-about .declaration-band-message{
font-size: clamp(22px, 6.5vw, 32px);
line-height: 1.45;
}
}
/* v121: exact recreation of the supplied declaration design */
#page-about .declaration-centered-band{
margin-top: 42px !important;
padding: 44px 0 44px !important;
background: #f7f7f5 !important;
border: 0 !important;
box-shadow: none !important;
}
#page-about .declaration-centered-band .declaration-band-line{
width: calc(100% - 92px) !important;
height: 1px !important;
margin-left: auto !important;
margin-right: auto !important;
background: #b7922e !important;
opacity: 1 !important;
}
#page-about .declaration-centered-band .declaration-band-line.top{
margin-top: 0 !important;
margin-bottom: 56px !important;
}
#page-about .declaration-centered-band .declaration-band-line.bottom{
margin-top: 50px !important;
margin-bottom: 0 !important;
}
#page-about .declaration-centered-band .declaration-band-label{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
margin: 0 0 27px !important;
}
#page-about .declaration-centered-band .declaration-band-label .label-line{
display: block !important;
width: 29px !important;
height: 1px !important;
flex: 0 0 29px !important;
background: #b7922e !important;
opacity: 1 !important;
}
#page-about .declaration-centered-band .declaration-band-label .label-text{
display: block !important;
font-family: var(--sans) !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 500 !important;
letter-spacing: .14em !important;
color: #8f6c1d !important;
white-space: nowrap !important;
}
#page-about .declaration-centered-band .declaration-band-message{
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
font-family: var(--sans) !important;
font-size: clamp(32px, 3vw, 42px) !important;
line-height: 1.35 !important;
font-weight: 800 !important;
letter-spacing: .015em !important;
color: #10233a !important;
white-space: nowrap !important;
}
@media (max-width: 767px){
#page-about .declaration-centered-band{
margin-top: 28px !important;
padding: 32px 0 32px !important;
}
#page-about .declaration-centered-band .declaration-band-line{
width: calc(100% - 36px) !important;
}
#page-about .declaration-centered-band .declaration-band-line.top{
margin-bottom: 34px !important;
}
#page-about .declaration-centered-band .declaration-band-line.bottom{
margin-top: 34px !important;
}
#page-about .declaration-centered-band .declaration-band-label{
gap: 10px !important;
margin-bottom: 20px !important;
}
#page-about .declaration-centered-band .declaration-band-label .label-line{
width: 20px !important;
flex-basis: 20px !important;
}
#page-about .declaration-centered-band .declaration-band-label .label-text{
font-size: 11px !important;
letter-spacing: .10em !important;
}
#page-about .declaration-centered-band .declaration-band-message{
padding: 0 18px !important;
font-size: clamp(22px, 7vw, 30px) !important;
line-height: 1.5 !important;
white-space: normal !important;
}
}
/* v122: mobile adjustment only; desktop declaration uses inline styles */
@media (max-width: 767px){
#page-about .declaration-final{
margin-top:28px !important;
padding:32px 18px 34px !important;
}
#page-about .declaration-final > div:first-child{
margin-bottom:34px !important;
height:1px !important;
}
#page-about .declaration-final > div:nth-child(2){
margin-bottom:20px !important;
gap:10px !important;
}
#page-about .declaration-final > div:nth-child(2) span:first-child, #page-about .declaration-final > div:nth-child(2) span:last-child{
width:20px !important;
}
#page-about .declaration-final > div:nth-child(2) span:nth-child(2){
font-size:11px !important;
letter-spacing:.10em !important;
}
#page-about .declaration-final > div:nth-child(3){
padding:0 !important;
font-size:clamp(22px,7vw,30px) !important;
line-height:1.5 !important;
}
#page-about .declaration-final > div:last-child{
margin-top:34px !important;
}
}
}
/* ===== recruit.html ===== */
#page-recruit{
--deep:#0e2818;
--green:#224630;
--cream:#f0eee5;
--paper:#f8f7f2;
--ink:#17241c;
--leaf:#71806d;
--line:rgba(34,70,48,.16);
--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
--sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
--content:min(1180px,calc(100vw - 64px));
}
#page-recruit *{box-sizing:border-box}
#page-recruit{scroll-behavior:smooth}
#page-recruit{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
#page-recruit a{color:inherit;text-decoration:none}
#page-recruit img{display:block;max-width:100%}
#page-recruit .wrap{width:var(--content);margin:auto}
/* header */
#page-recruit .site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;padding:0 30px;
display:flex;align-items:center;background:rgba(248,247,242,.90);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(34,70,48,.10);
}
#page-recruit .brand{display:flex;align-items:center;flex:0 0 auto}
#page-recruit .brand__logo{width:clamp(190px,18vw,285px);height:auto;object-fit:contain}
#page-recruit .desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.15vw,18px);font-size:13.5px;white-space:nowrap}
#page-recruit .desktop-nav a{position:relative;padding:12px 0}
#page-recruit .desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--green);transition:.25s}
#page-recruit .desktop-nav a:hover::after, #page-recruit .desktop-nav a.is-current::after{right:0}
#page-recruit .menu-button{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;position:relative;cursor:pointer}
#page-recruit .menu-button::before, #page-recruit .menu-button::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:var(--ink)}
#page-recruit .menu-button::before{top:16px}
#page-recruit .menu-button::after{top:27px}
#page-recruit .mobile-nav{display:none;position:fixed;inset:72px 0 0;background:rgba(14,40,24,.98);color:#fff;z-index:999;padding:44px 28px}
#page-recruit .mobile-nav.is-open{display:flex;flex-direction:column}
#page-recruit .mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--serif);font-size:24px}
/* hero */
#page-recruit .recruit-hero{padding:158px 0 86px;background:var(--cream)}
#page-recruit .breadcrumb{margin:0 0 48px;font-size:11px;letter-spacing:.08em;color:var(--leaf)}
#page-recruit .recruit-hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw;align-items:end}
#page-recruit .recruit-hero-copy{margin:0;font-size:14px;line-height:2.1;color:rgba(23,36,28,.78)}
#page-recruit .eyebrow{margin:0 0 14px;font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--leaf)}
#page-recruit .recruit-hero h1{margin:0;font-family:var(--serif);font-size:45px;font-weight:400;line-height:1.3;letter-spacing:.08em}
/* photo */
#page-recruit .recruit-photo{padding:0 0 72px;background:var(--cream)}
#page-recruit .recruit-photo figure{margin:0;width:var(--content);height:420px;margin-inline:auto;overflow:hidden;background:#dce1d9}
#page-recruit .recruit-photo img{width:100%;height:100%;object-fit:cover;object-position:center 54%}
/* message */
#page-recruit .recruit-message{padding:88px 0;background:var(--paper)}
#page-recruit .message-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:8vw;align-items:start}
#page-recruit .section-no{margin:0 0 9px;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--leaf)}
#page-recruit .recruit-message h2, #page-recruit .requirements h2, #page-recruit .contact-section h2, #page-recruit .access-section h2{
margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.55;letter-spacing:.055em;
}
#page-recruit .message-copy{padding-top:28px}
#page-recruit .message-copy p{margin:0;font-size:14px;line-height:2.15;color:rgba(23,36,28,.78)}
#page-recruit .message-copy p+p{margin-top:16px}
#page-recruit .message-note{margin-top:32px!important;padding-top:24px;border-top:1px solid var(--line);font-family:var(--serif);font-size:18px!important;line-height:1.8!important;color:var(--ink)!important}
/* requirements */
#page-recruit .requirements{padding:92px 0 100px;background:var(--cream)}
#page-recruit .requirements-head{display:grid;grid-template-columns:.72fr 1.28fr;gap:8vw;align-items:end;margin-bottom:48px}
#page-recruit .requirements-head>p{margin:0 0 7px;font-size:13px;line-height:2;color:rgba(23,36,28,.70)}
#page-recruit .job-list{margin:0;border-top:1px solid var(--line)}
#page-recruit .job-row{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--line)}
#page-recruit .job-row dt, #page-recruit .job-row dd{margin:0;padding:19px 0;font-size:13.5px;line-height:1.9}
#page-recruit .job-row dt{color:var(--leaf);font-weight:500}
#page-recruit .job-row dd{padding-left:36px}
/* contact */
#page-recruit .contact-section{padding:92px 0;background:var(--paper)}
#page-recruit .contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw;align-items:start}
#page-recruit .contact-copy{padding-top:24px}
#page-recruit .contact-copy>p{margin:0 0 28px;font-size:13.5px;line-height:2;color:rgba(23,36,28,.74)}
#page-recruit .contact-links{border-top:1px solid var(--line)}
#page-recruit .contact-link{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:21px 0;border-bottom:1px solid var(--line);font-size:13.5px;transition:padding-left .22s ease}
#page-recruit .contact-link:hover{padding-left:8px}
#page-recruit .contact-link span:last-child{font-size:18px;font-weight:300}
/* access */
#page-recruit .access-section{padding:78px 0 88px;background:var(--cream)}
#page-recruit .access-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:8vw;align-items:start}
#page-recruit .access-info{padding-top:24px;padding-left:120px}
#page-recruit .access-company{margin:0 0 16px;font-family:var(--serif);font-size:20px}
#page-recruit .access-info p{margin:0 0 16px;font-size:13.5px;line-height:1.9;color:rgba(23,36,28,.76)}
#page-recruit .map-link{display:inline-flex;gap:32px;align-items:center;margin-top:8px;padding:12px 0;border-bottom:1px solid var(--ink);font-size:12.5px}
/* footer */
#page-recruit .site-footer{padding:64px 0 28px;background:var(--paper);border-top:1px solid var(--line)}
#page-recruit .footer-top{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:60px;padding-bottom:52px}
#page-recruit .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#page-recruit .footer-logo{width:260px;height:auto}
#page-recruit .footer-address{margin:0 0 0 18px;font-size:13.5px;line-height:1.8}
#page-recruit .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;font-size:13.5px}
#page-recruit .footer-bottom{width:var(--content);margin:auto;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:10px;color:rgba(23,36,28,.7)}
@media(max-width:1180px){
#page-recruit{--content:min(920px,calc(100vw - 44px))}
#page-recruit .site-header{height:72px}
#page-recruit .desktop-nav{display:none}
#page-recruit .menu-button{display:block}
#page-recruit .recruit-hero-grid, #page-recruit .message-grid, #page-recruit .requirements-head, #page-recruit .contact-grid, #page-recruit .access-grid{grid-template-columns:1fr;gap:28px}
#page-recruit .recruit-photo figure{height:380px}
#page-recruit .message-copy, #page-recruit .contact-copy, #page-recruit .access-info{padding-top:0;padding-left:0}
}
@media(max-width:767px){
#page-recruit{--content:calc(100vw - 32px)}
#page-recruit .site-header{height:68px;padding:0 16px}
#page-recruit .brand__logo{width:170px}
#page-recruit .mobile-nav{inset:68px 0 0}
#page-recruit .recruit-hero{padding:120px 0 58px}
#page-recruit .breadcrumb{margin-bottom:32px}
#page-recruit .recruit-hero h1{font-size:40px}
#page-recruit .recruit-photo{padding-bottom:50px}
#page-recruit .recruit-photo figure{width:100%;height:260px}
#page-recruit .recruit-message, #page-recruit .requirements, #page-recruit .contact-section, #page-recruit .access-section{padding:64px 0}
#page-recruit .recruit-message h2, #page-recruit .requirements h2, #page-recruit .contact-section h2, #page-recruit .access-section h2{font-size:32px}
#page-recruit .message-copy p{font-size:13.5px}
#page-recruit .message-note{font-size:17px!important}
#page-recruit .requirements-head{margin-bottom:32px}
#page-recruit .job-row{grid-template-columns:1fr}
#page-recruit .job-row dt{padding:14px 0 3px}
#page-recruit .job-row dd{padding:0 0 14px}
#page-recruit .contact-link{font-size:13px}
#page-recruit .footer-top{flex-direction:column;gap:34px;padding-bottom:40px}
#page-recruit .footer-logo{width:210px}
#page-recruit .footer-address{margin-left:14px}
#page-recruit .footer-links{grid-template-columns:repeat(2,1fr)}
}
/* v134: recruit hero follows the same layout as the case studies page */
#page-recruit .recruit-photo{display:none}
@media(max-width:767px){
#page-recruit .recruit-hero-copy{font-size:13px}
}
/* v135: keep recruit message heading to exactly two lines */
#page-recruit .recruit-message-title{
font-size:36px !important;
}
#page-recruit .recruit-message-title span{
display:block;
white-space:nowrap;
}
@media(max-width:767px){
#page-recruit .recruit-message-title{
font-size:30px !important;
}
}
/* v136: keep contact heading to exactly two lines */
#page-recruit .recruit-contact-title{
font-size:36px !important;
}
#page-recruit .recruit-contact-title span{
display:block;
white-space:nowrap;
}
@media(max-width:767px){
#page-recruit .recruit-contact-title{
font-size:30px !important;
}
}
/* ===== flow.html ===== */
#page-flow{
--deep:#0e2818;
--green:#224630;
--cream:#f0eee5;
--paper:#f8f7f2;
--ink:#17241c;
--leaf:#71806d;
--line:rgba(34,70,48,.16);
--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
--sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
--content:min(1180px,calc(100vw - 64px));
}
#page-flow *{box-sizing:border-box}
#page-flow{scroll-behavior:smooth}
#page-flow{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
#page-flow a{color:inherit;text-decoration:none}
#page-flow .wrap{width:var(--content);margin:auto}
/* header */
#page-flow .site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;padding:0 30px;
display:flex;align-items:center;background:rgba(248,247,242,.90);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(34,70,48,.10);
}
#page-flow .brand{display:flex;align-items:center;flex:0 0 auto}
#page-flow .brand__logo{width:clamp(190px,18vw,285px);height:auto;object-fit:contain}
#page-flow .desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.15vw,18px);font-size:13.5px;white-space:nowrap}
#page-flow .desktop-nav a{position:relative;padding:12px 0}
#page-flow .desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--green);transition:.25s}
#page-flow .desktop-nav a:hover::after, #page-flow .desktop-nav a.is-current::after{right:0}
#page-flow .menu-button{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;position:relative;cursor:pointer}
#page-flow .menu-button::before, #page-flow .menu-button::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:var(--ink)}
#page-flow .menu-button::before{top:16px}
#page-flow .menu-button::after{top:27px}
#page-flow .mobile-nav{display:none;position:fixed;inset:72px 0 0;background:rgba(14,40,24,.98);color:#fff;z-index:999;padding:44px 28px}
#page-flow .mobile-nav.is-open{display:flex;flex-direction:column}
#page-flow .mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--serif);font-size:24px}
/* hero */
#page-flow .page-hero{padding:158px 0 86px;background:var(--cream)}
#page-flow .breadcrumb{margin:0 0 48px;font-size:11px;letter-spacing:.08em;color:var(--leaf)}
#page-flow .hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw;align-items:end}
#page-flow .eyebrow{margin:0 0 15px;font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--leaf)}
#page-flow h1{margin:0;font-family:var(--serif);font-size:45px;font-weight:400;line-height:1.25;letter-spacing:.08em}
#page-flow .hero-copy{margin:0;font-size:14px;line-height:2.1;color:rgba(23,36,28,.78)}
/* intro */
#page-flow .flow-intro{padding:84px 0;background:var(--paper)}
#page-flow .flow-intro-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;align-items:start}
#page-flow .section-no{margin:0 0 9px;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--leaf)}
#page-flow .flow-intro h2, #page-flow .contact-section h2, #page-flow .access-section h2{
margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.55;letter-spacing:.055em;
}
#page-flow .flow-intro-copy{padding-top:28px}
#page-flow .flow-intro-copy p{margin:0;font-size:14px;line-height:2.15;color:rgba(23,36,28,.78)}
#page-flow .flow-intro-copy .strong{margin-top:25px;font-family:var(--serif);font-size:19px;line-height:1.9;color:var(--ink)}
/* flow */
#page-flow .flow-list-section{padding:0 0 100px;background:var(--paper)}
#page-flow .flow-list{border-top:1px solid var(--line)}
#page-flow .flow-step{
display:grid;
grid-template-columns:90px 310px 1fr;
gap:34px;
align-items:start;
padding:31px 0;
border-bottom:1px solid var(--line);
}
#page-flow .flow-step-number{padding-top:4px;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--green)}
#page-flow .flow-step-en{margin:0 0 8px;font-size:8px;font-weight:700;letter-spacing:.24em;color:var(--leaf)}
#page-flow .flow-step h3{margin:0;font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.6;letter-spacing:.04em}
#page-flow .flow-step-text{margin:0;padding-top:4px;font-size:13.5px;line-height:2;color:rgba(23,36,28,.74)}
#page-flow .flow-note{margin:22px 0 0;font-size:11px;line-height:1.8;color:rgba(23,36,28,.55)}
/* contact */
#page-flow .contact-section{padding:92px 0;background:var(--cream)}
#page-flow .contact-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;align-items:start}
#page-flow .contact-copy{padding-top:24px}
#page-flow .contact-copy p{margin:0 0 28px;font-size:13.5px;line-height:2;color:rgba(23,36,28,.74)}
#page-flow .contact-link{
display:flex;align-items:center;justify-content:space-between;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:22px 0;font-size:13.5px;transition:padding-left .22s ease;
}
#page-flow .contact-link:hover{padding-left:8px}
#page-flow .contact-link span:last-child{font-size:18px;font-weight:300}
/* access */
#page-flow .access-section{padding:82px 0 92px;background:var(--paper)}
#page-flow .access-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;align-items:start}
#page-flow .access-info{padding-top:22px;padding-left:120px}
#page-flow .access-company{margin:0 0 16px;font-family:var(--serif);font-size:20px}
#page-flow .access-info p{margin:0 0 16px;font-size:13.5px;line-height:1.9;color:rgba(23,36,28,.76)}
#page-flow .map-link{display:inline-flex;gap:32px;align-items:center;margin-top:8px;padding:12px 0;border-bottom:1px solid var(--ink);font-size:12.5px}
/* footer */
#page-flow .site-footer{padding:64px 0 28px;background:var(--cream);border-top:1px solid var(--line)}
#page-flow .footer-top{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:60px;padding-bottom:52px}
#page-flow .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#page-flow .footer-logo{width:260px;height:auto}
#page-flow .footer-address{margin:0 0 0 18px;font-size:13.5px;line-height:1.8}
#page-flow .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;font-size:13.5px}
#page-flow .footer-bottom{width:var(--content);margin:auto;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:10px;color:rgba(23,36,28,.7)}
@media(max-width:1180px){
#page-flow{--content:min(920px,calc(100vw - 44px))}
#page-flow .site-header{height:72px}
#page-flow .desktop-nav{display:none}
#page-flow .menu-button{display:block}
#page-flow .hero-grid, #page-flow .flow-intro-grid, #page-flow .contact-grid, #page-flow .access-grid{grid-template-columns:1fr;gap:30px}
#page-flow .flow-step{grid-template-columns:70px 260px 1fr;gap:24px}
#page-flow .flow-intro-copy, #page-flow .contact-copy, #page-flow .access-info{padding-top:0;padding-left:0}
}
@media(max-width:767px){
#page-flow{--content:calc(100vw - 32px)}
#page-flow .site-header{height:68px;padding:0 16px}
#page-flow .brand__logo{width:170px}
#page-flow .mobile-nav{inset:68px 0 0}
#page-flow .page-hero{padding:120px 0 58px}
#page-flow .breadcrumb{margin-bottom:32px}
#page-flow h1{font-size:40px}
#page-flow .hero-copy{font-size:13px}
#page-flow .flow-intro, #page-flow .contact-section, #page-flow .access-section{padding:64px 0}
#page-flow .flow-intro h2, #page-flow .contact-section h2, #page-flow .access-section h2{font-size:32px}
#page-flow .flow-intro-copy{padding-top:0}
#page-flow .flow-intro-copy p{font-size:13.5px}
#page-flow .flow-list-section{padding-bottom:68px}
#page-flow .flow-step{grid-template-columns:42px 1fr;gap:16px 18px;padding:26px 0}
#page-flow .flow-step-number{grid-row:1 / span 2}
#page-flow .flow-step-title{grid-column:2}
#page-flow .flow-step-text{grid-column:2;font-size:13px;padding-top:0}
#page-flow .access-info{padding-left:0}
#page-flow .footer-top{flex-direction:column;gap:34px;padding-bottom:40px}
#page-flow .footer-logo{width:210px}
#page-flow .footer-address{margin-left:14px}
#page-flow .footer-links{grid-template-columns:repeat(2,1fr)}
}
/* v140: keep intro heading to exactly two lines */
#page-flow .flow-intro-title{
font-size:36px !important;
}
#page-flow .flow-intro-title span{
display:block;
white-space:nowrap;
}
@media(max-width:767px){
#page-flow .flow-intro-title{
font-size:30px !important;
}
}
/* ===== contact.html ===== */
#page-contact{
--deep:#0e2818;
--green:#224630;
--cream:#f0eee5;
--paper:#f8f7f2;
--ink:#17241c;
--leaf:#71806d;
--line:rgba(34,70,48,.16);
--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
--sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
--content:min(1180px,calc(100vw - 64px));
}
#page-contact *{box-sizing:border-box}
#page-contact{scroll-behavior:smooth}
#page-contact{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
#page-contact a{color:inherit;text-decoration:none}
#page-contact button, #page-contact input, #page-contact textarea, #page-contact select{font:inherit}
#page-contact .wrap{width:var(--content);margin:auto}
/* header */
#page-contact .site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;padding:0 30px;
display:flex;align-items:center;background:rgba(248,247,242,.90);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(34,70,48,.10);
}
#page-contact .brand{display:flex;align-items:center;flex:0 0 auto}
#page-contact .brand__logo{width:clamp(190px,18vw,285px);height:auto;object-fit:contain}
#page-contact .desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.15vw,18px);font-size:13.5px;white-space:nowrap}
#page-contact .desktop-nav a{position:relative;padding:12px 0}
#page-contact .desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--green);transition:.25s}
#page-contact .desktop-nav a:hover::after{right:0}
#page-contact .menu-button{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;position:relative;cursor:pointer}
#page-contact .menu-button::before, #page-contact .menu-button::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:var(--ink)}
#page-contact .menu-button::before{top:16px}
#page-contact .menu-button::after{top:27px}
#page-contact .mobile-nav{display:none;position:fixed;inset:72px 0 0;background:rgba(14,40,24,.98);color:#fff;z-index:999;padding:44px 28px}
#page-contact .mobile-nav.is-open{display:flex;flex-direction:column}
#page-contact .mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--serif);font-size:24px}
/* hero */
#page-contact .page-hero{padding:158px 0 86px;background:var(--cream)}
#page-contact .breadcrumb{margin:0 0 48px;font-size:11px;letter-spacing:.08em;color:var(--leaf)}
#page-contact .hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:9vw;align-items:end}
#page-contact .eyebrow{margin:0 0 15px;font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--leaf)}
#page-contact h1{margin:0;font-family:var(--serif);font-size:45px;font-weight:400;line-height:1.25;letter-spacing:.08em}
#page-contact .hero-copy{margin:0;font-size:14px;line-height:2.1;color:rgba(23,36,28,.78)}
/* contact body */
#page-contact .contact-section{padding:92px 0 106px;background:var(--paper)}
#page-contact .contact-layout{display:grid;grid-template-columns:300px 1fr;gap:8vw;align-items:start}
#page-contact .contact-aside{position:sticky;top:118px}
#page-contact .contact-aside .section-no{margin:0 0 9px;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--leaf)}
#page-contact .contact-aside h2{margin:0 0 26px;font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.6;letter-spacing:.05em}
#page-contact .contact-aside p{margin:0 0 18px;font-size:12.5px;line-height:2;color:rgba(23,36,28,.70)}
#page-contact .contact-tel{display:block;margin-top:30px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#page-contact .contact-tel small{display:block;margin-bottom:6px;font-size:8px;letter-spacing:.22em;color:var(--leaf)}
#page-contact .contact-tel strong{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:.03em}
#page-contact .contact-form{margin:0}
#page-contact .form-group{padding:24px 0;border-top:1px solid var(--line)}
#page-contact .form-group:last-of-type{border-bottom:1px solid var(--line)}
#page-contact .form-label-row{display:flex;align-items:center;gap:12px;margin-bottom:13px}
#page-contact .form-label{font-size:13.5px;font-weight:500}
#page-contact .required{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid rgba(34,70,48,.35);font-size:9px;letter-spacing:.08em;color:var(--green)}
#page-contact .optional{font-size:9px;letter-spacing:.08em;color:var(--leaf)}
#page-contact .field, #page-contact input[type="text"], #page-contact input[type="email"], #page-contact input[type="tel"], #page-contact textarea{
width:100%;border:1px solid rgba(34,70,48,.18);background:#fff;color:var(--ink);outline:none;
padding:15px 16px;border-radius:0;transition:border-color .2s,box-shadow .2s;
}
#page-contact input:focus, #page-contact textarea:focus{border-color:rgba(34,70,48,.55);box-shadow:0 0 0 3px rgba(34,70,48,.06)}
#page-contact textarea{min-height:200px;resize:vertical;line-height:1.9}
#page-contact .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#page-contact .help{margin:8px 0 0;font-size:10.5px;line-height:1.7;color:rgba(23,36,28,.52)}
#page-contact .check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
#page-contact .check-item{display:flex;align-items:center;gap:10px;min-height:48px;padding:11px 13px;border:1px solid rgba(34,70,48,.14);background:#fff;font-size:12.5px;cursor:pointer}
#page-contact .check-item input{width:16px;height:16px;accent-color:var(--green)}
#page-contact .privacy-box{margin-top:28px;padding:18px 0;border-top:1px solid var(--line)}
#page-contact .privacy-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.8}
#page-contact .privacy-check input{margin-top:5px;width:16px;height:16px;accent-color:var(--green)}
#page-contact .submit-row{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:34px}
#page-contact .submit-note{margin-right:auto;font-size:10.5px;line-height:1.8;color:rgba(23,36,28,.52)}
#page-contact .submit-button{
min-width:240px;border:0;background:var(--green);color:#fff;padding:17px 22px;
display:inline-flex;align-items:center;justify-content:space-between;gap:28px;cursor:pointer;
transition:transform .2s,opacity .2s;
}
#page-contact .submit-button:hover{transform:translateX(3px)}
#page-contact .submit-button span:last-child{font-size:18px;font-weight:300}
/* footer */
#page-contact .site-footer{padding:64px 0 28px;background:var(--cream);border-top:1px solid var(--line)}
#page-contact .footer-top{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:60px;padding-bottom:52px}
#page-contact .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#page-contact .footer-logo{width:260px;height:auto}
#page-contact .footer-address{margin:0 0 0 18px;font-size:13.5px;line-height:1.8}
#page-contact .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;font-size:13.5px}
#page-contact .footer-bottom{width:var(--content);margin:auto;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:10px;color:rgba(23,36,28,.7)}
@media(max-width:1180px){
#page-contact{--content:min(920px,calc(100vw - 44px))}
#page-contact .site-header{height:72px}
#page-contact .desktop-nav{display:none}
#page-contact .menu-button{display:block}
#page-contact .hero-grid{grid-template-columns:1fr;gap:30px}
#page-contact .contact-layout{grid-template-columns:1fr;gap:46px}
#page-contact .contact-aside{position:static}
}
@media(max-width:767px){
#page-contact{--content:calc(100vw - 32px)}
#page-contact .site-header{height:68px;padding:0 16px}
#page-contact .brand__logo{width:170px}
#page-contact .mobile-nav{inset:68px 0 0}
#page-contact .page-hero{padding:120px 0 58px}
#page-contact .breadcrumb{margin-bottom:32px}
#page-contact h1{font-size:40px}
#page-contact .hero-copy{font-size:13px}
#page-contact .contact-section{padding:64px 0 72px}
#page-contact .contact-aside h2{font-size:28px}
#page-contact .two-col, #page-contact .check-grid{grid-template-columns:1fr}
#page-contact .submit-row{align-items:stretch;flex-direction:column}
#page-contact .submit-note{margin-right:0}
#page-contact .submit-button{width:100%}
#page-contact .footer-top{flex-direction:column;gap:34px;padding-bottom:40px}
#page-contact .footer-logo{width:210px}
#page-contact .footer-address{margin-left:14px}
#page-contact .footer-links{grid-template-columns:repeat(2,1fr)}
}
/* ===== uploaded works.html scoped styles ===== */
#page-works .works-showcase{
--deep:#0e2818;--green:#224630;--pale:#dfe5dc;--cream:#f0eee5;--paper:#f8f7f2;
--ink:#17241c;--leaf:#71806d;--line:rgba(34,70,48,.16);
--serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
--sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
--content:min(1180px,calc(100vw - 64px));
}
#page-works .works-showcase *{box-sizing:border-box}
#page-works .works-showcase{scroll-behavior:smooth}
#page-works .works-showcase{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
#page-works .works-showcase a{color:inherit;text-decoration:none}
#page-works .works-showcase .site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;padding:0 30px;
display:flex;align-items:center;background:rgba(248,247,242,.88);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(34,70,48,.10);
}
#page-works .works-showcase .brand{display:flex;align-items:center;flex:0 0 auto}
#page-works .works-showcase .brand__logo{width:clamp(190px,18vw,285px);height:auto;object-fit:contain}
#page-works .works-showcase .desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.15vw,18px);font-size:13.5px;white-space:nowrap}
#page-works .works-showcase .desktop-nav a{position:relative;padding:12px 0}
#page-works .works-showcase .desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--green);transition:.25s}
#page-works .works-showcase .desktop-nav a:hover::after, #page-works .works-showcase .desktop-nav a.is-current::after{right:0}
#page-works .works-showcase .menu-button{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;position:relative}
#page-works .works-showcase .menu-button::before, #page-works .works-showcase .menu-button::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:var(--ink);transition:.3s}
#page-works .works-showcase .menu-button::before{top:16px}
#page-works .works-showcase .menu-button::after{top:27px}
#page-works .works-showcase .mobile-nav{display:none;position:fixed;inset:76px 0 0;background:rgba(14,40,24,.98);color:#fff;z-index:999;padding:44px 28px}
#page-works .works-showcase .mobile-nav.is-open{display:flex;flex-direction:column}
#page-works .works-showcase .mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--serif);font-size:24px}
#page-works .works-showcase .page-hero{padding:154px 0 84px;background:var(--cream)}
#page-works .works-showcase .wrap{width:var(--content);margin:auto}
#page-works .works-showcase .breadcrumb{margin:0 0 50px;font-size:11px;letter-spacing:.08em;color:var(--leaf)}
#page-works .works-showcase .hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw;align-items:end}
#page-works .works-showcase .eyebrow{margin:0 0 16px;font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--leaf)}
#page-works .works-showcase h1{margin:0;font-family:var(--serif);font-size:clamp(48px,6vw,84px);font-weight:400;line-height:1.2;letter-spacing:.08em}
#page-works .works-showcase .hero-copy{margin:0 0 10px;font-size:14px;line-height:2.15;color:rgba(23,36,28,.78)}
#page-works .works-showcase .filters{position:sticky;top:76px;z-index:20;background:rgba(248,247,242,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#page-works .works-showcase .filter-inner{width:var(--content);margin:auto;display:flex;gap:26px;overflow:auto;padding:18px 0}
#page-works .works-showcase .filter-btn{border:0;background:none;padding:5px 0;font:inherit;font-size:12px;letter-spacing:.08em;color:var(--leaf);cursor:pointer;white-space:nowrap;position:relative}
#page-works .works-showcase .filter-btn.is-active{color:var(--ink);font-weight:600}
#page-works .works-showcase .filter-btn.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--green)}
#page-works .works-showcase .works-section{padding:90px 0 120px;background:var(--paper)}
#page-works .works-showcase .gallery{width:var(--content);margin:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:80px;gap:18px}
#page-works .works-showcase .project{position:relative;overflow:hidden;background:#d5dbd3;transition:.25s}
#page-works .works-showcase .project.is-hidden{display:none}
#page-works .works-showcase .project:nth-child(1){grid-column:1/8;grid-row:span 5}
#page-works .works-showcase .project:nth-child(2){grid-column:8/13;grid-row:span 3}
#page-works .works-showcase .project:nth-child(3){grid-column:8/13;grid-row:span 2}
#page-works .works-showcase .project:nth-child(4){grid-column:1/5;grid-row:span 4}
#page-works .works-showcase .project:nth-child(5){grid-column:5/13;grid-row:span 4}
#page-works .works-showcase .project:nth-child(6){grid-column:1/7;grid-row:span 4}
#page-works .works-showcase .project:nth-child(7){grid-column:7/13;grid-row:span 4}
#page-works .works-showcase .project:nth-child(8){grid-column:1/13;grid-row:span 4}
#page-works .works-showcase .project__image{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#page-works .works-showcase .project:hover .project__image{transform:scale(1.035)}
#page-works .works-showcase .project::after{content:"";position:absolute;inset:44% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.62));pointer-events:none}
#page-works .works-showcase .project__meta{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff}
#page-works .works-showcase .project__type{display:block;margin-bottom:6px;font-size:9px;font-weight:700;letter-spacing:.22em;opacity:.8}
#page-works .works-showcase .project__title{margin:0;font-family:var(--serif);font-size:clamp(20px,2vw,30px);font-weight:400;letter-spacing:.06em}
#page-works .works-showcase .project__sub{margin:8px 0 0;font-size:11px;opacity:.8}
#page-works .works-showcase .approach{padding:100px 0;background:var(--cream)}
#page-works .works-showcase .approach-grid{width:var(--content);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start}
#page-works .works-showcase .approach h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.55;letter-spacing:.07em}
#page-works .works-showcase .approach p{margin:0;font-size:13px;line-height:2.1}
#page-works .works-showcase .approach-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
#page-works .works-showcase .approach-list div{padding:22px 18px;border-top:1px solid var(--line);font-size:12px;line-height:1.8}
#page-works .works-showcase .approach-list b{display:block;margin-bottom:8px;color:var(--green);font-size:13px}
#page-works .works-showcase .cta{padding:92px 0;background:var(--paper)}
#page-works .works-showcase .cta-inner{width:var(--content);margin:auto;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center;border-top:1px solid var(--line);padding-top:46px}
#page-works .works-showcase .cta h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.5;letter-spacing:.06em}
#page-works .works-showcase .cta p{margin:14px 0 0;font-size:13px;line-height:2;color:rgba(23,36,28,.76)}
#page-works .works-showcase .cta-link{display:inline-flex;align-items:center;gap:34px;padding:16px 0;border-bottom:1px solid var(--ink);font-size:13px;font-weight:600;letter-spacing:.08em}
#page-works .works-showcase .site-footer{padding:64px 0 28px;background:var(--cream);border-top:1px solid var(--line)}
#page-works .works-showcase .footer-top{width:var(--content);margin:auto;display:flex;justify-content:space-between;gap:60px;padding-bottom:52px}
#page-works .works-showcase .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#page-works .works-showcase .footer-logo{width:260px;height:auto}
#page-works .works-showcase .footer-address{margin:0 0 0 18px;font-size:13.5px;line-height:1.8}
#page-works .works-showcase .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;font-size:13.5px}
#page-works .works-showcase .footer-bottom{width:var(--content);margin:auto;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:10px;color:rgba(23,36,28,.7)}
@media(max-width:1180px){#page-works .works-showcase{--content:min(920px,calc(100vw - 44px))}
#page-works .works-showcase .desktop-nav{display:none}
#page-works .works-showcase .menu-button{display:block}
#page-works .works-showcase .hero-grid{grid-template-columns:1fr;gap:36px}
#page-works .works-showcase .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px}
#page-works .works-showcase .project, #page-works .works-showcase .project:nth-child(n){grid-column:auto;grid-row:auto;min-height:240px}
#page-works .works-showcase .project:nth-child(1), #page-works .works-showcase .project:nth-child(8){grid-column:span 2}
#page-works .works-showcase .approach-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:767px){#page-works .works-showcase{--content:calc(100vw - 32px)}
#page-works .works-showcase .site-header{height:68px;padding:0 16px}
#page-works .works-showcase .brand__logo{width:170px}
#page-works .works-showcase .mobile-nav{inset:68px 0 0}
#page-works .works-showcase .page-hero{padding:118px 0 60px}
#page-works .works-showcase .breadcrumb{margin-bottom:34px}
#page-works .works-showcase h1{font-size:44px}
#page-works .works-showcase .hero-copy{font-size:13px}
#page-works .works-showcase .filters{top:68px}
#page-works .works-showcase .filter-inner{gap:20px;padding:15px 0}
#page-works .works-showcase .works-section{padding:58px 0 80px}
#page-works .works-showcase .gallery{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px;width:100%}
#page-works .works-showcase .project, #page-works .works-showcase .project:nth-child(n){grid-column:auto;grid-row:auto;min-height:260px}
#page-works .works-showcase .project__meta{left:18px;right:18px;bottom:17px}
#page-works .works-showcase .approach{padding:72px 0}
#page-works .works-showcase .approach h2, #page-works .works-showcase .cta h2{font-size:34px}
#page-works .works-showcase .approach-list{grid-template-columns:1fr}
#page-works .works-showcase .cta{padding:70px 0}
#page-works .works-showcase .cta-inner{grid-template-columns:1fr;gap:28px}
#page-works .works-showcase .footer-top{flex-direction:column;gap:34px;padding-bottom:40px}
#page-works .works-showcase .footer-logo{width:210px}
#page-works .works-showcase .footer-address{margin-left:14px;font-size:13.5px}
#page-works .works-showcase .footer-links{grid-template-columns:repeat(2,1fr);font-size:13.5px}}
@media (min-width:768px) and (max-width:1180px){#page-works .works-showcase .site-header{height:72px!important}
#page-works .works-showcase .mobile-nav{inset:72px 0 0!important}
#page-works .works-showcase .filters{top:72px!important}}
/* v74: works page main title size */
#page-works .works-showcase .page-hero h1{
font-size: 45px !important;
}
/* v76: make work-card text much more subtle so photography is the focus */
#page-works .works-showcase .project::after{
inset: 66% 0 0 !important;
background: linear-gradient(transparent, rgba(0,0,0,.34)) !important;
}
#page-works .works-showcase .project__meta{
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
}
#page-works .works-showcase .project__type{
margin-bottom: 4px !important;
font-size: 7px !important;
font-weight: 600 !important;
letter-spacing: .18em !important;
opacity: .72 !important;
}
#page-works .works-showcase .project__title{
font-size: 14px !important;
line-height: 1.45 !important;
letter-spacing: .04em !important;
}
#page-works .works-showcase .project__sub{
display: none !important;
}
@media (max-width: 767px) {#page-works .works-showcase .project__meta{
left: 14px !important;
right: 14px !important;
bottom: 13px !important;
}
#page-works .works-showcase .project__type{
font-size: 6.5px !important;
}
#page-works .works-showcase .project__title{
font-size: 13px !important;
}}
/* v77: refine OUR APPROACH section */
#page-works .works-showcase .approach-grid{
grid-template-columns: 1fr !important;
gap: 26px !important;
}
#page-works .works-showcase .approach h2{
font-size: 40px !important;
line-height: 1.45 !important;
white-space: nowrap !important;
letter-spacing: .06em !important;
}
#page-works .works-showcase .approach-grid > div:last-child > p{
max-width: 900px !important;
font-size: 15px !important;
line-height: 2 !important;
}
#page-works .works-showcase .approach-list{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 22px !important;
margin-top: 34px !important;
}
#page-works .works-showcase .approach-list div{
padding: 24px 18px 10px !important;
font-size: 15px !important;
line-height: 1.75 !important;
}
#page-works .works-showcase .approach-list b{
margin-bottom: 12px !important;
font-size: 18px !important;
font-weight: 500 !important;
}
@media (max-width: 767px) {#page-works .works-showcase .approach h2{
font-size: 34px !important;
white-space: normal !important;
}
#page-works .works-showcase .approach-grid > div:last-child > p{
font-size: 14px !important;
}
#page-works .works-showcase .approach-list{
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#page-works .works-showcase .approach-list div{
font-size: 14px !important;
}
#page-works .works-showcase .approach-list b{
font-size: 17px !important;
}}
/* v78: approach copy one line on PC, item text 16px */
@media (min-width: 1181px) {#page-works .works-showcase .approach-grid > div:last-child > p{
white-space: nowrap !important;
max-width: none !important;
font-size: 15px !important;
}}
#page-works .works-showcase .approach-list div{
font-size: 16px !important;
}
@media (max-width: 1180px) {#page-works .works-showcase .approach-grid > div:last-child > p{
white-space: normal !important;
}}
@media (max-width: 767px) {#page-works .works-showcase .approach-list div{
font-size: 16px !important;
}}
/* ===== v149: 添付施工実績 + 既存施工実績一覧の二段構成 ===== */
#page-works .works-showcase{
display:block;
width:100%;
}
/* 統合サイトの固定ヘッダーがあるため、添付HTML側の sticky filter を調整 */
#page-works .works-showcase .filters{
top:76px !important;
}
#page-works .works-archive-heading{
padding:88px 0 34px;
background:#f6f7f8;
}
#page-works .works-archive-heading__inner{
width:min(1535px, calc(100vw - 96px));
margin:0 auto;
text-align:center;
}
#page-works .works-archive-heading__eyebrow{
margin:0 0 13px;
font-size:9px;
font-weight:600;
letter-spacing:.22em;
color:#71806d;
}
#page-works .works-archive-heading h2{
margin:0;
font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
font-size:40px;
line-height:1.45;
font-weight:400;
letter-spacing:.06em;
color:#17241c;
}
/* 見出し直後なので、既存一覧の上余白を少し整理 */
#page-works .works-archive-heading + .works-list-section{
padding-top:34px !important;
}
@media (min-width:768px) and (max-width:1180px){
#page-works .works-showcase .filters{
top:72px !important;
}
}
@media (max-width:767px){
#page-works .works-showcase .filters{
top:68px !important;
}
#page-works .works-archive-heading{
padding:62px 0 26px;
}
#page-works .works-archive-heading__inner{
width:calc(100% - 32px);
}
#page-works .works-archive-heading h2{
font-size:32px;
}
#page-works .works-archive-heading + .works-list-section{
padding-top:28px !important;
}
}
/* v150: 施工実績CTA → 施工実績一覧へのページ内移動 */
#works-archive{
scroll-margin-top: 76px;
}
@media (max-width:1180px){
#works-archive{ scroll-margin-top:72px; }
}
@media (max-width:767px){
#works-archive{ scroll-margin-top:68px; }
}
/* v152: 施工事例 OUR WORK 説明文を画面幅に応じて自動改行 */
#page-cases .intro-grid > p{
width: min(100%, 37em) !important;
max-width: none !important;
white-space: normal !important;
overflow-wrap: normal;
word-break: normal;
}
/* =========================================================
v153: 全ページ文字折り返し最終調整
- 本文・説明文は固定改行を使わず、利用可能幅いっぱいまで使用
- 意図的なタイトル2行構成、住所・電話番号の改行は維持
========================================================= */
/* 共通：説明文は自然な自動改行 */
#page-works .hero-copy,
#page-cases .hero-copy,
#page-recruit .recruit-hero-copy,
#page-flow .hero-copy,
#page-contact .hero-copy,
#page-home .service-note p,
#page-recruit .message-note,
#page-works .works-showcase .cta h2,
#page-flow .contact-section h2,
#page-contact .contact-aside h2{
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
text-wrap: wrap !important;
}
/* サブページのヒーロー右側文章：
グリッドの空き幅をそのまま使い、早すぎる折り返しを防ぐ */
#page-works .hero-copy,
#page-cases .hero-copy,
#page-recruit .recruit-hero-copy,
#page-flow .hero-copy,
#page-contact .hero-copy{
width: 100% !important;
max-width: none !important;
}
/* トップページの相談案内はPCで十分な横幅があるため、
文章を固定2行にせず自然に1行利用 */
#page-home .service-note__text{
min-width: 0 !important;
}
#page-home .service-note p{
width: 100% !important;
max-width: none !important;
}
/* 求人ページの補足：
右カラムの横幅を有効利用 */
#page-recruit .message-note{
width: 100% !important;
max-width: none !important;
}
/* 施工実績一覧CTA：
PCでは短い見出しなので、入る場合は1行で表示 */
#page-works .works-showcase .cta h2{
width: auto !important;
max-width: none !important;
}
/* 画面が狭くなれば、タイトル類も自然に折り返す */
#page-flow .contact-section h2,
#page-contact .contact-aside h2{
max-width: 100% !important;
}
/* 前回調整した施工事例 OUR WORK の文章は、
PCでは「…緑の空間をつくり、」付近まで1行を使い、
その後は画面幅に合わせて自然に折り返す */
#page-cases .intro-grid > p{
width: min(100%, 37em) !important;
max-width: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
/* タブレット以下は横幅100%で自動折り返し */
@media (max-width:1180px){
#page-works .hero-copy,
#page-cases .hero-copy,
#page-recruit .recruit-hero-copy,
#page-flow .hero-copy,
#page-contact .hero-copy,
#page-recruit .message-note,
#page-cases .intro-grid > p{
width: 100% !important;
max-width: none !important;
}
}
/* スマホでは文字が画面外へ出ないよう確実に折り返す */
@media (max-width:767px){
#page-home .service-note p,
#page-works .works-showcase .cta h2,
#page-flow .contact-section h2,
#page-contact .contact-aside h2{
width: 100% !important;
white-space: normal !important;
}
}
/* v154: 施工事例 OUR WORK 説明文
PCでは1行、狭い画面では自然に自動改行 */
@media (min-width:1181px){
#page-cases .intro-grid > p{
width:100% !important;
max-width:none !important;
white-space:nowrap !important;
}
}
@media (max-width:1180px){
#page-cases .intro-grid > p{
width:100% !important;
max-width:none !important;
white-space:normal !important;
}
}
/* =========================================================
v155: 施工実績と施工実績一覧を別画面表示
同じHTML内だが、上下に連続表示しない
========================================================= */
/* 通常の施工実績画面では年度別一覧を隠す */
#page-works:not(.is-archive) .works-archive-heading,
#page-works:not(.is-archive) .works-list-section{
display:none !important;
}
/* 施工実績一覧画面では写真・事例側を隠す */
#page-works.is-archive .works-showcase{
display:none !important;
}
/* 一覧画面側を表示 */
#page-works.is-archive .works-archive-heading,
#page-works.is-archive .works-list-section{
display:block !important;
}
/* 一覧を単独画面として見た時の上部余白 */
#page-works.is-archive .works-archive-heading{
padding-top:88px !important;
}
@media(max-width:767px){
#page-works.is-archive .works-archive-heading{
padding-top:62px !important;
}
}
/* v157: footer navigation 4 columns on PC/tablet */
@media (min-width:768px){
.merge-footer__links{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
}
/* v158: トップページのみ、最上部ではヘッダー背景を透明にする */
.merge-header{
transition: background .32s ease, border-color .32s ease, backdrop-filter .32s ease, box-shadow .32s ease;
}
.merge-header.is-home-top{
background:transparent !important;
border-bottom-color:transparent !important;
backdrop-filter:none !important;
box-shadow:none !important;
}
/* v159: トップ最上部の透明ヘッダー時はメニュー文字を白にする */
.merge-header .merge-nav a,
.merge-header .merge-mobile summary{
transition: color .32s ease, opacity .32s ease;
}
.merge-header.is-home-top .merge-nav a,
.merge-header.is-home-top .merge-mobile summary{
color:#fff !important;
}
/* スクロール後・他ページは従来の濃い文字色 */
.merge-header:not(.is-home-top) .merge-nav a,
.merge-header:not(.is-home-top) .merge-mobile summary{
color:var(--merge-ink) !important;
}
/* v160: 求人情報ページだけ、直前のACCESSとフッター背景が続かないよう反転 */
.merge-footer.is-recruit-footer{
background:var(--merge-paper) !important;
}
/* =========================================================
v161 GREEN ACCENT TRIAL
レイアウト・背景・写真は変更せず、
文字 / 線 / 導線 / 選択状態だけに緑を追加
========================================================= */
/* 1. ヘッダー右端「お問い合わせ」を細い緑枠でアクセント */
.merge-nav a[href="#page-contact"]{
border:1px solid var(--merge-green);
padding:9px 14px !important;
line-height:1;
transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.merge-nav a[href="#page-contact"]::after{
display:none !important;
}
.merge-nav a[href="#page-contact"]:hover{
background:rgba(34,70,48,.055);
}
.merge-header.is-home-top .merge-nav a[href="#page-contact"]{
border-color:rgba(255,255,255,.82);
color:#fff !important;
background:rgba(255,255,255,.04);
}
/* 2. 英字ラベル・セクション番号を少し強い緑へ */
#page-home .eyebrow,
#page-home .service-note__eyebrow,
#page-works .eyebrow,
#page-works .works-showcase .eyebrow,
#page-works .works-archive-heading__eyebrow,
#page-cases .eyebrow,
#page-about .eyebrow,
#page-about .section-no,
#page-about .initiative-number,
#page-recruit .eyebrow,
#page-recruit .section-no,
#page-flow .eyebrow,
#page-flow .section-no,
#page-flow .flow-step-number,
#page-contact .eyebrow,
#page-contact .contact-aside .section-no{
color:#31583d !important;
}
/* 濃色背景上のラベルは白系を維持 */
#page-home .promise .eyebrow,
#page-home .company-points .eyebrow,
#page-home .recruit .eyebrow,
#page-about .access-section .eyebrow,
#page-about .access-section .section-no{
color:rgba(255,255,255,.64) !important;
}
/* 3. テキストリンク・矢印・下線に緑 */
#page-home .text-link,
#page-works .text-link,
#page-cases .text-link,
#page-about .text-link,
#page-works .works-showcase .cta-link{
border-bottom-color:#31583d !important;
}
#page-home .text-link span:last-child,
#page-works .text-link span:last-child,
#page-cases .text-link span:last-child,
#page-about .text-link span:last-child,
#page-works .works-showcase .cta-link span,
#page-recruit .contact-link span:last-child,
#page-flow .contact-link span:last-child{
color:#31583d !important;
}
/* 4. 表・一覧の罫線をほんの少し緑寄りに */
#page-about .timeline,
#page-about .timeline-row,
#page-about .profile-list,
#page-about .profile-list>div,
#page-about .plain-list,
#page-about .plain-list li,
#page-about .initiative-grid,
#page-about .initiative-item,
#page-recruit .message-note,
#page-recruit .job-list,
#page-recruit .job-row,
#page-recruit .contact-links,
#page-recruit .contact-link,
#page-flow .flow-list,
#page-flow .flow-step,
#page-flow .contact-link,
#page-contact .contact-tel,
#page-contact .form-group,
#page-contact .privacy-box{
border-color:rgba(49,88,61,.24) !important;
}
/* 5. 施工実績一覧の年度選択色をサイトの深緑に統一 */
#page-works #year-2024:checked ~ .year-tabs label[for="year-2024"],
#page-works #year-2023:checked ~ .year-tabs label[for="year-2023"],
#page-works #year-2022:checked ~ .year-tabs label[for="year-2022"],
#page-works #year-2021:checked ~ .year-tabs label[for="year-2021"],
#page-works #year-2020:checked ~ .year-tabs label[for="year-2020"],
#page-works #year-2019:checked ~ .year-tabs label[for="year-2019"]{
background:#31583d !important;
color:#fff !important;
}
#page-works .year-tabs .year-tab{
border:1px solid rgba(49,88,61,.14) !important;
background:#edf0eb !important;
color:#31583d !important;
}
/* 6. 施工実績のカテゴリー選択 */
#page-works .works-showcase .filter-btn.is-active{
color:#31583d !important;
}
#page-works .works-showcase .filter-btn.is-active::after{
background:#31583d !important;
height:2px !important;
}
/* 7. 求人・企業情報の項目名を少し濃い緑に */
#page-about .profile-list dt,
#page-about .plain-list li::before,
#page-recruit .job-row dt,
#page-flow .flow-step-en{
color:#4f6e56 !important;
}
/* 8. お問い合わせフォーム：通常は控えめ、選択時に緑を明確化 */
#page-contact .field,
#page-contact input[type="text"],
#page-contact input[type="email"],
#page-contact input[type="tel"],
#page-contact textarea,
#page-contact .check-item{
border-color:rgba(49,88,61,.20) !important;
}
#page-contact input:focus,
#page-contact textarea:focus{
border-color:#31583d !important;
box-shadow:0 0 0 3px rgba(49,88,61,.08) !important;
}
#page-contact .required{
border-color:rgba(49,88,61,.48) !important;
color:#31583d !important;
}
/* 9. フッターは文字量を増やさず、問い合わせだけ緑で締める */
.merge-footer__links a[href="#page-contact"]{
color:#31583d;
font-weight:600;
}
/* 10. スマホでは枠付きヘッダーCTAはハンバーガー内なので通常表示に戻す */
@media(max-width:1180px){
.merge-nav a[href="#page-contact"]{
border:0;
padding:12px 0 !important;
}
}
/* =========================================================
v162 FINAL POLISH
全ページの細部統一：
余白 / 文字階層 / リンク / ホバー / 罫線
※レイアウト・写真・ページ構成は変更しない
========================================================= */
/* ---------- 共通の文字階層 ---------- */
#page-works .hero-copy,
#page-cases .hero-copy,
#page-about .about-copy p,
#page-recruit .recruit-hero-copy,
#page-recruit .message-copy p,
#page-flow .hero-copy,
#page-flow .flow-step-text,
#page-contact .hero-copy{
font-size:14px !important;
line-height:2.05 !important;
color:rgba(23,36,28,.78) !important;
}
#page-cases .eyebrow,
#page-about .eyebrow,
#page-recruit .eyebrow,
#page-flow .eyebrow,
#page-contact .eyebrow,
#page-works .works-showcase .eyebrow{
font-size:10px !important;
line-height:1.4 !important;
}
/* 下層ページの主要見出しを同じリズムへ */
#page-cases .intro h2,
#page-cases .case h2,
#page-cases .related h2,
#page-about .about-section h2,
#page-recruit .recruit-message h2,
#page-recruit .requirements h2,
#page-recruit .contact-section h2,
#page-recruit .access-section h2,
#page-flow .flow-intro h2,
#page-flow .contact-section h2,
#page-contact .contact-aside h2{
font-weight:400 !important;
line-height:1.5 !important;
letter-spacing:.055em !important;
}
/* ---------- セクション余白 ---------- */
/* ページごとの既存個性は残しつつ、上下の呼吸を近づける */
#page-cases .intro{padding-top:86px !important;padding-bottom:86px !important;}
#page-cases .case{padding-top:88px !important;padding-bottom:88px !important;}
#page-cases .related{padding-top:88px !important;padding-bottom:88px !important;}
#page-about .philosophy-section,
#page-about .history-section,
#page-about .profile-section,
#page-about .registration-section,
#page-about .associations-section,
#page-about .initiatives-section{
padding-top:92px !important;
padding-bottom:92px !important;
}
#page-recruit .recruit-message,
#page-recruit .requirements,
#page-recruit .contact-section{
padding-top:90px !important;
padding-bottom:90px !important;
}
#page-flow .flow-intro,
#page-flow .flow-section,
#page-flow .contact-section{
padding-top:90px !important;
padding-bottom:90px !important;
}
/* ---------- リンク / 矢印の動きを統一 ---------- */
#page-home .text-link,
#page-works .text-link,
#page-works .works-showcase .cta-link,
#page-cases .text-link,
#page-about .text-link,
#page-about .map-link,
#page-recruit .map-link,
#page-recruit .contact-link,
#page-flow .contact-link{
transition:
color .24s ease,
border-color .24s ease,
opacity .24s ease,
padding-left .24s ease !important;
}
#page-home .text-link span:last-child,
#page-works .text-link span:last-child,
#page-works .works-showcase .cta-link span,
#page-cases .text-link span:last-child,
#page-about .text-link span:last-child,
#page-recruit .contact-link span:last-child,
#page-flow .contact-link span:last-child,
#page-about .map-link span:last-child,
#page-recruit .map-link span:last-child{
display:inline-block;
transition:transform .24s ease !important;
}
#page-home .text-link:hover span:last-child,
#page-works .text-link:hover span:last-child,
#page-works .works-showcase .cta-link:hover span,
#page-cases .text-link:hover span:last-child,
#page-about .text-link:hover span:last-child,
#page-recruit .contact-link:hover span:last-child,
#page-flow .contact-link:hover span:last-child,
#page-about .map-link:hover span:last-child,
#page-recruit .map-link:hover span:last-child{
transform:translateX(5px);
}
#page-home .text-link:hover,
#page-works .text-link:hover,
#page-works .works-showcase .cta-link:hover,
#page-cases .text-link:hover,
#page-about .text-link:hover,
#page-about .map-link:hover,
#page-recruit .map-link:hover{
border-bottom-color:#31583d !important;
}
/* ---------- 写真ホバーを同じ強さに ---------- */
#page-cases .case-image img,
#page-about figure img,
#page-recruit .recruit-photo img,
#page-works .works-showcase .project__image{
transition:transform .72s cubic-bezier(.2,.7,.2,1), opacity .3s ease !important;
}
@media (hover:hover) and (pointer:fine){
#page-cases .case:hover .case-image img,
#page-about figure:hover img,
#page-recruit .recruit-photo figure:hover img{
transform:scale(1.022) !important;
}
}
/* ---------- 表 / リスト罫線の濃度を統一 ---------- */
#page-about .timeline,
#page-about .timeline-row,
#page-about .profile-list,
#page-about .profile-list>div,
#page-about .plain-list,
#page-about .plain-list li,
#page-recruit .job-list,
#page-recruit .job-row,
#page-recruit .contact-links,
#page-recruit .contact-link,
#page-flow .flow-list,
#page-flow .flow-step,
#page-contact .form-group,
#page-contact .privacy-box{
border-color:rgba(49,88,61,.22) !important;
}
/* ---------- 企業情報：沿革を少しだけ読みやすく ---------- */
#page-about .timeline-row{
padding-top:27px !important;
padding-bottom:27px !important;
}
#page-about .timeline-year{
color:#31583d !important;
}
#page-about .timeline-row strong{
line-height:1.65 !important;
}
/* ---------- 求人情報：募集要項の読みやすさ ---------- */
#page-recruit .job-row dt,
#page-recruit .job-row dd{
padding-top:20px !important;
padding-bottom:20px !important;
}
#page-recruit .job-row dt{
font-weight:600 !important;
}
/* ---------- お見積り：工程の視線誘導を少し強化 ---------- */
#page-flow .flow-step-number{
font-size:14px !important;
color:#31583d !important;
}
#page-flow .flow-step-en{
color:#4f6e56 !important;
}
#page-flow .flow-step h3{
font-weight:500 !important;
}
/* ---------- お問い合わせ：入力フォーカス統一 ---------- */
#page-contact input,
#page-contact textarea,
#page-contact select{
transition:border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
}
#page-contact input:focus,
#page-contact textarea:focus,
#page-contact select:focus{
outline:none !important;
border-color:#31583d !important;
box-shadow:0 0 0 3px rgba(49,88,61,.075) !important;
}
/* ---------- フッター ---------- */
.merge-footer__links a{
transition:color .22s ease, opacity .22s ease;
}
.merge-footer__links a:hover{
color:#31583d;
opacity:.72;
}
/* ---------- PC：ページヒーローの縦位置を揃える ---------- */
@media(min-width:1181px){
#page-cases .page-hero,
#page-recruit .recruit-hero,
#page-flow .page-hero,
#page-contact .page-hero{
padding-top:158px !important;
padding-bottom:86px !important;
}
}
/* ---------- タブレット ---------- */
@media(min-width:768px) and (max-width:1180px){
#page-cases .intro,
#page-cases .related,
#page-about .philosophy-section,
#page-about .history-section,
#page-about .profile-section,
#page-about .registration-section,
#page-about .associations-section,
#page-about .initiatives-section,
#page-recruit .recruit-message,
#page-recruit .requirements,
#page-recruit .contact-section,
#page-flow .flow-intro,
#page-flow .flow-section,
#page-flow .contact-section{
padding-top:76px !important;
padding-bottom:76px !important;
}
}
/* ---------- スマホ：既存レイアウトを壊さず、間隔だけ整える ---------- */
@media(max-width:767px){
#page-cases .intro,
#page-cases .related,
#page-about .philosophy-section,
#page-about .history-section,
#page-about .profile-section,
#page-about .registration-section,
#page-about .associations-section,
#page-about .initiatives-section,
#page-recruit .recruit-message,
#page-recruit .requirements,
#page-recruit .contact-section,
#page-flow .flow-intro,
#page-flow .flow-section,
#page-flow .contact-section{
padding-top:64px !important;
padding-bottom:64px !important;
}
#page-cases .case{
padding-top:56px !important;
padding-bottom:56px !important;
}
#page-about .timeline-row{
padding-top:21px !important;
padding-bottom:21px !important;
}
#page-recruit .job-row dt{
padding-top:15px !important;
padding-bottom:4px !important;
}
#page-recruit .job-row dd{
padding-top:0 !important;
padding-bottom:15px !important;
}
}
/* =========================================================
v164 GREEN PLUS TRIAL
緑を少しだけ追加：
1) 英字ラベル横の細い縦線
2) セクション番号を少し強調
3) 重要導線の緑枠・ホバー
※背景・写真・レイアウトは変更しない
========================================================= */
#page-home .eyebrow,
#page-works .works-showcase .eyebrow,
#page-works .works-archive-heading__eyebrow,
#page-cases .eyebrow,
#page-about .eyebrow,
#page-recruit .eyebrow,
#page-flow .eyebrow,
#page-contact .eyebrow{
display:inline-flex !important;
align-items:center;
gap:10px;
}
#page-home .eyebrow::before,
#page-works .works-showcase .eyebrow::before,
#page-works .works-archive-heading__eyebrow::before,
#page-cases .eyebrow::before,
#page-about .eyebrow::before,
#page-recruit .eyebrow::before,
#page-flow .eyebrow::before,
#page-contact .eyebrow::before{
content:"";
display:block;
width:2px;
height:16px;
background:#31583d;
opacity:.82;
flex:0 0 auto;
}
#page-home .promise .eyebrow::before,
#page-home .company-points .eyebrow::before,
#page-home .recruit .eyebrow::before,
#page-about .access-section .eyebrow::before{
background:rgba(255,255,255,.72);
}
#page-about .section-no,
#page-about .initiative-number,
#page-recruit .section-no,
#page-flow .section-no,
#page-flow .flow-step-number,
#page-contact .contact-aside .section-no{
color:#31583d !important;
font-weight:600 !important;
letter-spacing:.08em !important;
}
#page-about .access-section .section-no{
color:rgba(255,255,255,.74) !important;
}
#page-works .works-showcase .cta-link{
border:1px solid #31583d !important;
padding:13px 18px !important;
min-width:168px;
justify-content:space-between;
background:transparent;
transition:background .24s ease,color .24s ease,border-color .24s ease,transform .24s ease !important;
}
#page-works .works-showcase .cta-link:hover{
background:rgba(49,88,61,.055);
transform:translateY(-1px);
}
.merge-nav a[href="#page-contact"]{
border-color:#31583d !important;
}
#page-recruit .contact-link,
#page-flow .contact-link,
#page-about .map-link,
#page-recruit .map-link{
transition:background .24s ease,border-color .24s ease,color .24s ease !important;
}
@media (hover:hover) and (pointer:fine){
#page-recruit .contact-link:hover,
#page-flow .contact-link:hover,
#page-about .map-link:hover,
#page-recruit .map-link:hover{
background:rgba(49,88,61,.045) !important;
}
}
.merge-footer__links a[href="#page-contact"]{
position:relative;
}
.merge-footer__links a[href="#page-contact"]::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-4px;
height:1px;
background:#31583d;
opacity:.6;
}
@media(max-width:767px){
#page-home .eyebrow::before,
#page-works .works-showcase .eyebrow::before,
#page-works .works-archive-heading__eyebrow::before,
#page-cases .eyebrow::before,
#page-about .eyebrow::before,
#page-recruit .eyebrow::before,
#page-flow .eyebrow::before,
#page-contact .eyebrow::before{
height:14px;
}
#page-works .works-showcase .cta-link{
width:100%;
min-width:0;
}
}
/* v165: WORKPLACEラベルを淡い背景でも読める深緑へ */
#page-home .company-points .eyebrow{
color:#31583d !important;
}
#page-home .company-points .eyebrow::before{
background:#31583d !important;
opacity:.82 !important;
}
/* ===== merged: block 2 (後付け上書き) ===== */
/* v166: darken RECRUIT eyebrow labels to match other section labels */
#page-home .recruit__heading .eyebrow,
#page-recruit .recruit-hero .eyebrow{
color:#31583d !important;
opacity:1 !important;
}
/* =========================================================
v167: PDF指示反映
1. ヘッダーロゴをナビ文字に合わせて場所により反転
2. 理念写真を下へ寄せ、庭の写真1を横に追加
3. 庭園設計・施工をリニューアル前の写真へ戻す
4. 会社情報・沿革の表内文字を拡大
========================================================= */
/* 1. ヘッダーロゴ：透明ヘッダーでは白、白背景では従来色 */
.merge-header .merge-logo{
transition:filter .32s ease, opacity .32s ease !important;
}
.merge-header.is-home-top .merge-logo{
filter:brightness(0) invert(1) !important;
}
.merge-header:not(.is-home-top) .merge-logo{
filter:none !important;
}
/* 2. OUR PHILOSOPHY：既存写真は石が見えるよう下側を表示 */
#page-home .intro__visual{
width:min(1180px, calc(100% - (var(--page-gutter) * 2))) !important;
max-width:1180px !important;
height:clamp(300px, 31vw, 410px) !important;
display:grid !important;
grid-template-columns:minmax(0, 1.16fr) minmax(0, .84fr) !important;
gap:18px !important;
overflow:visible !important;
}
#page-home .intro__photo{
position:relative !important;
inset:auto !important;
width:100% !important;
height:100% !important;
background-position:center 72% !important;
background-size:cover !important;
}
#page-home .intro__photo-secondary{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
border:1px solid rgba(49,88,61,.14);
}
/* 3. 庭園設計・施工：リニューアル前と同じ庭園写真へ */
#page-home .service-card__image--garden{
background-image:var(--img-a9df24f4) !important;
background-position:center 62% !important;
}
/* 4. 会社沿革・会社情報：表内文字を本文と同程度へ */
#page-home .history-row p,
#page-home .company-table dt,
#page-home .company-table dd,
#page-home .company-table dd a{
font-size:14px !important;
line-height:1.9 !important;
}
#page-home .company-table dt{
font-weight:600 !important;
letter-spacing:.09em !important;
}
@media (max-width:1180px){
#page-home .intro__visual{
width:min(920px, calc(100% - var(--page-gutter))) !important;
height:auto !important;
grid-template-columns:1fr 1fr !important;
}
#page-home .intro__photo,
#page-home .intro__photo-secondary{
min-height:320px !important;
}
#page-home .history-row p,
#page-home .company-table dt,
#page-home .company-table dd,
#page-home .company-table dd a{
font-size:13.5px !important;
}
}
@media (max-width:767px){
#page-home .intro__visual{
width:100% !important;
grid-template-columns:1fr !important;
gap:12px !important;
}
#page-home .intro__photo,
#page-home .intro__photo-secondary{
min-height:280px !important;
}
#page-home .intro__photo{
background-position:center 70% !important;
}
#page-home .history-row p,
#page-home .company-table dt,
#page-home .company-table dd,
#page-home .company-table dd a{
font-size:13px !important;
line-height:1.85 !important;
}
}
/* v168: ヘッダーロゴをナビ文字と同じ色思想に統一
透明ヘッダー＝白 / 白背景ヘッダー＝濃色 */
.merge-header .merge-logo{
transition:filter .32s ease, opacity .32s ease !important;
}
/* トップ最上部：白文字と同じ白 */
.merge-header.is-home-top .merge-logo{
filter:brightness(0) invert(1) !important;
}
/* スクロール後・下層ページ：ナビ文字に合わせた濃色 */
.merge-header:not(.is-home-top) .merge-logo{
filter:brightness(0) saturate(100%) invert(10%) sepia(12%) saturate(956%) hue-rotate(92deg) brightness(92%) contrast(92%) !important;
}
/* v169: トップ「庭園設計・施工」をリニューアル前の見せ方へ */
#page-home .service-card__image--garden{
background-position:center 62% !important;
}
/* 写真下部の緑帯 */
#page-home .service-card__image--garden::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:auto !important;
bottom:0 !important;
height:20% !important;
background:rgba(20,150,68,.78) !important;
z-index:1 !important;
}
/* 緑帯上の白文字 */
#page-home .service-card__image--garden .garden-image-label{
position:absolute !important;
z-index:2 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:20% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#fff !important;
font-family:var(--serif) !important;
font-size:clamp(17px,1.55vw,23px) !important;
font-weight:400 !important;
letter-spacing:.06em !important;
text-shadow:0 1px 2px rgba(0,0,0,.16) !important;
}
@media(max-width:767px){
#page-home .service-card__image--garden::after,
#page-home .service-card__image--garden .garden-image-label{
height:19% !important;
}
#page-home .service-card__image--garden .garden-image-label{
font-size:20px !important;
}
}
/* =========================================================
v170: トップ「東北造園の仕事」3カードの見せ方を統一
リニューアル前と同じ「写真＋下部の緑帯＋白文字」へ
（v169では1枚目のみ適用されていたものを2・3枚目にも展開）
v171: 緑帯の透明度を上げ、帯の下の写真が透けて見えるように
========================================================= */
#page-home .service-card__image::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:auto !important;
bottom:0 !important;
height:20% !important;
background:rgba(20,150,68,.55) !important;
z-index:1 !important;
}
#page-home .service-card__image .service-image-label{
position:absolute !important;
z-index:2 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:20% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#fff !important;
font-family:var(--serif) !important;
font-size:clamp(17px,1.55vw,23px) !important;
font-weight:400 !important;
letter-spacing:.06em !important;
text-shadow:0 1px 3px rgba(0,0,0,.42) !important;
}
@media(max-width:767px){
#page-home .service-card__image::after,
#page-home .service-card__image .service-image-label{
height:19% !important;
}
#page-home .service-card__image .service-image-label{
font-size:20px !important;
}
}
/* =========================================================
v172: 3カードを現行サイト（tohokuzouen.com）と同じ見せ方に合わせる
・写真を現行サイトのトップ3枚と同一に差し替え
・緑帯の色／不透明度を現行サイトの実測値に一致させた
（実測: rgb(0,139,20) / alpha 0.63・帯の高さ カード比 19.5%）
========================================================= */
#page-home .service-card__image--garden{
background-image:var(--img-da3dcba2) !important;
background-position:center center !important;
}
#page-home .service-card__image--maintenance{
background-image:var(--img-008d323d) !important;
background-position:center center !important;
}
#page-home .service-card__image::after{
background:rgba(0,139,20,.63) !important;
height:19.5% !important;
}
#page-home .service-card__image .service-image-label{
height:19.5% !important;
text-shadow:0 1px 2px rgba(0,0,0,.28) !important;
}
@media(max-width:767px){
#page-home .service-card__image::after,
#page-home .service-card__image .service-image-label{
height:19.5% !important;
}
}
/* =========================================================
v173: 企業情報セクションの文字を読みやすいサイズへ
・沿革の説明文と会社概要テーブルを 14px/13.5px → 16px
・同セクションの他の本文も併せて引き上げ、大小関係を維持
========================================================= */
#page-home .history-row p,
#page-home .company-table dt,
#page-home .company-table dd,
#page-home .company-table dd a,
#page-home .company-table dl > div:first-child dd{
font-size:16px !important;
line-height:1.85 !important;
}
#page-home .company__summary{
font-size:15px !important;
line-height:2 !important;
}
#page-home .company-points li{
font-size:14px !important;
line-height:1.8 !important;
}
/* 文字を大きくした分、項目名の列を詰めて本文の折り返しを整える
（「事業登録」の行が2行目に1文字だけ落ちるのを防ぐ） */
#page-home .company-table dl > div{
grid-template-columns:110px minmax(0,1fr) !important;
gap:22px !important;
}
@media (max-width:767px){
#page-home .company-table dl > div{
grid-template-columns:1fr !important;
gap:5px !important;
}
}
@media (max-width:1180px){
#page-home .history-row p,
#page-home .company-table dt,
#page-home .company-table dd,
#page-home .company-table dd a,
#page-home .company-table dl > div:first-child dd{
font-size:15.5px !important;
}
#page-home .company__summary{ font-size:14.5px !important; }
#page-home .company-points li{ font-size:13.5px !important; }
}
@media (max-width:767px){
#page-home .history-row p,
#page-home .company-table dt,
#page-home .company-table dd,
#page-home .company-table dd a,
#page-home .company-table dl > div:first-child dd{
font-size:15px !important;
line-height:1.8 !important;
}
#page-home .company__summary{ font-size:14px !important; }
#page-home .company-points li{ font-size:13.5px !important; }
}
/* =========================================================
v174: 企業情報ページに「社長あいさつ」を追加
本文は支給された原稿（社長あいさつ.docx）をそのまま使用
========================================================= */
#page-about .message-signature{
margin-top:38px !important;
text-align:right !important;
font-family:var(--serif) !important;
font-size:17px !important;
letter-spacing:.06em !important;
color:var(--ink) !important;
}
#page-about .message-signature strong{ font-weight:400 !important; }
#page-about .about-copy strong{ font-weight:600 !important; color:var(--ink) !important; }
@media (max-width:767px){
#page-about .message-signature{ font-size:15.5px !important; margin-top:28px !important; }
}
/* =========================================================
v176: 社長あいさつ（02）の余白と区切り線
・他セクションと同じ上下余白を付与（「02」が直上に貼り付く状態を解消）
・02と03の境目に、本文幅に合わせた区切り線を追加
========================================================= */
#page-about .message-section{
position:relative;
padding-top:92px !important;
padding-bottom:92px !important;
background:var(--cream) !important;
}
#page-about .message-section::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:0;
width:var(--content);
border-top:1px solid var(--line);
}
@media (min-width:768px) and (max-width:1180px){
#page-about .message-section{
padding-top:76px !important;
padding-bottom:76px !important;
}
}
@media (max-width:767px){
#page-about .message-section{
padding-top:64px !important;
padding-bottom:64px !important;
}
}
/* =========================================================
v177: 会社概要の更新とマーク表示の修正
・ベビーファーストのマークが正方形にcoverで収められ上下が
切れていたため、全体が入るcontainへ変更
・会社概要に追加したメールアドレスのリンク体裁
========================================================= */
#page-about .initiative-item-baby .initiative-photo{
object-fit:contain !important;
background:transparent !important;
}
#page-about .profile-list dd a{
color:inherit !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
text-decoration-thickness:1px !important;
text-decoration-color:var(--line) !important;
}
/* =========================================================
v178: トップ 会社概要「主な事業」をPC版で1行に収める
・表の列を少し広げ、項目名の列と間隔を詰めて本文幅を確保
・文字サイズは v173 のまま（16px）維持
・1180px以下（タブレット・スマホ）には影響させない
========================================================= */
@media (min-width:1181px){
#page-home .company__body{
grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr) !important;
}
#page-home .company-table dl > div{
grid-template-columns:96px minmax(0,1fr) !important;
gap:18px !important;
}
}
/* 1181〜1279px の細めのPC画面でも1行を維持する */
@media (min-width:1181px) and (max-width:1279px){
#page-home .company__body{
grid-template-columns:minmax(0,1.40fr) minmax(0,.60fr) !important;
gap:56px !important;
}
#page-home .company-table dl > div{
grid-template-columns:88px minmax(0,1fr) !important;
gap:16px !important;
}
}
/* =========================================================
v179: WORKPLACE見出し「仕事と生活の調和を大切に。」をPC版で1行に
・v178で緑ボックスが狭くなり2行に折り返していたため、
ボックス幅に収まる文字サイズへ調整（23px → 20px）
・1181〜1279pxはボックスがさらに狭いので、画面幅に応じて
16.5px→20pxへ滑らかに変化させる
・1180px以下は従来のままで変更しない
========================================================= */
@media (min-width:1280px){
#page-home .company-points h3{
font-size:20px !important;
line-height:1.6 !important;
}
}
@media (min-width:1181px) and (max-width:1279px){
#page-home .company-points h3{
font-size:calc(16.5px + (100vw - 1181px) * 0.018) !important;
line-height:1.6 !important;
}
}
/* =========================================================
v181: 企業情報ページの本文サイズを 13〜14px → 15px へ統一
・会社概要の表、企業理念・社長あいさつ本文、事業登録・加入団体の
項目、取り組みの本文、アクセスの住所を対象
・事業経歴の年表本文は見出し(17px)との差を保つため 14px
・見出し・eyebrow・番号は変更しない
========================================================= */
#page-about .profile-list dt,
#page-about .profile-list dd,
#page-about .profile-list dd a,
#page-about .about-copy p,
#page-about .plain-list li,
#page-about .initiative-item p,
#page-about .initiatives-head > p,
#page-about .access-info p:not(.access-company){
font-size:15px !important;
line-height:1.95 !important;
}
#page-about .timeline-row p{
font-size:14px !important;
line-height:1.9 !important;
}
#page-about .history-image figcaption{
font-size:12px !important;
}
@media (max-width:767px){
#page-about .profile-list dt,
#page-about .profile-list dd,
#page-about .profile-list dd a,
#page-about .about-copy p,
#page-about .plain-list li,
#page-about .initiative-item p,
#page-about .initiatives-head > p,
#page-about .access-info p:not(.access-company){
font-size:14.5px !important;
line-height:1.9 !important;
}
}
/* =========================================================
v182:
・企業理念(01)と社長あいさつ(02)の間にも、02・03間と同じ区切り線
・トップのサービスカード見出しを帯と同じ「緑地の維持管理」に統一
・Wix依存の画像12点をHTMLへ直接埋め込み（v183で単一ファイル化。CSS変数で重複を排除）
・v185: トップ3カードの写真をクライアント支給の原本（縮小1400px）に差し替え
========================================================= */
#page-about .philosophy-section{ position:relative; }
#page-about .philosophy-section::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:0;
width:var(--content);
border-top:1px solid var(--line);
}
/* =========================================================
v184（修正してほしいところ3.pdf）
① トップ3カード：写真内の緑帯と文字を撤去（説明は写真下にあるため）
② フッターの会社名ロゴをヘッダーと同じ濃色に（住所と同系色）
③ 社長あいさつの署名を少し大きく
④ 活動宣言の写真枠2つを旧サイトと同じ写真に差し替え
========================================================= */
/* ① */
#page-home .service-card__image::after{ display:none !important; content:none !important; }
#page-home .service-card__image .service-image-label,
#page-home .service-card__image .garden-image-label{ display:none !important; }
/* ② */
.merge-footer .merge-logo{
filter:brightness(0) saturate(100%) invert(10%) sepia(12%) saturate(956%) hue-rotate(92deg) brightness(92%) contrast(92%) !important;
}
/* ③（v181の .about-copy p より詳細度を上げて上書き） */
#page-about .about-copy p.message-signature{
font-size:20px !important;
line-height:1.7 !important;
margin-top:44px !important;
}
@media (max-width:767px){
#page-about .about-copy p.message-signature{ font-size:17.5px !important; margin-top:32px !important; }
}
/* ④ */
#page-about .activity-photo{
margin:0;
width:100%;
aspect-ratio:3 / 2;
overflow:hidden;
background:#efeee8;
}
#page-about .activity-photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* =========================================================
v186: フッターの住所（〒）の始まりをロゴの見た目の左端に揃える
実測：ロゴの描画開始は要素左端から2px、住所は18pxのインデント
→ 差分16pxを詰める
========================================================= */
.merge-footer__address{ margin-left:2px !important; }
/* =========================================================
v187: ヘッダーのロゴが切替の一瞬だけ緑（元色）に見える現象を修正
原因：白用と濃色用の filter の関数構成が異なり、遷移中に補間できず
一瞬 filter:none（元の緑ロゴ）を経由していた
対処：白用も濃色用と同じ8関数構成にして、途中の色も補間できるようにする
========================================================= */
.merge-header.is-home-top .merge-logo{
filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}
/* =========================================================
v188: ヘッダー／フッターのロゴを filter による色変換から、
（v192: マーク部分は元のカラーのまま、社名だけ白／濃色に）
白・濃色に塗り分けた2枚の画像の切替へ変更
理由：filter 方式は切替アニメーションや backdrop-filter との
組み合わせで一瞬「元の緑」が描かれる環境があり、v187の
補間修正でも解消しなかったため、仕組みごと置き換える
========================================================= */
:root{
--logo-white: url("/images/logo-white.png");
--logo-dark: url("/images/logo-dark.png");
}
.merge-header .merge-logo,
.merge-header.is-home-top .merge-logo,
.merge-header:not(.is-home-top) .merge-logo,
.merge-footer .merge-logo{
filter:none !important;
transition:none !important;
}
.merge-header .merge-logo{
background-image:var(--logo-dark) !important;
}
.merge-header.is-home-top .merge-logo{
background-image:var(--logo-white) !important;
}
.merge-footer .merge-logo{
background-image:var(--logo-dark) !important;
}
/* =========================================================
v189: 施工実績の絞り込み時に空きマスが出る問題を修正
原因：各カードの位置が :nth-child(N) で固定されており、非表示にした
カードの場所がそのまま空くため（例：左が空いて右だけ残る）
対処：絞り込み中（.is-filtered）は固定配置を解除し、同じ大きさの
カードとして左から順に並べる。「すべて」の時は従来の配置のまま
========================================================= */
@media (min-width:1181px){
#page-works .works-showcase.is-filtered .project,
#page-works .works-showcase.is-filtered .project:nth-child(n){
grid-column:span 6 !important;
grid-row:span 4 !important;
}
}
@media (max-width:1180px){
#page-works .works-showcase.is-filtered .project,
#page-works .works-showcase.is-filtered .project:nth-child(n){
grid-column:span 1 !important;
grid-row:auto !important;
}
}
/* =========================================================
v190: お見積りの流れ — 導入文「ご希望や現地の状況を確認しながら…」を
右カラム（2行に折り返し）から、手順一覧(01〜)の直上へ1行で配置
========================================================= */
#page-flow .flow-list-lead{
margin:0 0 34px;
font-family:var(--serif);
font-size:19px;
line-height:1.8;
letter-spacing:.04em;
color:var(--ink);
white-space:nowrap;
}
@media (max-width:1180px){
#page-flow .flow-list-lead{ font-size:17px; }
}
@media (max-width:767px){
#page-flow .flow-list-lead{ font-size:16px; white-space:normal; margin-bottom:24px; }
}
/* =========================================================
v191: お見積りの流れ — 右カラムの導入文「庭木を一本だけ…」の位置を
40px下げ、左の見出し「緑に関することなら、…」の高さに揃える
========================================================= */
@media (min-width:768px){
#page-flow .flow-intro-copy{ padding-top:68px !important; }
}
/* =========================================================
v193: 施工実績一覧に「業務実績2025年（令和７年度）」を追加
既存の年度タブと同じ切替ルールを2025年分にも適用。初期表示は2025年
========================================================= */
#page-works #year-2025:checked ~ .year-tabs label[for="year-2025"]{
background:#31583d !important;
color:#fff !important;
}
#page-works #year-2025:checked ~ .year-panels .year-panel-2025{ display:block; }
#page-works #year-2025:checked ~ .year-heading-group .year-heading-2025{ display:block; }
/* =========================================================
v194: 年度タブをコンパクトに
・7年分を1行に収める（横並び・内容幅で自動整列）
・ラベルは「2025年」形式（「業務実績」は直上の見出しにあるため省略）
・高さ 48px → 38px、文字 15px → 14px
========================================================= */
#page-works .year-tabs{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
gap:8px !important;
margin-bottom:28px !important;
}
#page-works .year-tabs .year-tab{
flex:0 0 auto !important;
min-height:38px !important;
padding:8px 22px !important;
font-size:14px !important;
border-radius:4px !important;
}
@media (max-width:767px){
#page-works .year-tabs{ gap:6px !important; margin-bottom:20px !important; }
#page-works .year-tabs .year-tab{ min-height:34px !important; padding:6px 14px !important; font-size:13px !important; }
}
/* =========================================================
v195: 電話番号はすべて tel: リンクに統一（スマホでタップ発信）
企業情報の会社概要・アクセス、求人情報のアクセスに追加
========================================================= */
#page-about .access-info p a,
#page-recruit .access-info p a{
color:inherit !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
text-decoration-thickness:1px !important;
text-decoration-color:var(--line) !important;
}
/* =========================================================
v196: アクセス欄の社名「東北造園株式会社」を、フッターのロゴと
同じ書体にする（ロゴ画像の文字部分をそのまま使用・同じ表示倍率）
========================================================= */
.access-company-logo{
display:block;
width:207px;
height:auto;
margin:0 0 4px;
}
@media (max-width:767px){
.access-company-logo{ width:190px; }
}
/* =========================================================
v198: ヘッダーロゴの扱いを整理
・暗い背景（トップ最上部の写真の上）… マークも文字も白
・白い背景（スクロール後・下層ページ・フッター）… カラーのマーク＋濃色の社名
・ヘッダーのロゴを一回り大きく（285→330px、スマホ 170→196px）
========================================================= */
.merge-header .merge-logo{
width:330px !important;
height:60px !important;
}
@media (max-width:767px){
.merge-header .merge-logo{
width:196px !important;
height:51px !important;
}
}
/* =========================================================
v200: スマホで見出しが右端で切れる不具合を修正
対象：お見積りの流れ「緑に関することなら、／どんなに小さなことでも。」
求人情報「採用について、／お気軽にご相談ください。」
原因：見出しの各行に「折り返し禁止」が指定され、画面幅より長い行が
グリッドの列幅を押し広げ、右側が画面外に出ていた
対処：スマホでは折り返しを許可し、列幅が内容に引きずられないようにする
========================================================= */
@media (max-width:767px){
#page-flow .flow-intro-grid,
#page-recruit .contact-grid,
#page-recruit .message-grid{
grid-template-columns:minmax(0,1fr) !important;
}
#page-flow .flow-intro-grid > *,
#page-recruit .contact-grid > *,
#page-recruit .message-grid > *{
min-width:0 !important;
max-width:100% !important;
}
/* 見出しの行ごとの折り返し禁止は、スマホでは全ページで解除
（画面幅より長い行があると右端が切れるため） */
.merged-page h2 span{
white-space:normal !important;
}
/* 意図した行割り（1行目／2行目）を保てるよう、画面幅に応じて縮小 */
#page-flow .flow-intro-title,
#page-recruit .recruit-message-title,
#page-recruit .contact-grid h2{
font-size:min(30px, 6.9vw) !important;
line-height:1.5 !important;
letter-spacing:.04em !important;
}
}
/* =========================================================
v201: お問い合わせフォームを EmailJS に接続
・確認画面（送信する／戻って修正する）と送信結果の表示を追加
・フォーム本体のHTML・入力チェックは従来のまま
========================================================= */
#page-contact .contact-confirm{
margin-top:8px;
padding:34px 30px 30px;
background:#fff;
border:1px solid var(--line, #d9d6cc);
}
#page-contact .contact-confirm__lead{
margin:0 0 22px;
font-size:15px;
line-height:1.9;
color:var(--ink, #17241c);
}
#page-contact .contact-confirm__list{ margin:0; }
#page-contact .contact-confirm__list > div{
display:grid;
grid-template-columns:150px minmax(0,1fr);
gap:14px;
padding:14px 0;
border-top:1px solid var(--line, #d9d6cc);
}
#page-contact .contact-confirm__list > div:last-child{ border-bottom:1px solid var(--line, #d9d6cc); }
#page-contact .contact-confirm__list dt{
margin:0;
font-size:13.5px;
color:var(--muted, #5a6560);
}
#page-contact .contact-confirm__list dd{
margin:0;
font-size:15px;
line-height:1.85;
color:var(--ink, #17241c);
white-space:pre-wrap;
word-break:break-word;
}
#page-contact .contact-confirm__list dd:empty::before{ content:"（未入力）"; color:var(--muted, #8a938e); }
#page-contact .contact-confirm__error{
margin:20px 0 0;
padding:12px 16px;
font-size:14px;
line-height:1.8;
color:#9b2c2c;
background:#fdf3f3;
border:1px solid #efc9c9;
}
#page-contact .contact-confirm__actions{
display:flex;
flex-wrap:wrap;
gap:14px;
justify-content:flex-end;
margin-top:26px;
}
#page-contact .contact-confirm__back{
background:transparent !important;
color:var(--ink, #17241c) !important;
border:1px solid var(--ink, #17241c) !important;
}
#page-contact .contact-confirm button[disabled]{
opacity:.55;
cursor:not-allowed;
}
#page-contact .contact-done{
margin-top:8px;
padding:44px 30px;
background:#fff;
border:1px solid var(--line, #d9d6cc);
text-align:center;
}
#page-contact .contact-done__text{
margin:0;
font-size:16px;
line-height:2;
color:var(--ink, #17241c);
}
@media (max-width:767px){
#page-contact .contact-confirm{ padding:24px 18px 22px; }
#page-contact .contact-confirm__list > div{ grid-template-columns:1fr; gap:4px; }
#page-contact .contact-confirm__actions{ flex-direction:column-reverse; }
#page-contact .contact-confirm__actions .submit-button{ width:100%; }
}
/* =========================================================
v202: スマホ版トップの見出しを意図した2行に収める
「心に潤いを与える緑を、／日々の暮らしの中へ。」
「緑に関する仕事を、／総合的に。」
40px固定のため画面幅より1行が長く、4行・3行に割れていた。
画面幅に応じて縮小し、どの幅でも2行で収まるようにする
========================================================= */
@media (max-width:767px){
#page-home .section-heading h2{
font-size:min(40px, 7vw) !important;
line-height:1.55 !important;
letter-spacing:.03em !important;
}
#page-home .section-heading h2 span{
display:block !important;
white-space:nowrap !important;
}
}
/* =========================================================
v204: スマホ版トップの小見出し4か所を、画面幅に応じて自動縮小
・「ご相談から施工まで」「仕事と生活の調和を大切に。」→ 1行
・「地域の緑とともに、／歩み続ける。」「緑に関することなら、／どんなに小さなことでも。」→ 2行
各行は途中で折り返さない（端末フォントの幅差があっても行数が変わらない）
========================================================= */
@media (max-width:767px){
#page-home .flow .section-heading h2,
#page-home .company .section-heading h2{
font-size:min(27.3px, 7.2vw) !important;
letter-spacing:.03em !important;
line-height:1.55 !important;
white-space:nowrap !important;
}
#page-home .company .section-heading h2 span{
display:block !important;
white-space:nowrap !important;
}
#page-home .company-points h3{
font-size:min(23.4px, 5.2vw) !important;
letter-spacing:.04em !important;
line-height:1.6 !important;
white-space:nowrap !important;
}
#page-home .contact__heading h2{
font-size:min(40px, 6.9vw) !important;
letter-spacing:.03em !important;
line-height:1.55 !important;
}
#page-home .contact__heading h2 span{
display:block !important;
white-space:nowrap !important;
}
}
/* =========================================================
v205: スマホ版トップの小見出し（各セクションのh2）の文字サイズを統一
「緑に関することなら、…」と同じ min(40px, 6.9vw) に揃える
対象：理念／仕事／施工実績／流れ／会社概要／求人／お問い合わせ
========================================================= */
@media (max-width:767px){
#page-home .section-heading h2,
#page-home .flow .section-heading h2,
#page-home .company .section-heading h2,
#page-home .recruit__heading h2,
#page-home .contact__heading h2{
font-size:min(40px, 6.9vw) !important;
letter-spacing:.03em !important;
line-height:1.55 !important;
}
#page-home .recruit__heading h2 span{
display:block !important;
white-space:nowrap !important;
}
}
/* =========================================================
v206: スマホ版の調整3点
① お問い合わせ「ご相談内容をお聞かせください。」を1行に
② 施工実績「施工実績一覧を、／ご覧ください。」を「、」で改行した2行に
③ 施工実績一覧（年度別の表）を、横スクロールではなく縦積みのカード形式に
========================================================= */
@media (max-width:767px){
/* ① */
#page-contact .contact-aside h2{
font-size:min(28px, 5.7vw) !important;
letter-spacing:.03em !important;
line-height:1.6 !important;
white-space:nowrap !important;
}
/* ② */
#page-works .cta h2{
font-size:min(34px, 7.4vw) !important;
letter-spacing:.04em !important;
line-height:1.55 !important;
}
#page-works .cta h2 span{
display:block !important;
white-space:nowrap !important;
}
/* ③ 表 → カード（1件ごとに 業務名／発注者／内容 を縦に並べる） */
#page-works .works-table-scroll{ overflow-x:visible !important; }
#page-works .works-table{ min-width:0 !important; table-layout:auto !important; font-size:14px !important; }
#page-works .works-table colgroup,
#page-works .works-table thead{ display:none !important; }
#page-works .works-table,
#page-works .works-table tbody,
#page-works .works-table tr,
#page-works .works-table td{ display:block !important; width:100% !important; box-sizing:border-box; }
#page-works .works-table tr{ padding:12px 14px 12px !important; border-bottom:1px solid #d7dce2 !important; }
#page-works .works-table tbody tr:nth-child(even) td,
#page-works .works-table tbody tr:nth-child(odd) td{ background:transparent !important; }
#page-works .works-table tbody tr:nth-child(even){ background:#f2f3f5 !important; }
#page-works .works-table tbody tr:nth-child(odd){ background:#fff !important; }
#page-works .works-table td{ padding:0 !important; border:0 !important; }
#page-works .works-table td:nth-child(1){ font-weight:700; line-height:1.6; margin-bottom:6px; }
#page-works .works-table td:nth-child(2),
#page-works .works-table td:nth-child(3){ display:inline-block !important; width:auto !important; font-size:12.5px !important; color:#4d5a6b; line-height:1.6; }
#page-works .works-table td:nth-child(2)::before{ content:"発注者："; }
#page-works .works-table td:nth-child(3)::before{ content:" 内容："; }
}
/* =========================================================
v207: 全ページの小見出し（セクションのh2）を、スマホではトップの
「緑に関することなら、…」と同じ大きさ min(40px, 6.9vw) に統一
除外：施工実績の写真上の題名(.project__title)、年度見出し(.year-heading)、
お問い合わせの「ご相談内容を…」(1行維持のため小さめ)
========================================================= */
@media (max-width:767px){
#page-home h2:not(.project__title):not(.year-heading),
#page-works h2:not(.project__title):not(.year-heading),
#page-cases h2:not(.project__title):not(.year-heading),
#page-about h2:not(.project__title):not(.year-heading),
#page-recruit h2:not(.project__title):not(.year-heading),
#page-flow h2:not(.project__title):not(.year-heading),
#page-contact h2:not(.project__title):not(.year-heading):not(.contact-aside h2){
font-size:min(40px, 6.9vw) !important;
letter-spacing:.03em !important;
line-height:1.55 !important;
}
#page-works .cta h2{ font-size:min(40px, 6.9vw) !important; }
#page-contact .contact-aside h2{ font-size:min(28px, 5.7vw) !important; }
.merged-page h2 > span{
display:block !important;
white-space:nowrap !important;
}
}
/* =========================================================
v208: PC表示の復元
v203/v205 で
を に置き換えた2見出しが、PCで1行に
つながっていたため、PCでも従来どおり2行になるよう行ごとにブロック化
========================================================= */
.merged-page h2:not(.sp-break) > span{
display:block;
}
/* .sp-break はPCでは1行のまま（スマホでのみ行を分ける） */
.merged-page h2.sp-break > span{ display:inline; }
/* =========================================================
v209: 施工事例（スマホ）02・04 が左端に寄っていた不具合
偶数番目の .case に左右の余白（16px）が効いていなかったため、
01・03 と同じ左端位置に揃える
========================================================= */
@media (max-width:767px){
#page-cases .case,
#page-cases .case:nth-child(even),
#page-cases .case:nth-child(odd){
padding-left:16px !important;
padding-right:16px !important;
width:100% !important;
box-sizing:border-box !important;
}
}
/* =========================================================
v210: 企業情報「働きやすさ」の項目名（仕事と生活の調和・働く女性応援 ほか）を
スマホで1行に。マーク画像の横の幅に合わせて自動縮小
========================================================= */
@media (max-width:767px){
#page-about .initiative-item h3{
font-size:min(21px, 4.5vw) !important;
letter-spacing:.02em !important;
line-height:1.6 !important;
white-space:nowrap !important;
}
}
/* =========================================================
v211: スマホだけで効く改行（.sp-br）。PCでは改行しない
・求人情報「現在公開している募集内容です。／詳細については面接時にご相談ください。」
========================================================= */
.sp-br{ display:none; }
@media (max-width:767px){
.sp-br{ display:inline; }
#page-recruit .requirements-head > p{ white-space:nowrap; }
}
/* v212: Instagram embed on home (above footer) */
#page-home .instagram{ padding: 12vh 0; background:#fff; }
#page-home .instagram__heading{ text-align:center; margin-bottom:40px; }
#page-home .instagram__heading h2 > span{ display:inline; }
#page-home .instagram__lead{ margin:14px 0 0; font-size:15px; line-height:1.9; color:#4a4f4a; }
#page-home .instagram__embed{ display:flex; justify-content:center; }
#page-home .instagram__embed .instagram-media{ margin:0 auto !important; }
#page-home .instagram__follow{ text-align:center; margin:28px 0 0; }
#page-home .instagram__follow a{ display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; font-size:14.5px; letter-spacing:.06em; border-bottom:1px solid currentColor; padding-bottom:4px; }
#page-home .instagram__follow a span{ transition:transform .3s; }
#page-home .instagram__follow a:hover span{ transform:translateX(4px); }
@media (max-width:767px){
#page-home .instagram{ padding:64px 0; }
#page-home .instagram__heading{ margin-bottom:28px; }
#page-home .instagram__heading h2 > span{ display:block !important; }
#page-home .instagram__lead{ font-size:14px; }
#page-home .instagram__embed .instagram-media{ min-width:0 !important; width:100% !important; }
}
/* v212c: Instagram profile grid with own header (Instagram header cropped) */
#page-home .instagram__grid{ width:100%; max-width:560px; margin:0 auto; border:1px solid #e3e3e3; border-radius:4px; overflow:hidden; background:#fff; }
#page-home .instagram__head{ display:flex; align-items:center; gap:16px; padding:16px 18px; color:inherit; text-decoration:none; border-bottom:1px solid #efefef; }
#page-home .instagram__avatar{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; border:1px solid #e3e3e3; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#page-home .instagram__avatar img{ width:52px; height:52px; display:block; }
#page-home .instagram__names{ display:flex; flex-direction:column; gap:3px; min-width:0; }
#page-home .instagram__names b{ font-size:16px; font-weight:700; letter-spacing:.04em; line-height:1.3; }
#page-home .instagram__names small{ font-size:13px; color:#6b6f6b; letter-spacing:.03em; }
#page-home .instagram__ig{ margin-left:auto; color:#1a1a1a; display:flex; }
#page-home .instagram__frame{ overflow:hidden; position:relative; }
#page-home .instagram__frame iframe{ display:block; width:100%; border:0; height:400px; margin-top:-158px; }
@media (max-width:767px){
#page-home .instagram__head{ padding:14px 14px; gap:12px; }
#page-home .instagram__avatar{ width:56px; height:56px; }
#page-home .instagram__avatar img{ width:46px; height:46px; }
#page-home .instagram__names b{ font-size:15px; }
}
/* v213: ホーム「お知らせ」最新3件 */
#page-home .home-news{ padding: 15vh 0; background:#fff; }
#page-home .home-news__head{ display:grid; grid-template-columns:1fr .68fr; gap:10vw; align-items:end; margin-bottom:7vh; }
#page-home .home-news__lead{ margin:0; font-size:15px; line-height:2; color:var(--muted, #5a6560); }
#page-home .home-news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
#page-home .home-news__item{ display:block; color:inherit; text-decoration:none; }
#page-home .home-news__img{ aspect-ratio:4/3; overflow:hidden; background:#e9ebe6; margin-bottom:16px; }
#page-home .home-news__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
#page-home .home-news__item:hover .home-news__img img{ transform:scale(1.04); }
#page-home .home-news__item time{ display:block; font-family:Georgia,serif; font-size:12px; letter-spacing:.12em; color:var(--leaf, #2f6b3a); margin-bottom:8px; }
#page-home .home-news__item h3{ margin:0; font-size:16px; font-weight:500; line-height:1.7; letter-spacing:.03em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#page-home .home-news__action{ margin-top:7vh; }
@media (max-width:1180px){ #page-home .home-news__head{ grid-template-columns:1fr; gap:24px; } }
@media (max-width:767px){
#page-home .home-news{ padding:72px 0; }
#page-home .home-news__head{ margin-bottom:28px !important; gap:12px; }
#page-home .home-news__head .section-heading{ margin-bottom:0 !important; }
#page-home .home-news__grid{ grid-template-columns:1fr; gap:28px; }
#page-home .home-news__lead{ font-size:14px; }
#page-home .home-news__action{ margin-top:36px; }
}
/* v4d: ホーム「お知らせ」カードのタイトルも15pxに統一 */
#page-home .home-news__item h3{ font-size:15px !important; }
/* v4g: ホーム「お知らせ」の日付を記事ページ・一覧と同じ書体（サンセリフ）に統一 */
#page-home .home-news__item time{ font-family:var(--sans, "Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif) !important; font-size:12px !important; letter-spacing:.08em !important; color:#5a6560 !important; }