@charset "utf-8";
/* =============== Base =============== */
:root{
--bg: #ffffff;
--ink: #1b2a2f;
--muted: #667c86;
--line: #e6eef0;
--primary: #1f9a8b; /* ティール系 */
--primary-ink: #0f5f55;
--accent: #f7941d; /* オレンジ CTA */
--alt: #f7fbfb; /* セクション薄グレーグリーン */
--radius: 14px;
--shadow: 0 8px 30px rgba(0,0,0,.07);
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family: 'Noto Sans JP', sans-serif;
color:var(--ink);
background:var(--bg);
line-height:1.7;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{
width:min(1100px, 92%);
margin-inline:auto;
}
.center{ text-align:center; }
.mt-m{ margin-top:1.25rem; }
.mt-l{ margin-top:2rem; }
.mt-xl{ margin-top:3rem; }
.gap-xl{ gap:3rem; }
/* =============== Header =============== */
.site-header{
position:sticky; top:0; z-index:50;
background:#fff;
border-bottom:1px solid var(--line);
transition: box-shadow .2s ease;
}
.site-header.is-scrolled{ box-shadow: var(--shadow); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.logo img{ height:36px; width:auto; }
.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ padding:.4rem .6rem; border-radius:8px; font-weight:500; color:#244; }
.nav a:hover{ background:var(--alt); text-decoration:none; }
.nav-toggle{ display:none; border:0; background:transparent; cursor:pointer; }
.nav-toggle__bar{ display:block; width:26px; height:2px; background:#234; margin:6px 0; border-radius:1px; }
/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.9rem 1.2rem; border-radius:10px; font-weight:700; border:1px solid transparent;
text-decoration:none; cursor:pointer;
}
.btn--primary{ background:var(--primary); color:#fff; }
.btn--primary:hover{ filter:brightness(.95); text-decoration:none; }
.btn--outline{ border-color:var(--primary); color:var(--primary); background:#fff; }
.btn--outline:hover{ background:var(--alt); text-decoration:none; }
.btn--ghost{ background:transparent; border-color:#cfe7e5; color:var(--primary-ink); }
.btn--cta{ background:var(--accent); color:#fff; }
.btn--cta:hover{ filter:brightness(.95); text-decoration:none; }
/* =============== Hero =============== */
.hero{ position:relative; min-height:64vh; display:grid; place-items:center; overflow:hidden; }
.hero__bg{
position:absolute; inset:0;
background: url('images/common/hero.webp') center/cover no-repeat;
transform:scale(1.02);
filter: saturate(1.05) contrast(1.05);
}
.hero::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(12,23,21,.62), rgba(12,23,21,.62)), linear-gradient(0deg, rgba(12,23,21,.25), rgba(12,23,21,.25));
}
.hero__content{ position:relative; color:#fff; padding:5rem 0 4rem; text-align:center; }
.eyebrow{ letter-spacing:.15em; text-transform:uppercase; opacity:.9; margin:0 0 .5rem; }
.hero h1{ font-size: clamp(1.8rem, 2vw + 1.2rem, 3rem); margin:.2rem 0 1rem; }
.hero .accent{ color: var(--accent); }
.hero .lead{ opacity:.95; font-size:1.05rem; }
.hero__cta{ display:flex; justify-content:center; gap:.75rem; margin-top:1.2rem; flex-wrap:wrap; }
.hero__badges{ list-style:none; display:flex; gap:.5rem; padding:0; margin:1.25rem 0 0; justify-content:center; }
.hero__badges img{ height:34px; width:auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
/* =============== Sections =============== */
.section{ padding: clamp(2.5rem, 4vw + 1rem, 5rem) 0; }
.section--alt{ background: var(--alt); }
.section-title{ font-size: clamp(1.4rem, 1.1vw + 1rem, 2rem); margin:0 0 1rem; }
.grid{ display:grid; }
.grid--2col{ grid-template-columns:1.2fr 1fr; }
.align-center{ align-items:center; }
.list-check{ padding-left:0; list-style:none; }
.list-check li{ margin:.25rem 0; padding-left:1.6rem; position:relative; }
.list-check li::before{
content:''; position:absolute; left:0; top:.4rem; width:1rem; height:1rem;
background: conic-gradient(from 180deg at 50% 50%, #8ed7ce, #1f9a8b);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Media helpers */
.img-cover{ width:100%; height:auto; object-fit:cover; object-position:center; }
.rounded{ border-radius: var(--radius); }
.aspect-16-10{ aspect-ratio:16/10; }
.aspect-16-9{ aspect-ratio:16/9; }
.aspect-4-3{ aspect-ratio:4/3; }
.aspect-1-1{ aspect-ratio:1/1; }
.media-card{ margin:0; }
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; }
.cards .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow: var(--shadow); padding:1rem; min-width:0; }
.cards .card h3{ margin:.8rem 0 .2rem; font-size:1.05rem; }
.cards .card p{ color:var(--muted); }
/* Plans (4 circles) */
.plans{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; margin-top:1rem; }
.plan{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; text-align:center; box-shadow:var(--shadow); min-width:0; }
.plan__icon{ width:86px; aspect-ratio:1/1; margin:0 auto .4rem; border-radius:50%; background: radial-gradient(circle at 30% 30%, #e9f5f3, #d8efec); display:grid; place-items:center; border:1px solid #d7ebe8; }
.plan__icon img{ width:54%; height:auto; }
.plan h3{ margin:.4rem 0 .3rem; font-size:1.1rem; }
.plan p{ color:var(--muted); font-size:1.05rem; }
/* Steps */
.steps{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:1rem; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-width:0; }
.step__content{ padding:1rem; }
.chip{ display:inline-block; font-size:.8rem; font-weight:700; color:var(--primary-ink); background:#e6f5f2; border:1px solid #cdeae4; padding:.25rem .6rem; border-radius:999px; margin-bottom:.35rem; }
/* Gallery */
.gallery{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:1rem; }
.gallery__item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; min-width:0; }
.gallery__item figcaption{ padding:.6rem .8rem; color:#244; font-weight:600; font-size:.95rem; }
/* Banner */
.banner{ position:relative; border-radius:var(--radius); overflow:hidden; }
.banner__bg{ position:absolute; inset:0; background:url('images/common/banner.webp') center/cover no-repeat; filter:brightness(.9); }
.banner__content{ position:relative; display:flex; align-items:center; gap:1rem; padding: min(4vw, 2.2rem); color:#fff; background: linear-gradient(90deg, rgba(10,33,29,.6), rgba(10,33,29,.2)); }
.brand-mark img{ width:64px; height:auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)); }
/* =============== Brand Message (Logo over bg) =============== */
.section--brand{ position:relative; padding:0; overflow:hidden; }
.brand-visual{
position:absolute; inset:0;
background: url('images/common/brand-visual.webp') center/cover no-repeat;
filter: saturate(1.05) contrast(1.03);
}
.brand-message__inner{
position:relative; z-index:1;
min-height: clamp(220px, 28vw, 360px);
display:grid; place-items:center;
padding: clamp(1.5rem, 3vw + .5rem, 3rem) 0;
}
.brand-message__box{
width:min(760px, 92%);
margin-inline:auto;
background: rgba(255,255,255,.2);
border:1px solid rgba(255,255,255,.45);
border-radius: var(--radius);
padding: clamp(1rem, 2vw + .5rem, 2rem);
text-align:center;
backdrop-filter: blur(3px) saturate(1.05);
-webkit-backdrop-filter: blur(3px) saturate(1.05);
}
.brand-message__text{
margin:0 0 .6rem;
font-weight:400;
font-size: 1.2rem;
color: var(--ink);
}
.brand-message__logo img{
height:56px; width:auto; margin: .35rem auto 0;
filter: drop-shadow(0 2px 10px rgba(0,0,0,.15));
}
/* =============== Seekers CTA (Background Visual) =============== */
.section--seekers-cta{ position:relative; padding:0; overflow:hidden; }
.seekers-cta__bg{
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(10,33,29,.55), rgba(10,33,29,.35)),
url('images/common/seekers-cta.webp') center/cover no-repeat;
transform: scale(1.02);
}
.seekers-cta__content{
position:relative; z-index:1;
text-align:center; color:#fff;
padding: clamp(2rem, 6vw + 1rem, 5rem) 0;
}
.section--seekers-cta .section-title{ color:#fff; margin:0 0 .4rem; }
.section--seekers-cta .lead{ color:#fff; opacity:.95; margin:0 auto; width:min(760px,92%); }
.section--seekers-cta .hero__cta{ margin-top:1rem; justify-content:center; gap:.75rem; flex-wrap:wrap; }
.section--seekers-cta .btn--ghost{ border-color: rgba(255,255,255,.85); color:#fff; }
.section--seekers-cta .btn--ghost:hover{ background: rgba(255,255,255,.12); text-decoration:none; }
.section--seekers-cta .btn--primary{ box-shadow: 0 6px 18px rgba(0,0,0,.18); }
@media (max-width: 720px){
.brand-message__inner{ min-height: clamp(200px, 40vw, 300px); }
.brand-message__logo img{ height:48px; }
}
/* =============== Company box */
.company-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; }
.company-box dl{ display:grid; grid-template-columns: 10em 1fr; row-gap:.6rem; column-gap:1.2rem; margin:0; }
.company-box dt{ color:#456; font-weight:700; }
.company-box dd{ margin:0; color:#234; }
/* Contact form */
.contact-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; }
.form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field--full{ grid-column:1 / -1; }
label{ font-weight:700; color:#234; font-size:.95rem; }
.req{ color:#c62828; font-size:.85rem; border:1px solid #f0bdbd; padding:0 .35rem; border-radius:6px; margin-left:.25rem; vertical-align:baseline; }
input, textarea{
border:1px solid #cfe1e4; border-radius:10px; padding:.8rem .9rem;
font-size:1rem; outline:none;
transition:border-color .15s ease, box-shadow .15s ease;
background:#fbfeff;
}
input:focus, textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(31,154,139,.12); }
.error{ color:#c62828; min-height:1em; }
.form-note{ color:var(--muted); font-size:.9rem; }
/* =============== Footer =============== */
.site-footer{ background:#0e3b37; color:#dfe; margin-top:3rem; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; }
.footer-brand img{ height:30px; margin-bottom:.25rem; }
.footer-nav{ display:flex; gap:1rem; flex-wrap:wrap; }
.footer-nav a{ color:#dfe; opacity:.9; }
.footer-nav a:hover{ opacity:1; text-decoration:underline; }
.copyright{ text-align:center; padding:.8rem 0; background:#0b2f2c; color:#bcd; font-size:.85rem; }
/* =============== Utilities =============== */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* =============== Responsive =============== */
@media (max-width: 1000px){
.grid--2col{ grid-template-columns:1fr; }
.plans{ grid-template-columns:repeat(2,1fr); }
.steps{ grid-template-columns:1fr; }
.gallery{ grid-template-columns:repeat(2,1fr); }
.cards{ grid-template-columns:1fr 1fr; }
.footer-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 720px){
.nav{ display:none; }
.nav.is-open{ display:flex; position:absolute; top:64px; right:4%; left:4%; background:#fff; padding:1rem; border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow); flex-direction:column; }
.nav-toggle{ display:block; }
.cards{ grid-template-columns:1fr; }
.plans{ grid-template-columns:1fr; }
.gallery{ grid-template-columns:1fr; }
.form-grid{ grid-template-columns:1fr; }
}
/* =============== Corporate Overrides (tight radius, readable type) =============== */
/* 1) Global typography scale & line-height */
body{
font-size: 17px; /* up from default ~16px */
line-height: 1.85; /* wider line spacing site-wide */
}
.section-title{ line-height: 1.35; }
/* 2) Corner radii unified to ~2?3px */
:root{
--radius: 2px;
--radius-sm: 2px;
--radius-lg: 3px;
}
/* Force small radius on common elements */
.nav a,
.btn,
.card,
.cards .card,
.plan,
.step,
.gallery__item,
.contact-form,
.company-box,
.banner,
.banner__content,
.media-card,
.media-card img,
.img-cover,
.rounded,
.contact-form input,
.contact-form textarea,
.contact-form select,
.chip{
border-radius: 2px !important;
}
/* Previously circular icon area becomes square with subtle radius */
.plan__icon{ border-radius: 2px !important; }
/* 3) Brand visual section logo bigger */
.brand-message__logo img{
height: 96px !important; /* was 56px/80px */
width: auto;
}
@media (max-width: 720px){
.brand-message__logo img{ height: 72px !important; }
}
/* =============== Section Title Unification (except HERO / CTA) =============== */
/* Center all section titles and add an accent underline */
.section .section-title{
text-align:center !important;
margin: 0 auto .25rem !important;
letter-spacing: .01em;
}
.section .section-title::after{
content:"";
display:block;
width: 88px; /* fixed-length underline */
height: 3px;
margin: .5rem auto 0;
background: var(--primary, #1f9a8b);
border-radius: 2px;
}
/* One-line subtitle under titles */
.section .section-subtitle{
text-align:center;
margin: .5rem auto 1.25rem;
max-width: 64ch;
color: var(--muted, #667c86);
line-height: 1.8;
font-size: 1.25rem;
}
/* Exclusions: HERO & job-seekers CTA do not use this pattern */
.hero .section-title::after,
.section--seekers-cta .section-title::after,
.hero .section-subtitle,
.section--seekers-cta .section-subtitle{
display:none !important;
}
/* Banner style heading (photo + logo) ? center alignment */
.banner__content{
justify-content:center !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.brand-mark{ margin-bottom: .5rem; }
.banner__content .section-title{ margin-bottom:.25rem; }
.banner__content .section-title::after{ margin-top:.4rem; }
/* =============== H3 scale & subtitle spacing (site-wide) =============== */
/* Make h3 clearly larger than body text and harmonize color */
.section h3,
.cards .card h3,
.plan h3,
.step__content h3,
.banner__content h3{
font-size: clamp(1.2rem, 0.7vw + 1rem, 1.5rem) !important; /* ~19.2?24px */
line-height: 1.4;
color: var(--primary-ink); /* subtle, brand-harmonized */
letter-spacing: .01em;
margin: .6rem 0 .35rem;
}
/* Give more breathing room under section subtitles */
.section .section-subtitle{
margin: .6rem auto 3rem !important; /* was ~1.25rem */
}
/* =============== Title scale & brand mark enlargement =============== */
/* Bigger section titles site-wide (HERO/CTA unaffected as they don't use .section-title) */
.section .section-title{
font-size: clamp(1.8rem, 1.4vw + 1.1rem, 2.4rem) !important;
}
/* Brand mark (photo + logo banner) ? roughly double the short side */
.brand-mark img{
width: 128px !important;
height: auto !important;
}
@media (max-width: 720px){
.brand-mark img{ width: 96px !important; }
}
/* =============== Urgent / Gallery: 6 -> 4 tiles & overlay captions =============== */
/* Overlay title/subtitle on images (figcaption becomes overlay) */
.gallery__item{ position:relative; }
.gallery__item::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(to top, rgba(6,20,18,.55), rgba(6,20,18,.12) 60%, transparent);
pointer-events:none;
}
.gallery__item figcaption{
position:absolute; left:0; right:0; bottom:.6rem;
padding:.4rem .8rem;
color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
font-weight: 800;
letter-spacing: .01em;
}
/* =============== Flow: 3 -> 4 steps, split image/text, vertical flow cue =============== */
/* Use two columns on desktop; stack on mobile */
.steps{ grid-template-columns: repeat(2, minmax(320px, 1fr)) !important; }
.step{
display:grid; grid-template-columns: 1fr 1fr; align-items:center;
position:relative;
}
.step img{ border-radius: 2px; }
.step__content{ padding: 1rem 1.2rem; }
/* Vertical connector line (visual flow downward) */
.step:not(:last-child)::after{
content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
width:2px; height:24px; background:#cfe1e4;
}
@media (min-width: 1001px){
/* Slight offset to hint a zig-zag in two columns */
.step:nth-child(odd)::after{ left:25%; }
.step:nth-child(even)::after{ left:75%; }
}
@media (max-width: 1000px){
.steps{ grid-template-columns:1fr !important; }
.step{ grid-template-columns: 1fr; }
.step:not(:last-child)::after{ left:50%; }
}
/* =============== Features: remove left/right split, image centered first, single column =============== */
#features .grid--2col{ display:flex !important; flex-direction:column; }
#features .media-card{ order:-1; max-width: min(820px, 96%); margin: 0 auto 1rem; }
#features .container{ text-align:center; }
#features .list-check{ text-align:left; display:inline-block; }
/* =============== Hero: lighten overlay and right-align content =============== */
.hero::after{
background: linear-gradient(180deg, rgba(12,23,21,.18), rgba(12,23,21,.12)),
linear-gradient(0deg, rgba(12,23,21,.06), rgba(12,23,21,.06)) !important;
}
.hero__content{
text-align:right;
margin-left:auto;
margin-right: min(4%, 40px);
}
@media (max-width: 720px){
.hero__content{ text-align:right; margin-right: 4%; }
}
/* =============== Flow (single column, balance-first) =============== */
#flow .steps{
display:grid;
grid-template-columns: 1fr !important; /* force single column */
gap: clamp(16px, 2vw, 28px);
max-width: min(960px, 92%); /* balance-first width */
margin: 0 auto;
}
#flow .step{
display:grid;
grid-template-columns: 1fr !important; /* image over text */
align-items:start;
position:relative;
padding-bottom: 14px; /* space for connector */
}
#flow .step img{ margin-bottom: .6rem; border-radius: 2px; }
#flow .step__content{ padding: 0 .2rem; } /* slightly tighter text block */
#flow .step:not(:last-child)::after{
content:"";
position:absolute; left:50%; transform:translateX(-50%);
bottom:-12px; width:2px; height:26px;
background:#b8d4d8; border-radius:2px;
}
/* =============== Industries (2-col, larger tiles, legible overlay) =============== */
#industries .gallery{
display:grid;
grid-template-columns: repeat(2, minmax(360px, 1fr)) !important; /* bigger tiles */
gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px){
#industries .gallery{ grid-template-columns: 1fr !important; }
}
#industries .gallery__item{ position:relative; overflow:hidden; }
/* Stronger darkening + brand tint for better white-text readability */
#industries .gallery__item::after{
content:"";
position:absolute; inset:0;
background:
linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, transparent),
linear-gradient(to bottom, rgba(31,154,139,.25), rgba(31,154,139,.1));
pointer-events:none;
}
#industries .gallery__item figcaption{
position:absolute; left:50%; bottom:.9rem; transform:translateX(-50%);
width: calc(100% - 2rem);
padding:.6rem .9rem;
background: rgba(0,0,0,.35);
border-radius: 2px;
color:#fff; text-align:center;
}
#industries .cap-title{
display:block; font-weight:800; letter-spacing:.01em;
text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
#industries .cap-sub{
display:block; font-size:.92rem; opacity:.96;
text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* =============== Features (confirm stacking spacing) =============== */
#features .media-card{ margin: .9rem auto 1.1rem; }
#features .list-check{ margin-top: .9rem; }
/* =============== Flow: single-column list; each step split L(IMG)/R(TEXT) =============== */
/* Keep steps list in one column, but inside each step use a 2-col split */
#flow .steps{
grid-template-columns: 1fr !important; /* list vertically */
}
#flow .step{
grid-template-columns: 1.2fr 1fr !important; /* L: image, R: text */
align-items: center;
}
#flow .step img{ width:100%; height:auto; }
/* Downward connector already present; keep centered under each step */
#flow .step:not(:last-child)::after{
left:50% !important; transform: translateX(-50%) !important;
}
/* Mobile: stack image over text within each step */
@media (max-width: 900px){
#flow .step{ grid-template-columns: 1fr !important; }
}
/* =============== Industries: overlay only on image; caption as top-layer textbox =============== */
/* Ensure proper stacking: image (z0) < overlay (z1) < caption box (z2) */
#industries .gallery__item{ position:relative; }
#industries .gallery__item img{ position:relative; z-index:0; display:block; width:100%; height:100%; object-fit:cover; }
#industries .gallery__item::after{
z-index:1; /* stays above image, below caption */
}
#industries .gallery__item figcaption{
z-index:2;
background: rgba(255,255,255,.9); /* bright textbox for legibility */
color: var(--ink);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
#industries .cap-title{ color: var(--ink); }
#industries .cap-sub{ color: var(--muted); }
/* =============== Flow tweaks: smaller image, larger text padding, flow accents =============== */
/* Keep list as single column; inside each step split L(img)/R(text) with a wider text area */
#flow .steps{ grid-template-columns: 1fr !important; }
#flow .step{ grid-template-columns: 1fr 1.35fr !important; align-items:center; }
#flow .step img{ width:100%; height:auto; }
/* More left padding for the right (text) column */
#flow .step__content{ position:relative; padding: 1rem 1.2rem 1rem clamp(1.25rem, 2.5vw, 2.25rem) !important; }
/* Accent bar to suggest linkage/flow within each step */
#flow .step__content::before{
content:""; position:absolute; left:.25rem; top:.4rem; bottom:.4rem; width:4px;
background: linear-gradient(to bottom, var(--primary), #74c9bd);
border-radius: 2px;
}
/* Downward connector stronger & with a dot */
#flow .step:not(:last-child)::after{
height: 32px !important; background:#a7d7d1 !important; border-radius:2px;
}
#flow .step:not(:last-child)::before{
content:""; position:absolute; left:50%; bottom:-18px; transform:translateX(-50%);
width:10px; height:10px; border-radius:50%; background: var(--primary);
box-shadow: 0 0 0 3px #fff; /* subtle ring */
}
@media (max-width: 900px){
#flow .step{ grid-template-columns: 1fr !important; }
#flow .step__content{ padding: .8rem 0 0 0 !important; }
#flow .step__content::before{ display:none; }
}
/* =============== Industries caption: dark translucent box with white text (reversed) =============== */
#industries .gallery__item figcaption{
z-index: 2; /* above overlay */
background: rgba(0,0,0,.72) !important; /* darker, more legible */
color: #fff !important;
border: 0 !important;
box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
}
#industries .cap-title{ color:#fff !important; }
#industries .cap-sub{ color: rgba(255,255,255,.92) !important; }
/* =============== Header text logo (real ![]()
, iOS-safe) =============== */
/* Stop using the ::after background trick to avoid Safari pseudo-element issues */
.logo::after{ display:none !important; }
.logo{ display:inline-flex; align-items:center; gap:.55rem; }
/* =============== Hero CTA: show only the first button (design request) =============== */
/* =============== HERO (final overrides) =============== */
.hero{ min-height: clamp(420px, 68vh, 720px); }
.hero .hero__content{
display:flex; flex-direction:column; justify-content:flex-start; /* 上付き */
text-align:right; padding-top: clamp(4vh, 10vh, 14vh) !important;
margin-right: min(4%, 40px);
}
.hero h1{ font-size: clamp(2.5rem, 9vw, 7.2rem) !important; line-height:1.02; margin:0 0 .35rem 0; }
.hero .lead{ color: var(--primary, #1f9a8b) !important; font-size: clamp(1.125rem, .9vw + 1rem, 1.6rem) !important; margin:0 0 .75rem 0; }
.hero .hero__cta{ justify-content:flex-end !important; }
.hero__cta .btn + .btn{ display:none !important; }
/* =============== FEATURES (課題解決) split: 左=画像 / 右=ボックス3つ(2カラム) =============== */
#features .feature-split.grid--2col{
display:grid !important;
grid-template-columns: minmax(340px,1fr) minmax(360px,1fr) !important;
gap: clamp(16px, 2vw, 28px); align-items:start; margin-top:.75rem;
}
#features .feature-pains{ list-style:none; margin:0; padding:0; display:grid !important; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: clamp(12px, 1.2vw, 16px); }
#features .feature-pain{ background:#fff; border:1px solid #e6efee; border-left:4px solid var(--primary, #1f9a8b); border-radius:2px; padding: clamp(.85rem, 1.2vw, 1.2rem); font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.04); }
@media (max-width: 900px){
#features .feature-split.grid--2col{ grid-template-columns:1fr !important; }
#features .feature-pains{ grid-template-columns:1fr !important; }
}
/* =============== FLOW (final touches) =============== */
/* Keep list one-column; each step L(画像)/R(テキスト) */
#flow .steps{ grid-template-columns:1fr !important; }
#flow .step{ grid-template-columns: 1fr 1.35fr !important; align-items:center; position:relative; padding-bottom:14px; }
#flow .step img{ margin-bottom:0 !important; }
#flow .step__content{ padding: 1rem 1.2rem 1rem clamp(1.5rem, 3vw, 2.5rem) !important; }
/* 縦バーは残す */
#flow .step__content::before{ content:""; position:absolute; left:0; top:.4rem; bottom:.4rem; width:4px; background: linear-gradient(to bottom, var(--primary, #1f9a8b), #74c9bd); border-radius:2px; }
/* ステップ間の下向き矢印（継続性） */
#flow .step:not(:last-child)::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-22px; width:2px; height:22px; background:#a7d7d1; border-radius:2px; }
#flow .step:not(:last-child)::before{ content:""; position:absolute; left:50%; bottom:-36px; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid var(--primary, #1f9a8b); }
@media (max-width: 900px){
#flow .step{ grid-template-columns:1fr !important; }
#flow .step__content{ padding:1rem 1rem !important; }
#flow .step__content::before{ display:none; }
}
/* STEPラベルを少し大きく */
#flow .chip{ font-size:1.05rem !important; padding:.28rem .65rem; border-radius:2px; background:#e8f4f2; color:var(--primary, #1f9a8b); font-weight:800; }
@media (min-width: 1025px){ #flow .chip{ font-size:1.15rem !important; } }
/* =============== HERO: 80px-ish H1, text above overlay, right-aligned CTA =============== */
.hero__bg{ z-index:0; position:absolute; inset:0; }
.hero::after{ z-index:1; } /* overlay stays above bg */
.hero .hero__content{ z-index:2; position:relative; } /* text above overlay */
.hero h1{
/* ~80px on desktop */
font-size: clamp(5rem, 6vw, 3rem) !important;
line-height: 1.06;
}
/* =============== FEATURES: right column single tall card, match left image height =============== */
#features .feature-split{
align-items: stretch !important; /* make both columns equal height */
}
#features .feature-split > .media-card,
#features .feature-split > .feature-pains{ height:100%; }
#features .feature-pains{
/* force single column and stretch to match left image height */
display:flex !important;
flex-direction: column;
gap: clamp(12px, 1.2vw, 16px);
}
#features .feature-pain{
flex: 1 1 auto; /* each box grows to fill column height */
display:flex; align-items:center;
font-size: 1.05rem;
}
/* =============== FLOW: remove between-step arrows/lines; keep left text bar; add mobile padding =============== */
/* kill the connectors completely */
#flow .step::after,
#flow .step::before{ content:none !important; display:none !important; }
/* keep the vertical accent bar to the left of text (already defined on ::before of .step__content) */
/* ensure no accidental extra gap under images */
#flow .step img{ margin-bottom:0 !important; display:block; }
/* mobile padding so text doesn't touch edges */
@media (max-width: 900px){
#flow .step__content{ padding: 1rem 1.2rem !important; }
}
/* STEP label a bit larger (kept) */
#flow .chip{ font-size: 1.15rem !important; }
/* =============== CTA <> Footer spacing: remove gap =============== */
.section--seekers-cta{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
.section--seekers-cta + .site-footer{ margin-top: 0 !important; }
/* =============== Footer: center layout, hide menu, bigger logo, info block =============== */
.site-footer{ margin-top: 0 !important; }
.footer-inner{
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: .6rem !important;
}
.footer-brand img{ height: 56px !important; width:auto; }
.footer-nav{ display:none !important; }
.footer-info{ color:#dfe; opacity:.95; }
.footer-info .company-name{ font-weight:800; margin:.25rem 0 .2rem; }
.footer-info address{ font-style:normal; opacity:.95; }
/* =============== Features (課題解決) ? 強調＆幅の最適化 =============== */
/* セクション全体の横幅をやや狭める（下の行のテキストも同じ幅に） */
#features .container{
width: min(900px, 90%) !important;
}
/* 上段：右カラムのボックスを強調（サイズUP・コントラストUP） */
#features .feature-pain{
font-size: clamp(1.1rem, 0.6vw + 1rem, 1.25rem) !important;
background: #f4fbfa !important;
border: 1px solid #cfe7e5 !important;
border-left: 6px solid var(--primary, #1f9a8b) !important;
color: var(--primary-ink, #0f5f55) !important;
box-shadow: 0 4px 18px rgba(0,0,0,.06);
letter-spacing: .01em;
}
#features .feature-pains{ gap: clamp(14px, 1.4vw, 18px) !important; }
/* =============== 選ばれる理由（バナー）? サブテキスト下の段落を狭幅・中央寄せ =============== */
.banner__content p:not(.section-subtitle){
max-width: 48ch;
margin: .75rem auto 0;
text-align: center;
}
/* =============== Company / Contact ? 縦幅UP・横幅を狭めて中央に寄せる・行間拡大 =============== */
/* セクションの上下余白を増やす */
#company.section, #contact.section{
padding: clamp(3rem, 5vw + 1rem, 6rem) 0 !important;
}
/* コンテナ幅を狭め、中央寄せ（他セクションとは揃えない） */
#company .container, #contact .container{
width: min(860px, 90%) !important;
margin-inline: auto !important;
}
/* 会社概要のDLを読みやすく（行間・内側余白UP） */
#company .company-box{
line-height: 1.95;
padding: clamp(1.25rem, 2.4vw, 2.25rem) !important;
}
#company .company-box dl{
row-gap: .25rem !important;
column-gap: clamp(16px, 2.2vw, 26px) !important;
}
#company .company-box dt,
#company .company-box dd{
padding: 1rem 0 !important;
}
/* お問い合わせフォームも縦にゆったり */
#contact .contact-form{
padding: clamp(1.25rem, 2.4vw, 2.25rem) !important;
}
#contact .form-grid{
gap: clamp(1rem, 1.4vw, 1.4rem) !important;
}
/* =============== Footer ? ロゴ中央揃え（全体センター） =============== */
.footer-brand{
width: 100%;
display: flex;
justify-content: center;
}
.footer-brand img{
margin: 0 auto;
}
/* =============== Header / Brand Visual ? ロゴ大きめ =============== */
.brand-message__logo img{
height: 180px !important; /* さらに大きく */
width: auto;
}
@media (max-width: 720px){
.brand-message__logo img{ height: 92px !important; }
}
/* =============== Fix: First section 3-column gallery keeps original width =============== */
/* Revert global gallery to fixed 3 columns; section-specific rules (e.g., #industries) will still override */
.gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* If the very first section has a gallery, ensure it is not constrained by narrow helpers */
.section:first-of-type .gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* =============== Features width scoping =============== */
/* Reset default container width for #features, then narrow only the intended row via .container--narrow */
#features .container{ width: min(1100px, 92%) !important; }
#features .container--narrow{ width: min(900px, 90%) !important; }
/* =============== 選ばれる理由（バナー）? 段落を狭幅かつ中央揃えに =============== */
.banner__content .section-subtitle + p,
.banner__content > p{
max-width: 48ch !important;
margin: .8rem auto 0 !important;
text-align: center !important;
}
/* =============== Company / Contact ? サブタイトル無し時の余白を補う =============== */
#company .section-title,
#contact .section-title{
margin-bottom: 1.25rem !important;
}
#company .section-title::after,
#contact .section-title::after{
margin-top: .6rem !important;
}
#company .section-title + *,
#contact .section-title + *{
margin-top: .75rem !important; /* first content block breathes even without subtitle */
}
/* =============== Footer ? 完全センター＆上下スタック =============== */
.footer-inner{
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.footer-inner > *{
width: 100%;
display: flex;
justify-content: center;
}
.footer-nav{ display:none !important; }
/* =============== Footer (stacked center for new HTML) =============== */
.footer-inner{ flex-direction: column !important; align-items: center !important; }
.footer-inner > *{ width:100%; display:flex; justify-content:center; }
/* Make footer-info a vertical stack so name and address are NOT in one row */
.footer-inner > .footer-info{
display:flex !important;
flex-direction: column !important;
align-items:center !important;
gap: .35rem; /* small vertical spacing */
text-align:center !important;
max-width: 56ch; /* comfortable reading width */
}
.footer-info .company-name{
font-weight: 800;
font-size: 1.1rem;
margin: .25rem 0 0;
}
.footer-info address{
font-style: normal; /* remove italic */
line-height: 1.8; /* airy lines */
margin: 0;
}
.footer-brand img{ height: 56px !important; width:auto; }
/* =============== Company section: accented background (distinct from section--alt) =============== */
#company{
/* override the shared alt background */
background:
/* soft top tint band */
linear-gradient(180deg, rgba(31,154,139,.08), rgba(31,154,139,0) 240px),
/* subtle diagonal pattern */
repeating-linear-gradient(135deg,
rgba(15,95,85,.045), rgba(15,95,85,.045) 2px,
rgba(15,95,85,0) 2px, rgba(15,95,85,0) 14px),
#ffffff !important;
}
/* make the company card pop a bit more on the new bg */
#company .company-box{
border-color: #d9e9e7 !important;
box-shadow: 0 16px 40px rgba(0,0,0,.08) !important;
}
/* Scope footer-only styles harder and reset possible 'company-name' inputs in the contact form */
.site-footer .footer-info .company-name{ font-weight:800; font-size:1.1rem; margin:.25rem 0 0; }
.site-footer .footer-info address{ font-style:normal; line-height:1.8; margin:0; }
/* Reset common selectors for the contact form's company field in case the same class is reused */
#contact .contact-form input[name="company"],
#contact .contact-form input[name="company_name"],
#contact .contact-form input[name="会社名"],
#contact .contact-form input.company-name,
#contact .contact-form .company-name{
background:#fbfeff !important;
border-color:#cfe1e4 !important;
color:var(--ink) !important;
font-weight:400 !important;
box-shadow:none !important;
}
/* =============== Company: center the card visually and reduce left bias =============== */
#company .company-box{
max-width: 780px !important;
margin-inline: auto !important;
}
#company .company-box dl{
grid-template-columns: 150px 1fr !important; /* narrower left column to avoid left-heavy look */
}
/* =============== Footer: more vertical padding =============== */
.footer-inner{
padding: 2rem 0 !important; /* more breathing room top/bottom */
}
/* =============== Hero: slightly shorter and improve mobile readability =============== */
.hero{
min-height: clamp(360px, 52vh, 640px) !important; /* shorter overall */
}
/* keep text above overlay (already set earlier), but darken overlay only on small screens for contrast */
@media (max-width: 720px){
.hero::after{
background:
linear-gradient(180deg, rgba(12,23,21,.48), rgba(12,23,21,.38)),
linear-gradient(0deg, rgba(12,23,21,.18), rgba(12,23,21,.18)) !important;
}
.hero .hero__content{
padding-top: clamp(10vh, 14vh, 18vh) !important; /* push text slightly down from very top to avoid collision */
}
}
/* =============== Hero (mobile legibility) =============== */
@media (max-width: 720px){
/* lighten the mobile overlay a bit so imagery is still visible but not overpowering */
.hero::after{
background:
linear-gradient(180deg, rgba(12,23,21,.32), rgba(12,23,21,.24)),
linear-gradient(0deg, rgba(12,23,21,.08), rgba(12,23,21,.08)) !important;
}
/* place text clearly over the overlay with a white glow and a soft dark drop */
.hero h1,
.hero .lead{
color: #fff !important; /* stop using teal on mobile */
text-shadow:
0 0 4px rgba(255,255,255,.85), /* white halo for light backgrounds */
0 2px 10px rgba(0,0,0,.35); /* soft dark drop for dark areas */
}
/* ensure the CTA remains readable too (in case of outline variants) */
.hero__cta .btn{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
}
.longtext{
text-align: center;
font-size: 1.2rem;
}
/* =============== Company: vertical, centered pairs (dt over dd) =============== */
#company .company-box{ text-align: center; }
#company .company-box dl{
display: grid !important;
grid-template-columns: 1fr !important; /* one column: stack dt and dd */
gap: .35rem; /* small gap within/between pairs */
}
#company .company-box dt{
order: 0;
margin: .8rem 0 0; /* space before each label */
color: var(--muted);
font-weight: 700;
}
#company .company-box dt:first-of-type{ margin-top: 0; }
#company .company-box dd{
order: 1;
width: min(680px, 92%);
margin: .2rem auto .9rem; /* center each value block */
padding: .85rem 1rem;
background: #fff;
border: 1px solid #e6efee;
border-radius: var(--radius);
box-shadow: 0 4px 14px rgba(0,0,0,.04);
color: var(--ink);
}
/* tighter label-value connection */
#company .company-box dt + dd{ margin-top: .25rem; }
/* =============== Company: fix dt/dd ordering (pair sequence) =============== */
/* Restore natural DOM order for grid items so it renders dt, dd, dt, dd ... */
#company .company-box dt,
#company .company-box dd{
order: initial !important;
}
/* Pair spacing: small gap inside a pair, bigger gap between pairs */
#company .company-box dt + dd{ margin-top: .25rem !important; } /* within a pair */
#company .company-box dd + dt{ margin-top: 1.25rem !important; } /* between pairs */
/* =============== Header logos: separate sizing (symbol vs text) =============== */
:root{
--logo-symbol-h: 36px; /* square symbol */
--logo-text-h: 20px; /* wider text logo (a bit shorter for visual balance) */
}
@media (max-width: 720px){
:root{
--logo-symbol-h: 32px;
--logo-text-h: 16px;
}
}
/* First ![]()
inside .logo is the square symbol */
.logo img:first-of-type{
height: var(--logo-symbol-h) !important;
width: auto;
}
/* The text logo uses an explicit class added in HTML: ![]()
*/
.logo img.logo-text{
height: var(--logo-text-h) !important;
width: auto;
}
:root{
--header-h: 68px; /* desktop-ish header height */
}
@media (max-width: 720px){
:root{ --header-h: 60px; } /* slightly shorter on phones */
}
/* Ensure header is always above content; give inner a min height based on var */
.site-header{ position: sticky; top: 0; z-index: 1000; }
/* Mobile menu: make the opened nav a fixed panel under the sticky header */
@media (max-width: 1000px){
.nav.is-open{
display: flex !important;
position: fixed;
top: var(--header-h);
left: 0; right: 0;
width: min(92%, 760px);
margin-inline: auto;
flex-direction: column;
background: #fff;
padding: 1rem;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow);
z-index: 999; /* under header, above content */
max-height: calc(100vh - var(--header-h) - 16px);
overflow: auto;
}
/* Keep the hamburger above the panel to allow closing */
.nav-toggle{ position: relative; z-index: 1001; }
}
/* ======================= FINAL OVERRIDES (CSS-only) ======================= */
/* ---- Header: fixed bar + mobile menu fixed under it + anchor offset ---- */
:root{
--header-h: 68px;
--logo-symbol-h: 36px; /* header logo tuning */
--logo-text-h: 20px;
}
@media (max-width: 1000px){
:root{ --header-h: 64px; }
}
@media (max-width: 720px){
:root{
--header-h: 60px;
--logo-symbol-h: 32px;
--logo-text-h: 16px;
}
}
.site-header{
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 1100;
background: #fff;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.header-inner{ min-height: var(--header-h); align-items: center; }
.site-header + main{ padding-top: var(--header-h); }
@supports (padding: max(0px)){
.site-header + main{ padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
}
:target{ scroll-margin-top: calc(var(--header-h) + 12px); }
/* Header logos: independent sizing (symbol vs text) */
.logo img:first-of-type{ height: var(--logo-symbol-h) !important; width: auto; }
.logo img.logo-text{ height: var(--logo-text-h) !important; width: auto; }
/* Mobile nav panel anchored under header */
@media (max-width: 1000px){
.nav.is-open{
position: fixed !important;
top: var(--header-h); left: 0; right: 0;
width: min(92%, 760px);
margin-inline: auto;
display: flex !important; flex-direction: column;
background:#fff; padding:1rem;
border: 1px solid var(--line, #e6efee);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,.12);
z-index: 1099;
max-height: calc(100vh - var(--header-h) - 16px);
overflow: auto;
}
.nav-toggle{ position: relative; z-index: 1101; padding:0.5rem; }
}
/* ---- Hero: phone legibility (text above overlay, brighter on mobile) ---- */
.hero .hero__content{ position: relative; z-index: 2; }
.hero::after{ z-index: 1; }
@media (max-width: 720px){
.hero::after{
background:
linear-gradient(180deg, rgba(12,23,21,.32), rgba(12,23,21,.24)),
linear-gradient(0deg, rgba(12,23,21,.08), rgba(12,23,21,.08)) !important;
}
.hero h1, .hero .lead{
color:#fff !important;
text-shadow:
0 0 4px rgba(255,255,255,.85),
0 2px 10px rgba(0,0,0,.35);
}
.hero{ min-height: clamp(360px, 52vh, 640px) !important; }
}
/* ---- Features (#features): narrow top row + right column tall single list ---- */
#features .container--narrow{ width: min(900px, 90%) !important; }
#features .feature-split{ align-items: stretch !important; }
#features .feature-split > .media-card,
#features .feature-split > .feature-pains{ height:100%; }
#features .feature-pains{
display:flex !important; flex-direction:column; gap: clamp(12px, 1.2vw, 16px);
}
#features .feature-pain{
flex: 1 1 auto;
display:flex; align-items:center;
font-size: clamp(1.1rem, 0.6vw + 1rem, 1.25rem);
background:#f4fbfa; border:1px solid #cfe7e5; border-left:6px solid var(--primary, #1f9a8b);
color: var(--primary-ink, #0f5f55);
box-shadow: 0 4px 18px rgba(0,0,0,.06);
padding: clamp(.85rem, 1.2vw, 1.2rem);
}
@media (max-width: 900px){
#features .feature-split{ grid-template-columns: 1fr !important; }
#features .feature-pains{ gap: 12px; }
}
/* ---- Strengths (#strengths): narrow centered paragraph under subtitle ---- */
/* =============== Section reveal animations (append) =============== */
/* JS 有効時のみ非表示に（FOUC防止） */
.has-js .reveal{
opacity: 0;
transform: translateY(24px);
}
.has-js .reveal [data-reveal-child]{
opacity: 0;
transform: translateY(12px);
}
/* ベースの遷移とスタッガー */
.reveal{
transition: opacity .7s ease, transform .7s ease;
will-change: transform, opacity;
}
.reveal [data-reveal-child]{
transition: opacity .6s cubic-bezier(.22,.72,.21,.99), transform .6s cubic-bezier(.22,.72,.21,.99);
transition-delay: var(--d, 0s);
will-change: transform, opacity;
}
/* 交差後の表示状態 */
.reveal.is-in{ opacity: 1; transform: none; }
.reveal.is-in [data-reveal-child]{ opacity: 1; transform: none; }
/* 方向バリエーション（任意で data-reveal="left|right|up|down" を付与） */
.reveal[data-reveal="left"]{ transform: translateX(-24px); }
.reveal[data-reveal="right"]{ transform: translateX(24px); }
.reveal[data-reveal="up"]{ transform: translateY(24px); }
.reveal[data-reveal="down"]{ transform: translateY(-24px); }
/* ユーザーが動きを低減に設定している場合はアニメ無効化 */
@media (prefers-reduced-motion: reduce){
.reveal, .reveal [data-reveal-child]{
transition: none;
transform: none;
opacity: 1;
}
}
/* ===== Mobile nav: 80% translucent background ===== */
@media (max-width: 1000px){
.nav.is-open{
background: rgba(255, 255, 255, 0.8); /* 80% 透過の白 */
/* 読みやすさ向上のための軽いブラー（不要なら削除OK） */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}
/* ===== Access Map (full-bleed) ===== */
.section--map{ padding: 0; }
.map-embed{
line-height: 0; /* inline-gap防止 */
}
.map-embed iframe{
display: block;
width: 100%;
height: clamp(240px, 40vh, 480px); /* 縦は短めで可変 */
border: 0;
}
.u-uline{ position:relative; display:inline-block; --uline: currentColor; --uline-h:.14em; --uline-ofs:.08em; }
.u-uline::after{
content:""; position:absolute; left:0; right:0; bottom: calc(-1 * var(--uline-ofs)); height: var(--uline-h);
background: var(--uline); border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform .55s cubic-bezier(.22,.72,.21,.99);
}
/* 手動 or 自動 */
.u-uline.is-in::after{ transform: scaleX(1); }
.reveal.is-in .u-uline[data-auto-underline]::after{ transform: scaleX(1); }
/* バリエーション */
.u-uline--accent{ --uline: var(--accent); }
.u-uline--primary{ --uline: var(--primary); }
.u-uline--white{ --uline: rgba(255,255,255,.92); }
.u-uline--grad{ --uline: linear-gradient(90deg, var(--primary) 0%, #2bb3a2 50%, var(--accent) 100%); }
.u-uline[data-origin="center"]::after{ transform-origin:center; }
.u-uline[data-origin="right"]::after{ transform-origin:right; }
.u-uline--hover:hover::after{ transform: scaleX(1); }
#industries{ position: relative; overflow:hidden; }
#industries > .container{ position: relative; z-index: 2; }
#industries .industries__bg{
position:absolute; inset:0; z-index: 1; pointer-events:none;
--bg-a: none; /* JS sets url('...') */
--bg-b: none; /* JS sets url('...') */
}
#industries .industries__bg::before,
#industries .industries__bg::after{
content:""; position:absolute; inset:0;
background-image: linear-gradient(180deg, rgba(10,33,29,.55), rgba(10,33,29,.30)), var(--bg-a);
background-position:center; background-size:cover; background-repeat:no-repeat;
filter: blur(18px) saturate(1.08);
transform: scale(1.06);
transition: opacity .9s ease; opacity:1;
}
#industries .industries__bg::after{
background-image: linear-gradient(180deg, rgba(10,33,29,.55), rgba(10,33,29,.30)), var(--bg-b);
opacity:0;
}
#industries .industries__bg.is-flip::before{ opacity:0; }
#industries .industries__bg.is-flip::after{ opacity:1; }
/* カード側の見え方最適化 */
#industries .gallery__item{ background: transparent; border: 0; box-shadow: none; }
#industries .gallery__item figcaption{ background: rgba(0,0,0,.58); border:0; color:#fff; }
#industries .gallery__item.is-active figcaption{ background: rgba(0,0,0,.78); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
#industries .gallery__item.is-active img{ outline: 3px solid rgba(255,255,255,.75); outline-offset:-3px; }
/* Add heading per-character animation and section-title underline sweep */
/* =============== Heading animations & underline sweep =============== */
/* Per-character initial state when JS is active */
.has-js .split .ch{
opacity: 0;
transform: translateY(0.6em) scale(.98);
filter: blur(2px);
}
/* Reveal: pop each character with stagger (var(--d)) */
.reveal.is-in .split .ch{
animation: ch-pop .6s cubic-bezier(.22,.72,.21,.99) var(--d, 0s) both;
}
@keyframes ch-pop{
0%{ opacity:0; transform: translateY(.6em) scale(.98); filter: blur(2px); }
100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Section title underline: sweep on reveal */
.has-js .section .section-title::after{
transform: scaleX(0);
transform-origin: left;
transition: transform .6s ease;
}
.reveal.is-in .section-title::after{ transform: scaleX(1); }
/* =============== Industries heading contrast (section-only) =============== */
#industries .section-title,
#industries .section-subtitle{
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,.32);
}
#industries .section-title::after{
background: rgba(255,255,255,.9);
}
/* =============== Flow animated timeline pointer =============== */
#flow .steps{ position: relative; padding-right: calc(var(--flow-track-x) + var(--flow-track-w) + 12px); }
#flow{
--flow-track-x: clamp(12px, 2vw, 18px); /* 右端からのオフセット */
--flow-track-w: 6px; /* 縦ラインの太さ */
--flow-arrow-w: 12px; /* 矢印(左右)の半幅 */
--flow-arrow-h: 18px; /* 矢印の高さ */
}
#flow .flow-decor{
position:absolute; inset: 0 0 0 0; pointer-events:none;
}
#flow .flow-decor::before{ /* ベースの縦ライン（右端寄せ） */
content: ""; position:absolute; top:0; bottom:0; left:auto; right: var(--flow-track-x);
width: var(--flow-track-w); transform:none;
background: linear-gradient(to bottom, rgba(207,225,228,.95), rgba(207,225,228,.55));
}
#flow .flow-decor .flow-progress{ /* 進捗（塗りつぶし）*/
position:absolute; left:auto; right: var(--flow-track-x);
width: var(--flow-track-w); transform:none;
top:0; height: calc(var(--flow-progress, 0) * 100%);
background: var(--primary);
border-radius: 3px;
transition: height .12s linear;
}
#flow .flow-decor .flow-pointer{ /* 移動する矢印頭（右端寄せ） */
position:absolute; left:auto; right: calc(var(--flow-track-x) - 4px);
top: calc(var(--flow-progress, 0) * 100%);
transform: translateY(-40%);
width:0; height:0;
border-left: var(--flow-arrow-w) solid transparent;
border-right: var(--flow-arrow-w) solid transparent;
border-top: var(--flow-arrow-h) solid var(--primary);
filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}
#flow .flow-decor .flow-pointer{ display:none !important; }
/* ==== Plans Showcase (corporate, interactive tilt & spotlight) ==== */
#plans{ --plans-gap: clamp(16px, 2.4vw, 28px); }
#plans .section-head{ text-align:center; }
#plans .section-title.center{ margin-bottom:.5rem; }
#plans .section-subtitle{ color: var(--text-muted, #667085); }
#plans .plans--showcase{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--plans-gap);
margin-top: clamp(16px, 2.2vw, 24px);
}
#plans .plan.plan--fx{
position:relative;
padding: clamp(18px, 2.2vw, 28px);
border-radius: 16px;
border: 1px solid var(--line, #E9EDF2);
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
backdrop-filter: blur(6px);
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, background .3s, border-color .3s;
box-shadow: 0 10px 24px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
overflow: hidden;
}
#plans .plan__bg{
position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
background: radial-gradient(240px at var(--mx,50%) var(--my,50%), rgba(93,130,255,.20), transparent 60%);
opacity:0; transition: opacity .35s;
}
#plans .plan.plan--fx.is-hover .plan__bg{ opacity:.8; }
#plans .plan__shine{
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background: conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,0), rgba(255,255,255,.12) 25%, rgba(255,255,255,0) 50%);
mix-blend-mode: overlay; opacity:0; transition: opacity .45s;
}
#plans .plan.plan--fx.is-hover .plan__shine{ opacity:.6; }
#plans .plan.plan--fx:hover{
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(6px);
box-shadow: 0 18px 40px rgba(16,24,40,.12), 0 6px 14px rgba(16,24,40,.10);
}
#plans .plan__icon{ width:72px; aspect-ratio:1; margin:4px auto 12px; display:grid; place-items:center; transition: transform .4s; }
#plans .plan.plan--fx.is-hover .plan__icon{ transform: translateY(-6px); }
#plans .plan__title{
display:block; width:auto; height:auto; margin:.6rem 0 .35rem;
background:none; box-shadow:none; border-radius:0; border:0;
color: var(--primary-ink, #101828);
font-weight:800; line-height:1.35;
font-size: clamp(1.05rem, 0.7vw + 1rem, 1.35rem);
letter-spacing:.01em; text-transform:none; text-align:center;
writing-mode: horizontal-tb; text-orientation: mixed;
white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
}
#plans .plan__copy{ text-align:center; color: var(--text-muted, #667085); font-size: clamp(.92rem, .3vw + .9rem, 1rem); line-height:1.65; }
@media (max-width: 1000px){
#plans .plans--showcase{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
#plans .plans--showcase{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
#plans .plan.plan--fx{ transition: none; transform: none !important; }
#plans .plan__icon{ transition: none; }
}
/* ==== Feature Intro Hero (visual callouts over illustration) ==== */
#features .feature-hero{ position:relative; margin-top: clamp(8px, 1.6vw, 18px); }
#features .feature-visual{ position:relative; width: min(920px, 96%); margin-inline:auto; }
#features .feature-visual img{ display:block; width:100%; height:auto; }
/* overlay callouts */
#features .feature-callouts{ position:absolute; inset:0; list-style:none; margin:0; padding:0; pointer-events:none; }
#features .feature-callouts .callout{
position:absolute; pointer-events:auto; display:flex; align-items:center; gap:.6rem;
padding:.65rem .85rem; background:#fff; border:1px solid var(--line);
border-radius:12px; box-shadow: 0 8px 22px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
transform: translateZ(0); transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
will-change: transform, opacity;
}
#features .feature-callouts .callout:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,24,40,.14), 0 4px 10px rgba(16,24,40,.10); }
#features .feature-callouts .callout.is-active{
border-color: var(--primary);
background: linear-gradient(0deg, rgba(31,154,139,.06), rgba(31,154,139,.06)), #fff;
box-shadow: 0 16px 40px rgba(16,24,40,.16), 0 6px 14px rgba(16,24,40,.12);
transform: translateY(-2px) scale(1.02);
}
#features .callout__badge{
font-weight:800; font-size:.75rem; letter-spacing:.06em; color: var(--primary-ink);
background:#e8f4f2; border:1px solid #cfe7e5; border-radius:999px; padding:.22rem .6rem;
white-space:nowrap;
}
#features .callout__text{ font-weight:800; color: var(--ink); line-height:1.35; }
/* positioning (desktop) ? rightサイドに縦配置 */
#features .feature-callouts .callout[data-idx="0"]{ left: 62%; top: 12%; }
#features .feature-callouts .callout[data-idx="1"]{ left: 66%; top: 42%; }
#features .feature-callouts .callout[data-idx="2"]{ left: 60%; top: 72%; }
/* cards hover micro-interaction */
#features .cards .card{ transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#features .cards .card:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16,24,40,.16); border-color: var(--primary); }
/* responsive: stack callouts below image on small screens */
@media (max-width: 900px){
#features .feature-callouts{ position:static; display:grid; gap:.6rem; margin-top:.75rem; }
#features .feature-callouts .callout{ position:static; }
}
@media (prefers-reduced-motion: reduce){
#features .feature-callouts .callout{ transition:none; transform:none; }
}
/* ==== Hero Typewriter (looped 2-phrase) ==== */
.hero .hero-title.typewriter{ position:relative; display:inline-block; white-space: normal; }
.hero .tw__display{ display:inline; }
.hero .tw__cursor{ display:inline-block; margin-left:.06em; animation: tw-blink .8s steps(1, end) infinite; }
@keyframes tw-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
/* hide sources used by JS to fetch phrases */
.hero .tw__source{ display:none !important; }
/* kill previous per-character split animation for hero title */
.hero .split .ch{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
/* ==== Hero H1 (mobile) ? slightly smaller + avoid awkward breaks ==== */
@media (max-width: 720px){
/* Make the headline a touch smaller on phones to prevent 4-line wraps */
.hero .hero-title{
font-size: clamp(2.8rem, 6.4vw, 2.8rem) !important;
line-height: 1.15; /* a bit tighter than desktop */
letter-spacing: .01em; /* micro spacing for JP legibility */
word-break: normal; /* don't force CJK char-level breaks */
}
/* Keep the accented word on one line to avoid the lonely 'ン' wrap */
.hero .hero-title .accent{ white-space: nowrap; }
}
/* Prefer balanced line breaks where supported (Safari 17+/iOS 17+) */
@supports (text-wrap: balance){
.hero .hero-title{ text-wrap: balance; }
}
/* ==== Hero Typewriter: mobile font & CLS guard (reinforced) ==== */
@media (max-width: 720px){
.hero .hero-title.typewriter{ font-size: 0.94em; line-height: 1.15; min-height: 3.6em; }
}
/* ==== Hero (mobile): fix section height to prevent layout shift (iOS-safe) ==== */
/* Fallback for older browsers: use vh */
@media (max-width: 720px){
.hero{ height: clamp(520px, 68vh, 580px) !important; min-height: 0 !important; }
}
/* override */
.hero h1 {
font-size: clamp(3rem, 4vw, 2rem) !important;
}
.hero h1 span {
display:block;
padding-bottom:0.5rem;
}
.hero h1 > span {
opacity:0;
color:#fff;
transition: all 1.5s ease 0.5s;
}
.hero h1 .accent {
color:#fe0;
}
.hero h1 > span:last-child {
transition-delay:1.5s;
}
.hero.is-in h1 span {
opacity:1;
}
.company-box table {
width:100%;
margin:0 auto;
}
.company-box table th ,
.company-box table td {
padding:1rem 3rem;
border-bottom:1px solid #eee;
}
.company-box table th {
text-align:right;
}
.company-box table td {
text-align:left;
}
.form-selector {
margin-bottom:4rem;
position:relative;
display:flex;
justify-content:center;
text-align:center;
gap:3rem;
}
.form-selector:before {
content:"";
position:absolute;
z-index:1;
bottom:0;
display:block;
width:100%;
border-bottom:2px solid #999;
}
.form-selector > * {
position:relative;
z-index:2;
width:25rem;
border:2px solid #999;
border-bottom-color:transparent;
border-radius:0.5rem 0.5rem 0 0;
cursor:pointer;
}
.form-selector h2 {
margin:0;
padding:0.5rem 0;
}
.form-selector > *.is-sel {
color:#fff;
background:var(--accent);
border-bottom-color:var(--accent);
}
.form-select {
width:100% !important;
height:100% !important;
}
.form-select:not(.is-sel) {
display:none;
}
.form-select h2 {
display:none;
}
@media (min-width: 721px){
.sp {
display:none !important;
}
.hero h1 br {
display:none
}
}
@media (max-width: 720px){
.pc {
display:none !important;
}
.header-inner {
padding:0.3rem 0;
}
.hero__bg {
transform:unset;
background-position:45% 100%;
background-size:cover;
}
.hero .hero__content {
padding-top:7rem !important;
}
.hero .hero-title {
font-size: clamp(2.1rem, 6vw, 2.4rem) !important;
}
.hero h1 span {
padding-bottom:1.5rem;
}
#flow .steps {
max-width: min(960px, 100%);
}
#flow .step__content p {
font-size:1rem;
}
#industries .gallery__item {
margin:1rem;
}
#industries .cap-sub {
font-size:0.9rem;
}
#strengths .card p {
font-size:1rem;
}
.card--reason {
text-align: center;
}
.card--reason img.aspect-4-3 {
aspect-ratio:5/3;
object-position:0 15%;
}
.company-box table {
font-size: 0.9rem;
}
.company-box table ,
.company-box table tr ,
.company-box table tr > * {
display:block;
}
.company-box table th {
padding:0.5rem 0.5rem 0;
text-align:left;
border-bottom:0 none;
}
.company-box table td {
text-align:left;
padding:0 0.5rem 0.5rem 1.5rem;
}
#seekers-cta .lead {
font-size:0.9rem;
}
.form-selector {
margin-bottom:2rem;
padding:0 1rem;
gap:1rem;
}
.form-selector h2 {
padding:0.8rem 0;
font-size:1rem;
}
#contact .form-grid {
gap:0;
}
}