/* ==========================================================================
   トップページ ヒーロー：配色トーン調整（デザインサンプル）
   --------------------------------------------------------------------------
   ・読み込み先：header.php の「トップページ（is_front_page / is_home）」の条件内のみ
     → 他ページには一切読み込まれません。
   ・スクロール前だけに効かせるため、ヘッダー系はすべて
     header.is-front:not(.scrollHeader) を起点にしています。
     （スクロール後＝.scrollHeader のヘッダー／ロゴ／メニューには作用しません）
   ・既存の共通ロゴ画像（img/logos/logo2.png）やテーマCSSは変更していません。
     ヒーロー専用ロゴ（白部分だけ白系に置換）は img/logos/logo2-hero-v38.png（スマホ・タブレット幅は v39）を背景として敷き、<img>本体は非表示にします。
   ・元に戻す場合は header.php の <link> 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 …… アクセントとしてロゴの緑を踏襲
   ■ ロゴ：白縁なし。PC版：位置・サイズはプロダクトレスキュー等の他ページ（スクロール前）と同一（高さ45px）。スマホ版：大きさ・位置・ヘッダー高さ(52px)も Pricing Examples 等と同じ。
     プロダクトレスキューと同じ白黒反転仕様：黒→ヒーローのインク色 #D9D5CE（不透明度74%＝メニュー文字と同じ）、緑は元のロゴの緑（44,180,122）のまま
   ■ PC版のみ：キャッチコピー／サブキャッチはメニューと同じ Bricolage Grotesque。サイズはキャッチコピーがプロダクトレスキューのページタイトル（clamp(32px,4.2vw,52px)）と同じ、サブキャッチはヘッダーメニューと同じ16px
   ========================================================================== */

:root {
    --oy-hero-ink: #FDFCFA;         /* 未使用（タブレットのキャッチは PC と同じ --oy-hero-ink-sub） */
    --oy-hero-ink-rgb: 243, 240, 236; /* 枠線・言語カード。メニュー・Contact の文字は --oy-hero-menu-rgb */
    --oy-hero-ink-sub: #F7F5F1;     /* キャッチ・サブキャッチ（PC・タブレット）。スマホ（500px以下）は --oy-hero-ink-alpha-sp */
    --oy-hero-ink-alpha-sp: 0.97;   /* スマホ（500px以下）のキャッチ・サブキャッチ：白の不透明度。ハンバーガーは別指定（白の 96%） */
    --oy-hero-menu-rgb: 252, 250, 246; /* PCメニュー・Contact の文字。ハンバーガーはスマホのキャッチと同じ白 */
    --oy-hero-menu-alpha: 0.93;     /* 同・不透明度（0.88 → 0.93） */
    --oy-hero-hover: #7BC2A3;
    --oy-hero-tint-rgb: 64, 57, 48;
    --oy-hero-tint-alpha: 0.24;
    --oy-hero-title-size: clamp(30px, 3.9vw, 48px);  /* PC：以前は clamp(32px, 4.2vw, 52px)＝プロダクトレスキューのページタイトル（.pr-top__title）と同じ指定。少しだけ小さく（1920px幅で 52px → 48px） */
    --oy-hero-title-weight: 500;
    --oy-hero-title-up: 7px;      /* PC：キャッチだけを上へ戻す量（サブキャッチは動かさない） */
    --oy-hero-sub-drop: -3px;   /* PC：サブキャッチの縦位置の微調整（＋で下へ／−で上へ）。-3px＝キャッチとの間隔がちょうど良かった元の位置 */
    --oy-hero-text-shift: 26px;   /* PC：キャッチ＋サブキャッチを元の位置から下げる量（当初20px。32pxは下げ過ぎだったため26px）。ヒーローの縦幅は不変 */
    --oy-hero-title-ls: 0.08em;   /* palt（かな・句読点の全角の余白を詰める）と組み合わせ、字間を均一に。palt なし・0.04em では「。」の後ろだけ大きく空いていた */
    --oy-hero-sub-size: 18px;  /* PC：サブキャッチの文字サイズ。ヘッダーメニュー(16px)より少し大きく、キャッチ(52px)との釣り合いを取った値 */
    --oy-hero-sub-weight: 700;   /* PC：試し。ヘッダーメニューと同じ太さ（以前は400） */
    --oy-hero-sub-ls: 0.06em;
    --oy-hero-logo-scale-sp: 0.5745; /* スマホ：会社ロゴの大きさ（元のロゴ画像に対する倍率）。メニューを開いたときのロゴ（高さ27px・幅111.1px）と同じ大きさになる倍率 */
    --oy-hero-logo-cx: 55.55px; /* 縮小後の幅111.1pxの半分。跳ねの回転中心を、PC版と同じロゴ中央にするための移動量 */
    --oy-hero-logo-shift-x-sp: 0px;  /* スマホ：会社ロゴの左右位置。メニューを開いたときのロゴと同じ左端16px（ブランドの基準位置 -2px からの移動量） */
    --oy-hero-logo-shift-y-sp: 4.5px; /* スマホ：会社ロゴの上下位置。メニューを開いたときのロゴの縦中心（上から32px）に合わせた移動量 */
    --oy-hero-ham-top-sp: 14px;   /* スマホ：ハンバーガーのボタン位置（上）。メニューを開いたときの×の中心（上32px・右36px）にハンバーガーの中心を合わせる */
    --oy-hero-ham-right-sp: 9px;  /* スマホ：ハンバーガーのボタン位置（右） */
    --oy-hero-border-alpha: 0.38; /* Contactボタンと言語選択カードの枠線の濃さ（選択中・未選択・Contact で共通） */
    --oy-hero-blob-alpha: 0.8;   /* 丸いあしらい全体の濃さ（ProductRescue等は0.55）。0で無し */
    --oy-hero-blob-warm: 226, 188, 140;  /* 3つの円すべての色（被せ色の暖かいブラウンに馴染む、くすんだサンド〜アプリコット系） */
    --oy-hero-blob-m: 40px;      /* あしらい領域を広げる余白（円を動かす量 最大22px より大きく）。円の見える位置は変わらない */
    --oy-hero-blob-a: 420px;     /* A・Bの半径（PCの大きさ。スマホは下で小さく） */
    --oy-hero-blob-c: 280px;     /* Cの半径 */
    --oy-hero-hover-bg-alpha: 0.16;        /* 言語選択カード（ホバー・選択中）とContactボタン（ホバー）の背景の濃さ。以前は0.09 */
    --oy-hero-hover-bg-layer: 0.0835;      /* Contactボタンは2枚重ね（左右から）の影で塗るため、重なった結果が上の値になる1枚あたりの濃さ（= 1 - √(1 - 0.16)）。上を変えたらここも合わせる */
    --oy-hero-border-alpha-hover: 0.38; /* 選択中・ホバー時の枠線。通常時と同じ濃さ */
    --oy-hero-border-w: 1.5px;  /* PC：Contactボタンと言語選択カードの枠線の太さ（元の太さ＝1px。大きくするとその分だけ太くなる）。実際の描画は画面の解像度により物理ピクセル単位に丸められる（拡大率175%で2物理ピクセル） */
}

