@charset "UTF-8";

/* トップ以外（no-loader-page）は最初からヘッダーを表示 */
.no-loader-page .site-header {
    transform: translateY(0);
    /* もし top:-80px 方式なら top:0; にする */
    opacity: 1;
    /* 初期状態で opacity:0 にしている場合の保険 */
}


/* 共通スタイル */

:root {
    /* Safari基準の色とフィルタ（現状と同じ） */
    --bg-top: rgba(255, 128, 0, 0.76);
    --bg-bot: rgba(220, 55, 0, 0.788);
    --bg-filter: contrast(115%) brightness(100%);
    --split: 45%;
    /* 中心（どこで色が入れ替わるか） */
    --fade: 65%;
    /* 何%の幅でグラデーションさせるか */
}

html {
    /* ビューポートに固定してタイル化を防ぐ */
    /* background: linear-gradient(to bottom, #FA803A, #EE541A) fixed; */
    min-height: 100%;
    font-family: "Jost", "Zen Kaku Gothic New",
        system-ui, -apple-system, "Segoe UI",
        "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Meiryo", sans-serif;
    font-synthesis: none;
    /* background:
        linear-gradient(to bottom, var(--bg-top), var(--bg-bot)),
        url('images/noise2.svg');
    filter: var(--bg-filter); */
    background: none;
    /* ページ全体をスムーズスクロールに */
    /* scroll-behavior: smooth; */
}

/* 背景専用レイヤー：ページ内容とは独立 */
body {
    position: relative;
    min-height: 100%;
    background: transparent;
    /* 子で上書きされないように */
    overflow-x: hidden;
}

body::before {
    content: "";
    position: absolute;
    /* 画面に貼り付け（スクロールで動かさない） */
    inset: 0;
    z-index: -1;
    /* すべての要素の背面に */
    pointer-events: none;

    /* これまでの変数をそのまま使用 */
    background:
        linear-gradient(to bottom,
            var(--bg-top) 0 calc(var(--split) - var(--fade)/2),
            var(--bg-bot) calc(var(--split) + var(--fade)/2) 100%),
        url('images/noise3.svg');

    /* 必要なら調整：タイル/拡大の見え方 */
    background-repeat: no-repeat, repeat;
    background-size: cover, auto;

    /* ← Safariの問題が出ない “専用レイヤー” にだけ filter を掛ける */
    filter: var(--bg-filter);

    /* Safariの合成安定化の保険（任意） */
    will-change: transform;
    backface-visibility: hidden;
}

/* white-screen表示中だけビューポートに固定したい */
body.is-bg-fixed::before {
    position: fixed;
    top: 0;
    left: 0;
    height: 200vh;
    /* right: 0;
    bottom: 0; */
}


/* メインコンテンツ共通 */
.main-contents {
    margin-top: 94px;
    padding: 80px 0 200px;
    position: relative;
}


/* スマホ用ホバーアクション */
/* 共通：戻りも滑らかに */
.release-link img {
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(.5, .61, .36, 1);
    display: block;
    width: 100%;
    height: auto;
}


/* RELEASEサムネイル拡大 */
/* PC/タッチパッドなど hover あり端末 */
@media (hover: hover) and (pointer: fine) {

    .release-link:hover img,
    .release-link:focus-visible img {
        transform: scale(1.04);
        transition: transform 0.5s cubic-bezier(.5, 0, .13, 1);
    }
}

/* タッチ端末：指を置いている間だけ拡大 */
@media (hover: none) {
    .release-link.is-pressed img {
        transform: scale(1.04);
        transition: transform 0.5s cubic-bezier(.5, 0, .13, 1);
    }
}

/* WORKS個別ページ サムネイル拡大 */
@media (hover: hover) and (pointer: fine) {

    .works-link:hover img,
    .works-link:focus-visible img {
        transform: scale(1.04);
        transition: transform 0.5s cubic-bezier(.5, 0, .13, 1);
    }

    .release-page-link:hover img,
    .release-page-link:focus-visible img {
        transform: scale(1.04);
        transition: transform 0.5s cubic-bezier(.5, 0, .13, 1);
    }
}

/* タッチ端末：指を置いている間だけ拡大 */
@media (hover: none) {
    .works-link.is-pressed img {
        transform: scale(1.04);
        transition: transform 0.5s cubic-bezier(.5, 0, .13, 1);
    }

    .release-page-link.is-pressed img {
        transform: scale(1.04);
        transition: transform 0.5s cubic-bezier(.5, 0, .13, 1);
    }
}

/* リクルートとコンタクトのボタン　スマホ挙動 */
/* 既存のホバー */
.btn-home:hover {
    /* transform: scale(1.02); */
    box-shadow: 0 0 3px #3a3a3a;
}

/* タッチ端末向け：指を置いている間も同じ見た目に */
@media (hover: none) and (pointer: coarse) {
    .btn-home:active {
        /* transform: scale(1.02); */
        box-shadow: 0 0 3px #3a3a3a;
    }

    /* iOSの薄いタップハイライトを消す（任意） */
    .btn-home {
        -webkit-tap-highlight-color: transparent;
    }
}

