@charset "UTF-8";
/*
Template: swell
Theme Name: SWELL CHILD
Description: SWELL の子テーマ
*/
/* =========================================================
0) 共通レイアウト変数
========================================================= */
:root{
--site-container: 1240px; /* OUR PROJECTS と NEWS を揃える基準幅 */
--site-pad: 44px; /* 両サイドの余白調整 */
}
/* =========================================================
1) Brand Fonts
========================================================= */
@font-face{
font-family:'Geomanist';
src:url('Geomanist-Medium.otf') format('opentype');
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Geomanist';
src:url('Geomanist-Black.otf') format('opentype');
font-weight:900; font-style:normal; font-display:swap;
}
/* =========================================================
2) Base Typography
========================================================= */
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }
body{
font-family:"Hiragino Sans","ヒラギノ角ゴシック","Noto Sans JP",sans-serif;
font-weight:400; line-height:1.8;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{
font-family:"Geomanist","Helvetica Neue",Arial,sans-serif;
font-weight:500; line-height:1.4;
}
h1 strong,h2 strong,.heading-bold{ font-weight:900; }
/* 固定ページのタイトル帯を非表示（SWELL） */
.page .c-pageTitle,.page .p-pageTitle,.page .l-pageTitle{ display:none !important; }
/* =========================================================
3) TOP：ヒーロー / LOGO
========================================================= */
.lp-hero-top{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
min-height:88vh; padding:12vh var(--site-pad) 8vh; background:#fff; text-align:center;
}
.lp-hero-top h1{
font-weight:900; letter-spacing:.07em; line-height:1.14;
font-size:clamp(24px,4.2vw,44px); margin:0 0 12px;
}
.lp-hero-top p{
font-size:clamp(13px,1.4vw,18px); letter-spacing:.12em; color:#222; margin:0 0 30px;
}
/* SCROLL cue */
@keyframes cueBlink{ 0%,100%{opacity:.25;} 50%{opacity:1;} }
@keyframes cueUp{ from{opacity:0; transform:translate(-50%,12px);} to{opacity:1; transform:translate(-50%,0);} }
.lp-scroll-cue{
position:absolute; left:50%; bottom:6vh; transform:translate(-50%,8px);
display:inline-flex; flex-direction:column; align-items:center; gap:12px;
width:max-content; text-align:center; line-height:1; z-index:2;
font-family:"Geomanist","Helvetica Neue",Arial,sans-serif;
font-size:12px; letter-spacing:.18em;
animation: cueUp .9s cubic-bezier(.2,.6,.2,1) .7s both, cueBlink 1.8s ease-in-out 1.9s infinite;
}
.lp-scroll-cue::before{
content:""; display:block; width:1px; height:40px; margin:0 auto; background:#222; opacity:.6;
animation: cueUp .9s cubic-bezier(.2,.6,.2,1) .7s both, cueBlink 1.8s ease-in-out 2.25s infinite;
}
.lp-scroll-cue .wp-block-group__inner-container{ padding:0 !important; margin:0 !important; }
.lp-scroll-cue p{ margin:0; }
@media (prefers-reduced-motion:reduce){
.lp-scroll-cue,.lp-scroll-cue::before{ animation:none !important; transform:none !important; opacity:1 !important; }
}
@media (max-width:767px){
.lp-hero-top{ min-height:90vh; padding:12vh 16px 10vh; }
.lp-scroll-cue{ bottom:6vh; }
}
/* =========================================================
4) セクション共通レイアウト
========================================================= */
:root{ --lp-container: 1120px; --lp-pad-x: 24px; }
.lp-section{ padding: min(11vw, 120px) var(--lp-pad-x); }
.lp-section .section-inner{ max-width: var(--lp-container); margin: 0 auto; }
/* =========================================================
5) Head（英字/日本語）
========================================================= */
.post_content :is(h1,h2,h3,h4,h5,h6).ttl-en{
font-family:"Geomanist","Helvetica Neue",Arial,sans-serif !important;
font-weight:800 !important; text-transform:uppercase !important; line-height:1.08 !important;
margin:0 auto !important; padding:0 !important; width:fit-content !important; text-align:center !important;
}
@supports not (width: fit-content){ .post_content :is(h1,h2,h3,h4,h5,h6).ttl-en{ display:inline-block !important; } }
.post_content h2.ttl-en{ font-size: clamp(30px, 3.3vw, 40px) !important; }
.post_content h1.ttl-en{ font-size: clamp(34px, 4vw, 56px) !important; }
.post_content h3.ttl-en{ font-size: clamp(24px, 2.6vw, 36px) !important; }
/* SPだけ：英字H2見出しを少し小さく */
@media (max-width: 767px){
.post_content h2.ttl-en{
/* だいたい 22–26px のレンジ。もっと小さくしたければ下限を下げてOK */
font-size: clamp(22px, 6vw, 26px) !important;
}
}
.ttl-ja{
margin-top: clamp(8px, 1vw, 14px);
font-family:"Hiragino Sans","ヒラギノ角ゴシック","Noto Sans JP",sans-serif;
font-size: clamp(12px, 1.25vw, 16px);
letter-spacing: .12em; line-height: 1.5; font-weight: 600; text-align: center;
}
/* =========================================================
6) Footer layout
========================================================= */
.l-footer__foot > .l-container{
display:flex; align-items:center; justify-content:flex-start; gap:24px;
}
.l-footer__foot .l-footer__nav, .l-footer__foot .l-footer__nav ul{ margin:0; padding:0; }
.l-footer__foot .l-footer__nav ul{ display:flex; flex-wrap:wrap; gap:16px; }
@media (max-width:767px){
.l-footer__foot > .l-container{ flex-direction:column; align-items:center; gap:12px; }
.l-footer__foot .l-footer__nav ul{ justify-content:center; gap:12px; }
}
footer#footer{ --footer-pad: clamp(9px, 1.6vw, 18px); }
footer#footer.l-footer .l-footer__inner > .l-container,
footer#footer.l-footer .l-footer__widgetArea > .l-container.w-footer--col1,
footer#footer.l-footer .l-footer__foot > .l-container{
box-sizing:border-box; max-width:none !important; width:100vw !important;
margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
padding-left:var(--footer-pad) !important; padding-right:var(--footer-pad) !important;
}
footer#footer .w-footer__box{ padding:0 !important; }
footer#footer .l-footer__foot p.copyright,
footer#footer .l-footer__foot .p-copyright{
flex:1 1 auto; min-width:0; margin:0; padding-right:clamp(12px,2vw,28px);
font-size:12px; line-height:1; white-space:nowrap; text-align:right;
}
.footer-logo-wrap{ margin-left:auto; display:flex; align-items:center; }
.footer-logo-wrap .footer-logo-img{ height:24px; width:auto; display:block; }
/* =========================================================
7) Gutenberg columns & buttons
========================================================= */
.wp-block-columns{ --wp-column-gap: 1em !important; }
.wp-block-button .wp-block-button__link{ transition: background-color .25s, color .25s !important; }
.wp-block-button .wp-block-button__link:hover{ background-color:#000 !important; color:#fff !important; box-shadow:none !important; opacity:1 !important; }
/* =========================================================
8) NEWS & INFO（lp-news）
========================================================= */
/* ★ 外側の alignfull グループ直下の内側コンテナ＝基準器 */
.post_content .wp-block-group.alignfull.lp-news > .wp-block-group__inner-container{
max-width: var(--site-container) !important;
padding-left: var(--site-pad) !important;
padding-right: var(--site-pad) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ★ さらに内部の .section-inner 直下の内側コンテナも同じ器に */
.post_content .wp-block-group.alignfull.lp-news
> .wp-block-group__inner-container
> .wp-block-group.section-inner
> .wp-block-group__inner-container{
max-width: var(--site-container) !important;
padding-left: var(--site-pad) !important;
padding-right: var(--site-pad) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ★ .l-container が器を縮めるので解除 */
.post_content .lp-news .l-container{
max-width:none !important; width:100% !important;
padding-left:0 !important; padding-right:0 !important;
margin-left:0 !important; margin-right:0 !important;
}
/* Grid */
.post_content .lp-news .news-grid{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap: clamp(14px, 2vw, 24px);
max-width:none !important; width:100% !important;
}
@media (max-width:1024px){ .post_content .lp-news .news-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .post_content .lp-news .news-grid{ grid-template-columns:1fr; } }
/* Card */
.post_content .lp-news .news-item{ display:block; }
.post_content .lp-news .news-item a{
display:block; color:inherit; text-decoration:none !important; border:0 !important; box-shadow:none !important; background-image:none !important;
}
/* Thumb */
.post_content .lp-news .news-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:0 !important; }
.post_content .lp-news .news-thumb img{
width:100%; height:100%; object-fit:cover; display:block;
transition: transform .5s ease, opacity .3s ease; border-radius:0 !important;
}
.post_content .lp-news .news-item:hover .news-thumb img{ transform:scale(1.02); opacity:.98; }
/* Meta */
.post_content .lp-news .news-meta{
display:inline-flex; align-items:center; gap:.6em; margin-top:.45em; font-size:12px; line-height:1; opacity:.9;
}
.post_content .lp-news .news-date{
font-family:"Hiragino Sans","ヒラギノ角ゴシック","Noto Sans JP",sans-serif !important;
font-variant-numeric:tabular-nums; font-size:12px; font-weight:700; letter-spacing:.03em; line-height:1; white-space:nowrap; opacity:.9;
}
/* pill 無効 */
.post_content .lp-news .news-cat,
.post_content .lp-news .news-cat span,
.post_content .lp-news .news-cat a{
border:none !important; border-radius:0 !important; padding:0 !important;
background:none !important; box-shadow:none !important; display:inline !important;
}
/* Title */
.post_content .lp-news .news-item-title{
margin:.2em 0 0 !important;
font-family:"Hiragino Sans","ヒラギノ角ゴシック","Noto Sans JP",sans-serif !important;
font-weight:700; font-size: clamp(8px, 1vw, 12px); line-height:1.5;
}
/* SWELL h3 装飾線の無効化 */
.post_content .lp-news h3,
.post_content .lp-news h3.news-item-title{
position:static !important; padding:0 !important; background:none !important; border:0 !important;
}
.post_content .lp-news h3::before, .post_content .lp-news h3::after,
.post_content .lp-news h3.news-item-title::before, .post_content .lp-news h3.news-item-title::after{
content:none !important; display:none !important; width:0 !important; height:0 !important; background:none !important; box-shadow:none !important;
}
/* =========================================================
9) OUR PROJECTS（facility_grid ショートコード）
========================================================= */
/* 見出しブロック直下の内側コンテナ＝器 */
.post_content .lp-project .wp-block-group__inner-container{
max-width: var(--site-container) !important;
padding-left: var(--site-pad) !important;
padding-right: var(--site-pad) !important;
margin-left:auto !important; margin-right:auto !important;
}
/* Grid: PC3 / TB2 / SP1 */
.post_content .facility-grid{
display:grid; grid-template-columns:repeat(3,1fr);
column-gap:24px; row-gap:24px; width:100%;
max-width:none; margin:24px 0 0; /* 器にフィットさせる */
}
@media (max-width:1024px){
.post_content .facility-grid{ grid-template-columns:repeat(2,1fr); column-gap:20px; row-gap:20px; }
}
@media (max-width:599px){
.post_content .facility-grid{ grid-template-columns:1fr; row-gap:16px; }
}
.facility-card{ text-align:center; margin:0 !important; }
.facility-card__a{ display:block; text-decoration:none; color:inherit; }
/* Thumb */
.facility-thumb{
position:relative; aspect-ratio:3/2; width:100%; overflow:hidden; border-radius:0; margin-bottom:8px;
}
.facility-thumb__img{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
/* Title */
.facility-title{
margin:0 !important; padding:0 !important; border:none !important;
font-weight:700; line-height:1.3; letter-spacing:.02em;
font-size: clamp(12px, 1.15vw, 14px) !important;
}
.post_content .facility-grid h3.facility-title::before,
.post_content .facility-grid h3.facility-title::after{ content:none !important; display:none !important; }
.facility-card__a:hover .facility-title{ text-decoration:underline; }
/* Hover Overlay（角度なし／濃さそのまま／動きは従来と同じ感覚） */
.facility-thumb{ position: relative; overflow: hidden; }
.facility-thumb::after{
content:""; position:absolute; z-index:1; pointer-events:none;
/* サイズ・配置は従来のまま */
top:-40%; left:-40%; width:180%; height:180%;
background: rgba(0,0,0,0.40); /* 濃さそのまま */
/* 角度だけ除去：rotate/transform-origin を削除 */
transform: translate(100%, 100%); /* 右下の外から */
transition: transform 1.05s cubic-bezier(.19,1,.22,1);
will-change: transform;
}
.facility-card__a:hover .facility-thumb::after{
transform: translate(0, 0); /* 斜めに滑り込む（回転なし） */
}
/* 画像ズームは従来どおり */
.facility-card__a:hover .facility-thumb__img{
transform: scale(1.03);
transition: transform 1.05s cubic-bezier(.19,1,.22,1);
}
/* ===== NEWS：角度なし・右下→中央へ滑り込み（従来の見え方のまま） ===== */
@media (min-width: 960px) and (hover:hover) and (pointer:fine){
/* 当たり判定（要素構造の差を吸収） */
.news-grid :where(.news-card__a, a, figure, .news-thumb){
position: relative;
overflow: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
/* オーバーレイ本体（斜め時と同じサイズ感・濃さ、角度だけ無し） */
.news-grid :where(.news-thumb, figure)::after{
content:""; position:absolute; z-index:1; pointer-events:none;
top:-40%; left:-40%; width:180%; height:180%;
background: rgba(0,0,0,0.40); /* 既存と同じ色・濃さ */
transform: translate(100%, 100%); /* 右下の外から開始（回転なし） */
transition: transform 1.05s cubic-bezier(.19,1,.22,1);
will-change: transform;
}
/* hoverで中央へ滑り込む（角度なし） */
.news-grid :where(.news-card__a, a, figure):hover :where(.news-thumb, figure)::after{
transform: translate(0, 0);
}
/* 画像のズームは従来どおり（任意） */
.news-grid :where(img, .news-thumb__img){
transition: transform 1.05s cubic-bezier(.19,1,.22,1);
will-change: transform;
}
.news-grid :where(.news-card__a, a, figure):hover :where(img, .news-thumb__img){
transform: scale(1.03);
}
}
/* OUR PROJECTS：コア Button 用の体裁統一 */
#project .projects-actions{ display:flex; justify-content:center; margin-top:24px; }
#project .projects-actions .wp-block-buttons{ width:auto; } /* SWELLの横幅制御を無効化する保険 */
#project .btn-look-more .wp-block-button__link{
border:1px solid #000 !important;
background:#fff !important;
color:#000 !important;
box-shadow:none !important;
text-transform:uppercase;
letter-spacing:.12em;
font-size:12px; line-height:1;
padding:12px 28px;
transition:opacity .2s ease, transform .2s ease;
}
#project .btn-look-more.is-style-outline .wp-block-button__link{
border:1px solid #000 !important; background:#fff !important;
}
#project .btn-look-more .wp-block-button__link:hover{ opacity:.9; transform:translateY(-1px); }
/* ===== OVERVIEW: variables (with image URLs) ===== */
:root{
--ov-size: clamp(220px, 38vw, 520px);
--ov-gap: clamp(24px, 5vw, 80px);
/* 背景グラデ画像：ご指定のURLを適用（JS/他CSSからも参照可） */
--ov-grad-left: url('https://aquaignis-company.jp/wp-content/uploads/2025/10/left_noise-scaled.jpg');
--ov-grad-right: url('https://aquaignis-company.jp/wp-content/uploads/2025/10/right_noise-scaled.jpg');
--ov-grad-ops: var(--ov-grad-left);
--ov-grad-dev: var(--ov-grad-right);
--t-drop: 1.05s;
--t-split: .9s;
--t-reveal: .6s;
}
#overview.ov{ position: relative; }
.ov__head{ text-align:center; max-width: 880px; margin: 0 auto; }
.ov-stage{
position: relative;
min-height: 86vh;
display: grid;
place-items: center;
overflow: visible;
}
.ov-bubble{
width: var(--ov-size);
height: var(--ov-size);
border-radius: 50%;
position: absolute;
display: grid;
place-items: center;
color: #fff; text-align: center;
}
.ov-bubble__inner{
width: 82%;
transform: translateY(6px);
opacity: 0;
transition: opacity var(--t-reveal) ease, transform var(--t-reveal) ease;
}
.ov-bubble__h.jp{ font-weight: 800; letter-spacing: .04em; margin-bottom: .2em; }
.ov-bubble__en{ font-size: .92rem; opacity: .9; margin-bottom: .9em; }
.ov-bubble__list{ list-style: none; margin: 0 0 1.2em; padding: 0; line-height: 1.7; font-size: .92rem; }
.ov-bubble__cta{
appearance: none; border: none; background: transparent; color: #fff;
font-weight: 800; letter-spacing: .08em; cursor: pointer; position: relative;
}
.ov-bubble__cta::after{
content:""; position:absolute; left:50%; bottom:-3px; width: 42px; height: 2px;
transform: translateX(-50%); background: rgba(255,255,255,.9);
}
.ov-bubble__cta{ animation: ovBlink 1.2s steps(2, jump-none) infinite; }
@keyframes ovBlink { 50%{ opacity:.35 } }
/* Core bubble（最初に落ちてくるサークル） */
.ov-bubble--core{
background: center/cover no-repeat var(--ov-grad-left);
transform: translateY(-60vh) scale(.85);
opacity: 0;
will-change: transform, opacity;
}
.ov-stage.is-drop .ov-bubble--core{
animation: ovDrop var(--t-drop) cubic-bezier(.15,.85,.25,1) forwards;
}
@keyframes ovDrop{
0%{ transform: translateY(-60vh) scale(.85); opacity: 0; }
60%{ opacity: 1; }
100%{ transform: translateY(0) scale(1); opacity: 1; }
}
/* Left / Right bubbles（分裂して左右へ） */
.ov-bubble--left, .ov-bubble--right{
opacity: 0; transform: translateX(0) scale(.92);
pointer-events: none;
}
.ov-bubble--left{ background: center/cover no-repeat var(--ov-grad-left); }
.ov-bubble--right{ background: center/cover no-repeat var(--ov-grad-right); }
.ov-stage.is-split .ov-bubble--core{ opacity: 0; transform: scale(.86); }
.ov-stage.is-split .ov-bubble--left,
.ov-stage.is-split .ov-bubble--right{ opacity: 1; pointer-events: auto; }
.ov-stage.is-split .ov-bubble--left{
animation: ovSplitLeft var(--t-split) cubic-bezier(.2,.9,.2,1) forwards;
}
.ov-stage.is-split .ov-bubble--right{
animation: ovSplitRight var(--t-split) cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes ovSplitLeft{ 0%{ transform: translateX(0) scale(.92); } 100%{ transform: translateX(calc(-50% - var(--ov-gap)/2)) scale(1); } }
@keyframes ovSplitRight{ 0%{ transform: translateX(0) scale(.92); } 100%{ transform: translateX(calc(50% + var(--ov-gap)/2)) scale(1); } }
.ov-stage.is-reveal .ov-bubble__inner{ opacity: 1; transform: translateY(0); }
/* 旧・モーダル（ベース。最終オーバーライドで上書きされます） */
.ov-modal{
position: fixed; inset: 0; display: grid; place-items: center;
z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.ov-modal.is-open{ pointer-events: auto; opacity: 1; }
.ov-modal__bg{ position: absolute; inset: 0; background: rgba(10,14,20,.35); backdrop-filter: blur(6px); }
.ov-modal__body{
position: relative; width: min(1100px, 92vw); min-height: min(70vh, 820px);
padding: clamp(20px, 4vw, 48px); color: #fff; border-radius: 16px; overflow: hidden;
}
.ov-modal[data-ov-modal="ops"] .ov-modal__body{ background: center/cover no-repeat var(--ov-grad-ops); }
.ov-modal[data-ov-modal="dev"] .ov-modal__body{ background: center/cover no-repeat var(--ov-grad-dev); }
.ov-modal__title{ font-weight: 800; letter-spacing: .08em; margin: 0 0 .8em; font-size: clamp(22px, 2.4vw, 30px); }
.ov-modal__content{ line-height: 2; font-size: clamp(14px, 1.3vw, 16px); }
.ov-modal__close{
position: absolute; top: 10px; right: 14px; width: 40px; height: 40px;
background: rgba(0,0,0,.25); color: #fff; border: none; border-radius: 999px; cursor: pointer;
font-size: 22px; line-height: 40px;
}
@media (max-width: 780px){
.ov-stage{ min-height: 96vh; }
@keyframes ovSplitLeft{ 100%{ transform: translateX(calc(-46% - var(--ov-gap)/3)) scale(1); } }
@keyframes ovSplitRight{ 100%{ transform: translateX(calc(46% + var(--ov-gap)/3)) scale(1); } }
.ov-bubble__list{ font-size: .88rem; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce){
.ov-bubble--core, .ov-bubble--left, .ov-bubble--right, .ov-bubble__inner{ transition: none !important; animation: none !important; }
.ov-stage.is-drop .ov-bubble--core{ opacity: 1; transform: translateY(0) scale(1); }
.ov-stage.is-split .ov-bubble--left{ opacity:1; transform:none; }
.ov-stage.is-split .ov-bubble--right{ opacity:1; transform:none; }
.ov-stage.is-reveal .ov-bubble__inner{ opacity:1; transform:none; }
.ov-bubble__cta{ animation:none; }
}
/* =========================================================
10) OV modal: 最終オーバーライド
========================================================= */
/* UA/テーマ由来の余白を調整（モーダル時の下余白防止） */
html, body { margin: 0 !important; padding: 0 !important; }
/* === Overview Modal 背景（左右を個別に固定）=== */
.ov-modal[data-ov-modal] .ov-modal__bg{
position: fixed !important;
inset: 0 !important;
z-index: 0 !important;
background-image: url('https://aquaignis-company.jp/wp-content/uploads/2025/10/left_noise-scaled.jpg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
backdrop-filter: none !important;
}
/* 右：本文（縦センター） */
.ov-modal[data-ov-modal] .ov-modal__body{
grid-column: 2 / 3 !important;
grid-row: 1 / 2 !important;
z-index: 1 !important;
width: auto !important;
max-width: 760px !important;
min-height: 100vh !important;
padding: clamp(16px,3.3vw,48px) !important;
border-radius: 0 !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
}
.ov-modal[data-ov-modal] .ov-modal__content p{ margin: 0 0 .7em !important; line-height: 1.9 !important; }
/* 左：見出し（白文字のみ）— 右本文の上端に同期（--ov-top をJSで更新） */
.ov-modal[data-ov-modal] .ov-modal__headline{
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
z-index: 1 !important;
position: relative !important;
margin-top: var(--ov-top, clamp(48px,12vh,200px)) !important;
margin-left: var(--ov-head-left, clamp(16px,3.3vw,48px)) !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important; box-shadow: none !important; text-shadow: none !important;
color: #fff !important;
font-weight: 800 !important; letter-spacing: .06em !important; line-height: 1.35 !important;
font-size: clamp(22px, 2.6vw, 42px) !important;
}
.ov-modal[data-ov-modal] .ov-modal__headline::before,
.ov-modal[data-ov-modal] .ov-modal__headline::after{ content:none !important; display:none !important; }
/* ×ボタン */
.ov-modal[data-ov-modal] .ov-modal__close{
position: fixed !important;
top: clamp(12px,2.2vw,24px) !important;
right: clamp(12px,2.2vw,24px) !important;
z-index: 100000 !important;
background: transparent !important; border: 0 !important; box-shadow: none !important;
color:#fff !important; padding:6px !important; width:auto !important; height:auto !important;
font-size: clamp(40px,6vw,54px) !important; line-height:1 !important;
}
/* ===== SP（〜959px）：必ず 1 カラム（見出し → 本文） ===== */
@media (max-width: 959px){
.ov-modal[data-ov-modal]{
grid-template-columns: 1fr !important;
grid-template-rows: auto 1fr !important; /* 1=見出し / 2=本文 */
align-content: start !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* 背景はそのまま 1 枚全面（固定） */
.ov-modal[data-ov-modal] .ov-modal__bg{
position: fixed !important;
inset: 0 !important;
height: auto !important;
}
.ov-modal[data-ov-modal] .ov-modal__headline{
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
margin: clamp(16px, 6vw, 28px) clamp(16px, 6vw, 28px) clamp(12px, 3vw, 16px) !important;
font-size: clamp(18px, 6vw, 26px) !important;
}
.ov-modal[data-ov-modal] .ov-modal__body{
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important;
width: 100% !important;
max-width: none !important;
min-height: auto !important;
padding: 0 clamp(16px, 6vw, 28px) clamp(28px, 8vw, 44px) !important;
display: block !important; /* 縦センター解除 */
}
/* 変数オフセットはSPで使わない */
.ov-modal[data-ov-modal]{ --ov-top: 0px !important; }
/* ×ボタン（SP） */
.ov-modal[data-ov-modal] .ov-modal__close{
top: clamp(10px, 4vw, 16px) !important;
right: clamp(10px, 4vw, 16px) !important;
font-size: clamp(22px, 6vw, 30px) !important;
}
}
/* ===== PC: OVモーダル 見出しと本文の“上揃え”最終パッチ ===== */
@media (min-width: 960px){
/* 上端オフセット（JS が --ov-top を入れていればそれを優先） */
.ov-modal[data-ov-modal]{
--ov-top: var(--ov-top, clamp(24px, 6vw, 72px));
}
/* 右本文：縦センターを解除し、上余白を --ov-top に統一 */
.ov-modal[data-ov-modal] .ov-modal__body{
justify-content: flex-start !important; /* 中央揃え解除 */
padding-top: var(--ov-top) !important; /* 上端基準 */
}
/* 左見出し：本文と同じ上端にそろえる */
.ov-modal[data-ov-modal] .ov-modal__headline{
margin-top: var(--ov-top) !important; /* 本文と同値 */
}
}
/* =========================================
11) SP: カバー比率
- TOPビジュアル（.lp-hero-visual--top）だけ 4:5 の“少し縦長”
- その他のカバーは 1:1（正方形）
※ PCには影響なし
========================================= */
@media (max-width: 767px){
/* TOPだけ少し縦長 */
.lp-hero-visual.lp-hero-visual--top{
aspect-ratio: 9 / 16 !important;
}
/* それ以外のカバーは全部 1:1 */
.lp-hero-visual:not(.lp-hero-visual--top){
aspect-ratio: 1 / 1 !important;
}
}
/* =========================================================
12) スマホ開閉メニューを活かしつつロゴ＆中央寄せを制御
- ロゴ：画像ウィジェット(.spmenu-logo)を最上段・中央に固定
- メニュー：縦横センター
- 装飾：矢印/罫線/背景オフ、英字はGeomanist
========================================================= */
@media (max-width: 959px){
/* MENU見出しは常に非表示 */
#sp_menu .c-widget__title.-spmenu,
#sp_menu .p-spMenu__title,
#sp_menu .spmenu__title{ display:none !important; }
/* 全体レイアウト：メニューをど真ん中に */
#sp_menu .p-spMenu__inner,
#sp_menu .p-spMenu__body,
#sp_menu .spmenu__inner{
min-height: 100svh !important;
display: grid !important;
place-items: center !important; /* 縦横センター */
text-align: center !important;
gap: clamp(14px, 4vw, 24px) !important;
padding: clamp(64px, 12vw, 96px) 6vw 6vw !important; /* ← 上はロゴ分の余白を確保 */
}
/* ロゴ（画像ウィジェット）— 最上段・中央に“固定配置”して勝ち切る */
#sp_menu .widget_media_image.spmenu-logo{
position: fixed !important;
top: clamp(12px, 4vw, 24px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 100001 !important; /* SWELLより前面 */
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
pointer-events: none; /* 親はクリック無効にして… */
}
#sp_menu .widget_media_image.spmenu-logo a{
pointer-events: auto; /* …リンクだけ有効化 */
display: inline-block; line-height: 1; text-decoration: none !important;
}
#sp_menu .widget_media_image.spmenu-logo img{
display:block !important;
height: clamp(22px, 6vw, 30px) !important;
width: auto !important;
}
/* 既存メニューの装飾をオフ（矢印/罫線/背景など） */
#sp_menu li, #sp_menu li a,
#sp_menu .c-listMenu__item, #sp_menu .c-listMenu__item > a{
border:0 !important; background:transparent !important; box-shadow:none !important;
padding:0 !important; margin:0 !important; text-decoration:none !important;
}
#sp_menu li::before, #sp_menu li::after,
#sp_menu li > a::before, #sp_menu li > a::after,
#sp_menu .c-listMenu__item::before, #sp_menu .c-listMenu__item::after,
#sp_menu .c-listMenu__item > a::before, #sp_menu .c-listMenu__item > a::after{
content:none !important;
}
/* タイポグラフィ（英字＝Geomanist） */
#sp_menu nav a{
font-family:"Geomanist","Helvetica Neue",Arial,sans-serif !important;
font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.08em !important;
font-size: clamp(14px, 4.2vw, 20px) !important; line-height:1.3 !important; color:#111 !important;
}
/* ウィジェットの外枠も全部クリアに */
#sp_menu .c-widget.-spmenu,
#sp_menu .c-widget.-spmenu .c-widget__body,
#sp_menu .widget_media_image,
#sp_menu .widget_custom_html{
background:transparent !important; border:0 !important; box-shadow:none !important; margin:0 !important; padding:0 !important;
}
}
/* === SPメニュー：gridをやめてflexで中央寄せに固定（上書き） === */
@media (max-width: 959px){
#sp_menu .p-spMenu__inner,
#sp_menu .p-spMenu__body,
#sp_menu .spmenu__inner{
display: flex !important; /* ← gridから切り替え */
flex-direction: column !important;
justify-content: center !important; /* 縦センター */
align-items: center !important; /* 横センター */
row-gap: clamp(12px, 3.2vw, 18px) !important; /* gapの代わりにrow-gap */
gap: 0 !important; /* grid用gapは無効化 */
padding: clamp(56px, 10vw, 84px) 6vw 6vw !important; /* 上はロゴ分だけ */
}
/* UL側も保険で中央寄せ */
#sp_menu nav ul{
display:flex !important; flex-direction:column !important;
align-items:center !important; justify-content:center !important;
margin:0 !important; padding:0 !important;
row-gap: clamp(10px, 3vw, 16px) !important;
}
/* 最上要素の余計なmarginを無効 */
#sp_menu .p-spMenu__body > *:first-child{ margin-top:0 !important; }
}
/* === SPメニュー 微調整：ロゴ縮小 / ロゴとメニュー間の余白 / メニュー書体 === */
@media (max-width: 959px){
/* ロゴサイズとロゴ下の余白を変数で管理 */
#sp_menu{
--spLogoH: clamp(10px, 3vw, 12px); /* ← ロゴの高さ（小さめに） */
}
/* ロゴ（画像ウィジェット .spmenu-logo はこの高さに追従） */
#sp_menu .widget_media_image.spmenu-logo img{
height: var(--spLogoH) !important;
width: auto !important;
}
/* メニュー全体の上パディングを ロゴ高さ + 余白 分に */
#sp_menu .p-spMenu__inner,
#sp_menu .p-spMenu__body,
#sp_menu .spmenu__inner{
padding-top: calc(var(--spLogoH) + var(--spLogoGap)) !important;
}
/* メニュー行間（項目間の距離）も少しだけ広げる */
#sp_menu nav ul{ row-gap: clamp(14px, 4.2vw, 24px) !important; }
/* メニュー文字：Geomanist Medium（500）に差し替え */
#sp_menu nav a{
font-family: "Geomanist","Helvetica Neue",Arial,sans-serif !important;
font-weight: 500 !important; /* ← ここを Medium 相当へ */
letter-spacing: .06em !important; /* 少し詰める */
font-size: clamp(14px, 3vw, 18px) !important; /* 大きめに */
}
}
@media (max-width: 959px){
#sp_menu .as-copy{
margin-top: clamp(24px, 6vw, 40px) !important;
font-size: 8px !important;
line-height: 1 !important;
opacity: .75 !important;
text-align: center !important;
font-family: "Hiragino Sans","ヒラギノ角ゴシック","Noto Sans JP",sans-serif !important;
}
}
/* SPメニューのロゴだけ幅180pxに固定（強制） */
@media (max-width: 959px){
#sp_menu img.wp-image-292{
width: 180px !important;
height: auto !important;
display: block;
}
/* 余白が必要なら調整 */
#sp_menu .widget_media_image{
margin: 12px 0 16px;
}
}
/* === SP：NEWS / OUR PROJECT をフル幅表示に（画像を大きく） === */
@media (max-width: 600px){
/* NEWS：alignfullグループの“内側コンテナ”を画面端まで広げる */
.post_content .wp-block-group.alignfull.lp-news > .wp-block-group__inner-container,
.post_content .wp-block-group.alignfull.lp-news
> .wp-block-group__inner-container
> .wp-block-group.section-inner
> .wp-block-group__inner-container{
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* OUR PROJECT：見出し直下の器も同様にフル幅化 */
.post_content .lp-project .wp-block-group__inner-container{
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 各カード側で安全余白を確保 */
.post_content .lp-news .news-item,
.post_content .facility-card{
padding-left: 40px;
padding-right: 40px;
}
/* 1カラム間の縦の間隔は少しだけ詰める（任意） */
.post_content .lp-news .news-grid,
.post_content .facility-grid{
row-gap: 16px !important;
}
}
/* === SP：RECRUITボタンの崩れ修正（横並び・中央寄せに固定） === */
@media (max-width: 767px){
/* ボタンラッパーを中央寄せ＆1行 */
#recruit .wp-block-buttons{
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
margin: 0 !important;
}
/* 余計な幅・高さ指定を排除 */
#recruit .wp-block-button{
margin: 0 !important;
flex: 0 1 auto !important;
}
/* 本体：横書き/横幅自動/中央配置 */
#recruit .wp-block-button__link{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
writing-mode: horizontal-tb !important; /* 縦書き化の抑止 */
width: auto !important;
height: auto !important;
min-height: 44px !important;
min-width: 220px !important; /* 好みで 180–260px に調整可 */
padding: 14px 20px !important;
white-space: nowrap !important; /* 1行に */
line-height: 1 !important;
}
}
/* === SP：RECRUITボタンの右寄りを強制中央に補正 === */
@media (max-width: 767px){
#recruit .wp-block-buttons{
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* has-custom-width等が付ける auto マージンを無効化 */
#recruit .wp-block-buttons > .wp-block-button{
margin-left: 0 !important;
margin-right: 0 !important;
flex: 0 0 auto !important;
}
/* 念のためリンク要素側も中央寄せを固定 */
#recruit .wp-block-button__link{
margin: 0 auto !important;
}
}
/* === SP：RECRUITボタンの幅指定をリセットして真正中央に === */
@media (max-width: 767px){
/* 25% 等のカスタム幅クラスを無効化 */
#recruit .wp-block-buttons > .wp-block-button.has-custom-width,
#recruit .wp-block-buttons > .wp-block-button[class*="wp-block-button__width-"]{
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important; /* shrink/expandさせない */
}
/* 念のため、親は中央寄せ固定 */
#recruit .wp-block-buttons{
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
/* 本体リンクは自動幅＋中央 */
#recruit .wp-block-button__link{
margin: 0 auto !important;
width: auto !important;
min-width: 220px !important; /* 好みで 180–260px に調整可 */
white-space: nowrap !important;
}
}
/* === NEWS: SPは3件まで表示（4件目以降は隠す） === */
@media (max-width: 767px){
.post_content .lp-news .news-grid .news-item:nth-child(n+4){
display: none !important;
}
}
/* === LOOK MOREボタン（NEWS/PROJECTで共用できるように汎用化） === */
.btn-look-more .wp-block-button__link{
border:1px solid #000 !important;
background:#fff !important;
color:#000 !important;
box-shadow:none !important;
text-transform:uppercase;
letter-spacing:.12em;
font-size:12px; line-height:1;
padding:12px 28px;
transition:opacity .2s ease, transform .2s ease;
}
.btn-look-more .wp-block-button__link:hover{
opacity:.9; transform: translateY(-1px);
}
.news-actions{ display:flex; justify-content:center; margin-top:24px; }
/* === NEWS：LOOK MORE を強制表示（SWELL装飾の影響を排除） === */
.post_content .news-actions{
display:flex !important;
justify-content:center !important;
margin-top:24px !important;
}
.post_content .news-actions .wp-block-buttons{
display:flex !important;
gap:0 !important;
}
.post_content .news-actions .wp-block-button{
margin:0 !important;
flex:0 0 auto !important;
}
.post_content .news-actions .wp-block-button__link{
display:inline-block !important;
border:1px solid #000 !important;
background:#fff !important;
color:#000 !important;
text-decoration:none !important;
text-transform:uppercase;
letter-spacing:.12em;
font-size:12px; line-height:1;
padding:12px 28px !important;
box-shadow:none !important;
}
/* === NEWS：SPだけタイトルを読みやすく（PCは据え置き） === */
@media (max-width: 767px){
.post_content .lp-news .news-item-title{
font-size: clamp(12px, 4.2vw, 14px) !important;
line-height: 1.45 !important;
font-weight: 700 !important;
margin-top: .35em !important;
}
/* （任意）日付/カテゴリは少しだけ間隔を広げる */
.post_content .lp-news .news-meta{ gap: .7em !important; }
}
/* === NEWS / OUR PROJECT：グリッドとボタンの間を少し空ける === */
.post_content .lp-news .news-grid,
.post_content .facility-grid{
margin-bottom: clamp(20px, 3vw, 36px) !important;
}
/* ボタン行そのものの上マージン（見た目の間隔） */
.post_content .news-actions,
#project .projects-actions{
margin-top: clamp(20px, 3vw, 36px) !important;
display: flex !important;
justify-content: center !important;
}
/* === LOOK MORE（テキスト＋センター下線） === */
.btn-look-more .wp-block-button,
.btn-look-more .wp-block-buttons{ gap:0 !important; }
.btn-look-more .wp-block-button__link{
/* 見た目 */
background: transparent !important;
border: none !important;
color: #000 !important;
text-decoration: none !important;
/* 文字組 */
display: inline-block !important;
padding: 0 !important;
font-family: "Geomanist","Helvetica Neue",Arial,sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
line-height: 1 !important;
position: relative !important;
}
/* 下線（センター） */
.btn-look-more .wp-block-button__link::after{
content: "";
display: block;
width: 96px; /* 下線の長さ（お好みで 64–96px） */
height: 2px;
margin: 6px auto 0; /* テキストと線の間隔 */
background: #000;
opacity: .9;
transition: transform .2s ease, opacity .2s ease;
}
/* Hover */
.btn-look-more .wp-block-button__link:hover{
transform: translateY(-1px);
}
.btn-look-more .wp-block-button__link:hover::after{
opacity: 1;
}
/* SPは少しだけコンパクトに */
@media (max-width: 767px){
.btn-look-more .wp-block-button__link{
font-size: 13px !important;
letter-spacing: .1em !important;
}
.btn-look-more .wp-block-button__link::after{
width: 72px;
margin-top: 5px;
}
}
/* === LOOK MORE：（NEWS / PROJECT） === */
.post_content .news-actions .wp-block-button.is-style-outline,
#project .projects-actions .wp-block-button.is-style-outline{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* リンク側もボーダー/角丸/余白を0にする */
.post_content .news-actions .wp-block-button.is-style-outline .wp-block-button__link,
#project .projects-actions .wp-block-button.is-style-outline .wp-block-button__link{
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* SWELLの擬似要素装飾を無くす（自前の下線は link::after なので影響なし） */
.post_content .news-actions .wp-block-button.is-style-outline::before,
.post_content .news-actions .wp-block-button.is-style-outline::after,
#project .projects-actions .wp-block-button.is-style-outline::before,
#project .projects-actions .wp-block-button.is-style-outline::after{
content: none !important; display: none !important;
}
/* === LOOK MORE：（NEWS / PROJECT） === */
.post_content .news-actions .wp-block-button.is-style-outline,
#project .projects-actions .wp-block-button.is-style-outline{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* リンク側もボーダー/角丸/余白を0にする */
.post_content .news-actions .wp-block-button.is-style-outline .wp-block-button__link,
#project .projects-actions .wp-block-button.is-style-outline .wp-block-button__link{
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* SWELLの擬似要素装飾を無くす（自前の下線は link::after なので影響なし） */
.post_content .news-actions .wp-block-button.is-style-outline::before,
.post_content .news-actions .wp-block-button.is-style-outline::after,
#project .projects-actions .wp-block-button.is-style-outline::before,
#project .projects-actions .wp-block-button.is-style-outline::after{
content: none !important; display: none !important;
}
/* === OUR PROJECT：初期は一部だけ表示（PC=6 / SP=3） === */
.post_content .facility-grid.is-collapsed .facility-card:nth-child(n+7){
display:none !important; /* PC: 7枚目以降を隠す */
}
@media (max-width: 1024px){
.post_content .facility-grid.is-collapsed .facility-card:nth-child(n+4){
display:none !important; /* SP/タブ: 4枚目以降を隠す */
}
}
/* ボタン周りの余白（NEWSと統一） */
#project .projects-actions{
display:flex; justify-content:center;
margin-top: clamp(20px, 3vw, 36px) !important;
}
/* === PROJECT：LOOK MORE を完全リセット → テキスト＋下線に === */
#project .projects-actions{
display:flex !important; justify-content:center !important;
margin-top: clamp(20px, 3vw, 36px) !important;
}
/* SWELLのボタン装飾・縦書き・幅指定の残骸をリセット */
#project .projects-actions .wp-block-buttons,
#project .projects-actions .wp-block-button{
display:flex !important; justify-content:center !important; align-items:center !important;
gap:0 !important; width:auto !important; margin:0 !important; padding:0 !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
border-radius:0 !important;
}
#project .projects-actions .wp-block-button.has-custom-width,
#project .projects-actions .wp-block-button[class*="wp-block-button__width-"]{
width:auto !important; max-width:none !important; flex:0 0 auto !important;
margin:0 !important;
}
/* リンク本体：横書き・囲み無し・テキストのみ */
#project .projects-actions .wp-block-button__link{
writing-mode: horizontal-tb !important; /* ← 縦書きを修正 */
display:inline-block !important;
width:auto !important; height:auto !important;
margin:0 auto !important; padding:0 !important;
background:transparent !important; border:0 !important; border-radius:0 !important;
box-shadow:none !important; outline:0 !important;
font-family:"Geomanist","Helvetica Neue",Arial,sans-serif !important;
font-weight:700 !important; text-transform:uppercase !important;
letter-spacing:.12em !important; line-height:1 !important;
font-size:14px !important; color:#000 !important; text-decoration:none !important;
position:relative !important;
}
/* 下線（センター） */
#project .projects-actions .wp-block-button__link::after{
content:""; display:block; width:96px; height:2px;
margin:6px auto 0; background:#000; opacity:.9;
transition:transform .2s ease, opacity .2s ease;
}
#project .projects-actions .wp-block-button__link:hover{ transform:translateY(-1px); }
#project .projects-actions .wp-block-button__link:hover::after{ opacity:1; }
/* SPは少しコンパクトに */
@media (max-width: 767px){
#project .projects-actions .wp-block-button__link{ font-size:13px !important; letter-spacing:.1em !important; }
#project .projects-actions .wp-block-button__link::after{ width:72px; margin-top:5px; }
}
/* PROJECT: LOOK MORE を消す用のクラス（!importantで確実に勝つ） */
#project .projects-actions.is-hidden{
display: none !important;
}
/* SPだけ：会社概要(co_text)の文字を少し小さく＆詰める */
@media (max-width: 767px){
.post_content .co_text{
font-feature-settings: "palt" 1; /* 約物まわりを詰めて横幅節約（対応フォントのみ） */
font-kerning: normal;
}
.post_content .co_text p{
font-size: clamp(12px, 3.2vw, 13.5px); /* 430pxで≈13.8px / 375pxで≈12px */
line-height: 1.9; /* 可読性キープ */
letter-spacing: 0; /* 余計な広がりを抑える */
}
}
/* ===== 外側：フルブリード化（100vw） ===== */
#before_footer_widget{ background:#000 !important; }
#before_footer_widget > .l-container{
box-sizing:border-box !important;
max-width:none !important;
width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
padding-left:0 !important;
padding-right:0 !important;
}
/* ウィジェット枠の装飾を無効化（保険） */
#before_footer_widget .widget,
#before_footer_widget .widget_text,
#before_footer_widget .c-widget,
#before_footer_widget .c-widget__body,
#before_footer_widget .textwidget{
max-width:none !important;
width:100% !important;
margin:0 !important; padding:0 !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* SWELL純正フッターは非表示 */
footer#footer.l-footer{ display:none !important; }
/* ===== 変数（ここだけ触ればOK） ===== */
:root{
/* PC：上下余白／ロゴ↔メニュー行の間隔／左右“安全”余白 */
--ft-pc-pad-top: clamp(36px, 4vw, 72px);
--ft-pc-pad-bottom: clamp(36px, 4vw, 72px);
--ft-pc-gap: clamp(18px, 2.8vw, 40px);
--ft-pc-side: 30px; /* ←端ピタ。少し内側にしたければ 12px 等に */
/* SP：上下余白／メニュー↔ロゴの間隔／左右余白 */
--ft-sp-pad-top: clamp(32px, 7vw, 64px);
--ft-sp-pad-bottom: clamp(32px, 7vw, 64px);
--ft-sp-gap: clamp(20px, 6vw, 36px);
--ft-sp-side: 16px;
}
/* ===== 中身：共通 ===== */
.ftx{ color:#fff; }
.ftx a{ color:#fff; text-decoration:none; opacity:.95; }
.ftx a:hover{ opacity:1; }
.ftx__inner{
box-sizing:border-box !important;
width:100% !important; /* 100vw は外側で適用済み */
margin:0 auto !important;
padding-left:var(--ft-pc-side);
padding-right:var(--ft-pc-side);
padding-top:var(--ft-pc-pad-top);
padding-bottom:var(--ft-pc-pad-bottom);
}
/* ===== PC：ロゴ段→メニュー&コピー（同一行で左右端） ===== */
@media (min-width:960px){
.ftx__pc{
display:grid;
grid-template-columns:1fr auto; /* 左=メニュー(伸縮) / 右=コピー(内容幅) */
row-gap:var(--ft-pc-gap);
}
.ftx__logo{ grid-column:1 / 3; justify-self:start; display:block; height:20px; width:auto; }
.ftx__menu{
grid-column:1 / 2; align-self:center;
display:flex; flex-wrap:wrap; gap:0;
}
.ftx__menu a{
position:relative; padding:0 12px; line-height:1; font-size:13px; letter-spacing:.04em;
}
.ftx__menu a:first-child{ padding-left:0; }
.ftx__menu a + a::before{ content:"|"; position:absolute; left:-6px; top:0; opacity:.6; }
.ftx__copy{
grid-column:2 / 3; align-self:center; justify-self:end;
white-space:nowrap; font-size:12px; line-height:1; opacity:.9;
}
}
/* ===== SP：中央揃え（メニュー | 区切り → SVG） ===== */
.ftx__sp{ display:none; } /* PCでは非表示 */
@media (max-width:959px){
.ftx__inner{
padding-left:var(--ft-sp-side);
padding-right:var(--ft-sp-side);
padding-top:var(--ft-sp-pad-top);
padding-bottom:var(--ft-sp-pad-bottom);
}
.ftx__pc{ display:none; }
.ftx__sp{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:var(--ft-sp-gap);
}
.ftx__sp-menu{
display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0;
}
.ftx__sp-menu a{
position:relative; padding:0 10px; line-height:1.1; font-size:13px; letter-spacing:.04em;
}
.ftx__sp-menu a:first-child{ padding-left:0; }
.ftx__sp-menu a + a::before{ content:"|"; position:absolute; left:-2px; top:0; opacity:.6; }
.ftx__sp-mark{ width:min(560px, 86vw); height:auto; display:block; }
}
/* === SP専用：ロゴ高さ40px＆メニュー文字8px === */
@media (max-width: 959px){
.ftx__sp-mark{
height: 40px !important;
width: auto !important;
display: block !important;
}
.ftx__sp-menu a{
font-size: 10px !important;
line-height: 1.1 !important;
letter-spacing: .04em !important;
}
}
/* === PCヘッダー：SWELLの .c-gnav .ttl を10pxに固定 === */
@media (min-width: 960px){
/* タイトルspanを直指定（こいつが14pxを持ってる） */
#fix_header .c-gnav .ttl,
#header .c-gnav .ttl{
font-size: 10px !important;
line-height: 1 !important;
}
/* 念のため a にも同値を被せておく（テーマ差異の保険） */
#fix_header .c-gnav a,
#header .c-gnav a{
font-size: 10px !important;
}
/* 幅詰め（任意）：ULの隙間と左右パディングを少しだけ縮める */
#fix_header .c-gnav ul,
#header .c-gnav ul{
gap: 8px !important;
}
#fix_header .c-gnav ul > li > a,
#header .c-gnav ul > li > a{
padding-left: 6px !important;
padding-right: 6px !important;
}
}
@media (min-width: 960px){
.ov-modal{ align-items: first baseline !important; --ov-top:0px !important; }
.ov-modal__headline,
.ov-modal__body{
margin-top: 0 !important;
padding-top: 0 !important;
align-self: first baseline !important;
position: static !important;
}
.ov-modal__body{ justify-content: flex-start !important; }
.ov-modal__content > *:first-child{ margin-top: 0 !important; }
}
/* PC: 本文は縦センターのまま / 見出しだけ --ov-top に揃える */
@media (min-width: 960px){
.ov-modal[data-ov-modal] .ov-modal__body{
justify-content: center !important;
padding-top: 0 !important;
}
.ov-modal[data-ov-modal] .ov-modal__headline{
margin-top: var(--ov-top) !important;
}
}
/* PC: OVERVIEWモーダル本文は固定14px */
@media (min-width: 960px){
.ov-modal[data-ov-modal] .ov-modal__content,
.ov-modal[data-ov-modal] .ov-modal__content p,
.ov-modal[data-ov-modal] .ov-modal__content li{
font-size: 14px !important;
line-height: 1.9; /* お好みで 1.8–2.0 */
}
}
/* PCだけ
を有効化 */
.br-pc{ display:none; }
@media (min-width:960px){
.br-pc{ display:inline; }
}
/* 1) PC：本文カラムの“左だけ”パディングをゼロに（他は既存のまま） */
@media (min-width: 960px){
.ov-modal[data-ov-modal] .ov-modal__body{
padding-left: 0 !important; /* ← これだけ */
}
/* 念のため、内側に余白がいる場合の保険 */
.ov-modal[data-ov-modal] .ov-modal__content{
padding-left: 0 !important;
margin-left: 0 !important;
}
}
/* 2) 見出しが少し上に見える “視覚補正”（レイアウトには影響しない） */
@media (min-width: 960px){
.ov-modal__headline{
transform: translateY(-5px); /* 好みで -2〜-5px */
will-change: transform;
}
}
/* モーダル開閉中はヘッダーを無効化 */
body.ov-modal-open #fix_header,
body.ov-modal-open .l-header{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px);
}
/* （任意）SPメニューのオーバーレイも念のため無効化 */
body.ov-modal-open #sp_menu{ display:none !important; }
/* モーダルOPEN中：SPのヘッダー/ボタン類を完全に消す（強制） */
@media (max-width: 959px){
body.ov-modal-open #header,
body.ov-modal-open #fix_header,
body.ov-modal-open header.l-header,
body.ov-modal-open .l-header,
body.ov-modal-open .l-fixHeader,
body.ov-modal-open .l-fixHeader__inner,
body.ov-modal-open .p-spMenuBtn,
body.ov-modal-open .p-spMenu__btn,
body.ov-modal-open .spmenu__btn,
body.ov-modal-open .sp_menu_btn,
body.ov-modal-open .c-hamburger,
body.ov-modal-open .p-hamburger,
body.ov-modal-open .u-spMenuBtn,
body.ov-modal-open .c-iconBtn--menu{
display: none !important;
}
}
@media (max-width: 959px){
body.ov-modal-open #fix_header,
body.ov-modal-open #header,
body.ov-modal-open header.l-header,
body.ov-modal-open .l-header,
body.ov-modal-open .p-spMenuBtn,
body.ov-modal-open .c-hamburger {
display: none !important;
}
}
/* モーダルOPEN中はヘッダー完全無効（PC/SP両方） */
body.ov-open #header,
body.ov-open #fix_header,
body.ov-open .l-header {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-12px) !important;
}
/* SP：モーダル本文を段落連結（改行なし・インデントなし） */
@media (max-width: 959px){
.ov-modal__content{
line-height: 1.9;
white-space: normal;
}
.ov-modal__content p{
display: inline !important; /* 段落を横に連結 */
margin: 0 !important;
padding: 0 !important;
text-indent: 0 !important; /* インデント無し */
}
/* 段落間の見切れ防止に半角スペースを挿入（不要なら削除） */
.ov-modal__content p + p::before{
content: " ";
}
}
/* ===== SPモーダル：本文左右20px固定 ===== */
@media (max-width: 959px){
/* いったん body 側の左右パディング無効化（二重回避） */
.ov-modal.is-open .ov-modal__body{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 本文ブロックにだけ左右20px */
.ov-modal.is-open .ov-modal__content{
box-sizing: border-box !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
/* 段落のインデントや左右マージンの“念のため”掃除 */
.ov-modal.is-open .ov-modal__content > *{
margin-left: 0 !important;
margin-right: 0 !important;
text-indent: 0 !important;
}
/* ===== SP：モーダル見出しをミディアム（500）に ===== */
@media (max-width: 959px){
.ov-modal.is-open .ov-modal__headline{
font-weight: 500 !important; /* Hiragino系なら“W5”相当のトーンに */
}
/* ===== SP：モーダル見出し（サイズ少しUP） ===== */
@media (max-width: 959px){
.ov-modal.is-open .ov-modal__headline{
font-weight: 500 !important; /* 既に効いてるミディアムのまま */
font-size: clamp(20px, 4.8vw, 24px) !important; /* ← ちょい大きめ */
line-height: 1.25 !important;
}
}
/* ===== SP：見出しをさらに下げる ===== */
@media (max-width: 959px){
.ov-modal.is-open .ov-modal__headline{
margin-top: clamp(160px, 36vw, 280px) !important; /* ← もっと下へ */
}
}
/* ===== Overview：英字サブ見出し（Facility Operations / Real Estate Development） ===== */
/* PC/SP 共通：フォントスタック（Condensed Bold → なければ Geomanist Medium） */
#overview .ov-bubble__en{
font-family:
"Helvetica Neue Condensed Bold",
"HelveticaNeue-CondensedBold",
"HelveticaNeue-Condensed",
"Helvetica Neue",
Geomanist,
Helvetica, Arial, sans-serif !important;
font-weight: 600 !important; /* Condensed Boldがあれば太め、無ければGeomanist Medium寄り */
letter-spacing: .02em;
}
/* ===== SPのみ：サイズを小さく ===== */
@media (max-width: 959px){
/* 英字サブ見出し（Facility / Real Estate） */
#overview .ov-bubble__en{
font-size: clamp(11px, 3.2vw, 13px) !important;
}
/* “STATEMENT” ボタン文字 */
#overview .ov-bubble__cta{
font-size: clamp(11px, 3vw, 13px) !important;
letter-spacing: .08em;
}
}
/* ===== First View White Splash (0.5s wait → 0.6s fade) ===== */
#aq-fv-splash{
position: fixed;
inset: 0;
background: #fff;
z-index: 2147483647; /* 最前面 */
opacity: 1;
visibility: visible;
animation: aq-fv-splash-fade 0.6s ease 0.5s forwards;
/* パフォーマンス */
will-change: opacity, visibility;
}
/* モーション苦手なユーザー配慮：すぐ消す */
@media (prefers-reduced-motion: reduce){
#aq-fv-splash{
animation-duration: 0.01s;
animation-delay: 0s;
}
}
@keyframes aq-fv-splash-fade{
0% { opacity: 1; visibility: visible; }
99% { opacity: 0; }
100% { opacity: 0; visibility: hidden; }
}
/* #visual 内に“途中地点”アンカーを作るための下準備 */
#visual{ position:relative; } /* 相対基準を作る */
#visual #visual-mid{
position:absolute; left:0;
top:300px; /* ← ここを好みの距離に（上から何px） */
width:1px; height:1px; /* 見えない小さなターゲット */
pointer-events:none;
scroll-margin-top: 100px; /* 固定ヘッダーぶんの逃げ（調整可） */
}
/* SPだけ位置を変えたい場合の例 */
@media (max-width: 959px){
#visual #visual-mid{ top:180px; } /* 例：SPは180px地点へ */
}
/* === OVモーダル背景は“常に1枚”にする === */
#ov-modal.ov-modal .ov-modal__bg--right{ display:none !important; }
#ov-modal.ov-modal .ov-modal__bg--left{
grid-column: 1 / -1 !important; /* 2カラムを横断 */
grid-row: 1 / -1 !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* モーダル種別ごとに“1枚だけ”差し替え（ops=左画像／dev=右画像） */
#ov-modal.ov-modal[data-ov-modal="ops"] .ov-modal__bg--left{
background-image: url('https://aquaignis-company.jp/wp-content/uploads/2025/10/left_noise-scaled.jpg') !important;
}
#ov-modal.ov-modal[data-ov-modal="dev"] .ov-modal__bg--left{
background-image: url('https://aquaignis-company.jp/wp-content/uploads/2025/10/right_noise-scaled.jpg') !important;
}
/* ===== SP：Overview 高さの跳ね上がりを解消（計算値に固定）＋アニメ最終位置を同期 ===== */
@media (max-width: 959px){
/* 円2つ + 間のすき間（px相当） */
#overview{
--sp-gap: clamp(24px, 8vw, 48px); /* 上下の間隔 */
}
/* ステージは “直径×2 + すき間” だけ確保（vhは使わない） */
#overview .ov-stage{
min-height: calc(var(--ov-size) * 2 + var(--sp-gap)) !important;
/* 分裂位置用のオフセット（中心からの距離） */
--sp-offset: calc(var(--ov-size) / 2 + var(--sp-gap) / 2);
}
/* 横スプリットは無効 */
#overview .ov-stage.is-split .ov-bubble--left,
#overview .ov-stage.is-split .ov-bubble--right{
left: 50% !important;
top: 50% !important;
animation-name: none !important;
opacity: 1 !important;
}
/* コア退場（フェード縮小） */
@keyframes ovCoreFadeSP{
0% { opacity:1; transform: translate(-50%, -50%) scale(1); }
60% { opacity:.35; transform: translate(-50%, -50%) scale(.94); }
100% { opacity:0; transform: translate(-50%, -50%) scale(.90); }
}
#overview .ov-stage.is-split .ov-bubble--core{
animation: ovCoreFadeSP .75s cubic-bezier(.2,.9,.2,1) .06s forwards !important;
}
/* 上下へ分裂（最終位置は --sp-offset を使う＝上下の余白は常に一定） */
@keyframes ovSplitUpSP{
0% { opacity:0; transform: translate(-50%, -50%) scale(1); }
20% { opacity:.45; }
100% { opacity:1; transform: translate(-50%, calc(-50% - var(--sp-offset))) scale(1); }
}
@keyframes ovSplitDownSP{
0% { opacity:0; transform: translate(-50%, -50%) scale(1); }
20% { opacity:.45; }
100% { opacity:1; transform: translate(-50%, calc(-50% + var(--sp-offset))) scale(1); }
}
#overview .ov-stage.is-split .ov-bubble--left{
animation: ovSplitUpSP .8s cubic-bezier(.2,.9,.2,1) forwards !important;
}
#overview .ov-stage.is-split .ov-bubble--right{
animation: ovSplitDownSP .8s cubic-bezier(.2,.9,.2,1) forwards !important;
}
/* テキストのフェードインは据え置き */
#overview .ov-bubble__inner{
opacity:0; transform: translateY(6px);
transition: opacity .45s ease .1s, transform .45s ease .1s;
}
#overview .ov-stage.is-reveal .ov-bubble__inner{
opacity:1; transform: none;
}
}
/* 割れたら即テキスト表示＋速く */
#overview .ov-bubble__inner{
opacity: 0;
transform: translateY(4px);
transition: opacity .25s ease .04s, transform .25s ease .04s;
}
#overview .ov-stage.is-split .ov-bubble__inner{
opacity: 1;
transform: none;
}
/* SPだけ：割れ(左右スプリット)をゆっくりに */
@media (max-width: 959px){
:root{ --t-split: 1.4s; } /* 例: 0.9s → 1.4s に */
/* テキストの出現は短めにサッと */
#overview .ov-bubble__inner{
transition: opacity .28s ease, transform .28s ease;
}
}
/* テキストは is-reveal で出す（is-splitでは出さない） */
#overview .ov-bubble__inner{
opacity: 0; transform: translateY(4px);
}
#overview .ov-stage.is-reveal .ov-bubble__inner{
opacity: 1; transform: none;
}
/* SP：NEWSアーカイブのタイトルだけ左パディングを足す */
@media (max-width: 959px){
.post-type-archive-news h1.c-pageTitle .c-pageTitle__inner{
padding-left: 5px !important;
}
}
/* ===== OVERVIEW：小画面（~414px）だけ文字サイズ/行間を調整 ===== */
@media (max-width: 413px){
/* モーダル範囲に合わせてセレクタは両取り */
#qa-ovSplash, .ov-modal{ --ov-font-base: 11px; --ov-lh: 1.36; }
/* 本文テキスト */
#qa-ovSplash p,
.ov-modal p,
#qa-ovSplash li,
.ov-modal li{
font-size: var(--ov-font-base) !important; /* 既存より強めに */
line-height: var(--ov-lh) !important;
letter-spacing: .02em;
margin: 0 0 .6em;
}
/* 小見出し（必要なら調整） */
#qa-ovSplash h2, .ov-modal h2{
font-size: 13px !important;
line-height: 1.28 !important;
letter-spacing: .02em;
margin: 0 0 .5em;
}
#qa-ovSplash h3, .ov-modal h3{
font-size: 12px !important;
line-height: 1.3 !important;
margin: 0 0 .5em;
}
/* 余白を少しだけタイトに */
#qa-ovSplash > * , .ov-modal > * {
padding: 10px !important;
max-height: calc(100dvh - 24px) !important;
}
/* 閉じるボタンも指で押しやすく微拡大 */
.ov-close, .ov-modal__close, #qa-ovSplash .m-close{
transform: scale(1.1);
top: max(10px, env(safe-area-inset-top)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
}
}
/* 旧SE(320px)をさらに絞る場合は下を有効化
@media (max-width: 320px){
#qa-ovSplash, .ov-modal{ --ov-font-base: 12.5px; --ov-lh: 1.34; }
}
*/
/* ===== OVERVIEW 小画面(~414px) & モーダル表示中：見出しの上マージンを打ち消す ===== */
@media (max-width: 413px){
.ov-modal.is-open .ov-modal__headline,
.ov-modal.is-open #ov-modal-ops__title,
#qa-ovSplash.is-open .ov-modal__headline{
margin-top: 20px !important;
/* 念のため位置指定をリセットしたい場合は下を有効化 */
/* transform: none !important; */
}
}
/* ===== OVERVIEW 小画面(~375px)：本文フォントを少し小さく＆行間タイト ===== */
@media (max-width: 413px){
/* ベース値（必要なら数値だけ微調整） */
.ov-modal.is-open .ov-modal__body,
#qa-ovSplash.is-open .ov-modal__body{
--ov-body-fs: 11px;
--ov-body-lh: 1;
}
.ov-modal.is-open .ov-modal__body p,
.ov-modal.is-open .ov-modal__body li,
#qa-ovSplash.is-open .ov-modal__body p,
#qa-ovSplash.is-open .ov-modal__body li{
font-size: var(--ov-body-fs) !important;
line-height: var(--ov-body-lh) !important;
letter-spacing: 0em;
margin: 0 0 .58em;
}
}
/* ===== PCだけ：NEWS / OUR PROJECTS の画像グリッドを強制適用 ===== */
@media (min-width: 960px){
/* グリッド列数 & 余白（値は好みで：48px→36/40/56…） */
.post_content .facility-grid{
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
column-gap: 48px !important;
row-gap: 48px !important;
}
.post_content .news-grid{
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
column-gap: 48px !important;
row-gap: 48px !important;
}
/* サムネは16:9固定＋トリミング */
.facility-grid .wp-block-image,
.facility-grid figure,
.facility-grid .thumb,
.news-grid .news-thumb,
.news-grid figure,
.news-grid .wp-block-image{
aspect-ratio: 16/9 !important;
overflow: hidden !important;
}
.facility-grid img,
.news-grid img{
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
aspect-ratio: 16/9 !important;
}
}
/* ===== Overview モーダル：テキストSVGを重ねる（既存アニメ/JSは不干渉） ===== */
/* 1) SVGレイヤー：背景の上・×ボタンの下に固定表示 */
.ov-modal.ov--svg{
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important; /* 既存より少し強め */
}
.ov-modal.ov--svg .ov-modal__bg{
z-index: 0 !important; /* 背景（既存のまま） */
}
/* SVGは全面にフィット。クリックは背面へ通す（誤操作防止） */
.ov-modal.ov--svg .ov-modal__svg{
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important; /* 画像がクリックを奪わない */
display: block !important;
}
.ov-modal.ov--svg .ov-modal__svg img{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
max-width: none !important;
max-height: none !important;
}
/* 2) 既存テキストは“見た目だけ”消す（A11yは残す） */
.ov-modal.ov--svg .ov-modal__headline,
.ov-modal.ov--svg .ov-modal__body{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
/* 3) ×ボタンは常に最前面＆押しやすく */
.ov-modal.ov--svg .ov-modal__close{
position: absolute !important;
top: clamp(12px, 2.2vw, 24px) !important;
right: clamp(12px, 2.2vw, 24px) !important;
z-index: 2 !important; /* SVG(1) より上 */
background: transparent !important;
border: 0 !important;
color: #fff !important;
font-size: clamp(24px, 3.4vw, 36px) !important;
line-height: 1 !important;
width: 1.2em !important;
height: 1.2em !important;
text-shadow: 0 0 8px rgba(0,0,0,.35) !important;
cursor: pointer !important;
}
/* 4) SP/PC の切替は 側に任せるので追加メディアクエリ不要 */
/* === OVモーダル：PCだけ既存の position:static!important を打ち消して再度“視覚的に非表示”に === */
@media (min-width: 960px){
.ov-modal.ov--svg .ov-modal__headline,
.ov-modal.ov--svg .ov-modal__body{
position: absolute !important; /* ← 既存の static!important を上書き */
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
/* 念のため：SVG/JPGレイヤーが前に来るよう最終確認 */
.ov-modal.ov--svg .ov-modal__svg{
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
.ov-modal.ov--svg .ov-modal__close{ z-index: 2 !important; }
}
/* =========================
PC：.l-fixHeader を主役に（ロゴ＋ハンバーガー）
========================= */
@media (min-width: 960px){
/* 1) 通常ヘッダーはPCでは隠す */
.l-header{ display: none !important; }
/* 2) 追従ヘッダーを常時表示＆固定化 */
.l-fixHeader{
display: block !important;
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 9999;
background: transparent; /* ←色は次の手順で制御するので一旦透過 */
min-height: var(--header_h, 72px);
will-change: transform;
}
/* 3) 横幅と左右レイアウト */
.l-fixHeader .l-container{
max-width: 100% !important;
padding: 0 clamp(16px, 4vw, 48px);
}
.l-fixHeader .l-header__inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
}
/* 4) ロゴサイズ（必要なら --logo_size_pc を調整） */
.l-fixHeader .l-header__logo{ margin: 0; line-height: 1; }
.l-fixHeader .l-header__logo img{
height: var(--logo_size_pc, 28px) !important;
width: auto;
}
/* 5) PCの通常メニューは隠す→ハンバーガーだけ出す */
nav#gnav{ display: none !important; }
.l-fixHeader .l-header__menuBtn{
display: block !important;
}
.l-fixHeader .l-header__menuBtn,
.l-fixHeader .l-header__menuBtn button{
width: 48px; height: 48px;
}
/* 6) 本文がヘッダー下に潜らないよう上パディングを付与 */
body{ padding-top: var(--header_h, 72px); }
}
/* ===== OVモーダル（PCのみ）：画像(JPG)を最前面＆既存テキストを完全OFF ===== */
@media (min-width: 960px){
/* モーダル自体を最前面に固定（他スタックをねじ伏せ） */
.ov-modal.ov--svg{
position: fixed !important;
inset: 0 !important;
z-index: 2147483000 !important; /* 超最前面 */
}
/* 背景は最背面 */
.ov-modal.ov--svg .ov-modal__bg{
position: fixed !important;
inset: 0 !important;
z-index: 0 !important;
}
/* テキスト画像レイヤーを全面表示（背景の上、×の下） */
.ov-modal.ov--svg .ov-modal__svg{
position: fixed !important;
inset: 0 !important;
z-index: 2 !important;
pointer-events: none !important;
display: block !important;
opacity: 1 !important;
}
.ov-modal.ov--svg .ov-modal__svg img{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
max-width: none !important;
max-height: none !important;
}
/* ×ボタンは最前面 */
.ov-modal.ov--svg .ov-modal__close{
position: fixed !important;
top: clamp(12px, 2.2vw, 24px) !important;
right: clamp(12px, 2.2vw, 24px) !important;
z-index: 3 !important;
}
/* 既存の見出し/本文は“完全に非表示”（一旦A11yより確実表示を優先） */
.ov-modal.ov--svg .ov-modal__headline,
.ov-modal.ov--svg .ov-modal__body{
display: none !important;
}
}
/* ===== ヘッダー遅延フェード（SP/PC 共通） ===== */
/* ヘッダー本体のアニメ基礎（どちらのクラスでも効くように） */
.l-fixHeader,
.l-header{
transition: opacity 500ms ease, transform 500ms ease;
}
/* 統一版クラス：as-header-delay が に付いている間は隠す */
html.as-header-delay .l-fixHeader,
html.as-header-delay .l-header{
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
}
/* 互換：旧SPクラス sp-header-delay が残っても同じ挙動に */
html.sp-header-delay .l-fixHeader,
html.sp-header-delay .l-header{
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
}
/* ===== OVモーダル：画像重ねを“CSSだけ”で実現（フリーズ対策版） ===== */
/* 背景は最背面、SVG/JPGは中面、×は最前面。ポインターは貫通 */
.ov-modal.ov--svg .ov-modal__bg{
z-index: 0 !important;
}
/* 画像レイヤ：絶対配置（fixedは禁止）でフリーズ回避 */
.ov-modal.ov--svg .ov-modal__svg{
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important; /* 画像がクリックを奪わない */
display: block !important;
}
.ov-modal.ov--svg .ov-modal__svg img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* 既存テキストは“見た目だけ”消す（DOMは残す＝A11y維持） */
@media (min-width: 960px){ /* ←PCだけ非表示。SPはそのまま（SVGが前面） */
.ov-modal.ov--svg .ov-modal__headline,
.ov-modal.ov--svg .ov-modal__body{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* ×ボタンは常に最前面（押しやすさ維持） */
.ov-modal.ov--svg .ov-modal__close{
position: absolute !important; /* fixed は使わない */
top: clamp(12px, 2.2vw, 24px) !important;
right: clamp(12px, 2.2vw, 24px) !important;
z-index: 2 !important;
}
/* 念のため：モーダル本体はテーマ既定の位置付けに任せる */
.ov-modal.ov--svg{
z-index: 9999 !important; /* テーマより少し上にするだけ。positionは触らない */
}
/* ==== PCだけ：NEWS / OUR PROJECT のキャプションが消える問題を総リセット ==== */
@media (min-width: 960px){
/* 1) はみ出し隠し＆固定比率の影響を解除（figure/.wp-block-image） */
.post_content :is(.news-grid,.facility-grid) :is(figure,.wp-block-image){
overflow: visible !important;
aspect-ratio: auto !important;
height: auto !important;
}
/* 2) サムネ容器だけ 16:9 を維持（画像はここに収める） */
.post_content :is(.news-grid,.facility-grid) :is(.news-thumb,.facility-thumb){
aspect-ratio: 16/9 !important;
overflow: hidden !important;
position: relative !important;
}
.post_content :is(.news-grid,.facility-grid) :is(.news-thumb img,.facility-thumb__img,img){
width:100% !important; height:100% !important; object-fit:cover !important;
}
/* 3) キャプション要素を“普通のフロー”へ戻す（絶対配置/クリップ） */
.post_content :is(.news-grid,.facility-grid)
:is(figcaption,.news-meta,.news-date,.news-cat,.news-item-title,.facility-title,
.p-postList__title,.p-postList__meta,.p-postList__date){
display:block !important;
position: static !important;
inset: auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
opacity: 1 !important; visibility: visible !important;
clip: auto !important; clip-path: none !important; -webkit-line-clamp: unset !important; overflow: visible !important;
max-height: none !important; transform: none !important;
margin-top: .45em !important; color:#111 !important; z-index: 2 !important;
}
/* 4) カード自体がテキストを切らないように */
.post_content :is(.news-grid,.facility-grid) :is(.news-item,.facility-card,li,article,div){
overflow: visible !important;
}
/* 5) “画像だけ”に比率を掛け直す（既存16:9 を無効化） */
.facility-grid :is(.wp-block-image,figure),
.news-grid :is(.wp-block-image,figure){
aspect-ratio: auto !important;
overflow: visible !important;
}
}
/* ===== SP（～959px）ハンバーガー反転：フォントアイコン版 ===== */
@media (max-width:959px){
/* 親とに currentColor を供給 */
html[data-header-tone] .c-iconBtn,
html[data-header-tone] .c-iconBtn__icon{
color: var(--header-fg) !important;
}
/* 実体：