/* --------------------------------------------------------------------------
   0. キャッチコピー文言の差し替え
      PC・タブレットは home-jp.php / home-en.php の本文を変更済み。
      500px以下は custom.css が CSS の content で旧文言を3行に分けて描画しているため、同じセレクタで文言だけ上書きする
      （書体・サイズ・色などの指定は custom.css のまま）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 500px) {
    .banner-style01 .main-title::before {
        content: "つくる。\A仕上げる。\Aその先へ。";
    }

    .banner-style01 .main-title2::before {
        content: "From Creation\Ato Completion\00000aand Beyond.";  /* 「\A」の直後が a〜f の文字だと16進数の続きとして読まれてしまうため、改行だけ6桁で指定している */
    }

    /* スマホ（500px以下）の書体・サイズを、プロダクトレスキューのスマホ表示に合わせる
       ・キャッチコピー ＝ ページタイトル（.pr-top__title）と同じ書体 Bricolage Grotesque + Noto Sans JP／太さ800（サイズは34px、行間1.4・字間.02emにデザイン調整）
       ・サブキャッチ   ＝ ページタイトル下の説明（.pr-top__lead）と同じ書体 Bricolage Grotesque + Noto Sans JP／太さ500（サイズは14px、行間1.85・字間.07emにデザイン調整）
       色・位置・影は custom.css のまま（改行は、キャッチコピー・サブキャッチとも3行（上の content で指定）） */
    /* スマホ：キャッチ・サブキャッチを、コンテナごと左へ4px寄せる（12px → 8px。折り返し・行数・縦位置は動かない） */
    .banner-style01 .slider-fade1 .item .container {
        left: 8px !important;
    }

    .banner-style01 .main-title::before {
        font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif !important;
        font-size: 34px !important;       /* 画面幅に対して左寄せ3行が小さく見えないよう、プロダクトレスキュー（36px）に近づけた大きさ */
        font-weight: 800 !important;
        line-height: 1.4 !important;      /* 太い大きな文字を3行で締まって見せる（プロダクトレスキューは1.5） */
        letter-spacing: 0.02em !important; /* 太字800の詰まりを少し開ける程度。サイズが上がった分、字間は控えめに */
    }

    /* スマホ：サブキャッチの左端を、見た目の錯覚（キャッチとの文字サイズの差で、左へ寄り過ぎて見える）の補正として、4pxだけ右へ（2px→さらに2px）。
       相対配置の見た目だけのずらしなので、キャッチ・サブキャッチの行の折り返し・高さ・他の要素の位置は動かない */
    .banner-style01 .slider-fade1 .item .main-title2 {
        position: relative;
        left: 4px;
    }

    .banner-style01 .main-title2::before {
        font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif !important;
        font-size: 14px !important;       /* キャッチ34pxに対して約0.41倍。主従がはっきりする大きさ */
        font-weight: 500 !important;
        font-style: normal !important;
        line-height: 2.2 !important;      /* 3行が1かたまりに見え、かつ窮屈にならない行間（1.85 → 1.95 → 2.05 → 2.1 → 2.2 と少しずつ広げた） */
        letter-spacing: 0.07em !important; /* 小さい英字は少し広めの字間が読みやすく上品 */
    }
}

/* --------------------------------------------------------------------------
   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-sub) !important; /* タブレットも PC と同じ色。PC幅は下の指定で同じ変数を再指定している */
}

/* PC版：キャッチコピーとサブキャッチ（文字ブロックごと）を少し下へ。
   文字ブロックは絶対配置のため、ずらしてもヒーローの高さ・背景・他の要素の位置は変わらない */
@media screen and (min-width: 1065px) {
    .banner-style01 .slider-fade1 .item .container {
        margin-top: var(--oy-hero-text-shift, 20px);
    }
}