/* キーボード操作でも同等に（任意） */
.btn-home:focus-visible {
    /* transform: scale(1.02); */
    box-shadow: 0 0 3px #3a3a3a;
}


/* マウスホバーで音声・動画サムネイルが拡大 */


/* a 要素をブロック化して扱いやすく */
.works-single-thumbnail-link {
    display: block;
    position: relative;
}

/* サムネイル画像：拡大の対象 */
.works-single-thumbnail-img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s;
    will-change: transform;
}



/* ホバー時にズーム（マウス/トラックパッド環境のみ） */
@media (hover:hover) and (pointer:fine) {
    .works-single-thumbnail-link:hover .works-single-thumbnail-img {
        transform: scale(1.04);
        /* 任意の微調整 */
    }

    /* アイコンは少しだけ反応（任意） */
    .works-single-thumbnail-link:hover .play-btn__youtube {
        transform: scale(1);
    }
}

/* キーボード操作でも同等の効果（アクセシビリティ） */
.works-single-thumbnail-link:focus-visible {
    outline: 2px solid #fff;
    /* 任意のフォーカスリング */
    outline-offset: 3px;
}

.works-single-thumbnail-link:focus-visible .works-single-thumbnail-img {
    transform: scale(1.04);
}

/* 動きを控えたい設定のユーザーへ配慮（任意） */
@media (prefers-reduced-motion: reduce) {

    .works-single-thumbnail-img,
    .play-btn__youtube {
        transition: none;
    }
}

/* lazy-loading */
/* 遅延読み込みする画像の共通設定 */
/* .lazy-img {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.lazy-img.is-loaded {
    opacity: 1;
} */
:root {
    --scroll-fade-duration: 0.7s;
    /* フェード速度をここで調整 */
}

/* フェード対象の初期状態 */
.scroll-fade-target {
    opacity: 0;
    transform: translateY(0);
    transition:
        opacity var(--scroll-fade-duration) ease-out,
        transform var(--scroll-fade-duration) ease-out;
}

/* フェード完了状態 */
.scroll-fade-target.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* セクションごとに速度を変えたいとき（任意） */
.member-content-home .scroll-fade-target {
    --scroll-fade-duration: 0.8s;
}

.release-content-home .scroll-fade-target {
    --scroll-fade-duration: 0.5s;
}

/* lazy 用に、読み込み前にぼかすなどしたいとき（任意） */
/* img.lazy-img:not(.is-loaded) {
    filter: blur(4px);
}

img.lazy-img.is-loaded {
    filter: none;
} */



/* トップページMEMBERイラスト　slick画像のフェード */
:root {
    --scroll-fade-duration: 0.7s;
    /* ここを変えると全体のスピード調整 */
}

/* JS が付与した data-scroll-fade を持つ要素が対象 */
[data-scroll-fade] {
    opacity: 0;
    transform: translateY(0);
    transition:
        opacity var(--scroll-fade-duration) ease-out,
        transform var(--scroll-fade-duration) ease-out;
}

/* 一度だけ付く「見えた」状態のクラス */
[data-scroll-fade].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* WORKSシングルページのaタグ */

.works-text a {
    color: #fff;
}

.works-text a:hover {
    text-decoration: none;
}

.member-info-text a {
    color: #fff;
}

.member-info-text a:hover {
    text-decoration: none;
}

/* MEMBERページのaタグ */


/* RELEASE：リンクなし（無効）のときは指マークにしない */
a.release-page-link[data-release-link-disabled="1"],
a.release-page-link[data-release-link-disabled="1"]:hover,
a.release-page-link[data-release-link-disabled="1"]:focus {
    cursor: default;
    /* 必要なら auto でも可 */
}

/* CF7 spinner がレイアウトを押さないようにする（PC） */
.form-submitbtn-wrap {
    position: relative;
    /* 既にあるので一応OK */
}

