からそれらを解除して viewport基準に戻す。
※ .nav-mobile-panel のジオメトリは Pass 2 の意図設計を尊重し
上書きしない(ドロワー幅/高さ/translateX 等を破壊しない)。
============================================================ */
@media (max-width: 767.98px) {
#header,
#header.header,
header.header,
header#header {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: none !important;
transform: none !important;
perspective: none !important;
contain: none !important;
}
}
/* ============================================================
VBA自動付与: ヒーロークリアランス(safety net)
固定ヘッダーとヒーロー先頭テキストが重なる事故を防ぐため、
.hero / #hero に padding-top を強制適用
detected fixed header: yes
============================================================ */
@media (min-width: 768px) {
.hero,
#hero,
section.hero {
padding-top: 120px;
}
}
@media (max-width: 767.98px) {
.hero,
#hero,
section.hero {
padding-top: 80px;
}
}
/* ============================================================
VBA自動付与: ヒーローオーバーレイ + モバイル位置補正(safety net)
(1) Pexels写真背景の上にダークオーバーレイで文字可読性確保
(2) モバイルでは下寄せ解除 → 中央寄せ + 高さ抑制
============================================================ */
.hero,
#hero,
section.hero {
position: relative;
}
.hero::before,
#hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
z-index: 0;
pointer-events: none;
}
.hero > *,
#hero > * {
position: relative;
z-index: 1;
}
@media (max-width: 767.98px) {
.hero,
#hero,
section.hero {
min-height: 70vh !important;
max-height: 88vh !important;
align-items: center !important;
justify-content: center !important;
padding: 100px 20px 60px !important;
}
.hero .hero__inner,
#hero .hero__inner,
.hero .hero__catch,
#hero .hero__catch {
justify-content: center !important;
align-items: flex-start !important;
}
}
/* ============================================================
VBA自動付与: 横スクロール防止(safety net)
モバイルでヒーロー等が幅を超えても横スクロールしないよう封じる
============================================================ */
html, body {
overflow-x: hidden;
max-width: 100%;
}
.hero,
#hero,
section.hero,
.subpage-hero {
overflow-x: clip;
max-width: 100%;
}
/* ============================================================
VBA自動付与: Grid overflow防止(safety net)
grid-template-columns に % を使うと gap 分だけ overflow するため、
よくあるセレクタに対して fr ユニットで強制上書きする。
さらに grid 子要素に min-width: 0 で auto 押し広げを防ぐ。
============================================================ */
/* 代表挨拶: 画像40%/テキスト60% を fr で表現(% + gap の overflow 解消) */
.message-grid {
grid-template-columns: 2fr 3fr !important;
}
/* 2カラム系の grid 子要素は min-width: 0 で列押し広げ防止 */
.message-grid > *,
.two-col > *,
.grid-2col > *,
.about-grid > *,
.service-grid > *,
.split-grid > * {
min-width: 0 !important;
}
@media (min-width: 768px) {
/* タブレット以上で grid 全般の overflow を念押し */
.message-grid, .two-col, .grid-2col, .about-grid, .split-grid {
max-width: 100%;
overflow-x: clip;
}
}
/* ============================================================
VBA自動付与: 日本語改行品質向上v2(safety net)
方針:
- 本文段落 (p, li, dd 等) には text-wrap を指定しない
→ 行末まで詰めて自然改行(右側隙間防止)
- リード/導入文のみ text-wrap: pretty で1文字孤立行防止
- body に hanging-punctuation: allow-end last
- 見出しは text-wrap: balance(短文向け)
- word-break: auto-phrase / overflow-wrap: anywhere は禁止
============================================================ */
body {
hanging-punctuation: allow-end last;
}
/* 本文系: 禁則処理 + 単語折返しのみ(text-wrap は指定しない) */
body, p, li, dt, dd, figcaption, blockquote, td, th,
.about-text p, .message-text p, .block-text p, .intro-inner p,
.card-z p, .philosophy-card p, .contact-info-card p, .cta-banner p {
line-break: strict !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* リード/導入文のみ pretty 適用(短文向け・孤立行防止) */
.lead, .section-lead, .hero__lead, .footer-desc,
[class*="lead"], [class*="__lead"] {
text-wrap: pretty !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* 見出し: balance で短文の行バランス調整 */
h1, h2, h3, h4 {
text-wrap: balance !important;
line-break: strict !important;
word-break: normal !important;
}
a[href^="mailto:"],
a[href^="tel:"] {
word-break: keep-all !important;
white-space: nowrap !important;
}
/* ============================================================
VBA自動付与: モバイル2カラムタイトル中央寄せ(safety net)
PC版で2カラム(画像+テキスト)構成のセクションがモバイル縦積み
になるとき、画像は中央配置なのにタイトルだけ左寄せだと不自然。
eyebrow + h2/h3 + 装飾線のみ中央寄せ(本文 は左寄せ維持)
============================================================ */
@media (max-width: 767.98px) {
.about-text > .eyebrow,
.about-text > h2,
.about-text > h3,
.message-text > .eyebrow,
.message-text > h2,
.message-text > h3,
.service-text > .eyebrow,
.service-text > h2,
.service-text > h3,
.block-text > .eyebrow,
.block-text > h2,
.block-text > h3 {
text-align: center !important;
}
/* h2/h3 の ::after 装飾線も中央寄せ */
.about-text > h2::after,
.about-text > h3::after,
.message-text > h2::after,
.message-text > h3::after,
.service-text > h2::after,
.service-text > h3::after,
.block-text > h2::after,
.block-text > h3::after {
margin-left: auto !important;
margin-right: auto !important;
}
/* 末尾のボタン/リンクも中央配置(タイトル中央でボタン左の不整合防止) */
.about-text > .btn,
.about-text > a[class*="btn"],
.about-text > a.link-arrow,
.message-text > .btn,
.message-text > a[class*="btn"],
.message-text > a.link-arrow,
.service-text > .btn,
.service-text > a[class*="btn"],
.service-text > a.link-arrow,
.block-text > .btn,
.block-text > a[class*="btn"],
.block-text > a.link-arrow {
display: block !important;
width: fit-content !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ============================================================
VBA自動付与: モバイル端余白 20px 強制(safety net)
.container 系の左右 padding がモバイルで詰まって
本文が画面端に張り付く事故を防ぐ。
2026年版: 16px → 20px に増量(視覚的余白を確保)。
============================================================ */
@media (max-width: 767.98px) {
.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container-narrow,
[class*="container"] {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* ============================================================
VBA自動付与: フォーム入力枠サイズ強制(safety net)
- 高さ不足/iOS自動ズーム/select矢印重なりを根絶
- font-size 16px は iOS Safari ズーム防止のため必須
============================================================ */
.contact-form .form-control,
.contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.contact-form select,
.contact-form textarea,
form .form-control,
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
form select,
form textarea {
min-height: 52px !important;
padding: 14px 16px !important;
font-size: 16px !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
}
form textarea, .contact-form textarea {
min-height: 160px !important;
padding: 14px 16px !important;
}
form select, .contact-form select {
padding-right: 40px !important;
}