/* 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;
        color: var(--oy-hero-ink-sub) !important;  /* 試し：サブキャッチと同じ色（#BAB5AC） */
        position: relative;
        top: calc(var(--oy-hero-title-up) * -1);   /* 見た目だけ上へ。相対配置なのでサブキャッチの位置は動かない */
        font-feature-settings: "palt" 1;   /* 「。」の右側の空きなど、全角の余白を詰めて字間を整える */
    }

    .banner-style01 .slider-fade1 .item .main-title2 {
        font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif !important;
        position: relative;
        top: var(--oy-hero-sub-drop);   /* 見た目だけ下へ（相対配置なのでブロックの高さ・キャッチ・ヒーローの高さは動かない） */
        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-menu-rgb), var(--oy-hero-menu-alpha));
}

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-menu-rgb), var(--oy-hero-menu-alpha)) !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), var(--oy-hero-border-alpha));
}

header.is-front:not(.scrollHeader) .attr-nav .btn-style1 span {
    color: rgba(var(--oy-hero-menu-rgb), var(--oy-hero-menu-alpha));
}

header.is-front:not(.scrollHeader) .attr-nav .btn-style1:hover {
    border-color: rgba(var(--oy-hero-ink-rgb), var(--oy-hero-border-alpha-hover)) !important;   /* 言語選択カードのホバー時と同じ */
    background-color: rgba(var(--oy-hero-ink-rgb), var(--oy-hero-hover-bg-alpha));   /* 塗りつぶし。言語選択カードのホバー・選択中と同じ濃さ */
}

/* --------------------------------------------------------------------------
   4. ロゴ（スクロール前のトップページのみ）：色だけ置換（白縁なし・サイズ/位置は他ページと同一）
      ・同じ <img id="logo"> のまま、背景に「色置換済みロゴ」を敷き、<img> 本来の画像は枠外へ逃がして非表示にする
        → 枠のサイズ・位置・バウンスアニメーション・スマホの 0.83 倍縮小は他ページのロゴとまったく同じ挙動
      ・黒（白黒反転で白に当たる部分）はヒーローのインク色、緑は元のロゴの緑のまま（画像内に焼き込み）
      ・テーマ共通の filter（brightness .85 / opacity .9）は、色を正確に出すためヒーロー専用ロゴに限って無効化
        （プロダクトレスキューの塗り替え済みロゴと同じ扱い。スクロール後は従来どおり適用）
   -------------------------------------------------------------------------- */
header.is-front:not(.scrollHeader) .navbar-header-custom .navbar-brand #logo {
    background: url("../img/logos/logo2-hero-v38.png") center / 100% 100% no-repeat;
    object-fit: none;
    object-position: -9999px 0;
    filter: none !important;
}

/* スマホ（〜1064px）：ヘッダー内のロゴ／ハンバーガーのサイズ・位置を、Pricing Examples・プロダクトレスキュー等の他ページ（スクロール前）と同じにする
   ・他ページ（inc/archive-shell.php）が使っている余白・位置の値をそのまま使用 → ヘッダーの高さも他ページと同じ 52px になる
   ・ロゴは --oy-hero-logo-scale-sp 倍（縮小の基準は左端・縦中央）。メニューを開いたときのロゴと同じ大きさ・位置。バウンスのアニメーションも同じ動き
   ・ハンバーガーは下の「ハンバーガー」の項（ボタン 40×36px、右 4px、上 7px） */
@media screen and (max-width: 1064px) {
    header.is-front:not(.scrollHeader) .navbar-default .container-fluid {
        padding-left: 1rem !important;
        padding-right: 0.85rem !important;
    }

    header.is-front:not(.scrollHeader) .navbar-header-custom {
        padding-top: 3px !important;
    }

    header.is-front:not(.scrollHeader) .navbar-header-custom .navbar-brand {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        transform: translate(var(--oy-hero-logo-shift-x-sp), var(--oy-hero-logo-shift-y-sp)) !important;
    }

    header.is-front:not(.scrollHeader) .navbar-header-custom .navbar-brand #logo {
        transform-origin: left center !important;
        /* 1064px以下：ロゴの緑はオリーブ #8AAC7C。白い部分はスマホのキャッチと同じ白で、不透明度だけ 94%（キャッチの 97% より 3% 透明）。PC は v38（#F7F5F1 の 97%） */
        background-image: url("../img/logos/logo2-hero-v39.png");
    }

    header.is-front:not(.scrollHeader) .navbar-header-custom .navbar-brand #logo:not(.logo-float) {
        transform: scale(var(--oy-hero-logo-scale-sp)) !important;
    }

    @keyframes oy-hero-float-mobile {
        /* 移動量・傾きは PC の @keyframes float と同じ。scale は右端（最初に適用）にして縮小が移動量を縮めない。
           translateX の往復で、左端基準の縮小のまま回転中心だけロゴ中央にする。静止時は scale だけが残る */
        0%, 85% { transform: translateY(0) translateX(var(--oy-hero-logo-cx)) rotate(0deg) translateX(calc(var(--oy-hero-logo-cx) * -1)) scale(var(--oy-hero-logo-scale-sp)); }
        87% { transform: translateY(2px) translateX(var(--oy-hero-logo-cx)) rotate(1deg) translateX(calc(var(--oy-hero-logo-cx) * -1)) scale(var(--oy-hero-logo-scale-sp)); }
        90% { transform: translateY(-8px) translateX(var(--oy-hero-logo-cx)) rotate(-5deg) translateX(calc(var(--oy-hero-logo-cx) * -1)) scale(var(--oy-hero-logo-scale-sp)); }
        93% { transform: translateY(-4px) translateX(var(--oy-hero-logo-cx)) rotate(2deg) translateX(calc(var(--oy-hero-logo-cx) * -1)) scale(var(--oy-hero-logo-scale-sp)); }
        96% { transform: translateY(1px) translateX(var(--oy-hero-logo-cx)) rotate(-0.5deg) translateX(calc(var(--oy-hero-logo-cx) * -1)) scale(var(--oy-hero-logo-scale-sp)); }
        100% { transform: translateY(0) translateX(var(--oy-hero-logo-cx)) rotate(0deg) translateX(calc(var(--oy-hero-logo-cx) * -1)) scale(var(--oy-hero-logo-scale-sp)); }
    }

    header.is-front:not(.scrollHeader) .navbar-header-custom .navbar-brand #logo.logo-float {
        animation: oy-hero-float-mobile 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite !important;
    }
}

