/* =========================
Tokens / Base
========================= */
:root{
--blue-deep:#212f5b;
--cream:#8f7d5d;
--accent:#910f0f;
--ink:#1b1b1b;
--muted:#9AA3AD;
--line:rgba(255,255,255,.18);
--container:1100px; --gutter:40px;
--nav-fz:18px; --nav-gap:24px; --icon-size:22px; --icon-box:44px; --cta-h:44px; --cta-fz:15px;
--wm-business-size: clamp(110px, 14vw, 210px);
--measure-strengths-title: 690px;
--box-strengths-lead-w: 420px;
--box-business-lead-w: 720px;
--green:#22B05E; /* 追加 */
}
*{ box-sizing:border-box; }
img{ max-width:100%; display:block; }
.zen-font{ font-family:'Zen Old Mincho',serif; }
body{
margin:0; font-family:'Noto Sans JP',sans-serif;
color:#f7f3ea;
background:var(--cream);
overflow:auto; /* 既定は常にスクロール可 */
}
body.has-preloader{ overflow:hidden; } /* プリローダー中のみ固定 */
/* =========================
Header
========================= */
.header{
position:sticky; top:0; z-index:1000;
height:100px; padding:0 var(--gutter);
display:flex; align-items:center; gap:20px;
background: var(--cream);
--hdr-scale:1; --hdr-shadow-a:.16; --hdr-bg-alpha:1;
box-shadow:0 8px 24px rgba(0,0,0,.22);
backdrop-filter:saturate(1.05) blur(6px);
}
.header > *{ transform:scale(var(--hdr-scale)); transform-origin:center; will-change:transform; }
.brand-link{
display:flex; align-items:center; gap:12px;
text-decoration:none; color:inherit; margin-right:auto;
}
.brand-link:hover .hero-title{ text-decoration: underline; text-underline-offset: 4px; }
.hero-logo{ height:56px; width:auto; object-fit:contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.hero-title{ color:#fff; font-size:30px; font-weight:600; letter-spacing:.15em; }
.global-nav ul{ display:flex; gap:var(--nav-gap); margin:0; padding:0; list-style:none; }
.global-nav a{
font-size:var(--nav-fz); font-weight:500; letter-spacing:.02em; color:#f6f2e9;
text-decoration:none; display:inline-flex; align-items:center; min-height:44px;
padding:0 10px; border-radius:10px; transition:background-color .15s ease, color .15s ease;
}
.global-nav a:hover, .global-nav a:focus-visible{ background:rgba(255,255,255,.08); outline:none; }
.global-nav a[aria-current="page"]{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.header-cta-btn{
display:inline-flex; align-items:center; gap:8px;
height:var(--cta-h); padding:0 20px; font-size:var(--cta-fz); font-weight:700;
border-radius:999px; text-decoration:none; white-space:nowrap;
background: linear-gradient(135deg, var(--green), #28c96a);
color:#fff; border:1px solid rgba(255,255,255,.22);
box-shadow:0 8px 20px rgba(34,176,94,.35);
transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.header-cta-btn:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 12px 26px rgba(34,176,94,.45); }
.header-cta-btn:active{ transform:none; box-shadow:0 4px 10px rgba(34,176,94,.35); }
.hero-icons{ display:flex; gap:14px; }
.icon-circle{
width:var(--icon-box); height:var(--icon-box); border-radius:999px;
display:inline-flex; align-items:center; justify-content:center;
background: var(--blue-deep); border:1px solid rgba(255,255,255,.18); color:#fff;
box-shadow:0 1px 0 rgba(0,0,0,.08);
transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, filter .2s;
}
.icon-circle i{ font-size:var(--icon-size); line-height:1; }
.icon-circle:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.24); filter:brightness(1.05); }
/* =========================
Preloader
========================= */
#preloader{
position:fixed; inset:0; z-index:99999;
display:grid; place-items:center; background:#0f0f0f;
}
.preloader-content{ display:grid; justify-items:center; gap:10px; text-align:center; animation:fadein 1.2s ease-in-out; color:#fff; }
.preloader-logo{ width:84px; height:auto; margin:0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }
#preloader.peel{ animation:peelUp 1.2s ease-in-out forwards; transform-origin:bottom center; }
@keyframes peelUp{ 0%{transform:rotateX(0);opacity:1;} 100%{transform:rotateX(-90deg) scale(.92);opacity:0;} }
/* =========================
Hero / Top images
========================= */
.hero{
width:100%; height:calc(100vh - 100px); background:#1b1b1b;
opacity:0; transform:translateY(20px);
transition:opacity 1s ease-out, transform 1s ease-out;
}
.hero.visible{ opacity:1; transform:translateY(0); }
.image-box{ position:relative; width:100%; height:380px; overflow:hidden; background:#2a2a2a; }
.image-box::after{
content:""; position:absolute; inset:0;
background:linear-gradient(0deg, rgba(143,125,93,.25), rgba(143,125,93,0) 60%);
pointer-events:none;
}
.fit-image{ width:100%; height:100%; object-fit:cover; }
/* =========================
Deep Blue block
========================= */
.deep-blue-box{ position:relative; width:100%; height:700px; color:#fff; background:var(--blue-deep); }
.blue-inner{
height:100%; max-width:var(--container); margin:0 auto; padding-left:var(--gutter);
display:flex; align-items:flex-start; justify-content:space-between; gap:40px;
}
.blue-copy{
writing-mode:vertical-rl; text-orientation:upright; font-family:'Zen Old Mincho',serif;
font-size:clamp(22px,3.5vw,40px); line-height:1.8;
display:flex; flex-direction:column; gap:28px; padding-top:40px; margin:0;
}
.blue-copy p{ margin:0; }
.blue-image img{ border-radius:8px; }
/* =========================
Top2（黒背景）
========================= */
.red-outline-box{
position:relative; z-index:2; overflow:hidden;
width:95%; height:280px; margin-top:-280px; margin-left:5%; background:#0f0f0f;
border:1px solid rgba(255,255,255,.1);
}
/* =========================
Slider
========================= */
.custom-slider{
position:absolute; z-index:5; overflow:hidden;
top:500px; left:69%; transform:translate(-50%,-50%);
width:700px; height:400px; border:1px solid rgba(255,255,255,.22); background:#111;
box-shadow:0 16px 36px rgba(0,0,0,.35);
}
.slides{ position:relative; width:100%; height:100%; contain:layout paint; }
.slide{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity 1s ease-in-out;
}
.slide.active{ opacity:1; }
.dots{
position:absolute; right:16px; bottom:16px; display:flex; gap:10px; z-index:10;
}
.dot{
width:12px; height:12px; border-radius:50%;
background:#fff; border:1px solid #333; opacity:.7; cursor:pointer; transition:opacity .3s;
}
.dot.active{ opacity:1; background:#333; }
/* =========================
Buttons
========================= */
.btn-outline{
display:inline-flex; align-items:center; gap:8px; padding:12px 18px;
border-radius:10px; border:1.8px solid var(--accent); color:#fff;
background:transparent; text-decoration:none; font-weight:700;
transition:background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-outline:hover{ background:var(--accent); color:#fff; transform:translateY(-1px); }
.btn-pill{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:12px 22px; border-radius:999px; border:2px solid var(--accent);
color:#fff; background:linear-gradient(180deg, rgba(145,15,15,.0), rgba(145,15,15,.08));
text-decoration:none; font-weight:800; letter-spacing:.02em;
transition:background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, filter .2s ease;
}
.btn-pill:hover{ background:var(--accent); color:#fff; transform:translateY(-1px); filter:brightness(1.03); }
/* =========================
Sections
========================= */
.strengths{ position:relative; overflow:hidden; background:#fff; padding:90px 0 110px; }
.strengths::after{
content:"OYAGI"; position:absolute; inset:0; display:grid; place-items:center;
font-family:'Zen Old Mincho',serif; font-weight:700; letter-spacing:.08em; font-size:22vw;
color:rgba(33,47,91,.05); pointer-events:none; user-select:none;
}
.strengths-inner{
position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; grid-template-columns:1fr 420px; gap:48px;
}
.strengths-eyebrow{ margin:0 0 16px; font-size:16px; color:var(--blue-deep); font-weight:600; letter-spacing:.03em; }
.strengths-eyebrow span{ margin-left:10px; font-size:14px; color:rgba(33,47,91,.75); }
.strengths-title{
margin:0; font-family:'Zen Old Mincho',serif; font-weight:600; color:#222; line-height:1.55;
font-size:clamp(20px,3.2vw,36px); max-width:var(--measure-strengths-title);
}
.highlight{ color:#22B05E; font-weight:700; font-size:95%; }
.strengths-right{ align-self:start; border-top:1px solid #e6e8eb; padding-top:24px; width:var(--box-strengths-lead-w); }
.strengths-lead{ margin:0 0 20px; color:#444; line-height:1.9; font-size:15px; }
.business{
position: relative; overflow: hidden; background:#0f0f0f; padding:90px 0 110px;
}
.business::before{
content:"BUSINESS"; position:absolute; inset:0; display:grid; place-items:center;
font-family:'Zen Old Mincho',serif; font-weight:700; letter-spacing:.06em;
font-size: var(--wm-business-size); color:rgba(255,255,255,.06); pointer-events:none; user-select:none; z-index:0;
}
.business-inner{
position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; color:#f7f3ea;
}
.business-title{ margin:0 0 28px; font-family:'Zen Old Mincho',serif; font-weight:600; color:#fff; line-height:1.5; font-size:clamp(22px,3.2vw,38px); }
.business-eyebrow{ margin:0 0 10px; font-size:16px; font-weight:400; color:#d0cabc; }
.business-eyebrow span{ margin-left:8px; font-size:14px; color:#a9a39a; }
.business-lead{
margin:0 0 20px; color:#e9e6df; line-height:1.9; font-size:15px; max-width:var(--box-business-lead-w);
}
.business-right{ border-top:1px solid rgba(255,255,255,.14); padding-top:24px; }
.services { background-color:#212f5b; color:#fff; }
.services-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.service-card{ display:grid; grid-template-rows:auto 1fr; background:transparent; border-left:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); overflow:hidden; }
.svc-thumb{ margin:0; aspect-ratio:16/9; overflow:hidden; background:#222; }
.svc-thumb img{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .6s ease; object-position:50% 28%; }
.service-card:hover .svc-thumb img{ transform:scale(1.06); }
.svc-body{ background:var(--blue-deep); color:#fff; padding:36px 28px 28px; min-height:320px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.svc-head{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:8px; }
.svc-no{ font-family:'Zen Old Mincho',serif; font-size:14px; letter-spacing:.18em; opacity:.85; }
.svc-title{ margin:0; font-family:'Zen Old Mincho',serif; font-weight:700; font-size:clamp(20px,2.4vw,28px); }
.svc-text{ margin:8px 0 20px; font-size:14px; line-height:1.9; opacity:.96; }
/* =========================
Brand bar
========================= */
.brand-bar{ height:10px; background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
/* =========================
Recruit Hero
========================= */
.recruit-hero{
position: relative; width: 100%; height: 520px; overflow: hidden;
scroll-margin-top: 110px; isolation:isolate;
}
@media (max-width: 960px){
.recruit-hero{ height: auto; aspect-ratio: 21 / 9; }
}
.recruit-hero__media{ position: absolute; inset: 0; z-index: -2; }
.recruit-hero__img{ width: 100%; height: 100%; object-fit: cover; }
.recruit-hero::after{
content:""; position:absolute; inset:0; z-index:-1;
background:
linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,0) 64%),
linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,0) 65%);
}
.recruit-hero__content{
position: relative; height: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
display:grid; align-content:center; gap:14px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.recruit-hero__eyebrow{ margin:0; font-size:14px; letter-spacing:.16em; opacity:.9; }
.recruit-hero__title{ margin:0; font-size: clamp(28px, 4vw, 44px); line-height:1.2; }
.recruit-hero__lead{ margin: 6px 0 10px; font-size: clamp(14px, 1.6vw, 16px); line-height:1.9; opacity:.95; }
.btn-ghost-light{
display:inline-flex; align-items:center; gap:10px; height: 44px; padding: 0 18px;
background:#fff; color:#111; border-radius: 999px; text-decoration: none; font-weight: 700;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-ghost-light:hover{ transform: translateY(-2px); filter: brightness(1.02); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
/* =========================
News
========================= */
.news{ background:#121212; padding:80px 0; color:#eae7df; }
.news-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.news-heading{ margin:0 0 14px; font-size:18px; font-weight:700; color:#fff; letter-spacing:.05em; }
.news-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.14); }
.news-list li{ border-bottom:1px solid rgba(255,255,255,.14); }
.news-list a{
display:grid; grid-template-columns: 120px 1fr 110px;
gap:20px; align-items:center; padding:16px 0; text-decoration:none; color:#eae7df;
}
.news-date{ color:#d8d2c7; font-weight:600; letter-spacing:.02em; }
.news-text{ line-height:1.7; }
.news-cat{ color:#b9b3a8; text-align:right; white-space:nowrap; }
.news-list a:hover{ background: rgba(255,255,255,.04); }
.news-list a:hover .news-text{ color:#fff; }
.news-more{ margin-top:12px; }
.btn-line{
display:inline-flex; align-items:center; gap:8px;
padding:10px 0; color:#eae7df; text-decoration:none;
border-bottom:2px solid rgba(255,255,255,.16);
transition: color .2s ease, border-color .2s ease;
}
.btn-line:hover{ color:#fff; border-color:#fff; }
/* =========================
Company Lite
========================= */
.company-lite{
position: relative; background:#0f0f0f; padding: 90px 0 110px;
overflow: hidden; scroll-margin-top: 110px; z-index: 0; color:#eee9de;
}
.company-lite::after{
content: "COMPANY"; position: absolute; inset: 0; display: grid; place-items: center;
font-family: 'Zen Old Mincho', serif; font-weight: 700; letter-spacing: .08em;
font-size: clamp(110px, 17vw, 220px);
color: rgba(255,255,255,.06); pointer-events: none; user-select: none; z-index: -1;
}
/* =========================
Footer
========================= */
.site-footer{ background: var(--blue-deep); color:#fff; margin-top:0; }
.footer-cta{ background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0)); padding: 28px 0 24px; }
.footer-cta-inner{
max-width: var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; grid-template-columns: 1fr 2fr; gap: 28px;
}
.cta-title{ margin:0 0 6px; font-size: clamp(22px, 3.2vw, 30px); }
.cta-lead{ margin:0; opacity:.9; }
.cta-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.cta-card{
display:grid; grid-template-columns: 56px 1fr 20px; align-items:center; gap:16px;
background:#fff; color:#111; text-decoration:none; border-radius:12px;
border:1px solid rgba(0,0,0,.06); padding:16px;
transition: transform .15s ease, box-shadow .25s ease; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.cta-card:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.24); }
.cta-card-icon i{ font-size:22px; color: var(--blue-deep); }
.cta-card-kicker{ display:block; font-size:12px; color:#666; }
.cta-card-main{ display:block; font-size:16px; }
.cta-card-arrow{ color:#999; }
.footer-main{ padding: 28px 0 40px; }
.footer-inner{ max-width: var(--container); margin:0 auto; padding:0 var(--gutter); }
.footer-cols{
display:grid; grid-template-columns: repeat(3, 1fr) 320px; gap:24px;
border-top:1px solid rgba(255,255,255,.14); padding-top:24px;
}
.footer-h{ margin:0 0 8px; font-size:14px; opacity:.9; font-weight:700; }
.footer-list{ margin:0; padding:0; list-style:none; }
.footer-list li{ margin:8px 0; }
.footer-list a{ color:#fff; text-decoration:none; opacity:.88; transition: opacity .2s ease, color .2s ease; }
.footer-list a:hover{ opacity:1; text-decoration: underline; }
.footer-brand{ text-align:right; }
.footer-logo{ width:110px; height:auto; margin:0 0 10px auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.footer-address{ margin:0 0 6px; opacity:.9; }
.footer-map a{ color:#fff; text-decoration: underline; opacity:.9; }
.footer-map a:hover{ opacity:1; }
.footer-social{ justify-content: flex-end; margin-top:10px; }
.footer-bottom{
margin-top: 24px; padding-top: 18px; border-top:1px solid rgba(255,255,255,.12);
display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; opacity:.9;
}
.footer-legal{ list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.footer-legal a{ color:#fff; opacity:.9; text-decoration:none; }
.footer-legal a:hover{ opacity:1; text-decoration: underline; }
/* =========================
Subpage helpers (about.html など)
========================= */
body.subpage{ overflow:auto !important; }
/* =========================
Responsive
========================= */
@media (max-width:1024px){
:root{ --nav-fz:16.5px; --nav-gap:20px; --icon-size:20px; --icon-box:42px; --cta-h:42px; --cta-fz:14.5px; }
}
@media (max-width:960px){
.header{ padding:0 20px; }
.global-nav ul{ gap:16px; }
.hero-title{ font-size:26px; }
.custom-slider{ width:90vw; height:50vw; left:50%; top:520px; }
.deep-blue-box{ height:500px; }
.red-outline-box{ margin-top:-240px; }
.strengths-inner{ grid-template-columns:1fr; gap:28px; }
.business-inner{ grid-template-columns:1fr; gap:28px; }
.business-right{ border-top:none; padding-top:0; }
.services-inner{ padding:0 20px; gap:24px; }
}
@media (max-width:768px){
:root{ --nav-fz:15px; --nav-gap:16px; --icon-size:20px; --icon-box:40px; --cta-h:40px; --cta-fz:14px; }
.global-nav{ display:none; } /* 必要に応じてハンバーガーへ */
.blue-inner{ flex-direction:row; gap:20px; padding-left:20px; }
.blue-copy{ font-size:clamp(18px,4vw,28px); }
.deep-blue-box{ height:380px; }
.red-outline-box{ margin-top:-200px; }
.strengths, .business, .services{ padding:64px 0 80px; }
.strengths-inner, .business-inner{ padding:0 20px; }
.strengths-title, .business-title{ font-size:clamp(20px,5.2vw,30px); }
.services-inner{ grid-template-columns:1fr; }
.svc-body{ min-height:auto; }
}
@media (max-width:960px){
.footer-cta-inner{ grid-template-columns: 1fr; }
.cta-cards{ grid-template-columns: 1fr; }
.footer-cols{ grid-template-columns: repeat(2, 1fr); }
.footer-brand{ grid-column: 1 / -1; text-align:left; }
.footer-logo{ margin: 0 0 10px 0; }
}
@media (max-width: 720px){
.news-list a{ grid-template-columns: 1fr; row-gap:6px; padding:14px 0; }
.news-cat{ text-align:left; font-size:13px; }
.news-date{ color: var(--muted); font-weight:500; }
.footer-cols{ grid-template-columns: 1fr; }
.footer-bottom{ flex-direction: column; align-items: flex-start; gap:8px; }
}
/* =========================
Sticky header offset
========================= */
#recruit, #company, #news { scroll-margin-top: 110px; }
/* ====== ボタン（私たちの強み右） ====== */
.strength-btn {
display: inline-block;
padding: 12px 28px;
font-size: 16px;
border-radius: 6px;
background-color: var(--blue-deep); /* 背景を濃青 */
color: #fff; /* 白文字 */
text-decoration: none;
transition: 0.3s;
}
.strength-btn:hover {
background-color: var(--accent); /* ホバーで赤アクセント */
}
/* ====== お知らせ下の空白削除 ====== */
.news-section {
margin-bottom: 0; /* 不要な余白をリセット */
padding-bottom: 0;
}
.contact-section {
margin-top: 0; /* 上余白を消す */
padding-top: 40px; /* 必要ならここで調整（適度に余白を残す） */
}
/* =========================
🔧 Hotfix Overrides (最後に貼る)
========================= */
/* 1) 「私たちの強み」右ボタンを確実に見える色へ */
:is(.strength, #strength, .features, #features) :is(.btn, .button, .cta, a[role="button"], button) {
background: var(--blue-deep) !important;
color: #fff !important;
border: none !important;
padding: 12px 28px !important;
font-weight: 600 !important;
border-radius: 6px !important;
text-decoration: none !important;
display: inline-block !important;
}
:is(.strength, #strength, .features, #features) :is(.btn, .button, .cta, a[role="button"], button):hover {
background: var(--accent) !important;
color: #fff !important;
}
/* 2) 「お知らせ」下の謎の空白を完全削除 */
:is(.news-section, #news, section.news) {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
:is(.contact-section, #contact, section.contact) {
margin-top: 0 !important;
padding-top: 40px !important;
}
/* =========================
🔧 最終オーバーライド（最後に貼る）
========================= */
/* 1) 「私たちの強み」右のボタンを“塗りボタン”に固定 */
:is(#strength, .strength, #features, .features)
:is(.btn, .button, .cta, .cta-btn, a[role="button"], button) {
background: var(--accent) !important; /* 赤で塗る */
color: #fff !important;
border: 2px solid var(--accent) !important;
padding: 12px 28px !important;
border-radius: 8px !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
box-shadow: none !important;
}
/* “outline / ghost / secondary” 系の上書きを潰す */
:is(#strength, .strength, #features, .features)
:is(.btn-outline, .btn--outline, .btn-ghost, .btn-secondary, .is-outline) {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
:is(#strength, .strength, #features, .features)
:is(.btn, .button, .cta, .cta-btn, a[role="button"], button):hover {
filter: brightness(0.92) !important;
}
/* 2) 「お知らせ」の下の灰色帯（スペーサー/擬似要素）を完全排除 */
:is(#news, .news, .news-section) {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
border: 0 !important;
}
:is(#news, .news, .news-section)::after,
:is(#news, .news, .news-section)::before {
content: none !important;
display: none !important;
}
/* ニュース直後に噛む、よくある“灰色スペーサー”の掃除 */
/* NEWS直後の余計なスペーサーだけを消す（フッター等は触らない） */
:is(#news,.news,.news-section)
+ :is(.spacer,.section-separator,.divider,.hr,.news-tail,.news-shadow,
.bg-gray,.muted-bg,.gray,.strip-gray,.section-gap,.gap-lg){
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
}
/* 次のセクション（= お問い合わせ）に余白が入らないよう固定 */
:is(#news, .news, .news-section)
+ :is(#contact, .contact, .contact-section) {
margin-top: 0 !important;
padding-top: 40px !important; /* 必要分だけ（調整可） */
background: transparent !important;
}
/* 最後の行末余白・下線の取りこぼし対策 */
:is(#news, .news, .news-section) *:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
/* ========== 強制：私たちの強み 右ボタンを塗りボタンに固定 ========== */
/* 特異性を意図的に上げるため、ID/クラス/属性/擬似を多段で併用 */
body #strength.strength .right :is(a,button)[class*="btn"],
body #strength.strength :is(a,button)[class*="cta"],
body .strength#strength :is(a[role="button"], button),
body .features#features :is(a[role="button"], button) {
background: var(--accent) !important;
color: #fff !important;
border: 2px solid var(--accent) !important;
padding: 12px 28px !important;
border-radius: 8px !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
box-shadow: none !important;
}
/* outline/ghost系クラス名を片っ端から塗りつぶし */
body #strength.strength :is(.btn-outline,.btn--outline,.outline,.ghost,.secondary,.is-outline),
body .features#features :is(.btn-outline,.btn--outline,.outline,.ghost,.secondary,.is-outline) {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* よくあるアンカーのパターン（「について」「about」系の href） */
#strength :is(a[href*="about"], a[href*="%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"]) {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* ========== 強制：お知らせの下のグレー帯を無効化 ========== */
:is(#news,.news,.news-section){
margin-bottom:0 !important; padding-bottom:0 !important;
background:transparent !important; border:0 !important;
}
:is(#news,.news,.news-section)::before,
:is(#news,.news,.news-section)::after{ content:none !important; display:none !important; }
/* ニュース直後に挿まる“帯／スペーサー”を全消し（次がお問い合わせまで） */
:is(#news,.news,.news-section) ~ * {
/* まず安全にデフォルト透明化 */
background: transparent !important;
box-shadow: none !important;
}
:is(#news,.news,.news-section)
+ :is(.spacer,.section-separator,.divider,.hr,.news-tail,.news-shadow,
.bg-gray,.muted-bg,.gray,.strip-gray,.section-gap,.gap-lg){
height:0 !important; min-height:0 !important;
margin:0 !important; padding:0 !important; border:0 !important;
}
/* 次セクション（お問い合わせ）を綺麗につなぐ */
:is(#news,.news,.news-section) + :is(#contact,.contact,.contact-section){
margin-top:0 !important; padding-top:40px !important;
background:transparent !important;
}
/* 取り残し防止 */
:is(#news,.news,.news-section) *:last-child{
margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:0 !important;
}
/* 強みの右ボタン（btn-outline）を赤塗りに */
.strengths .btn-outline {
background: var(--accent) !important;
color: #fff !important;
border: 2px solid var(--accent) !important;
}
.strengths .btn-outline:hover {
background: #fff !important;
color: var(--accent) !important;
}
/* ニュース直後のスライダーが余計に見えてるのを抑える */
.custom-slider {
margin-top: 0 !important; /* 余計な隙間を消す */
background: transparent !important; /* グレー背景を消す */
}
/* === 強み右ボタンを赤塗りに === */
.strengths .btn-outline {
background: var(--accent) !important;
color: #fff !important;
border: 2px solid var(--accent) !important;
}
.strengths .btn-outline:hover {
background: #fff !important;
color: var(--accent) !important;
}
/* === ニュース下の余白を消す（原因は空の.hero） === */
.hero {
display: none !important;
}
.page-about h2 {
font-size: 2.6rem !important;
margin-bottom: 20px;
color: #000;
}
.page-about h3 {
font-size: 2rem !important;
margin-bottom: 15px;
color: #111;
}
.page-about p {
font-size: 1.2rem;
line-height: 1.8;
}
/* =========================
ABOUT（about.html 専用・最終決定版）
========================= */
/* セクション自体：白・高め・黒グラデ殺す */
.about-hero {
background:#fff !important;
position: relative;
min-height: 640px !important; /* ← heightをmin-heightに */
padding: 20px 0 40px !important; /* 上の余白を調整 */
isolation:isolate;
}
.about-hero::after{ background:none !important; }
/* 「ABOUT」の下の「大八木について」 */
.about-hero .recruit-hero__lead{
text-align:left;
margin-left:4px; /* “A”の真下に寄せる横位置 */
margin-top:-10px; /* ← もう少し上なら -12 ～ -16 に */
font-size:clamp(18px,3.2vw,24px) !important;
color:#333 !important;
text-shadow:none !important;
}
/* キャッチ（右寄せ・下目・大きく） */
.about-hero .recruit-hero__content{ position:relative; }
.about-hero .about-catch{
position:absolute !important;
right:6% !important; /* ← 右寄せ量。もっと右なら 4% など */
top:70% !important; /* ← 下げたいほど数値を大きく（例 76%）*/
transform:translateY(-50%);
text-align:right;
z-index:3;
}
.about-hero .about-catch-title{
margin:0;
font-weight:700;
line-height:1.55;
color:#000;
font-size:clamp(48px,7.2vw,96px); /* ← もっと大きく: 110px などへ */
}
/* ==== ABOUT ヒーローの最終オーバーライド ==== */
/* 高さは余裕だけ確保、余白は少なめに */
.about-hero{
background:#fff !important;
min-height: 640px !important;
padding: 16px 0 40px !important;
position: relative;
}
.about-hero::after{ background:none !important; }
/* ★ 見出しブロック（ABOUT＋大八木について）をまとめて上へ */
.about-hero .recruit-hero__content{
position: relative;
top: -80px !important; /* ← 数字を -60 / -100 に調整で上下一括移動 */
}
/* 「大八木について」微調整（Aの真下狙い） */
.about-hero .recruit-hero__lead{
margin-top: -8px !important;
margin-left: 4px !important;
text-align: left !important;
color:#333 !important;
font-size: clamp(18px, 3.2vw, 24px) !important;
text-shadow: none !important;
}
/* キャッチコピーは“より下”へ（位置は％で調整） */
.about-hero .about-catch{
position: absolute !important;
right: 6% !important;
top: 66% !important; /* ← もっと下げたければ 68% / 70% に */
transform: translateY(-50%);
text-align: right;
z-index: 3;
}
.about-hero .about-catch-title{
font-size: clamp(48px, 7.2vw, 96px) !important;
line-height: 1.55;
font-weight: 700;
color:#000;
margin: 0;
}
/* ==== ABOUT ヒーロー調整 ==== */
/* 見出し（ABOUT＋大八木について）をさらに上に */
.about-hero .recruit-hero__content{
position: relative;
top: -120px !important; /* ← -100〜-140pxくらいで好み調整 */
}
/* キャッチコピーの配置・サイズ調整 */
.about-hero .about-catch{
position: absolute !important;
right: 10% !important; /* ← 右寄せ強め。8%〜12%で調整可 */
top: 64% !important; /* ← 上げ下げは%を変える（62〜66%あたり） */
transform: translateY(-50%);
text-align: right;
z-index: 3;
}
.about-hero .about-catch-title{
font-size: clamp(32px, 5.2vw, 64px) !important; /* ← 今より小さく */
line-height: 1.5;
font-weight: 700;
color:#000;
margin: 0;
}
/* ==== ABOUT ヒーロー調整 ==== */
/* 見出し（ABOUT＋大八木について）をさらに上に */
.about-hero .recruit-hero__content{
position: relative;
top: -150px !important; /* ← -120よりさらに上へ。好みで-140〜-160px */
text-align: left;
}
/* キャッチコピー中央寄せ＆少し下 */
.about-hero .about-catch{
position: absolute !important;
left: 50% !important;
top: 72% !important; /* ← 少し下げ気味。70〜75%で調整可 */
transform: translate(-50%, -50%); /* ← 中央揃え */
text-align: center;
z-index: 3;
width: 100%;
}
.about-hero .about-catch-title{
font-size: clamp(28px, 4.5vw, 56px) !important; /* 中央寄せならやや小さめ推奨 */
line-height: 1.5;
font-weight: 700;
color:#000;
margin: 0;
}
/* キャッチコピー中央配置・青色 */
.about-hero .about-catch {
position: absolute !important;
left: 50% !important;
top: 50% !important; /* ← 箱の中央に配置 */
transform: translate(-50%, -50%); /* 中央寄せ */
text-align: center;
z-index: 3;
width: 100%;
}
.about-hero .about-catch-title {
font-size: clamp(28px, 4.2vw, 52px) !important;
line-height: 1.5;
font-weight: 700;
color: var(--blue-deep); /* ← サイト共通の青に */
margin: 0;
}
/* キャッチコピー：右寄せ、少し下げる */
.about-hero .about-catch {
position: absolute;
right: 8%;
top: 55%; /* ← 前回より少し下げた */
transform: translateY(-50%);
text-align: right;
z-index: 3;
}
.about-hero .about-catch-title {
font-size: clamp(28px, 4vw, 48px);
line-height: 1.6;
font-weight: 700;
color: var(--blue-deep); /* 青色 */
margin: 0;
}
.about-catch-title .red {
color: #c00; /* 赤色 */
}
/* ===== ABOUT hero: conflict killer (final override) ===== */
/* セクション基本（白＆高さ） */
.about-hero{
background:#fff !important;
position:relative !important;
min-height:560px !important; /* お好みで 520〜640 */
padding:16px 0 40px !important;
isolation:isolate;
}
.about-hero::after{ background:none !important; }
/* 見出しブロック（ABOUT＋大八木について）をまとめて少し上へ */
.about-hero .recruit-hero__content{
position:relative !important;
top:-120px !important; /* 上下の一括調整はここ（-100〜-150） */
}
/* 小見出し整形 */
.about-hero .recruit-hero__lead{
margin-top:-8px !important;
margin-left:4px !important;
text-align:left !important;
color:#333 !important;
text-shadow:none !important;
}
/* ←←← ここが衝突ポイント：中央寄せ系を完全に無効化して右寄せ固定にする */
.about-hero .about-catch{
position:absolute !important;
left:auto !important; /* 中央寄せの left を打ち消す */
width:auto !important; /* width:100% を打ち消す */
right:8% !important; /* 右寄せ量（6〜10%で調整） */
top:60% !important; /* 位置を少し下（58〜64%で調整） */
transform:translateY(-50%) !important;
text-align:right !important;
z-index:5 !important;
}
/* タイポグラフィ＆色 */
.about-hero .about-catch-title{
margin:0 !important;
font-weight:700;
line-height:1.55;
font-size:clamp(28px, 4.6vw, 52px) !important; /* 大きすぎ問題を回避 */
color:var(--blue-deep) !important; /* 青 */
}
.about-hero .about-catch-title .red{
color:#c00 !important; /* 「、」だけ赤 */
}
.about-hero .about-catch-title {
white-space: nowrap; /* 改行禁止 */
overflow: hidden; /* はみ出た分は隠す */
text-overflow: ellipsis; /* 文字が収まらない場合「…」を付ける */
}
/* === ABOUTキャッチコピー 中央揃え・1行固定 === */
.about-hero .about-catch {
position: absolute !important;
left: 50% !important;
top: 65% !important; /* 好みで 60〜68% 調整 */
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
z-index: 3;
}
.about-hero .about-catch-title {
font-size: clamp(32px, 5vw, 56px) !important; /* 1行に収まるサイズ */
line-height: 1.3 !important;
font-weight: 700;
color: var(--blue-deep); /* 青文字 */
margin: 0;
white-space: nowrap; /* ここで改行禁止（1行固定） */
}
/* 「、」だけ赤色に */
.about-catch-title .red {
color: var(--accent); /* 赤 */
}
/* === ABOUTキャッチコピー 強制オーバーライド === */
.about-hero .about-catch {
position: absolute !important;
left: 50% !important;
top: 65% !important; /* ↓ 上下調整 */
transform: translate(-50%, -50%) !important;
text-align: center !important;
width: 100% !important;
z-index: 5 !important;
}
.about-hero .about-catch-title {
font-size: clamp(28px, 5vw, 52px) !important; /* 1行収め用 */
line-height: 1.3 !important;
font-weight: 700 !important;
color: var(--blue-deep) !important;
margin: 0 !important;
white-space: nowrap !important; /* ← ここで強制1行 */
}
.about-hero .about-catch-title .red {
color: var(--accent) !important; /* 赤 */
}
/* === ABOUTキャッチコピー 最終調整 === */
.about-hero .about-catch {
position: absolute !important;
left: 50% !important;
top: 72% !important; /* ← 前回65% → 下げて72% */
transform: translate(-50%, -50%) !important;
text-align: center !important;
width: 100% !important;
z-index: 5 !important;
}
.about-hero .about-catch-title {
font-size: clamp(20px, 3.5vw, 38px) !important; /* ← 小さめにして必ず収める */
line-height: 1.3 !important;
font-weight: 700 !important;
color: var(--blue-deep) !important;
margin: 0 !important;
white-space: nowrap !important; /* ← 改行禁止 */
}
.about-hero .about-catch-title .red {
color: var(--accent) !important; /* 赤 */
}
/* === ABOUT 見出し塊（ABOUT + 大八木について）をさらに上へ === */
.about-hero .recruit-hero__content {
position: relative;
top: -160px !important; /* ← 数字を大きくするともっと上に */
}
/* === 「大八木について」単体の微調整 === */
.about-hero .recruit-hero__lead {
margin-top: -12px !important; /* ← さらに上へ */
margin-left: 4px !important;
text-align: left !important;
font-size: clamp(18px, 2.8vw, 22px) !important;
color: #333 !important;
}
/* === キャッチコピー：1行＆中央揃え === */
.about-hero .about-catch {
position: absolute !important;
left: 50% !important;
top: 74% !important; /* ← もっと下へ置きたい場合は 76% とか */
transform: translate(-50%, -50%) !important;
text-align: center !important;
width: 90% !important; /* ← 横幅を広げすぎない */
white-space: nowrap !important; /* ← 強制1行 */
overflow: hidden !important;
}
.about-hero .about-catch-title {
font-size: clamp(18px, 3vw, 30px) !important; /* ← 横に収まるよう調整 */
line-height: 1.4 !important;
font-weight: 700 !important;
color: var(--blue-deep) !important;
margin: 0 !important;
}
.about-hero .about-catch-title .red {
color: var(--accent) !important;
}
/* ==== ABOUT セクション最終調整 ==== */
/* 「ABOUT + 大八木について」を上げる */
body.page-about .about-hero .recruit-hero__content {
position: relative;
top: -180px !important; /* ← -160からさらに近づけた */
}
/* 「大八木について」をABOUTに近づける微調整 */
body.page-about .about-hero .recruit-hero__lead {
margin-top: -20px !important; /* ← -14 → -20にして上へ */
margin-left: 4px !important;
text-align: left !important;
}
/* キャッチコピー（中央1行・大きめ・細フォント） */
body.page-about .about-hero .about-catch {
position: absolute !important;
left: 50% !important;
top: 68% !important; /* ← 中央より少し下げ */
transform: translate(-50%, -50%) !important;
text-align: center !important;
width: 96% !important;
z-index: 3;
}
body.page-about .about-hero .about-catch-title {
white-space: nowrap !important;
font-family: 'Source Sans Pro', 'Noto Serif JP', sans-serif !important; /* 細めフォント */
font-weight: 300 !important; /* 細め */
font-size: clamp(24px, 5.2vw, 56px) !important; /* ← 少し大きめに */
line-height: 1.4 !important;
color: var(--blue-deep) !important;
margin: 0 !important;
}
body.page-about .about-hero .about-catch-title .red {
color: var(--accent) !important; /* カンマだけ赤 */
}
body.page-about .about-hero .about-catch-title {
white-space: nowrap !important;
font-family: 'Source Sans Pro', 'Noto Serif JP', sans-serif !important;
font-weight: 300 !important;
font-size: clamp(24px, 5.2vw, 56px) !important;
line-height: 1.4 !important;
color: #344c7c !important; /* ← 馴染む青に変更 */
margin: 0 !important;
}
/* 「大八木について」をABOUTに近づける */
.about-hero .recruit-hero__lead {
margin-top: -18px !important; /* ← -10 → -18 にしてさらに上へ */
margin-left: 4px !important;
text-align: left !important;
color: #333 !important;
font-size: clamp(18px, 3.2vw, 24px) !important;
text-shadow: none !important;
}
/* キャッチコピー：下げる */
.about-hero .about-catch {
position: absolute !important;
left: 50% !important;
top: 85% !important; /* ← 72% → 74% にしてさらに下へ */
transform: translate(-50%, -50%);
text-align: center;
z-index: 3;
width: 100%;
}
/* =========================
Services page additions
========================= */
/* ヒーロー微調整（共通recruit-hero流用） */
.svc-hero { height: 480px; }
@media (max-width: 960px){ .svc-hero { height: auto; aspect-ratio: 21 / 8; } }
/* セクションヘッダ */
.services-page { background:#0f0f0f; color:#f7f3ea; padding: 80px 0 100px; }
.services-head{
max-width: var(--container);
margin: 0 auto 24px;
padding: 0 var(--gutter);
text-align: left;
}
/* 事業カードグリッド（スマホ1→PC2） */
.svc-grid{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
@media (max-width: 900px){
.svc-grid{ grid-template-columns: 1fr; }
}
/* カード */
.svc-card{
display: grid;
grid-template-rows: auto 1fr;
background: #111;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.svc-card__thumb{ margin:0; aspect-ratio: 16 / 9; background:#222; overflow: hidden; }
.svc-card__thumb img{ width:100%; height:100%; object-fit: cover; transform: scale(1); transition: transform .6s ease; }
.svc-card:hover .svc-card__thumb img{ transform: scale(1.06); }
.svc-card__body{ padding: 24px; display:grid; align-content:start; gap: 12px; }
.svc-card__eyebrow{ font-family:'Zen Old Mincho',serif; letter-spacing:.16em; opacity:.85; }
.svc-card__title{ margin: 0 0 6px; font-size: clamp(20px,2.8vw,28px); color:#fff; }
.svc-card__text{ margin: 0 0 8px; opacity:.96; }
.svc-points{ margin: 0; padding: 0; list-style: none; display:grid; gap:8px; }
.svc-points li{ display:flex; align-items: center; gap:10px; }
.svc-points i{ opacity:.9; }
.svc-card__cta{ margin-top: 8px; }
/* 強み（既存セクションの色合わせ） */
.strengths-on-service{ background:#fff; }
.adv-list{ margin:0 0 18px; padding-left: 1.2em; }
.adv-list li{ margin: .4em 0; color:#333; }
/* Flow */
.flow{ background:#0f0f0f; color:#f7f3ea; padding: 80px 0 100px; }
.flow-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.flow-steps{
margin: 24px 0 0; padding: 0; list-style: none;
display:grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
@media (max-width: 900px){
.flow-steps{ grid-template-columns: 1fr; }
}
.step-card{
position: relative;
background: #111; border:1px solid rgba(255,255,255,.12);
border-radius: 12px; padding: 20px;
box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.step-no{
position: absolute; top: 12px; right: 14px;
font-family:'Zen Old Mincho',serif; font-size: 14px; opacity:.6;
}
.step-title{ margin: 0 0 8px; font-size: 18px; color:#fff; }
.step-text{ margin: 0; opacity:.95; }
/* Pricing */
.pricing{ background:#fff; color:#111; padding: 80px 0 100px; }
.pricing-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.price-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 960px){ .price-cards{ grid-template-columns: 1fr; } }
.price-card{
background:#f9f7f1; border:1px solid rgba(0,0,0,.06); border-radius:12px;
padding: 24px; display:grid; gap:10px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.price-title{ margin:0; font-size: 18px; }
.price-lead{ margin:0; color:#444; }
.price-value{ font-size: 28px; font-weight: 800; }
.price-value span{ font-size: 14px; font-weight: 600; color:#666; margin-left: 4px; }
.price-feats{ margin:0; padding-left: 1.2em; color:#333; }
.price-card .btn-pill{ justify-self: start; }
/* FAQ */
.faq{ background:#0f0f0f; color:#f7f3ea; padding: 80px 0 100px; }
.faq-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.faq-items{ display:grid; gap: 10px; }
.faq-item{
background:#111; border:1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 18px;
}
.faq-item > summary{
cursor:pointer; font-weight:700; outline:none; list-style:none;
}
.faq-item[open]{ box-shadow: 0 10px 28px rgba(0,0,0,.28); }
/* 最後のCTA */
.svc-cta{ background: var(--blue-deep); color:#fff; padding: 70px 0; }
.svc-cta-inner{
max-width: var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; gap:10px; text-align:center;
}
.svc-cta .svc-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.svc-cta .btn-pill{ background: linear-gradient(180deg, rgba(145,15,15,.0), rgba(145,15,15,.12)); border-color: var(--accent); }
.svc-cta .btn-outline{ border-color:#fff; }
/* =========================
Services (dynamic full refresh)
========================= */
/* ---- Hero 3D ---- */
.svc-hero3d{
position: relative; height: 560px; overflow: hidden; color:#fff; isolation:isolate;
background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.18), transparent 60%),
linear-gradient(180deg, #1c2648, #141a31 60%, #0f1324);
}
@media (max-width: 960px){ .svc-hero3d{ height: 420px; } }
.svc-hero3d__bg{ position:absolute; inset:0; background:
radial-gradient(800px 400px at 80% 120%, rgba(145,15,15,.25), transparent 45%); z-index:0; }
.svc-hero3d__layers{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.svc-hero3d__layers img{ position:absolute; width:min(420px, 36vw); opacity:.55; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.layer-1{ left:8%; bottom:-40px; }
.layer-2{ right:12%; top:8%; }
.layer-3{ left:36%; top:18%; width:min(260px, 24vw); opacity:.35; }
.svc-hero3d__content{
position: relative; z-index:2; height:100%;
max-width: var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; align-content:center; gap:10px; text-shadow:0 2px 14px rgba(0,0,0,.25);
}
.svc-eyebrow{ margin:0; letter-spacing:.18em; opacity:.9; }
.svc-hero-title{ margin:0; font-size: clamp(28px, 5vw, 56px); }
.svc-hero-lead{ margin:0 0 8px; opacity:.95; }
.svc-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* ---- Tabs ---- */
.svc-tabs{ background:#0f0f0f; color:#f7f3ea; padding:64px 0 80px; }
.svc-tabs__inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.tabs{ display:flex; gap:10px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:16px; }
.tab-btn{
background:#111; color:#fff; border:1px solid rgba(255,255,255,.14);
padding:10px 14px; border-radius:10px 10px 0 0; cursor:pointer; font-weight:700;
}
.tab-btn[aria-selected="true"]{ background:#1b223d; border-bottom-color:#1b223d; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:fadeUp .4s ease both; }
@keyframes fadeUp{ from{opacity:0; transform: translateY(10px);} to{opacity:1; transform:none;} }
.panel-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.panel-visual{ margin:0; aspect-ratio:16/10; overflow:hidden; border-radius:12px; background:#222; }
.panel-visual img{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .8s ease; }
.panel-visual:hover img{ transform:scale(1.06); }
.panel-title{ margin:0 0 6px; font-size: clamp(22px, 3vw, 34px); color:#fff; }
.panel-text{ margin:0 0 10px; opacity:.96; }
.chip-list{ margin:0 0 12px; padding:0; list-style:none; display:flex; gap:8px; flex-wrap:wrap; }
.chip-list li{ border:1px solid rgba(255,255,255,.22); padding:6px 10px; border-radius:999px; font-size:13px; opacity:.92; }
.panel-ctas{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 960px){ .panel-grid{ grid-template-columns:1fr; } }
/* ---- KPI Count ---- */
.svc-kpis{ background:#fff; color:#111; padding:64px 0; }
.kpi-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.kpi{ background:#f5f3ed; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:18px; text-align:center; }
.kpi-num{ font-size: clamp(28px, 4vw, 46px); font-weight:800; color:#212f5b; }
.kpi-label{ opacity:.75; }
@media (max-width: 960px){ .kpi-inner{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .kpi-inner{ grid-template-columns: 1fr; } }
/* ---- Filterable Cards ---- */
.svc-cards{ background:#0f0f0f; color:#f7f3ea; padding:80px 0; }
.cards-head{
max-width:var(--container); margin:0 auto 12px; padding:0 var(--gutter);
display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.cards-head h2{ margin:0; font-size: clamp(22px, 3vw, 34px); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-btn{
background:#111; color:#fff; border:1px solid rgba(255,255,255,.16);
padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700; opacity:.9;
}
.filter-btn.is-active{ background:#212f5b; border-color:#212f5b; }
.cards-grid{
max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; grid-template-columns: repeat(3,1fr); gap:18px;
}
@media (max-width: 960px){ .cards-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .cards-grid{ grid-template-columns: 1fr; } }
.fx-card{ background:#111; border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden;
transform: translateY(6px); opacity:0; transition: opacity .6s ease, transform .6s ease; }
.fx-card img{ width:100%; height:180px; object-fit:cover; background:#222; }
.fx-card__body{ padding:16px; }
.fx-card__body h3{ margin:0 0 6px; color:#fff; font-size:18px; }
.fx-card__body p{ margin:0; opacity:.95; }
.fx-card.in{ transform:none; opacity:1; }
.fx-card.is-hide{ display:none; }
/* ---- Slider ---- */
.svc-slider{ background:#fff; padding:80px 0; }
.svc-slider .slider{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.slides{ position:relative; aspect-ratio: 16 / 9; background:#eee; border-radius:12px; overflow:hidden; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.slide.is-active{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:10px 14px; color:#fff;
background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); font-weight:600; }
.svc-slider .dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.svc-slider .dot{ width:10px; height:10px; border-radius:999px; background:#bbb; border:none; cursor:pointer; }
.svc-slider .dot.is-active{ background:#212f5b; }
/* ---- Pricing / FAQ（既存流用＋微調整） ---- */
.pricing{ background:#fff; color:#111; padding: 80px 0 100px; }
.pricing-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.price-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 960px){ .price-cards{ grid-template-columns: 1fr; } }
.price-card{
background:#f9f7f1; border:1px solid rgba(0,0,0,.06); border-radius:12px;
padding: 24px; display:grid; gap:10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.price-title{ margin:0; font-size:18px; }
.price-lead{ margin:0; color:#444; }
.price-value{ font-size:28px; font-weight:800; color:#212f5b; }
.price-value span{ font-size:14px; font-weight:600; color:#666; margin-left: 4px; }
.price-feats{ margin:0; padding-left:1.2em; color:#333; }
.price-card .btn-pill{ justify-self: start; }
.faq{ background:#0f0f0f; color:#f7f3ea; padding:80px 0 100px; }
.faq-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.faq-items{ display:grid; gap:10px; }
.faq-item{ background:#111; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 18px; }
.faq-item > summary{ cursor:pointer; font-weight:700; outline:none; list-style:none; }
/* ---- Quick CTA ---- */
.quick-cta{
position: fixed; right: 16px; bottom: 16px; z-index: 100;
transform: translateY(16px); opacity:0; pointer-events:none;
transition: transform .35s ease, opacity .35s ease;
}
.quick-cta.show{ transform:none; opacity:1; pointer-events:auto; }
.quick-cta__body{
display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
background:#212f5b; color:#fff; border:1px solid rgba(255,255,255,.18);
box-shadow:0 10px 26px rgba(0,0,0,.26);
}
.quick-cta__txt{ display:grid; line-height:1.2; }
.quick-cta__txt strong{ font-size:14px; }
.quick-cta__txt span{ font-size:12px; opacity:.9; }
/* ---- Reveal helper ---- */
.reveal{ transform: translateY(12px); opacity: 0; transition: transform .6s ease, opacity .6s ease; }
.reveal.in{ transform:none; opacity:1; }
/* =========================
ABOUT page (index.html)
========================= */
/* ---- Hero ---- */
.about-hero{
position:relative; height:560px; color:#fff; isolation:isolate; overflow:hidden;
background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.16), transparent 60%),
linear-gradient(180deg, #1c2648, #141a31 60%, #0f1324);
}
@media (max-width: 960px){ .about-hero{ height:420px; } }
.about-hero__bg{ position:absolute; inset:0; background:
radial-gradient(900px 420px at 80% 120%, rgba(145,15,15,.25), transparent 45%); z-index:0; }
.about-hero__layers{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.a-layer{ position:absolute; opacity:.55; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); width:min(420px, 36vw); }
.l1{ left:8%; bottom:-40px; }
.l2{ right:12%; top:8%; }
.l3{ left:36%; top:18%; width:min(260px, 24vw); opacity:.35; }
.about-hero__content{
position:relative; z-index:2; height:100%;
max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
display:grid; align-content:center; gap:10px; text-shadow:0 2px 14px rgba(0,0,0,.25);
}
.about-eyebrow{ margin:0; letter-spacing:.18em; opacity:.9; }
.about-title{ margin:0; font-size:clamp(28px,5vw,56px); }
.about-lead{ margin:0 0 8px; opacity:.95; }
.about-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.about-scroll{
position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center;
}
/* ---- Subnav ---- */
.subnav{ position:sticky; top:100px; z-index:900; background:#0f0f0f; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.subnav.sticky{ box-shadow:0 10px 26px rgba(0,0,0,.24); }
.subnav-list{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); list-style:none; display:flex; gap:18px; overflow:auto; }
.subnav a{ color:#eae7df; text-decoration:none; display:inline-block; padding:12px 0; opacity:.85; white-space:nowrap; }
.subnav a.is-active{ color:#fff; font-weight:700; border-bottom:2px solid #fff; }
/* ---- Section Base ---- */
.section{ padding:80px 0; }
.section-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.section-head{ margin:0 0 14px; }
.section-eyebrow{ margin:0; font-size:14px; letter-spacing:.16em; opacity:.7; }
.section-title{ margin:0; font-size: clamp(22px, 3vw, 34px); }
/* ---- Philosophy ---- */
.philosophy{ background:#fff; color:#111; }
.philosophy-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width: 960px){ .philosophy-grid{ grid-template-columns: 1fr; } }
.ph-card{ background:#f7f5ef; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:18px; transform:translateY(12px); opacity:0; transition:.6s; }
.ph-card.in{ transform:none; opacity:1; }
.ph-h{ margin:0 0 6px; font-size:14px; letter-spacing:.16em; color:#212f5b; }
.ph-t{ margin:0; }
.ph-list{ margin:0; padding-left:1.2em; }
/* ---- Message ---- */
.message{ background:#0f0f0f; color:#f7f3ea; }
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
@media (max-width: 960px){ .split{ grid-template-columns: 1fr; } }
.msg-visual{ margin:0; aspect-ratio: 4 / 3; overflow:hidden; border-radius:12px; background:#222; transform: translateY(12px); opacity:0; transition:.6s; }
.msg-visual.in{ transform:none; opacity:1; }
.msg-visual img{ width:100%; height:100%; object-fit:cover; }
.msg-quote{ margin:0 0 10px; padding:14px; border-left:4px solid var(--accent); background:rgba(255,255,255,.04); transform:translateY(12px); opacity:0; transition:.6s; }
.msg-quote.in{ transform:none; opacity:1; }
.msg-text{ transform:translateY(12px); opacity:0; transition:.6s; }
.msg-text.in{ transform:none; opacity:1; }
.msg-sign{ opacity:.85; margin-top:8px; }
/* ---- KPIs ---- */
.kpis{ background:#fff; color:#111; }
.kpi-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width: 960px){ .kpi-inner{ grid-template-columns: 1fr; } }
.kpi{ background:#f5f3ed; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:18px; text-align:center; }
.kpi-num{ font-size: clamp(28px, 4vw, 46px); font-weight:800; color:#212f5b; }
.kpi-label{ opacity:.75; }
/* ---- History ---- */
.history{ background:#0f0f0f; color:#f7f3ea; }
.timeline{ display:grid; grid-auto-flow: column; gap:16px; overflow:auto; padding-bottom:8px; scrollbar-width: thin; }
.timeline.drag{ cursor:grabbing; }
.tl-item{ min-width: 240px; background:#111; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px; transform:translateY(12px); opacity:0; transition:.6s; }
.tl-item.in{ transform:none; opacity:1; }
.tl-year{ margin:0 0 6px; color:#fff; font-size:18px; }
.tl-text{ margin:0; opacity:.96; }
.tl-item.is-now{ outline: 2px solid var(--green); }
/* ---- Brand marquee ---- */
.brandline{ background:#fff; padding:24px 0; }
.brandline-track{ display:flex; gap:36px; align-items:center; animation:marq 22s linear infinite; }
.brandline-track img{ height:36px; width:auto; filter:grayscale(100%); opacity:.7; }
@keyframes marq{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
/* ---- Outline ---- */
.outline{ background:#fff; color:#111; }
.outline-table{ display:grid; gap:10px; margin:0 0 12px; }
.outline-table > div{ display:grid; grid-template-columns: 140px 1fr; gap:12px; border-bottom:1px solid #eceae4; padding:10px 0; }
.outline-table dt{ color:#333; font-weight:700; }
.outline-cta{ display:flex; gap:10px; flex-wrap:wrap; }
/* ---- Reveal helper ---- */
.reveal{ transform: translateY(12px); opacity:0; transition: transform .6s ease, opacity .6s ease; }
.reveal.in{ transform:none; opacity:1; }
/* === ABOUT：代表メッセージを白文字に統一 === */
.page-about .message { color:#fff !important; }
.page-about .message .section-title,
.page-about .message .section-eyebrow,
.page-about .message .msg-quote,
.page-about .message .msg-quote p,
.page-about .message .msg-text,
.page-about .message .msg-sign {
color:#fff !important;
}
/* === slider arrows === */
.svc-slider .slider{ position:relative; }
.svc-slider .nav{
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:999px;
border:1px solid rgba(0,0,0,.12); background:#fff; color:#111;
display:grid; place-items:center; cursor:pointer; opacity:.92;
box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.svc-slider .nav:hover{ filter:brightness(0.98); }
.svc-slider .nav.prev{ left:8px; }
.svc-slider .nav.next{ right:8px; }
@media (max-width: 640px){
.svc-slider .nav{ width:36px; height:36px; }
}
/* === subpage: preloader off / ヒーロー常時可視 === */
body.subpage #preloader{ display:none !important; }
body.subpage{ overflow:auto !important; }
body.subpage .hero{ opacity:1 !important; transform:none !important; }
.section-about{
background: var(--cream); /* ←落ち着いたベージュ */
color: var(--ink); /* 本文は黒系 */
padding: 80px var(--gutter);
}
.section-about h2{
color: #fff; /* タイトルだけ白抜きにすると映える */
}
/* ===== ABOUT ヒーローの視認性Fix ===== */
.page-about .about-hero{
position: relative;
overflow: hidden;
isolation: isolate; /* 子の混色を閉じ込める */
background: var(--blue-deep); /* 濃色ベースに */
color: #fff; /* テキスト白 */
padding: 120px 0 96px;
}
/* 背景層：暗めのオーバーレイ＋ほんのりアクセント */
.page-about .about-hero__bg{
position: absolute; inset: 0;
z-index: 0;
background:
radial-gradient(80% 60% at 85% 80%, rgba(145,15,15,.18), transparent 60%),
rgba(0,0,0,.28); /* これが白文字の土台になる */
}
/* デコレイヤーはテキストより後ろに */
.page-about .about-hero__layers{
position: absolute; inset: 0;
z-index: 1; /* bg(0) < layers(1) < content(2) */
pointer-events: none;
opacity: .35; /* 目立ちすぎ防止 */
}
.page-about .about-hero__layers .a-layer{
position: absolute; inset: 0; margin: auto;
transform: none;
}
/* テキストは最前面に */
.page-about .about-hero__content{
position: relative; z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
text-align: left; /* 好みでcenterに */
}
/* タイトル/リードの読みやすさ強化 */
.page-about .about-title{
color:#fff;
text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.page-about .about-lead{
color:#fff;
text-shadow: 0 1px 6px rgba(0,0,0,.2);
}
/* ボタンのコントラスト（白地ボタンを残す場合） */
.page-about .btn-ghost-light{
color:#111; background:#fff; border: 1px solid rgba(255,255,255,.6);
}
.page-about .btn-pill{
background: #fff; color: var(--accent);
}
/* ===== Blue Copy Reveal ===== */
.blue-copy{
display:flex;
gap: clamp(12px, 2vw, 20px);
align-items:flex-start;
justify-content:center;
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: 'Zen Old Mincho', serif;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink, #1b1b1b);
}
.blue-copy .reveal{
position: relative;
display: inline-block;
line-height: 1.35;
font-size: clamp(28px, 5.4vw, 56px);
padding: 0.2em 0.05em;
overflow: hidden;
opacity: 0;
transform: translateY(6px);
animation: copyFadeIn .6s ease forwards;
will-change: transform, opacity;
}
.blue-copy .reveal::after{
content:"";
position:absolute;
inset:-6% -8%;
background:#0e0e10;
transform-origin: top center;
transform: scaleY(1) skewY(0deg);
animation: peel .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.blue-copy .reveal:nth-child(1){ animation-delay:.05s; }
.blue-copy .reveal:nth-child(1)::after{ animation-delay:.05s; }
.blue-copy .reveal:nth-child(2){ animation-delay:.25s; }
.blue-copy .reveal:nth-child(2)::after{ animation-delay:.25s; }
.blue-copy .reveal:nth-child(3){ animation-delay:.45s; }
.blue-copy .reveal:nth-child(3)::after{ animation-delay:.45s; }
@keyframes copyFadeIn{ to{ opacity:1; transform: translateY(0); } }
@keyframes peel{
0%{ transform: scaleY(1) skewY(0deg); }
35%{ transform: scaleY(1.02) skewY(2.2deg); }
100%{ transform: scaleY(0) skewY(6deg); }
}
@media (max-width:480px){
.blue-copy{ writing-mode: horizontal-tb; text-orientation: initial; gap:clamp(10px,3vw,16px); }
.blue-copy .reveal{ font-size:clamp(22px,7vw,32px); padding:.05em .1em; }
}
@media (prefers-reduced-motion: reduce){
.blue-copy .reveal, .blue-copy .reveal::after{ animation:none!important; }
.blue-copy .reveal{ opacity:1; transform:none; }
.blue-copy .reveal::after{ display:none; }
}
/* グリッドと余白 */
.section-strengths{
display:grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 48px;
align-items:start; /* 頭そろい */
padding-block: 88px 96px; /* 下余白足す */
}
/* 小見出し */
.section-strengths .eyebrow{
font-size: 14px;
letter-spacing: .08em;
color: var(--ink);
opacity: .7;
margin-bottom: 14px; /* 主見出しとの距離を一定に */
}
/* 主見出し（折返し最適化） */
.section-strengths .lead{
max-width: 28ch; /* 行長を制御 */
line-height: 1.7;
}
.section-strengths .lead em{ /* 強調色はブランドの赤に */
font-style: normal;
color: var(--accent);
}
.section-strengths .lead .quote{ /* 引用符は目立たせない */
color: inherit; opacity: .5;
}
/* CTAは左へ（主役側に寄せる） */
.section-strengths .cta{
margin-top: 20px;
}
@media (min-width: 900px){
.section-strengths .cta{ grid-column: 1; } /* 左カラム末尾 */
}
/* 右カラムの本文幅と行間 */
.section-strengths .body{
max-width: 36ch;
line-height: 1.9;
}
/* ウォーターマークの干渉を緩和 */
.section-strengths .wm{
opacity: .04; /* もう一段薄く */
transform: translateY(12px); /* ボタン背後を避ける */
}
/* ===== Strengths section patch (0826) ===== */
/* セクション余白 & レイアウト */
.strengths{
position: relative;
padding-block: clamp(56px, 8vw, 96px) clamp(72px, 9vw, 112px);
}
.strengths-inner{
display: grid;
grid-template-columns: minmax(0,1.25fr) minmax(0,0.85fr);
gap: clamp(24px, 4vw, 56px);
align-items: start; /* 左右の“頭そろい” */
}
.strengths-left,
.strengths-right{
align-self: start;
}
/* 小見出し（私たちの強み / Our Strength） */
.strengths .strengths-eyebrow{
margin: 0 0 12px;
font-size: 14px;
letter-spacing: .08em;
color: var(--ink);
opacity: .72;
}
.strengths .strengths-eyebrow span{
font-size: 12px;
margin-left: 8px;
opacity: .6;
}
/* 大見出し（行長・行間・配色） */
.strengths .strengths-title{
margin: 0;
line-height: 1.8;
text-wrap: balance; /* 折返しを整える（対応ブラウザ） */
max-width: 28ch; /* 禁則崩れ対策：行長を制御 */
}
@supports not (text-wrap: balance){
.strengths .strengths-title{ max-width: 30ch; }
}
/* 強調色はブランド赤に統一（緑→赤） */
.strengths .strengths-title .highlight{
color: var(--accent);
font-weight: 700;
}
/* 右カラム本文（読みやすさ） */
.strengths .strengths-lead{
margin: 0;
max-width: 36ch;
line-height: 1.9;
color: var(--ink);
opacity: .9;
}
/* CTA（右に残しつつ間隔を整える） */
.strengths .btn-wrap{ margin-top: 20px; }
.strengths .btn-outline{
background: var(--accent);
color: #fff;
border: 2px solid var(--accent);
}
.strengths .btn-outline:hover{
background: #fff;
color: var(--accent);
}
/* 万一ウォーターマーク要素がある場合の干渉緩和 */
.strengths .wm{
opacity: .04;
pointer-events: none;
}
/* 次セクションとの圧迫感を軽減 */
.business{ margin-top: clamp(40px, 6vw, 72px); }
/* レスポンシブ */
@media (max-width: 768px){
.strengths-inner{ grid-template-columns: 1fr; gap: 20px; }
.strengths .strengths-title,
.strengths .strengths-lead{ max-width: 100%; }
}
/* ===== Strengths: ヒーロー調レイアウト（0826） ===== */
/* セクション余白 */
.strengths{
padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 104px);
}
/* 2カラム→1カラム中央寄せに */
.strengths .strengths-inner{
display: grid;
grid-template-columns: 1fr; /* 1カラム */
row-gap: clamp(12px, 2.5vw, 18px);
justify-items: center; /* 中央寄せ */
text-align: center; /* テキスト中央 */
}
/* 上段（大きいコピー） */
.strengths .strengths-eyebrow{
margin: 0 0 10px;
font-size: 13px;
letter-spacing: .08em;
opacity: .7;
}
.strengths .strengths-left,
.strengths .strengths-right{ max-width: 46ch; } /* 横長にして2〜3行狙い */
.strengths .strengths-title{
margin: 0;
line-height: 1.6;
max-width: 46ch; /* 2〜3行に収まる幅 */
text-wrap: balance;
}
@supports not (text-wrap: balance){
.strengths .strengths-title{ max-width: 48ch; }
}
/* 強調色はブランド統一 */
.strengths .strengths-title .highlight{
color: var(--accent);
font-weight: 700;
}
/* 下段（小さめのリード文） */
.strengths .strengths-lead{
margin: clamp(8px, 1.5vw, 12px) auto 0;
max-width: 44ch; /* 上より少し短く */
line-height: 1.9;
font-size: clamp(14px, 1.5vw, 16px); /* 上より小さめ */
opacity: .92;
color: var(--ink);
}
/* CTAボタンは撤去 */
.strengths .btn-wrap{ display: none !important; }
/* 以降のセクションとの間隔（詰まっていたら） */
.business{ margin-top: clamp(36px, 5.5vw, 64px); }
/* モバイル調整（基本同じだが余白だけ軽く） */
@media (max-width: 560px){
.strengths{ padding-block: 48px 56px; }
.strengths .strengths-left,
.strengths .strengths-right{ max-width: 100%; padding-inline: 16px; }
}
/* ===== Strengths ヒーロー調行数調整 ===== */
/* 上段の大きなコピー（2〜3行に収める） */
.strengths .strengths-title{
margin: 0 auto;
max-width: 34ch; /* ←幅を広げて行数を減らす */
font-size: clamp(18px, 2.2vw, 24px);
line-height: 1.5; /* 行間も少し詰める */
font-weight: 500;
text-align: center;
text-wrap: balance;
}
@supports not (text-wrap: balance){
.strengths .strengths-title{ max-width: 36ch; }
}
/* 強調色はブランド赤 */
.strengths .strengths-title .highlight{
color: var(--accent);
font-weight: 700;
}
/* 下段のリード文（上より小さめ2〜3行） */
.strengths .strengths-lead{
margin: clamp(10px, 2vw, 14px) auto 0;
max-width: 40ch; /* タイトルよりちょい狭い */
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.7;
opacity: .9;
}
/* ==== グラフの高さを固定（強制） ==== */
.stat-card canvas { height: 200px !important; } /* 全グラフの既定高さ */
#ageChart { height: 220px !important; } /* 棒グラフは少しだけ高め */
@media (max-width: 560px){
.stat-card canvas { height: 180px !important; }
#ageChart { height: 200px !important; }
}
/* ▼ style.css の末尾に追加（または
//* 大八木について */
.header .global-nav ul {
display: flex !important; /* フレックスで均等配置されても */
justify-content: space-between !important; /* ←勝ってしまうので */
}
.header .global-nav li:nth-child(1) {
margin-left: 190px !important; /* ←強制で右に押す */
}
/* 事業内容（2番目） */
.header .global-nav li:nth-child(2) {
margin-left: 65px !important; /* 数値は調整、右へ動かす */
}
/* 採用情報（3番目） */
.header .global-nav li:nth-child(3) {
margin-left: 80px !important; /* 数値は調整可、右へ動かす */
}
/* お知らせ（4番目） */
.header .global-nav li:nth-child(4) {
margin-right: 10px !important; /* 負の値で左へ、数値は微調整 */
}
/* 採用情報ページ以外でヘッダー調整 */
body:not(.page-recruit) .header .global-nav li:nth-child(1) {
margin-left: 190px !important; /* 大八木について */
}
body:not(.page-recruit) .header .global-nav li:nth-child(2) {
margin-left: 65px !important; /* 事業内容 */
}
body:not(.page-recruit) .header .global-nav li:nth-child(3) {
margin-left: 80px !important; /* 採用情報 */
}
body:not(.page-recruit) .header .global-nav li:nth-child(4) {
margin-right: 10px !important; /* お知らせ */
}
/* ===== header quick fix（採用ページ以外） ===== */
/* 1) ヘッダー上の茶色い帯を消す */
body:not(.page-recruit) .brand-bar {
display: none !important;
}
/* 2) ヘッダーを白背景に固定＋影 */
body:not(.page-recruit) .header {
background: #fff !important;
box-shadow: 0 6px 18px rgba(0,0,0,.08); /* うっすら影だけ */
}
/* 3) ロゴ横のブランド名を黒で表示 */
body:not(.page-recruit) .hero-title {
color: #111 !important;
text-shadow: none !important;
opacity: 1 !important;
}
/* 4) グロナビの文字色も黒基準に */
body:not(.page-recruit) .global-nav a {
color: #111 !important;
}
body:not(.page-recruit) .global-nav a:hover,
body:not(.page-recruit) .global-nav a[aria-current="page"] {
color: var(--blue-deep) !important;
}
/* 5) お問い合わせボタンを紺で統一 */
body:not(.page-recruit) .header-cta-btn {
background: var(--blue-deep) !important;
box-shadow: none !important;
filter: none !important;
border-color: rgba(0,0,0,.10) !important;
}
/* 6) 右上の丸アイコンの縁を濃く（白背景用） */
body:not(.page-recruit) .hero-icons .icon-circle {
background: #fff !important;
color: var(--blue-deep) !important;
border: 1px solid rgba(0,0,0,.14) !important;
}
body:not(.page-recruit) .hero-icons .icon-circle:hover {
background: var(--blue-deep) !important;
color: #fff !important;
}
/* ====== ロゴ右の OYAGI文字サイズ調整（採用以外） ====== */
body:not(.page-recruit) .hero-title {
font-size: 20px !important; /* ナビ文字(16px想定)より少し小さめ */
line-height: 1.2 !important;
margin-left: 6px; /* ロゴとの間隔も微調整 */
}
/* =========================================================
共通ヘッダー（採用ページ以外）
========================================================= */
body:not(.page-recruit) .header {
background: #fff; /* ← 明示的に白背景 */
padding-inline: var(--gutter);
box-shadow: 0 6px 18px rgba(0,0,0,.08); /* うっすら影 */
}
/* ロゴ */
body:not(.page-recruit) .header .hero-logo {
height: 42px;
width: auto;
object-fit: contain;
display: block;
}
/* ロゴ右のテキスト（OYAGIなど） */
body:not(.page-recruit) .header .hero-title {
font-size: 20px;
line-height: 1;
margin: 0;
color: var(--ink);
}
/* グローバルナビ */
body:not(.page-recruit) .global-nav ul {
display: flex;
gap: var(--nav-gap);
list-style: none;
margin: 0;
padding: 0;
}
body:not(.page-recruit) .global-nav a {
display: block;
padding: 18px 0;
font-size: var(--nav-fz);
color: var(--ink);
text-decoration: none;
transition: color .2s;
}
body:not(.page-recruit) .global-nav a:hover,
body:not(.page-recruit) .global-nav a[aria-current="page"] {
color: var(--accent);
}
/* CTAボタン（右上の問い合わせボタン） */
body:not(.page-recruit) .header-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: var(--cta-h);
padding: 0 16px;
border-radius: 999px;
background: var(--blue-deep);
color: #fff;
text-decoration: none;
font-size: var(--cta-fz);
}
/* SNSアイコン */
body:not(.page-recruit) .hero-icons {
display: inline-flex;
gap: 10px;
margin-left: 10px;
}
body:not(.page-recruit) .hero-icons .icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-grid;
place-items: center;
border: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
background: #fff;
}
body:not(.page-recruit) .hero-icons .icon-circle:hover {
border-color: rgba(0,0,0,.28);
}
/* =========================================================
Footer v2 共通化（採用ページ以外）
貼る場所：style.css の最下部
========================================================= */
/* 旧フッターを無効化（v2 だけ残す） */
body:not(.page-recruit) .site-footer,
body:not(.page-recruit) .footer,
body:not(.page-recruit) .footer-main,
body:not(.page-recruit) .footer-cta,
body:not(.page-recruit) .footer-inner,
body:not(.page-recruit) .footer-bottom {
display: none !important;
content: none !important;
}
/* ===== Footer v2（共通デザイン） ===== */
body:not(.page-recruit) .footer-v2 {
background:#0d1a3a !important; /* 濃紺を明示 */
color:#e9eefc;
margin-top:72px;
position: relative;
isolation: isolate;
z-index: 0;
}
body:not(.page-recruit) .footer-v2,
body:not(.page-recruit) .footer-v2 *{
opacity:1 !important; /* 透過/フィルタの悪影響を排除 */
filter:none !important;
}
/* リンク */
body:not(.page-recruit) .footer-v2 a{
color:#e9eefc;
text-decoration:none;
}
body:not(.page-recruit) .footer-v2 a:hover{ opacity:.9; }
/* コンテナ */
body:not(.page-recruit) .footer-v2__container{
max-width: var(--container, 1100px);
margin:0 auto;
padding:0 var(--gutter, 40px);
}
/* 上段CTA */
body:not(.page-recruit) .footer-v2__cta{
background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.06));
padding:56px 0 40px;
border-bottom:1px solid rgba(255,255,255,.08);
}
body:not(.page-recruit) .footer-v2__cta-title{ font-size:28px; margin:0 0 8px; }
body:not(.page-recruit) .footer-v2__cta-lead { margin:0 0 18px; opacity:.9; }
body:not(.page-recruit) .footer-v2__cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }
body:not(.page-recruit) .fbtn{
display:inline-flex; align-items:center; gap:10px;
border-radius:12px; padding:14px 18px; font-weight:700;
}
body:not(.page-recruit) .fbtn--primary{ background:#223569; color:#fff; }
body:not(.page-recruit) .fbtn--ghost{ background:transparent; border:1px solid rgba(255,255,255,.25); }
body:not(.page-recruit) .fbtn i{ width:18px; text-align:center; }
/* 中段メイン */
body:not(.page-recruit) .footer-v2__main{ padding:36px 0; }
body:not(.page-recruit) .footer-v2__grid{
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:28px;
}
body:not(.page-recruit) .footer-v2__brand img{ height:40px; margin-bottom:12px; }
body:not(.page-recruit) .footer-v2__addr{ font-style:normal; opacity:.9; line-height:1.8; }
body:not(.page-recruit) .footer-v2__map a{ text-decoration:underline; }
body:not(.page-recruit) .footer-v2__sns{ display:flex; gap:10px; margin-top:10px; }
body:not(.page-recruit) .footer-v2__sns i{ width:18px; }
body:not(.page-recruit) .footer-v2__h{ font-weight:700; margin:6px 0 10px; color:#fff; }
body:not(.page-recruit) .footer-v2__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
body:not(.page-recruit) .footer-v2__list a{ opacity:.95; }
body:not(.page-recruit) .footer-v2__list a:hover{ opacity:1; text-decoration:underline; }
/* 下段 */
body:not(.page-recruit) .footer-v2__bottom{
border-top:1px solid rgba(255,255,255,.08);
padding:16px 0 26px;
}
body:not(.page-recruit) .footer-v2__bottom .footer-v2__container{
display:flex; justify-content:space-between; align-items:center;
}
body:not(.page-recruit) .footer-v2__totop{
display:inline-flex; width:36px; height:36px; border-radius:10px;
border:1px solid rgba(255,255,255,.25); align-items:center; justify-content:center;
}
/* SPレスポンシブ */
@media (max-width:720px){
body:not(.page-recruit) .footer-v2__grid{ grid-template-columns:1fr; gap:22px; }
body:not(.page-recruit) .footer-v2__cta{ padding:40px 0; }
}
/* ===== フッターロゴ調整 ===== */
.footer-v2__brand img {
height: 40px; /* 高さ基準だけ指定 */
width: auto !important; /* 幅は自動にして比率維持 */
object-fit: contain;
display: block;
margin: 12px 0; /* 上下に余白（上下12px） */
}
/* ===== フッター セクション2調整 ===== */
.footer-v2__main {
padding-:120px 0 40px; /* 上に余白を増やす（デフォ36px→60px） */
}
/* フッターロゴ */
.footer-v2__brand img {
height: 52px; /* ロゴを少し大きめ（40px→52px） */
width: auto !important;
object-fit: contain;
display: block;
margin-bottom: 16px; /* 下側に余白を確保 */
}
/* ===== OYAGIの想い + Our Thoughts 横並び調整 ===== */
.strengths .strengths-eyebrow {
display: flex;
align-items: baseline;
gap: 12px;
font-weight: 700;
font-size: 36px !important;
line-height: 1.2;
white-space: nowrap; /* ← 折り返し禁止 */
}
.strengths .strengths-eyebrow span {
font-size: 20px !important;
font-weight: 500;
color: var(--muted);
white-space: nowrap; /* ← 英語も折り返さない */
}
/* スマホは少し縮小 */
@media (max-width: 720px){
.strengths .strengths-eyebrow {
font-size: 28px !important;
gap: 8px;
}
.strengths .strengths-eyebrow span {
font-size: 16px !important;
}
}
/* ===== OYAGIの想い：上下2段のまま行幅だけ広げる ===== */
/* レイアウトは“縦積み”のままに戻す/固定 */
.strengths .strengths-inner{
display: block !important; /* ← 横並び化を無効化 */
max-width: var(--container, 1100px);
margin: 0 auto;
}
/* 見出しブロック（上段）と本文ブロック（下段）の箱を少しだけ広げる */
.strengths .strengths-left,
.strengths .strengths-right{
max-width: none; /* 以前の狭い制約を解除 */
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter, 20px);
padding-right: var(--gutter, 20px);
}
/* 上段：h2（強調テキスト含む）— 3〜4行目安の行幅に */
.strengths .strengths-title{
max-width: 58ch; /* ← 行の長さを適正化（調整目安 54–62ch） */
margin: 0 auto;
line-height: 1.8;
text-align: start; /* 両端揃えはしない（字間が伸びるのを防止） */
text-wrap: balance; /* 対応ブラウザで行バランス改善 */
word-break: keep-all;
overflow-wrap: anywhere;
}
/* 下段：リード文 — 同様に箱を広げる */
.strengths .strengths-lead{
max-width: 56ch; /* ← h2より少し狭めで読みやすく */
margin: 0 auto;
line-height: 1.9;
text-align: start;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* PCでは
の強制改行を抑制して行数を詰める（スマホは活かす） */
@media (min-width: 961px){
.strengths .strengths-lead br{ display: none; }
}
/* 強調語が箱を割らないように（“また来たい”など） */
.strengths .strengths-title .highlight{ white-space: nowrap; }
/* スマホは全幅にして読みやすさ優先 */
@media (max-width: 960px){
.strengths .strengths-title{ max-width: 100%; }
.strengths .strengths-lead{ max-width: 100%; }
}
/* ===== OYAGIの想い 本文サイズ調整（強制版） ===== */
/* 上段：h2（strengths-title） */
.strengths .strengths-title {
max-width: 58ch !important; /* ← 横幅を広げて3〜4行に収める */
margin: 0 auto !important; /* ← 左寄せを解除して中央に */
line-height: 1.8 !important;
text-align: start !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
text-wrap: balance;
}
/* 下段：p（strengths-lead） */
.strengths .strengths-lead {
max-width: 60ch !important; /* ← 上段と同じくらい横幅を広げる */
margin: 24px auto 0 !important; /* ← 中央寄せ＋上に余白 */
line-height: 1.9 !important;
text-align: start !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
/* PCでは
を消して行間を詰める */
@media (min-width: 961px) {
.strengths .strengths-lead br {
display: none !important;
}
}
/* スマホは幅いっぱい */
@media (max-width: 960px) {
.strengths .strengths-title,
.strengths .strengths-lead {
max-width: 100% !important;
}
}
/* NG例：疑似要素を全面オフ（ウォーターマークも消える） */
// .strengths::before, .strengths::after,
// .business::before, .business::after,
// .strengths .strengths-inner::before, .strengths .strengths-inner::after,
// .business .business-inner::before, .business .business-inner::after{
// content: none !important;
// }
/* businessセクション：縦積みに変更 */
body.page-index .business .business-inner {
display: block !important;
max-width: var(--container, 1100px);
margin: 0 auto;
padding-left: var(--gutter, 40px);
padding-right: var(--gutter, 40px);
}
/* 不要になる右カラムを無効化 */
body.page-index .business .business-right {
display: none !important;
}
/* business セクション：中央揃え配置 */
body.page-index .business .business-left {
text-align: center !important; /* 中央寄せ配置 */
max-width: 720px; /* 横幅を少し絞ると読みやすい */
margin: 0 auto; /* 中央配置 */
padding-top: 40px; /* 上に余白を追加（数字は調整可） */
}
/* リード文 */
body.page-index .business .business-lead {
margin: 24px auto 40px !important; /* 下に余白を広めに */
line-height: 1.9;
}
/* ボタン */
body.page-index .business .btn-wrap {
margin-top: 20px !important; /* ボタンをさらに下げる */
text-align: center !important; /* ボタン中央寄せ */
}
/* business セクション：全体をさらに下げる */
body.page-index .business .business-left {
text-align: center !important; /* センター配置 */
max-width: 720px;
margin: 0 auto;
padding-top: 80px; /* ←さらに下げる（40→80に変更） */
}
/* リード文 */
body.page-index .business .business-lead {
margin: 32px auto 60px !important; /* 下余白をさらに広げる */
line-height: 1.9;
}
/* ボタン位置調整 */
body.page-index .business .btn-wrap {
margin-top: 40px !important; /* ボタンを本文からさらに下げる */
text-align: center !important;
}
/* ボタンデザイン（白背景で埋もれないように強調） */
body.page-index .business .btn-outline {
background: var(--blue-deep) !important; /* 濃紺ベース */
color: #fff !important; /* 白文字 */
border: 2px solid var(--blue-deep) !important;
padding: 12px 28px;
font-weight: 500;
transition: 0.3s;
}
body.page-index .business .btn-outline:hover {
background: #fff !important;
color: var(--blue-deep) !important;
}
/* リード文：さらに下げる */
body.page-index .business .business-lead {
margin: 100px auto 40px !important; /* ←下余白を100pxに拡大 */
line-height: 1.9;
}
/* ===== OYAGIの想い：見出しの下にライン ===== */
.strengths .strengths-eyebrow {
display: flex;
justify-content: center;
align-items: baseline;
gap: 12px;
position: relative;
padding-bottom: 20px; /* ラインとの余白 */
margin-bottom: 32px; /* 本文との余白 */
}
.strengths .strengths-eyebrow::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 8em; /* 見出しサイズぐらいの幅 */
height: 2px;
background: var(--blue-deep);
}
/* ===== 事業紹介：小見出しの下にライン ===== */
.business .business-title {
position: relative;
display: inline-block; /* ラインを見出し幅に合わせる用 */
padding-bottom: 20px;
margin-bottom: 32px;
}
.business .business-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 8em; /* 小見出し幅と同程度 */
height: 2px;
background: var(--blue-deep);
}
/* 青箱の中身を少し上に浮かせる */
.deep-blue-box .blue-inner {
display: flex; /* 既に flex ならそのままでもOK */
align-items: flex-start; /* 下に寄らず上寄せにする */
padding-bottom: 40px; /* 下に空きを足す（数値は調整可） */
position: relative;
top: -20px; /* 中身全体を少し持ち上げる（任意） */
}
/* === deep-blue-box: 中身（2カラム）を安定して“浮かせる”ための決め打ち === */
/* 親に上下の呼吸を持たせて、張り付き防止。高さ固定はしない */
body.page-index .deep-blue-box{
padding-block: 48px 64px !important; /* 上48 / 下64 くらいが程よい */
overflow: visible !important;
}
/* 子（blue-inner）の“位置指定”や“下寄せ”を無効化して、縦方向は上寄せ */
body.page-index .deep-blue-box > .blue-inner{
position: static !important; /* absolute/relativeの影響を断つ */
inset: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 auto !important;
/* 2カラムが下に寄らないように上揃え */
display: grid !important;
grid-template-columns: 1fr 1fr;
align-items: start !important; /* ←ここが効くと“浮いた”見え方になる */
gap: min(6vw, 40px) !important;
padding: 0 !important; /* 子側のパディングはゼロに戻す */
}
/* カラム内で勝手に外側マージンが入っていた時の保険 */
body.page-index .deep-blue-box .blue-copy,
body.page-index .deep-blue-box .blue-image{
margin: 0 !important;
}
/* 画像が外にはみ出す／潰れる防止の保険（任意） */
body.page-index .deep-blue-box .blue-image img{
display: block;
width: 100%;
height: auto;
}
/* 採用情報セクションのボタン調整 */
.recruit-hero .btn-ghost-light {
display: inline-flex !important; /* 横幅は中身に合わせる */
align-items: center;
justify-content: center;
padding: 10px 20px; /* 適度な内側余白 */
font-size: 14px;
width: auto !important; /* 100%幅を無効化 */
max-width: none !important; /* 念のためリミット解除 */
}
/* 採用情報セクションのボタン幅をテキストサイズに合わせる */
section.recruit-hero .recruit-hero__content .btn-ghost-light {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 10px 24px !important; /* 内側余白を調整 */
font-size: 14px;
width: auto !important; /* ← ここで幅を中身に合わせる */
max-width: none !important;
min-width: 0 !important; /* 変に広がる指定をリセット */
box-sizing: border-box;
}
/* 採用情報セクションのボタンを “中身サイズ” にする */
section.recruit-hero .recruit-hero__content .btn-ghost-light{
justify-self: start !important; /* ← Grid の横方向ストレッチを無効化 */
width: max-content !important; /* 中身の幅に合わせる（保険） */
min-width: 0 !important;
padding: 10px 20px !important; /* 好みで微調整 */
height: 44px; /* 既定の高さは活かす */
}
/* 採用情報セクションの背景画像位置調整 */
.recruit-hero__img {
object-fit: cover;
object-position: center center; /* 中央を基準に表示 */
}
/* 青箱の中カラムに下余白を追加 */
body.page-index .deep-blue-box .blue-inner {
padding-bottom: 60px !important; /* 数値は40〜80pxで調整 */
}
body.page-index .deep-blue-box {
padding-bottom: 60px !important;
}
/* サービスセクションの下に余白を追加（背景は青のまま） */
.services {
padding-bottom: 80px !important; /* 数値は調整OK：60〜120pxぐらい */
background-color: #212f5b; /* 青背景を維持 */
}
/* 採用情報：背景写真の見せる位置を下に寄せる（幹が入るように） */
.recruit-hero__img{
object-fit: cover;
object-position: center 70%; /* ← 数値を 60%〜85% で微調整してOK */
}
/* モバイルは縦が浅くなるので、さらに下寄せに */
@media (max-width: 960px){
.recruit-hero__img{
object-position: center 80%;
}
}
/* === ヒーロー(top1)を白〜シルバー系グラデ背景に差し替え === */
.image-box{
position: relative;
height: clamp(320px, 48vh, 560px);
overflow: hidden;
background:
radial-gradient(120% 90% at 70% 20%, rgba(220,220,220,.4) 0%, rgba(240,240,240,.2) 40%, rgba(255,255,255,0) 70%),
linear-gradient(180deg, #f8f8f8 0%, #eeeeee 60%, #e5e5e5 100%);
}
/* 旧画像は非表示 */
.image-box .fit-image{ display:none !important; }
/* ヘッダーとの境界に影を付与 */
.image-box::before{
content:"";
position:absolute;
top:0; left:0; right:0; height:16px;
background:linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,0));
z-index:1;
pointer-events:none;
}
/* 全体にシルバーっぽい質感を追加（任意） */
.image-box::after{
content:"";
position:absolute; inset:0;
background:
linear-gradient(0deg, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%);
pointer-events:none;
}
/* モバイル用に高さ調整 */
@media (max-width: 960px){
.image-box{ height: clamp(220px, 34vh, 380px); }
}
/* === top1画像を完全に隠す === */
.image-box img.fit-image {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* === ヒーロー(top1)を白〜シルバー系グラデ背景に === */
.image-box{
position: relative;
height: clamp(320px, 48vh, 560px);
overflow: hidden;
background:
radial-gradient(120% 90% at 70% 20%, rgba(220,220,220,.4) 0%, rgba(240,240,240,.2) 40%, rgba(255,255,255,0) 70%),
linear-gradient(180deg, #f8f8f8 0%, #eeeeee 60%, #e5e5e5 100%) !important;
}
/* ヘッダーとの境界に影 */
.image-box::before{
content:"";
position:absolute;
top:0; left:0; right:0; height:16px;
background:linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,0));
z-index:1;
}
/* 光沢感 */
.image-box::after{
content:"";
position:absolute; inset:0;
background:
linear-gradient(0deg, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%);
pointer-events:none;
}
/* ヒーローのコピーを主役化（縦組み／白／影） */
.deep-blue-box .blue-inner{ position: relative !important; }
.deep-blue-box .blue-copy{
position: absolute !important;
left: clamp(24px, 6vw, 100px);
bottom: clamp(24px, 5vw, 80px);
z-index: 3;
display: flex; /* 縦カラムを横に並べる */
gap: clamp(12px, 2.2vw, 28px);
writing-mode: vertical-rl; /* 縦書き */
text-orientation: upright;
pointer-events: none; /* 画像操作の邪魔をしない */
}
.deep-blue-box .blue-copy p{
margin: 0;
padding-left: clamp(10px, 1.6vw, 18px); /* 区切り線の内側余白 */
border-left: 1px solid rgba(255,255,255,.18); /* カラム間の細線 */
font-family: 'Zen Old Mincho', serif;
font-weight: 700;
letter-spacing: .12em;
font-size: clamp(22px, 4.8vw, 64px);
line-height: 1.05;
color: #fff; /* しっかり白 */
-webkit-text-stroke: .4px rgba(12,18,42,.35); /* ふちを極薄で締める(対応環境) */
text-shadow:
0 10px 26px rgba(0,0,30,.35),
0 2px 6px rgba(0,0,0,.25); /* 可読性UPの柔らかい影 */
}
.deep-blue-box .blue-copy p:first-child{
border-left: none; padding-left: 0; /* 先頭は線なし */
}
/* モバイル：少し控えめに */
@media (max-width: 960px){
.deep-blue-box .blue-copy{
left: clamp(18px, 6vw, 40px);
bottom: clamp(18px, 6vw, 40px);
gap: 14px;
}
.deep-blue-box .blue-copy p{
font-size: clamp(20px, 6.2vw, 44px);
letter-spacing: .1em;
}
}
.blue-image {
background-color: #212f5b; /* 青背景 */
}
/* ==== ABOUT hero: 最終オーバーライド（青地に統一） ==== */
.page-about .about-hero,
.page-about .about-hero__bg{
background: var(--blue-deep) !important;
}
/* もし擬似要素で被せてたら念のため無効化 */
.page-about .about-hero::after{
background: none !important;
}
/* タイトル・リードの可読性を白寄りに */
.page-about .about-hero .about-eyebrow,
.page-about .about-hero .about-title,
.page-about .about-hero .about-lead{
color: #fff !important;
text-shadow: 0 2px 12px rgba(0,0,0,.25) !important; /* 薄く締める */
}
/* ヒーロー内のボタン：明るめに（必要なら） */
.page-about .about-hero .btn-ghost-light{
background: #fff !important; color:#111 !important;
}
.page-about .about-hero .btn-pill{
border-color: rgba(255,255,255,.75) !important;
color:#fff !important;
}
/* 以前の “background:#fff !important;” を打ち消すため優先度を上げる */
/* ABOUTヒーローのボタン統一調整 */
.page-about .about-hero .about-hero__actions a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px; /* 高さ統一 */
padding: 0 20px; /* 横幅余白 */
font-size: 15px; /* テキストサイズ揃え */
font-weight: 600;
border-radius: 999px;
text-decoration: none;
transition: all .25s ease;
margin-right: 12px;
}
/* 理念へ（白ベース） */
.page-about .about-hero .btn-ghost-light {
background: #fff;
color: var(--blue-deep);
border: 2px solid #fff;
}
.page-about .about-hero .btn-ghost-light:hover {
background: rgba(255,255,255,.85);
}
/* 会社概要（青ベースに変更） */
.page-about .about-hero .btn-pill {
background: var(--blue-deep);
color: #fff;
border: 2px solid var(--blue-deep);
}
.page-about .about-hero .btn-pill:hover {
background: #fff;
color: var(--blue-deep);
}
/* KPI: レイアウト微調整 */
.kpi-inner{
display:grid;
grid-template-columns: repeat(3,1fr);
gap:24px;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.kpi{
text-align:center;
}
.kpi-num{
font-size: clamp(36px, 6vw, 64px);
font-weight: 800;
line-height: 1;
color: var(--blue-deep);
}
.kpi-label{
margin-top: 6px;
opacity:.9;
}
/* 真ん中の受賞カード（数値なし） */
.kpi-award{
display:grid;
place-items:center;
padding:24px 16px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.18);
color:#fff;
}
.page-about .kpis{ background:#0f1e46; color:#e8edf7; } /* セクション地：濃紺 */
.page-about .kpis .kpi:not(.kpi-award) .kpi-label{ color:#cfd6ea; } /* ラベル色 */
.kpi-award .kpi-icon{
font-size: 32px;
color: #ffd54d; /* トロフィー金色 */
margin-bottom: 8px;
}
.kpi-award .kpi-award-text{
margin:0;
text-align:center;
line-height:1.45;
}
.kpi-award .kpi-award-text strong{
font-weight: 800;
letter-spacing:.02em;
}
/* モバイル1カラム */
@media (max-width: 900px){
.kpi-inner{ grid-template-columns: 1fr; }
}
/* KPIラベルの文字色調整（数値系だけ黒に） */
.kpi:not(.kpi-award) .kpi-label {
color: #111 !important; /* 黒寄りで視認性UP */
font-weight: 500; /* 少し太字で読みやすく */
}
#philosophy, #message, #history, #outline {
scroll-margin-top: 100px; /* 好みで 80〜120px 調整 */
}
/* ===== Timeline (History) ===== */
.timeline {
position: relative;
margin: 40px 0;
padding-left: 24px;
border-left: 2px solid rgba(0,0,0,.1);
}
.timeline-item {
position: relative;
margin-bottom: 36px;
}
.timeline-date {
font-weight: 700;
font-size: 14px;
color: var(--blue-deep);
margin-bottom: 6px;
position: relative;
}
.timeline-item::before {
content: "";
position: absolute;
left: -31px; /* border-left の位置に丸を置く */
top: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--blue-deep);
border: 3px solid #fff;
box-shadow: 0 0 0 2px rgba(33,47,91,.15);
}
.timeline-content {
font-size: 15px;
line-height: 1.8;
color: #333;
background: #fafafa;
padding: 14px 18px;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,.05);
}
/* 特別強調（設立・受賞など） */
.timeline-content.highlight {
background: #fff3f3;
border: 1px solid #f5c2c2;
color: #a00;
font-weight: 600;
}
.timeline-content i {
margin-right: 6px;
color: var(--accent); /* 赤でアイコン強調 */
}
/* スマホ対応 */
@media (max-width: 768px) {
.timeline {
padding-left: 16px;
}
.timeline-item::before {
left: -24px;
}
}
/* ===== Vertical Timeline (読みやすさ最優先) ===== */
.v-timeline{
position: relative;
margin: 28px 0 0;
padding-left: 26px; /* 左のライン分 */
}
.v-timeline::before{
content:"";
position:absolute; left:10px; top:0; bottom:0;
width:2px; background:rgba(0,0,0,.12);
}
.vt-item{
position: relative;
margin: 0 0 22px;
}
.vt-item::before{
content:"";
position:absolute; left:2px; top:8px;
width:14px; height:14px; border-radius:50%;
background: var(--blue-deep);
border: 3px solid #fff;
box-shadow: 0 0 0 2px rgba(33,47,91,.15);
}
.vt-date{
font-weight: 700;
font-size: 13px;
letter-spacing:.04em;
color: var(--blue-deep);
margin: 0 0 6px 0;
}
.vt-card{
background:#fff;
color:#222;
line-height:1.8;
font-size: 15px;
padding:14px 16px;
border-radius:10px;
border:1px solid #e6e8eb;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.vt-hi .vt-card{
background:#fff7f7;
border-color:#f1c6c6;
color:#9a1e1e;
font-weight: 600;
}
.vt-card i{ margin-right:8px; color: var(--accent); }
/* モバイル微調整 */
@media (max-width: 720px){
.vt-card{ font-size:14px; padding:12px 14px; }
.vt-date{ font-size:12px; }
}
/* ===== HISTORY: 見出し色・タイムライン位置補正・日付可読性 ===== */
/* 見出し（HISTORY / 沿革）を暗色背景で見える色に */
.page-about .history .section-head .section-eyebrow{ color:#bfc8e8 !important; }
.page-about .history .section-head .section-title{ color:#e8edf7 !important; }
/* タイムライン：ラインと丸の芯ズレを変数で完全一致させる */
.page-about .history .v-timeline{
--vt-line: 22px; /* ラインのX位置 */
--vt-dot: 14px; /* ドット直径 */
padding-left: calc(var(--vt-line) + 20px) !important;
position: relative;
}
.page-about .history .v-timeline::before{
left: var(--vt-line) !important;
}
.page-about .history .vt-item::before{
width: var(--vt-dot) !important;
height: var(--vt-dot) !important;
left: calc(var(--vt-line) - var(--vt-dot) / 2) !important; /* 芯をラインに合わせる */
top: 10px !important; /* ドットの縦位置（カードに対して） */
background: #3c56a6 !important; /* 少し明るい青 */
border: 3px solid #0f0f0f !important; /* 背景が黒なので縁取りも黒に */
box-shadow: 0 0 0 2px rgba(60,86,166,.25) !important;
}
/* 日付：サイズUP＋色コントラストUP */
.page-about .history .vt-date{
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
color: #cbd6ff !important; /* 暗色背景でも見える淡い青 */
margin: 0 0 6px !important;
}
/* 本文カードは白＋濃い文字でコントラスト確保 */
.page-about .history .vt-card{
background:#fff !important;
color:#222 !important;
border:1px solid #e6e8eb !important;
}
/* ハイライト項目（設立・受賞）は淡い赤カードのまま、文字は濃い赤で */
.page-about .history .vt-hi .vt-card{
background:#fff7f7 !important;
border-color:#f1c6c6 !important;
color:#8e1b1b !important;
}
.page-about .history .vt-card i{ color:#d64747 !important; }
/* タイムラインの丸マーカー位置調整 */
.vt-item::before {
width: 14px;
height: 14px;
left: -30px; /* ← ラインの中心にぴったり合わせる値に調整 */
top: 4px; /* ← カードのテキスト行頭に揃うように */
border-radius: 50%;
background: var(--blue-deep);
border: 3px solid #fff;
box-shadow: 0 0 0 2px rgba(33,47,91,.15);
}
/* 旧タイムラインの丸/線を無効化（残っていても見えなくする） */
.vt-item::before,
.vt-item::after {
content: none !important;
}
/* タイムライン全体：必要なら縦のガイドラインを薄く出す（任意） */
.vt {
position: relative;
}
.vt::before{
content:"";
position:absolute;
left: 28px; /* ← ガイドラインの位置（丸の芯と合わせる） */
top:0; bottom:0;
width:2px;
background: rgba(33,47,91,.20); /* 薄い紺。不要なら丸ごと削除 */
}
/* 各カード（イベント箱）に丸を“内蔵”する */
.vt-card{
position: relative;
padding-left: 56px; /* ← 丸＋余白ぶんの左インデント */
}
/* 丸マーカー：カードの左・中央に固定 */
.vt-card::before{
content:"";
position:absolute;
left: 28px; /* ← vt::before の位置と必ず同じ値に */
top: 50%;
transform: translate(-50%, -50%); /* 芯を合わせる */
width: 14px; height: 14px;
border-radius: 50%;
background: var(--blue-deep);
border: 3px solid #fff;
box-shadow: 0 0 0 2px rgba(33,47,91,.15);
z-index: 1;
}
/* （任意）日付チップをカードの左上に寄せるタイプなら */
.vt-date{
position: absolute;
left: 56px; /* ← カード内のテキストと揃う */
top: -14px;
font-weight: 700;
color: #223; /* 視認性の高い色に */
opacity: .85;
}
/* ===== タイムラインの日付配置調整 ===== */
.vt-date {
position: relative; /* ← 絶対配置やめて、通常のフローに戻す */
margin-left: 56px; /* ← カードと同じ余白を確保して左揃え */
margin-bottom: 4px; /* ← カードとの隙間 */
font-weight: 700;
font-size: 15px;
letter-spacing: .02em;
color: #cbd6ff; /* 暗背景でも読みやすい淡青 */
}
/* 日付からカードへつなぐ補助ライン */
.vt-date::after {
content: "";
position: absolute;
right: -14px; /* ← 日付とカードの間に伸ばす */
top: 50%;
transform: translateY(-50%);
width: 14px; /* ← 線の長さ（12〜20pxで調整可） */
height: 2px;
background: rgba(52,76,124,.4); /* 紺色の半透明でさりげなく */
border-radius: 2px;
}
/* 日付からカードに伸びる補助ライン（縦） */
.vt-date::after {
content: "";
position: absolute;
left: 50%; /* 日付の中央から伸ばす */
top: 100%; /* 日付の下端から */
transform: translateX(-50%);
width: 2px;
height: 16px; /* ← 線の長さ。カードまで届かない程度に短め */
background: rgba(52,76,124,.4); /* 紺色半透明でさりげなく */
border-radius: 2px;
}
/* 会社概要セクション：「会社情報を詳しく」ボタン削除 */
.outline-cta a[href="company.html"] {
display: none !important;
}
/* フッターメニューセクション：お問い合わせ（上カラム）の文字色を白に */
.footer-v2__cta-title,
.footer-v2__cta-lead {
color: #fff !important;
}
/* ページ内リンクのスクロール補正 */
#philosophy,
#outline {
scroll-margin-top: 120px; /* ヘッダー高さ分を調整 */
}
/* === Plans：停止中スタイル === */
.price-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.price-card {
position: relative;
border-radius: 16px;
background: #f7f7f7;
padding: 20px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.price-card .price-title { font-weight: 700; margin: 4px 0 6px; }
.price-card .price-lead { color: var(--muted, #8c939c); margin: 0 0 12px; }
.price-card .price-value {
font-size: 28px; font-weight: 800; margin-bottom: 14px;
}
.price-card .price-value span { font-size: 14px; font-weight: 600; margin-left: 4px; }
.price-feats { list-style: none; padding-left: 0; margin: 0 0 16px; }
.price-feats li { margin: 6px 0; }
.price-ctas { display: flex; gap: 10px; }
/* ボタン共通 */
.btn-pill {
display: inline-block;
padding: 10px 22px;
border-radius: 9999px;
font-weight: 700;
text-align: center;
}
/* 停止中（グレー化） */
.price-card.is-paused {
background: #f1f3f5;
filter: grayscale(0.25);
}
.price-card.is-paused .price-title,
.price-card.is-paused .price-lead,
.price-card.is-paused .price-value,
.price-card.is-paused .price-feats li {
color: #6b7280; /* グレー文字 */
}
/* リボン（斜めの帯） */
.price-ribbon{
position: absolute;
top: 18px;
left: -10px;
padding: 6px 56px;
background: #9aa3ad;
color: #fff;
font-weight: 800;
border-radius: 8px;
transform: rotate(-12deg);
box-shadow: 0 6px 12px rgba(0,0,0,.12);
pointer-events: none;
}
/* 無効ボタン */
.btn-pill.is-disabled{
background: #d1d5db;
color: #6b7280;
pointer-events: none;
cursor: not-allowed;
box-shadow: none;
border: none;
}
/* KPI: レイアウト微調整 */
.kpi-inner{
display:grid;
grid-template-columns: repeat(3,1fr);
gap:24px;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.kpi{
text-align:center;
}
.kpi-num{
font-size: clamp(36px, 6vw, 64px);
font-weight: 800;
line-height: 1;
color: var(--blue-deep);
}
.kpi-label{
margin-top: 6px;
opacity:.9;
}
/* 真ん中の受賞カード（数値なし） */
.kpi-award{
display:grid;
place-items:center;
padding:24px 16px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.18);
color:#fff;
}
.kpi-award .kpi-icon{
font-size: 32px;
color: #ffd54d; /* トロフィー金色 */
margin-bottom: 8px;
}
.kpi-award .kpi-award-text{
margin:0;
text-align:center;
line-height:1.45;
}
.kpi-award .kpi-award-text strong{
font-weight: 800;
letter-spacing:.02em;
}
/* モバイル1カラム */
@media (max-width: 900px){
.kpi-inner{ grid-template-columns: 1fr; }
}
/* KPIラベルの文字色調整（数値系だけ黒に） */
.kpi:not(.kpi-award) .kpi-label {
color: #111 !important;
font-weight: 500;
}
.page-services .kpis{
background:#0f1e46;
color:#e8edf7;
}
.page-services .kpis .kpi:not(.kpi-award) .kpi-label{
color:#cfd6ea;
}
/* ===== Duties (works list) ===== */
.svc-duties { padding: 80px 0; background: #fff; }
.svc-duties .duties-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.duties-head { text-align: left; margin-bottom: 28px; }
.duties-lead { color: var(--muted); margin-top: 6px; }
.duty-list{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 14px 22px;
list-style: none;
padding: 0; margin: 22px 0 10px;
}
.duty-item{
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: color-mix(in srgb, var(--blue-deep) 6%, #fff);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
will-change: transform;
}
.duty-item i{
width: 36px; height: 36px; display: grid; place-items: center;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 0 rgba(0,0,0,.06);
font-size: 16px; color: var(--blue-deep);
}
.duty-item:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
border-color: rgba(0,0,0,.08);
}
.duty-item .muted{ color: var(--muted); font-size: .92em; margin-left: .25em; }
/* リンク（右矢印付き） */
.duties-link{ margin-top: 18px; }
.link-arrow{
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none; border-bottom: 1px solid currentColor;
}
.link-arrow:hover{ opacity: .8; }
/* Responsive */
@media (max-width: 900px){
.duty-list{ grid-template-columns: 1fr; }
}
/* ===== Duties (works list) ===== */
.svc-duties {
background: #fff;
color: var(--ink);
padding: 80px 0;
}
.duties-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.duties-head {
margin-bottom: 22px;
}
.duties-lead {
color: var(--muted);
margin-top: 6px;
font-size: 15px;
}
/* 業務リスト */
.duty-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 20px;
list-style: none;
padding: 0;
margin: 18px 0 24px;
}
.duty-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 14px;
background: #fff;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.duty-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.duty-item i {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, var(--blue-deep) 14%, #fff);
color: var(--blue-deep);
font-size: 16px;
}
.duty-item .muted {
color: var(--muted);
font-size: .92em;
margin-left: .25em;
}
/* リンク */
.duties-link {
margin-top: 10px;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
border-bottom: 1px solid currentColor;
font-weight: 600;
color: var(--blue-deep);
}
.link-arrow:hover {
opacity: .8;
}
/* Responsive */
@media (max-width: 900px) {
.duty-list {
grid-template-columns: 1fr;
}
}
.duties-head h2 {
color: #111; /* 黒に固定 */
}
/* 見出しを黒に固定 */
.duties-head h2,
.pricing-head h2 {
color: #111;
}
/* FAQ: 白ベース＆見出し黒 */
.faq{ background:#fff; color:#111; padding:80px 0 100px; }
.faq-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.faq-head .business-title{ color:#111; } /* 見出しを黒に */
.faq-items{ display:grid; gap:10px; }
.faq-item{ background:#f8f9fb; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:14px 18px; }
.faq-item > summary{ cursor:pointer; font-weight:700; list-style:none; }
.faq {
background: #0f0f0f; /* 黒ベース */
color: #f7f3ea; /* テキストは薄いベージュ系 */
padding: 80px 0 100px;
}
.faq-head .business-title { color: #fff; } /* 見出しを白 */
.faq-item { background: #111; border:1px solid rgba(255,255,255,.12); }
/* =========================
Footer v2
========================= */
.footer-v2 {
background: var(--blue-deep);
color: #fff;
font-size: 14px;
line-height: 1.8;
}
/* コンテナ共通 */
.footer-v2__container {
max-width: var(--container, 1100px);
margin: 0 auto;
padding: 0 var(--gutter, 40px);
}
/* ===== 上段 CTA ===== */
.footer-v2__cta {
text-align: center;
padding: 60px 20px 40px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-v2__cta-title {
font-size: clamp(20px, 4vw, 28px);
margin: 0 0 12px;
}
.footer-v2__cta-lead {
font-size: 15px;
color: rgba(255,255,255,.85);
margin: 0 0 24px;
}
.footer-v2__cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.fbtn {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
padding: 10px 22px;
text-decoration: none;
transition: all .25s ease;
}
.fbtn--primary {
background: var(--accent);
color: #fff;
}
.fbtn--primary:hover {
background: #fff;
color: var(--accent);
}
.fbtn--ghost {
background: transparent;
border: 1px solid rgba(255,255,255,.5);
color: #fff;
}
.fbtn--ghost:hover {
background: rgba(255,255,255,.08);
border-color: #fff;
}
/* ===== 中段：ブランド情報 & ナビ ===== */
.footer-v2__main {
padding: 60px 0;
}
.footer-v2__grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-v2__brand img {
max-width: 160px;
height: auto;
margin-bottom: 16px;
}
.footer-v2__addr {
font-style: normal;
font-size: 13px;
color: rgba(255,255,255,.85);
margin-bottom: 8px;
}
.footer-v2__map a {
font-size: 13px;
color: #fff;
text-decoration: underline;
}
.footer-v2__sns {
margin-top: 16px;
display: flex;
gap: 12px;
}
.footer-v2__sns a {
color: #fff;
font-size: 16px;
transition: opacity .25s ease;
}
.footer-v2__sns a:hover { opacity: .7; }
/* ===== ナビカラム ===== */
.footer-v2__h {
font-size: 15px;
font-weight: 700;
margin: 0 0 12px;
}
.footer-v2__list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-v2__list li { margin-bottom: 6px; }
.footer-v2__list a {
color: rgba(255,255,255,.85);
text-decoration: none;
transition: color .25s ease;
}
.footer-v2__list a:hover {
color: #fff;
}
/* ===== 下段 ===== */
.footer-v2__bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding: 20px 0;
}
.footer-v2__bottom small {
font-size: 12px;
color: rgba(255,255,255,.7);
}
.footer-v2__totop {
float: right;
color: #fff;
font-size: 14px;
transition: opacity .25s ease;
}
.footer-v2__totop:hover { opacity: .7; }
/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
.footer-v2__grid {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.footer-v2__sns {
justify-content: center;
}
.footer-v2__totop {
float: none;
display: block;
text-align: center;
margin-top: 12px;
}
}
/* ===== contact専用：ヘッダーが出ない＆ロゴ巨大化の応急パッチ ===== */
/* 1) ヘッダーを最前面に出して、確実に表示 */
.page-contact .header{
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(6px);
box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
/* 2) 2パターン両対応：.header 直下 or .header-inner でグリッド化 */
.page-contact .header,
.page-contact .header-inner{
display: grid !important;
grid-template-columns: auto 1fr auto auto; /* ロゴ｜ナビ｜CTA｜SNS */
align-items: center;
column-gap: 24px;
padding: 12px 28px;
}
/* 3) ロゴの巨大化を抑止（グローバルimg指定に勝つ） */
.page-contact .header img{
height: 44px !important;
width: auto !important;
max-width: none !important;
display: block;
}
/* よくある構造名も個別に押さえる */
.page-contact .header .logo img,
.page-contact .header .brand-link img,
.page-contact .header img.hero-logo{
height: 44px !important;
width: auto !important;
}
/* 4) ナビ位置＆リンク色 */
.page-contact .global-nav{ justify-self: center; }
.page-contact .global-nav ul{
display: grid;
grid-template-columns: repeat(5, minmax(0,1fr));
gap: 0;
margin: 0; padding: 0; list-style: none;
}
.page-contact .global-nav a{
display: inline-block;
padding: 8px 10px;
font-weight: 500;
color: var(--ink,#222);
text-decoration: none;
}
.page-contact .global-nav a:hover,
.page-contact .global-nav a.current{ color: var(--accent); }
/* 5) CTAボタン & SNS（存在する場合だけ効く） */
.page-contact .header-cta-btn{
display: inline-flex; align-items:center; gap:6px;
padding: 8px 16px; border-radius: 999px;
background: var(--accent); color:#fff; text-decoration:none;
font-weight: 600; font-size:14px;
}
.page-contact .header-cta-btn:hover{
background:#fff; color:var(--accent); border:1px solid var(--accent);
}
.page-contact .hero-icons{ display:flex; gap:12px; }
.page-contact .hero-icons .icon-circle{
width: var(--icon-box,40px); height: var(--icon-box,40px);
border-radius: 50%; background: var(--blue-deep); color:#fff;
display:flex; align-items:center; justify-content:center;
}
/* 6) スマホ調整 */
@media (max-width: 960px){
.page-contact .header,
.page-contact .header-inner{
grid-template-columns: auto auto;
grid-template-rows: auto auto;
row-gap: 12px;
padding: 10px 16px;
}
.page-contact .global-nav{ grid-column: 1 / -1; width:100%; }
.page-contact .global-nav ul{ grid-template-columns: repeat(2,1fr); row-gap:10px; }
.page-contact .header-cta-btn{ padding:6px 12px; font-size:13px; }
}
/* ===== 応募フォーム ===== */
.entry-form .form-block {
display: grid;
gap: 20px;
max-width: 640px;
margin: 0 auto;
}
.entry-form .form-group {
display: flex;
flex-direction: column;
}
.entry-form label {
font-weight: 600;
margin-bottom: 6px;
color: var(--ink);
}
.entry-form .req {
color: var(--accent);
margin-left: 4px;
}
.entry-form input,
.entry-form select,
.entry-form textarea {
border: 1px solid #ccc;
border-radius: 6px;
padding: 10px;
font-size: 16px;
line-height: 1.4;
}
.entry-form input:focus,
.entry-form select:focus,
.entry-form textarea:focus {
border-color: var(--blue-deep);
outline: none;
}
.entry-form .form-actions {
text-align: center;
margin-top: 20px;
}
/* === 視認性UP用のコールアウト === */
/* ヒーロー部の注意書き */
.entry-hero .hero-note{
display:inline-block;
background:#f5f8ff; /* 薄いブルー背景 */
border:1px solid #dfe7fb; /* ほんのり境界線 */
color:#24324b;
border-radius:12px;
padding:10px 14px;
line-height:1.8;
font-weight:600;
}
.entry-hero .hero-note i{
margin-right:6px;
}
/* 「※ * は必須です。」行をさらに強調（内側ラベル風） */
.entry-hero .hero-note .reqline{
display:inline-block;
margin-top:6px;
padding:2px 8px;
background:#ffffff;
border:1px dashed #c9d3f5;
border-radius:8px;
font-size:14px;
font-weight:700;
}
/* フォーム下の問い合わせ誘導（小さな注意） */
.entry-form .small.notice{
display:inline-block;
background:#fff7ed; /* 薄いオレンジ背景 */
border:1px solid #ffd8a8;
color:#5f3a02;
border-radius:10px;
padding:10px 12px;
line-height:1.8;
font-size:13.5px; /* 既存 small より少し大きめ */
font-weight:600;
}
.entry-form .small.notice i{ margin-right:6px; }
.entry-form .small.notice a{
color:#5f3a02;
text-decoration: underline;
font-weight:700;
}
/* ===== 連絡先カード（視認性UP版） ===== */
.contact-info{
max-width:1000px; margin:12px auto 18px; padding:0 16px;
display:grid; gap:18px;
grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:960px){
.contact-info{ grid-template-columns:1fr; }
}
.contact-card{
position:relative;
background:#fff;
border:2px solid #e5e7eb;
border-radius:16px;
padding:18px 16px;
display:flex; gap:14px; align-items:flex-start;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.contact-card:hover,
.contact-card:focus-within{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,.08);
border-color:rgba(33,47,91,.35); /* var(--blue-deep)の薄い枠 */
}
.contact-card .icon-badge{
flex:0 0 auto;
width:44px; height:44px; border-radius:50%;
display:grid; place-items:center;
font-size:20px; color:#fff;
background:var(--blue-deep);
box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
}
.contact-card h3{
margin:0 0 6px; font-size:18px; line-height:1.2;
}
.contact-card p{
margin:0; color:#444; font-size:15px; line-height:1.8;
}
.contact-card a{
font-weight:700; text-decoration:underline; text-underline-offset:2px;
color:var(--blue-deep);
}
/* 種別ごとに下地トーンを変えて“パッと見”を強化 */
.contact-card.is-phone{ background:#f5f7ff; border-color:#dfe5ff; } /* 薄いブルー */
.contact-card.is-mail{ background:#f6fffb; border-color:#c9f2e3; } /* 薄いミント */
.contact-card.is-map{ background:#fffdf5; border-color:#ffe9b8; } /* 薄いクリーム */
/* 主要リンクをボタン風に（押しやすく） */
.contact-card .cta{
display:inline-flex; align-items:center; gap:8px;
padding:8px 12px; border-radius:9999px;
background:#fff; border:1px solid currentColor;
text-decoration:none; font-weight:700;
margin-top:8px;
}
.contact-card.is-phone .cta{ color:var(--blue-deep); }
.contact-card.is-mail .cta{ color:#146c43; } /* 緑系 */
.contact-card.is-map .cta{ color:#8f7d5d; } /* 既存クリーム系トーンに寄せる */
.contact-card .meta{
display:block; font-size:12px; color:#6b7280; margin-top:6px;
}
/* ===== タイトル色を種別ごとに変更 ===== */
.contact-card.is-phone h3{ color:var(--blue-deep); }
.contact-card.is-mail h3{ color:#146c43; } /* グリーン系 */
.contact-card.is-map h3{ color:#8f7d5d; } /* クリーム寄り */
/* ===== メールカードの余白調整 ===== */
.contact-card.is-mail p{
margin-bottom:27px; /* アドレスとボタンの間を広げる */
}
/* === 代表メッセージ：引用枠を削除 === */
.message .msg-quote {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* === 本文はすべて同じスタイルで === */
.message .msg-text {
font-size: 16px; /* 調整可 */
line-height: 1.9;
color: #333;
margin: 0 0 1.8em;
}
/* === 左の画像を少し大きめに === */
.message .msg-visual img {
width: 120%; /* デフォルトより拡大（110〜130%で好み調整） */
max-width: none; /* 親の幅制限を解除 */
}
/* === 代表メッセージ：画像の表示領域調整 === */
.message .msg-visual img {
width: 120%; /* 少し拡大 */
max-width: none; /* 親幅制限を解除 */
height: auto;
object-fit: cover; /* はみ出しても枠にフィット */
object-position: 150% 10%; /* 右上寄りを優先表示（X=右寄せ, Y=上寄せ） */
}
/* === 代表メッセージ：上下カラムに変更 === */
.message .section-inner {
display: flex;
flex-direction: column; /* 上下に積む */
align-items: center; /* 中央寄せ */
gap: 32px; /* 画像とテキストの間隔 */
}
/* 画像は中央寄せで幅を調整 */
.message .msg-visual img {
width: 80%; /* 画像サイズ（調整可：70〜90%） */
max-width: 520px; /* 上限サイズ（PC時の見栄え用） */
height: auto;
object-fit: cover;
object-position: 80% 10%; /* 右上寄り */
}
/* テキスト部分は中央揃え */
.message .msg-body {
max-width: 760px;
text-align: center;
}
.message .msg-body .msg-text {
text-align: left; /* 中の文章だけ左揃えにするならここ */
}
/* 代表メッセージ画像を枠いっぱいにフィットさせる */
.message .msg-visual {
width: 100%;
max-width: 860px; /* 枠の最大幅。好みで調整 */
margin: 0 auto;
border-radius: 12px; /* 今の角丸が欲しい場合 */
overflow: hidden; /* 画像がはみ出したらカット */
}
.message .msg-visual img {
width: 100%; /* 枠に対して横幅100% */
height: 100%; /* 高さも枠にフィット */
object-fit: cover; /* 枠に合わせてトリミング */
object-position: 80% 10%; /* 右上を優先的に表示 */
display: block;
}
/* 代表メッセージ：画像枠の比率を固定して暴れ防止 */
.message .msg-visual{
width: min(92vw, 860px); /* 画面に応じて最大860px */
aspect-ratio: 16 / 10; /* 横長の比率。好みで 3/2 などに */
margin: 0 auto 28px;
border-radius: 14px;
overflow: hidden;
background: #2b2b2b; /* 画像読み込み前の下地 */
flex: 0 0 auto; /* 親のflexレイアウトに引っ張られない */
}
/* 画像を枠いっぱいにフィット（右上を優先表示） */
.message .msg-visual img{
width: 100% !important;
height: 100% !important; /* ← 親の高さが aspect-ratio で決まっているのでOK */
object-fit: cover;
object-position: 80% 10%; /* 右上寄りを見せる。調整可（例: 70% 15%） */
display: block;
}
/* モバイルで少し縦を稼ぎたいなら比率を変更（任意） */
@media (max-width: 640px){
.message .msg-visual{ aspect-ratio: 4 / 3; } /* 3:2 や 4:3 が収まり良い */
}
/* ===== 代表メッセージ画像：装飾を全リセットして枠に完全フィット ===== */
/* 枠を確定（比率固定・はみ出しカット） */
.message .msg-visual{
position: relative !important;
width: min(92vw, 860px) !important;
aspect-ratio: 3 / 2 !important; /* 好みで 16/10, 4/3 などに変更可 */
margin: 0 auto 28px !important;
padding: 0 !important;
border-radius: 14px !important;
overflow: hidden !important;
background: transparent !important; /* 背景のダーク面を消す */
box-shadow: none !important;
}
/* 右側に出ている装飾や帯を完全無効化 */
.message .msg-visual::before,
.message .msg-visual::after{
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
}
/* 画像を“枠いっぱい”に固定（絶対配置でカバー） */
.message .msg-visual > img{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* 枠に合わせてトリミング */
object-position: 80% 10% !important; /* 右上を優先表示（調整可） */
display: block !important;
max-width: none !important;
}
/* レイアウトを上下スタックに（念のため） */
.message .section-inner{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 32px !important;
}
/* 旧FVを無効化（残っていてもOK） */
.image-box,.deep-blue-box,.red-outline-box,.custom-slider{ display:none !important; height:0 !important; margin:0 !important; padding:0 !important; }
/* 骨格 */
.fv-cut{
position:relative; color:#fff; isolation:isolate;
background:
radial-gradient(120% 90% at 78% 22%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(180deg, #24356b, #0f1a3d);
}
.fvcut__wrap{
max-width:min(1320px, 94vw);
margin:0 auto; padding: clamp(28px, 5vw, 64px) 0;
display:grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3.6vw, 48px); align-items:center;
}
/* 左：画像（左端ぴったり / 幅=約70%） */
.art-edge{ margin:0; width: clamp(680px, 70vw, 980px); aspect-ratio: 1000 / 700; position:relative; }
.art-edge__svg{ width:100%; height:100%; display:block; }
/* 右：コピー共通（タイポ＆ボタン） */
.fvcut__copy{ padding: 0 clamp(8px, 2vw, 16px); }
.fvcut__copy .eyebrow{ letter-spacing:.14em; opacity:.82; margin:0 0 10px; font-weight:700; }
.fvcut__copy--H .title{ margin:0 0 12px; font-size: clamp(34px, 6vw, 70px); line-height:1.06; }
.fvcut__copy--H .lead{ margin:0 0 22px; line-height:1.9; opacity:.96; max-width:60ch; text-wrap:balance; }
.actions,.vactions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-solid,.btn-ghost{ border-radius:999px; padding:12px 20px; font-weight:700; transition: all .25s ease; }
.btn-solid{ background:#fff; color: var(--blue-deep,#24356b); border:1px solid #fff; }
.btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-solid:hover{ transform: translateY(-1px); box-shadow:0 6px 22px rgba(0,0,0,.2); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; transform: translateY(-1px); }
/* —— 縦書き版（V） —— */
.fvcut__copy--V{
/* ノッチ側へ“被せる”重なり。数値で微調整可能 */
--overlap: clamp(0px, 3vw, 28px);
position: relative;
}
.fvcut__copy--V .vstack{
writing-mode: vertical-rl;
text-orientation: mixed; /* 漢字/かなは直立、欧文は横向きを許容 */
display: inline-flex;
gap: clamp(12px, 2.2vw, 22px);
align-items: flex-start;
/* ノッチへ少し食い込ませる */
margin-right: calc(var(--overlap) * -1);
}
.fvcut__copy--V .vtitle{
font-size: clamp(30px, 5.4vw, 60px);
line-height: 1.1;
margin: 0;
}
.fvcut__copy--V .vlead{
font-size: 14px;
line-height: 1.9;
opacity: .96;
max-height: 26em; /* 行の伸びすぎ防止 */
}
.fvcut__copy--V .vhl{
background: linear-gradient(0deg, rgba(255,255,255,.22), rgba(255,255,255,0));
background-size: 100% 220%;
background-position: 0% 0%;
padding-inline: .08em;
animation: inkV 10s linear infinite; /* 文字だけ微動（不要なら削除） */
}
@keyframes inkV{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:0% 100%; } }
/* —— 横書き版（H） —— */
.fvcut__copy--H .hl{
background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
background-size: 200% 100%;
background-position: 0% 0%;
padding: 0 .06em;
animation: inkH 10s linear infinite; /* 文字だけ微動（不要なら削除） */
}
@keyframes inkH{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:100% 0%; } }
/* data-copy で片方だけ表示 */
.fv-cut[data-copy="H"] .fvcut__copy--H{ display:block; }
.fv-cut[data-copy="H"] .fvcut__copy--V{ display:none; }
.fv-cut[data-copy="V"] .fvcut__copy--H{ display:none; }
.fv-cut[data-copy="V"] .fvcut__copy--V{ display:block; }
/* 検証トグル（公開時は消してOK） */
.fvcut__switch{
position:absolute; top:14px; right:14px; z-index:5; display:flex; gap:6px;
}
.fvcut__switch button{
background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28);
border-radius:10px; padding:6px 10px; font-weight:700; cursor:pointer;
}
.fvcut__switch [aria-pressed="true"]{ background:#fff; color:var(--blue-deep,#24356b); }
/* レスポンシブ（モバイルは横書きに強制フォールバック推奨） */
@media (max-width: 960px){
.fvcut__wrap{ grid-template-columns: 1fr; gap: 20px; }
.art-edge{ width: 100%; }
.fv-cut[data-copy="V"] .fvcut__copy--V{ display:none; }
.fv-cut[data-copy="V"] .fvcut__copy--H{ display:block; }
}
/* 動きを控えるユーザー設定 */
@media (prefers-reduced-motion: reduce){
.vhl,.hl{ animation: none !important; }
}
/* ===== FV（D固定） 基本レイアウト ===== */
.fv-cut{
position: relative; color:#fff; isolation:isolate;
background:
radial-gradient(120% 90% at 78% 22%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(180deg, #24356b, #0f1a3d);
}
.fvcut__wrap{
max-width:min(1320px, 94vw);
margin:0 auto; padding: clamp(28px, 5vw, 64px) 0;
display:grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3.6vw, 48px); align-items:center;
}
/* 左：画像（左端ぴったり / 右へ約70%） */
.art-edge{ margin:0; width: clamp(680px, 70vw, 980px); aspect-ratio: 1000/700; position:relative; }
.art-edge__svg{ width:100%; height:100%; display:block; }
/* 右：コピー（PCは縦組み、SPで横組みにフォールバック） */
.fvcut__copy{ padding: 0 clamp(8px, 2vw, 16px); }
.fvcut__copy .eyebrow{ letter-spacing:.14em; opacity:.82; margin:0 0 10px; font-weight:700; }
.fvcut__copy--V{
--overlap: clamp(0px, 3vw, 28px); /* ノッチ側への“食い込み”量：±で調整 */
position: relative;
}
.fvcut__copy--V .vstack{
writing-mode: vertical-rl; /* ← PCは縦組み */
text-orientation: mixed;
display: inline-flex; gap: clamp(12px, 2.2vw, 22px);
align-items: flex-start;
margin-right: calc(var(--overlap) * -1); /* 右ノッチへ少し被せる */
}
.fvcut__copy--V .vtitle{ font-size: clamp(30px, 5.4vw, 60px); line-height:1.1; margin:0; }
.fvcut__copy--V .vlead{ font-size:14px; line-height:1.9; opacity:.96; max-height:26em; }
.vactions,.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-solid,.btn-ghost{ border-radius:999px; padding:12px 20px; font-weight:700; transition: all .25s ease; }
.btn-solid{ background:#fff; color: var(--blue-deep,#24356b); border:1px solid #fff; }
.btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-solid:hover{ transform: translateY(-1px); box-shadow:0 6px 22px rgba(0,0,0,.2); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; transform: translateY(-1px); }
/* 文字だけ“わずかに”動かす（不要なら .vhl の animation を削除） */
.fvcut__copy--V .vhl{
background: linear-gradient(0deg, rgba(255,255,255,.22), rgba(255,255,255,0));
background-size: 100% 220%; background-position: 0% 0%;
padding-inline:.08em; animation: inkV 10s linear infinite;
}
@keyframes inkV{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:0% 100%; } }
/* SP（<=960px）は横組みに自動フォールバック */
@media (max-width: 960px){
.fvcut__wrap{ grid-template-columns: 1fr; gap: 20px; }
.art-edge{ width: 100%; }
.fvcut__copy--V .vstack{
writing-mode: horizontal-tb; /* ← 横組みに切替 */
gap: 10px; margin-right: 0;
}
.fvcut__copy--V .vtitle{ font-size: clamp(28px, 6.2vw, 40px); }
}
/* 動きを控えるユーザー設定 */
@media (prefers-reduced-motion: reduce){
.fvcut__copy--V .vhl{ animation: none !important; }
}
/* ===== FV 微調整（要望4点まとめ） ===========================
1) 画像ブロックの“左余白ゼロ”（ビューポート左にフルブリード）
2) 上部余白を少し詰める（全体を上に）
3) 人物をもう少し左へ（画像内部の表示オフセット）
4) 画像の下 10% をカット
=========================================================== */
/* ラッパーの現在幅を変数に保持して、左だけフルブリードにする */
.fvcut__wrap{
--wrap: min(1320px, 94vw);
max-width: var(--wrap);
/* 上部余白を圧縮：以前より控えめに */
padding-top: clamp(10px, 2.8vw, 26px) !important;
align-items: start !important;
}
/* 画像ブロックを“左にせり出し”＝ビューポート左にピタッと */
.art-edge{
aspect-ratio: 3 / 2 !important; /* ドアップ抑制（3:2） */
margin-left: calc((100vw - var(--wrap)) / -2) !important;/* 左フルブリード */
/* 必要なら右側の余白を少しだけ戻す場合：
margin-right: clamp(0px, 1vw, 16px); */
}
/* SVG の中身をオフセットして“人物をもう少し左／上”へ */
.art-edge__svg image{
transform: translate(var(--fv-shiftX, 0px), var(--fv-shiftY, 0px));
transform-box: fill-box; /* SVGの座標系で移動 */
transform-origin: top left;
/* 画像の下 10% をカット（値は % / px どちらでもOK） */
clip-path: inset(0 0 var(--fv-cutB, 10%) 0);
}
/* モバイルはブリードを弱める（必要なら） */
@media (max-width: 960px){
.art-edge{
margin-left: 0 !important; /* 小さな画面では中央レイアウトに戻す */
width: 100%;
}
.art-edge__svg image{
/* モバイルはオフセットを弱める（任意） */
transform: translate(calc(var(--fv-shiftX, 0px) * .4),
calc(var(--fv-shiftY, 0px) * .4));
clip-path: inset(0 0 var(--fv-cutB-sp, 6%) 0); /* SPは下6%カットなどに */
}
}
/* ===== FV（Dノッチ固定・横書き） ===== */
.fv-cut{ padding: clamp(24px,4vw,56px) 0; }
.fv-cut--blue{
/* 「背景の青」を復活。要らなければこのクラスを外す */
background:
radial-gradient(120% 90% at 75% 30%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, #24356b 0%, #1b2a55 55%, #0f1a3d 100%);
}
.fvcut__wrap{
display:grid;
grid-template-columns: min(72vw, 1040px) minmax(320px, 34vw); /* 左=画像/右=コピー */
gap: clamp(20px,4vw,64px);
align-items:center;
}
/* 画像：左ぴったり＋右だけノッチ。背景はURLを直指定（上のHTMLのstyleで） */
.art-edge{
width:100%;
height: clamp(360px, 56vh, 680px);
margin-left:0; /* 左余白ゼロで“ぴったり” */
background-color:#dfe3ea; /* 画像未読込時のプレースホルダ色 */
background-position:
calc(0% + var(--panX, 0px)) /* ←人物をさらに左へ見せるつまみ */
calc(20% + var(--panY, 0%)); /* ←全体を下に20% + 任意の微調整 */
background-size: cover;
background-repeat: no-repeat;
}
.art-edge--d{
--bottom: calc(100% - var(--cutB, 0%)); /* 下カット量 */
clip-path: polygon(0% 0%, 86% 0%, 74% 45%, 86% var(--bottom), 0% var(--bottom));
}
/* 右：横書きコピー（白背景に乗せず、青の上でも読みやすい色） */
.fvcut__copy{
display:grid; align-content:center; gap: clamp(8px,1.2vw,14px);
max-width: 44ch; color:#f4f7ff; /* 青背景上での可読色 */
}
.fvcut__copy .eyebrow{
font-size: clamp(12px,.9vw,14px); letter-spacing:.12em;
color: rgba(255,255,255,.72);
font-weight:600; margin:0;
}
.fvcut__copy .title{
margin:0; line-height:1.18; font-weight:800;
font-family:'Zen Old Mincho',serif;
font-size: clamp(28px,3.6vw,48px); color:#fff;
}
.fvcut__copy .lead{
color: rgba(255,255,255,.86);
line-height:1.9; font-size: clamp(14px,1.2vw,16px);
}
.fvcut__copy .actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* 文字だけふわっと（画像は静止） */
@keyframes rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.fvcut__copy > *{ animation: rise .6s ease-out both; }
.fvcut__copy .title{ animation-delay:.08s; }
.fvcut__copy .lead{ animation-delay:.16s; }
.fvcut__copy .actions{animation-delay:.24s; }
@media (max-width: 960px){
.fvcut__wrap{ grid-template-columns:1fr; gap:20px; }
.fvcut__copy{ max-width:100%; }
}
/* ===== FV修正パッチ：左ピッタリ＋比率安定＋右は横書き ===== */
/* サイトの左右ガター（全体の余白）。あなたのサイトに合わせて調整 */
:root { --site-gutter: 40px; }
@media (max-width: 960px){ :root { --site-gutter: 16px; } }
/* 1) ラッパーはフル幅。列比率は「左=可変 / 右=固定幅」 */
.fv-cut .fvcut__wrap{
max-width: none !important;
padding-left: 0 !important; /* ← 左余白0に */
padding-right: clamp(16px, 5vw, 56px) !important; /* 右だけ余白 */
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, 520px) !important;
gap: clamp(20px, 4vw, 64px) !important;
align-items: center !important;
}
/* 2) 画像：ページ左端に“はみ出し”＝ガター分だけマイナスで出す */
.fv-cut .art-edge{
height: clamp(420px, 56vh, 680px) !important;
margin-left: calc(-1 * var(--site-gutter)) !important; /* 左ピッタリ */
width: calc(100% + var(--site-gutter)) !important; /* はみ出した分を補う */
background-size: cover !important; /* 比率崩れ防止 */
background-repeat: no-repeat !important;
/* 位置つまみ：--panXで“人物をさらに左へ”、--panYで“全体を下へ” */
background-position:
calc(0% + var(--panX, 0px))
calc(20% + var(--panY, 0%)) !important;
}
/* 3) 右斜めノッチ（D）— 下カット量は --cutB で調整 */
.fv-cut .art-edge--d{
--bottom: calc(100% - var(--cutB, 12%));
clip-path: polygon(0% 0%, 86% 0%, 74% 45%, 86% var(--bottom), 0% var(--bottom)) !important;
}
/* 4) 右の横書きコピー（可読性と折返し） */
.fv-cut .fvcut__copy{
max-width: 44ch !important;
color: #f4f7ff !important;
}
.fv-cut .fvcut__copy .title{
font-size: clamp(28px, 3.4vw, 46px) !important;
line-height: 1.2 !important;
margin: 0 0 8px !important;
}
.fv-cut .fvcut__copy .lead{ line-height: 1.9 !important; }
/* ===== FVサイズUP & 右コピー1行固定（PC） ===== */
/* ヒーロー全体を背伸び（最小/推奨/最大） */
.fv-cut .fvcut__wrap{
min-height: clamp(520px, 72vh, 860px) !important;
}
/* 右カラムの可用幅を少し広げる（1行収まり用） */
.fv-cut .fvcut__copy{
max-width: min(46vw, 620px) !important; /* 余白を食わずに横幅確保 */
}
/* タイトルをPCで1行に固定。サイズは画面に追従 */
@media (min-width: 961px){
.fv-cut .fvcut__copy .title{
white-space: nowrap !important; /* 強制1行 */
font-size: clamp(28px, 3.2vw, 44px) !important;
line-height: 1.18 !important;
letter-spacing: .04em !important;
}
/* 念のため
無効化 */
.fv-cut .fvcut__copy .title br{ display:none !important; }
}
/* 見出し上のラベルとの間隔を少し詰めて1行レイアウトを助ける */
.fv-cut .fvcut__copy .eyebrow{
margin-bottom: 8px !important;
}
/* タイトル直下のリード文は少しだけ詰め気味に（好みで調整OK） */
.fv-cut .fvcut__copy .lead{
margin-top: 10px !important;
}
/* 画像側：ヒーローが大きくなっても見切れづらいよう保険 */
.fv-cut .art-edge{
background-size: cover !important;
background-position: var(--panX,50%) var(--panY,50%) !important;
}
/* ===== fv-hero：panX / panY を強制適用 ===== */
.fv-cut .art-edge{
/* 変数をそのまま position に使う。上書きされないよう個別プロパティ＋!important */
background-position-x: var(--panX, 50%) !important;
background-position-y: var(--panY, 50%) !important;
background-size: cover !important; /* 念のため */
}
/* もし「background」ショートハンドで潰しているルールがある場合の盾 */
.fv-cut .art-edge[style*="--panX"]{
background-position: var(--panX,50%) var(--panY,50%) !important;
}
/* Eyebrow を OYAGI に見せる装飾（筆記体・やや斜め・少し大きく） */
.fv-cut .fvcut__copy .eyebrow{
font-family: 'Great Vibes', cursive !important;
font-size: clamp(22px, 2.2vw, 32px) !important;
line-height: 1 !important;
letter-spacing: .02em !important;
color: rgba(255,255,255,.92) !important;
transform: rotate(-6deg); /* 斜めに */
transform-origin: left center;
display: inline-block;
margin-bottom: 10px !important;
}
/* 文字の下に軽い筆記体の“引き”を演出（飾り線） */
.fv-cut .fvcut__copy .eyebrow::after{
content:"";
display:inline-block;
width: 64px; height: 1px;
margin-left: 10px;
transform: translateY(-2px) rotate(6deg);
background: rgba(255,255,255,.5);
}
/* モバイルは傾きを弱める */
@media (max-width: 960px){
.fv-cut .fvcut__copy .eyebrow{
font-size: clamp(20px, 5.2vw, 26px) !important;
transform: rotate(-3deg);
}
.fv-cut .fvcut__copy .eyebrow::after{ width: 44px; }
}
/* Eyebrow をシンプルに強調 */
.fv-cut .fvcut__copy .eyebrow{
font-family: 'Noto Sans JP', sans-serif; /* 英字はシンプルに */
font-size: clamp(20px, 2vw, 28px) !important;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(255,255,255,.92) !important;
margin-bottom: 12px !important;
}
/* リード文：読みやすさ優先 */
.fv-cut .fvcut__copy .lead{
font-size: clamp(15px, 1.4vw, 18px) !important;
line-height: 1.9;
color: rgba(255,255,255,.9);
max-width: 38ch; /* 行幅をやや短めに */
}
/* ===== Eyebrow の斜め線を削除 ===== */
.fv-cut .fvcut__copy .eyebrow::after{
content: none !important; /* 疑似要素を消す */
display: none !important;
}
/* ===== Entrance Reveal（読み込み後の段階的フェードアップ） ===== */
.reveal-target{
opacity: 0;
transform: translateY(14px);
filter: blur(1px);
transition: opacity .65s ease-out, transform .65s ease-out, filter .65s ease-out;
will-change: opacity, transform, filter;
}
.reveal-target.is-in{
opacity: 1;
transform: none;
filter: none;
}
/* ヒーローの各パーツは軽く差をつける（見え方にコクを） */
.reveal-slight{ transform: translateY(10px); }
.reveal-strong{ transform: translateY(18px); }
/* 縮退（ユーザー設定を尊重） */
@media (prefers-reduced-motion: reduce){
.reveal-target{
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ===============================
ふわっと白→画像クロスフェード
==================================*/
.fv-cut .art-edge{
position: relative;
transform: scale(1.03); /* ほんのりズームで奥行き */
transition: transform 900ms ease; /* 入るときに1.03→1.00 */
}
.fv-cut .art-edge::before{
content:"";
position:absolute; inset:0;
background:#fff; /* 最初は白で覆う */
opacity: 1;
backdrop-filter: blur(10px); /* うっすらボカし */
transition: opacity 900ms ease, backdrop-filter 900ms ease;
pointer-events:none;
}
.fv-cut .art-edge.is-in{
transform: scale(1.0);
}
.fv-cut .art-edge.is-in::before{
opacity: 0; /* 白が消えて写真が現れる */
backdrop-filter: blur(0px);
}
/* ===============================
テキスト：線/箱 → 文字に“化ける”
（ラベル / タイトル / リード）
==================================*/
/* 共通下地：最初は見えない */
.reveal-text{
position: relative;
display: inline-block;
opacity: 0;
transform: translateY(6px);
filter: blur(2px);
transition: opacity .66s ease, transform .66s ease, filter .66s ease;
}
/* 1) “黒い線が伸びる” 演出 */
.reveal-text.line::before{
content:"";
position:absolute;
left:0; bottom:0.08em;
height:1px; width:0;
background: rgba(0,0,0,.85);
transition: width .42s ease;
}
/* 2) “黒い箱がスライドして消える” 演出（タイトル向け） */
.reveal-text.box::after{
content:"";
position:absolute; inset:0 0 0 0;
background: rgba(0,0,0,.88); /* まずは黒い箱 */
transform: translateX(-6%);
transition: transform .72s cubic-bezier(.2,.8,.2,1), opacity .3s linear .42s;
}
/* リードは文字色薄めのサイトもあるので白地想定の色を補正 */
.fv-cut .fvcut__copy .lead.reveal-text{ color: rgba(255,255,255,.92); }
/* “見える状態” へ */
.reveal-text.is-in{
opacity: 1;
transform: none;
filter: none;
}
.reveal-text.line.is-in::before{ width: 100%; } /* 線がスッと走る */
.reveal-text.box.is-in::after{ /* 箱がスライド退場 */
transform: translateX(102%);
opacity: 0;
}
/* マスクで“文字が左→右に現れる”薄掛け（対応ブラウザはより滑らか） */
@supports (-webkit-mask-image: linear-gradient(#000 0 0)){
.reveal-wipe{
-webkit-mask-image: linear-gradient(#000 0 0);
-webkit-mask-size: 0% 100%;
-webkit-mask-repeat: no-repeat;
transition: -webkit-mask-size .72s cubic-bezier(.2,.8,.2,1);
}
.reveal-wipe.is-in{ -webkit-mask-size: 100% 100%; }
}
/* モーション縮退 */
@media (prefers-reduced-motion: reduce){
.fv-cut .art-edge{ transform:none !important; }
.fv-cut .art-edge::before{ opacity:0 !important; backdrop-filter:none !important; }
.reveal-text,
.reveal-text::before,
.reveal-text::after{
transition:none !important;
opacity:1 !important;
transform:none !important;
filter:none !important;
width:auto !important;
}
}
/* ===== Smooth Preloader (fade-out) ===== */
#preloader{
position:fixed; inset:0; z-index:9999;
display:grid; place-items:center;
background: #0f1a3d; /* 既存のブランド濃紺でOK。白にしたいなら #fff */
opacity:1;
transition: opacity 900ms cubic-bezier(.22,.61,.36,1);
will-change: opacity;
}
#preloader .preloader-content{
opacity:1; transform: scale(1); filter:none;
transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease;
}
/* フェード開始（JSで付与） */
#preloader.preloader--out{
opacity:0;
}
#preloader.preloader--out .preloader-content{
opacity:.0; transform: scale(.985); filter: blur(2px);
}
/* 動きを減らす設定のユーザー向け（即時表示） */
@media (prefers-reduced-motion: reduce){
#preloader{ transition:none !important; opacity:0 !important; }
#preloader .preloader-content{ transition:none !important; }
}
/* プリローダー背景を白に */
#preloader{
background: #fff !important;
}
/* ===== 1) プリローダーを真っ白＆にじみ無し ===== */
#preloader{ background:#fff !important; }
#preloader .preloader-content{
filter:none !important;
box-shadow:none !important;
}
#preloader .preloader-content img{
filter:none !important; box-shadow:none !important;
}
#preloader .preloader-content h1{
color: var(--blue-deep, #212f5b) !important;
opacity:1 !important;
}
/* フェードアウトは不透明度のみ（にじみ/拡大縮小は無し） */
#preloader{ transition: opacity 900ms cubic-bezier(.22,.61,.36,1) !important; }
#preloader.preloader--out{ opacity:0 !important; }
#preloader .preloader-content{ transition:none !important; }
/* ===== 2) FV：ぼかし演出を完全OFF（画像＆テキスト） ===== */
.fv-cut .art-edge,
.fv-cut .art-edge::before{
filter:none !important;
backdrop-filter:none !important;
}
.fv-cut .art-edge{ transform:none !important; }
/* ===== 3) テキスト＆ボタン：黒マスクから現れる（スムーズ） ===== */
.reveal-mask{
position: relative;
display: inline-block;
opacity: 0; /* 最初は不可視 */
transform: translateY(6px);
transition: opacity 700ms ease, transform 700ms ease;
}
.reveal-mask::after{
content:"";
position:absolute; inset:0;
background: rgba(0,0,0,.92); /* 黒い板 */
transform: translateX(0); /* かぶさってる状態 */
transition: transform 780ms cubic-bezier(.2,.8,.2,1);
}
.reveal-mask.is-in{
opacity:1; transform:none;
}
.reveal-mask.is-in::after{
transform: translateX(102%); /* 右へ流れて消える */
}
/* ボタンも同じ演出を適用できるようにブロック化 */
.fv-cut .fvcut__copy .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.fv-cut .fvcut__copy .actions .btn-solid,
.fv-cut .fvcut__copy .actions .btn-ghost{
position: relative;
opacity: 0;
transform: translateY(6px);
transition: opacity 700ms ease, transform 700ms ease;
}
.fv-cut .fvcut__copy .actions .btn-solid::after,
.fv-cut .fvcut__copy .actions .btn-ghost::after{
content:""; position:absolute; inset:0;
background: rgba(0,0,0,.92);
transform: translateX(0);
transition: transform 780ms cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
.fv-cut .fvcut__copy .actions .btn-in{ /* JSで付ける到達クラス */
opacity:1; transform:none;
}
.fv-cut .fvcut__copy .actions .btn-in::after{
transform: translateX(102%);
}
/* ===== 4) 謎の黒い線を無効化（リード下のラインを完全封印） ===== */
.fv-cut .fvcut__copy .lead,
.fv-cut .fvcut__copy .lead::before,
.fv-cut .fvcut__copy .lead::after{
border:none !important;
box-shadow:none !important;
background:transparent !important;
content:none !important;
}
/* 初回リビールの黒マスク：はみ出し＆角丸ズレを解消 */
.fv-cut .fvcut__copy .actions .btn-solid,
.fv-cut .fvcut__copy .actions .btn-ghost{
position: relative;
overflow: hidden; /* 擬似要素のはみ出し防止 */
border-radius: 999px; /* 既存に揃える（任意） */
will-change: transform, opacity;
}
/* 初回リビール用（ロード直後に右へ流して消える黒板） */
.fv-cut .fvcut__copy .actions .btn-solid::after,
.fv-cut .fvcut__copy .actions .btn-ghost::after{
content:"";
position:absolute;
inset:-1px; /* 枠線分も完全に覆う */
border-radius: inherit; /* 角丸をボタンと一致させる */
background: #000; /* 黒い板 */
transform: translateX(0); /* 最初は全面に被せる */
transition: transform .78s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
/* JSで付く到達クラス：黒板が右へ去る → 完了後は痕跡を消す */
.fv-cut .fvcut__copy .actions .btn-in::after{
transform: translateX(102%);
}
.fv-cut .fvcut__copy .actions .btn-done::after{
content: none !important; /* 走り終わったら完全に除去 */
}
/* 汎用：めくれホバー（右へ高速スワイプ） */
.fv-cut .fvcut__copy .actions .btn-solid::before,
.fv-cut .fvcut__copy .actions .btn-ghost::before{
content:"";
position:absolute;
inset:-1px;
border-radius: inherit;
background: currentColor; /* テキスト色ベースのインク */
opacity: .18; /* 薄いインク感 */
transform: translateX(-105%) skewX(-10deg);
transition: transform .22s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
will-change: transform;
}
/* ホバーで“右へめくれる” */
.fv-cut .fvcut__copy .actions .btn-solid:hover::before,
.fv-cut .fvcut__copy .actions .btn-ghost:hover::before{
transform: translateX(0) skewX(-10deg);
}
/* ホバーで少しだけ浮かす（お好みで） */
.fv-cut .fvcut__copy .actions .btn-solid:hover,
.fv-cut .fvcut__copy .actions .btn-ghost:hover{
transform: translateY(-1px);
transition: transform .18s ease;
}
/* 1) 残っている黒い線の完全除去（キャッチ周り） */
.fv-cut .fvcut__copy .eyebrow,
.fv-cut .fvcut__copy .title{
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.fv-cut .fvcut__copy .eyebrow::before,
.fv-cut .fvcut__copy .eyebrow::after,
.fv-cut .fvcut__copy .title::before,
.fv-cut .fvcut__copy .title::after{
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 2) “黒箱→文字” をゆっくり＆ブラー無しに（見える化） */
.reveal-mask{
position: relative;
display: inline-block;
opacity: 0;
transform: translateY(10px);
transition: opacity 900ms ease, transform 900ms ease; /* ←ゆっくり */
}
.reveal-mask::after{
content:"";
position:absolute; inset:0;
background:#000; /* 黒板 */
transform: translateX(0);
transition: transform 1000ms cubic-bezier(.20,.80,.20,1); /* ←見える速度 */
pointer-events:none;
}
.reveal-mask.is-in{ opacity:1; transform:none; }
.reveal-mask.is-in::after{ transform: translateX(102%); }
/* 3) ボタン：初回リビール＋ホバーの“めくれ”をメリハリ強めで */
.fv-cut .fvcut__copy .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.fv-cut .fvcut__copy .actions .btn-solid,
.fv-cut .fvcut__copy .actions .btn-ghost{
position: relative; overflow: hidden; border-radius: 999px;
opacity: 0; transform: translateY(10px);
transition: opacity 900ms ease, transform 900ms ease;
}
/* 初回リビール（黒板） */
.fv-cut .fvcut__copy .actions .btn-solid::after,
.fv-cut .fvcut__copy .actions .btn-ghost::after{
content:""; position:absolute; inset:-1px; border-radius:inherit;
background:#000; transform: translateX(0);
transition: transform 1000ms cubic-bezier(.20,.80,.20,1);
pointer-events:none;
}
.fv-cut .fvcut__copy .actions .btn-in{ opacity:1; transform:none; }
.fv-cut .fvcut__copy .actions .btn-in::after{ transform: translateX(102%); }
.fv-cut .fvcut__copy .actions .btn-done::after{ content:none !important; }
/* ホバー“高速めくれ”＋コントラストUP */
.fv-cut .fvcut__copy .actions .btn-solid::before,
.fv-cut .fvcut__copy .actions .btn-ghost::before{
content:""; position:absolute; inset:-1px; border-radius:inherit;
background: currentColor; opacity:.28; /* ←濃度UP */
transform: translateX(-105%) skewX(-10deg);
transition: transform .22s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
.fv-cut .fvcut__copy .actions .btn-solid:hover::before,
.fv-cut .fvcut__copy .actions .btn-ghost:hover::before{
transform: translateX(0) skewX(-10deg);
}
.fv-cut .fvcut__copy .actions .btn-solid:hover,
.fv-cut .fvcut__copy .actions .btn-ghost:hover{
transform: translateY(-1px);
transition: transform .18s ease;
}
/* 4) FVの青い下地を“下方向に少しだけ”拡張 */
.fv-cut.fv-cut--blue{ padding-bottom: clamp(28px, 4vh, 56px) !important; }
/* ===== 0) まず“ぼかし系”を完全封印（プリローダー後の気持ち悪さ除去） ===== */
.fv-cut, .fv-cut *{
filter: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
text-shadow: none !important;
}
/* ===== 1) キャッチ周りの残り一本の黒線を完全に無効化 ===== */
.fv-cut .fvcut__copy .eyebrow,
.fv-cut .fvcut__copy .title{
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.fv-cut .fvcut__copy .eyebrow::before,
.fv-cut .fvcut__copy .eyebrow::after,
.fv-cut .fvcut__copy .title::before,
.fv-cut .fvcut__copy .title::after{
content: none !important;
height: 0 !important; width: 0 !important;
background: transparent !important; border: 0 !important;
}
/* ===== 2) “黒箱 → 文字”（ブラー無し・分かりやすい速度） ===== */
.sweep{
position: relative;
display: inline-block;
overflow: hidden;
opacity: 0;
transform: translateY(10px);
transition: opacity 700ms ease, transform 700ms ease;
}
.sweep::before{ /* 覆い被さる黒い板（最初は全面） */
content:"";
position:absolute; inset:0;
background:#000;
transform: translateX(0);
transition: transform 1000ms cubic-bezier(.20,.80,.20,1);
}
.sweep.sweep--go{
opacity: 1; transform: none;
}
.sweep.sweep--go::before{
transform: translateX(102%); /* 右へスッと流れて文字が現れる */
}
/* ===== 3) ボタン：初回も黒から出る + ホバーは“高速めくれ”でメリハリ ===== */
.fv-cut .fvcut__copy .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-sweep{
position: relative; overflow: hidden; border-radius: 999px;
opacity: 0; transform: translateY(10px);
transition: opacity 700ms ease, transform 700ms ease;
}
.btn-sweep::before{ /* 初回リビール用の黒板 */
content:""; position:absolute; inset:-1px; border-radius:inherit;
background:#000; transform: translateX(0);
transition: transform 1000ms cubic-bezier(.20,.80,.20,1);
pointer-events:none;
}
.btn-sweep.btn--go{ opacity:1; transform:none; }
.btn-sweep.btn--go::before{ transform: translateX(102%); }
/* ホバー：薄いインクが右へ高速でめくれる（メリハリ強め） */
.btn-sweep::after{
content:""; position:absolute; inset:-1px; border-radius:inherit;
background: currentColor; opacity:.28;
transform: translateX(-105%) skewX(-10deg);
transition: transform .22s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
.btn-sweep:hover::after{ transform: translateX(0) skewX(-10deg); }
.btn-sweep:hover{ transform: translateY(-1px); transition: transform .18s ease; }
/* ===== 4) 青い下地を下方向に少しだけ拡張 ===== */
.fv-cut.fv-cut--blue{ padding-bottom: clamp(36px, 5vh, 72px) !important; }
/* ========== A) まず“ぼかし系”を完全OFF（FV一帯） ========== */
.fv-cut, .fv-cut *{
filter:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
/* ========== B) キャッチの残留線を完全封印 ========== */
.fv-cut .fvcut__copy .eyebrow,
.fv-cut .fvcut__copy .title{
border:0 !important; box-shadow:none !important; background:transparent !important;
}
.fv-cut .fvcut__copy .eyebrow::before,
.fv-cut .fvcut__copy .eyebrow::after,
.fv-cut .fvcut__copy .title::before,
.fv-cut .fvcut__copy .title::after{ content:none !important; }
/* ========== C) 画像の出方：白ベール → クリア（高級めのフィルム感） ========== */
.fv-cut .art-edge{
position:relative; overflow:hidden;
transform: none; /* ズームは無しで上品に */
}
.fv-cut .art-edge::before{ /* 白いベール：最初は白で覆う→薄れて消える */
content:""; position:absolute; inset:-1px; pointer-events:none;
background:#fff;
opacity:1; transition: opacity 1000ms ease;
}
.fv-cut .art-edge::after{ /* ごく薄いビネットで奥行き（ほんのり） */
content:""; position:absolute; inset:-1px; pointer-events:none;
background: radial-gradient(120% 80% at 60% 40%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
opacity:0; transition: opacity 1200ms ease;
}
.fv-cut .art-edge.reveal-on::before{ opacity:0; }
.fv-cut .art-edge.reveal-on::after{ opacity:0; }
/* ========== D) 黒箱→文字（テキスト） ========== */
.sweep{
position:relative; display:inline-block; overflow:hidden;
opacity:0; transform: translateY(10px);
transition: opacity 800ms ease, transform 800ms ease;
z-index:0;
}
.sweep::before{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:#000;
transform: translateX(0);
transition: transform 1100ms cubic-bezier(.20,.80,.20,1);
}
.sweep.sweep--go{ opacity:1; transform:none; }
.sweep.sweep--go::before{ transform: translateX(102%); }
/* ========== E) ボタン：色を統一（基本は白アウトライン） ========== */
.fv-cut .fvcut__copy .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.fv-cut .fvcut__copy .actions .btn-solid,
.fv-cut .fvcut__copy .actions .btn-ghost{
background:transparent !important;
color:#fff !important;
border:2px solid rgba(255,255,255,.92) !important;
border-radius:999px;
position:relative; overflow:hidden;
opacity:0; transform: translateY(10px);
transition: opacity 800ms ease, transform 800ms ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* 初回：ボタンも黒箱から出る */
.fv-cut .fvcut__copy .actions .btn-solid::before,
.fv-cut .fvcut__copy .actions .btn-ghost::before{
content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:1;
background:#000; transform: translateX(0);
transition: transform 1100ms cubic-bezier(.20,.80,.20,1);
}
.fv-cut .fvcut__copy .actions .btn--go{ opacity:1; transform:none; }
.fv-cut .fvcut__copy .actions .btn--go::before{ transform: translateX(102%); }
/* ホバー：右へ高速スワイプ＋白塗り化＋枠を発光（パキッと） */
.fv-cut .fvcut__copy .actions .btn-solid::after,
.fv-cut .fvcut__copy .actions .btn-ghost::after{
content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0;
background: currentColor; opacity:.28;
transform: translateX(-106%) skewX(-10deg);
transition: transform .20s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
.fv-cut .fvcut__copy .actions .btn-solid:hover::after,
.fv-cut .fvcut__copy .actions .btn-ghost:hover::after{
transform: translateX(0) skewX(-10deg);
}
.fv-cut .fvcut__copy .actions .btn-solid:hover,
.fv-cut .fvcut__copy .actions .btn-ghost:hover{
background:#fff !important;
color:#0f1a3d !important; /* 文字は濃紺で可読性を担保 */
box-shadow: 0 0 0 2px #fff inset, 0 0 18px rgba(255,255,255,.38);
transform: translateY(-1px);
}
/* キーボード操作でもパキッと */
.fv-cut .fvcut__copy .actions .btn-solid:focus-visible,
.fv-cut .fvcut__copy .actions .btn-ghost:focus-visible{
outline: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(255,255,255,.28);
}
/* ========== F) FVの青い下地を少しだけ下へ拡張 ========== */
.fv-cut.fv-cut--blue{ padding-bottom: clamp(36px, 5vh, 72px) !important; }
/* =========================================
0) まず“ぼかし/ズーム/線”を全停止（FV一帯）
========================================= */
.fv-cut, .fv-cut *{
filter:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
text-shadow:none !important;
}
.fv-cut .fvcut__copy .eyebrow,
.fv-cut .fvcut__copy .title,
.fv-cut .fvcut__copy .lead{
border:0 !important; box-shadow:none !important; background:transparent !important;
}
.fv-cut .fvcut__copy .eyebrow::before,
.fv-cut .fvcut__copy .eyebrow::after,
.fv-cut .fvcut__copy .title::before,
.fv-cut .fvcut__copy .title::after,
.fv-cut .fvcut__copy .lead::before,
.fv-cut .fvcut__copy .lead::after{
content:none !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
/* =========================================
1) プリローダー：白地＋“ゆっくりフェード”
※ 既存JSが付ける .peel を乗っ取る
========================================= */
#preloader{ background:#fff !important; }
#preloader .preloader-content,
#preloader .preloader-content *{
filter:none !important; box-shadow:none !important; transform:none !important;
}
#preloader .preloader-content h1{ color:var(--blue-deep,#212f5b) !important; }
/* 2秒後に .peel が付く → そこで1秒待ってから1.2秒でフェード（計2.2秒） */
#preloader.peel{
animation: preloaderFade 2.2s cubic-bezier(.22,.61,.36,1) forwards !important;
}
@keyframes preloaderFade{
0%{opacity:1}
45%{opacity:1} /* ← ここが“+1秒”の待ち */
100%{opacity:0; visibility:hidden}
}
/* =========================================
2) 画像の出方：白ベール→クリア（安っぽさ回避）
JS不要。has-preloader が外れた瞬間に発火
========================================= */
.fv-cut .art-edge{ position:relative; overflow:hidden; transform:none !important; }
.fv-cut .art-edge::before{
content:""; position:absolute; inset:-1px; background:#fff; opacity:1; pointer-events:none;
}
/* has-preloader が外れた後にベールを外す（0.3s待って 1.0s で消える） */
body:not(.has-preloader) .fv-cut .art-edge::before{
animation: veilOut 1.0s ease forwards; animation-delay:.3s;
}
@keyframes veilOut{ to{ opacity:0 } }
/* =========================================
3) 黒箱 → 文字（テキスト3点：eyebrow / title / lead）
JS不要。遅延はCSSで段付け
========================================= */
/* 初期（プリローダー中）は隠しておく */
body.has-preloader .fv-cut .fvcut__copy .eyebrow,
body.has-preloader .fv-cut .fvcut__copy .title,
body.has-preloader .fv-cut .fvcut__copy .lead{
opacity:0; transform:translateY(8px);
}
/* 黒箱（オーバーレイ）を用意：最初は全面真っ黒で覆う */
.fv-cut .fvcut__copy .eyebrow,
.fv-cut .fvcut__copy .title,
.fv-cut .fvcut__copy .lead{
position:relative; overflow:hidden;
}
.fv-cut .fvcut__copy .eyebrow::after,
.fv-cut .fvcut__copy .title::after,
.fv-cut .fvcut__copy .lead::after{
content:""; position:absolute; inset:0; background:#000; transform:translateX(0); pointer-events:none;
}
/* has-preloader が外れたら：下から出て、黒箱が右へ流れる（順にディレイ） */
body:not(.has-preloader) .fv-cut .fvcut__copy .eyebrow{
animation: rise 0.8s ease both; animation-delay:.50s;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .title{
animation: rise 0.8s ease both; animation-delay:.68s;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .lead{
animation: rise 0.8s ease both; animation-delay:.86s;
}
@keyframes rise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
body:not(.has-preloader) .fv-cut .fvcut__copy .eyebrow::after{
animation: sweepOut 1.1s cubic-bezier(.20,.80,.20,1) both; animation-delay:.50s;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .title::after{
animation: sweepOut 1.1s cubic-bezier(.20,.80,.20,1) both; animation-delay:.68s;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .lead::after{
animation: sweepOut 1.1s cubic-bezier(.20,.80,.20,1) both; animation-delay:.86s;
}
@keyframes sweepOut{ to{ transform:translateX(102%) } }
/* =========================================
4) ボタン：色を“白アウトライン”に統一
初回も黒から出現 → ホバーはパキッと
========================================= */
.fv-cut .fvcut__copy .actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* 統一デザイン */
.fv-cut .fvcut__copy .actions .btn-solid,
.fv-cut .fvcut__copy .actions .btn-ghost{
background:transparent !important;
color:#fff !important;
border:2px solid rgba(255,255,255,.95) !important;
border-radius:999px; position:relative; overflow:hidden;
}
/* 初回：プリローダー中は隠す → 外れたら出現 */
body.has-preloader .fv-cut .fvcut__copy .actions .btn-solid,
body.has-preloader .fv-cut .fvcut__copy .actions .btn-ghost{
opacity:0; transform:translateY(8px);
}
body:not(.has-preloader) .fv-cut .fvcut__copy .actions .btn-solid,
body:not(.has-preloader) .fv-cut .fvcut__copy .actions .btn-ghost{
animation: rise 0.8s ease both; animation-delay:1.04s; /* テキストより後に */
}
/* 初回の黒箱（::before で覆う→右へ流れる） */
.fv-cut .fvcut__copy .actions .btn-solid::before,
.fv-cut .fvcut__copy .actions .btn-ghost::before{
content:""; position:absolute; inset:-1px; border-radius:inherit;
background:#000; transform:translateX(0); pointer-events:none; z-index:1;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .actions .btn-solid::before,
body:not(.has-preloader) .fvcut .fvcut__copy .actions .btn-ghost::before{
animation: sweepOut 1.1s cubic-bezier(.20,.80,.20,1) both; animation-delay:1.04s;
}
/* ホバー：右へ高速スワイプ＋白塗り化＋枠発光（パキッと） */
.fv-cut .fvcut__copy .actions .btn-solid::after,
.fv-cut .fvcut__copy .actions .btn-ghost::after{
content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0;
background: currentColor; opacity:.30;
transform: translateX(-106%) skewX(-10deg);
transition: transform .20s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
.fv-cut .fvcut__copy .actions .btn-solid:hover::after,
.fv-cut .fvcut__copy .actions .btn-ghost:hover::after{
transform: translateX(0) skewX(-10deg);
}
.fv-cut .fvcut__copy .actions .btn-solid:hover,
.fv-cut .fvcut__copy .actions .btn-ghost:hover{
background:#fff !important;
color:#0f1a3d !important; /* 濃紺で可読性UP */
box-shadow: 0 0 0 2px #fff inset, 0 0 18px rgba(255,255,255,.38);
transform: translateY(-1px);
transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* =========================================
5) 青い下地を少しだけ下へ
========================================= */
.fv-cut.fv-cut--blue{ padding-bottom: clamp(36px, 5vh, 72px) !important; }
/* =========================================================
0) 競合リセット：FVでのぼかし/既存線/旧擬似要素を無効化
（この後で“必要な黒箱”だけを再定義します）
========================================================= */
.fv-cut, .fv-cut *{
filter:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
text-shadow:none !important;
}
.fv-cut .fvcut__copy .eyebrow,
.fv-cut .fvcut__copy .title,
.fv-cut .fvcut__copy .lead{
border:0 !important; box-shadow:none !important; background:transparent !important;
position:relative; overflow:hidden; /* 黒箱用に必要 */
}
/* 既存の ::before/::after を一旦無効化（黒箱はこの下で再定義） */
.fv-cut .fvcut__copy .eyebrow::before,
.fv-cut .fvcut__copy .eyebrow::after,
.fv-cut .fvcut__copy .title::before,
.fv-cut .fvcut__copy .title::after,
.fv-cut .fvcut__copy .lead::before,
.fv-cut .fvcut__copy .lead::after{
content:none !important;
}
/* =========================================================
1) 画像：白ベール → クリア（ブラー・ズームなし）
========================================================= */
.fv-cut .art-edge{ position:relative; overflow:hidden; }
.fv-cut .art-edge::before{
content:"" !important; position:absolute; inset:-1px; background:#fff;
opacity:1; pointer-events:none;
}
body:not(.has-preloader) .fv-cut .art-edge::before{
animation: fvVeilOut 1000ms ease forwards; animation-delay: 300ms;
}
@keyframes fvVeilOut{ to{ opacity:0 } }
/* =========================================================
2) 黒箱→文字（テキスト3点：eyebrow/title/lead）
- プリローダー中：要素は少し下げて待機、黒箱で全面覆う
- 解除後：要素が上がりつつ、黒箱が右へ流れて消える
========================================================= */
/* 待機（プリローダー中） */
body.has-preloader .fv-cut .fvcut__copy .eyebrow,
body.has-preloader .fv-cut .fvcut__copy .title,
body.has-preloader .fv-cut .fvcut__copy .lead{
opacity:1 !important; /* 文字は常にクッキリ（ぼかし禁止） */
transform: translateY(8px) !important; /* ほんの少し下げておく */
}
/* 黒箱（ここで“再”定義。最下流＋!importantで必ず出す） */
.fv-cut .fvcut__copy .eyebrow::before,
.fv-cut .fvcut__copy .title::before,
.fv-cut .fvcut__copy .lead::before{
content:"" !important;
position:absolute; inset:-1px; border-radius:4px;
background:#000; transform: translateX(0); z-index:2; pointer-events:none;
}
/* 発火（プリローダー解除後）：順にディレイを付けて見える化 */
@keyframes rise { from{ transform:translateY(8px); } to{ transform:none; } }
@keyframes sweepOut { to{ transform:translateX(102%); } }
/* Eyebrow → Title → Lead の順で */
body:not(.has-preloader) .fv-cut .fvcut__copy .eyebrow{
animation: rise 800ms ease forwards; animation-delay: 480ms;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .eyebrow::before{
animation: sweepOut 1100ms cubic-bezier(.20,.80,.20,1) forwards; animation-delay: 480ms;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .title{
animation: rise 800ms ease forwards; animation-delay: 640ms;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .title::before{
animation: sweepOut 1100ms cubic-bezier(.20,.80,.20,1) forwards; animation-delay: 640ms;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .lead{
animation: rise 800ms ease forwards; animation-delay: 800ms;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .lead::before{
animation: sweepOut 1100ms cubic-bezier(.20,.80,.20,1) forwards; animation-delay: 800ms;
}
/* =========================================================
3) ボタン：2つとも“白アウトライン”に統一
初回も黒箱から出現 → ホバーでパキッと白塗り＆枠発光＋スワイプ
========================================================= */
.fv-cut .fvcut__copy .actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* 統一ベース */
.fv-cut .fvcut__copy .actions .btn-solid,
.fv-cut .fvcut__copy .actions .btn-ghost{
background: transparent !important;
color: #fff !important;
border: 2px solid rgba(255,255,255,.95) !important;
border-radius: 999px;
position: relative; overflow: hidden;
transform: translateY(8px); /* プリローダー中の待機姿勢を統一 */
}
/* 初回の黒箱（::before）：全面を覆ってから右へ */
.fv-cut .fvcut__copy .actions .btn-solid::before,
.fv-cut .fvcut__copy .actions .btn-ghost::before{
content:"" !important;
position:absolute; inset:-1px; border-radius: inherit;
background:#000; transform: translateX(0); z-index:1; pointer-events:none;
}
/* プリローダー解除後：ボタンを少し遅らせて出現（テキストの次） */
body:not(.has-preloader) .fv-cut .fvcut__copy .actions .btn-solid,
body:not(.has-preloader) .fv-cut .fvcut__copy .actions .btn-ghost{
animation: rise 800ms ease forwards; animation-delay: 960ms;
}
body:not(.has-preloader) .fv-cut .fvcut__copy .actions .btn-solid::before,
body:not(.has-preloader) .fv-cut .fvcut__copy .actions .btn-ghost::before{
animation: sweepOut 1100ms cubic-bezier(.20,.80,.20,1) forwards; animation-delay: 960ms;
}
/* ホバー：右へ高速スワイプ＋白塗り＋濃紺文字＋枠発光（視認性MAX） */
.fv-cut .fvcut__copy .actions .btn-solid::after,
.fv-cut .fvcut__copy .actions .btn-ghost::after{
content:"";
position:absolute; inset:-1px; border-radius: inherit; z-index:0;
background: currentColor; opacity:.30;
transform: translateX(-106%) skewX(-10deg);
transition: transform .20s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
.fv-cut .fvcut__copy .actions .btn-solid:hover::after,
.fv-cut .fvcut__copy .actions .btn-ghost:hover::after{
transform: translateX(0) skewX(-10deg);
}
.fv-cut .fvcut__copy .actions .btn-solid:hover,
.fv-cut .fvcut__copy .actions .btn-ghost:hover{
background:#fff !important;
color:#0f1a3d !important; /* 文字が白地で沈まないよう濃紺へ */
box-shadow: 0 0 0 2px #fff inset, 0 0 20px rgba(255,255,255,.42);
transform: translateY(-1px);
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* キーボード操作でもパキッと */
.fv-cut .fvcut__copy .actions .btn-solid:focus-visible,
.fv-cut .fvcut__copy .actions .btn-ghost:focus-visible{
outline:none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(255,255,255,.28);
}
/* =========================================================
4) 下地をほんの少し下へ（FV余白）
========================================================= */
.fv-cut.fv-cut--blue{ padding-bottom: clamp(36px, 5vh, 72px) !important; }
/* 黒カバーを確実に画面外へ。にじみ防止のため大きめにオーバーシュート＆角丸一致 */
.sweep-cover{
inset: -2px; /* 1pxの縁も覆う */
border-radius: inherit;
backface-visibility: hidden;
transform: translateX(0);
transition: transform 1100ms cubic-bezier(.20,.80,.20,1) var(--delay,0ms);
}
body:not(.has-preloader) .sweep-cover{
transform: translate3d(130%,0,0); /* 102%→130%へ。確実に外へ出す */
}
/* 念のため：消し終わったカバーを強制的に非表示にできるフラグ */
.sweep-cover.is-hidden{ display: none !important; }
/* 黒カバーのホストは必ずクリップ（ずれ/残り対策） */
.sweep-host{ position: relative !important; overflow: hidden !important; }
/* 黒カバー：右へ“拭き取り”。transformは保険、主役は clip-path */
.sweep-cover{
inset: -3px; /* 端の1pxも覆う */
border-radius: inherit;
background:#000;
z-index: 2;
pointer-events: none;
will-change: clip-path, transform;
clip-path: inset(0 0 0 0); /* ← 全面 */
transform: translateZ(0);
transition:
clip-path 1100ms cubic-bezier(.20,.80,.20,1) var(--delay,0ms),
transform 1100ms cubic-bezier(.20,.80,.20,1) var(--delay,0ms);
}
/* プリローダー解除後：右側へ0幅までクリップ（完全に消える） */
body:not(.has-preloader) .sweep-cover{
clip-path: inset(0 0 0 100%); /* ← 右へ拭き取り。残りゼロ */
transform: translateZ(0); /* （保険） */
}
/* 念のため：消えた後に一瞬でも残って見えないように */
.sweep-cover.is-hidden{ display:none !important; }
/* ===== 黒カバー：右へ消えるアニメ（残留ゼロ） ===== */
.sweep-host{ position: relative !important; overflow: hidden !important; }
.sweep-cover{
position: absolute; inset: -3px; /* 端の筋を確実に覆う */
border-radius: inherit;
background: #000;
z-index: 2; pointer-events: none;
will-change: transform, clip-path;
transform: translate3d(0,0,0); /* 初期：全面を覆う */
clip-path: inset(0 0 0 0);
/* ここで transition を事前定義しておく（後から .sweep-run を付ける） */
transition:
transform 1100ms cubic-bezier(.20,.80,.20,1) var(--delay,0ms),
clip-path 1100ms cubic-bezier(.20,.80,.20,1) var(--delay,0ms);
}
/* 走らせるフラグ（JSで付与） */
.sweep-cover.sweep-run{
transform: translate3d(130%,0,0); /* 右へオーバーシュート */
clip-path: inset(0 0 0 100%); /* クリップでも完全消し */
}
/* 念のため：走り終わったら一時的に非表示にできるフラグ */
.sweep-cover.is-hidden{ display: none !important; }
/* ===== FVの青い下地を“もう少し”大きく ===== */
.fv-cut.fv-cut--blue{
padding-top: clamp(48px, 6vh, 88px) !important;
padding-bottom: clamp(140px, 16vh, 200px) !important;
min-height: clamp(640px, 78vh, 1000px) !important;
}
@media (max-width: 960px){
.fv-cut.fv-cut--blue{
padding-top: clamp(32px, 5vh, 60px) !important;
padding-bottom: clamp(100px, 18vh, 160px) !important;
min-height: clamp(520px, 72vh, 820px) !important;
}
}
/* 文字は絶対に動かさない（上下ブレ殺し） */
.fv-cut .fvcut__copy .eyebrow,
.fv-cut .fvcut__copy .title,
.fv-cut .fvcut__copy .lead{
position: relative !important;
overflow: hidden !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
/* 黒カバー（実DOM）— 見た目の定義だけ。動きはJSで inline 指定 */
.sweep-host{ position: relative !important; overflow: hidden !important; }
.sweep-cover{
position: absolute; inset: -3px; /* 端の筋を確実に覆う */
background: #000; border-radius: 4px;
z-index: 2; pointer-events: none;
will-change: transform, clip-path;
}
/* （保険）一度消し終えたら強制的に消す用 */
.sweep-cover.is-hidden{ display: none !important; }
/* ========== モバイル専用 ==========
PCには一切効かない（max-width:768px のみ）
=================================== */
@media (max-width: 768px){
/* 横はみ出しの根こそぎ抑止（スクロールバー幅の誤差も潰す） */
html, body { width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) {
html, body { overflow-x: hidden; }
}
/* プリローダーを“面”で固定。100vw/100vh は使わない */
#preloader{
position: fixed;
inset: 0; /* ← これで右端の 1px 漏れを無くす */
width: auto; height: auto;
/* 既存の背景色やフェードはそのままでOK。ここでは触らない */
/* background: var(--blue-deep, #212f5b); ←既に指定があるなら不要 */
z-index: 9999;
display: grid; place-items: center;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* 100vw 指定が潜んでいてもはみ出さないよう保険をかける */
.fv, .hero, .brand-bar, .blue-box, .page-edge, .preloader-cover{
max-width: 100%;
width: 100%;
left: 0; right: 0; margin: 0;
}
/* 画像・メディアのはみ出し防止（モバイルだけ適用） */
img, video, canvas { max-width: 100%; height: auto; display: block; }
/* transform: translateX(...) で横にズラす指定がある場合の打ち消し（あれば効く） */
[style*="translateX"] { transform: translateX(0) !important; }
}
/* === Mobile drawer: global fix =================================== */
@media (max-width: 768px){
/* 名前ゆれ対策で複数セレクタを束ねる */
.ham-panel, .sp-nav, #oy-ham .panel{
position: fixed; top:0; right:0; height:100dvh;
width:min(84vw, 420px); background:#fff; z-index:1100;
transform: translateX(100%); transition: transform .28s ease;
pointer-events:auto;
}
.ham-mask, .sp-mask, #oy-ham .mask{
position: fixed; inset:0; background:rgba(0,0,0,.45);
z-index:1090; opacity:0; visibility:hidden;
transition: opacity .2s ease;
/* 開いていない間はクリックを奪わない */
pointer-events:none;
}
/* 開いた時のみ有効化 */
.ham-open .ham-mask, .ham-open .sp-mask, .ham-open #oy-ham .mask{
opacity:1; visibility:visible; pointer-events:auto;
}
/* オープン状態 */
.ham-open .ham-panel, .ham-open .sp-nav, .ham-open #oy-ham .panel{
transform: translateX(0);
}
/* スクロールだけ止める（クリックは殺さない） */
body.ham-open{ overflow:hidden; }
/* デコ要素がクリックを奪わないように */
.brand-bar, .scroll-cue{ pointer-events:none !important; }
}
/* ===== fix: hamburger stacking & clicks (SP only) ===== */
@media (max-width: 768px){
/* パネルをベールより前面にする */
#oy-ham .oyh-panel{ z-index: 2; position: absolute; }
#oy-ham .oyh-veil { z-index: 1; position: fixed; }
/* 開いてない時にクリックを奪わない（保険） */
#oy-ham .oyh-drawer{ pointer-events: none; }
#oy-ham.open .oyh-drawer{ pointer-events: auto; }
/* デコがクリックを拾わないように（保険） */
.brand-bar, .scroll-cue{ pointer-events: none !important; }
}
/* 共通（Chrome/Safari どちらにも） */
.strengths-title,
.strengths-lead{
text-wrap: balance;
line-break: strict;
word-break: keep-all;
font-kerning: normal;
text-rendering: optimizeLegibility;
font-feature-settings: "palt" 1;
}
/* Safari 系だけの微調整（Chromeは当たらない） */
@supports (font: -apple-system-body) {
.strengths-lead{ letter-spacing: .01em; } /* 例：Safariでほんの少し詰めたい時 */
}
/* Safariの?対策：srcが無い間はヒーロー重ね画像を非表示 */
.about-hero__layers img:not([src]),
.svc-hero3d__layers img:not([src]){ display:none !important; }
/* 共通：srcのない画像は描画しない（Safariの「？」対策） */
img:not([src]) { display:none !important; }
/* ついでに、Safariだけロゴ帯を丸ごと止めたい場合（任意） */
html.is-safari .brandline-track { display:none !important; }