@charset "UTF-8";

/* 基本機能項目 ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */
/* カラムサイズコントロール----------------------- */
/* ディスプレイコントロール----------------------- */
/* 幅、高さ調整----------------------- */
/* 配置コントロール----------------------- */
/* 階層コントロール----------------------- */
/* 余白調整----------------------- */
/* 文字サイズコントロール----------------------- */
/* 行高サイズ調整----------------------- */
/* 改行コントロール----------------------- */
/* 画像サイズ管理----------------------- */
/* 装飾関連（背景、影、色、線形など）----------------------- */
/* アニメーション（前後）----------------------- */

/* 各機能項目内、基本記述順 ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■  */
/* 外配置 */
/* 形状 */
/* 中配置（子の配置） */
/* 装飾関連 */




/* ↓ 利用フォント一覧 ///////////////////////////////////////////////////////////////////////////////////////*/
    /* ===== ローカルからフォントデータ呼び出し ===== */
        /* 衡山毛筆フォント */
        @font-face {
        font-family: "KouzanBrush";
        src: url("/fonts/KouzanBrush-choeru.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap; /* 文字が消える時間を防ぐ */
        }

    /* ===== 言語選択エリア ===== */
        /* Noto Sans JP（Source Han Serif JP／源ノ明朝の代替フォント） */
        .c__lang-switch-nav a,
        .c__overlayMenu__lang-switch-nav a {
        font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
                    "Yu Gothic", "Meiryo", sans-serif;
        font-weight: 400; /* 例：太さを指定（300/400/500の中から） */
        font-size: 20px;
        }

    /*  ==== グローバルメニューエリア、オーバーレイエリア ===== */
        /* Noto Sans JP （Source Han Serif JP／源ノ明朝の代替フォント）*/
        .c__global-nav a,
        .c__global-nav-none a,
        .c__overlayMenu__global-nav a {
        font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
                    "Yu Gothic", "Meiryo", sans-serif;
        font-weight: 400; /* 例：太さを指定（300/400/500の中から） */
        font-size: 18px;
        }

    /* ==== コンテンツTOPエリア ===== */
        /* Noto Sans JP （Source Han Serif JP／源ノ明朝の代替フォント）*/
        .wrapper__fil-con-tra h2 {
        font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
                    "Yu Gothic", "Meiryo", sans-serif;
        font-weight: 500; /* 例：太さを指定（300/400/500の中から） */
        font-size: 38px;
        /* .l__main-Body h2 のサイズは後段の var(--h2-size) を使う */
        }

        @media (max-width: 820px){
            .wrapper__fil-con-tra h2 {
            font-size: 30px;
            }
        }
    
        .l__main-Body .wrapper__text {
        font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
                    "Yu Gothic", "Meiryo", sans-serif;
        font-weight: 400; /* 例：太さを指定（300/400/500の中から） */
        }

        .c__footer-nav a,
        .c__copyright {
        font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
                    "Yu Gothic", "Meiryo", sans-serif;
        font-weight: 300; /* 例：太さを指定（300/400/500の中から） */
        }


    
    /* ==== コンテンツTOPエリア ===== */
        .l__main-Body {
        /* 見出しサイズ／本文サイズ／リード文サイズ */
        --h2-size: clamp(30px, calc(18.2px + 1vw), 38px)
        }
        
    /* ===== オーバーレイメニューエリア 文字色 ===== */
        .c__overlayMenu,
        .c__overlayMenu__global-nav a {
        color:#8c8c8c;
        }

    /* ===== 輸入事業カードのテキストエリア ===== */
        .c__tradeCard-top-text {
            color: #232323;
        }
        /* コンサルティング文字のみ改行 */
        /* 分割した各spanの中では改行させない → 折り返しは span と span の間だけ */
        .cardTitle span { white-space: nowrap; }
        /* 2行になったときの見栄えを少し良くする（任意） */
        .c__consulCard-top .cardTitle { text-wrap: balance; } /* 対応ブラウザで段組みバランスが良くなる */


    /* 基本文字色（白）を全体に */
        :root { --text-color: #ffffff; }
        body {
        color: var(--text-color);
        }

    /* アンカーは上記だけだと文字色継承しないので、明示的に以下必須 */
        a:link,
        a:visited { color: inherit; }
        a:hover, a:active, a:focus { color: inherit; }
/* ↑ 利用フォント一覧 ///////////////////////////////////////////////////////////////////////////////////////*/



/* ↓ 各エリア共有設定エリア ///////////////////////////////////////////////////////////////////////////////////////*/
/* ipad Chrome スクロールが止まらない問題対策用 */
/* ビューポート自体は固定＆はみ出し非表示に */
html, body{
  height: 100%;
  overflow: hidden;
  /* バウンドしても“裏が白”にならない保険 */
  background-color: #383838; /* 既存の .l__device と同色に */
}

/* 以後は .l__device が唯一のスクロール領域 */
.l__device{
  position: fixed;   /* 画面に張り付ける */
  inset: 0;          /* = top:0; right:0; bottom:0; left:0; */
  overflow-y: auto;  /* ここで縦スクロール */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール維持 */
  overscroll-behavior-y: none;       /* 対応環境では端のバウンドを抑制 */
}









/* ボックスサイジング（ボーダー含めない） */
    *, *::before, *::after {
    box-sizing: border-box;
    word-wrap: break-word;/* 英語入力時に効果あり。親からはみ出す時、改行有効（日本語はプリセット済み） */
    padding: 0;          /* 物理 */
    padding-block: 0;   /* 論理（これが肝） */
    margin: 0;           /* 物理 */
    margin-block: 0;     /* 論理（これが肝） */
    }

    /* 見出し系の margin を明示リセット（narmalize.css対策用） */
    h1,h2,h3,h4,h5,h6 { margin:0; }

    /* アンカー下線　無効化 */
    a, a:link, a:visited, a:hover, a:focus, a:active {
    text-decoration: none;
    }

    /* ulプリセット余白　無効化 */
    ul, ol {
    margin: 0;
    padding: 0;
    list-style: none; /*.バレットを非表示 */
    padding-inline-start: 0;    /* 既定のインデントを消す */
    }

    /* 画像ボーダー　無効化 */
    img { border-style: none;}


    /* ===== ↓ スマホ・タブレット用 ===== */
        /* ダブルタップズーム抑止＆クリック遅延をなくす */
        /* タップ操作が主目的の要素だけに限定 */
        :where(a[href], button, [role="button"], .c__hamburger-btn) {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        }

        /* さらに、タッチデバイス」にだけ限定する */
        @media (hover: none) and (pointer: coarse) {
            :where(a[href], button, [role="button"], .c__hamburger-btn) {
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }
        }

        /* 画面幅をいっぱいに使う（横スクロールさせない仕様） */
        html, body { max-width: 100%; overflow-x: hidden; }

        /* 縦スクロール領域：横スワイプを抑制せず縦スクロール優先 */
        .my-scroll-y {
        touch-action: pan-y;
        }

        /* 横カルーセル：横スワイプ優先にする場合 */
        .my-carousel {
        touch-action: pan-x;
        }
    /* ===== ↑ スマホ・タブレット用 ===== */



    /* ===== 全体左右の余白 ===== */
        /* 1) 変数として余白値だけを更新 */
        :root { --edge-pad: 0px; }

        /* ===== ブレークポイント ===== */
            /* 0–430px：0 → 最大30px まで可変 */
            @media (max-width:430px){
            :root { --edge-pad: clamp(0px, calc(100vw * 30 / 430), 30px); }
            }

            /* 431–1180px：30px → 最大70px まで可変 */
            @media (min-width:431px) and (max-width:1180px){
            /* 430px時に30px、1180px時に70pxになる直線式 */
            :root { --edge-pad: clamp(30px, calc(30px + (100vw - 430px) * 40 / 750), 70px); }
            }

            /* 1181–1980px：70px → 最大140px まで可変 */
            @media (min-width:1181px) and (max-width:1980px){
            /* 1180px時に70px、1980px時に140pxになる直線式 */
            :root { --edge-pad: clamp(70px, calc(70px + (100vw - 1180px) * 70 / 800), 140px); }
            }

            /* 1981px〜：固定 140px */
            @media (min-width:1981px){
            :root { --edge-pad: 140px; }
            }

        /* 2) 適用側は… */
        .l__header,
        .c__overlayMenu__top,
        .l__main-copy,
        .l__main-top,
        .l__main-Body,
        .l__footer
        { padding-inline: var(--edge-pad); }


        /* 右パディングだけ消したい所は start/end を分ける */
        .c__overlayMenu__body {
        padding-inline-start: var(--edge-pad);
        padding-inline-end: 0;
        }
/* ↑ 各エリア共有設定エリア ///////////////////////////////////////////////////////////////////////////////////////*/



/* ↓ l__device ///////////////////////////////////////////////////////////////////////////////////////*/
    .l__device { background-color: #383838;}
/* ↑ l__device ///////////////////////////////////////////////////////////////////////////////////////*/



/* ↓ l__header ///////////////////////////////////////////////////////////////////////////////////////*/
    /*（エリア内全体設定）*/
        /* メイン背景色の設定、ヘッダー枠の高さ指定 */
        .l__header {
        background-color: #5c5c5c;
        }


    /* ===== 右エリア ===== */
        /* ヘッダー側の右カラムも、同じ思想に寄せるとさらにブレにくい */
        .l__header-right { height: 100%; }


    /* ===== ロゴエリア（オーバーレイのロゴと共通スタイル　後ほど一本化予定！！！） ===== */
        /* ロゴの可変設定 */
        /* 430px以下 → 192px
            431–819px → 192〜286pxで自動可変
            820px以上 → 286px
            （アスペクト比は height:auto で維持） */
        .logo-img {
        aspect-ratio: 286 / 65; /* アスペクト比を維持 */
        height: auto; /* アスペクト比を維持 */
        width: clamp(192px, calc(87.5825px + 24.2268vw), 286px);
        display: block;
        max-width: 100%;  /* 親が狭いときのはみ出し防止 */
        }
        /* clamp(min, fluid, max) で両端を固定、中央は線形に伸縮。
            係数は 431px→819px の間で 192→286 になるように計算済み。
            width/height 属性はレイアウトシフト防止のための目安 */


    /*  ====ハンバーガー ←→ 閉じるアイコンのアニメーション設定 ===== */
        /* （回転アニメーションはCSSのtransform＋transitionでやって、jQueryはクラスを付け外しするだけ仕様） */
        /* 調整用の変数 */
        :root {
        --burger-w: 28px;          /* 線の長さ */
        --burger-h: 3px;           /* 線の太さ */
        --burger-gap: 5px;         /* 線間 */
        --burger-color-closed: #fff;    /* 閉じている時 */
        --burger-color-open:   #8c8c8c; /* 展開している時 */
        --color-delay: .10s; /* ← 色変化の開始を遅らせる量（初期値） */
        /* ロゴアニメ用 */
        --logo-in-dur: .30s;   /* ロゴのアニメ時間（.30s は overlay の .30s に合わせた）*/
        --logo-in-delay: .06s; /* 開始ディレイ：オーバーレイの薄いフェードより少し遅らせる */
        --logo-in-shift: 15px;  /* 左からの移動量 */

        /* 時間設計（お好みで） */
        /* どのくらいの時間で動き続けているか？ */
        --move: .08s;              /* ① 中央へ集まる時間 */
        --fade: .06s;              /* ② 中央線のフェード時間 */
        --rot : .11s;              /* ② 回転の時間 */
        --stagger: .02s;           /* ② 2本の回転の時差 */

        /* ベジェ */
        --ease-rot-in:  cubic-bezier(.55,.055,.675,.19);
        --ease-rot-out: cubic-bezier(.215,.61,.355,1);
        }


        /* ハンバーガーの連続クリック防御機能発火の視認化 */
        .c__hamburger-btn.is-locked{
        pointer-events: none;
        opacity: .9; /* 変えたくなければ削除 */
        }




    /* ===== ボタン本体 ===== */
        /* ボタン枠の作成 */
            .hamburger-box {
            width: var(--burger-w);
            height: calc(var(--burger-h)*3 + var(--burger-gap)*2);  /* 3本線の高さ×3 + 線間のサイズ×2 */
            position: relative;
            display: inline-block;
            }

        /* ３本線骨格の作成 */
            .hamburger-inner,   /* 中央の線（上下は疑似要素） */
            .hamburger-inner::before,   /* 上の線 */
            .hamburger-inner::after     /* 下の線 */
            {
            position:absolute; left:0; right:0;
            width: 100%;
            height: var(--burger-h);
            border-radius: 2px;
            }

            /* 色と content は役割ごとに分ける */
            .hamburger-inner {
            background-color: var(--burger-color-closed);
            }
            .hamburger-inner::before,
            .hamburger-inner::after {
            content:""; /* 疑似要素用。実体(.hamburger-inner)は表示されるのでOK */
            background-color: var(--burger-color-closed);
            }


        /* ３本線の配置（閉じた状態） */
            .hamburger-inner { top:50%; transform:translateY(-50%); }
            .hamburger-inner::before { top:calc(-1*(var(--burger-gap) + var(--burger-h))); }
            .hamburger-inner::after { bottom:calc(-1*(var(--burger-gap) + var(--burger-h))); }

        /* jqueryでクラスが付与された場合（アニメーション発火時） */
            .c__hamburger-btn.hamburger {
            padding: 0; /* ブラウザ既定の内側余白を消す */
            border: 0;   /* OS/ブラウザ依存のボタンスタイルの枠線を消す */
            background: transparent; /* 既定のグレー背景などを消す */
            cursor: pointer; /* クリック可能である事を示す用途（明示的に） */
            }


        /* ===== ３本線アニメーション（閉じた時 .is-open が外れた時）===== */
            /* ３本線の定義（共通） */
            /*
            閉じる→開くの“逆再生”も綺麗にするため、（（（（デフォ側の遅延＝戻る時を先に定義））））
            逆再生時の設定を以下に記述。閉じる時（.is-open が外れるとこの値が効く）
            1.　すぐ transform（回転をほどく）
            2.　0.16s後に中央線がフェードイン
            3　0.26s後に上下線が広がる（top/bottomが動く）
            
            4プロパティを同時にトランジション（transform, background-color, top, bottom の順）
            左から　・回転 ・透過のフェードINとOUT ・中央線への集めると広げる動き
            */
            .hamburger-inner,   /* 中央の線（上下は疑似要素） */
            .hamburger-inner::before,   /* 上の線 */
            .hamburger-inner::after     /* 下の線 */
            {
            backface-visibility: hidden;
            background-color: var(--burger-color-closed);       /* ← 初期色 */
            transition-property: transform, background-color, top, bottom;
            transition-duration: var(--rot), var(--fade), var(--move), var(--move);
            transition-timing-function: var(--ease-rot-in), ease, ease, ease;
            transition-delay: 0s, var(--color-delay), .10s, .10s; /* ← 第2引数だけ変数化 */
            }


        /* いつ動き出すか？ */
        /* ===== ３本線アニメーション（開いた時 .is-open を付けた時）===== */
            /* 集合フェーズで中央線を即フェード開始 */
            /* ① まず上下を中央へ集める（top/bottom を 0 に）。遅延 0 で即開始 */
            .hamburger--spin.is-open .hamburger-inner::before { top:0; }
            .hamburger--spin.is-open .hamburger-inner::after { bottom:0; }

            /* ② 4プロパティを同時にトランジション（transform, background-color, top, bottom の順）
            左から　・回転 ・透過のフェードINとOUT ・中央線への集めると広げる動き */
            .hamburger--spin.is-open .hamburger-inner::before {
            transition-delay: .10s, var(--color-delay), 0s, 0s; /* ← 第2を変数に */
            transform: rotate(225deg);
            transition-timing-function: var(--ease-rot-out), ease, ease, ease;
            }
            
            /* ③ 下は “右回りで -45° と同じ” = +315° を、さらに時差を付けて開始 */
            .hamburger--spin.is-open .hamburger-inner::after {
            transition-delay: calc(.10s + var(--stagger)), var(--color-delay), 0s, 0s; /* ← 第2を変数に */
            transform: rotate(135deg); /*（右回り指定を厳守）*/
            transition-timing-function: var(--ease-rot-out), ease, ease, ease;
            }

            /* ④ 少し遅らせて中央線をフェードアウト（“1本→2本”に見せる） */
            /* 中央線だけを消す（親opacityは使わない）このセレクタを分割する程カクつく要因！ */
            .hamburger--spin.is-open .hamburger-inner {
            transition-delay: .10s, 0s, 0s, 0s; /* transform, background-color, top, bottom */
            background-color: transparent;       /* ← 親の不透明度は維持、中央線だけ透明に */
                                                /* ← 遅延なしでフェード開始 */
                                                /* この値（目標）に向かって上の第2引数が0sのフェードで発火する。これを書かないとフェードが起きない */
            }
            /* 開いた状態の色（トップ/ボトムの2本） */
            .hamburger--spin.is-open .hamburger-inner::before,
            .hamburger--spin.is-open .hamburger-inner::after {
            background-color: var(--burger-color-open);  /* #8c8c8c へアニメ */
            }
            /*3本線が集まってから色変化（開いた時だけ）*/
            .hamburger--spin.is-open {
            --color-delay: calc(var(--move) + .08s);
            }
/* ↑ l__header ///////////////////////////////////////////////////////////////////////////////////////*/



/* ↓ l__header と c__overlayMenu ///////////////////////////////////////////////////////////////////////////////////////*/
    :root{
    --head-h: 130px;
    --row-top: 70px;   /* 上段（言語） */
    --row-btm: 60px;   /* 下段（ハンバーガー） */
    }


    /* ヘッダーエリアのl__headerと同ポジション */
        /* バーの総高さは両者で完全一致 */
        .l__header,
        .c__overlayMenu__top { height: var(--head-h); }


    /* ===== 左右エリア（ロゴエリア、ユーザーアクション） ===== */
        /*横並び、中央揃え、左右端に配置 */
        .l__header .wrapper__left-right,
        .c__overlayMenu__wrapper__left-right {
        display: flex;
        align-items: center;          /* 縦方向の中央揃え */
        justify-content: space-between;/* 左右を端に */
        /* gap: 16px; */                    /* 要素間のすき間（任意） */
        height: 100%;
        }

        /* 親から継続の横並びを解除。子要素は縦並びに戻す */
        .l__header-right,
        .c__overlayMenu__right {
        display: flex;
        flex-direction: column; /* ← これで上下に積む */
        /* gap: 8px; */
        }


    /* ===== 左エリア ===== */
        /* ロゴの“潰れ禁止”＋最小幅を確保（直下の子だけに適用） */
        .wrapper__left-right > .l__header-left,
        .c__overlayMenu__wrapper__left-right > .c__overlayMenu__left {
        flex: 0 0 auto;   /* = shrinkしない */
        min-width: 192px; /* clampの下限に合わせる */
        }

        /* ロゴのブロック化（どこに動かしても効く仕様） */
        .site-logo-link { display:block; }


    /* ===== 右エリア ===== */
        /* 言語切替とグローバルメニューを右寄せ*/
        .l__header-right .wrapper__hamburger-global,
        .c__overlayMenu__wrapper__hamburger-global {
        height: 60px;
        display: flex;
        align-items: center;      /* 縦中央 */
        justify-content: flex-end;/* 右寄せ */
        }


    /*. ==== 言語切替エリア（言語選択エリア、グローバルメニューエリア）だけ縦基準のまま右端寄せへ（左→右の順で詰め、右を押し出す） ===== */
        .c__lang-switch-nav,
        .c__overlayMenu__lang-switch-nav {
        height : 70px;
        display:flex;
        align-items: center; /* ← 縦方向の中央寄せ */
        justify-content: flex-end; /* 祖父で横基準で右寄せ、対して親は縦基準。これを本人で右寄せ */
        }
        
        /* JP/EN の縦基準を固定（行高ぶれ防止） */
        .c__lang-switch-nav a,
        .c__overlayMenu__lang-switch-nav a {
        display: inline-block;
        line-height: 1;     /* ← 重要：行高で押し広げない */
        padding: 0;         /* 余白はここで足さない（高さはコンテナ側で出す） */
        }


    /* ===== グローバルメニューエリア ===== */
        /* どちらにも付いたときに必ず固定されるように */
        body.no-scroll { overflow: hidden; }

        /* アンカーへスクロールを滑らかに */
        html { scroll-behavior: auto; }

        /* prefers-reduced-motion：動きを抑える */
        @media (prefers-reduced-motion: reduce){
        html { scroll-behavior: auto; }
        .c__overlayMenu{ transition: none !important; }
}
        /* 見出しセクション(#film/#consul/#trade/#profile)の“止まり位置”をヘッダー分だけ下げる */
        .l__main-Body > div[id]{
        scroll-margin-top: calc(var(--head-h, 130px) + 12px);
        }


        /* 縦方向の中央寄せ */
        .c__global-nav,
        .c__global-nav-none {
        height: 60px;
        display:flex;
        align-items: center; /* ← 縦方向の中央寄せ */
        }

        /* 横並びに */
        .c__global-nav ul,
        .c__global-nav-none ul {
        display: flex;
        /* align-items: center; */          /* 縦方向の中央揃え */
        justify-content: space-between; /* 左右を端に */
        gap: 30px;                  /* 要素間のすき間（任意） */
        }


    /* ===== スムーススクロールスピードの管理 ===== */
        /* デフォルト */
        :root { --scroll-dur: 1000ms; } /* PC想定の標準速度 */

        /* スマホ（〜430px） */
        @media (max-width:430px){
        :root { --scroll-dur: 1700ms; } /* ゆっくり */
        }

        /* タブレット（431〜1180px） */
        @media (min-width:431px) and (max-width:1180px){
        :root { --scroll-dur: 1200ms; }
        }

        /* PC（1181px〜） */
        @media (min-width:1181px){
        :root { --scroll-dur: 1000ms; } /* お好みで調整 */
        }
/* ↑ l__header と c__overlayMenu ///////////////////////////////////////////////////////////////////////////////////////*/




/* ===== フローティングヘッダー（全幅で有効） ===== */
:root{
  --float-h: 56px;        /* 高さ */
  --mini-logo-w: 143px;   /* ミニロゴ幅（元286の約半分） */
}

.c__floatHeader{
  position: fixed;
  left: 0; right: 0;
  top: 0;
  top: max(0px, env(safe-area-inset-top)); /* ノッチ対策 */
  z-index: 990;                             /* オーバーレイ(1000)の下 */
  height: var(--float-h);

  /* ★通常ヘッダーと同じ色に */
  background-color: #5c5c5c;

  /* 初期は画面外＆透過 → ここから滑り込ませる */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;

  /* ★ぬるっと：少し長め＋イージング良く */
  transition:
    transform .70s cubic-bezier(.22,.61,.36,1),
    opacity   .70s ease;
  will-change: transform, opacity;
}

.c__floatHeader__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--edge-pad);
}

/* 表示トグル */
.c__floatHeader.is-shown{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ミニロゴ */
.c__floatHeader .mini-logo{
  width: clamp(120px, 32vw, var(--mini-logo-w));
  height: auto;
  display: block;
}






/* ==== 戻るボタン（右下フローティング） ==== */
:root{
  --toTop-size: 52px;                 /* ボタン径 */
  --toTop-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* 背景色はヘッダー色ベース＋少し透過 */
.c__toTop{
  position: fixed;
  right: calc(var(--edge-pad) + env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
  width: var(--toTop-size);
  height: var(--toTop-size);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  z-index: 980; /* コンテンツ上、オーバーレイ(1000)より下。オーバーレイ時は非表示にする */

  /* 透過背景（ヘッダー色を流用） */
  background-color: rgba(92,92,92,.70);
  background-color: rgb(var(--header-bg-rgb, 92 92 92) / .70);
  color: #fff;  /* アイコン色 */

  /* 初期は右外＆透明（ぬるっと入る） */
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none;

  box-shadow: var(--toTop-shadow);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .70s cubic-bezier(.22,.61,.36,1),
    opacity   .70s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

/* 表示時 */
.c__toTop.is-shown{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ホバー/フォーカスのちょいリッチ */
.c__toTop:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.32); }
.c__toTop:focus-visible{
  outline: 3px solid rgba(255,255,255,.75);
  outline-offset: 3px;
}

/* オーバーレイ(メニュー)を開いている時は隠す */
body.no-scroll .c__toTop{
  opacity: 0 !important;
  transform: translateX(120%) !important;
  pointer-events: none !important;
}

/* 動きを控えるユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .c__toTop{ transition: none; transform: none; }
}







/* ↓ c__overlayMenu ///////////////////////////////////////////////////////////////////////////////////////*/
    /* オーバーレイ表示時、画面固定のスクロール抑止 */
    body.no-scroll { overflow: hidden; }

    /* スマホ幅の時、heightが変わるせいでヘッダーが下に落ちた様に見える問題改善用途（サブピクセル揺れの抑制）*/
    /* レイヤー切替時のチラつきを抑える */
    .c__overlayMenu-logo,
    .c__overlayMenu__lang-switch-nav {
    backface-visibility: hidden;
    transform: translateZ(0); /* GPU レイヤー化ヒント */
    }

    /* ★stickyを効かせるため __top では transform を無効にする */
    .c__overlayMenu__top {
    backface-visibility: hidden; /* ←残してOK／不要なら削っても可 */
    transform: none;             /* ←ここが超重要 */
    }

    /* オーバーレイ表示中は ×ボタンをビューポート右上に固定 */
    body.no-scroll .c__hamburger-btn{
    position: fixed;
    top: max(17px, env(safe-area-inset-top));                /* iOSノッチ考慮 */
    right: calc(var(--edge-pad) + env(safe-area-inset-right));
    z-index: 1100; /* オーバーレイ(1000)より前面 */
    }

    @media (min-width:1180px){
        .c__hamburger-btn{ position: static; } /* PC帯は従来どおり */
    }

    /* オーバーレイの上部帯（ロゴ・言語・閉じるアイコンが乗る行）を固定 */
    .c__overlayMenu__top{
    position: sticky;
    top: 0;
    z-index: 1001;          /* オーバーレイ本体(1000)より前面 */
    background: #efefef;    /* 背景を付けて重なり透け防止 */
    flex: 0 0 auto;   /* ★追加：flexレイアウト下で高さが潰れないよう保証 */
    /* 任意：境界線が欲しければ */
    /* border-bottom: 1px solid #d7d7d7; */
    }




/* 共通トークン：通常ヘッダー色と透明度を変数化（お好みで数値調整） */
:root{
  --header-bg-rgb: 92 92 92;   /* #5c5c5c を RGB で表記：92 92 92 */
  --float-bg-alpha: 0.80;      /* 透過度（0〜1）。0.90 = 10% 透過 */
}

/* フローティングヘッダー本体（あなたが使っているセレクタに合わせて） */
.c__floatHeader{
  /* 透過背景（子要素の不透明度はそのまま保持されます） */
  background-color: rgb(var(--header-bg-rgb) / var(--float-bg-alpha));

  /* アニメ時に背景も滑らかに変化させたいなら（任意） */
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              opacity   .45s ease,
              background-color .25s ease;
}

/* フォールバック（超古いブラウザ用に一応。上書きされても害なし） */
.c__floatHeader{
  background-color: rgba(92, 92, 92, 0.90);
}

/* （任意）ほんのりガラス感を出したい時はコメントアウト解除
#floatingHeader, .floating-header{
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  backdrop-filter: blur(4px) saturate(115%);
}
*/







        .c__overlayMenu[hidden]{ display:none }

        .c__overlayMenu{
            position: fixed; inset: 0; z-index: 1000;
            display: flex; flex-direction: column;
            background: #efefef;

            /* 初期は非表示 */
            opacity: 0; visibility: hidden; pointer-events: none;

            /* 開く 0.30s、閉じる時だけ .is-hiding で 0.45s */
            --overlay-fade: .30s;
            transition: opacity var(--overlay-fade) ease;
            will-change: opacity;

            /* ★追加：中身が長い時はオーバーレイ自身がスクロールする */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .c__overlayMenu.is-visible{
            opacity:1; visibility:visible; pointer-events:auto;
        }

        .c__overlayMenu.is-hiding{
            --overlay-fade: .45s;
            opacity: 0;              /* ← ここで0へ。フェードアウトの目標値 */
            visibility: visible;     /* ← フェード中は描画を維持（これが超重要） */
            pointer-events: none;    /* ← 閉じ中は操作させない（任意） */
        }

        .c__overlayMenu__right{
            display: grid;
            grid-template-rows: var(--row-top) var(--row-btm);
        }

        .c__hamburger-btn{ z-index:1100; display:block; padding:0; border:0; background:transparent; cursor:pointer; }
        .c__global-nav, .c__global-nav-none{ display:none; }





/* メニューOPEN時（.is-open）だけは、どの幅でもボタンを強制表示＋最前面に */
.c__hamburger-btn.is-open{
  display: inline-flex !important;
  z-index: 1100;                 /* オーバーレイ(z=1000)より前面 */
  position: fixed;               /* 画面基準で固定＝オーバーレイに埋もれない */
  top: max(14px, env(safe-area-inset-top));   /* ノッチ考慮で少し下げる */
  right: var(--edge-pad);        /* 既存の余白トークンに沿って配置 */
}





        @media (min-width:1180px){
            /* PC時は“ヘッダー内の横並びメニューだけ”表示 */
            .l__header .c__global-nav { display:flex; }

            /* PC時のヘッダー内ハンバーガーは通常は隠す（※メニューOPEN時は後述で強制表示） */
            .l__header .c__hamburger-btn { display:none; }

            /* オーバーレイ内では“横並びメニュー類”は常に出さない */
            .c__overlayMenu .c__global-nav,
            .c__overlayMenu .c__global-nav-none { display:none !important; }
            }







        /* ハンバーガーを開くときに body.no-scroll { overflow:hidden; } を付けて縦スクロールバーが消える→ビューポート幅が数 px 広がり、レイアウトが押し広げられるためです（Windows だと特に顕著）。 */
            /* この問題の対策用途 */
            /* 1) 幅ブレ防止：no-scroll中は右にスクロールバー幅だけ余白を足す */
            body.no-scroll { overflow:hidden; padding-right: var(--sbw, 0px); }

            /* 2) 即閉じ用の no-anim でトランジションを無効化 */
            .c__overlayMenu.no-anim { transition: none !important; }

            /* 即閉じ時の保険！ ロゴのトランジションも切る（チラつき防止） */
            .c__overlayMenu.no-anim .c__overlayMenu-logo {
            transition: none !important;
            }


        /* ===== ロゴアニメーション ===== */
            /* 初期状態：オーバーレイ内のロゴは少し左＆透明 */
            .c__overlayMenu .c__overlayMenu-logo {
            opacity: 0;
            transform: translateX(calc(-1 * var(--logo-in-shift)));
            transition:
                transform var(--logo-in-dur) ease-out var(--logo-in-delay),
                opacity  var(--logo-in-dur) ease-out var(--logo-in-delay);
            will-change: transform, opacity;
            }

            /* オーバーレイが表示(is-visible)になったら、左→定位置＆フェードイン */
            .c__overlayMenu.is-visible .c__overlayMenu-logo {
            opacity: 1;
            transform: translateX(0);
            }


        /* ===== グローバルメニュー ===== */
            /* 各行：下線。最初の行だけ上線も付ける → 上から下まで均一なラインに */
            .c__overlayMenu__global-nav li {
            border-bottom: 1px solid #d7d7d7; /* 薄グレー */
            }
            .c__overlayMenu__global-nav li:first-child {
            border-top: 1px solid #d7d7d7;
            }

            .c__overlayMenu__global-nav a {
            display: flex;
            align-items: center;
            min-height: clamp(52px, 6vw, 64px);        /* 行の高さ */
            padding-left: clamp(24px, 6vw, 64px);      /* 左インデント（広め） */
            /* font-size: clamp(16px, 2.3vw, 22px); */
            letter-spacing: .12em;
            transition:
                color .18s ease,
                background-color .18s ease,
                padding-left .18s ease;
            -webkit-tap-highlight-color: transparent;  /* モバイルの青ハイライト防止 */
            }

            /* ホバー：色を少し濃く＋ほんの少し右にスライド（タッチでは無効） */
            @media (hover:hover){
                .c__overlayMenu__global-nav a:hover {
                    color: #6f6f6f;
                    background-color: rgba(0,0,0,.03);
                    padding-left: calc(clamp(24px, 6vw, 64px) + 6px);
                }
            }

            /* フォーカスリング（キーボード操作用） */
            .c__overlayMenu__global-nav a:focus-visible {
            outline: 2px solid #bdbdbd;
            outline-offset: 3px;
            border-radius: 4px;
            }


            /* 現在地表示（必要なら：リンクに aria-current="page" を付与）*/
            .c__overlayMenu__global-nav a[aria-current="page"]{
            color: #3f3f3f;
            font-weight: 600;
            }
/* ↑c__overlayMenu ///////////////////////////////////////////////////////////////////////////////////////*/










/* ↓ l__contents ///////////////////////////////////////////////////////////////////////////////////////*/



    /* ↓ l__main-copy ///////////////////////////////////////////////////////////////////////////////////////*/
    /* ===== 日本語版 Hero、ヒーロー（メインコピー） ===== */

        /* ===== 画像可変の上限幅の管理 ===== */
            /* 幅 */
                /* 「高さは“自動可変”だけど各幅帯で上限を変える」「1181px以上では固定 923px」 */
                :root{
                    --copy-max: 923px;  /* 既定の上限 */
                }
                @media (max-width: 820px){
                    :root{ --copy-max: 676px;}
                }
                @media (max-width: 819px){
                    :root{ --copy-max: 450px;}
                }
                @media (max-width:430px){
                    :root{ --copy-max: 360px;}
                }

                /* 画像ラッパーに上限・中央寄せ */
                .c__main-copy {
                /* 画面幅いっぱいでも、--copy-max を超えない */
                width: min(100%, var(--copy-max));
                margin-inline: auto;   /* 中央寄せ */
                }

/* どこか上（:root など）に追加 */
:root{
  --mc-start-alpha: .03;                     /* 先ほどの薄さ（お好みで） */
  --mc-dur: 4.0s;                            /* ← ここを増やせばゆっくり */
  --mc-ease-main: cubic-bezier(.22,.61,.36,1);
  --mc-ease-finish: cubic-bezier(.33,1,.68,1);
}

html.mc-fade .c__main-copy{
  opacity: var(--mc-start-alpha);
  transform: translateY(22px);
  filter: blur(1.4px);
  animation: mcIntro var(--mc-dur) both;
  animation-timing-function: var(--mc-ease-main);
}

/* “体感をさらにゆっくり”にするため、到達％も後ろへ寄せた版 */
@keyframes mcIntro{
  0%   { opacity:.06; transform: translateY(22px); filter: blur(1.4px);
         animation-timing-function: cubic-bezier(.22,.61,.36,1); }

  20%  { opacity:.20; }

  /* 中盤：3px→“4px”くらいにして、距離感を持続 */
  70%  { opacity:.68; transform: translateY(4px); filter: blur(.2px);
         animation-timing-function: cubic-bezier(.22,.61,.36,1); }

  88%  { opacity:.90; transform: translateY(1px); filter: blur(.1px);
         animation-timing-function: cubic-bezier(.33,1,.68,1); }

  100% { opacity:1; transform:none; filter:none; }
}







                /* 画像は常にコンテナ幅にフィット、アスペクト比維持 */
                .main-copy-img {
                width: 100%;
                height: auto;
                display: block;
                }

            /* 高さ */
                /* ===== メインコピー高さの方針 =====
                PC(≥821px) …… 952pxで固定
                431–820px …… 画面高に追従しつつ上限604px（可変）
                ≤430px     …… 画面高に追従しつつ上限563px（可変）
                */

                /* 既定の上限（PCの固定値と同じにしておく） */
                :root { --copy-cap: 952px; }

                .l__main-copy,
                .l__main-copy-en {
                /* まずは汎用フォールバック（古い環境用） */
                height: min(100vh, var(--copy-cap));
                /* 対応ブラウザでは 100dvh を優先（アドレスバー出入りに追従） */
                height: min(100dvh, var(--copy-cap));
                display: flex;
                align-items: center;
                justify-content: center;
                }

                /* ===== ブレークポイント ===== */
                    /* PC：821px以上は 952pxで固定（ビューポート依存を打ち消す） */
                    @media (min-width: 821px){
                        .l__main-copy,
                        .l__main-copy-en{ height: 952px; }
                    }

                    /* タブレット横／スマホ横など：431–820pxは上限604pxで可変 */
                    /* ★タブレット帯（431–820px）は cap=604px を共有 */
                    @media (max-width: 820px) and (min-width: 431px){
                        :root{ --copy-cap: 900px; }
                        .l__main-copy,
                        .l__main-copy-en {
                        height: min(100vh, var(--copy-cap));
                        height: min(100dvh, var(--copy-cap));
                        }
                    }

                    /* スマホ幅：430px以下は上限563pxで可変 */
                    @media (max-width:430px){
                        :root{ --copy-cap: 563px; }
                        .l__main-copy,
                        .l__main-copy-en {
                        height: min(100vh, var(--copy-cap));
                        height: min(100dvh, var(--copy-cap));
                        }
                    }


                    /* 821–1180pxは JP/EN とも “今の約60%” に */
                    @media (min-width:821px) and (max-width:1180px){
                    /* 日本語ヒーロー（JP） */
                    .c__main-copy{
                        /* ビューポートの60%か、従来上限(--copy-max)の60%のうち小さい方でキャップ */
                        inline-size: min(60vw, calc(var(--copy-max, 923px) * 0.6));
                        max-inline-size: min(60vw, calc(var(--copy-max, 923px) * 0.6));
                        margin-inline: auto;
                    }
                    }








/* ===== 英語版 Hero、ヒーロー（メインコピー） ===== */

/* 共通トークン */
:root{
    --row-gap: clamp(35px, 99.4vw, 35px);
    --row-gap-eyebrow: calc(var(--row-gap) + clamp(4px, 1.2vw, 12px));
    /* 再生時間：0.9s → 1.15s（少しだけ長め） */
    --hero-svg-dur: 1.15s;
    /* 時差：0.2s → 0.28s（行ごとの間隔をわずかに拡大） */
    --hero-svg-stagger: .28s;
    --hero-svg-base-delay: .15s; /* ★追加：先頭の“タメ” */
}

/* セクションの位置決め */
    .l__main-copy-en{
    display:grid;
    align-items:center;
    justify-items:center;
    padding-inline: var(--edge-pad);
    }


/* ラッパ：段差の元値はここで持つ（子へ継承される） */
.c__main-copy-en{
  /* PCデフォルト値（必要に応じて調整） */
  --indent2: 0ch;     /* 2行目 */
  --indent3: 5ch;     /* 3行目 */
  --indent4: 10ch;    /* 4行目 */
  --indent-max: var(--indent4);

  display:inline-block;           /* shrink-to-fit */
  inline-size: fit-content;
  max-inline-size: 100%;
  padding-right: var(--indent-max); /* 右逃げ分を予約してはみ出し防止 */
}

/* 端末別に段差だけ強弱を変えたい場合（任意） */
@media (max-width:430px){
  .c__main-copy-en{ --indent2:1.2ch; --indent3:2.4ch; --indent4:3.6ch; --indent-max:var(--indent4); }
}
@media (min-width:431px) and (max-width:1180px){
  .c__main-copy-en{ --indent2:2.2ch; --indent3:4.4ch; --indent4:6.6ch; --indent-max:var(--indent4); }
}

/* 各行（=img）の共通 */
.c__main-copy-en img{
  display:block;
  max-inline-size:100%;
  height:auto;
  line-height:0;
  will-change: transform, opacity, filter; /* アニメ用 */
}


/* ENヒーロー：EYEBROWを最長行(1197px)基準で同率縮小させる */
.main-copy-en-eyebrow-img{
  /* 100%（=ラッパー幅）の 250/1197 倍にする。最大は元サイズまでに制限 */
  /*inline-size: min(calc(100% * 250 / 1197), 250px);*/
  /* ↑最小値を設けたいなら （135.547pxまでしか効かない）*/
  inline-size: clamp(
    150px,
    max(
      calc(150px + (100vw - 430px) * (30 / 390)),           /* 430→820: 150→180 */
      min(calc(180px + (100vw - 820px) * (70 / 360)), 250px) /* 820→1180: 180→250 */
    ),
    250px
    );  /* スマホ150px、タブレ180px、PC250pxが良い塩梅 */
}


/* 行間：アイブロウだけ広め */
.c__main-copy-en > * + *{ margin-block-start: var(--row-gap); }
.main-copy-en-eyebrow-img{ margin-block-end: var(--row-gap-eyebrow); }
.main-copy-en-headline2-img {margin-block-start: 52px;}


/* === 段差（margin-leftで確定させる：アニメに上書きされない） === */
.main-copy-en-eyebrow-img   { margin-left: 0; }
.main-copy-en-headline1-img { margin-left: var(--indent2, 0px); }
.main-copy-en-headline2-img { margin-left: var(--indent3, 0px); }
.main-copy-en-headline3-img { margin-left: var(--indent4, 0px); }






/* === フェードイン（Xは触らない。Y＋わずかにスケール） === */
html.mc-fade .c__main-copy-en img{
  opacity: 0;
  transform: translateY(26px) scale(.995);
  filter: blur(1.2px);
  /* 遅延は --anim-delay を各行に持たせてここでまとめて使う */
  animation: heroSvgInY var(--hero-svg-dur) cubic-bezier(.22,.61,.36,1) var(--anim-delay, 0s) forwards;
  will-change: transform, opacity, filter;
}

/* 各SVGに“遅延”だけ変数で付与（時差演出）フォールバック付き */
.main-copy-en-eyebrow-img   { --anim-delay: var(--hero-svg-base-delay, .10s); }
.main-copy-en-headline1-img { --anim-delay: calc(var(--hero-svg-base-delay, .10s) + 1 * var(--hero-svg-stagger)); }
.main-copy-en-headline2-img { --anim-delay: calc(var(--hero-svg-base-delay, .10s) + 2 * var(--hero-svg-stagger)); }
.main-copy-en-headline3-img { --anim-delay: calc(var(--hero-svg-base-delay, .10s) + 3 * var(--hero-svg-stagger)); }

@keyframes heroSvgInY{
  0%   { opacity:.05; transform: translateY(26px) scale(.995); filter: blur(1.2px); }
  70%  { opacity:.88; transform: translateY(2px)  scale(.999); filter: blur(.2px); }
  100% { opacity:1;   transform: translateY(0)    scale(1);    filter: none; }
}




/* 動きを控える設定 */
@media (prefers-reduced-motion: reduce){
  html.mc-fade .c__main-copy-en img{
    animation:none; opacity:1; filter:none; transform:none;
  }
}



/* EN hero：431–819pxだけ全体を約60%に */
@media (min-width:431px) and (max-width:819px){
  .c__main-copy-en{
    inline-size: 60%;
    max-inline-size: 60%;
    /* .l__main-copy-en が grid で中央寄せなので追加のセンタリング指定は不要 */
  }
}

/* 821–1180pxは JP/EN とも “今の約60%” に */
@media (min-width:821px) and (max-width:1180px){

  /* 英語ヒーロー（EN） */
  .c__main-copy-en{
    /* ENは shrink-to-fit なので 60vw でシンプルに縮小 */
    inline-size: 60vw;
    max-inline-size: 60vw;
    margin-inline: auto;
  }
}
















    /* ↑ l__main-copy ///////////////////////////////////////////////////////////////////////////////////////*/



    /* ↓ l__main-top ///////////////////////////////////////////////////////////////////////////////////////*/

        /* ===== コンテンツ枠サイズの管理 ===== */
            /* 親で最低高さだけ保証し、内部の実高さに合わせて伸びる仕様
            （実際の見た目の高さは、各カードの grid-template-rows（250/250, 150/150）が作る） */

            /*  モニタ幅820px 以上は 箱高570px 固定。（これ以上小さくさせない） */
            /* 431〜819px では幅が狭くなるほど 570→1014 に滑らかに高さ増加。
            430px 以下は 1014px で頭打ち（最大高さ）。 */
            .l__main-top {
            min-height: clamp(570px, calc(-113.8461538vw + 1503.5384615px), 1014px);
            padding-block-end: 62px;
            transition: min-height .35s ease;
            }



/* ===== ベース：タブレット〜PCで3列維持 ===== */
:root{
  /* 820〜1180px の列ギャップ／端余白（必要ならお好みで調整） */
  /* gap: 16px → 70px（線形） */
  --cards-gap:  clamp(16px, calc(16px + (100vw - 820px) * (54 / 360)), 70px);
  /* edge は .l__main-top の padding ですでに確保済みなのでここでは使いません */
}

/* 3列固定。列幅は “下限0” で自由に縮む＝足りなければ250px未満にもなる */
.wrapper__fil-con-tra{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← 下限を縛らない */
  column-gap: var(--cards-gap);
  justify-content: center;
  margin-inline: auto;
}

/* タブレット〜小PC：列の “理論最大” を 300px にキャップ */
@media (min-width:820px) and (max-width:1180px){
  .wrapper__fil-con-tra{
    padding-inline: 0;
    box-sizing: border-box;
    /* 3列×300 + gap×2 を上限に。足りない時は 1fr が均等に縮む */
    --_wmax: calc(3 * 300px + 2 * var(--cards-gap));
    max-width: var(--_wmax);
    width: min(100%, var(--_wmax));
    overflow-x: clip; /* サブピクセルはみ出し対策 */
  }
}

/* PC帯（1181–1980px）：徐々に広げる（最大幅=480pxまで） */
@media (min-width:1181px) and (max-width:1980px){
  :root{
    /* gap: 70px → 140px を 1180→1980pxで線形 */
    --cards-gap: clamp(70px, calc(70px + (100vw - 1180px) * 0.0875), 140px);
  }
  .wrapper__fil-con-tra{
    --_wmax: calc(3 * 480px + 2 * var(--cards-gap));
    max-width: var(--_wmax);
    width: min(100%, var(--_wmax));
  }
}

/* 1981px〜：頭打ち（見た目が伸びすぎないよう固定） */
@media (min-width:1981px){
  :root{ --cards-gap: 140px; }
  .wrapper__fil-con-tra{
    max-width: calc(3 * 480px + 2 * var(--cards-gap));
    width: min(100%, calc(3 * 480px + 2 * var(--cards-gap)));
  }
}

/* スマホ（〜819px）は従来どおり縦1列 */
@media (max-width:819px){
  :root{
    --sp-edge: clamp(0px, (100vw - 430px) * 0.06, 20px);
    --cards-gap: clamp(24px, 6vw, 40px);
  }
  .wrapper__fil-con-tra{
    grid-template-columns: minmax(0, min(100%, 330px));
    row-gap: var(--cards-gap);
    column-gap: 0;
    width: 100%;
    max-width: 370px;
    margin-inline: auto;
    padding-inline: var(--sp-edge);
  }
}

/* 430px以下は左右パディング0で全幅 */
@media (max-width:430px){
  .wrapper__fil-con-tra{
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}







            /* ===== 映画箱、コンサル箱、輸入箱のレイアウト ===== */
                /* テキストど真ん中寄せ */
                /* カードを上下2段に（上＝テキスト、下＝画像） */
                .c__filmCard-top,
                .c__consulCard-top,
                .c__tradeCard-top {
                display: grid;
                grid-template-rows: 1fr 1fr; /* 上下半々。固定にしたければ 250px 1fr など */
                }

                /* ===== ブレークポイント ===== */
                    /* カード本体は grid で上下をキッチリ 250/250 に（モバイルは 150/150） */
                    @media (min-width: 820px){
                        .c__filmCard-top,
                        .c__consulCard-top,
                        .c__tradeCard-top {
                        display: grid;
                        grid-template-rows: 250px 250px; /* ← ここが継ぎ目ゼロの決め手 */
                        row-gap: 0;
                        }
                    }
                    @media (max-width: 819px){
                        .c__filmCard-top,
                        .c__consulCard-top,
                        .c__tradeCard-top {
                        display: grid;
                        grid-template-rows: 150px 150px;
                        row-gap: 0;
                        }
                    }



            /* ===== 画像の可変対策 ===== */
                /* 画像を入れる箱：高さはカードの仕様に合わせて固定 */
                /* <picture> を block 化＋line-height:0 でベースライン余白を完全除去 */
                .c__filmCard-top-media,
                .c__consulCard-top-media,
                .c__tradeCard-top-media {
                display: block;        /* ← inline をやめる */
                line-height: 0;        /* ← インライン空白の完全無効化 */
                inline-size: 100%;
                block-size: 100%;      /* 親の行高にフィット */
                overflow: hidden;      /* はみ出した分をトリミング */
                }


                /* スマホ帯（縦長レイアウト時）は高さ 150px */
                @media (max-width: 819px){
                    .c__filmCard-top-media,
                    .c__consulCard-top-media,
                    .c__tradeCard-top-media { block-size: 150px; }
                }


                /* 画像そのものを“カバー”で貼る。中央基準でトリミング。 */
                /* 中の <img> は “カバー貼り” */
                .c__filmCard-top-media > img,
                .c__consulCard-top-media > img,
                .c__tradeCard-top-media > img{
                display: block;        /* 画像自身の下余白も消す保険 */
                inline-size: 100%;
                block-size: 100%;
                object-fit: cover;         /* これで枠いっぱいに＝足りない方向をトリミング */
                object-position: 50% 50%;  /* 中央基準（必要なら 50% 55% など微調整） */
                transition: object-position .25s ease;
                }

                /* コンサル画像だけ少し左へ */
                .c__consulCard-top .c__consulCard-top-media img {
                object-position: 60% 50%;
                }

                /* 輸入事業画像だけ少し左へ */
                .c__tradeCard-top .c__tradeCard-top-media img {
                object-position: 60% 50%;
                }

                /* スマホで少しだけ戻したい等あれば */
                @media (max-width:819px){
                    .c__consulCard-top .c__consulCard-top-media img {
                    }
                }



            /* ===== 各3TOPカード ===== */
                .wrapper__fil-con-tra > div {
                /* 幅は Grid のトラックサイズに任せる（丸め誤差ゼロ） */
                box-sizing: border-box;
                }
                /*
                “1227px 前後で右端だけ一瞬つぶれる” 現象は、Flex の端数丸めが原因
                Grid はflexと違って、各列（=トラック）を minmax(var(--cards-min), var(--cards-max)) の範囲で連続的に解決します。
                余白は column-gap、両端は padding-inline でコントロールされ、Flex の丸め再配分が起きない
                */



                /* テキストブロックの中身（= h2）を縦横ど真ん中に */
                .c__filmCard-top-text,
                .c__consulCard-top-text,
                .c__tradeCard-top-text {
                display: grid;
                place-items: center;   /* 縦横センター */
                text-align: center;    /* 任意：文字も中央寄せ */
                }

                /* 映画制作カードのテキストエリア */
                .c__filmCard-top-text {
                    background-color : #282828;
                }
                /* コンサルカードのテキストエリア */
                .c__consulCard-top-text {
                    background-color : #5c5c5c;
                }
                /* 輸入事業カードのテキストエリア */
                .c__tradeCard-top-text {
                    background-color : #d0d0d0;
                }
    /* ↑ l__main-top ///////////////////////////////////////////////////////////////////////////////////////*/



    /* ↓ l__main-body（JP） ///////////////////////////////////////////////////////////////////////////////////////*/
        /* ===== 共通トークン（このブロックだけの見た目を完結させたい場合はここで完結）===== */
            .l__main-Body {
            /* セクション間の上下パディング（px → vw → px の滑らか遷移） *//* 最小56px、最大120px の範囲で、普段は 8vw（ビューポート幅の8%）を採用」流体（フルード）スペーシング”の指定 */
            --section-pad: clamp(56px, 8vw, 120px);
            /* ≤1180pxで17px固定、1180→1920pxで17→19に滑らか増加、≥1920pxで19px固定 */
            --lead-size: clamp(17px, calc(13.81px + 0.2703vw), 19px);
            --p-size: clamp(14px, 1.45vw, 16px);
            /* ルール線（区切り線） */
            --rule-color: rgba(255,255,255,.12);
            }

        /* ===== セクション共通レイアウト ===== */
            .l__main-Body > div {
            display: grid;
            grid-template-rows: auto auto;     /* 2行建て。　見出し → 本文 */
            /* 820pxで40px、1980pxで50pxに到達 */
            row-gap: clamp(40px, calc(40px + (100vw - 820px) * (10 / 1160)), 50px);
            /* 10/1160 ≒ 0.00862 に丸めるなら：
        row-gap: clamp(40px, calc(40px + (100vw - 820px) * 0.00862), 50px); */
            padding-block: var(--section-pad);
            position: relative;
            }

        /* ===== 上下の区切り線 ===== */
            .l__main-Body > div::before,
            .l__main-Body > div::after {
            content: "";
            position: absolute;
            inset-inline: 0;
            block-size: 1px;
            background: var(--rule-color);
            }
            .l__main-Body > div::before{ top: 0; }
            .l__main-Body > div::after{ bottom: 0; }

        /* ===== 見出し ===== */
        .l__main-Body h2 {
            margin: 0;
            font-size: var(--h2-size);
            line-height: 1.3;
            letter-spacing: .08em;
            font-weight: 700;
            color: #fff;
            text-align: center;
            text-wrap: balance; /* 2行になってもバランスよく折り返す（対応ブラウザで有効） */
            }

        /* ===== 本文カラム：中央寄せ・行長を制御（ch単位で可読性を担保）===== */
            .l__main-Body .wrapper__text {
            margin-inline: auto;
            max-inline-size: clamp(56ch, 73vw, 71ch); /* ≒ 560–720px 相当 */
            }

        /* ===== 段落のタイポグラフィ ===== */
            .l__main-Body p {
            margin: 0 0 0.9em;
            font-size: var(--p-size);
            line-height: 1.9;
            color: rgba(255,255,255,.82);
            }

        /* ===== 各ブロックの最初の1文だけ少しだけ“リード”っぽく ===== */
            .l__main-Body .wrapper__text p:first-of-type {
            font-size: var(--lead-size);
            color: rgba(255,255,255,.92);
            margin-block-end: .8em;
            }


        /* 任意：各セクションごとに微差をつけたい場合の色見本（必要なら） */
        /*
        .c__filmCard-body::before, .c__filmCard-body::after    { background: rgba(255,255,255,.10); }
        .c__consulCard-body::before, .c__consulCard-body::after{ background: rgba(255,255,255,.10); }
        .c__tradeCard-body::before, .c__tradeCard-body::after  { background: rgba(255,255,255,.10); }
        .c__profileCard-body::before, .c__profileCard-body::after{ background: rgba(255,255,255,.10); }
        */
    /* ↑ l__main-body（JP） ///////////////////////////////////////////////////////////////////////////////////////*/




    /* ↓ l__main-body（EN） ///////////////////////////////////////////////////////////////////////////////////////*/

        /* トークン（サイズ・行長） */
        html[lang="en"] .l__main-Body{
        /* パラグラフ／リード：英語はわずかに小さめ・狭めでOK */
        --p-size:   clamp(15px, 1.30vw, 17px);
        --lead-size: clamp(16px, calc(13px + 0.22vw), 18px);

        /* 行長（measure）：英語は 52–68ch 程度が快適 */
        --en-measure-min: 52ch;
        --en-measure-max: 68ch;
        }

        /* 本文カラム幅：英語だけ少しタイトに */
        html[lang="en"] .l__main-Body .wrapper__text{
        max-inline-size: clamp(var(--en-measure-min), 70vw, var(--en-measure-max));
        }

        /* 見出し：英語は字間を詰め気味＋バランス折り */
        html[lang="en"] .l__main-Body h2{
        letter-spacing: .02em;          /* JPの .08em から少し絞る */
        text-wrap: balance;             /* 2行見出しの折り返しを綺麗に */
        }

        /* 段落：ハイフネーションとロングワード対策 */
        html[lang="en"] .l__main-Body p{
        line-height: 1.85;              /* 読みやすい行間 */
        letter-spacing: .005em;         /* わずかに詰める */
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: anywhere;        /* URL等のはみ出し防止 */
        }

        /* 先頭文（リード扱い）：少しだけ強調 */
        html[lang="en"] .l__main-Body .wrapper__text p:first-of-type{
        font-size: var(--lead-size);
        letter-spacing: 0;
        margin-block-end: .9em;
        }

        /* 可能なら“きれいな改行”を採用（対応ブラウザのみ） */
        @supports (text-wrap: pretty){
        html[lang="en"] .l__main-Body p{ text-wrap: pretty; }
        }

        /* セクション上下余白はJPと共通のままでOK（必要なら微調整用）
        html[lang="en"] .l__main-Body{ --section-pad: clamp(52px, 7.5vw, 112px); }
        */
    /* ↑ l__main-body（EN） ///////////////////////////////////////////////////////////////////////////////////////*/









/* ↑ l__contents ///////////////////////////////////////////////////////////////////////////////////////*/




/* ↓ l__footer ///////////////////////////////////////////////////////////////////////////////////////*/






/* ===== テーマ変数（必要に応じて既存の :root に統合）===== */
    :root {
    --footer-bg:  #bbb;                        /* 帯のグレー */
    --footer-fg:  rgba(255,255,255,.96);       /* 文字色（ほぼ白） */
    --footer-link: rgba(255,255,255,.9);
    --footer-link-hover: #fff;

    /* --footer-pad-x: clamp(16px, 6vw, 40px);    /* 左右の余白 */
    --footer-gap:   clamp(12px, 2.2vw, 28px);  /* リンク間の間隔 */
    }

    :root{
        /* 上 padding：820→1180で +10px、1180→1920で +8px を線形。
            2本の直線を min() でつなぎ、clamp で下限30/上限48に挟む。 */
        --footer-pad-top: clamp(
        30px,
        min( calc(7.2222px + 2.7778vw),   /* 820→1180 : 30→40 */
                calc(27.2432px + 1.0811vw) ) /* 1180→1920: 40→48 */
        ,
        48px
        );

        /* 下 padding：820→1180で 20→25px、その後は25pxで頭打ち。 */
        --footer-pad-bottom: clamp(20px, calc(8.6111px + 1.3889vw), 25px);
        }

/* ===== バンド本体 ===== */
    .l__footer {
    background: var(--footer-bg);
    color: var(--footer-fg);
    }

/* ===== 中身のコンテナ（中央揃え＆幅制御）===== */
    .l__footer-contents {
    max-width: 1920px;
    margin-inline: auto;
    /* 1行で上/下をまとめて指定 */
    padding-block: var(--footer-pad-top) var(--footer-pad-bottom);
    display: grid;
    /* スマホ/タブレット ≤820px：15px固定
    821px→1920px：なめらかに 15px → 20px
    ≥1921px：20pxで頭打ち */
    row-gap: clamp(15px, calc(11.27px + 0.455vw), 20px);
    place-items: center;
    text-align: center;
    }

/* ===== ロゴ ===== */
    .c__footer_logo .footer-logo-link{ display:inline-block; line-height:0; }
    
    .c__footer_logo .logo-img{
    display:block;
    height:auto;
    /* ≤1180px は 180px固定。1181px〜1920pxで 180→250 に滑らかに増加。≥1921pxは 250pxで頭打ち */
    width: clamp(180px, calc(68.38px + 9.459vw), 250px);
    }

/* ===== ナビ（1行折り返し可・中央寄せ）===== */
    .c__footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--footer-gap);
    }
    .c__footer-nav a {
    color: var(--footer-link);
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: .08em;
    }







/* === 中央から両端へ伸びるアンダーライン（対象を拡張：言語切替も） === */
:root{
  --nav-underline-h: 2px;
  --nav-underline-offset: 6px;
  --nav-underline-dur: .36s;
  --nav-underline-ease: cubic-bezier(.22,.61,.36,1);
}

/* ベース（:relative / inline-block は対象全部へ） */
.c__global-nav a,
.c__footer-nav a,
.c__lang-switch-nav a,
.c__overlayMenu__lang-switch-nav a{
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* 擬似要素（中央原点で 0→1 に伸びる） */
.c__global-nav a::after,
.c__footer-nav a::after,
.c__lang-switch-nav a::after,
.c__overlayMenu__lang-switch-nav a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--nav-underline-offset));
  width: 100%;
  height: var(--nav-underline-h);
  background: currentColor;
  border-radius: 999px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--nav-underline-dur) var(--nav-underline-ease);
  pointer-events: none;
}

/* ホバー／フォーカスで表示 */
@media (hover:hover){
  .c__global-nav a:hover::after,
  .c__footer-nav a:hover::after,
  .c__lang-switch-nav a:hover::after,
  .c__overlayMenu__lang-switch-nav a:hover::after{
    transform: translateX(-50%) scaleX(1);
  }
}
.c__global-nav a:focus-visible::after,
.c__footer-nav a:focus-visible::after,
.c__lang-switch-nav a:focus-visible::after,
.c__overlayMenu__lang-switch-nav a:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}