/* --------------------------------------------------------------------------
   5. 言語切替カード（トップ最上位〜660pxまで）：白系の枠線・文字
   -------------------------------------------------------------------------- */
body.is-front-top .bogo-language-switcher li {
    border-color: rgba(var(--oy-hero-ink-rgb), var(--oy-hero-border-alpha)) !important;
}

/* ホバー時（:hover/:active）と、現在選択中の言語（li.current）は同じ配色：薄い背景＋ホバー時の枠線。PC・スマホ共通 */
body.is-front-top .bogo-language-switcher li:hover,
body.is-front-top .bogo-language-switcher li:active,
body.is-front-top .bogo-language-switcher li.current {
    border-color: rgba(var(--oy-hero-ink-rgb), var(--oy-hero-border-alpha-hover)) !important;   /* Contactボタンのホバー時と同じ */
    background-color: rgba(var(--oy-hero-ink-rgb), var(--oy-hero-hover-bg-alpha)) !important;
    background: rgba(var(--oy-hero-ink-rgb), var(--oy-hero-hover-bg-alpha)) !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.74) !important;   /* ヘッダーメニューの文字・枠線と同じ74% */
}

/* 選択中の文字だけ、その画面のキャッチと同じ色（PC・タブレットは #F7F5F1、スマホは白の 97%）。未選択は上のまま */
body.is-front-top .bogo-language-switcher li.current a,
body.is-front-top .bogo-language-switcher li.current .bogo-language-name,
body.is-front-top .bogo-language-switcher li.current a.current {
    color: var(--oy-hero-ink-sub) !important;
}

@media screen and (max-width: 500px) {
    body.is-front-top .bogo-language-switcher li.current a,
    body.is-front-top .bogo-language-switcher li.current .bogo-language-name,
    body.is-front-top .bogo-language-switcher li.current a.current {
        color: rgba(255, 255, 255, var(--oy-hero-ink-alpha-sp)) !important;
    }
}

/* スクロール後（body.is-front-top が外れた状態）の言語カードと、スクロール後ヘッダーのContactボタン。
   形・トランジション・選択中とホバーの塗りはそのまま。
     通常　　　　　　：透明（スマホ幅はサービス背景 #F7F5F1 の 75%）＋英字タイトル #9E7C64 の枠線・文字
     選択中　　　　　：英字タイトル #9E7C64 の塗り＋キャッチ色の文字（PC・タブレット #F7F5F1、スマホは白の 97%）
     未選択のホバー　：PCは同じ色の 80% の塗り＋キャッチ色の文字。スマホ・タブレットは不透明の塗り
     Contact のホバー：同じ塗り＋キャッチ色の文字
   元に戻すときは、この節（「スクロール後の言語カード」から、次の見出しコメントの前までの、言語カードのルールと
   「スクロール後のContactボタン」のルール）を削除すると、custom.css の配色（言語カード：白＋グレー枠、Contact：緑）に戻る */
