@charset "UTF-8";
/*
Theme Name: T-shoeisangyo
Template: arkhe
Version: 1.0.1
Author: Taiga.K
*/

@import url('https://fonts.googleapis.com/css2?family=Carlito:wght@400;700&family=Figtree:ital,wght@1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carlito:wght@400;700&family=Figtree:ital,wght@1,700&family=Zen+Kaku+Gothic+New:wght@700&display=swap');

/* =========================================================
   1. サイト全体の背景（50pxの格子柄）
========================================================= */
body {
    background-color: #FFFFFF;
    background-image:
        linear-gradient(to right, #F0F0F0 1px, transparent 1px),
        linear-gradient(to bottom, #F0F0F0 1px, transparent 1px);
    background-size: 50px 50px;
    /* ★ Gridを画面に完全固定！これで背景の質感が上がり、隠しトリックが使えるようになる！ */
    background-attachment: fixed; 
    margin: 0;
    font-family: sans-serif;
}

/* =========================================================
   2. ヘッダー共通レイアウト
========================================================= */
.l-header {
    width: 100%;
    position: relative;
    z-index: 100;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.l-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 100%;
    padding: 0 !important;
}

.l-header__logo {
    margin: 0;
    padding: 0;
    line-height: 1;
    position: relative;
    z-index: 1000;
}

.l-header__logo img {
    width: 165px !important;
    height: 120px !important;
    display: block;
    object-fit: fill;
}

/* =========================================================
   PC版ヘッダー：スクロール判定による出し入れ
========================================================= */
@media screen and (min-width: 1025px) {
    .l-header__nav {
        /* ★ メニューを画面右上に完全に固定（追従）させる */
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1000;
        /* ★ ヌルッと出入りする滑らかなアニメーション */
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* ★ JSでこのクラスが付与されると、画面の上(-100%)にスッと隠れる！ */
    .l-header__nav.is-hidden {
        transform: translateY(-100%);
    }
}

/* =========================================================
   3. ナビゲーション（PC版）
========================================================= */
.l-header__nav {
    background-color: #00006E;
    border-radius: 0 0 0 50px;
    margin: 0;
    padding: 0 30px;
    width: 100%;
    max-width: 800px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.l-header__menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.l-header__menu a {
    color: #FFFFFF;
    font-family: 'Carlito', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    display: block;
    transition: opacity 0.3s ease;
}

.l-header__menu a:hover {
    opacity: 0.7;
}

.l-header__menu li.has-slash {
    display: flex;
    align-items: center;
}

.l-header__menu li.has-slash::after {
    content: '/';
    color: #FFFFFF;
    font-family: 'Carlito', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px;
}

.l-header__menu li.is-contact {
    margin-left: 10px;
}

.l-header__menu li.is-contact a {
    background-color: #FF9600;
    color: #24252A;
    width: 115px;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    padding: 0;
}

.l-header__menu li.is-contact a:hover {
    background-color: #e68700;
    opacity: 1;
}

.c-hamburger {
    display: none;
}

/* =========================================================
   4. レスポンシブ＆ハンバーガーメニュー（1024px以下）
========================================================= */
@media screen and (max-width: 1024px) {

    /* ★ スマホ・タブレット時のロゴ縮小（PC版の !important を上書き！） */
    .l-header__logo img {
        width: 100px !important; /* 主張しすぎないシュッとしたサイズ感（お好みで 80px や 120px に調整してくれ！） */
        height: auto !important; /* 高さは比率を保って自動調整 */
    }

    .c-hamburger {
        display: block;
        position: absolute;
        top: 25px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1000;
        outline: none;
    }

    .c-hamburger span {
        position: absolute;
        left: 10px;
        width: 30px;
        height: 3px;
        background-color: #00006E;
        border-radius: 2px;
        transition: all 0.4s ease;
    }

    .c-hamburger span:nth-of-type(1) { top: 14px; }
    .c-hamburger span:nth-of-type(2) { top: 24px; }
    .c-hamburger span:nth-of-type(3) { top: 34px; }

    .c-hamburger.is-active span {
        background-color: #FFFFFF;
    }
    .c-hamburger.is-active span:nth-of-type(1) {
        top: 24px;
        transform: rotate(45deg);
    }
    .c-hamburger.is-active span:nth-of-type(2) {
        opacity: 0;
    }
    .c-hamburger.is-active span:nth-of-type(3) {
        top: 24px;
        transform: rotate(-45deg);
    }

    .l-header__nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        background-color: rgba(10, 41, 95, 0.95);
        border-radius: 0;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        z-index: 999;
        transform: translateY(-100%);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .l-header__nav.is-active {
        transform: translateY(0);
    }

    .l-header__menu {
        flex-direction: column;
        gap: 30px;
    }

    .l-header__menu li.has-slash::after {
        display: none;
    }

    .l-header__menu a {
        font-size: 20px;
    }

    .l-header__menu li.is-contact {
        margin-left: 0;
        margin-top: 20px;
    }
}

/* =========================================================
   6. フッターレイアウト
========================================================= */
.l-footer {
    background-color: #00006E;
    color: #FFFFFF;
    width: 100%;
    font-family: "A P-OTF A1Gothic StdN", "A1Gothic StdN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
}

.l-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    max-width: 1920px;
    margin: 0 auto;
    padding: 50px 400px;
    box-sizing: border-box;
}

.l-footer__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.l-footer__logo {
    margin-bottom: 43px;
}

.l-footer__logo img {
    width: 110px;
    height: 65px;
    display: block;
    object-fit: contain;
}

.l-footer__info p {
    font-size: 16px;
    margin: 0 0 15px 0;
    line-height: 1.2;
}
.l-footer__info p:last-child {
    margin-bottom: 0;
}

.l-footer__right {
    width: 124px;
    height: 210px;
}

.l-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.l-footer__nav li {
    position: relative;
    line-height: 1;
    width: 100%;
}

.l-footer__nav a:not(.insta-link) {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: inline-block;
    font-family: 'Carlito', sans-serif;
    font-weight: 400;
    font-size: 16px;
    white-space: nowrap;
}

.l-footer__nav a:hover {
    opacity: 0.7;
}

.l-footer__nav li.has-icon .insta-link {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 15px;
    display: block;
    width: 30px !important;
    height: 30px !important;
    z-index: 10;
}

.l-footer__nav li.has-icon .insta-link img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
}

@media screen and (max-width: 1400px) {
    .l-footer__inner {
        padding: 50px 10%; 
    }
}

@media screen and (max-width: 1024px) {
    .l-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 50px 20px;
        gap: 50px;
    }
    .l-footer__right {
        height: auto;
    }
    .l-footer__nav {
        gap: 20px;
    }
}

/* =========================================================
   8. FV（First View）セクション
========================================================= */
.p-fv {
    width: 100%;
    min-height: 960px; 
    position: relative;
    overflow: hidden; 
    background-color: transparent;
}

.p-fv__inner {
    display: flex;
    justify-content: flex-end; 
    align-items: center; 
    max-width: 1920px; 
    margin: 0 auto;
    height: 100%;
    position: relative;
    z-index: auto; 
}

/* ------------------------------
   右側：画像スライダー
------------------------------ */
.p-fv__slider {
    width: 1165px; 
    height: 900px; 
    /* ★ これが最強の解決策！数学的に画面右端までの距離を計算して突き破る魔法！ */
    margin-right: calc(50% - 50vw) !important;
    margin-left: auto; 
    border-radius: 100px 0 0 100px;
    overflow: hidden; 
    z-index: auto !important; 
}

.p-fv__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* ------------------------------
   Lottieアニメーション
------------------------------ */
.p-fv__lottie {
    position: absolute;
    top: 45%; /* ★ 共有もらった微調整 */
    left: 52%; /* ★ 共有もらった微調整 */
    transform: translate(-50%, -50%);
    width: 105%; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; 
    pointer-events: none; 
}
.p-fv__lottie lottie-player {
    width: 100%; 
    height: auto;
}

/* ------------------------------
   左側：文字コンテンツの箱
------------------------------ */
.p-fv__content {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start; 
    align-items: center; 
    z-index: auto; 
    pointer-events: none; 
}

.p-fv__content-inner {
    width: 1253.43px; 
    height: auto; 
    max-width: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: flex-start; 
    padding-left: 195px; 
    box-sizing: border-box;
    pointer-events: auto; 
    z-index: auto; 
}

/* タイトルエリア */
.p-fv__title-area {
    position: relative;
    width: 100%;
    margin-bottom: 60px; 
    z-index: auto; 
}

/* 前面のメインコピー（自動ネガポジ反転） */
.p-fv__main-copy {
    position: relative;
    z-index: 10; 
    font-family: 'Figtree', sans-serif;
    font-weight: 700; 
    font-style: italic; 
    font-size: 100px; 
    color: #FFFFFF; 
    mix-blend-mode: difference;
    line-height: 1.05; 
    margin: 0;
    letter-spacing: -0.01em; 
}

/* キャッチコピー */
.p-fv__catch {
    position: relative;
    padding-left: 30px; 
    margin-left: 20px; 
    z-index: auto; 
}

/* キャッチコピー左の太い一本線 */
.p-fv__catch::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 0; 
    transform: translateY(-50%); 
    width: 10px;  
    height: 73px; 
    background-color: #00006E; 
    z-index: 10; 
}