/* —— 常時表示（現在地）ただし HOME(#home)は除外 —— */
.c__global-nav a[aria-current="page"]:not([href="#home"])::after,
.c__footer-nav a[aria-current="page"]:not([href="#home"])::after{
  transform: translateX(-50%) scaleX(1);
}


/* フッターの既存 hover を統一（色替えせず、下線は擬似要素に一本化） */
.c__footer-nav a:hover,
.c__footer-nav a:focus-visible{
  color: var(--footer-link);
  text-decoration: none;
}


/* === 言語切替（JP／EN）だけ値を差し替え === */
/* ヘッダーとオーバーレイ内の言語切替　共通（別設定にしたい場合はここを調整） */
.c__lang-switch-nav,
.c__overlayMenu__lang-switch-nav {
  --nav-underline-h: 1.5px;                 /* 線の太さ */
  --nav-underline-offset: 6px;              /* テキストからの距離 */
  --nav-underline-dur: .28s;                /* 伸びる速度 */
  --nav-underline-ease: cubic-bezier(.25,.8,.25,1); /* イージング */
}











/* =====スマホだけ：フッターナビを縦並び＋左寄せ */
@media (max-width: 430px){
    /* ナビ全体を左寄せに */
    .c__footer-nav{ text-align: left; }

    /* ULを縦方向へ（既存の横並びを上書き） */
    .c__footer-nav ul {
    display: flex;              /* 既存が grid でも OK。まず flex に統一 */
    flex-direction: column;     /* 縦並び */
    align-items: flex-start;    /* 左寄せ（子aがインラインでも左に） */
    gap: clamp(8px, 2.2vw, 12px); /* 項目間の余白（お好みで） */
    margin: 0;
    padding: 0;
    }

    /* 「ロゴの下、左に寄せたい」場合の保険 */
    .wrapper__footer-nav {
    align-self: flex-start;   /* 親がflexでも左端に */
    justify-self: start;      /* 親がgridでも左端に */
    margin-inline-start: 0;   /* 左余白なし */
    margin-inline-end: auto;  /* 右に余りを逃がす＝左寄せ */
    }

    /* クリック領域を安定させたい時（任意） */
    .c__footer-nav a {
    display: inline-block;
    line-height: 1.2;
    }
}
/* ↑ l__footer ///////////////////////////////////////////////////////////////////////////////////////*/