body:not(.is-front-top) .bogo-language-switcher {
    --oy-sub-rest: var(--oy-service-catch, #9E7C64);     /* 通常の文字・枠線＝英字タイトル */
    --oy-sub-accent: var(--oy-service-catch, #9E7C64);   /* 選択中・ホバーの塗り＝英字タイトル */
    --oy-sub-bg-rgb: 247, 245, 241;                      /* スマホ幅の通常カード背景＝サービス背景の上端 */
}

body:not(.is-front-top) .bogo-language-switcher li {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--oy-sub-rest) !important;
    box-shadow: none !important;
}

body:not(.is-front-top) .bogo-language-switcher li a,
body:not(.is-front-top) .bogo-language-switcher li .bogo-language-name {
    color: var(--oy-sub-rest) !important;
}

/* 選択中・ホバー・タップ中：英字タイトル色の塗り。文字はキャッチ色 */
body:not(.is-front-top) .bogo-language-switcher li.current,
body:not(.is-front-top) .bogo-language-switcher li:hover,
body:not(.is-front-top) .bogo-language-switcher li:active {
    background: var(--oy-sub-accent) !important;
    background-color: var(--oy-sub-accent) !important;
    border-color: var(--oy-sub-accent) !important;
    box-shadow: none !important;
}

/* PCだけ：未選択のホバー背景を 80% にして、不透明な選択中と区別する。枠線・文字は変えない。選択中をホバーしても不透明のまま */
@media screen and (min-width: 1065px) {
    body:not(.is-front-top) .bogo-language-switcher li:hover:not(.current) {
        background: color-mix(in srgb, var(--oy-sub-accent) 80%, transparent) !important;
        background-color: color-mix(in srgb, var(--oy-sub-accent) 80%, transparent) !important;
    }
}

body:not(.is-front-top) .bogo-language-switcher li:hover a,
body:not(.is-front-top) .bogo-language-switcher li:active a,
body:not(.is-front-top) .bogo-language-switcher li:hover .bogo-language-name,
body:not(.is-front-top) .bogo-language-switcher li:active .bogo-language-name,
body:not(.is-front-top) .bogo-language-switcher li.current a,
body:not(.is-front-top) .bogo-language-switcher li.current .bogo-language-name,
body:not(.is-front-top) .bogo-language-switcher li.current a.current {
    color: var(--oy-hero-ink-sub) !important; /* PC・タブレットはキャッチ #F7F5F1。スマホは下で白の 97% */
}

@media screen and (max-width: 500px) {
    body:not(.is-front-top) .bogo-language-switcher li:hover a,
    body:not(.is-front-top) .bogo-language-switcher li:active a,
    body:not(.is-front-top) .bogo-language-switcher li:hover .bogo-language-name,
    body:not(.is-front-top) .bogo-language-switcher li:active .bogo-language-name,
    body:not(.is-front-top) .bogo-language-switcher li.current a,
    body:not(.is-front-top) .bogo-language-switcher li.current .bogo-language-name,
    body:not(.is-front-top) .bogo-language-switcher li.current a.current {
        color: rgba(255, 255, 255, var(--oy-hero-ink-alpha-sp)) !important;
    }
}

/* スマホ幅（1064px以下）：通常カードの背景だけサービス背景 #F7F5F1 の 75%。選択中・ホバーは上の塗りのまま */
@media screen and (max-width: 1064px) {
    body:not(.is-front-top) .bogo-language-switcher li:not(.current):not(:hover):not(:active) {
        background: rgba(var(--oy-sub-bg-rgb), 0.75) !important;
        background-color: rgba(var(--oy-sub-bg-rgb), 0.75) !important;
    }
}

/* スクロール後のヘッダーのContactボタン：言語カードと同じ対応
   通常 = 英字タイトル色の枠＋文字＋透明／ホバー = 英字タイトル色の塗り＋キャッチ色の文字（位置・サイズ・内側へ塗る動きは従来のまま） */
header.is-front.scrollHeader .attr-nav .btn-style1 {
    border-color: var(--oy-service-catch, #9E7C64) !important;
    color: var(--oy-service-catch, #9E7C64) !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

header.is-front.scrollHeader .attr-nav .btn-style1 span {
    color: var(--oy-service-catch, #9E7C64) !important;
}

header.is-front.scrollHeader .attr-nav .btn-style1:hover,
header.is-front.scrollHeader .attr-nav .btn-style1:active,
header.is-front.scrollHeader .attr-nav .btn-style1:focus {
    border-color: var(--oy-service-catch, #9E7C64) !important;
    background-color: var(--oy-service-catch, #9E7C64) !important;
    background: var(--oy-service-catch, #9E7C64) !important;
    color: var(--oy-hero-ink-sub) !important;
}

header.is-front.scrollHeader .attr-nav .btn-style1:hover span,
header.is-front.scrollHeader .attr-nav .btn-style1:active span,
header.is-front.scrollHeader .attr-nav .btn-style1:focus span {
    color: var(--oy-hero-ink-sub) !important;
}

/* スクロール後のヘッダーメニュー文字（PC・トップページのみ）：ページの暖色の配色に合わせる
   ・ヘッダー背景は Service 上端と同じクリーム（--oy-service-bg-top #F7F5F1）。従来の文字色 #282b2d（青みのある濃いグレー）／ホバー #3CB37A（緑）は暖色の中で浮いていた
   ・通常：Services のカード説明文と同じ暖色の墨 --oy-service-ink（#564F48）を少し深く（#4A433C）。クリームの上で十分な濃さ（コントラスト約9:1）を保ちつつ、黒に見えすぎない
   ・ホバー・現在のページ（ホバー）：Services の日本語ラベル --oy-service-label（#B06E48）を #3A342E へ22%寄せた深いオレンジブラウン（ABOUT OYATECH のリンクのホバー色 --about-accent-deep と同じ作り。約 #966142・コントラスト約5:1）
   ・現在のページの文字色と下の小さな矢印は、通常と同じ墨色
   ・元に戻すときは、この節を削除（custom.css の #282b2d／#3CB37A に戻る） */
@media screen and (min-width: 1065px) {
    header.is-front.scrollHeader .navbar-nav>li>a,
    header.is-front.scrollHeader .navbar-nav li.active>a,
    header.is-front.scrollHeader .navbar-nav li.current>a {
        color: #4A433C !important;
    }
    header.is-front.scrollHeader .navbar-nav>li>a:hover,
    header.is-front.scrollHeader .navbar-nav>li>a:focus-visible,
    header.is-front.scrollHeader .navbar-nav li.active>a:hover,
    header.is-front.scrollHeader .navbar-nav li.current>a:hover {
        color: color-mix(in srgb, var(--oy-service-label, #B06E48) 78%, #3A342E 22%) !important;
    }
    header.is-front.scrollHeader .navbar>ul>li.current>a:after,
    header.is-front.scrollHeader .navbar>ul>li.active>a:after {
        border-color: transparent #4A433C #4A433C transparent !important;
    }
}

/* ヘッダー Contact ボタンのホバー（PC・全ページ共通）：左右から色が出るモーションはやめ、言語選択カードと同じ「ホバーしたら塗りつぶし」にする
   ・塗りつぶしの色・文字色・枠線は、各ページ・各状態の従来の最終配色のまま（色は変えていない。左右の box-shadow で出していた分は、同じ結果になる背景色に置き換えた）
   ・動きは、言語選択カードと同じ「all 700ms」（色の切り替えがゆっくりフェード）。戻るときも同じ */
@media screen and (min-width: 1065px) {
    header .attr-nav .btn-style1,
    header .attr-nav .btn-style1:hover,
    header .attr-nav .btn-style1:active,
    header .attr-nav .btn-style1:focus,
    header .attr-nav .btn-style1 span,
    header .attr-nav .btn-style1:hover span,
    header .attr-nav .btn-style1:active span,
    header .attr-nav .btn-style1:focus span {
        transition: all 700ms;
    }
    /* styles.css の .btn-style1:hover は、左右から #008081（緑）の影が出る既定の動き（box-shadow: inset 10em）。
       これまで各ページの !important の影で上書きしていたが、影の指定を外したため緑の動きが出てしまっていた。
       ヘッダーの Contact では既定の影を無効にして、背景色の塗りつぶしだけにする */
    header .attr-nav .btn-style1,
    header .attr-nav .btn-style1:hover,
    header .attr-nav .btn-style1:active,
    header .attr-nav .btn-style1:focus {
        box-shadow: none !important;
    }
}

/* --------------------------------------------------------------------------
   6. スマホ版（1064px以下）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1064px) {

    /* 言語切替カードの文字：PCと同じ（ヘッダーメニューの文字・枠線と同じベージュ系の白の74%）。従来のグレー 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(var(--oy-hero-ink-rgb), 0.74) !important;
    }

    /* ハンバーガー（閉じているときだけ。開いた × はメニュー側の既存スタイルのまま）
       形・太さ・位置は変えず、線の色だけを白系に */
    header.is-front:not(.scrollHeader) .navbar-toggler:not(.menu-opened):after {
        border-top-color: rgba(255, 255, 255, 0.96) !important;
        border-bottom-color: rgba(255, 255, 255, 0.96) !important;
    }

    header.is-front:not(.scrollHeader) .navbar-toggler:not(.menu-opened):before {
        border-top-color: rgba(255, 255, 255, 0.96) !important;
    }

    /* ハンバーガー（スクロール前のみ）：プロダクトレスキュー等の他ページと同じ仕様
       ・形：幅23.4×高さ15pxの角丸3本バー（左上・右下だけ角丸、太さ2px・隙間4px・1.2pxずつ横ずらし）。header.php の小さなスクリプトが
         他ページと同じ svg.archive-ham-icon を差し込む（開閉の動きは mobile-menu.php の bar 型＝他ページと同じ動き）
       ・ボタン：幅40×高さ36px。位置は、メニューを開いたときの×の中心（上32px・右36px）にハンバーガーの中心が来る位置（上14px・右9px）
       ・色：ヘッダーメニュー文字と同じ白系（インク色 #D9D5CE・不透明度74%）。ロゴの緑にする場合は color: #2CB47A
       ・スクロール後は svg を外す（従来のハンバーガーのまま） */
    header.is-front:not(.scrollHeader) .navbar-toggler,
    header.is-front:not(.scrollHeader) .navbar-toggler.bg-primary {
        width: 40px !important;
        height: 36px !important;
        top: var(--oy-hero-ham-top-sp) !important;
        right: var(--oy-hero-ham-right-sp) !important;
    }

    header.is-front:not(.scrollHeader) .navbar-toggler .archive-ham-icon {
        position: absolute;
        top: 50%;
        right: 2px;
        width: 23.4px;
        height: 15px;
        display: block;
        overflow: visible;
        pointer-events: none;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.96);
    }

    header.is-front:not(.scrollHeader) .navbar-toggler.menu-opened .archive-ham-icon {
        opacity: 0;
        visibility: hidden;
    }

    /* 閉じているときは従来の疑似3本線を消す（svg がある場合のみ＝スクリプトが動かなかったときは従来の線のまま） */
    header.is-front:not(.scrollHeader) .navbar-toggler:has(> .archive-ham-icon):not(.menu-opened):after,
    header.is-front:not(.scrollHeader) .navbar-toggler:has(> .archive-ham-icon):not(.menu-opened):before {
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        border: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Contactボタン（PC：1065px以上）と言語選択カード（PC・スマホ共通）の枠線を、ほんの少しだけ太く（同じ太さ）
   ・色・角丸・サイズ・位置は変更なし。トップページの未スクロール時のみ（言語カードは右辺が無い形のまま）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1065px) {
    header.is-front:not(.scrollHeader) .attr-nav .btn-style1 {
        border-width: var(--oy-hero-border-w) !important;
        padding: calc(13px - (var(--oy-hero-border-w) - 1px)) calc(32px - (var(--oy-hero-border-w) - 1px)) !important;   /* 枠が内側へ太った分だけ余白を減らし、ボタンの大きさ・文字位置を変えない */
    }
}

/* --------------------------------------------------------------------------
   言語選択カードの文字：ヘッダーメニューと同じ書体（Bricolage Grotesque）、太さは少しだけ細く（600）、サイズは小さく（12px）
   ・トップページ（未スクロール時の .is-front-top）のみ。他のページ・スクロール後のカードは従来どおり（Caveat）
   ・色・字間（.5px）・小文字表示・枠線は変更なし
   -------------------------------------------------------------------------- */
body.is-front-top .bogo-language-switcher a,
body.is-front-top .bogo-language-switcher .bogo-language-name {
    font-family: "Bricolage Grotesque", serif !important;
    font-size: 12px !important;   /* メニュー（16px）より小さく（JP。ENはさらに1px小さい11px＝下の調整） */
    font-weight: 600 !important;   /* メニュー（700）より少しだけ細く */
    text-transform: uppercase !important;   /* 「EN」「JP」と大文字で表示（元は小文字） */
}

/* 言語選択カードの大きさ・位置は、文字を変える前（Caveat 18px）と同じ 43.5 × 39.7px に固定し、文字は中央揃え（縦も中央）で置く
   （文字を変えると、カード自体が余白ぶん伸び縮みして位置も動くため）。トップページ（未スクロール時）の全画面幅（PC・タブレット・スマホ）共通 */
body.is-front-top .bogo-language-switcher li {
    box-sizing: border-box !important;
    width: 43.5px !important;
    height: 39.7px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.is-front-top .bogo-language-switcher a,
body.is-front-top .bogo-language-switcher .bogo-language-name {
    text-align: center !important;
}

/* 「JP」だけ上へ1.3px ずらしていた既存の調整（小文字の j・p の下の突き出しに合わせたもの）は、大文字表示では不要なので、トップのカードだけ外す */
body.is-front-top .bogo-language-switcher a.lang-jp {
    transform: none !important;
}

/* 「EN」と「JP」を同じ大きさに見せる調整
   ・文字サイズは同じ14pxでも、E・Nは幅広・J・Pは幅が狭く、ENのほうが横に約5px長くて大きく見えていた
   ・ENをほんの少し小さく（11px）、JPは字間を少し広げて（1.1px）、見た目の幅・大きさを近づける
   ・字間は最後の文字の後ろにも付いて中央からずれるため、同じ量だけ右の余白を引いて打ち消している */
body.is-front-top .bogo-language-switcher li a:not(.lang-jp),
body.is-front-top .bogo-language-switcher li .bogo-language-name:not(:has(a)):not(.lang-jp) {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    margin-right: -0.3px;
}

body.is-front-top .bogo-language-switcher a.lang-jp,
body.is-front-top .bogo-language-switcher .bogo-language-name.lang-jp {
    letter-spacing: 1.1px !important;
    margin-right: -1.1px;
}

/* 言語選択カードの枠線の太さ（PC・スマホ共通。右辺は元からなし） */
body.is-front-top .bogo-language-switcher li {
    border-top-width: var(--oy-hero-border-w) !important;
    border-bottom-width: var(--oy-hero-border-w) !important;
    border-left-width: var(--oy-hero-border-w) !important;
}

/* --------------------------------------------------------------------------
   ヒーロー：ほんわりした丸いあしらい（ProductRescue等の .works-detail-blob と同じ考え方）
   ・円形の放射グラデーション3つ（A：左上／B：右中／C：左下寄り。3つとも同じ暖色（サンド系））を、ゆっくり漂わせる
   ・配色は暖色（サンド系）の1色のみ。濃さは --oy-hero-blob-alpha で一括調整（0で無し）
   ・.item::before は元の暗いオーバーレイ（plugins.css/styles.css の data-overlay-dark）が使っているため触らず、セクション自体の ::after を使用
   ・スライドが切り替わっても位置が変わらない。操作は妨げない（pointer-events:none）。PC・スマホ共通
   -------------------------------------------------------------------------- */
.banner-style01::after {
    content: "";
    position: absolute;
    inset: calc(var(--oy-hero-blob-m) * -1); /* 動かしても領域の端（直線）が見えないよう、上下左右に余白ぶん広げる（セクションが overflow:hidden なので画面外は切れる） */
    z-index: 1; /* スライダー(z-index:1)より後ろのDOM順なので、写真・被せ色の上に載る。ヘッダーより下 */
    pointer-events: none;
    opacity: var(--oy-hero-blob-alpha);
    filter: blur(2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image:
        radial-gradient(circle var(--oy-hero-blob-a) at calc(var(--oy-hero-blob-m) + (100% - var(--oy-hero-blob-m) * 2) * 0.09) calc(var(--oy-hero-blob-m) + (100% - var(--oy-hero-blob-m) * 2) * 0.12), rgba(var(--oy-hero-blob-warm), 0.13), rgba(var(--oy-hero-blob-warm), 0.025) 70%, transparent 75%),
        radial-gradient(circle var(--oy-hero-blob-a) at calc(var(--oy-hero-blob-m) + (100% - var(--oy-hero-blob-m) * 2) * 0.95) calc(var(--oy-hero-blob-m) + (100% - var(--oy-hero-blob-m) * 2) * 0.52), rgba(var(--oy-hero-blob-warm), 0.11), rgba(var(--oy-hero-blob-warm), 0.02) 68%, transparent 75%),
        radial-gradient(circle var(--oy-hero-blob-c) at calc(var(--oy-hero-blob-m) + (100% - var(--oy-hero-blob-m) * 2) * 0.22) calc(var(--oy-hero-blob-m) + (100% - var(--oy-hero-blob-m) * 2) * 0.86), rgba(var(--oy-hero-blob-warm), 0.12), transparent 72%);
    background-position: 0 0, 0 0, 0 0;
    animation: oy-hero-blob-float 16s ease-in-out infinite;
}

@keyframes oy-hero-blob-float {
    0%, 100% { background-position: 0 0, 0 0, 0 0; }
    50% { background-position: 18px 22px, -22px 16px, 12px -18px; }
}

@media (prefers-reduced-motion: reduce) {
    .banner-style01::after {
        animation: none;
    }
}

@media screen and (max-width: 1064px) {
    :root {
        --oy-hero-blob-a: 240px;
        --oy-hero-blob-c: 170px;
    }
}

/* --------------------------------------------------------------------------
   ヒーロー：斜めのソフトライン（スマホ版のみ）
   Works・ProductRescue・Pricing 等の「.works-detail-atmosphere::after」と同じ形・同じ傾きで、色だけ変えたもの。
     Works 側：width:48% / height:1500px / top:-430px、linear-gradient(128deg, 透明 0% → アクセント7% 42% → 透明 68%)、skewX(-12deg)
     ここ　　：上と同じ寸法・同じグラデーション・同じ傾き。色だけ、ヒーローの文字色に近いほぼ無彩色の明るいグレー（--oy-hero-slash-rgb）
   ・この帯は「左端」と「右端」の2か所が線として見える（グラデーションが端でも0にならないため）。ここでは「右端の線」だけを見せ、
     「左端の線」は画面の外（左）に出している。右端の線は、画面の上の方がいちばん濃く、下へ向かって薄くなり、画面の7割ほどの高さで消える
   ・文字より下（各スライドの被せ色 .item::after と一体で描画）なので、キャッチ・サブキャッチの読みやすさには影響しない。操作は妨げない
   ・調整するのは次の2つだけ
       --oy-hero-slash-alpha ：帯の濃さ（Works は 0.07。0 で無し）
       --oy-hero-slash-x     ：線の位置（画面の上端での、線の横位置。画面幅に対する割合。大きいほど右）
                               ※ 約50vw を超えると、左端の線が画面内（上の方）に入って2本になる
   ・傾ける軸は画面の上端。上端では位置がずれず、下へ行くほど線は左へ流れる（Works は帯の中心が軸）。
     被せ色（.item::after）自体は傾けても全面を覆うよう、右に余白（400px）を足している。被せ色の見た目は変わらない
   元に戻すときは、この節を削除（または --oy-hero-slash-alpha を 0 に）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1064px) {
    :root {
        --oy-hero-slash-rgb: 222, 220, 216;   /* 帯の色：ほぼ無彩色の明るいグレー（ヒーローの文字色 #D9D5CE よりさらに色味を抑えたモノクロ寄り） */
        --oy-hero-slash-alpha: 0.025;
        --oy-hero-slash-x: 48vw;
    }

    .banner-style01 .slider-fade1 .item::after {
        left: -10px;
        right: -400px;
        background:
            linear-gradient(
                128deg,
                transparent 0%,
                rgba(var(--oy-hero-slash-rgb), var(--oy-hero-slash-alpha)) 42%,
                transparent 68%
            ) no-repeat right calc(400px + 100vw - var(--oy-hero-slash-x)) top -430px / 48vw 1500px,
            rgba(var(--oy-hero-tint-rgb), var(--oy-hero-tint-alpha));
        transform: skewX(-12deg);
        transform-origin: 0 0;
    }
}
/* --------------------------------------------------------------------------
   ヒーロー：キャッチコピー／サブキャッチの影を強める（PC・スマホ共通）
   ・従来は「0 0 2px 黒」だけでごく弱く、明るい写真の上で文字が埋もれやすかった。
   ・影の色は純黒ではなく、ヒーローの被せ色（ウォームチャコール rgb(64,57,48)）をさらに暗くした墨色 rgb(26,22,18) にして、
     背景のトーンに馴染ませる（黒い縁取りが浮かない）。
   ・形：文字際の締まった影（1px）＋近い影（10px）＋広いぼかし（30px）の3段。広いぼかしで文字まわりの明るさを少し落とし、
     近い影で輪郭を立てる。キャッチ（太く大きい）よりサブキャッチ（小さく細い）のほうを少し濃くしている。
   ・調整は下の2つの変数だけ（色 --oy-hero-shadow-rgb／強さ --oy-hero-shadow-k：1が標準、大きいほど濃い。0で無し）
   ・スマホ（500px以下）は文字が ::before で描かれているため、::before にも同じ指定をしている
   ・元に戻すときは、この節を削除
   -------------------------------------------------------------------------- */
:root {
    --oy-hero-shadow-rgb: 26, 22, 18;
    --oy-hero-shadow-k: 1;
}

.banner-style01 .slider-fade1 .item .main-title,
.banner-style01 .slider-fade1 .item .main-title::before {
    text-shadow:
        0 1px 2px rgba(var(--oy-hero-shadow-rgb), calc(0.55 * var(--oy-hero-shadow-k))),
        0 2px 10px rgba(var(--oy-hero-shadow-rgb), calc(0.5 * var(--oy-hero-shadow-k))),
        0 4px 30px rgba(var(--oy-hero-shadow-rgb), calc(0.45 * var(--oy-hero-shadow-k))) !important;
}

.banner-style01 .slider-fade1 .item .main-title2,
.banner-style01 .slider-fade1 .item .main-title2::before {
    text-shadow:
        0 1px 2px rgba(var(--oy-hero-shadow-rgb), calc(0.65 * var(--oy-hero-shadow-k))),
        0 2px 8px rgba(var(--oy-hero-shadow-rgb), calc(0.6 * var(--oy-hero-shadow-k))),
        0 3px 24px rgba(var(--oy-hero-shadow-rgb), calc(0.5 * var(--oy-hero-shadow-k))) !important;
}

/* スマホ（500px以下）：キャッチ・サブキャッチ（::before で描画）の白を、ほんの少し白へ。
   custom.css の rgba(255,255,255,.58) を、変数 --oy-hero-ink-alpha-sp（0.97）に上書き。元に戻すときは、この節を削除 */
@media screen and (max-width: 500px) {
    .banner-style01 .slider-fade1 .item .main-title::before,
    .banner-style01 .slider-fade1 .item .main-title2::before {
        color: rgba(255, 255, 255, var(--oy-hero-ink-alpha-sp)) !important;
    }
}

/* --------------------------------------------------------------------------
   トップに戻るボタン（このページだけ）：選択中の言語カードと同じ配色
   ・背景・枠＝英字タイトル #9E7C64、矢印＝キャッチ（PC・タブレット #F7F5F1、スマホは白の 97%）
   ・大きさは全ページ共通で custom.css（34px・矢印 14px）。ホバーの opacity 0.7 はそのまま
   -------------------------------------------------------------------------- */
.scroll-to-top {
    background: var(--oy-service-catch, #9E7C64) !important;
    border-color: var(--oy-service-catch, #9E7C64) !important;
}

.scroll-to-top i,
.scroll-to-top:hover i {
    color: var(--oy-hero-ink-sub) !important;
}

@media screen and (max-width: 500px) {
    .scroll-to-top i,
    .scroll-to-top:hover i {
        color: rgba(255, 255, 255, var(--oy-hero-ink-alpha-sp)) !important;
    }
}