/* キャッチコピーのテキスト（自動ネガポジ反転） */
.p-fv__catch-text {
    position: relative;
    z-index: 10; 
    color: #FFFFFF; 
    mix-blend-mode: difference; 
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 400;
    font-size: 16px;  
    line-height: 1.6; 
    margin: 0;
}

/* =========================================================
   9. FV レスポンシブ
========================================================= */
@media screen and (max-width: 1400px) {
    .p-fv__content-inner {
        padding-left: 80px; 
    }
    .p-fv__main-copy {
        font-size: 80px; 
    }
}

@media screen and (max-width: 1024px) {
    .p-fv {
        min-height: auto; 
        height: auto;
    }
    .p-fv__inner {
        flex-direction: column-reverse; 
        padding: 50px 20px;
        align-items: flex-start;
        height: auto;
    }
    
.p-fv__slider {
        width: 100%; 
        height: calc(100vw * 900 / 1165); 
        border-radius: 30px; 
        /* ★ スマホ時は突き破り魔法を解除して元に戻す！ */
        margin-right: 0 !important;
        margin-left: 0;
        margin-top: 30px; 
    }
    
    .p-fv__lottie {
        display: none !important;
    }

    .p-fv__content {
        position: relative; 
        top: auto;
        left: auto;
        height: auto;
    }
    .p-fv__content-inner {
        width: 100%;
        height: auto;
        padding-left: 0;
    }
    
    /* ★ 変更：メインコピーのサイズを50pxから45pxに縮小！ */
    .p-fv__main-copy {
        font-size: 45px; 
    }

    .p-fv__title-area {
        margin-bottom: 30px;
    }
    
    .p-fv__catch {
        margin-left: 0; 
    }

    .p-fv__catch::before {
        height: 50px; 
    }
    .p-fv__catch-text {
        font-size: 14px; 
    }
}

/* =========================================================
   10. WORKS セクション
========================================================= */
.p-works {
    width: 100%;
    padding: 100px 0 150px; 
    background-color: transparent;
    position: relative;
}

/* Lottieヘッダー（画面上部にピタッと追従） */
.p-works__header {
    width: 100%; 
    position: sticky; 
    /* ★ 修正ポイント①：上の余白を消す！ */
    /* top: 0; ではなく、マイナス値を指定すると「画面の外（上）」にはみ出た状態で固定される！ */
    top: -40px; /* ← Lottieの上の余白に合わせて -30px や -60px など微調整してくれ！ */
    z-index: 10; 
    margin-bottom: 60px; 
}