/* ↓ l__copyright ///////////////////////////////////////////////////////////////////////////////////////*/
:root{
  /* 画像に近い色味・サイズ感 */
  --copyright-bg: #555555;                 /* 濃いグレー */
  --copyright-fg: rgba(255,255,255,.96);   /* ほぼ白 */
  --copyright-top-border: rgba(0,0,0,.18); /* 上境界のうっすら線 */
}


/* デフォルト：430px〜1180pxで 5px→8px に可変（上下とも） */
:root{
  --copyright-pad-top:    clamp(5px, calc(5px + (100vw - 430px) * 0.004), 8px);
  --copyright-pad-bottom: clamp(5px, calc(5px + (100vw - 430px) * 0.004), 8px);
}


.l__copyright{
  background: var(--copyright-bg);
  color: var(--copyright-fg);
  border-top: 1px solid var(--copyright-top-border);
}

.l__copyright-contents{
  max-width: 1920px;
  margin-inline: auto;
  padding-block: var(--copyright-pad-y);
  padding-inline: var(--edge-pad); /* 既存の左右余白トークンに追従 */
  text-align: center;
}

.c__copyright p{
  margin: 0;
  line-height: 1.4;
  letter-spacing: .06em; /* 視認性を少し上げる */
}




/* スマホだけ：上5px／下10px に固定 */
@media (max-width: 430px){
  :root{
    --copyright-pad-top: 5px;
    --copyright-pad-bottom: 10px; /* iPhoneの横線対策で少し深め */
  }
}

/* 適用先（例：コピーライトの内側ラッパ） */
.l__copyright-contents{
  padding-block: var(--copyright-pad-top) var(--copyright-pad-bottom);
}

/* 可能ならノッチ（ホームインジケータ）分を自動加算：対応端末のみ効く */
@supports (padding: env(safe-area-inset-bottom)){
  .l__copyright-contents{
    padding-bottom: calc(var(--copyright-pad-bottom) + env(safe-area-inset-bottom));
  }
}
/* ↑ l__copyright ///////////////////////////////////////////////////////////////////////////////////////*/


/* 端のゴムスクロールを無効化（対応ブラウザ：iPadOS 16.4+ / Chrome / Firefox など） */
html, body{
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

/* もしバウンドで“裏”が見えても白くならない保険（コピーライト帯と同色に） */
html, body{
  background-color: var(--copyright-bg, #555555);
}