/* ==========================================================================
トップページ ヒーロー：配色トーン調整（デザインサンプル）
--------------------------------------------------------------------------
・読み込み先：header.php の「トップページ（is_front_page / is_home）」の条件内のみ
→ 他ページには一切読み込まれません。
・スクロール前だけに効かせるため、ヘッダー系はすべて
header.is-front:not(.scrollHeader) を起点にしています。
（スクロール後＝.scrollHeader のヘッダー／ロゴ／メニューには作用しません）
・既存の共通ロゴ画像（img/logos/logo2.png）やテーマCSSは変更していません。
ヒーロー専用ロゴ（白部分だけ白系に置換）は img/logos/logo2-hero-v12.png を背景として敷き、![]()
本体は非表示にします。
・元に戻す場合は header.php の 1行を外すだけで、変更前の見た目に戻ります。
■ 配色の考え方（v4：オレンジ味を抑えたウォームグレー／グレージュ系・白系はさらに控えめ）
背景に足す色（ウォームチャコール） HSL(34°, 14%, 22%) = #403930
→ 不透明度 24% の被せ色（.item 自体が opacity .85 のため実効は約 20%）。
赤みを抑え、彩度の低い「温かい墨色」程度に留める（v3 の #413225 / 30% は橙が強すぎた）
白系（インク） HSL(34°, 10%, 82%) = #D9D5CE メニュー・ハンバーガーはさらに 74% の不透明度
サブコピー用のくすみ白 HSL(34°, 8%, 70%) = #BAB5AC
ホバー色（淡いブランドグリーン） #7BC2A3 …… アクセントとしてロゴの緑を踏襲
■ ロゴ：白縁なし。位置・サイズはプロダクトレスキュー等の他ページ（スクロール前）と同一（高さ45px／スマホ47px、縮小・位置補正なし）。
プロダクトレスキューと同じ白黒反転仕様：黒→ヒーローのインク色 #D9D5CE（不透明度74%＝メニュー文字と同じ）、緑は元のロゴの緑（44,180,122）のまま
■ PC版のみ：キャッチコピー 30px→26px、英語サブキャッチはメニューと同じ Caveat 16px／400／字間0.8px
========================================================================== */
:root {
--oy-hero-ink: #D9D5CE;
--oy-hero-ink-rgb: 217, 213, 206;
--oy-hero-ink-sub: #BAB5AC;
--oy-hero-hover: #7BC2A3;
--oy-hero-tint-rgb: 64, 57, 48;
--oy-hero-tint-alpha: 0.24;
--oy-hero-title-size: 24px;
--oy-hero-title-weight: 500;
--oy-hero-title-ls: 0.04em;
--oy-hero-sub-size: 14px;
--oy-hero-sub-weight: 400;
--oy-hero-sub-ls: 0.06em;
}
/* --------------------------------------------------------------------------
1. ヒーロー背景：ごく薄い深緑の被せ色
画像・位置・サイズ・アニメーションには触れず、既存の暗色オーバーレイ群の最前面（文字より下）に1枚重ねるだけ
-------------------------------------------------------------------------- */
.banner-style01 .slider-fade1 .item::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(var(--oy-hero-tint-rgb), var(--oy-hero-tint-alpha));
pointer-events: none;
}
/* --------------------------------------------------------------------------
2. ヒーロー内：キャッチコピー／サブコピー
（メイン＞サブの強弱は維持：#F2F7F5 ＞ #CEDAD4）
-------------------------------------------------------------------------- */
.banner-style01 .slider-fade1 .item .main-title {
color: var(--oy-hero-ink) !important;
}
/* PC版のみ：キャッチコピー／サブキャッチの書体を、他ページ（プロダクトレスキュー等）の見出し・メニューと同じ
"Bricolage Grotesque", "Noto Sans JP" 系に統一。書体を変えると見た目の大きさが変わるため、サイズ・字間・太さは別途調整 */
@media screen and (min-width: 1065px) {
.banner-style01 .slider-fade1 .item .main-title {
font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif !important;
font-size: var(--oy-hero-title-size) !important;
font-weight: var(--oy-hero-title-weight) !important;
letter-spacing: var(--oy-hero-title-ls) !important;
}
.banner-style01 .slider-fade1 .item .main-title2 {
font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif !important;
font-size: var(--oy-hero-sub-size) !important;
font-weight: var(--oy-hero-sub-weight) !important;
letter-spacing: var(--oy-hero-sub-ls) !important;
}
/* ヘッダーメニュー（スクロール前のトップのみ）：他ページのヘッダーメニューと同じ書体・サイズ・太さ・字間
（他ページ実測：Bricolage Grotesque／16px／700／字間0.8px。Contact は字間0.5px）
※ .scrollHeader（スクロール後）には効かない */
header.is-front:not(.scrollHeader) .navbar-nav>li>a {
font-family: "Bricolage Grotesque", serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.8px;
/* 【横に伸びて見える原因】custom.css が、細い書体(Caveat)前提でトップだけ左右余白を 1.2rem(19.2px) に広げている。
他ページは 16px。太く幅広い Bricolage に変えたため余白が過大になり、メニュー間隔が広がって見えていた */
padding-left: 16px;
padding-right: 16px;
}
header.is-front:not(.scrollHeader) .attr-nav .btn-style1 span {
font-family: "Bricolage Grotesque", sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Contact ボタンも同様：トップだけ上下14px・左右39px（!important）だったものを、他ページと同じ 13px / 32px に */
header.is-front:not(.scrollHeader) .attr-nav .btn-style1 {
padding: 13px 32px !important;
transform: translateY(3.1px);
}
}
.banner-style01 .slider-fade1 .item .main-title2 {
color: var(--oy-hero-ink-sub);
}
/* --------------------------------------------------------------------------
3. ヘッダー（スクロール前のトップページのみ）：メニュー文字・Contact ボタン
-------------------------------------------------------------------------- */
header.is-front:not(.scrollHeader) .navbar-nav>li>a {
color: rgba(var(--oy-hero-ink-rgb), 0.74);
}
header.is-front:not(.scrollHeader) .navbar-nav li.active>a,
header.is-front:not(.scrollHeader) .navbar-nav li.current>a {
color: rgba(var(--oy-hero-ink-rgb), 0.74) !important;
}
header.is-front:not(.scrollHeader) .navbar>ul>li.current>a:after,
header.is-front:not(.scrollHeader) .navbar>ul>li.active>a:after {
border-color: transparent rgba(var(--oy-hero-ink-rgb), 0.74) rgba(var(--oy-hero-ink-rgb), 0.74) transparent !important;
}
/* ホバー：従来のティール #008081 は暗い背景上でコントラスト約1.8:1 と低いため、淡いブランドグリーンに */
header.is-front:not(.scrollHeader) .navbar-nav>li>a:hover,
header.is-front:not(.scrollHeader) .navbar-nav>li>a:focus-visible,
header.is-front:not(.scrollHeader) .navbar-nav li.active>a:hover,
header.is-front:not(.scrollHeader) .navbar-nav li.current>a:hover {
color: var(--oy-hero-hover) !important;
}
header.is-front:not(.scrollHeader) .attr-nav .btn-style1 {
border-color: rgba(var(--oy-hero-ink-rgb), 0.24);
}
header.is-front:not(.scrollHeader) .attr-nav .btn-style1 span {
color: rgba(var(--oy-hero-ink-rgb), 0.74);
}
header.is-front:not(.scrollHeader) .attr-nav .btn-style1:hover {
border-color: rgba(var(--oy-hero-ink-rgb), 0.4) !important;
box-shadow: inset 10em 0 0 0 rgba(var(--oy-hero-ink-rgb), 0.04), inset -10em 0 0 0 rgba(var(--oy-hero-ink-rgb), 0.04) !important;
}
/* --------------------------------------------------------------------------
4. ロゴ（スクロール前のトップページのみ）：色だけ置換（白縁なし・サイズ/位置は他ページと同一）
・同じ ![]()
のまま、背景に「色置換済みロゴ」を敷き、![]()
本来の画像は枠外へ逃がして非表示にする
→ 枠のサイズ・位置・バウンスアニメーション・スマホの 0.83 倍縮小は他ページのロゴとまったく同じ挙動
・黒（白黒反転で白に当たる部分）はヒーローのインク色、緑は元のロゴの緑のまま（画像内に焼き込み）
・テーマ共通の filter（brightness .85 / opacity .9）は、色を正確に出すためヒーロー専用ロゴに限って無効化
（プロダクトレスキューの塗り替え済みロゴと同じ扱い。スクロール後は従来どおり適用）
-------------------------------------------------------------------------- */
header.is-front:not(.scrollHeader) .navbar-header-custom .navbar-brand #logo {
background: url("../img/logos/logo2-hero-v12.png") center / 100% 100% no-repeat;
object-fit: none;
object-position: -9999px 0;
filter: none !important;
}
/* --------------------------------------------------------------------------
5. 言語切替カード（トップ最上位〜660pxまで）：白系の枠線・文字
-------------------------------------------------------------------------- */
body.is-front-top .bogo-language-switcher li {
border-color: rgba(var(--oy-hero-ink-rgb), 0.24) !important;
}
body.is-front-top .bogo-language-switcher li:hover,
body.is-front-top .bogo-language-switcher li:active {
background-color: rgba(var(--oy-hero-ink-rgb), 0.09) !important;
background: rgba(var(--oy-hero-ink-rgb), 0.09) !important;
}
body.is-front-top .bogo-language-switcher a,
body.is-front-top .bogo-language-switcher .bogo-language-name,
body.is-front-top .bogo-language-switcher li:hover a,
body.is-front-top .bogo-language-switcher li:active a,
body.is-front-top .bogo-language-switcher li:hover .bogo-language-name,
body.is-front-top .bogo-language-switcher li:active .bogo-language-name {
color: rgba(var(--oy-hero-ink-rgb), 0.55) !important;
}
/* --------------------------------------------------------------------------
6. スマホ版（1064px以下）
-------------------------------------------------------------------------- */
@media screen and (max-width: 1064px) {
/* 言語切替カードの文字：従来のグレー rgba(160,160,160,.97) を同じ明るさのまま緑寄りに */
body.is-front-top .bogo-language-switcher a,
body.is-front-top .bogo-language-switcher .bogo-language-name,
body.is-front-top .bogo-language-switcher li:hover a,
body.is-front-top .bogo-language-switcher li:active a,
body.is-front-top .bogo-language-switcher li:hover .bogo-language-name,
body.is-front-top .bogo-language-switcher li:active .bogo-language-name {
color: rgba(150, 145, 138, 0.97) !important;
}
/* ハンバーガー（閉じているときだけ。開いた × はメニュー側の既存スタイルのまま）
形・太さ・位置は変えず、線の色だけを白系に */
header.is-front:not(.scrollHeader) .navbar-toggler:not(.menu-opened):after {
border-top-color: rgba(var(--oy-hero-ink-rgb), 0.74) !important;
border-bottom-color: rgba(var(--oy-hero-ink-rgb), 0.74) !important;
}
header.is-front:not(.scrollHeader) .navbar-toggler:not(.menu-opened):before {
border-top-color: rgba(var(--oy-hero-ink-rgb), 0.74) !important;
}
}