/* ★ WORKS文字の下でカードを綺麗に消す最強のバリア！ */
.p-works__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* ★ 修正ポイント②：消える位置を下にズラす！ */
    /* バリアの「丈の長さ」を伸ばすことで、カードが消え始める位置が下がるぜ！ */
    height: 80%; /* ← 60%から80%に増やした。足りなければ 85% や 90% に増やしてみてくれ！ */
    
    background-color: #FFFFFF;
    background-image:
        linear-gradient(to right, #F0F0F0 1px, transparent 1px),
        linear-gradient(to bottom, #F0F0F0 1px, transparent 1px);
    background-size: 50px 50px;
    background-attachment: fixed;
    z-index: -1; 
    -webkit-mask-image: -webkit-linear-gradient(top, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.p-works__header lottie-player {
    width: 100%;
    height: auto;
    /* ★ 効かなかった margin-top: -40px; は削除してOKだ！ */
}

/* カードを包む制限幅の箱 */
.p-works__inner {
    max-width: 1280px; 
    margin: 0 auto;
    padding: 0 20px;
}

/* リスト全体 */
.p-works__list {
    display: grid;
    grid-template-columns: repeat(3, 360px); 
    gap: 50px; 
    justify-content: center; 
    position: relative;
    /* ★ Stickyヘッダー(z:10)とバリア(z:-1)の間に潜り込ませてカードを消す！ */
    z-index: 1; 
}

/* 各枠（W360 × H310） */
.p-works__item {
    width: 360px;
    height: 310px;
    background-color: #24252A; 
    border-radius: 0; 
    padding: 25px 25px 0 25px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    box-sizing: border-box;
    text-decoration: none;
}

/* ★ 超シンプル化した画像の枠（W310 × H235） */
.p-works__img {
    width: 310px !important; 
    height: 235px !important;
    border-radius: 15px; /* ここで角アールをバシッとつける */
    overflow: hidden;    
    flex-shrink: 0; 
    margin-bottom: 0;
}

/* 超シンプル化した画像本体 */
.p-works__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 枠に合わせて綺麗にトリミング */
    display: block !important;
    /* transitionやposition:absoluteなどの複雑な魔法は全削除！ */
    /* ★ デフォルト：画像の無駄な余白を消すために1.1倍にズーム */
    transform: scale(1.1); 
    /* ★ アニメーションを追加：0.4秒かけてふんわり動かす */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 下部のテキスト＆矢印エリア */
.p-works__info {
    height: 50px; 
    display: flex;
    justify-content: space-between;
    align-items: center; 
    width: 100%;
}

.p-works__title {
    color: #FFFFFF;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 400; 
    font-size: 16px; 
    margin: 0;
    line-height: 1.2;
}

/* 矢印エリア */
.p-works__arrow {
    position: relative;
    width: 24px; 
    height: 24px;
    flex-shrink: 0;
}

.p-works__arrow img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important; /* ★ 念のためここも!important */
    height: auto !important;
    transition: opacity 0.3s ease; 
}

/* ホバー時の矢印（初期は透明） */
.p-works__arrow .is-hover {
    opacity: 0;
}

/* =========================================================
   11. WORKS ホバーアクション
========================================================= */
/* ★ 画像の拡大（scale）アニメーションを復活！ */
/* 大枠（.p-works__item）にホバーしたら、中の画像（img）をさらに拡大！ */
.p-works__item:hover .p-works__img img {
    /* デフォルトの1.1倍から、さらに拡大させて1.15倍に！ 
       これで「角アールの枠」はそのままで、中の画像だけがフワッと迫ってくる動きになるぜ！ */
    transform: scale(1.15); 
}

/* 大枠にホバーしたら、矢印だけを切り替え！ */
.p-works__item:hover .p-works__arrow .is-default {
    opacity: 0;
}
.p-works__item:hover .p-works__arrow .is-hover {
    opacity: 1;
}

/* =========================================================
   12. WORKS レスポンシブ
========================================================= */
@media screen and (max-width: 1200px) {
    .p-works__list {
        grid-template-columns: repeat(2, 360px); 
    }
}

@media screen and (max-width: 768px) {
    .p-works__list {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    .p-works__item {
        width: 100%;
        max-width: 360px;
    }
    .p-works__img {
        width: 100%;
    }
}

/* =========================================================
   13. PERFORMANCE セクション
========================================================= */
.p-performance {
    width: 100%;
    padding: 0 0 150px; 
    background-color: transparent;
    position: relative;
    /* ★ WORKSセクションの上に被さるようにする */
    z-index: 2; 
}

/* ★ Lottieヘッダー（WORKSと同じ挙動で、重なったらWORKSを押し出す！） */
.p-performance__header {
    width: 100%; 
    position: sticky; 
    top: -40px; /* WORKSの top と数値を合わせてくれ！ */
    z-index: 10; 
    margin-bottom: 60px; 
}

/* ★ WORKSと同じ、文字の下でカードを綺麗に消す最強のバリア！ */
.p-performance__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* WORKSで微調整した数値に合わせてくれ！ */
    background-color: #FFFFFF;
    background-image:
        linear-gradient(to right, #F0F0F0 1px, transparent 1px),
        linear-gradient(to bottom, #F0F0F0 1px, transparent 1px);
    background-size: 50px 50px;
    background-attachment: fixed;
    z-index: -1; 
    -webkit-mask-image: -webkit-linear-gradient(top, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.p-performance__header lottie-player {
    width: 100%;
    height: auto;
}

/* リストを包む制限幅の箱 */
.p-performance__inner {
    max-width: 1100px; /* 3列(300*3=900) + 余白(70*2=140) を安全に囲む幅 */
    margin: 0 auto;
    padding: 0 20px;
}

/* インスタグラムアイコン（80x80） */
.p-performance__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 70px;
}

.p-performance__icon a {
    display: block;
    transition: opacity 0.3s ease;
}

.p-performance__icon a:hover {
    opacity: 0.6; /* ホバーで少し薄くする */
}

/* リスト全体（★ 3列×2行、余白70px！） */
.p-performance__list {
    display: grid;
    grid-template-columns: repeat(3, 300px); 
    gap: 70px; /* ★ 指定の上下左右70pxマージン */
    justify-content: center; 
    position: relative;
    z-index: 1; 
}

/* 各画像枠（W300 × H300） */
.p-performance__item {
    width: 300px;
    height: 300px;
    display: block;
    overflow: hidden; 
    position: relative;
    background-color: #F0F0F0; /* 画像読み込み前の仮背景 */
    transform: translateZ(0); 
}

/* 画像本体 */
.p-performance__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* ホバーで画像だけフワッと拡大 */
.p-performance__item:hover img {
    transform: scale(1.05);
}

/* =========================================================
   14. PERFORMANCE レスポンシブ
========================================================= */
@media screen and (max-width: 1100px) {
    .p-performance__list {
        grid-template-columns: repeat(2, 300px); /* 画面が狭くなったら2列に */
        gap: 40px;
    }
}

@media screen and (max-width: 768px) {
    .p-performance__list {
        grid-template-columns: 1fr; /* スマホ時は1列に */
        gap: 30px;
    }
    .p-performance__item {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}


/* =========================================================
   15. COMPANY セクション
========================================================= */
.p-company {
    width: 100%;
    /* Lottieヘッダーのマイナス分(-40px)を考慮して上余白は0、一番下は指定通り120pxあける！ */
    padding: 0 0 120px; 
    background-color: transparent;
    position: relative;
    z-index: 3; /* 前のセクションの上に被さるようにする */
}

/* Lottieヘッダー（スクロールで押し出し） */
.p-company__header {
    width: 100%; 
    position: sticky; 
    top: -40px; 
    z-index: 10; 
    margin-bottom: 120px; /* ★ Lottieの下を120pxあける */
}

/* 前のセクションを消すバリア */
.p-company__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; 
    background-color: #FFFFFF;
    background-image:
        linear-gradient(to right, #F0F0F0 1px, transparent 1px),
        linear-gradient(to bottom, #F0F0F0 1px, transparent 1px);
    background-size: 50px 50px;
    background-attachment: fixed;
    z-index: -1; 
    -webkit-mask-image: -webkit-linear-gradient(top, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.p-company__header lottie-player {
    width: 100%;
    height: auto;
}

/* コンテンツを中央にまとめる箱 */
.p-company__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* ★ すべて中央揃え！ */
    text-align: center;  /* ★ テキストも中央揃え！ */
    position: relative;
    z-index: 1;
}

/* 見出し（Zen Kaku Gothic New） */
.p-company__heading {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 50px;
    color: #24252A;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin: 0 0 120px 0; /* ★ 見出しの下を120pxあける */
}

/* 本文テキスト */
.p-company__text {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W5", sans-serif;
    font-weight: 500; /* W5相当 */
    font-size: 16px;
    color: #24252A;
    line-height: 50px; /* ★ 指定の行間50px */
    letter-spacing: 0.15em; /* ★ 指定の文字間隔15% */
    margin: 0 0 120px 0; /* ★ テキストの下を120pxあける */
}

/* ボタン */
.p-company__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px; /* ★ 指定サイズ W300 */
    height: 50px; /* ★ 指定サイズ H50 */
    background-color: #FF9600; /* オレンジ */
    color: #FFFFFF; /* 白文字 */
    border-radius: 25px; /* ★ 完全な横長角丸（高さの半分） */
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W5", sans-serif;
    font-weight: 500; /* W5相当 */
    font-size: 16px;
    letter-spacing: 0.15em; /* ★ 指定の文字間隔15% */
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.p-company__btn:hover {
    opacity: 0.8;
    transform: translateY(-3px); /* ホバーで少しフワッと浮く */
}

/* =========================================================
   16. COMPANY レスポンシブ（スマホ版の調整）
========================================================= */
@media screen and (max-width: 768px) {
    .p-company__header {
        margin-bottom: 60px; /* スマホでは余白を半分にする */
    }
    .p-company__heading {
        font-size: 30px; /* 見出しをスマホサイズに */
        margin-bottom: 60px;
    }
    .p-company__text {
        font-size: 14px;
        line-height: 2; /* スマホでは行間を少し詰めて読みやすく */
        margin-bottom: 60px;
    }
    .p-company {
        padding-bottom: 80px;
    }
}

/* =========================================================
   17. RECRUIT セクション
========================================================= */
.p-recruit {
    width: 100%;
    padding: 100px 0; 
    background-color: transparent;
    position: relative;
    z-index: 4; 
    margin: 100px 0;
}

/* 箱を中央に配置するためのラッパー */
.p-recruit__inner {
    max-width: 1160px; /* 箱の幅1120 + 左右余白20*2 */
    margin: 0 auto;
    padding: 0 20px;
}

/* ★ メインコンテンツの紺色の箱（W1120 × H430） */
.p-recruit__box {
    width: 100%;
    max-width: 1120px;
    height: 430px;
    margin: 0 auto;
    background-color: #00006E; /* ボタンの文字色と同じネイビー */
    border-radius: 30px; /* スクショに合わせた角丸 */
    padding: 50px; /* ★ 上下左右に50pxの余白 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* 左側：テキスト＆ボタンエリア */
.p-recruit__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上下いっぱいに要素を散らす */
    height: 100%; /* 親の高さ(330px)に合わせる */
    width: 480px; /* 画像と被らないように幅を制限 */
}

/* 見出し（Figtree Bold Italic） */
.p-recruit__heading {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 30px;
    color: #FF9600; /* オレンジ */
    margin: 0;
    line-height: 1;
}

/* 本文テキスト */
.p-recruit__text {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W5", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 50px; /* 行間50 */
    letter-spacing: 0.15em; /* 文字間隔15% */
    margin: 0;
}

/* ★ 募集要項ボタン（W467 × H50） */
.p-recruit__btn {
    width: 467px;
    height: 50px;
    background-color: #FFFFFF;
    border-radius: 25px; /* 完全な角丸（ピル型） */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 文字と矢印を左右に分ける */
    padding: 0 10px 0 40px; /* 左に40pxの隙間、右の矢印は10pxの隙間 */
    box-sizing: border-box;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.p-recruit__btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.p-recruit__btn-text {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W5", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #00006E; /* 紺色 */
    letter-spacing: 0.15em;
}

/* ボタン右端の矢印画像（W30 × H30） */
.p-recruit__btn-icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.p-recruit__btn-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 右側：画像エリア（W500 × H330） */
.p-recruit__img {
    width: 500px;
    height: 330px;
    border-radius: 15px; /* 角アール */
    overflow: hidden;
    flex-shrink: 0;
    transform: translateZ(0); /* カクカク防止の魔法 */
}

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

/* =========================================================
   18. RECRUIT レスポンシブ（スマホ版の調整）
========================================================= */
@media screen and (max-width: 1024px) {
    .p-recruit__box {
        flex-direction: column;
        height: auto; /* 高さを自動に */
        padding: 40px 20px;
        border-radius: 20px;
    }
    .p-recruit__content {
        width: 100%;
        gap: 30px; /* 縦並びの隙間 */
        margin-bottom: 40px;
    }
    .p-recruit__text {
        font-size: 14px;
        line-height: 2;
    }
    .p-recruit__btn {
        width: 100%; /* スマホではボタンを幅いっぱいに */
        max-width: 400px;
    }
    .p-recruit__img {
        width: 100%;
        height: auto;
        aspect-ratio: 500 / 330; /* 画像の比率を保つ */
    }
}



/* ==========================================================
   WORKS PAGE スタイル
   Figma Frame 38 (node: 236:327) 準拠
   ※ オーバーレイは背景画像側で処理済みのためCSS側には持たない

   Google Fonts 追加（functions.phpのenqueueに追記）:
   https://fonts.googleapis.com/css2?family=Archivo:ital,wght@1,700&family=Inter:wght@400;500&display=swap
========================================================== */

/* ----------------------------------------------------------
   ページタイトル（ヘッダー直下 "WORKS"）
   Figma: Archivo Bold Italic / 60px / tracking 12px / left 342px
---------------------------------------------------------- */
.p-works-page__title-area {
    padding: 80px 0 60px 342px;
    box-sizing: border-box;
}

.p-works-page__title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 12px;
    color: #24252A;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------
   各セクション共通
   Figma: W1920 × H1080 / 背景画像オーバーレイ込み
---------------------------------------------------------- */
.p-works-section {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1080;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* ----------------------------------------------------------
   テキストブロック
   Figma: pl-[300px] pr-[1170px] / gap-[35px] / justify-center
---------------------------------------------------------- */
.p-works-section__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-left: 300px;
    padding-right: 1170px;
    box-sizing: border-box;
    width: 100%;
}

/* 文字色: 暗系背景 → 白 */
.p-works-section--white .p-works-section__content {
    color: #FFFFFF;
}

/* 文字色: 明系背景 → ダーク */
.p-works-section--dark .p-works-section__content {
    color: #24252A;
}

/* ----------------------------------------------------------
   見出し（35px / Medium / tracking 3.5px）
---------------------------------------------------------- */
.p-works-section__heading {
    font-family: 'Inter', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 35px;
    line-height: 1.5;
    letter-spacing: 3.5px;
    margin: 0;
    white-space: nowrap;
}

/* ----------------------------------------------------------
   小見出し（20px / Medium / tracking 4px / 箇条書き）
---------------------------------------------------------- */
.p-works-section__subheadings {
    font-family: 'Inter', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 4px;
    list-style: disc;
    margin: 0;
    padding-left: 30px;
}

.p-works-section__subheadings li {
    margin-bottom: 0;
}

/* ----------------------------------------------------------
   本文（16px / W5=500 / tracking 2.4px）
   暗系: text-shadow あり / 明系: text-shadow 白
---------------------------------------------------------- */
.p-works-section__body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    margin: 0;
    width: 700px;
}

.p-works-section--white .p-works-section__body {
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}

.p-works-section--dark .p-works-section__body {
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}

/* ----------------------------------------------------------
   レスポンシブ（1440px以下）
---------------------------------------------------------- */
@media screen and (max-width: 1440px) {
    .p-works-page__title-area {
        padding-left: 150px;
    }

    .p-works-section__content {
        padding-left: 150px;
        padding-right: 60px;
    }

    .p-works-section__heading {
        white-space: normal;
    }

    .p-works-section__body {
        width: 100%;
        max-width: 700px;
    }
}

/* ----------------------------------------------------------
   レスポンシブ（1024px以下）
---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .p-works-page__title-area {
        padding: 40px 30px 30px;
    }

    .p-works-page__title {
        font-size: 44px;
        letter-spacing: 8px;
    }

    .p-works-section {
        aspect-ratio: auto;
        min-height: 600px;
    }

    .p-works-section__content {
        padding: 80px 40px;
        gap: 28px;
    }

    .p-works-section__heading {
        font-size: 26px;
    }

    .p-works-section__subheadings {
        font-size: 17px;
    }

    .p-works-section__body {
        font-size: 14px;
        line-height: 32px;
    }
}

/* ----------------------------------------------------------
   レスポンシブ（768px以下）
---------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .p-works-page__title {
        font-size: 36px;
        letter-spacing: 6px;
    }

    .p-works-section {
        min-height: 500px;
    }

    .p-works-section__content {
        padding: 60px 24px;
        gap: 22px;
    }

    .p-works-section__heading {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .p-works-section__subheadings {
        font-size: 15px;
        letter-spacing: 2px;
        line-height: 32px;
    }

    .p-works-section__body {
        font-size: 13px;
        line-height: 28px;
        letter-spacing: 1.5px;
    }
}

/* =========================================================
   COMPANY PAGE
   Figma node: 19:261 準拠
   style.css 末尾に追記
========================================================= */

/* ---------------------------------------------------------
   ページタイトル "COMPANY"
   Figma: Archivo Bold Italic / 60px / tracking 12px / 中央揃え
--------------------------------------------------------- */
.p-company-page__title-area {
    width: 100%;
    text-align: center;
    padding: 80px 0 60px;
    box-sizing: border-box;
}

.p-company-page__title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 12px;
    color: #24252A;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   ページ内ラッパー
   Figma: px-[400px] / gap-[150px] / 中央揃え
--------------------------------------------------------- */
.p-company-page__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 150px;
    padding: 0 400px 150px;
    box-sizing: border-box;
    width: 100%;
}

/* ---------------------------------------------------------
   メイン画像
   Figma: W1120 × H500
--------------------------------------------------------- */
.p-company-page__hero {
    width: 1120px;
    height: 500px;
    overflow: hidden;
    flex-shrink: 0;
}

.p-company-page__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------
   会社紹介文
   Figma: Hiragino W5 / 16px / leading 50px / tracking 2.4px
          中央揃え / W1120
--------------------------------------------------------- */
.p-company-page__intro {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 50px;
    letter-spacing: 2.4px;
    color: #24252A;
    text-align: center;
    width: 1120px;
    margin: 0;
}

/* ---------------------------------------------------------
   共通セクションタイトル（会社概要 / アクセス）
   Figma: Inter Medium / 20px / leading 40px / tracking 4px
          中央揃え
--------------------------------------------------------- */
.p-company-section-title {
    font-family: 'Inter', "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 4px;
    color: #24252A;
    text-align: center;
    margin: 0 0 100px;
}

/* ---------------------------------------------------------
   会社概要セクション
--------------------------------------------------------- */
.p-company-overview {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* 会社概要テーブル
   ※ Arkheのテーブルスタイルをピンポイントで上書き
   ※ all:unset は使わない（レイアウト崩れの原因になるため）
--------------------------------------------------------- */
table.p-company-overview__table {
    width: 845px !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 2.4px !important;
    color: #24252A !important;
    table-layout: auto !important;
    background: transparent !important;
}

/* 縦線・背景を全消し、paddingをここで確定 */
table.p-company-overview__table th,
table.p-company-overview__table td {
    padding: 36px 0 !important;
    line-height: 40px !important;
    vertical-align: top !important;
    text-align: left !important;
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 横線：上下のみ上書きで復活 */
table.p-company-overview__table tbody tr > th,
table.p-company-overview__table tbody tr > td {
    border-bottom: 2px solid #24252A !important;
}

table.p-company-overview__table tbody tr:first-child > th,
table.p-company-overview__table tbody tr:first-child > td {
    border-top: 2px solid #24252A !important;
}

table.p-company-overview__table th {
    width: 180px !important;
    padding-right: 40px !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
}

table.p-company-overview__table td {
    padding-left: 40px !important;
}

/* ---------------------------------------------------------
   アクセスセクション
--------------------------------------------------------- */
.p-company-access {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.p-company-access__note {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 50px;
    letter-spacing: 2.4px;
    color: #24252A;
    text-align: center;
    margin: 0 0 60px;
    white-space: nowrap;
}

/* GoogleMap iframe
   Figma: W1120 × H500
--------------------------------------------------------- */
.p-company-access__map {
    width: 1120px;
    height: 500px;
    overflow: hidden;
    flex-shrink: 0;
}

.p-company-access__map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* =========================================================
   COMPANY PAGE レスポンシブ（1440px以下）
========================================================= */
@media screen and (max-width: 1440px) {
    .p-company-page__inner {
        padding: 0 10% 100px;
        gap: 100px;
    }

    .p-company-page__hero,
    .p-company-page__intro,
    .p-company-access__map {
        width: 100%;
    }

    .p-company-overview__table {
        max-width: 100%;
    }
}

/* =========================================================
   COMPANY PAGE レスポンシブ（1024px以下）
========================================================= */
@media screen and (max-width: 1024px) {
    .p-company-page__title {
        font-size: 44px;
        letter-spacing: 8px;
    }

    .p-company-page__inner {
        padding: 0 30px 80px;
        gap: 70px;
    }

    .p-company-page__hero {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .p-company-page__intro {
        font-size: 14px;
        line-height: 40px;
        text-align: left;
    }

    .p-company-section-title {
        font-size: 18px;
        margin-bottom: 50px;
    }

    table.p-company-overview__table th {
        width: 140px !important;
        padding-right: 30px !important;
    }

    .p-company-access__map {
        height: 400px;
    }
}

/* =========================================================
   COMPANY PAGE レスポンシブ（768px以下）
========================================================= */
@media screen and (max-width: 768px) {
    .p-company-page__title-area {
        padding: 40px 0 30px;
    }

    .p-company-page__title {
        font-size: 36px;
        letter-spacing: 6px;
    }

    .p-company-page__inner {
        padding: 0 20px 60px;
        gap: 50px;
    }

    .p-company-page__intro {
        font-size: 13px;
        line-height: 36px;
        letter-spacing: 1.5px;
    }

    /* テーブルをスマホで縦並びに */
    table.p-company-overview__table,
    table.p-company-overview__table tbody,
    table.p-company-overview__table tr {
        display: block !important;
        width: 100% !important;
    }

    table.p-company-overview__table th,
    table.p-company-overview__table td {
        display: block !important;
        width: 100% !important;
    }

    table.p-company-overview__table tbody tr > th,
    table.p-company-overview__table tbody tr > td {
        border-bottom: none !important;
    }

    table.p-company-overview__table tbody tr:first-child > th,
    table.p-company-overview__table tbody tr:first-child > td {
        border-top: none !important;
    }

    table.p-company-overview__table tbody tr {
        padding: 16px 0 !important;
        border-bottom: 1px solid #E0E0E0 !important;
    }

    table.p-company-overview__table tbody tr:first-child {
        border-top: 1px solid #E0E0E0 !important;
    }

    table.p-company-overview__table th {
        padding: 0 0 6px !important;
        font-size: 13px !important;
        color: #888 !important;
        white-space: normal !important;
    }

    table.p-company-overview__table td {
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 32px !important;
    }

    .p-company-access__map {
        height: 300px;
    }

    .p-company-access__note {
        font-size: 14px;
        white-space: normal;
        text-align: center;
    }
}

/* =========================================================
   RECRUIT PAGE
   Figma node: 269:1082 準拠
   style.css 末尾に追記
========================================================= */

/* ---------------------------------------------------------
   ページタイトル "RECRUIT"
   Figma: Archivo Bold Italic / 60px / tracking 12px / 中央揃え
--------------------------------------------------------- */
.p-recruit-page__title-area {
    width: 100%;
    text-align: center;
    padding: 80px 0 60px;
    box-sizing: border-box;
}

.p-recruit-page__title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 12px;
    color: #24252A;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   ページ内ラッパー
   Figma: px-[400px] / gap-[150px] / 中央揃え
--------------------------------------------------------- */
.p-recruit-page__inner {
    display: block;
    gap: 150px;
    padding: 0 400px 200px;
    box-sizing: border-box;
    width: 100%;
}

/* ---------------------------------------------------------
   共通セクションタイトル
   Figma: Inter Medium / 20px / leading 40px / tracking 4px
--------------------------------------------------------- */
.p-recruit-section-title {
    font-family: 'Inter', "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 4px;
    color: #24252A;
    text-align: left !important;
    margin: 0 0 40px;
    width: 100%;
}

/* ---------------------------------------------------------
   募集要項セクション
--------------------------------------------------------- */
.p-recruit-overview {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

/* 募集要項テーブル（会社概要と同方式）
   ※ Arkheのテーブル縦線を !important で完全上書き */
table.p-recruit-overview__table {
    width: 845px !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 2.4px !important;
    color: #24252A !important;
    table-layout: auto !important;
    background: transparent !important;
}

table.p-recruit-overview__table th,
table.p-recruit-overview__table td {
    padding: 36px 0 !important;
    line-height: 40px !important;
    vertical-align: top !important;
    text-align: left !important;
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 横線：上下のみ */
table.p-recruit-overview__table tbody tr > th,
table.p-recruit-overview__table tbody tr > td {
    border-bottom: 2px solid #24252A !important;
}

table.p-recruit-overview__table tbody tr:first-child > th,
table.p-recruit-overview__table tbody tr:first-child > td {
    border-top: 2px solid #24252A !important;
}

table.p-recruit-overview__table th {
    width: 180px !important;
    padding-right: 40px !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
}

table.p-recruit-overview__table td {
    padding-left: 40px !important;
}

/* ---------------------------------------------------------
   CTAセクション
   Figma: gap-[50px] / 中央揃え
--------------------------------------------------------- */
.p-recruit-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
}

/* 説明テキスト */
.p-recruit-cta__text {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 50px;
    letter-spacing: 2.4px;
    color: #24252A;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

/* 電話ボックス
   Figma: W350 × H200 / bg #00006E / rounded-[20px] / gap-[5px]
   ※ a要素だがPCではポインター無効・テキスト装飾なし
--------------------------------------------------------- */
.p-recruit-cta__tel-box {
    pointer-events: none; /* PC：クリック無効 */
    text-decoration: none;
    cursor: default;
    width: 350px;
    height: 200px;
    background-color: #00006E;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 37px;
    box-sizing: border-box;
}

.p-recruit-cta__tel-label {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

/* 区切り線 */
.p-recruit-cta__tel-divider {
    width: 284px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

/* 電話番号
   Figma: Inter Bold / 35px / tracking 1.75px
--------------------------------------------------------- */
.p-recruit-cta__tel-number {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 40px;
    letter-spacing: 1.75px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}

/* 営業時間 */
.p-recruit-cta__tel-hours {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

/* フォームボタン
   Figma: W350 × H50 / bg #FF9600 / rounded-[50px]
--------------------------------------------------------- */
.p-recruit-cta__form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 50px;
    background-color: #FF9600;
    border-radius: 50px;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 50px;
    letter-spacing: 2.4px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.p-recruit-cta__form-btn:hover {
    background-color: #e68700;
}

/* =========================================================
   RECRUIT PAGE レスポンシブ（1440px以下）
========================================================= */
@media screen and (max-width: 1440px) {
    .p-recruit-page__inner {
        padding: 0 10% 150px;
        gap: 100px;
    }
}

/* =========================================================
   RECRUIT PAGE レスポンシブ（1024px以下）
========================================================= */
@media screen and (max-width: 1024px) {
    .p-recruit-page__title {
        font-size: 44px;
        letter-spacing: 8px;
    }

    .p-recruit-page__inner {
        padding: 0 30px 100px;
        gap: 70px;
    }

    .p-recruit-section-title {
        font-size: 18px;
    }

    table.p-recruit-overview__table th {
        width: 140px !important;
        padding-right: 30px !important;
    }
}

/* =========================================================
   RECRUIT PAGE レスポンシブ（768px以下）
========================================================= */
@media screen and (max-width: 768px) {
    .p-recruit-page__title-area {
        padding: 40px 0 30px;
    }

    .p-recruit-page__title {
        font-size: 36px;
        letter-spacing: 6px;
    }

    .p-recruit-page__inner {
        padding: 0 20px 80px;
        gap: 50px;
    }

    .p-recruit-cta__text {
        font-size: 14px;
        white-space: normal;
        text-align: center;
    }

    /* テーブルをスマホで縦並びに */
    table.p-recruit-overview__table,
    table.p-recruit-overview__table tbody,
    table.p-recruit-overview__table tr {
        display: block !important;
        width: 100% !important;
    }

    table.p-recruit-overview__table th,
    table.p-recruit-overview__table td {
        display: block !important;
        width: 100% !important;
    }

    table.p-recruit-overview__table tbody tr > th,
    table.p-recruit-overview__table tbody tr > td {
        border-bottom: none !important;
    }

    table.p-recruit-overview__table tbody tr:first-child > th,
    table.p-recruit-overview__table tbody tr:first-child > td {
        border-top: none !important;
    }

    table.p-recruit-overview__table tbody tr {
        padding: 16px 0 !important;
        border-bottom: 1px solid #E0E0E0 !important;
    }

    table.p-recruit-overview__table tbody tr:first-child {
        border-top: 1px solid #E0E0E0 !important;
    }

    table.p-recruit-overview__table th {
        padding: 0 0 6px !important;
        font-size: 13px !important;
        color: #888 !important;
        white-space: normal !important;
    }

    table.p-recruit-overview__table td {
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 32px !important;
    }

    /* SP：電話リンクを有効化 */
    .p-recruit-cta__tel-box {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* CTAのボックスはSPで幅100%に */
    .p-recruit-cta__tel-box,
    .p-recruit-cta__form-btn {
        width: 100%;
        max-width: 350px;
    }

    .p-recruit-cta__tel-divider {
        width: 100%;
        max-width: 284px;
    }

    .p-recruit-cta__tel-number {
        font-size: 28px;
    }
}

/* =========================================================
   CONTACT / THANKS PAGE
   Figma node: 279:88 / 341:191 準拠
   style.css 末尾に追記
========================================================= */

/* ---------------------------------------------------------
   ページタイトル共通 "CONTACT" / "THANK YOU"
--------------------------------------------------------- */
.p-contact-page__title-area,
.p-thanks-page__inner {
    width: 100%;
    text-align: center;
    padding: 80px 0 60px;
    box-sizing: border-box;
}

.p-contact-page__title,
.p-thanks-page__title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 12px;
    color: #24252A;
    text-transform: uppercase;
    margin: 0 0 150px;
    padding: 0;
}

/* ---------------------------------------------------------
   ページ内ラッパー
--------------------------------------------------------- */
.p-contact-page__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    padding: 0 400px 200px;
    box-sizing: border-box;
    width: 100%;
}

/* ---------------------------------------------------------
   CF7フォームラッパー
   Figma: W845 / gap-[40px]
--------------------------------------------------------- */
.p-contact-form__wrap {
    width: 845px;
    max-width: 100%;
}

/* CF7のフォーム全体 */
.p-contact-form__wrap .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ---------------------------------------------------------
   各行（ラベル + 入力）
--------------------------------------------------------- */
.p-cf7-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 20px 0;  /* 上下の余白を追加 */
    border-bottom: 1px solid #E8E8E8; /* 各行に薄い区切り線 */
}

.p-cf7-row:first-child {
    padding-top: 0;
}

/* ラベルとフィールドを横並び */
.p-cf7-row--inline {
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.p-cf7-row--textarea {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* ラベル */
.p-cf7-label {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #24252A;
    margin: 0;
    flex-shrink: 0;
    width: 220px;
    white-space: nowrap; /* 2行になるのを防ぐ */
}

/* 必須マーク */
.p-cf7-required {
    color: #FF0004;
}

/* ラジオボタン（お問合せ種別）*/
.p-contact-form__wrap input[type="radio"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #EEEEEE !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    clip: auto !important;
    clip-path: none !important;
    transition: background-color 0.2s ease !important;
}

.p-contact-form__wrap input[type="radio"]:checked {
    background-color: #00006E !important;
}

.p-contact-form__wrap input[type="radio"]:checked::after {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #FFFFFF !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* テキスト入力・電話・メール */
.p-contact-form__wrap input[type="text"],
.p-contact-form__wrap input[type="tel"],
.p-contact-form__wrap input[type="email"] {
    width: 600px !important;
    height: 50px !important;
    background-color: #EEEEEE !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 10px !important;
    padding: 5px 30px !important;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 2.4px !important;
    color: #24252A !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* テキストエリア */
.p-contact-form__wrap textarea {
    width: 600px !important;
    height: 200px !important;
    background-color: #EEEEEE !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 10px !important;
    padding: 15px 30px !important;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 2.4px !important;
    color: #24252A !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    outline: none !important;
}

/* チェックボックス行（お問合せ種別） */
.p-cf7-checkboxes {
    display: flex;
    align-items: center;
    gap: 30px;       /* 横並びの間隔 */
    flex-wrap: nowrap; /* 横並び固定 */
}

.p-cf7-checkboxes .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
}

.p-cf7-checkboxes .wpcf7-list-item input[type="checkbox"] {
    width: 30px !important;
    height: 30px !important;
    background-color: #EEEEEE !important;
    border-radius: 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    border: none !important;
    position: relative !important;
}

.p-cf7-checkboxes .wpcf7-list-item input[type="checkbox"]:checked {
    background-color: #00006E !important;
}

.p-cf7-checkboxes .wpcf7-list-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1;
}

.p-cf7-checkboxes .wpcf7-list-item-label {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #24252A;
    cursor: pointer;
}

/* ---------------------------------------------------------
   プライバシーポリシー行
--------------------------------------------------------- */
.p-cf7-row--privacy {
    flex-direction: column;
    gap: 15px;
}

.p-cf7-privacy-wrap .wpcf7-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.p-cf7-privacy-wrap .wpcf7-list-item input[type="checkbox"] {
    display: block !important;   /* Arkheのdisplay:noneを上書き */
    visibility: visible !important;
    opacity: 1 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    background-color: #EEEEEE !important;
    border-radius: 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    border: none !important;
    position: relative !important;
    margin: 0 !important;
}

.p-cf7-privacy-wrap .wpcf7-list-item input[type="checkbox"]:checked {
    background-color: #00006E !important;
}

.p-cf7-privacy-wrap .wpcf7-list-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1;
}

/* 「プライバシーポリシー」水色リンク */
.p-cf7-privacy-wrap .wpcf7-list-item-label .p-contact-privacy-link,
.p-cf7-privacy-link {
    color: #0077FF !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

/* ---------------------------------------------------------
   カスタムプライバシーチェックボックス（CF7から切り離し）
--------------------------------------------------------- */
.p-cf7-privacy-custom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-cf7-privacy-label {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    user-select: none;
}

/* カスタムチェックボックスUI */
.p-cf7-privacy-checkbox-custom {
    display: inline-block;
    width: 30px;
    height: 30px;
    min-width: 30px;
    background-color: #EEEEEE;
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.p-cf7-privacy-checkbox-custom.is-checked {
    background-color: #00006E;
}

.p-cf7-privacy-checkbox-custom.is-checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1;
}

/* プライバシーポリシーリンク（水色） */
.p-cf7-privacy-text {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #24252A;
}

.p-contact-privacy-link {
    color: #0077FF;
    text-decoration: underline;
    cursor: pointer;
}

.p-contact-privacy-link:hover {
    opacity: 0.7;
}

/* ---------------------------------------------------------
   内容確認ボタン（ステップ1の次へボタン）
   Figma: W350 H50 / bg #FF9600 / rounded-[40px]
--------------------------------------------------------- */
.p-cf7-submit-btn,
input.p-cf7-submit-btn,
.wpcf7 .p-cf7-submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 350px !important;
    height: 50px !important;
    background-color: #FF9600 !important;
    border: none !important;
    border-radius: 40px !important;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 2.4px !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    margin: 0 auto !important;
}

.p-cf7-submit-btn:hover {
    background-color: #e68700 !important;
}

/* ---------------------------------------------------------
   確認画面（ステップ2）
   Figma: 確認リスト / 送信ボタン / 戻るボタン
--------------------------------------------------------- */
.p-cf7-confirm {
    width: 845px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.p-cf7-confirm__heading {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 60px;
    letter-spacing: 12px;
    color: #24252A;
    text-align: center;
    margin: 0;
}

.p-cf7-confirm__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-cf7-confirm__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 20px;
}

.p-cf7-confirm__label {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #888;
    margin: 0;
}

.p-cf7-confirm__value {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #24252A;
    margin: 0;
}

.p-cf7-confirm__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 送信ボタン（紺）Figma: W350 H50 bg #00006E rounded-[40px] */
.p-cf7-send-btn,
input.p-cf7-send-btn,
.wpcf7 .p-cf7-send-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 350px !important;
    height: 50px !important;
    background-color: #00006E !important;
    border: none !important;
    border-radius: 40px !important;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 2.4px !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.p-cf7-send-btn:hover {
    background-color: #000055 !important;
}

/* 戻るボタン（グレー）Figma: W350 H50 bg #E9E9E9 rounded-[40px] */
.p-cf7-back-btn,
input.p-cf7-back-btn,
.wpcf7 .p-cf7-back-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 350px !important;
    height: 50px !important;
    background-color: #E9E9E9 !important;
    border: none !important;
    border-radius: 40px !important;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 2.4px !important;
    color: #24252A !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.p-cf7-back-btn:hover {
    background-color: #D5D5D5 !important;
}

/* ---------------------------------------------------------
   電話ボックス（コンタクトページ下部）
   Figma: W350 H200 / bg #00006E / rounded-[20px]
--------------------------------------------------------- */
.p-contact-tel-box {
    width: 350px;
    height: 200px;
    background-color: #00006E;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 37px;
    box-sizing: border-box;
}

.p-contact-tel-box__label {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.p-contact-tel-box__divider {
    width: 284px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.p-contact-tel-box__number {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 40px;
    letter-spacing: 1.75px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}

.p-contact-tel-box__hours {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   プライバシーポリシー モーダル
--------------------------------------------------------- */
.p-privacy-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.p-privacy-modal.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-privacy-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.p-privacy-modal__content {
    position: relative;
    z-index: 1;
    background-color: #FFFFFF;
    width: 900px;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.p-privacy-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 60px 80px;
    overflow-y: auto;
}

.p-privacy-modal__title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 40px;
    letter-spacing: 8px;
    color: #24252A;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    flex-shrink: 0;
}

.p-privacy-modal__text {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 1.5px;
    color: #24252A;
    width: 100%;
}

.p-privacy-modal__text p {
    margin: 0 0 10px;
}

.p-privacy-modal__text ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.p-privacy-modal__text li {
    margin-bottom: 8px;
    line-height: 40px;
}

/* 「確認しました」ボタン
   Figma: W350 H50 bg #E9E9E9 rounded-[40px]
--------------------------------------------------------- */
.p-privacy-modal__confirm-btn {
    width: 350px;
    height: 50px;
    background-color: #E9E9E9;
    border: none;
    border-radius: 40px;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 2.4px;
    color: #24252A;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.p-privacy-modal__confirm-btn:hover {
    background-color: #D5D5D5;
}

/* ---------------------------------------------------------
   サンクスページ
   Figma: THANK YOU / 中央テキスト
--------------------------------------------------------- */
.p-thanks-page__inner {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
    text-align: center;
}

.p-thanks-page__title {
    margin: 0 0 80px;
}

.p-thanks-page__text {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 2.4px;
    color: #24252A;
    text-align: center;
    margin: 0;
}

/* =========================================================
   CONTACT レスポンシブ（1440px以下）
========================================================= */
@media screen and (max-width: 1440px) {
    .p-contact-page__inner {
        padding: 0 10% 150px;
    }
    .p-contact-form__wrap {
        width: 100%;
    }
}

/* =========================================================
   CONTACT レスポンシブ（1024px以下）
========================================================= */
@media screen and (max-width: 1024px) {
    .p-contact-page__title,
    .p-thanks-page__title {
        font-size: 44px;
        letter-spacing: 8px;
        margin-bottom: 80px;
    }
    .p-contact-page__inner {
        padding: 0 30px 100px;
        gap: 60px;
    }
    .p-cf7-row--inline,
    .p-cf7-row--textarea {
        flex-direction: column;
        align-items: flex-start;
    }
    .p-cf7-label {
        width: 100%;
    }
    .p-contact-form__wrap input[type="text"],
    .p-contact-form__wrap input[type="tel"],
    .p-contact-form__wrap input[type="email"],
    .p-contact-form__wrap textarea {
        width: 100% !important;
    }
    .p-privacy-modal__body {
        padding: 40px;
    }
}

/* =========================================================
   CONTACT レスポンシブ（768px以下）
========================================================= */
@media screen and (max-width: 768px) {
    .p-contact-page__title,
    .p-thanks-page__title {
        font-size: 36px;
        letter-spacing: 6px;
    }
    .p-contact-page__inner {
        padding: 0 20px 80px;
    }
    .p-cf7-submit-btn,
    .p-cf7-send-btn,
    .p-cf7-back-btn,
    .p-privacy-modal__confirm-btn,
    .p-contact-tel-box {
        width: 100% !important;
        max-width: 350px !important;
    }
    .p-contact-tel-box__divider {
        width: 100%;
        max-width: 284px;
    }
    .p-contact-tel-box__number {
        font-size: 28px;
    }
    .p-privacy-modal__body {
        padding: 30px 20px;
        gap: 30px;
    }
    .p-privacy-modal__title {
        font-size: 28px;
    }
}

/* =========================================================
   PRIVACY POLICY PAGE
   style.css 末尾に追記
========================================================= */

/* ---------------------------------------------------------
   ページタイトル "PRIVACY POLICY"
   Figma: Archivo Bold Italic / 60px / tracking 12px / 中央揃え
--------------------------------------------------------- */
.p-privacy-page__title-area {
    width: 100%;
    text-align: center;
    padding: 80px 0 60px;
    box-sizing: border-box;
}

.p-privacy-page__title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 12px;
    color: #24252A;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   ページ内ラッパー
--------------------------------------------------------- */
.p-privacy-page__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px 150px;
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   本文エリア
   Figma: Hiragino W5 / 16px / leading 40px / tracking 1.5px
--------------------------------------------------------- */
.p-privacy-page__body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 1.5px;
    color: #24252A;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.p-privacy-page__body p {
    margin: 0;
    line-height: 40px;
}

/* ---------------------------------------------------------
   各セクション
--------------------------------------------------------- */
.p-privacy-page__section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* セクション見出し（大）*/
.p-privacy-page__heading {
    font-family: 'Inter', "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 3px;
    color: #24252A;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #24252A;
}

/* リスト */
.p-privacy-page__list {
    margin: 0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-privacy-page__list li {
    line-height: 40px;
}

/* ---------------------------------------------------------
   各原則ブロック
--------------------------------------------------------- */
.p-privacy-page__principle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 0;
    border-bottom: 1px solid #E0E0E0;
}

.p-privacy-page__principle:last-child {
    border-bottom: none;
}

/* 小見出し */
.p-privacy-page__subheading {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 1.5px;
    color: #24252A;
    margin: 0;
}

/* =========================================================
   PRIVACY PAGE レスポンシブ（1024px以下）
========================================================= */
@media screen and (max-width: 1024px) {
    .p-privacy-page__title {
        font-size: 44px;
        letter-spacing: 8px;
    }

    .p-privacy-page__inner {
        padding: 0 30px 100px;
    }

    .p-privacy-page__body {
        gap: 40px;
    }
}

/* =========================================================
   PRIVACY PAGE レスポンシブ（768px以下）
========================================================= */
@media screen and (max-width: 768px) {
    .p-privacy-page__title-area {
        padding: 40px 0 30px;
    }

    .p-privacy-page__title {
        font-size: 30px;
        letter-spacing: 6px;
    }

    .p-privacy-page__inner {
        padding: 0 20px 80px;
    }

    .p-privacy-page__body {
        font-size: 14px;
        line-height: 36px;
        gap: 30px;
    }

    .p-privacy-page__heading {
        font-size: 17px;
    }
}