/* CF7が差し込むスピナーを絶対配置で重ねる */
.form-submitbtn-wrap .wpcf7-spinner {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* CF7の各項目エラー（.wpcf7-not-valid-tip）を、既存の.error-messageと同じ見た目にする */
.error-message,
.wpcf7-not-valid-tip {
    margin-top: 10px;
    font-size: 14px !important;
    background-color: #EC5218;
    display: inline-block !important;
    padding: 2px 4px;
    color: #fff !important;
}

/* お問い合わせ内容の専用エラー枠：文字が入るまで完全に隠す */
.inc38-contacttype-tip:empty {
    display: none !important;
    /* ← display:inline-block !important を打ち消す */
    padding: 0 !important;
    /* 念のため */
    background: transparent !important;
}

.wpcf7-response-output {
    margin: 40px 0 0 0 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    width: 100%;
    padding: 12px !important;
    border: 1px solid #ffffff !important;
    background: #EC5218 !important;
}

.optional-input {
    font-size: 12px;
}

.wpcf7 form .wpcf7-response-output .about-maillink {
    color: #fff;
    text-decoration: underline;
    word-break: break-word;
}

.wpcf7 form .wpcf7-response-output .about-maillink:hover {
    text-decoration: underline;
    word-break: break-word;
}

.wpcf7 .cf7-hidden {
    display: none !important;
}


.recruit-job__inner> :first-of-type {
    margin-top: 0;
}

.recruit-job__inner> :last-of-type {
    margin-bottom: 0;
}


/* ノートPC版メディアクエリ */
@media screen and (min-width:1200px) and (max-width:1599px) {

    /* 固定ページデフォルトテンプレート用コンテンツ幅 */
    .main-contents--page {
        padding: 0 190px;
    }

    .menu {
        display: none;
    }

    /* ハンバーガー */
    .slide-menu-back {
        display: none;
    }


    .site-header__left {
        width: 203px;
    }

    .site-footer__left {
        width: 203px;
    }

    .site-header {
        width: 100%;
        height: 94px;
        background-color: rgb(255, 255, 255);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }

    .site-header__logo-img {
        width: 80px;
        height: auto;
        margin-left: 40px;
    }


    .gnav-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 55px;
    }

    .gnav-link {
        color: #FF9B45;
        text-decoration: none;
        font-size: 14px;
        font-weight: 450;
        transition: 0.5s;
    }

    .gnav-link:hover {
        color: #E74407;
    }

    .site-header__right {
        width: 210px;
        display: flex;
        justify-content: space-between;
        margin-right: 40px;
    }

    .language-menu {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .language-menu__link {
        color: #FF9B45;
        text-decoration: none;
        font-size: 12px;
        font-weight: 450;
        display: block;
        width: 28px;
        aspect-ratio: 1 /1;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        border: 1.5px transparent solid;
    }

    .language-menu__link:hover {
        color: #E74407;
    }

    .language-menu__jp-link {
        text-indent: 2px;
    }

    .lanuage-selected {
        border: 1.5px #FF9B45 solid;
    }

    .lanuage-selected:hover {
        border: 1.5px #E74407 solid;
    }

    .preload-icons::before {
        content: "";
        position: fixed;
        inset: -9999px;
        /* 画面外に追い出す */
        width: 1px;
        height: 1px;
        background:
            url("images/tsubu-icon--hover.png") no-repeat -9999px -9999px,
            url("images/insta-icon-b.png") no-repeat -9999px -9999px;
    }

    .site-header__icon-menu {
        display: flex;
        width: 78px;
        justify-content: space-between;
        align-items: center;
    }

    .site-header__icon-insta {
        display: block;
        aspect-ratio: 30 / 29.6;
        width: 24px;
        height: auto;
        background-image: url(images/insta-icon-a.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
    }

    .site-header__icon-insta:hover {
        background-image: url(images/insta-icon-b.png);
    }


    .site-header__icon-tsubu {
        display: block;
        width: 35px;
        aspect-ratio: 50 / 38.1;
        height: auto;
        background-image: url(images/tsubu-icon.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
    }

    .site-header__icon-tsubu:hover {
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(images/tsubu-icon--hover.png);
    }


    /* 親を相対配置に、ベースライン余白を無効化 */
    .site-header__icon-link {
        position: relative;
        display: inline-block;
        line-height: 0;
    }

    /* 共通パーツ */
    .heading-main {
        font-size: 28px;
        font-weight: 450;
        letter-spacing: 0.5px;
        color: #fff;
        text-align: center;
    }


    /* HOME WORKS */

    .heading-main-works {
        margin: 0 0 60px;
    }

    .works-list {
        padding: 0 190px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 45px 40px;
    }

    .works-thumb-wrap {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .works-play-btn {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 8%;
        height: auto;
        transition: 0.5s;
    }

    .works-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        position: absolute;
        display: block;

        transform: scale(1);

        /* ★ここがポイント：opacity も一緒にアニメーション対象にする */
        transition:
            opacity 0.6s ease,
            transform 0.5s cubic-bezier(.5, .61, .36, 1);
    }

    .works-client {
        font-size: 12px;
        font-weight: 350;
        color: #fff;
        margin: 5px 0 0 0;
    }

    .works-composer {
        font-size: 12px;
        font-weight: 350;
        color: #fff;
        margin: 3px 0 0 0;
    }

    .works-title {
        font-family: "Jost", "Zen Kaku Gothic New",
        system-ui, -apple-system, "Segoe UI",
        "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Meiryo", sans-serif;
        font-size: 16px;
        font-weight: 450;
        color: #fff;
        margin: 6px 0 2px 0;
        line-height: 1.35;
    }

    .works-producer {
        font-size: 12px;
        font-weight: 350;
        margin: 3px 0 2px 0;
        color: #fff;
    }

    .colon {
        margin: 0 2px;
    }

    .viewall-btn {
        display: block;
        width: 70px;
        height: 70px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        font-size: 18px;
        font-weight: 450;
        color: #FF9B45;
        text-decoration: none;
        letter-spacing: 0.5px;
        margin: 80px auto 200px auto;
        text-align: center;
        line-height: 1.2;
        transition: 0.5s;
    }

    .viewall-btn:hover {
        color: #E74407;
    }

    /* HOME COMPANY */

    .company-content-home {
        margin: 0 0 200px 0;
        scroll-margin-top: 134px;
    }

    .heading-main-company {
        margin: 0 0 60px;
    }

    .company-content-wrapper {
        padding: 0 190px;
        display: flex;
        justify-content: center;
        gap: 42px;
    }

    .company-content-left {
        width: 50%;
    }

    .company-content-left__map {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;

    }

    .company-content-right {
        width: 50%;
    }

    /* ベース */
    .googlemap {
        position: relative;
        isolation: isolate;
        contain: paint;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;

        /* 調整用の変数（18系/Chromeの基準） */
        --map-overlay: #ff7b00;
        --map-opacity: .6;
        --map-mode: color;
    }

    /* Safariが背面まで染めるのを防ぐ白下地 */
    .googlemap::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: 0;
    }

    /* iframe本体 */
    .googlemap iframe {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        /* 親の aspect-ratio にフィット */
        display: block;
        filter: grayscale(1) contrast(1.0) brightness(1.00);
        transform: translateZ(0);
        /* 合成分離で霞軽減 */
    }

    /* オレンジ被せ */
    .googlemap::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        background: var(--map-overlay);
        mix-blend-mode: var(--map-mode);
        opacity: var(--map-opacity);
        will-change: opacity;
        transform: translateZ(0);
    }

    /* —— Safari 17系だけ“安全策B”に切替 —— */

    /* var() をやめて、疑似要素と iframe を直接上書きする */
    .googlemap.safari-safe::after {
        mix-blend-mode: multiply;
        /* color だと霞む */
        background: #ff8555;
        /* 明るめオレンジに変更 */
        opacity: .34;
        /* 0.25〜0.34で現物調整 */
    }

    /* var() 経由ではなく、直接 iframe に上書き */
    .googlemap.safari-safe>iframe.company-content-left__map {
        -webkit-filter: grayscale(1) brightness(1.00) contrast(1.00) !important;
        filter: grayscale(1) brightness(1.15) contrast(1.05) !important;
    }


    /* 会社情報 */
    .company-info-list {
        display: grid;
        grid-template-columns: 95px 1fr;
        gap: 10px 0;
        font-size: 14px;
        color: #fff;
        margin-bottom: 30px;
    }

    /* 英語コンテンツ切り替え時 */
    .is-lang-en .company-info-list {
        grid-template-columns: 150px 1fr;
    }


    .company-info-content__position {
        margin-bottom: 10px;
    }

    .company-info-heading {
        font-size: 14px;
        color: #fff;
        font-weight: normal;
        margin-bottom: 10px;
    }

    .company-info-address {
        font-style: normal;
    }

    .our-business {
        font-size: 14px;
        color: #fff;
        line-height: 200%;
        list-style: decimal;
        margin-left: 1.50em;
    }


    /* MEMBER HOME */

    .member-content-home {
        margin: 0 0 200px 0;
    }

    .heading-main-member {
        margin: 80px 0 60px;
    }

    .member-list {
        width: 65%;
        max-width: 1024px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 78px 90px;
    }


    .member-img {
        width: 100%;
        max-width: 240px;
        height: auto;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
    }


    .member-profession {
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        margin: 8px 0 0 0;
        width: 100%;
        /* height: 1em; */

    }

    .member-name {
        font-size: 18px;
        font-weight: 450;
        color: #fff;
        margin: 10px 0 0 0;
        line-height: 100%;
    }


    .member-info-wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }



    .member-info-wrap-right {
        align-self: flex-end;
    }

    .member-more-btn {
        display: block;
        width: 70px;
        height: 18px;
        background-color: #F27A3E;
        border: 1px solid #fff;
        border-radius: 18px;
        text-decoration: none;
        /* display: flex;
        justify-content: center;
        align-items: center; */
        text-align: center;
        line-height: 14px;
        font-size: 14px;
        color: #fff;
        transition: 0.5s;
    }

    .member-more-btn:hover {
        background-color: #E74407;
    }

    /*STUDIO HOME*/

    /* トップページ slick PC版 */
    .heading-pagetitle {
        text-align: center;
        margin: 55px 0 0 0;
        font-size: 28px;
        font-weight: 500;
        color: #fff;
    }

    .release-title {
        margin: 8px 0 0 0;
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        width: 184px;
        /* word-break: break-all; */
        line-height: 1.35;
    }

    .release-producer-name {
        margin: 2px 0 0 0;
        font-size: 12px;
        font-weight: 300;
        color: #fff;
        width: 184px;
        line-height: 1.4;
    }

    .carousel {
        margin: 55px auto 0 auto;
        overflow-y: hidden;
    }

    .slick-wrapper {
        padding: 0 190px;
        position: relative;
    }


    /* サムネイルのサイズ調整 */
    .slide-item {
        width: 184px;
        max-width: 100%;
        margin: 0 35px 0 0;
        display: flex;
        flex-direction: column;
    }

    .slide-inner {
        aspect-ratio: 1 / 1;
        /* 画像の比率を統一したい場合に便利（任意） */
        overflow: hidden;
    }

    .slide-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* 矢印の位置調整 */
    .slick-wrapper .slick-prev {
        left: 15px;
        top: 92px;
    }

    .slick-wrapper .slick-next {
        right: 15px;
        top: 92px;
    }

    .viewall-btn-release {
        color: #E74407;
    }

    .viewall-btn-release:hover {
        color: #FF9B45;
    }

    /* RECRUIT HOME */

    .recruit-block__label--br {
        display: block;
    }

    .recruit-content-home {
        font-size: 14px;
        width: 18em;
        margin: 0 auto;
        margin-bottom: 200px;
    }

    .is-lang-en .recruit-content-home {
        font-size: 14px;
        width: 24em;
        margin: 0 auto;
        margin-bottom: 200px;
    }

    .heading-main-recruit {
        margin-bottom: 60px;
    }

    .text--main-recruit {
        color: #fff;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .list-main-recruit {
        list-style: disc;
        font-size: 14px;
        color: #fff;
        line-height: 200%;
        margin-left: 2em;

    }

    .contact-content-home__mail-link {
        color: #fff;
        text-decoration: none;
    }

    .contact-content-home__mail-link:hover {
        text-decoration: underline;
    }


    /* CONTACT HOME */
    .contact-content-home {
        margin: 0 auto 0;
        font-size: 14px;
        text-align: center;
        /* width: 63em; */
    }

    .heading-main-contact {
        margin-bottom: 60px;
    }

    .text--main-contact {
        color: #fff;
        font-size: 14px;
    }

    /* リクルートとコンタクトのボタン */
    .btn-home {
        display: block;
        width: 240px;
        height: 35px;
        background-color: #fff;
        margin: 70px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #EC5218;
        font-family: "Jost", "Zen Kaku Gothic New",
            system-ui, -apple-system, "Segoe UI",
            "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Noto Sans JP", "Meiryo", sans-serif;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
    }

    .btn-home:hover {
        transform: scale(1.02);
        box-shadow: 0 0 3px #636363;

    }

    /* フッター */
    .site-footer {
        width: 100%;
        height: 137px;
        padding-top: 36px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .site-footer>*:last-child {
        flex: 0 0 100%;
        /* ここで改行＝1行占有 */
        display: flex;
        /* 中身を右寄せするため内側をflex化 */
        justify-content: flex-end;
        /* 右端に配置 */
    }

    .site-footer__logo-img {
        width: 80px;
        height: auto;
        margin-left: 40px;
    }


    .site-footer__right {
        width: 210px;
        display: flex;
        justify-content: space-between;
        margin-right: 40px;
    }

    .site-footer__language-menu {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .site-footer__icon-menu {
        display: flex;
        width: 78px;
        justify-content: space-between;
        align-items: center;
    }

    .copyright {
        color: #FF9B45;
        font-size: 12px;
        font-weight: normal;
        padding-right: 40px;
    }

    .totop-btn-wrapper {
        position: fixed;
        /* ふだんは画面固定 */
        right: 30px;
        bottom: 30px;
        z-index: 50;
        opacity: 0;
        /* フェード用 */
        visibility: hidden;
        transition: opacity .5s ease, visibility .5s;
        pointer-events: none;
        /* 非表示時はクリック不可 */
    }

    .totop-btn-wrapper.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* フッターが見えたら、親(.main-contents)基準で「中に固定」= フッターと重ならない */
    .totop-btn-wrapper.is-stuck {
        position: absolute;
        /* ← ここで親基準に切替 */
        right: 30px;
        bottom: 30px;
        /* 親の下端から30px = フッターに重ならない */
    }

    /* （お好み）iOSのタップハイライトを消す */
    .totop-btn-link {
        -webkit-tap-highlight-color: transparent;
    }


    /* WORKSページ */

    .workspage-heading-works {
        margin: 0 0 60px;
    }

    .works__category-menu {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
        margin: 0 0 70px 0;
    }

    .works__category-menu-link {
        color: #fff;
        font-size: 13px;
        font-weight: 450;
        text-decoration: none;
        padding: 2px 12px;
        transition: 0.3s;
    }

    .works__category-menu-link:hover {
        color: #E74407;
        font-size: 13px;
        font-weight: 450;
        text-decoration: none;
    }

    .works__category-menu-link--current-page {
        color: #fff;
        background-color: #F36A2D;
        border-radius: 40px;
    }

    .works__category-menu-link--current-page:hover {
        color: #fff;
    }

    .works__category-menu .current-menu-item>.works__category-menu-link {
        color: #fff;
        background-color: #F36A2D;
        border-radius: 40px;
    }

    .works__category-menu .current-menu-item>.works__category-menu-link:hover {
        color: #fff;
    }



    /* WORKS個別ページ */
    .works-single-contents {
        max-width: 1024px;
        width: 55%;
        margin: 0 auto;
    }

    .works-single-heading {
        font-size: 22px;
        font-weight: 400;
        color: #fff;
        margin-bottom: 11px;
    }

    .works-single-thumbnail-img-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        position: relative;
        overflow: hidden;
        margin-bottom: 15px;
    }

    .works-single-thumbnail-img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .play-btn__youtube {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 32px;
        height: auto;
    }

    .works-single-contents__info {
        margin-top: 15px;
    }

    .works-text {
        color: #fff;
        line-height: 1.75;
        margin: 15px 0 100px;
        font-size: 14px;
        font-weight: normal;
    }



    .pagination-menu {
        padding: 0 190px;
        width: 100%;
        display: flex;
        /* justify-content: space-between; */
    }

    /* Previous Work 側だけ、左の余白を自動で広げる */
    .pagination-item-prev {
        margin-left: auto;
    }

    .pagination-link {
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
        transition: 0.3s;
    }

    .pagination-link:hover {
        color: #ffac38;
    }

    .pagination-link-previous::after {
        content: ">";
        margin-left: 5px;
    }

    .pagination-link-next::before {
        content: "<";
        margin-right: 5px;
    }


    /* RELEASEページ */

    .release-page-list {
        padding: 0 190px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 80px 35px;
    }

    .release-page-thumb-wrap {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .release-page-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        position: absolute;
        transform: scale(1);
        transition:
            opacity 0.6s ease,
            transform 0.5s cubic-bezier(.5, .61, .36, 1);
        display: block;
        width: 100%;
        height: auto;
    }

    .release-page-title {
        font-family: "Jost", "Zen Kaku Gothic New",
            system-ui, -apple-system, "Segoe UI",
            "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Noto Sans JP", "Meiryo", sans-serif;
        font-size: 14px;
        font-weight: 450;
        color: #fff;
        margin: 10px 0 2px 0;
        line-height: 1.35;
    }

    .release-page-producer {
        font-size: 12px;
        font-weight: 350;
        color: #fff;
    }

    .release-page-p-name {
        font-size: 12px;
        font-weight: 350;
        color: #fff;
    }

    /* MEMBERページ */

    .member-contents {
        padding: 0 190px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 117px 120px;
    }

    .member-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 0 40px;
        color: #fff;
        border-bottom: 2px solid #fff;
        padding-bottom: 40px;
        /* background-color: rgb(69, 255, 118); */
    }

    .sns-icon-list--member-page {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 12%;
    }

    .member-info--member-page {
        margin-top: 6%;
        width: 50%;
        position: relative;
    }

    .member-info-toggle-btn {}

    .member-face--member-page-wrapper {
        /* min-width: 200px; */
        width: calc(50% - 40px);
    }

    .member-face--member-page {
        width: 100%;
        height: auto;
        border-radius: 50%;
    }

    .member-profession--member-page {
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 4px;
    }

    .member-name-en--member-page {
        font-size: 22px;
        font-weight: 450;
        margin-bottom: 4px;
    }

    .member-name-jp--member-page {
        font-size: 14px;
        font-weight: 400;
        /* margin-bottom: 12%; */
    }

    /* =========================================================
   - スピード／イージングは現状維持
   - “カクつき”対策：contain / backface-visibility / 3D化 / reflow負荷の抑制
   - 40px余白は ::before で内包（現状維持）
   ========================================================= */

    .member-info-text {
        max-height: 0;
        overflow: hidden;
        margin-top: 0;
        font-size: 14px;
        line-height: 1.5;

        /* ★フェード用（現状維持） */
        opacity: 0;
        transform: translate3d(0, 30px, 0);
        /* ← translateY を3D化して滑らかに */
        transition:
            max-height .22s ease,
            opacity .12s ease,
            transform .15s ease;

        /* ★閉じ側は遅延なし（現状維持） */
        transition-delay: 0s, 0s, 0s;

        /* ★最適化：描画範囲を絞り、GPU合成を促す */
        will-change: max-height, opacity, transform;
        contain: layout paint;
        /* ←効くことが多い（問題出たら外す） */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-origin: top;
    }

    /* ★「上の余白40px」は要素内に持つ（max-heightで一緒に開閉） */
    .member-info-text::before {
        content: "";
        display: block;
        height: 40px;
    }

    /* ★開いているとき：フェードイン（現状維持） */
    .member-container.is-open .member-info-text {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        /* ← 3Dのまま戻す */

        /* ★開く側のみディレイ（現状維持） */
        transition-delay: 0s, .1s, .1s;
        /* max-height, opacity, transform の順 */
    }

    /* ★アクセシビリティ：動きを減らす設定（任意だが推奨） */
    @media (prefers-reduced-motion: reduce) {
        .member-info-text {
            transition: none !important;
            transform: none !important;
        }
    }


    .member-container {
        scroll-margin-top: 110px;
    }

    /* ★本文は別クラスで表示（フェードイン時だけ少し遅らせる） */
    .member-container.is-visible .member-info-text {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s, 0s, .08s, .08s;
        /* max-height/marginは遅延なし、本文だけ遅延 */
    }

    /* 任意：動きを減らす設定の人向け */
    @media (prefers-reduced-motion: reduce) {
        .member-info-text {
            transition: none;
        }
    }



    /* RECRUITページ */
    .recruit-contents {
        width: 80%;
        max-width: 1024px;
        margin: 0 auto;
        color: #fff;
        font-family: "Jost", "Zen Kaku Gothic New",
            system-ui, -apple-system, "Segoe UI",
            "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Noto Sans JP", "Meiryo", sans-serif;
    }

    .recruit-block__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        border-bottom: 1px solid #fff;
    }

    .recruit-block__inner2 {
        padding: 37px 0 0 0;
        border-bottom: none;
    }

    /* h3 */
    .recruit-block__label {
        width: 200px;
        font-size: 18px;
        font-family: "Jost", "Zen Kaku Gothic New",
            system-ui, -apple-system, "Segoe UI",
            "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Noto Sans JP", "Meiryo", sans-serif;
        font-weight: 450;
        /* background-color: cornflowerblue; */
    }

    .recruit-block__content {
        width: calc(100% - 200px);
        /* padding-right: 20px; */
        /* background-color: rgb(58, 200, 200); */
    }

    /* h4 */
    .recruit-job__title {
        font-size: 16px;
        font-weight: 450;
    }


    .recruit-job__header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 32px;
    }


    /* アコーディオン本体のアニメーション用 */
    /* .recruit-job__body {
        font-size: 14px;
    } */

    /* 開いているときの状態 */
    /* .recruit-job__body.is-open {
        opacity: 1;
    } */

    /* Recruit accordion（MEMBERと同じ動き） */
    .recruit-job__body {
        max-height: 0;
        overflow: hidden;

        font-size: 14px;

        /* ★フェード用 */
        opacity: 0;
        transform: translateY(30px);

        transition:
            max-height .22s ease,
            opacity .12s ease,
            transform .15s ease;

        /* ★閉じ側は遅延なし */
        transition-delay: 0s, 0s, 0s;

        will-change: max-height, opacity, transform;
    }

    /* ★「上の余白40px」は要素内に持つ（max-heightで一緒に開閉） */
    .recruit-job__body::before {
        content: "";
        display: block;
        /* height: 40px; */
    }

    /* ★開いているとき：フェードイン（開くときだけ少し遅らせる） */
    .recruit-job.is-open .recruit-job__body {
        opacity: 1;
        transform: translateX(0);
        /* MEMBERに合わせて同じ指定（必要なら translateY(0) でもOK） */

        /* max-height, opacity, transform の順 */
        transition-delay: 0s, .1s, .1s;
    }



    .recruit-job__list {
        width: 87%;
    }

    .recruit-job__text {
        width: 87%;
        line-height: 1.7;
        margin-left: 1em;
        margin-bottom: 0;
    }

    .recruit-job__term {
        margin-bottom: 10px;
        font-weight: 500;
    }

    .recruit-job__desc {
        margin-left: 1em;
    }

    .recruit-job__docs {
        line-height: 1.7;
    }

    .recruit-application__heading {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 22px;
    }

    .recruit-application__subheading {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .recruit-application__address {
        font-size: 14px;
        font-style: normal;
        line-height: 1.7;
        /* margin-left: 1em; */
        margin-bottom: 16px;
    }

    .recruit-application__body {
        font-size: 14px;
        font-style: normal;
        line-height: 1.7;
        margin-left: 1em;
        margin-bottom: 37px;
    }

    .recruit-application__text {
        /* font-size: 14px;
        font-style: normal;
        line-height: 1.7;
        margin-left: 1em; */
        margin-bottom: 37px;
    }

    .recruit-application__email {
        font-size: 14px;
        /* margin-left: 1em; */
        margin-bottom: 16px;
    }

    .recruit-application__email-link {
        color: #fff;
        text-decoration: none;
        transition: 0.3s;
    }

    .recruit-application__email-link:hover {
        text-decoration: underline;
    }

    .recruit-application__notes {
        font-size: 14px;
        font-style: normal;
        line-height: 1.7;
        /* margin-left: 1em; */
        margin-bottom: 37px;
    }

    .recruit-application__cta {
        margin-left: 1em;
        margin-top: 50px;
    }

    /* Recruit 追加コンテンツ */

    /* 2つ目以降の recruit-job だけ header に適用 */
    .recruit-job:not(:first-child)>.recruit-job__header {
        border-top: 1px solid #ffffff;
        padding-top: 37px;
    }

    .recruit-job__row:not(:last-child) {
        margin-bottom: 35px;
    }

    /* パネルの“中”に余白を作る（scrollHeightに含まれる） */
    .recruit-job__panel::after {
        content: "";
        display: block;
        height: 35px;
    }



    /* 「応募する」ボタン */
    .btn-apply {
        display: block;
        width: 240px;
        height: 35px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #EC5218;
        font-family: "Jost", "Zen Kaku Gothic New",
            system-ui, -apple-system, "Segoe UI",
            "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Noto Sans JP", "Meiryo", sans-serif;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
    }

    .btn-apply:hover {
        transform: scale(1.02);
        box-shadow: 0 0 3px #636363;

    }

    .not-recruiting-text {
        text-align: center;
        font-size: 18px;
    }


    /* CONTACTページ */
    .contact-contents {
        max-width: 1280px;
        width: 65%;
        margin: 0 auto;
    }

    .contact-text-wrap {
        text-align: center;
    }

    .contact-text {
        font-size: 14px;
        line-height: 175%;
        color: #fff;
        margin: 0 0 70px 0;
        display: inline-block;
        text-align: left;
    }

    /* 参考　https://ferret-plus.com/9120?page=2 */

    .radiobtn-wrap {
        border-bottom: 1px solid #fff;
        padding-bottom: 27px;
        margin-bottom: 30px;

    }

    .form-parts-wrap {
        display: grid;
        grid-template-columns: 280px 1fr !important;
        margin-bottom: 23px;
    }

    .form-label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        height: 40px;
        line-height: 40px;
    }

    .form-label-radio {
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
        line-height: 40px;
    }

    .form-comfirm-text {
        font-size: 14px;
        color: #313131;
        font-weight: 400;
        line-height: 40px;
    }

    .form-comfirm-text--textarea {
        line-height: 175%;
        padding-top: 8px;
    }

    .form-singleline {
        width: 100%;
        height: 40px;
        background-color: #fff;
        border: 1px solid #D3D3D3;
        font-size: 14px;
        color: #313131;
        padding: 8px;
    }

    .checkbox-span {
        display: flex;
    }

    .form-border {
        border-bottom: 1px solid #fff;
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .form-multiline {
        width: 100%;
        height: 240px;
        background-color: #ffffff;
        border: 1px solid #D3D3D3;
        font-size: 14px;
        color: #313131;
        line-height: 175%;
        padding: 8px;
        /* margin-bottom: 23px; */
    }

    .radiobtn-span {
        font-size: 14px;
        color: #fff;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
    }

    .redio-btn {
        margin-right: 4px;
    }


    .form-note {
        font-size: 10px;
        color: #fff;
        margin-top: 5px;
    }

    /*確認画面*/

    .confirm-text-single {
        font-size: 14px;
        color: #fff;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        line-height: 40px;
    }

    .confirm-text-multi {
        font-size: 14px;
        color: #fff;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        line-height: 175%;
        white-space: pre-wrap;
        /* 改行を保持しつつ、折り返しもする */
        overflow-wrap: anywhere;
        /* 長いURL等もはみ出さない */
        word-break: break-word;
        /* 古いブラウザ向け保険 */
    }

    .confirm-back {
        margin: 50px 0;
    }

    .confirm-backlink {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        transition: 0.5s;
    }

    .confirm-backlink:hover {
        text-decoration: underline
    }

    .wpcf7-previous {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        transition: 0.5s;
        background: none;
        border: none;
    }

    .wpcf7-previous:hover {
        text-decoration: underline
    }


    /* エラーメッセージ */

    /* .error-message {
        margin-top: 10px;
        font-size: 14px !important;
        color: #ffffff;
        background-color: #EC5218;
        display: inline-block;
        padding: 2px 4px;
        color: #fff !important;
    } */

    /* .wpcf7-not-valid-tip {
        margin-top: 10px;
        font-size: 14px !important;
        color: #ffffff;
        background-color: #EC5218;
        display: inline-block !important;
        padding: 2px 4px;
        color: #fff !important;
    } */

    /* .wpcf7-not-valid-tip {
        margin: 8px 0 0 0 !important;
        font-size: 12px !important;
        color: #ffffff !important;
    } */



    .form-submitbtn-wrap {
        display: flex;
        justify-content: flex-end;
        margin: 47px 0 0 0;
        padding: 0;
        position: relative;
    }


    .form-submitbtn {
        display: block;
        width: 240px;
        height: 35px;
        background-color: #fff;
        border: 0;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #EC5218;
        font-family: "Jost", "Zen Kaku Gothic New",
            system-ui, -apple-system, "Segoe UI",
            "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Noto Sans JP", "Meiryo", sans-serif;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
    }

    .form-submitbtn:hover {
        transform: scale(1.02);
        box-shadow: 0 0 3px #636363;

    }

    input:focus,
    textarea:focus {
        outline: none;
    }

    /*STUDIOページ*/
    .studio-photo-wrapper {
        border-bottom: 2px solid #fff;
    }

    .studio-photo {
        display: block;
        padding-bottom: 80px;
    }

    .studio-contents {
        max-width: 1024px;
        width: 55%;
        margin: 0 auto;
    }

    .studio-block__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding-top: 40px;
        padding-bottom: 10px;
        margin-bottom: 80px;
        border-bottom: 2px solid #fff;
    }

    .studio-name {
        font-size: 18px;
        font-weight: 450;
        color: #fff;
        margin-bottom: 10px;
    }

    .studio-block__label {
        width: 160px;
        font-size: 16px;
        font-weight: 450;
        color: #fff;
        /* background-color: cornflowerblue; */
    }

    .studio-gear-type {
        font-size: 16px;
        font-weight: 450;
        margin-bottom: 4px;
    }

    .studio-gear-model {
        font-size: 14px;
        font-weight: 300;
        margin-bottom: 30px;
        line-height: 160%;
    }

    .studio-block__content {
        width: calc(100% - 160px);
        font-size: 16px;
        color: #fff;
        /* padding-right: 20px; */
        /* background-color: rgb(58, 200, 200); */
    }

}


/* 固定ヘッダー分だけ下げたいアンカーの見出しに指定 */
#company,
#contact,
#works,
#main-contents {
    scroll-margin-top: 148px;
    /* PCヘッダーの高さ＋ちょい余白（目安） */
}

/* SP用にヘッダーが低いならメディアクエリで変更 */
@media (max-width: 750px) {

    #company,
    #contact,
    #works,
    #main-contents {
        scroll-margin-top: 92px;
        /* SPヘッダー高さに合わせて調整 */
    }
}