/*
Theme Name: Zero Hair Salon
Author: Zero
Description: Client Review Theme
Version: 1.0
*/

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,500,400,700|Roboto+Mono:300|Shippori+Mincho:500");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}


/* =========================================
   Base & PC Styles (Desktop First)
   ========================================= */
.page-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 0;
}

.zero-PCTOP {
    background-color: #ffffff;
    overflow: hidden;
    width: 1440px;
    min-height: 1000px;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

/* ▼▼▼ 共通ヘッダー修正版（PCのみ元の絶対配置を維持） ▼▼▼ */
@media screen and (min-width: 768px) {
    .view-6 {
        /* 元のデザイン（絶対配置）に戻す設定 */
        position: absolute !important;
        top: 11px !important;
        left: 81px !important;
        width: 1237px !important;
        height: 122px !important;
        z-index: 1000;
        margin: 0;
        
        /* Flexbox設定（崩れの原因）を無効化 */
        display: block !important;
        background: transparent; /* 背景が必要なら #fff に */
        padding: 0;
        border: none;
        justify-content: normal; /* リセット */
    }

    /* ロゴの表示設定（念のため維持） */
    .view-6 .studio {
        mix-blend-mode: multiply !important;
        display: block !important;
    }
}

/* ロゴのスタイル */
.view-6 .studio {
    mix-blend-mode: multiply !important;
    display: block !important;
    /* 必要ならサイズ指定もここに追加 */
}

/* ▼▼▼ スマホ用ヘッダー修復（SPのみ適用） ▼▼▼ */
@media screen and (max-width: 767px) {
    .view-6 {
        /* スマホは画面上部に固定して白背景にする */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important; /* ヘッダーの高さ */
        
        background-color: #ffffff !important; /* 背景を白く */
        display: flex !important; /* 中身を横並びに */
        align-items: center !important; /* 上下中央揃え */
        justify-content: space-between !important; /* ロゴとアイコンを左右に配置 */
        
        padding: 0 15px !important; /* 左右に少し余白 */
        z-index: 9999 !important; /* 一番手前に */
        border-bottom: 1px solid #f0f0f0; /* お好みで下線 */
        margin: 0 !important;
    }

    /* ロゴ画像のサイズ調整 */
    .view-6 .studio {
        height: auto !important; /* 高さを制限 */
        width: 100px !important; /* 横幅はなりゆき */
        object-fit: contain !important;
        display: block !important;
        mix-blend-mode: multiply !important;
        position: static !important;
    }
}

/* =========================================
   【PC版修正】フォント・配置・マップ・フッター装飾
   ========================================= */

/* 1. Yu Mincho フォント適用 */
.zero-PCTOP .text-wrapper-46, /* INFORMATION */
.zero-PCTOP .text-wrapper-47, /* Coming Soon */
.zero-PCTOP .div,             /* CONCEPT */
.zero-PCTOP .text-wrapper-10, /* MENU */
.zero-PCTOP .text-wrapper-12, /* Menu description 1 */
.zero-PCTOP .text-wrapper-13, /* Menu description 2 */
.zero-PCTOP .text-wrapper-16, /* STYLE */
.zero-PCTOP .text-wrapper-20, /* STAFF */
.zero-PCTOP .text-wrapper-48, /* BLOG */
.zero-PCTOP .text-wrapper-14,  /* VOICE */
.zero-staff-pc .text-wrapper,  /* STAFF MV */
.zero-staff-pc .text-wrapper-2, /* STAFF staff h2-01 */
.zero-staff-pc .foreverygeneration, /* STAFF staff h2 */
.zero-staff-pc .foreverygeneration, /* STAFF staff foreverygeneration */
.zero-staff-pc .text-wrapper-7, /* STAFF staff h2-02 */
.zero-staff-pc .text-wrapper-4, /* STAFF staff h2-03 */
.zero-staff-pc .text-wrapper-19, /* STAFF staff h2-01 */
.zero-staff-pc .text-wrapper-23, /* STAFF staff h2 */
.zero-staff-pc .text-wrapper-22, /* STAFF staff foreverygeneration */
.zero-staff-pc .text-wrapper-21, /* STAFF staff h2-02 */
.zero-staff-pc .text-wrapper-17, /* STAFF staff h2-01 */
.zero-staff-pc .text-wrapper-28,
.zero-staff-sp .text-wrapper-48,
.zero-staff-sp .text-wrapper-51,
.zero-staff-sp .text-wrapper-58,
.zero-staff-sp .foreverygeneration-2,
.zero-staff-sp .text-wrapper-59,
.zero-staff-sp .text-wrapper-63,
.zero-staff-sp .text-wrapper-62,
.zero-staff-sp .text-wrapper-68,
.zero-staff-sp .text-wrapper-51,
.zero-staff-sp .text-wrapper-63,
.zero-staff-sp .text-wrapper-72,
.zero-staff-sp .text-wrapper-74,
.zero-staff-sp .text-wrapper-75,
.zero-staff-sp .text-wrapper-76,
.zero-menu-pc .text-wrapper,
.zero-menu-pc .text-wrapper-8,
.zero-menu-pc .text-wrapper-11,
.zero-menu-pc .text-wrapper-13,
.zero-menu-pc .text-wrapper-22,
.zero-menu-sp .text-wrapper-24,
.zero-menu-sp .text-wrapper-35,
.zero-menu-sp .text-wrapper-26,
.zero-menu-sp .text-wrapper-41,
.zero-menu-sp .text-wrapper-55,
.zero-menu-sp .text-wrapper-54,
.zero-blog-pc .text-wrapper-31,
.zero-blog-sp .text-wrapper-39,
.zero-style-pc .text-wrapper-11
{
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
}

/* 2. BLOG日付の左寄せ */
.zero-PCTOP .text-wrapper-49 {
    justify-content: flex-start !important; /* 左寄せ */
    text-align: left !important;
    padding-left: 0 !important; /* 必要であれば微調整 */
}

/* 3. フッター内各グループの下線（白線） */
/* グループ3〜7に対して下線を追加 */
.zero-PCTOP .group-2 .group-3,
.zero-PCTOP .group-2 .group-4,
.zero-PCTOP .group-2 .group-5,
.zero-PCTOP .group-2 .group-6,
.zero-PCTOP .group-2 .group-7 {
    border-bottom: 1px solid #ffffff !important;
    padding-bottom: 10px !important; /* 線と文字の間隔 */
    width: 100% !important;          /* 線を横幅いっぱいに */
    box-sizing: border-box !important;
}

/* 4. Google Maps (iframe) のスタイル調整 */
/* 元の画像(.image)と同じ位置・サイズを適用 */
.zero-PCTOP .pc-map-frame {
    position: absolute !important;
    top: 0 !important;
    left: 70px !important;
    width: 720px !important;
    height: 597px !important;
    z-index: 1 !important;
    /* iframe固有のリセット */
    border: none !important;
    display: block;
}

/* ▼▼▼ 【重要】PC表示のデフォルト設定 ▼▼▼ */
/* PCでは .pc-only を表示 */
.pc-only { display: block; }

/* スマホ専用要素をPCで確実に隠す設定 */
.sp-only,
.sp-cta-fix,
.sp-header-right,
.sp-hero-text-area,
.staff-container-mobile-final,
.footer-sp-wrapper,
.sp-menu-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* PC Header Phone Group */
.zero-PCTOP .pc-tel-group {
    position: absolute;
    top: 37px;
    left: 870px;
    display: flex !important;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.zero-PCTOP .pc-tel-icon {
    color: #6b6a75;
}
.zero-PCTOP .text-wrapper-18 { 
    position: static; 
    font-family: "Noto Sans JP", Helvetica; 
    font-weight: 500; 
    color: #6b6a75; 
    font-size: 20px; 
    letter-spacing: 2.00px; 
    line-height: 32px; 
    white-space: nowrap; 
}

/* Rest of PC Styles (Existing) */
.zero-PCTOP .vector { position: absolute; top: 54px; left: 938px; width: 1px; height: 36px; }
.zero-PCTOP .view { position: relative; left: 0; width: 1444px; height: 498px; margin-top:120px; }

/* PC CONCEPT Text Wrapper */
.zero-PCTOP .text-wrapper-container {
  position: absolute;
  top: 178px;
  left: 640px;
  width: 620px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 400;
  color: #26252e;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 38.4px;
  z-index: 10;
}
.zero-PCTOP .text-part-upper,
.zero-PCTOP .text-part-lower {
  display: inline;
  margin: 0;
  padding: 0;
}

.zero-PCTOP .div { position: absolute; top: 64px; left: 856px; width: 504px; height: 73px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 450; color: #ccd7dd; font-size: 96px; letter-spacing: 0; line-height: 230.4px; white-space: nowrap; }
.zero-PCTOP .img { position: absolute; top: 432px; left: 566px; width: 874px; height: 2px; }
.zero-PCTOP .vector-2 { top: -1px; width: 874px; height: 2px; position: absolute; left: 0; }
.zero-PCTOP .mask-group { position: absolute; top: 64px; left: 0; width: 616px; height: 434px; }
.zero-PCTOP .mask-group-2 { position: absolute; top: -1233px; left: -28556px; width: 720px; height: 597px; }
.view-2 { position: relative; left: -70px; width: 1512px; height: 677px; margin-top:120px;}
.zero-PCTOP .rectangle { position: absolute; top: 0; left: 790px; width: 720px; height: 597px; background-color: #eef1f3; }
.zero-PCTOP .group { position: absolute; top: 454px; left: 1307px; width: 126px; height: 122px; }
.zero-PCTOP .ellipse { position: absolute; top: 0; left: 0; width: 122px; height: 122px; background-color: #718594; border-radius: 61px; }
.zero-PCTOP .text-wrapper-2 { position: absolute; top: 68px; left: 2px; width: 119px; height: 9px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #ffffff; font-size: 11.6px; text-align: center; letter-spacing: 1.16px; line-height: 27.9px; white-space: nowrap; }
.zero-PCTOP .text-wrapper-3 { position: absolute; top: 87px; left: 2px; width: 119px; height: 9px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #ffffff; font-size: 11.6px; text-align: center; letter-spacing: 1.16px; line-height: 27.9px; white-space: nowrap; }
.zero-PCTOP .vector-3 { position: absolute; top: 86px; left: 93px; width: 7px; height: 9px; }
.zero-PCTOP .vector-4 { position: absolute; top: 86px; left: 24px; width: 7px; height: 9px; }
.zero-PCTOP .element { position: absolute; top: 21px; left: 44px; width: 35px; height: 35px; }
.zero-PCTOP .element-2 { position: absolute; top: 458px; left: 989px; width: 235px; height: 114px; object-fit: cover; }
.zero-PCTOP .rectangle-2 { position: absolute; top: 597px; left: 70px; width: 1440px; height: 80px; background-color: #ffffff; }
.zero-PCTOP .p { position: absolute; top: 637px; left: calc(50.00% - 116px); font-family: "Roboto Mono", Helvetica; font-weight: 300; color: #80b1d2; font-size: 14px; letter-spacing: 2.38px; line-height: 14px; white-space: nowrap; }
.zero-PCTOP .image { position: absolute; top: 0; left: 70px; width: 720px; height: 597px; object-fit: cover; }
.zero-PCTOP .group-2 { position: absolute; top: 78px; left: 872px; width: 557px; height: 347px; display: flex; flex-direction: column; }
.zero-PCTOP .group-3 { width: 561px; height: 30px; position: relative; }
.zero-PCTOP .vector-5 { position: absolute; top: 30px; left: 0; width: 557px; height: 1px; object-fit: cover; }
.zero-PCTOP .text-wrapper-4 { position: absolute; top: 0; left: 116px; font-family: "Noto Sans JP", Helvetica; font-weight: 300; color: #26252e; font-size: 16px; letter-spacing: 2.72px; line-height: 14px; white-space: nowrap; }
.zero-PCTOP .text-wrapper-5 { position: absolute; top: 1px; left: 2px; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #26252e; font-size: 16px; letter-spacing: 2.72px; line-height: 14px; white-space: nowrap; }
.zero-PCTOP .group-4 { width: 561px; height: 64px; position: relative; margin-top: 20.0px; }
.zero-PCTOP .vector-6 { top: 64px; width: 557px; height: 1px; object-fit: cover; position: absolute; left: 0; }
.zero-PCTOP .element-3 { top: 0; left: 116px; font-weight: 300; color: #26252e; letter-spacing: 2.72px; line-height: 25.6px; position: absolute; font-family: "Noto Sans JP", Helvetica; font-size: 16px; }
.zero-PCTOP .element-4 { top: 0; left: 116px; width: 389px; font-weight: 300; color: #26252e; letter-spacing: 2.72px; line-height: 25.6px; position: absolute; font-family: "Noto Sans JP", Helvetica; font-size: 16px; }
.zero-PCTOP .text-wrapper-6 { position: absolute; top: 2px; left: 2px; width: 52px; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #26252e; font-size: 16px; letter-spacing: 2.72px; line-height: 14px; }
.zero-PCTOP .group-5 { width: 561px; height: 30px; position: relative; margin-top: 19px; }
.zero-PCTOP .group-6 { width: 561px; height: 30px; position: relative; margin-top: 20.0px; }
.zero-PCTOP .group-7 { width: 559px; height: 39px; position: relative; margin-top: 11.0px; }
.zero-PCTOP .vector-7 { top: 38px; width: 557px; height: 1px; object-fit: cover; position: absolute; left: 0; }
.zero-PCTOP .text-wrapper-7 { position: absolute; top: 10px; left: 2px; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #26252e; font-size: 16px; letter-spacing: 2.72px; line-height: 14px; white-space: nowrap; }
.zero-PCTOP .frame { width: 96px; height: 25px; top: 0; left: 116px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; position: absolute; border-bottom-width: 1px; border-bottom-style: solid; border-color: #000000; }
.zero-PCTOP .text-wrapper-8 { position: relative; width: fit-content; margin-top: -5.50px; margin-bottom: -3.50px; margin-left: -9.00px; margin-right: -9.00px; font-family: "Noto Sans JP", Helvetica; font-weight: 300; color: #26252e; font-size: 16px; letter-spacing: 2.72px; line-height: 14px; white-space: nowrap; }
.zero-PCTOP .div-wrapper { width: 53px; height: 24px; top: 1px; left: 238px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; position: absolute; border-bottom-width: 1px; border-bottom-style: solid; border-color: #000000; }
.zero-PCTOP .text-wrapper-9 { position: relative; width: fit-content; margin-top: -6.00px; margin-bottom: -4.00px; margin-left: -4.50px; margin-right: -4.50px; font-weight: 300; color: #26252e; letter-spacing: 2.72px; line-height: 14px; font-family: "Noto Sans JP", Helvetica; font-size: 16px; white-space: nowrap; }
.zero-PCTOP .view-3 { position: relative; left: 0; width: 1446px; height: 477px; margin-top:120px;}
.zero-PCTOP .zero { position: absolute; top: 104px; left: 0; width: 1440px; height: 279px; }
.zero-PCTOP .vector-8 { position: absolute; top: 476px; left: 548px; width: 892px; height: 2px; }
.zero-PCTOP .text-wrapper-10 { position: absolute; top: 0; left: 482px; width: 528px; height: 63px; display: flex; align-items: center; justify-content: right; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 450; color: #cdd7de; font-size: 96px; letter-spacing: 0; line-height: 134.4px; white-space: nowrap; }
.zero-PCTOP .click { position: absolute; top: 406px; left: 548px; width: 180px; height: 46px; }
.zero-PCTOP .text-wrapper-11 { left: 35px; position: absolute; top: 12px; font-family: "Shippori Mincho", Helvetica; font-weight: 500; color: #f7412a; font-size: 16px; text-align: center; letter-spacing: 1.60px; line-height: normal; }
.zero-PCTOP .vector-9 { position: absolute; top: 15px; left: 131px; width: 51px; height: 14px; }
.zero-PCTOP .vector-10 { position: absolute; top: -1px; left: -1px; width: 175px; height: 48px; }
.zero-PCTOP .text-wrapper-12 { position: absolute; top: 148px; left: 740px; width: 436px; height: 85px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 400; color: #26252e33; font-size: 16px; letter-spacing: 0; line-height: 25.6px; }
.zero-PCTOP .text-wrapper-13 { position: absolute; top: 332px; left: 213px; width: 276px; height: 85px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 400; color: #26252e33; font-size: 16px; letter-spacing: 0; line-height: 25.6px; }
.zero-PCTOP .view-4 { position: relative; left: 0; width: 1254px; height: 547px; margin-top:220px;}
.zero-PCTOP .mask-group-3 { position: absolute; top: 0; left: 0; width: 805px; height: 555px; }
.zero-PCTOP .vector-11 { position: absolute; top: 131px; left: 0; width: 892px; height: 2px; }
.zero-PCTOP .text-wrapper-14 { position: absolute; top: 5px; left: 180px; width: 528px; height: 63px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 400; color: #ffffff; font-size: 96px; letter-spacing: 0; line-height: 134.4px; white-space: nowrap; }
.zero-PCTOP .click-2 { top: 431px; left: 1073px; position: absolute; width: 180px; height: 46px; }
.zero-PCTOP .text-wrapper-15 { left: 24px; position: absolute; top: 12px; font-family: "Shippori Mincho", Helvetica; font-weight: 500; color: #f7412a; font-size: 16px; text-align: center; letter-spacing: 1.60px; line-height: normal; }
.zero-PCTOP .rectangle-3 { position: absolute; top: 188px; left: 456px; width: 528px; height: 289px; background-color: #d9d9d9; }
.zero-PCTOP .element-5 { position: absolute; top: 197px; left: 590px; width: 245px; height: 269px; object-fit: cover; }
.zero-PCTOP .view-5 { position: relative; left: -95px; width: 1635px; height: 1109px; margin-top:120px;}
.zero-PCTOP .vector-12 { position: absolute; top: 413px; left: 643px; width: 892px; height: 2px; }
.zero-PCTOP .group-8 { position: absolute; top: 1px; left: 97px; width: 1438px; height: 824px; }
.zero-PCTOP .rectangle-4 { position: absolute; top: 0; left: 95px; width: 1440px; height: 824px; background-color: #00000080; box-shadow: 1px 4px 4px #00000040; z-index: 5; }
.zero-PCTOP .vector-13 { position: absolute; top: 698px; left: 95px; width: 892px; height: 2px; filter: brightness(0) invert(1); z-index: 10; }
.zero-PCTOP .text-wrapper-16 { position: absolute; top: 116px; left: 275px; width: 620px; height: 63px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 450; color: #CDD7DE; font-size: 96px; letter-spacing: 0; line-height: 134.4px; white-space: nowrap; }
.zero-PCTOP .click-3 { top: 627px; left: 809px; position: absolute; width: 180px; height: 46px; }
.zero-PCTOP .text-wrapper-17 { position: absolute; top: 12px; left: 18px; font-family: "Shippori Mincho", Helvetica; font-weight: 500; color: #ffffff; font-size: 16px; text-align: center; letter-spacing: 1.60px; line-height: normal; }
.zero-PCTOP .element-6 { top: 665px; left: 860px; width: 914px; height: 444px; position: absolute; object-fit: cover; opacity: 0.1; z-index: 1; }
.zero-PCTOP .mask-group-9 { position: absolute; top: 278px; left: -52px; width: 272px; height: 272px; }
.zero-PCTOP .mask-group-4 { position: absolute; top: 278px; left: 240px; width: 272px; height: 272px; }
.zero-PCTOP .mask-group-5 { position: absolute; top: 278px; left: 532px; width: 272px; height: 272px; }
.zero-PCTOP .mask-group-6 { position: absolute; top: 278px; left: 824px; width: 272px; height: 272px; }
.zero-PCTOP .mask-group-7 { position: absolute; top: 278px; left: 1116px; width: 272px; height: 272px; }
.zero-PCTOP .mask-group-8 { position: absolute; top: 278px; left: 1408px; width: 272px; height: 272px; }
.zero-PCTOP .view-wrapper { position: absolute; top: 0; left: 0; width: 1440px; height: 140px; display: flex; background-color: #ffffff; }
.zero-PCTOP .text-wrapper-16, .zero-PCTOP .click-3, .zero-PCTOP .mask-group-4, .zero-PCTOP .mask-group-5, .zero-PCTOP .mask-group-6, .zero-PCTOP .mask-group-7, .zero-PCTOP .mask-group-8, .zero-PCTOP .mask-group-9 { z-index: 10; position: absolute; }
.zero-PCTOP .OPEN { position: absolute; top: 72px; left: 903px; width: 150px; height: 12px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #6b6a75; font-size: 16px; text-align: right; letter-spacing: 1.60px; line-height: 38.4px; white-space: nowrap; }
.zero-PCTOP .studio { position: absolute; top: 11px; left: 0; width: 200px; height: 97px; object-fit: cover; }
.zero-PCTOP .image-2 { position: absolute; width: 0; height: 22.67%; top: 31.70%; left: 70.41%; }
.zero-PCTOP .navbar { display: inline-flex !important; align-items: center; position: absolute; top: 50px; left: 210px; }
.zero-PCTOP .text-wrapper-19 { position: relative; width: 80px; margin-top: -1.00px; font-family: "Noto Sans JP", Helvetica; font-weight: 500; color: #6b6a75; font-size: 14px; text-align: center; letter-spacing: 1.60px; line-height: normal; }
.zero-PCTOP .group-9 { position: absolute; top: 0; left: 1111px; width: 126px; height: 122px; }
.zero-PCTOP .view-7 { position: relative; left: 0; width: 1264px; height: 475px; }
.zero-PCTOP .vector-14 { position: absolute; top: 78px; left: 0; width: 892px; height: 2px; }
.zero-PCTOP .text-wrapper-20 { position: absolute; top: 0; left: 180px; width: 528px; height: 63px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 450; color: #6b6a75; font-size: 96px; letter-spacing: 0; line-height: 134.4px; white-space: nowrap; }
.zero-PCTOP .click-4 { top: 429px; left: 1083px; position: absolute; width: 180px; height: 46px; }
.zero-PCTOP .text-wrapper-21 { position: absolute; top: 12px; left: 18px; font-family: "Shippori Mincho", Helvetica; font-weight: 500; color: #f7412a; font-size: 16px; text-align: center; letter-spacing: 1.60px; line-height: normal; }
.zero-PCTOP .mask-group-10 { position: absolute; top: 144px; left: 453px; width: 259px; height: 338px; }
.zero-PCTOP .mask-group-11 { position: absolute; top: 144px; left: 176px; width: 260px; height: 338px; }
.zero-PCTOP .group-10 { position: absolute; top: 144px; left: 732px; width: 254px; height: 331px; }
.zero-PCTOP .mask-group-12 { position: absolute; top: 0; left: -4px; width: 260px; height: 339px; }
.zero-PCTOP .text-wrapper-22 { position: absolute; top: 261px; left: 11px; width: 168px; height: 58px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 700; color: #ffffff; font-size: 24px; letter-spacing: 2.40px; line-height: 38.4px; }
.zero-PCTOP .FV { position: relative; top: -5px; left: -74px; width: 1519px; height: 805px; }
.zero-PCTOP .mask-group-13 { position: absolute; top: 190px; left: 154px; width: 1280px; height: 460px; }
.zero-PCTOP .mask-group-14 { position: absolute; top: 211px; left: 748px; width: 443px; height: 598px; }
.zero-PCTOP .mask-group-15 { position: absolute; top: 150px; left: 311px; width: 443px; height: 590px; }
.zero-PCTOP .image-3 { position: absolute; top: 248px; left: 74px; width: 384px; height: 428px; }
.zero-PCTOP .image-4 { position: absolute; top: 486px; left: 1101px; width: 356px; height: 319px; }
.zero-PCTOP .rectangle-5 { position: absolute; top: 145px; left: 1243px; width: 272px; height: 468px; background-color: #d9d9d9e6; }
.zero-PCTOP .image-5 { position: absolute; top: 5px; left: 1057px; width: 457px; height: 423px; }
.zero-PCTOP .text-wrapper-23 { top: 660px; width: 268px; height: 13px; line-height: normal; white-space: nowrap; position: absolute; left: 999px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 300; font-size: 16px; letter-spacing: 0; color: #FFFFFF; mix-blend-mode: difference; border: 1px solid #000000; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); z-index: 100; }
.zero-PCTOP .zero-2 { top: 696px; width: 499px; height: 39px; line-height: 25.6px; position: absolute; left: 999px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 300; font-size: 16px; letter-spacing: 0; color: #FFFFFF; mix-blend-mode: difference; border: 1px solid #000000; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); z-index: 100; }
.zero-PCTOP .group-11 { position: absolute; top: 428px; left: 175px; width: 229px; height: 358px; }
.zero-PCTOP .rectangle-6 { position: absolute; top: 24px; left: 12px; width: 204px; height: 334px; background-color: #ffffff; border-radius: 100px 100px 0px 0px; box-shadow: 1px 4px 4px #00000040; }
.zero-PCTOP .group-12 { position: absolute; top: 36px; left: 31px; width: 172px; height: 168px; }
.zero-PCTOP .ellipse-2 { position: absolute; top: 0; left: 0; width: 168px; height: 168px; background-color: #718694; border-radius: 84px; }
.zero-PCTOP .text-wrapper-24 { top: 94px; left: 3px; width: 164px; height: 12px; display: flex; align-items: center; justify-content: center; font-weight: 400; color: #ffffff; text-align: center; letter-spacing: 1.60px; line-height: 38.4px; white-space: nowrap; position: absolute; font-family: "Noto Sans JP", Helvetica; font-size: 16px; }
.zero-PCTOP .text-wrapper-25 { position: absolute; top: 120px; left: 3px; width: 164px; height: 12px; display: flex; align-items: center; justify-content: center; font-weight: 400; color: #ffffff; text-align: center; letter-spacing: 1.60px; line-height: 38.4px; font-family: "Noto Sans JP", Helvetica; font-size: 16px; white-space: nowrap; }
.zero-PCTOP .vector-15 { position: absolute; top: 119px; left: 128px; width: 9px; height: 13px; }
.zero-PCTOP .vector-16 { position: absolute; top: 119px; left: 34px; width: 9px; height: 13px; }
.zero-PCTOP .element-7 { position: absolute; top: 29px; left: 60px; width: 48px; height: 48px; }
.zero-PCTOP .group-13 { position: absolute; top: 0; left: 0; width: 263px; height: 81px; }
.zero-PCTOP .text-wrapper-26 { position: absolute; top: 63px; left: 5px; transform: rotate(-63.11deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-27 { position: absolute; top: 49px; left: 14px; transform: rotate(-55.32deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-28 { position: absolute; top: 38px; left: 24px; transform: rotate(-48.31deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-29 { top: 28px; left: 33px; transform: rotate(-41.30deg); position: absolute; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-30 { position: absolute; top: 20px; left: 45px; transform: rotate(-34.54deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-31 { position: absolute; top: 13px; left: 55px; transform: rotate(-27.79deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-32 { top: 7px; left: 68px; transform: rotate(-20.52deg); position: absolute; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-33 { position: absolute; top: 4px; left: 82px; transform: rotate(-14.54deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-34 { position: absolute; top: 1px; left: 91px; transform: rotate(-8.31deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-35 { position: absolute; top: 1px; left: 107px; transform: rotate(-0.52deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-36 { position: absolute; top: 1px; left: 122px; transform: rotate(7.27deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-37 { position: absolute; top: 3px; left: 137px; transform: rotate(13.51deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-38 { position: absolute; top: 7px; left: 146px; transform: rotate(20.00deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-39 { position: absolute; top: 13px; left: 161px; transform: rotate(28.05deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-40 { position: absolute; top: 22px; left: 175px; transform: rotate(35.84deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-41 { position: absolute; top: 30px; left: 187px; transform: rotate(42.85deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-42 { position: absolute; top: 41px; left: 195px; transform: rotate(49.87deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-43 { position: absolute; top: 53px; left: 204px; transform: rotate(57.40deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-44 { position: absolute; top: 64px; left: 212px; transform: rotate(64.15deg); font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #000000; font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.zero-PCTOP .text-wrapper-45 { position: absolute; top: 220px; left: 47px; width: 166px; font-family: "Noto Sans JP", Helvetica; font-weight: 500; color: #6b6a75; font-size: 20px; letter-spacing: 2.00px; line-height: 32px; white-space: nowrap; }
.zero-PCTOP .image-6 { position: absolute; width: 10.10%; height: 7.73%; top: 61.93%; left: 9.15%; }
.zero-PCTOP .element-zero { position: absolute; top: 270px; left: 34px; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #6b6a75; font-size: 16px; text-align: center; letter-spacing: 2.72px; line-height: 25.6px; }
.zero-PCTOP .INFO { position: relative; left: 180px; width: 1082px; height: auto; display: flex; flex-direction: column; gap: 120px; margin-top:120px;}
.zero-PCTOP .text-wrapper-46 { display: flex; align-items: center; justify-content: center; margin-left: 2px; width: 802px; height: 73px; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 450; color: #ccd7dd; font-size: 96px; letter-spacing: 0; line-height: 230.4px; white-space: nowrap; }
.zero-PCTOP .group-14 { height: 70px; position: relative; }
.zero-PCTOP .rectangle-7 { position: absolute; top: 0; left: 0; width: 1080px; height: 70px; background-color: #eef1f3; box-shadow: 1px 4px 4px #00000040; }
.zero-PCTOP .text-wrapper-47 { position: absolute; top: 0; left: 0; width: 1080px; height: 70px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Regular", Helvetica; font-weight: 400; color: #718694; font-size: 32px; text-align: center; letter-spacing: 0; line-height: 76.8px; white-space: nowrap; }
.zero-PCTOP .view-8 { position: relative; left: 180px; width: 1262px; height: 559px; margin-top:200px;}
.zero-PCTOP .rectangle-8 { position: absolute; top: 0; left: 460px; width: 800px; height: 559px; background-color: #eef1f3; border-radius: 0px 30px 30px 0px; transform: rotate(180deg); box-shadow: 1px 4px 4px #00000040; }
.zero-PCTOP .vector-17 { position: absolute; top: 137px; left: 367px; width: 892px; height: 2px; }
.zero-PCTOP .text-wrapper-48 { position: absolute; top: 40px; left: 547px; width: 528px; height: 63px; display: flex; align-items: center; justify-content: center; font-family: "Yu Mincho-Demibold", Helvetica; font-weight: 400; color: #ffffff; font-size: 96px; letter-spacing: 0; line-height: 134.4px; white-space: nowrap; }
.zero-PCTOP .click-5 { top: 513px; left: calc(50.00% - 631px); position: absolute; width: 180px; height: 46px; }
.zero-PCTOP .group-15 { position: absolute; top: 345px; left: 0; width: 348px; height: 116px; }
.zero-PCTOP .rectangle-9 { position: absolute; top: 0; left: 0; width: 344px; height: 116px; background-color: #ffffff; box-shadow: 1px 4px 4px #00000040; }
.zero-PCTOP .text-wrapper-49 { top: 27px; height: 8px; font-size: 12px; line-height: 16.8px; white-space: nowrap; position: absolute; left: 21px; width: 303px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #26252e; letter-spacing: 0; }
.zero-PCTOP .text-wrapper-50 { top: 55px; height: 33px; font-size: 16px; line-height: 22.4px; position: absolute; left: 21px; width: 303px; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", Helvetica; font-weight: 400; color: #26252e; letter-spacing: 0; }
.zero-PCTOP .group-16 { position: absolute; top: 345px; left: 367px; width: 348px; height: 116px; }
.zero-PCTOP .group-17 { position: absolute; top: 345px; left: 736px; width: 348px; height: 116px; }
/* PC BLOG Images */
.zero-PCTOP .mask-group-16 { position: absolute; top: 189px; left: -3px; width: 352px; height: 160px; z-index: 1; }
.zero-PCTOP .mask-group-17 { position: absolute; top: 188px; left: 364px; width: 350px; height: 161px; z-index: 1; }
.zero-PCTOP .mask-group-18 { position: absolute; top: 188px; left: 733px; width: 352px; height: 161px; z-index: 1; }

.zero-PCTOP .youtube-embed { position: absolute; top: 188px; left: 456px; width: 528px; height: 297px; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.zero-PCTOP a { color: inherit; text-decoration: none; cursor: pointer; }
.zero-PCTOP a:hover { opacity: 0.8; transition: opacity 0.3s ease; }
.zero-PCTOP a:focus { outline: 2px solid #4a90e2; outline-offset: 2px; }
.zero-PCTOP section, .zero-PCTOP header, .zero-PCTOP footer, .zero-PCTOP nav, .zero-PCTOP article, .zero-PCTOP aside, .zero-PCTOP figure, .zero-PCTOP address { display: block; }
.zero-PCTOP address { font-style: normal; }
.zero-PCTOP time { display: inline; }
.zero-PCTOP h1, .zero-PCTOP h2, .zero-PCTOP h3 { font-weight: inherit; font-size: inherit; margin: 0; padding: 0; }
.zero-PCTOP .group a, .zero-PCTOP .group-9 a, .zero-PCTOP .group-12 a { display: block; width: 100%; height: 100%; }
.zero-PCTOP .navbar a { display: inline-block; transition: color 0.3s ease; }
.zero-PCTOP .navbar a:hover { color: #4a90e2; }
.zero-PCTOP .click, .zero-PCTOP .click-2, .zero-PCTOP .click-3, .zero-PCTOP .click-4, .zero-PCTOP .click-5 { cursor: pointer; transition: transform 0.2s ease; }
.zero-PCTOP .click:hover, .zero-PCTOP .click-2:hover, .zero-PCTOP .click-3:hover, .zero-PCTOP .click-4:hover, .zero-PCTOP .click-5:hover { transform: translateX(5px); }
.zero-PCTOP .frame, .zero-PCTOP .div-wrapper { cursor: pointer; transition: border-color 0.3s ease; }
.zero-PCTOP .frame:hover, .zero-PCTOP .div-wrapper:hover { border-color: #4a90e2; }
.zero-PCTOP img[alt=""], .zero-PCTOP img[role="presentation"] { pointer-events: none; }

/* =========================================
   2. SP RESPONSIVE STYLES (Max-width: 767px)
   ========================================= */
@media screen and (max-width: 767px) {
    /* ▼▼▼ 【重要】SP表示の切り替え設定 ▼▼▼ */
    /* スマホでは .pc-only を非表示、.sp-only を表示にする */
    .pc-only { display: none !important; }
    
    /* SP専用要素の表示 */
    .sp-only,
    .sp-cta-fix,
    .sp-header-right,
    .sp-hero-text-area,
    .staff-container-mobile-final,
    .footer-sp-wrapper { /* ←ここに追加 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        height: auto !important;
        z-index: 50 !important;
        position: absolute !important;
    }

    .zero-PCTOP .INFO,
    .zero-PCTOP .view,
    .zero-PCTOP .view-3,
    .zero-PCTOP .view-8,
    .zero-PCTOP .view-4{
        margin-top:0px;
    }
    .zero-PCTOP .view-5 {
        margin-top:20px;
    }
    .zero-PCTOP img.element-6.pconly{
        position:absolute !important;
        display:block !important;
        left:auto;
        top:auto;
    }
    .sp-fv-bg.sp-only{
        position:relative !important;
        width:100% !important;
    }

    /* ヘッダー内メニューの個別設定（絶対配置にしない） */
    .sp-header-right {
        display: flex !important; /* Flexboxを強制 */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        height: 100% !important;
        width: auto !important;
        position: static !important; /* 絶対配置を解除してヘッダー内に収める */
        margin-left: auto !important;
        z-index: 100 !important;
    }
    /* ▲▲▲ ここまで ▲▲▲ */

    /* PCの絶対配置用装飾要素を強制非表示 */
    .zero-PCTOP .mask-group-2,
    .zero-PCTOP .vector,
    .zero-PCTOP .vector-2,
    .zero-PCTOP .vector-8,
    .zero-PCTOP .vector-11,
    .zero-PCTOP .vector-12,
    .zero-PCTOP .vector-13,
    .zero-PCTOP .vector-14,
    .zero-PCTOP .vector-17,
    .zero-PCTOP .rectangle-4,
    .zero-PCTOP .element-6,
    .zero-PCTOP .img
    {
        display: none !important;
    }

    /* --- 全体レイアウトのリセット --- */
    .page-container {
        display: block;
        width: 100%;
        min-height: auto;
        overflow-x: hidden;
    }
    .zero-PCTOP {
        width: 100%;
        min-height: auto;
        height: auto !important;
        overflow: visible;
        position: relative;
    }

    /* 各セクションの絶対配置を解除して縦積みに */
    .zero-PCTOP > section, 
    .zero-PCTOP > img,
    .zero-PCTOP > div {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0;
        padding: 0;
    }

    /* 要素内の絶対配置も一部解除 */
    .view p, .view h2, .view img,
    .view-3 p, .view-3 h2, .view-3 img, .view-3 a,
    .view-4 h2, .view-4 img, .view-4 a, .view-4 iframe,
    .view-5 h2, .view-5 img, .view-5 a,
    .view-7 h2, .view-7 img, .view-7 a, .view-7 figure,
    .view-8 h2, .view-8 img, .view-8 a, .view-8 article,
    .FV h1, .FV p, .FV img {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 20px;
    }

    /* 画像のレスポンシブ化 */
    img {
        max-width: 100%;
        height: auto !important;
        object-fit: contain;
    }
    
    /* SPヘッダーナビゲーション (右側3つ) */
    .sp-header-right {
        display: flex;
        height: 100%;
        align-items: center;
        margin-left: auto;
    }
    .sp-header-divider {
        width: 1px;
        height: 40%;
        background-color: #eee;
        margin-right: 10px;
    }
    .sp-h-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-decoration: none;
        color: #666;
        width: 70px;
        box-sizing: border-box;
    }
    .sp-h-btn span {
        font-size: 10px;
        font-family: "Noto Sans JP", sans-serif;
        line-height: 1;
        margin-top: 5px;
    }
    .sp-h-btn.phone {
        background: #fff;
        border-left: 1px solid #eee;
    }
    .sp-h-btn.reserve {
        background: #718694;
        color: #fff;
        width: 70px;
    }
    .sp-h-btn.menu {
        background: #fff;
        cursor: pointer;
    }

    /* --- FV (Hero) --- */
    .zero-PCTOP .FV {
        height: auto !important;
        margin-bottom: 0px;
        position: relative !important;
        overflow: visible !important; 
        margin-bottom: 0px !important;
    }
    .sp-fv-bg {
        width: 100%;
        height: auto;
        display: block;
    }

    /* --- SP Hero Text Area (修正) --- */
    .sp-hero-text-area {
        position: relative !important;
        text-align: center;
        padding: 0px 20px; /* 上下の余白 */
        background: #fff;
        margin-top: -20px; /* 画像に少し寄せる */
        overflow: hidden; /* ロゴのはみ出し防止 */
        z-index: 5;
        padding-top: 175px;
        padding-bottom: 45px;
    }
    
    /* 背景ロゴを絶対配置で背面に固定 (最重要修正) */
    .sp-hero-text-area .sp-hero-bg-logo {
        position: absolute !important;
        top: 58% !important;
        left: 43% !important;
        transform: translate(-50%, -50%) !important;
        width: 300px !important; /* ロゴサイズ */
        max-width: none !important; /* リセット解除 */
        height: auto !important;
        opacity: 0.15;
        z-index: 0 !important; /* テキストより奥へ */
        margin: 0 !important;
    }
    
    /* タイトル設定 */
    .sp-hero-title {
        position: relative !important;
        z-index: 1 !important; /* ロゴより手前 */
        width: 280px; /* テキストの配置幅をロゴに合わせる */
        margin: 0 auto 30px;
        font-family: "Noto Sans JP", sans-serif;
        line-height: 1.4;
        color: #000;
        letter-spacing: 0.05em;
    }
    
    /* 1行目: 左寄せ */
    .title-line-1 {
        display: block;
        text-align: left;
        font-size: 26px;
        font-weight: 400;
        margin-left: 25px;
    }
    /* 2行目: 右寄せ */
    .title-line-2 {
        display: block;
        text-align: right;
        font-size: 26px;
        font-weight: 400;
        margin-top: 5px;
        margin-right: -35px;
    }

    /* 説明文: 中央揃え */
    .sp-hero-desc {
        position: relative !important;
        z-index: 1 !important;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 300;
        font-size: 14px;
        line-height: 2.0;
        color: #000;
        padding-top: 15px;
    }

    /* --- SP CTA FIX (カード位置調整) --- */
    .sp-cta-fix {
        display: block !important;
        position: absolute !important; /* 絶対配置を強制 */
        top: 550px !important;        /* 画像の上の方に配置 */
        bottom: auto !important;
        left: 35px !important;
        
        width: 229px !important;       /* PCと同じ幅 */
        height: 358px !important;      /* PCと同じ高さ */
        
        transform: scale(0.65) !important; /* 全体を縮小 */
        transform-origin: top left;
        z-index: 50;
        margin: 0 !important;
    }
    /* CTA内の画像が巨大化するのを防ぐ */
    .sp-cta-fix img {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
    }
    /* CTA内の絶対配置を保護（リセットさせない） */
    .sp-cta-fix .rectangle-6,
    .sp-cta-fix .group-12,
    .sp-cta-fix .group-13,
    .sp-cta-fix .text-wrapper-45,
    .sp-cta-fix .image-6,
    .sp-cta-fix .element-zero,
    .sp-cta-fix .element-7,  /* ハサミアイコン */
    .sp-cta-fix .vector-15,  /* 矢印1 */
    .sp-cta-fix .vector-16   /* 矢印2 */
    {
        position: absolute !important;
    }
    /* 座標の再定義（PCのCSSを明示的に継承） */
    .sp-cta-fix .rectangle-6 { top: 24px !important; left: 12px !important; width: 204px !important; height: 334px !important; }
    .sp-cta-fix .group-12 { top: 36px !important; left: 31px !important; width: 172px !important; height: 168px !important; }
    .sp-cta-fix .group-13 { top: 0 !important; left: 0 !important; width: 263px !important; height: 81px !important; }
    .sp-cta-fix .text-wrapper-45 { top: 220px !important; left: 47px !important; width: 166px !important; font-size: 20px !important; }
    .sp-cta-fix .image-6 { top: 61.93% !important; left: 9.15% !important; width: 10.1% !important; height: 7.73% !important; }
    .sp-cta-fix .element-zero { top: 270px !important; left: 34px !important; font-size: 16px !important; }

    /* アイコン座標 */
    .sp-cta-fix .element-7 { top: 29px !important; left: 60px !important; width: 48px !important; height: 48px !important; }
    .sp-cta-fix .vector-15 { top: 119px !important; left: 128px !important; width: 9px !important; height: 13px !important; }
    .sp-cta-fix .vector-16 { top: 119px !important; left: 34px !important; width: 9px !important; height: 13px !important; }

    /* 回転テキストの復元 */
    .sp-cta-fix .text-wrapper-26 { transform: rotate(-63.11deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-27 { transform: rotate(-55.32deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-28 { transform: rotate(-48.31deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-29 { transform: rotate(-41.30deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-30 { transform: rotate(-34.54deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-31 { transform: rotate(-27.79deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-32 { transform: rotate(-20.52deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-33 { transform: rotate(-14.54deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-34 { transform: rotate(-8.31deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-35 { transform: rotate(-0.52deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-36 { transform: rotate(7.27deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-37 { transform: rotate(13.51deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-38 { transform: rotate(20.00deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-39 { transform: rotate(28.05deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-40 { transform: rotate(35.84deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-41 { transform: rotate(42.85deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-42 { transform: rotate(49.87deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-43 { transform: rotate(57.40deg) !important; font-size: 16px !important; position: absolute !important; }
    .sp-cta-fix .text-wrapper-44 { transform: rotate(64.15deg) !important; font-size: 16px !important; position: absolute !important; }

    /* ▼▼▼ SP INFORMATION (修正済み) ▼▼▼ */
    .zero-PCTOP .INFO {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 40px 20px !important;
        align-items: center !important;
        padding-bottom: 98px !important;
        width:100vw !important;
    }
    
    /* "INFORMATION" タイトル */
    .zero-PCTOP .text-wrapper-46 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        font-size: 32px !important; /* PCの96pxから縮小 */
        line-height: 1.2 !important;
        margin: 0 0 20px !important;
        text-align: center !important;
        white-space: normal !important;
        display: block !important;
    }

    /* "Coming Soon" ボックス */
    .zero-PCTOP .group-14 {
        width: 100% !important;
        height: 70px !important;
        position: relative !important;
    }
    .zero-PCTOP .rectangle-7 {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
    }
    .zero-PCTOP .text-wrapper-47 {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        font-size: 24px !important; /* フォントサイズ調整 */
    }
    /* ▲▲▲ ここまで ▲▲▲ */

    /* ▼▼▼ SP CONCEPT Section (修正済み) ▼▼▼ */
    /* コンテナ: 赤線を画面端につけるため、左右paddingを0にする */
    .zero-PCTOP .view {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 0px 0 !important; /* 左右余白なし */
        position: relative !important;
    }

    /* 上部の赤線 (::beforeで描画) */
    .zero-PCTOP .view::before {
        content: "";
        display: block;
        width: 70%; /* 画面の7割 */
        height: 2px;
        background-color: #f7412a;
        align-self: flex-start; /* 左端配置 */
        margin-bottom: 30px;
        order: 1;
    }

    /* CONCEPT タイトル */
    .zero-PCTOP .view .div {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        font-size: 40px !important;
        color: #ccd7dd !important;
        text-align: right !important;
        padding-right: 20px !important; 
        box-sizing: border-box !important;
        margin: 0 0 30px !important;
        order: 2;
        display: block !important;
        line-height: 1 !important;
    }

    /* テキストコンテナの無効化 */
    .zero-PCTOP .text-wrapper-container {
        display: contents !important;
    }

    /* テキスト (上: 前半) */
    .zero-PCTOP .text-part-upper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 2.0 !important;
        text-align: justify !important;
        padding: 0 40px !important; 
        box-sizing: border-box !important;
        margin: 0 0 40px !important;
        order: 3;
    }

    /* メイン画像 */
    .zero-PCTOP .view .mask-group {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: calc(100% - 40px) !important; 
        height: auto !important;
        margin: 0 auto 30px !important;
        order: 4;
    }

    /* 下部の赤線 (::afterで描画) */
    .zero-PCTOP .view::after {
        content: "";
        display: block;
        width: 70%; /* 画面の7割 */
        height: 2px;
        background-color: #f7412a;
        align-self: flex-end; /* 右端配置 */
        order: 5;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    /* テキスト (下: 後半) */
    .zero-PCTOP .text-part-lower {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 2.0 !important;
        text-align: justify !important;
        padding: 0 40px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        order: 6;
    }
    /* ▲▲▲ ここまで ▲▲▲ */

    /* --- MENU (修正版) --- */
    .zero-PCTOP .view-3 {
        position: relative !important;
        height: auto !important; 
        min-height: 440px !important; /* 画像とテキストが収まる高さ */
        padding: 0 !important;
        margin-bottom: 40px !important;
        overflow: hidden !important;
    }
    .zero-PCTOP .text-wrapper-10 {
        position: absolute !important;
        top: 20px !important;
        left: 35px !important;
        width: auto !important;
        height: auto !important;
        font-size: 34px !important;
        color: #cdd7de !important;
        margin: 0 !important;
        z-index: 5 !important;
    }
    .zero-PCTOP .zero {
        position: absolute !important;
        top: 125px !important; /* タイトルの下 */
        left: 0 !important;
        width: 100% !important;
        height: 170px !important; /* 比率を維持 */
        object-fit: cover !important;
        z-index: 0 !important; /* 最背面 */
    }
    .zero-PCTOP .text-wrapper-12 {
        position: absolute !important;
        top: 110px !important;
        right: 40px !important; /* 右配置 */
        left: auto !important;
        width: 70% !important;
        height: auto !important;
        font-family: "Yu Mincho", "YuMincho", serif !important;
        font-size: 11px !important;
        line-height: 1.8 !important;
        text-align: left !important;
        color: #6b6a75 !important;
        z-index: 10 !important; /* 画像より手前 */
        display: block !important;
        opacity: 0.6;
    }
    .zero-PCTOP .text-wrapper-13 {
        position: absolute !important;
        top: 280px !important; /* 上段テキストの下 */
        left: 40px !important; /* 左配置 */
        right: auto !important;
        width: 70% !important;
        height: auto !important;
        font-family: "Yu Mincho", "YuMincho", serif !important;
        font-size: 11px !important;
        line-height: 1.8 !important;
        text-align: justify !important;
        color: #6b6a75 !important;
        z-index: 10 !important; /* 画像より手前 */
        display: block !important;
        opacity: 0.6;
    }
    .zero-PCTOP .click {
        position: absolute !important;
        top: 340px !important; /* テキストの下 */
        left: 20px !important;
        width: 250px !important; /* デザインカンプの幅 */
        height: 50px !important;
        z-index: 10 !important;
        transform: none !important;
    }

    /* ボタン枠線 */
    .zero-PCTOP .vector-10 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* ボタンテキスト */
    .zero-PCTOP .text-wrapper-11 {
        position: absolute !important;
        top: 50% !important;
        left: 50px !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: #f7412a !important;
        width: auto !important;
    }

    /* 矢印アイコン */
    .zero-PCTOP .vector-9 {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: auto !important;
    }

    .zero-PCTOP .view-3::after {
        content: "";
        position: absolute !important;
        bottom: 0 !important; /* セクションの最下部に配置 */
        left: 0 !important;
        width: 70% !important; /* 画面幅の70% */
        height: 2px !important;
        background-color: #f7412a !important;
        z-index: 10 !important;
    }

    /* --- Common Sections Padding --- */
    section {
        padding: 40px 20px;
        box-sizing: border-box;
    }

    /* --- STYLE (Slider) 500px収め調整版 --- */
    .zero-PCTOP .view-5 {
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://zer0-zer0.com/wp-content/uploads/2026/02/sp-top-style-bg.png') no-repeat center center !important;
        background-size: cover !important; /* 高さが変わっても隙間が出ないようにcoverへ変更 */
        box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);
        
        /* ▼▼▼ 高さ制限と余白の調整 ▼▼▼ */
        height: 500px !important;        /* 高さを500pxに固定 */
        padding: 20px 0 !important;      /* 上下の余白を60px→20pxへ削減 */
        gap: 10px !important;            /* 要素間の隙間を制御 */
        /* ▲▲▲ ここまで ▲▲▲ */

        background-position: 25% center !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important; /* 中身を中央寄せ */
        position: relative !important;
        
        /* ロゴより手前に表示 */
        z-index: 10 !important;
    }

    /* 1. タイトル調整 */
    .zero-PCTOP .text-wrapper-16 {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        color: #fff !important;
        font-size: 28px !important;      /* 34px -> 28px に少し縮小 */
        margin: 0 0 10px !important;     /* 下の余白を40px -> 10pxへ削減 */
        order: 1 !important;
        line-height: 1 !important;
    }

    /* 2. 画像スクロールエリア調整 */
    .zero-PCTOP .style-scroll-container {
        position: relative !important;
        display: flex !important;
        overflow-x: auto !important;
        scroll-behavior: smooth !important;
        gap: 20px !important;
        padding: 0 20px !important;      /* 下の余白を削除 */
        width: 100% !important;
        order: 2 !important;
        height: auto !important;
        
        /* スクロールバー非表示 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .zero-PCTOP .style-scroll-container::-webkit-scrollbar {
        display: none;
    }

    /* 画像サイズの縮小 */
    .zero-PCTOP .style-item {
        flex: 0 0 auto !important;
        width: 240px !important;         /* 300px -> 240px に縮小 */
        height: 240px !important;        /* 正方形を維持 */
        max-width: 240px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* 3. View More ボタン調整 */
    .zero-PCTOP .click-3 {
        position: relative !important;
        width: 200px !important;
        height: 50px !important;
        margin-top: 30px !important;   
        order: 3 !important;
        display: block !important;
        z-index: 10 !important;
        transform: scale(0.9) !important; /* ボタン全体を少し縮小 */
        transform-origin: center top !important;
    }

    /* ボタン枠線 (サイズ合わせ) */
    .zero-PCTOP .click-3 .vector-10 {
        position: absolute !important;
        top: -10px !important;
        left: -85px !important;
        width: 110% !important;
        height: 160% !important;
        object-fit: contain !important;
        max-width:none !important;
    }

    /* ボタンテキスト */
    .zero-PCTOP .text-wrapper-17 {
        position: absolute !important;
        top: 55% !important;
        left: -50px !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: #ffffff !important;
        width: auto !important;
    }

    /* 矢印アイコン */
    .zero-PCTOP .click-3 .vector-9 {
        position: absolute !important;
        top: 50% !important;
        right: 80px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: auto !important;
    }

    /* 4. 不要なナビボタンを非表示 */
    .zero-PCTOP .style-nav-btn {
        display: none !important;
    }

    /* --- STAFF (Flex) クラス名変更による完全修正版 --- */
    .view-7 {
        position: relative !important;
        z-index: 1;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding-bottom: 60px !important;
    }

    /* 背景ロゴの設定 */
    .view-7::before {
        content: "";
        display: block;
        position: absolute;
        background-image: url('https://zer0-zer0.com/wp-content/uploads/2026/02/logo-3-2-1.png'); 
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center top;
        top: -90px;
        left: 150px;
        width: 100%;
        height: 400px;
        opacity: 0.2;
        z-index: -5;
        pointer-events: none;
    }

    /* タイトル位置 */
    .view-7 .text-wrapper-20 {
        font-size: 40px !important;
        position: relative !important;
        left: auto !important;
        width: auto !important;
        align-self: flex-start !important; 
        margin-left: 20px !important; 
        margin-bottom: 20px !important;
    }

    /* ▼▼▼ 新クラス：スタッフカードレイアウト ▼▼▼ */
    /* ※HTML側のクラス名を 'staff-container-mobile-final' に変更してください */
    .staff-container-mobile-final {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important; /* 横並び */
        justify-content: center !important;
        gap: 10px !important;
        align-items: flex-start !important; 
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        margin-bottom: 40px !important;
        top: auto !important;
        left: auto !important;
    }

    .staff-container-mobile-final figure {
        position: relative !important; /* ここを基準に文字を配置 */
        width: 32% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .staff-container-mobile-final figure img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* ▼▼▼ 名前（figcaption）の制御 ▼▼▼ */
    
    /* 基本：一旦すべて非表示にする（Yutaka, Iku対策） */
    .staff-container-mobile-final figure figcaption {
        display: none !important;
    }

    /* Hitomin専用クラスの中だけ表示設定を上書き */
    .staff-container-mobile-final figure.hitomin-figure figcaption {
        display: block !important;
        position: absolute !important; /* 画像の上に重ねる */
        bottom: 35px !important;        /* 画像下から5px */
        left: 5px !important;          /* 画像左から5px */
        z-index: 100 !important;        /* 最前面 */
        
        color: #ffffff !important;
        font-family: "Noto Sans JP", sans-serif !important;
        font-size: 10px !important;
        font-weight: bold !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
        
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* ▼▼▼ View Moreボタン ▼▼▼ */
    .view-7 .click-4 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: block !important;
        width: 180px !important;
        height: 46px !important;
        margin-top: 0 !important;
        transform: none !important;
    }
    .view-7 .click-4 .vector-10 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    .view-7 .click-4 .vector-9 {
        position: absolute !important;
        top: 50% !important;
        right: 0px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
    }
    .view-7 .click-4 .text-wrapper-21 {
        position: absolute !important;
        top: 50% !important;
        left: 30px !important;
        transform: translateY(-50%) !important;
        width: auto !important;
    }

    /* --- BLOG (Flex) --- */
    .view-8 .text-wrapper-48 {
        font-size: 40px !important;
        position: relative !important;
        left: 0 !important;
    }
    .blog-list-sp {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .blog-list-sp article {
        border: 1px solid #eee;
        padding: 15px;
        background: #fff;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    .blog-list-sp article img {
        margin-top: 10px;
    }
    
    /* --- VOICE --- */
    .view-4 .text-wrapper-14 {
        font-size: 40px !important;
        position: relative !important;
        left: 0 !important;
    }
    
    /* --- FOOTER (Old styles - can be ignored as we use new wrapper) --- */
    .view-2 {
        background: #f9f9f9;
        padding: 40px 20px;
        height: auto !important;
    }
    .group-2 { /* Address container */
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    .group-2 > div {
        margin-bottom: 20px;
    }
    .view-2 .image { /* Map */
        position: static !important;
        width: 100% !important;
        height: 250px !important;
        margin-bottom: 30px;
    }
    .sp-footer-copy {
        text-align: center;
        font-size: 12px;
        color: #999;
        margin-top: 20px;
    }
}

/* PC表示時のスタイルラッパー無効化 */
@media screen and (min-width: 768px) {
    .style-scroll-container {
        display: contents; /* 枠をなかったことにする */
    }
    .style-nav-btn, .sp-fv-bg {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    /* STAFFセクション全体のレイアウト強制 */
    html body .zero-PCTOP .view-7 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 40px 0 60px 0 !important;
        z-index: 1 !important;
        position: relative !important;
    }

    /* STAFF タイトル左寄せ */
    html body .zero-PCTOP .view-7 .text-wrapper-20 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        align-self: flex-start !important;
        margin-left: 20px !important;
        margin-bottom: -30px !important;
        font-size: 40px !important;
        width: auto !important;
    }

    /* スタッフカード 3枚横並び強制設定 */
    html body .zero-PCTOP .view-7 div.staff-container-sp.sp-only {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important; /* ボタンとの余白 */
        padding: 0 10px !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
        top: auto !important;
        left: auto !important;
    }

    html body .zero-PCTOP .view-7 div.staff-container-sp.sp-only figure {
        position: relative !important;
        width: 32% !important;
        margin: 0 !important;
        line-height: 0 !important;
        background: none !important;
        border: none !important;
    }

    html body .zero-PCTOP .view-7 div.staff-container-sp.sp-only figure img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 名前表示制御：Yutaka, Ikuを隠し、Hitominだけ表示 */
    html body .zero-PCTOP .view-7 div.staff-container-sp.sp-only figure figcaption {
        display: none !important;
    }

    /* Hitomin専用スタイル (調整値反映) */
    html body .zero-PCTOP .view-7 div.staff-container-sp.sp-only figure:nth-of-type(3) figcaption {
        display: block !important;
        position: absolute !important;
        top: 100px !important; /* 100px 指定 */
        left: 8px !important;
        z-index: 100 !important;
        color: #ffffff !important;
        font-family: "Noto Sans JP", sans-serif !important;
        font-weight: 500 !important; 
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7) !important;
        background: transparent !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* CTA（View more）の直下の赤いライン */
    html body .zero-PCTOP .view-7 a.click-4::after {
        content: "";
        display: block;
        position: absolute;
        bottom: -20px;
        left: -150px;
        width: 400px;
        height: 2px;
        background-color: #f7412a;
        pointer-events: none;
    }

    /* セクション最下部の赤ライン */
    html body .zero-PCTOP .view-7::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 70%;
        height: 2px;
        background-color: #f7412a;
        z-index: 10;
    }

    /* ボタン内部矢印と枠の再配置 */
    html body .zero-PCTOP .view-7 .click-4 .vector-10 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    html body .zero-PCTOP .view-7 .click-4 .vector-9 {
        position: absolute !important;
        top: 50% !important;
        right: 0px !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
    }
    html body .zero-PCTOP .view-7 .click-4 .text-wrapper-21 {
        position: absolute !important;
        top: 50% !important;
        left: 30px !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        color: #f7412a !important;
        font-family: "Shippori Mincho", serif !important;
    }
    /* =========================================
    【最終配置修正】STAFFセクション内要素の並び替え
    ========================================= */
    /* 1. セクション全体をFlexboxの縦並びに固定 */
    html body .zero-PCTOP .view-7 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 40px 0 60px 0 !important;
        position: relative !important;
    }

    /* 2. STAFFタイトル（h2）を「1番目」に配置 */
    html body .zero-PCTOP .view-7 .text-wrapper-20 {
        position: relative !important;
        order: 1 !important;
        left: auto !important;
        top: auto !important;
        align-self: flex-start !important;
        margin-left: 20px !important;
        margin-bottom: 20px !important; /* ラインとの隙間 */
        width: auto !important;
        display: block !important;
    }

    /* 3. タイトル下の赤いライン（擬似要素）を「2番目」に配置 */
    /* position: static にすることでFlexアイテムとしてタイトル直下に並べます */
    html body .zero-PCTOP .view-7::after {
        content: "" !important;
        order: 2 !important;
        display: block !important;
        position: static !important; /* 絶対配置を解除して順番通りに並べる */
        width: 70% !important;
        height: 2px !important;
        background-color: #f7412a !important;
        align-self: flex-start !important;
        margin-bottom: 30px !important; /* カードとの隙間 */
    }

    /* 4. スタッフカードコンテナを「3番目」に配置 */
    html body .zero-PCTOP .view-7 .staff-container-mobile-final.sp-only {
        position: relative !important;
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 30px !important; /* ボタンとの隙間 */
    }

    /* 5. View moreボタンを「4番目」に配置 */
    html body .zero-PCTOP .view-7 a.click-4 {
        position: relative !important;
        order: 4 !important;
        display: block !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}
/* =========================================
   【STAFFセクション】要素の重なりと並び順を強制修正
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. STAFFセクション全体を縦並びの箱にする */
    html body .zero-PCTOP .view-7 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important; /* 高さを中身に合わせる */
        padding: 40px 0 60px 0 !important;
        position: relative !important;
    }

    /* 2. STAFFタイトル（h2）を一番上に配置 */
    html body .zero-PCTOP .view-7 .text-wrapper-20 {
        position: relative !important;
        order: 1 !important;
        left: auto !important;
        top: auto !important;
        align-self: flex-start !important;
        margin-left: 20px !important;
        margin-bottom: 20px !important; /* ラインとの隙間 */
        width: auto !important;
        display: block !important;
    }

    /* 3. タイトル下の赤いライン（擬似要素）を2番目に配置 */
    html body .zero-PCTOP .view-7::after {
        content: "" !important;
        order: 2 !important;
        display: block !important;
        position: static !important; /* 浮かせず、列の1つとして並べる */
        width: 70% !important;
        height: 2px !important;
        background-color: #f7412a !important;
        align-self: flex-start !important;
        margin-bottom: 30px !important; /* カードとの隙間 */
    }

    /* 4. スタッフカードコンテナを3番目に配置 */
    html body .zero-PCTOP .view-7 .staff-container-mobile-final.sp-only {
        position: relative !important;
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important; /* 横並び維持 */
        justify-content: center !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 30px !important; /* ボタンとの隙間 */
    }

    /* 5. View moreボタンを4番目（一番下）に配置 */
    html body .zero-PCTOP .view-7 a.click-4 {
        position: relative !important; /* absoluteを解除 */
        order: 4 !important;
        display: block !important;
        transform: none !important;
        width: 180px !important;
        height: 46px !important;
        top: auto !important;
        left: auto !important;
        margin-left: 5vw !important;
    }

    /* 6. Hitominの名前位置とスタイル（ご指定の最新値） */
    html body .staff-container-mobile-final figure.hitomin-figure figcaption {
        display: block !important;
        position: absolute !important;
        bottom: 35px !important;
        left: 5px !important;
        z-index: 100 !important;
        color: #ffffff !important;
        font-family: "Noto Sans JP", sans-serif !important;
        font-size: 10px !important;
        font-weight: bold !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
        background: transparent !important;
        width: auto !important;
    }
}

/* =========================================
   【VOICEセクション】レスポンシブ強制修正
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. セクション全体の縦並び設定 */
    html body .zero-PCTOP .view-4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important; /* 中身に合わせて高さを自動化 */
        padding: 0px 0 60px 0 !important;
        position: relative !important;
    }

    /* 2. VOICEタイトル（h2）を左寄せにする */
    html body .zero-PCTOP .view-4 .text-wrapper-14 {
        position: relative !important;
        order: 1 !important;
        left: auto !important;
        top: auto !important;
        align-self: flex-start !important;
        margin-left: 20px !important;
        margin-bottom: 20px !important;
        width: auto !important;
        font-size: 40px !important;
        line-height: 1.2 !important;
        color: #ffffff !important; /* PC版に準拠、背景が暗い場合は調整 */
    }

    /* 3. コンテンツエリア（動画や画像）を2番目に配置 */
    /* 元のYouTube埋め込みやグレーの箱をレスポンシブ化 */
    html body .zero-PCTOP .view-4 .rectangle-3,
    html body .zero-PCTOP .view-4 .element-5,
    html body .zero-PCTOP .view-4 .youtube-embed {
        position: relative !important;
        order: 2 !important;
        width: calc(100% - 40px) !important; /* 左右に20pxずつの余白 */
        height: auto !important;
        aspect-ratio: 16 / 9 !important; /* 動画の比率を維持 */
        top: auto !important;
        left: auto !important;
        margin: 0 auto 30px auto !important;
    }

    /* 4. View moreボタンを3番目（一番下）に配置 */
    html body .zero-PCTOP .view-4 a.click-2 {
        position: relative !important;
        order: 3 !important;
        display: block !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        transform: none !important;
        width: 180px !important;
        height: 46px !important;
    }

    /* 5. 邪魔な装飾要素（赤いライン等）の配置解除 */
    html body .zero-PCTOP .view-4 .vector-11 {
        display: none !important; /* 一旦非表示、必要ならSTAFF同様::afterで描画 */
    }

    /* ボタン内部パーツ（STAFF同様の構成を維持） */
    .view-4 .click-2 .vector-10 { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; }
    .view-4 .click-2 .vector-9 { position: absolute !important; top: 50%; right: 0; transform: translateY(-50%); width: 40px; }
    .view-4 .click-2 .text-wrapper-15 { position: absolute !important; top: 50%; left: 30px; transform: translateY(-50%); width: auto; color: #f7412a; font-family: "Shippori Mincho", serif; }
}

/* =========================================
   【BLOGセクション】スマホ用スライド表示修正
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. BLOGセクション全体の高さを自動調整 */
    html body .zero-PCTOP .view-8 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 40px 0 60px 0 !important;
        overflow: hidden !important; /* 横スクロール時のはみ出し防止 */
    }

    /* 2. タイトル調整 */
    html body .zero-PCTOP .view-8 .text-wrapper-48 {
        position: relative !important;
        order: 1 !important;
        left: auto !important;
        top: auto !important;
        font-size: 40px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    /* 3. カードコンテナをスライド仕様にする */
    /* 親要素（ここでは仮に .group-15, 16, 17 を包む要素を想定） */
    html body .zero-PCTOP .view-8 .blog-slider-wrap {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto !important; /* 横スクロールを許可 */
        scroll-snap-type: x mandatory !important; /* スナップ機能 */
        -webkit-overflow-scrolling: touch !important;
        padding: 0 10% 40px 10% !important; /* 左右に隙間を作り、前後のカードを見せる */
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    /* スクロールバーを非表示にする（任意） */
    html body .zero-PCTOP .view-8 .blog-slider-wrap::-webkit-scrollbar {
        display: none;
    }

    /* 4. 各ブログカードの調整 */
    html body .zero-PCTOP .view-8 .group-15,
    html body .zero-PCTOP .view-8 .group-16,
    html body .zero-PCTOP .view-8 .group-17 {
        position: relative !important;
        flex: 0 0 80% !important; /* 1枚の幅を画面の80%にして左右を見せる */
        width: 80% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        scroll-snap-align: center !important; /* スクロール時に中央で止まる */
        margin: 0 !important;
    }

    /* カード内の画像とテキストの配置を原本維持しつつ調整 */
    html body .zero-PCTOP .view-8 .rectangle-9 {
        width: 100% !important;
        height: 250px !important; /* スマホで見やすい高さに調整 */
        position: relative !important;
    }

    /* 5. View moreボタン（BLOG用） */
    html body .zero-PCTOP .view-8 a.click-5 {
        position: relative !important;
        order: 3 !important;
        display: block !important;
        margin: 20px auto 0 !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
}

/* =========================================
   【BLOG】タイトル表示＋スライダーサイズ完全修正
   ========================================= */
@media screen and (max-width: 767px) {

    /* セクション全体 */
    html body .zero-PCTOP .view-8 {
        display: block !important;
        height: auto !important;
        padding: 0px 0 60px 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* スマホ専用コンテナ */
    .blog-section-sp {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        min-height: 550px !important;
        z-index: 1 !important;
    }

    /* 背景ボックス */
    .blog-bg-eff2f4 {
        position: absolute !important;
        top: 60px !important;
        right: 0 !important;
        width: 60% !important;
        height: 400px !important;
        background-color: #EFF2F4 !important;
        border-radius: 40px 0 0 40px !important;
        z-index: 1 !important;
    }

    /* BLOGタイトル（右上固定・表示維持） */
    h2.blog-title-sp {
        display: block !important;
        position: absolute !important;
        top: 90px !important;         
        right: 60px !important;
        left: auto !important;
        bottom: auto !important;
        font-size: 40px !important;
        color: #ffffff !important;
        text-align: right !important;
        font-family: "Yu Mincho-Demibold", Helvetica !important;
        line-height: 1 !important;
        letter-spacing: 0.1em !important;
        margin: 0 !important;
        width: auto !important;
        z-index: 5 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        font-weight: 450 !important;
    }

    /* スライダー（内側） */
    .blog-slider-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 折り返しを絶対に防ぐ */
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        padding: 150px 40px 30px !important; 
        gap: 20px !important;
        position: relative !important;
        z-index: 10 !important;
        scrollbar-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .blog-slider-inner::-webkit-scrollbar { display: none !important; }

    /* 各ブログカード（サイズ崩れ修正） */
    .blog-card-sp {
        display: flex !important;
        flex-direction: column !important;
        /* ▼ ここが修正ポイント：縮小を禁止し、幅を固定 ▼ */
        flex: 0 0 80% !important; 
        min-width: 80% !important; /* これで潰れなくなります */
        width: 80% !important;
        max-width: 80% !important;
        
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
        scroll-snap-align: center !important;
        border-radius: 4px !important;
        margin: 0 !important;
    }

    /* カード内画像 */
    .blog-card-sp img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
    }

    /* カード内テキストエリア */
    .blog-card-info {
        padding: 15px !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .blog-card-info time {
        font-size: 11px !important;
        color: #888 !important;
        display: block !important;
        margin-bottom: 5px !important;
        font-family: "Noto Sans JP", sans-serif !important;
    }
    .blog-card-info h3 {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #26252e !important;
        font-weight: bold !important;
        margin: 0 !important;
        font-family: "Noto Sans JP", sans-serif !important;
    }

    /* ゲージ */
    .blog-slider-gauge {
        width: 160px !important;
        height: 2px !important;
        background: #e0e0e0 !important;
        margin: 0 auto 35px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .blog-slider-gauge span {
        position: absolute !important;
        left: 0% !important;
        width: 34% !important;
        height: 100% !important;
        background: #718694 !important;
    }

    /* CTAボタン */
    html body .zero-PCTOP .view-8 .click-5-sp {
        position: relative !important;
        display: block !important;
        width: 180px !important;
        height: 46px !important;
        z-index: 20 !important;
        transform: none !important;
        margin-left: 40vw !important;
    }
}

/* =========================================
   【最終調整】PC用ボタンの完全消去
   ========================================= */
@media screen and (max-width: 767px) {
    /* PC用の .click-5 ボタンを、いかなる指定よりも優先して非表示にする */
    html body .zero-PCTOP .view-8 a.click-5 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        z-index: -9999 !important;
    }
}

/* =========================================
   【VOICE】画像サイズ修正・決定版
   ========================================= */
@media screen and (max-width: 767px) {

    /* PC要素の非表示（維持） */
    html body .zero-PCTOP .view-4 .youtube-embed,
    html body .zero-PCTOP .view-4 .pc-only {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        position: absolute !important;
        z-index: -9999 !important;
    }

    /* セクション定義 */
    .voice-section-sp {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 20px !important;
    }

    /* 3. 背景画像エリア */
    .voice-header-area {
        position: relative !important; /* 基準点 */
        width: 90% !important;
        height: 330px !important; /* 縦長(1.5倍) */
        margin-right: auto !important;
        border-radius: 0 40px 40px 0 !important;
        overflow: hidden !important;
        z-index: 1 !important;
    }

    .voice-header-area .voice-bg-img {
        position: absolute !important; /* 絶対配置で浮かす */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;        /* 横幅いっぱい */
        height: 100% !important;       /* 縦幅いっぱい（ここが重要） */
        min-height: 330px !important;  /* 最低でも枠と同じ高さを持つ */
        object-fit: cover !important;  /* 比率を保ったままトリミング */
        object-position: center !important;
        z-index: 0 !important;         /* 最背面 */
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        max-width: none !important;    /* 最大幅制限を解除 */
    }

    .voice-bg-img {
        position: absolute !important; /* 絶対配置に変更 */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important; 
        object-fit: cover !important; /* 枠に合わせてトリミング */
        display: block !important;
        z-index: 0 !important; /* 文字より後ろ */
    }

    /* 4. タイトル（top: 15px） */
    h2.voice-title-sp {
        position: absolute !important;
        top: 15px !important;
        left: 25px !important;
        color: #ffffff !important;
        font-size: 46px !important;
        font-family: "Yu Mincho-Demibold", Helvetica, serif !important;
        line-height: 1.1 !important;
        z-index: 10 !important; /* 画像より手前 */
        margin: 0 !important;
        width: auto !important;
        display: block !important;
    }

    /* 5. 赤ライン（top: 65px） */
    .voice-red-line {
        position: absolute !important;
        top: 65px !important;
        left: 0 !important;
        width: 60% !important;
        height: 2px !important;
        background-color: #f7412a !important;
        z-index: 10 !important; /* 画像より手前 */
        display: block !important;
    }

    /* 6. 動画コンテナ */
    .voice-video-container {
        position: relative !important;
        width: 85% !important;
        aspect-ratio: 16 / 9 !important;
        margin-top: -245px !important;
        z-index: 20 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
        background: #000 !important;
        display: block !important;
    }

    .voice-video-container iframe {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    
    /* CTAボタン */
    html body .zero-PCTOP .view-4 .click-2-sp {
        position: relative !important;
        display: block !important;
        width: 180px !important;
        height: 46px !important;
        
        /* ▼ 位置調整のキモ ▼ */
        /* 上に80pxの余白を入れて動画の下へ押し出す */
        /* 左に25pxの余白を入れてタイトルと縦ラインを揃える */
        margin: 80px 0 0 25px !important; 
        
        /* 中央揃え（center）を解除し、左寄せ（flex-start）にする */
        align-self: flex-start !important; 
        
        z-index: 30 !important; /* 最前面 */
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* ボタン内部のパーツ（変更なし、念のため維持） */
    .click-2-sp .vector-10 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .click-2-sp .vector-9 { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 40px; }
    .click-2-sp .text-wrapper-21 { 
        position: absolute; 
        top: 50%; 
        left: 30px; 
        transform: translateY(-50%); 
        color: #f7412a; 
        font-size: 14px; 
        font-family: "Shippori Mincho", serif; 
        letter-spacing: 0.1em;
    }
}

/* =========================================
   【VOICE】PC用ボタンの完全消去
   ========================================= */
@media screen and (max-width: 767px) {
    /* PC用の .click-2 ボタンを強制的に非表示にする */
    html body .zero-PCTOP .view-4 a.click-2 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        z-index: -9999 !important;
    }
}

/* =========================================
   【FOOTER】余白削除・スマホ完全吸着版
   ========================================= */
@media screen and (max-width: 767px) {
    
    /* 1. フッター枠自体のリセット */
    html body .view-2 {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* 上詰めで配置 */
        align-items: center !important;
        
        /* 巨大な隙間の原因となる「PC版の高さ・座標」を無効化 */
        height: auto !important;
        min-height: auto !important;
        top: auto !important;
        left: auto !important;
        margin-top: 0 !important; /* VOICEとの隙間をゼロにする */
        padding-top: 60px !important; /* 内部の適度な余白 */
        padding-bottom: 40px !important;
        background-color: #ffffff !important;
        width: 100% !important;
    }

    /* 2. フッター内の全要素の「PC座標」を解除 */
    /* これがないと、中身がPC版の位置（数百px下）に表示されてしまいます */
    html body .view-2 * {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 auto 0px !important; /* 各要素の間隔 */
        width: auto !important;
        height: auto !important;
        text-align: center !important;
    }

    /* 3. PC用の装飾図形（長方形など）を非表示にする */
    /* クラス名は推測ですが、PC版で背景に使われているrectangle系を消します */
    html body .view-2 div[class*="rectangle"] {
        display: none !important;
    }

    /* 4. 地図画像（img）の最適化 */
    html body .view-2 img {
        display: block !important;
        width: 90% !important; /* 画面幅に合わせて大きく */
        max-width: 500px !important;
        height: auto !important;
        object-fit: cover !important;
        margin-bottom: 30px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; /* 少しリッチに */
    }

    /* 5. 住所・電話番号などのテキスト */
    html body .view-2 p,
    html body .view-2 span, 
    html body .view-2 .text-wrapper,
    html body .view-2 .text-wrapper-2,
    html body .view-2 .text-wrapper-3,
    html body .view-2 div {
        font-family: "Shippori Mincho", serif !important;
        font-size: 13px !important;
        line-height: 2 !important;
        color: #333 !important;
        letter-spacing: 0.05em !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    /* 6. Copyright（一番下） */
    html body .view-2 .text-wrapper-53,
    html body .view-2 .copyright {
        font-size: 10px !important;
        color: #aaa !important;
        margin-top: 40px !important;
        font-family: "Noto Sans JP", sans-serif !important;
    }
}

/* =========================================
   【FOOTER】スマホ版完全修正（PC要素消去・ロゴ調整）
   ========================================= */

/* 1. PC表示時：今回追加したスマホ用ブロックを隠す */
.footer-sp-wrapper {
    display: none !important;
}

/* 2. スマホ表示時（767px以下）の設定 */
@media screen and (max-width: 767px) {

    /* --- 【最優先】PC用要素（pc-only）を強制非表示 --- */
    /* クラス名指しで確実に消します */
    .pc-only,
    html body .view-2 .element-2, /* PCロゴ */
    html body .view-2 .image      /* PC地図 */
    {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        position: absolute !important;
        z-index: -9999 !important;
    }
    
    /* --- スマホ用ブロックを表示 --- */
    .footer-sp-wrapper {
        display: block !important;
    }

    /* --- フッターエリア自体の初期化 --- */
    html body .view-2 {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        background-color: #EFF2F4 !important; /* 薄いグレー */
        width: 100% !important;
        position: relative !important;
        margin-top: 0 !important;
        top: auto !important;
        left: auto !important;
    }

    /* --- デザイン定義 --- */
    .footer-sp-wrapper {
        padding: 60px 0px 40px;
        width: 100%;
        box-sizing: border-box;
        font-family: "Shippori Mincho", "Yu Mincho", serif;
        color: #333;
    }

    /* リスト部分 */
    .footer-info-list { margin-bottom: 40px; }
    .footer-row {
        display: flex;
        align-items: flex-start;
        padding: 20px 0;
        border-bottom: 1px solid #ffffff;
        margin: 0;
    }
    .footer-row.no-border { border-bottom: none; }
    
    .footer-row dt {
        width: 30%;
        font-size: 14px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: normal;
        margin: 0;
        padding-top: 2px;
    }
    .footer-row dd {
        width: 70%;
        font-size: 13px;
        line-height: 1.8;
        margin: 0;
        letter-spacing: 0.05em;
    }
    .small-text { font-size: 10px; margin-left: 5px; }

    /* --- SNSアイコン（左寄せ） --- */
    .footer-sns-area {
        display: flex !important;
        justify-content: flex-start !important; /* 左寄せ */
        gap: 15px !important;
        margin-bottom: 50px !important;
    }
    .footer-sns-area a {
        display: block;
        width: 45px;
        height: 45px;
    }
    .footer-sns-area img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* --- ロゴ（右寄せ・サイズ固定・透過対策） --- */
    .footer-logo-area {
        text-align: right !important; /* 右寄せ */
        margin-bottom: 20px !important;
    }
    .footer-logo-img {
        width: 117px !important;  /* 幅指定 */
        height: 57px !important;  /* 高さ指定 */
        object-fit: contain !important;
        display: inline-block !important;
        
        /* 背景透過対策：乗算モードで白背景をなじませる */
        mix-blend-mode: multiply !important; 
    }

    /* --- Copyright（右寄せ） --- */
    .footer-copyright {
        text-align: right !important;
        font-size: 10px !important;
        color: #a4b0ba; /* 薄いブルーグレー */
        font-family: "Noto Sans JP", sans-serif;
        letter-spacing: 0.1em;
        margin: 0;
    }

    html body .view-2 .footer-sp-wrapper .footer-sns-area {
        display: flex !important;
        justify-content: flex-start !important; /* 左寄せ */
        gap: 15px !important;
        margin: 0 0 50px 0 !important; /* 上右下左：左マージンを0にして左端へ */
        width: 100% !important;
        margin-left: 0px !important;
    }

    /* SNSアイコン画像のサイズ固定（念のため） */
    html body .view-2 .footer-sp-wrapper .footer-sns-area a {
        display: block !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important; /* アイコン自体の余白もリセット */
    }
    
    html body .view-2 .footer-sp-wrapper .footer-sns-area img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        box-shadow: none !important; /* 影を消す */
    }

    /* --- 2. ロゴエリアの右寄せ修正 --- */
    html body .view-2 .footer-sp-wrapper .footer-logo-area {
        text-align: right !important;
        width: 70% !important;
        margin-bottom: 20px !important;
        display: block !important;
    }

    /* --- 3. ロゴ画像のサイズ＆透過修正 --- */
    /* セレクタを長くして、既存の "view-2 img { width: 90% }" に勝ちます */
    html body .view-2 .footer-sp-wrapper .footer-logo-area img.footer-logo-img {
        width: 117px !important;  /* 幅固定 */
        height: 57px !important;  /* 高さ固定 */
        object-fit: contain !important;
        display: inline-block !important; /* 右寄せを効かせるため */
        
        /* 背景透過対策：乗算モード */
        mix-blend-mode: multiply !important; 
        
        /* 余計なスタイルをリセット */
        margin: 0 0 0 auto !important; /* 右寄せのダメ押し */
        box-shadow: none !important;
        background-color: transparent !important;
    }

    /* リスト全体の囲み */
    html body .view-2 .footer-info-list {
        margin-bottom: 40px !important;
        width: 100% !important;
    }

    /* 各行（横並び設定） */
    html body .view-2 .footer-row {
        display: flex !important;
        align-items: flex-start !important; /* 上端揃え */
        justify-content: flex-start !important; /* 左詰め */

        padding: 20px 0 !important;

        border-bottom: 1px solid #ffffff !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* 最後の行の線なし設定 */
    html body .view-2 .footer-row.no-border {
        border-bottom: none !important;
    }

    /* 左側：項目名（ADDRESSなど） */
    html body .view-2 .footer-row dt {
        /* 幅を30%に固定することで、右側の開始位置を強制的に揃えます */
        flex: 0 0 30% !important; 
        width: 30% !important;
        
        text-align: left !important; /* 文字を左詰め */
        font-size: 14px !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        font-weight: normal !important;
        margin: 0 !important;
        padding: 2px 0 0 0 !important; /* 微調整 */
    }

    /* 右側：内容（住所など） */
    html body .view-2 .footer-row dd {
        /* 残りの70%を埋める */
        flex: 0 0 70% !important;
        width: 70% !important;
        
        text-align: left !important; /* 文字を左詰め */
        font-size: 13px !important;
        line-height: 1.8 !important;
        margin: 0 !important;
        padding: 0 !important; /* インデントを削除してdtの直後に配置 */
        padding-left: 15px !important;
        letter-spacing: 0.05em !important;
    }
    
    /* 注釈テキスト */
    html body .view-2 .footer-row .small-text {
        font-size: 10px !important;
        margin-left: 5px !important;
    }
    /* =========================================
   【最終調整】フォント・カラー・透過・レイアウト修正
   ========================================= */
    @media screen and (max-width: 767px) {

        /* --- 1. フッター：リストのフォント変更 (Noto Sans JP) --- */
        html body .view-2 .footer-row dt,
        html body .view-2 .footer-row dd {
            font-family: "Noto Sans JP", sans-serif !important;
        }

        /* --- 2. フッター：コピーライト変更 (Roboto Mono / #80B1D2) --- */
        html body .view-2 .footer-copyright {
            font-family: "Roboto Mono", monospace !important;
            color: #80B1D2 !important;
        }

        /* --- 3. 各セクションタイトル等のフォント変更 (Yu Mincho) --- */
        /* VOICE */
        html body .zero-PCTOP .view-4 h2.voice-title-sp,
        /* BLOG */
        html body .zero-PCTOP .view-8 h2.blog-title-sp,
        /* STAFF */
        html body .zero-PCTOP .view-7 .text-wrapper-20,
        /* MENU */
        html body .zero-PCTOP .view-3 .text-wrapper-10,
        /* STYLE */
        html body .zero-PCTOP .view-5 .text-wrapper-16,
        /* CONCEPT */
        html body .zero-PCTOP .view .div,
        /* INFORMATION Title */
        html body .zero-PCTOP .INFO .text-wrapper-46,
        /* INFORMATION Content (Coming Soon) */
        html body .zero-PCTOP .INFO .text-wrapper-47 {
            font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
        }

        /* --- 4. STAFFタイトルのマージン調整 --- */
        html body .zero-PCTOP .view-7 .text-wrapper-20 {
            margin-bottom: -40px !important; /* 赤いラインに近づける */
        }

        .sp-header-divider {
        width: 0 !important;
        border: none !important;
        margin-right: 5px !important; /* 少し間隔を詰める調整 */
        }
    }
}

@media screen and (max-width: 767px) {
    .zero-PCTOP .pc-map-frame {
        display: none !important;
    }
}

/* =========================================
   【SP MENU】スマホメニューのデザインと動作
   ========================================= */
@media screen and (max-width: 767px) {
    
    /* メニュー全体（オーバーレイ） */
    .sp-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.98); /* わずかに透過した白 */
        z-index: 9999; /* 最前面 */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* メニューが開いた時のクラス（JSで付与） */
    .sp-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 閉じるボタン（右上に配置） */
    .sp-menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
        padding: 10px;
    }

    /* ナビゲーションエリア */
    .sp-menu-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* 各リンク */
    .sp-menu-link {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 20px;
        color: #333;
        text-decoration: none;
        letter-spacing: 0.1em;
        text-transform: uppercase; /* 小文字で書いても大文字表示にするならこれ */
        font-weight: 500;
        position: relative;
        transition: color 0.3s;
    }

    /* リンクのホバー時（スマホだとタップ時） */
    .sp-menu-link:active {
        color: #f7412a;
    }

    /* メニュー内ロゴ */
    .sp-menu-logo img {
        width: 120px;
        height: auto;
        mix-blend-mode: multiply; /* ロゴの白背景を透過 */
    }
}

/* =========================================
   【SP MENU】強制表示設定（修正版）
   ========================================= */
@media screen and (max-width: 767px) {
    /* 1. ベースの状態（非表示だが存在はさせる） */
    #spMenuOverlay.sp-menu-overlay {
        display: flex !important; /* display:noneを打ち消す */
        visibility: hidden !important; /* 見えないようにする */
        opacity: 0 !important;
        pointer-events: none !important;
        
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        z-index: 99999 !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* 2. 開いた状態（クラスがついたら強制表示） */
    #spMenuOverlay.sp-menu-overlay.active {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* =================================================================
   MENU PAGE - PC STYLES (Screen > 767px)
   ================================================================= */
@media screen and (min-width: 768px) {

    .zero-menu-pc {
        background-color: #ffffff;
        overflow: hidden;
        width: 1440px;
        min-height: 8465px;
        position: relative;
    }

    .zero-menu-pc .menu-mv-section-pc {
        width: 1450px;
        height: 433px;
        position: relative;
        margin-top: 50px;
    }

    .zero-menu-pc .mask-group {
        position: absolute;
        top: 7px;
        left: 0;
        width: 1448px;
        height: 426px;
        display: flex;
        background-size: 100% 100%;
    }

    .zero-menu-pc .zero {
        width: 1440px;
        height: 426px;
        filter: blur(5px);
        object-fit: cover;
    }

    .zero-menu-pc .element {
        position: absolute;
        top: 0;
        left: 695px;
        width: 731px;
        height: 355px;
        object-fit: cover;
        opacity: 0.1;
    }

    .zero-menu-pc .text-wrapper {
        position: absolute;
        top: 139px;
        left: 180px;
        width: 404px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 96px;
        letter-spacing: 0;
        line-height: 230.4px;
        white-space: nowrap;
    }

    .zero-menu-pc .vector {
        position: absolute;
        top: 228px;
        left: 0;
        width: 874px;
        height: 2px;
    }

    .zero-menu-pc .menu-button-section {
        margin-left: 180px;
        width: 1081px;
        height: 195px;
        position: relative;
        margin-top: 80px;
    }

    .zero-menu-pc .CUT {
        position: absolute;
        top: 0;
        left: 0;
        width: 346px;
        height: 45px;
    }

    .zero-menu-pc .img {
        position: absolute;
        top: 15px;
        left: 276px;
        width: 49px;
        height: 13px;
    }

    .zero-menu-pc .div {
        position: absolute;
        top: 0;
        left: 0;
        width: 344px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 500;
        color: #6b6a75;
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
        line-height: 38.4px;
        white-space: nowrap;
    }

    .zero-menu-pc .rectangle {
        position: absolute;
        top: 0;
        left: 0;
        width: 344px;
        height: 45px;
        border: 1px solid;
        border-color: #6b6a75;
    }

    .zero-menu-pc .CUT-2 {
        position: absolute;
        top: 75px;
        left: 1px;
        width: 346px;
        height: 45px;
    }

    .zero-menu-pc .CUT-3 {
        position: absolute;
        top: 150px;
        left: 1px;
        width: 346px;
        height: 45px;
    }

    .zero-menu-pc .CUT-4 {
        position: absolute;
        top: 0;
        left: 369px;
        width: 346px;
        height: 45px;
    }

    .zero-menu-pc .CUT-5 {
        position: absolute;
        top: 75px;
        left: 370px;
        width: 346px;
        height: 45px;
    }

    .zero-menu-pc .CUT-6 {
        position: absolute;
        top: 0;
        left: 736px;
        width: 346px;
        height: 45px;
    }

    .zero-menu-pc .CUT-7 {
        position: absolute;
        top: 75px;
        left: 737px;
        width: 346px;
        height: 45px;
    }

    .zero-menu-pc .menu-cut-section-pc {
        width: 1442px;
        height: 1129px;
        position: relative;
        margin-top: 54px;
    }

    .zero-menu-pc .rectangle-2 {
        position: absolute;
        top: 120px;
        left: 0;
        width: 1440px;
        height: 1009px;
        background-color: #eef1f3;
    }

    .zero-menu-pc .rectangle-3 {
        position: absolute;
        top: 449px;
        left: calc(50% - 541px);
        width: 1080px;
        height: 550px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-pc .frame {
        display: flex;
        flex-direction: column;
        width: 734px;
        align-items: flex-start;
        gap: 50px;
        position: absolute;
        top: 529px;
        left: calc(50% - 368px);
    }

    .zero-menu-pc .frame-2 {
        display: flex;
        height: 38px;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .zero-menu-pc .p {
        width: 543px;
        height: 38px;
        margin-top: -1px;
        font-size: 16px;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: right;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .span {
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 28.8px;
    }

    .zero-menu-pc .text-wrapper-2 {
        font-size: 12px;
        line-height: 21.6px;
    }

    .zero-menu-pc .element-2 {
        width: 160px;
        height: 38px;
        margin-top: -1px;
        font-size: 12px;
        text-align: right;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: right;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-3 {
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 28.8px;
    }

    .zero-menu-pc .text-wrapper-4 {
        font-size: 16px;
        line-height: 38.4px;
    }

    .zero-menu-pc .text-wrapper-5 {
        width: 31px;
        height: 38px;
        margin-top: -1px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .div-2 {
        width: 543px;
        height: 38px;
        margin-top: -1px;
        font-size: 16px;
        line-height: 16px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-6 {
        line-height: 28.8px;
    }

    .zero-menu-pc .text-wrapper-7 {
        width: 160px;
        height: 38px;
        margin-top: -1px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: right;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-8 {
        position: absolute;
        top: 96px;
        left: 826px;
        width: 534px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 96px;
        letter-spacing: 0;
        line-height: 230.4px;
        white-space: nowrap;
    }

    .zero-menu-pc .vector-2 {
        position: absolute;
        top: 194px;
        left: 708px;
        width: 732px;
        height: 4px;
    }

    .zero-menu-pc .element-wrapper {
        top: 0;
        left: 0;
        width: 524px;
        height: 390px;
        display: flex;
        position: absolute;
        background-size: 100% 100%;
    }

    .zero-menu-pc .element-3 {
        width: 480px;
        height: 390px;
        object-fit: cover;
    }

    .zero-menu-pc .img-wrapper {
        top: 80px;
        left: 432px;
        width: 276px;
        height: 238px;
        display: flex;
        position: absolute;
        background-size: 100% 100%;
    }

    .zero-menu-pc .element-4 {
        width: 276px;
        height: 238px;
        object-fit: cover;
    }

    .zero-menu-pc .menu-perm-section-pc {
        width: 1262px;
        height: 659px;
        position: relative;
        margin-top: 130px;
    }

    .zero-menu-pc .rectangle-4 {
        position: absolute;
        top: 231px;
        left: calc(50% - 451px);
        width: 1080px;
        height: 428px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-pc .frame-3 {
        display: flex;
        flex-direction: column;
        width: 731px;
        align-items: flex-start;
        gap: 50px;
        position: absolute;
        top: 311px;
        left: calc(50% - 277px);
    }

    .zero-menu-pc .frame-4 {
        height: 56px;
        display: flex;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .zero-menu-pc .element-5 {
        width: 543px;
        height: 58px;
        margin-top: -2px;
        font-size: 16px;
        line-height: 16px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-9 {
        width: 160px;
        height: 56px;
        margin-top: -1px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-10 {
        width: 31px;
        height: 56px;
        margin-top: -1px;
        margin-right: -3px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .element-6 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 543px;
        height: 56px;
        margin-top: -1px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 16px;
    }

    .zero-menu-pc .div-3 {
        width: 543px;
        height: 56px;
        margin-top: -1px;
        font-size: 16px;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-11 {
        left: 180px;
        width: 1080px;
        height: 73px;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        font-size: 96px;
        line-height: 230.4px;
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: left;
        color: #6b6a75;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .zero-menu-pc .vector-3 {
        position: absolute;
        top: 98px;
        left: 0;
        width: 759px;
        height: 2px;
    }

    .zero-menu-pc .menu-color-section {
        margin-left: -154px;
        width: 1598px;
        height: 1699px;
        position: relative;
        margin-top: 202px;
    }

    .zero-menu-pc .text-wrapper-12 {
        position: absolute;
        top: 268px;
        left: -201px;
        width: 594px;
        transform: rotate(90deg);
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 130px;
        text-align: center;
        letter-spacing: 0;
        line-height: 130px;
    }

    .zero-menu-pc .rectangle-5 {
        position: absolute;
        top: 120px;
        left: calc(50% - 645px);
        width: 1440px;
        height: 1579px;
        background-color: #eef1f3;
    }

    .zero-menu-pc .rectangle-6 {
        position: absolute;
        top: 449px;
        left: calc(55% - 465px);
        width: 1080px;
        height: 1117px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-pc .text-wrapper-13 {
        top: 96px;
        left: 978px;
        width: 536px;
        height: 73px;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        font-size: 96px;
        line-height: 230.4px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b6a75;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .zero-menu-pc .vector-4 {
        position: absolute;
        top: 194px;
        left: 886px;
        width: 704px;
        height: 2px;
    }

    .zero-menu-pc .frame-5 {
        display: flex;
        flex-direction: column;
        width: 640px;
        align-items: flex-start;
        gap: 60px;
        position: absolute;
        top: 529px;
        left: calc(50% - 245px);
    }

    .zero-menu-pc .frame-6 {
        height: 53px;
        display: flex;
        align-items: center;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .zero-menu-pc .element-7 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 512px;
        height: 53px;
        margin-top: -1px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 25.6px;
    }

    .zero-menu-pc .text-wrapper-14 {
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 25.6px;
    }

    .zero-menu-pc .text-wrapper-15 {
        font-size: 12px;
        line-height: 19.2px;
    }

    .zero-menu-pc .text-wrapper-16 {
        width: 100px;
        height: 53px;
        margin-top: -1px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-17 {
        width: 31px;
        height: 53px;
        margin-top: -1px;
        margin-right: -3px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .mask-group-2 {
        top: 0;
        left: 154px;
        width: 524px;
        height: 390px;
        display: flex;
        position: absolute;
        background-size: 100% 100%;
    }

    .zero-menu-pc .element-8 {
        width: 524px;
        height: 390px;
        object-fit: cover;
    }

    .zero-menu-pc .zero-wrapper {
        top: 80px;
        left: 610px;
        width: 276px;
        height: 238px;
        display: flex;
        position: absolute;
        background-size: 100% 100%;
    }

    .zero-menu-pc .zero-z {
        width: 253px;
        height: 238px;
        margin-left: 23px;
        object-fit: cover;
    }

    .zero-menu-pc .menu-straight-perm {
        width: 1262px;
        height: 446px;
        position: relative;
        margin-top: 134px;
    }

    .zero-menu-pc .rectangle-7 {
        position: absolute;
        top: 218px;
        left: calc(50% - 451px);
        width: 1080px;
        height: 228px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-pc .vector-5 {
        position: absolute;
        top: 97px;
        left: 0;
        width: 759px;
        height: 4px;
    }

    .zero-menu-pc .frame-7 {
        display: inline-flex;
        align-items: center;
        position: absolute;
        top: 303px;
        left: calc(50% - 310px);
    }

    .zero-menu-pc .element-9 {
        width: 606px;
        height: 58px;
        margin-top: -1px;
        font-size: 16px;
        line-height: 25.6px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-18 {
        width: 160px;
        height: 58px;
        margin-top: -1px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-19 {
        width: 31px;
        height: 53px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .menu-treatment {
        width: 1262px;
        height: 560px;
        position: relative;
        margin-top: 249px;
    }

    .zero-menu-pc .rectangle-8 {
        position: absolute;
        top: 218px;
        left: calc(50% - 451px);
        width: 1080px;
        height: 342px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-pc .frame-8 {
        display: flex;
        width: 934px;
        height: 56px;
        align-items: center;
        position: absolute;
        top: 303px;
        left: 326px;
    }

    .zero-menu-pc .text-wrapper-20 {
        width: 219px;
        height: 56px;
        margin-top: -1px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .text-wrapper-21 {
        width: 41px;
        height: 56px;
        margin-top: -1px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .frame-9 {
        display: flex;
        width: 934px;
        height: 56px;
        align-items: center;
        position: absolute;
        top: 419px;
        left: 326px;
    }

    .zero-menu-pc .menu-set-section-pc {
        width: 1444px;
        height: 1257px;
        position: relative;
        margin-top: 250px;
    }

    .zero-menu-pc .rectangle-9 {
        position: absolute;
        top: 404px;
        left: 2px;
        width: 1440px;
        height: 853px;
        background-color: #eef1f3;
    }

    .zero-menu-pc .rectangle-10 {
        position: absolute;
        top: 753px;
        left: 182px;
        width: 1080px;
        height: 374px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-pc .text-wrapper-22 {
        position: absolute;
        top: 380px;
        left: 824px;
        width: 536px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 96px;
        letter-spacing: 0;
        line-height: 230.4px;
        white-space: nowrap;
    }

    .zero-menu-pc .vector-6 {
        position: absolute;
        top: 479px;
        left: 683px;
        width: 759px;
        height: 1px;
    }

    .zero-menu-pc .frame-10 {
        display: flex;
        flex-direction: column;
        width: 731px;
        align-items: flex-start;
        gap: 50px;
        position: absolute;
        top: 833px;
        left: calc(50% - 366px);
    }

    .zero-menu-pc .text-wrapper-23 {
        width: 31px;
        height: 38px;
        margin-top: -1px;
        margin-right: -3px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-pc .mask-group-3 {
        top: 27px;
        left: 653px;
        width: 205px;
        height: 258px;
        position: absolute;
        background-size: 100% 100%;
    }

    .zero-menu-pc .style {
        position: absolute;
        top: 0;
        left: 0;
        width: 205px;
        height: 253px;
        object-fit: cover;
    }

    .zero-menu-pc .element-10 {
        position: absolute;
        top: 0;
        left: 0;
        width: 205px;
        height: 258px;
        object-fit: cover;
    }

    .zero-menu-pc .mask-group-4 {
        top: 180px;
        left: 431px;
        width: 276px;
        height: 400px;
        display: flex;
        position: absolute;
        background-size: 100% 100%;
    }

    .zero-menu-pc .element-11 {
        width: 276px;
        height: 400px;
        object-fit: cover;
    }

    .zero-menu-pc .style-wrapper {
        top: 0;
        left: 0;
        width: 453px;
        height: 636px;
        display: flex;
        position: absolute;
        background-size: 100% 100%;
    }

    .zero-menu-pc .style-2 {
        width: 432px;
        height: 636px;
        object-fit: cover;
    }

    /* Original Hover Effects */
    .zero-menu-pc .CUT,
    .zero-menu-pc .CUT-2,
    .zero-menu-pc .CUT-3,
    .zero-menu-pc .CUT-4,
    .zero-menu-pc .CUT-5,
    .zero-menu-pc .CUT-6,
    .zero-menu-pc .CUT-7 {
        cursor: pointer;
        text-decoration: none;
        display: block;
    }

    .zero-menu-pc .CUT:hover,
    .zero-menu-pc .CUT-2:hover,
    .zero-menu-pc .CUT-3:hover,
    .zero-menu-pc .CUT-4:hover,
    .zero-menu-pc .CUT-5:hover,
    .zero-menu-pc .CUT-6:hover,
    .zero-menu-pc .CUT-7:hover {
        opacity: 0.8;
    }

    .zero-menu-pc .CUT:focus,
    .zero-menu-pc .CUT-2:focus,
    .zero-menu-pc .CUT-3:focus,
    .zero-menu-pc .CUT-4:focus,
    .zero-menu-pc .CUT-5:focus,
    .zero-menu-pc .CUT-6:focus,
    .zero-menu-pc .CUT-7:focus {
        outline: 2px solid #4a90e2;
        outline-offset: 2px;
    }

    .zero-menu-pc .frame {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .zero-menu-pc .frame-3 {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .zero-menu-pc .frame-5 {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .zero-menu-pc .frame-10 {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .zero-menu-pc .frame-2 {
        list-style: none;
    }

    .zero-menu-pc .frame-4 {
        list-style: none;
    }

    .zero-menu-pc .frame-6 {
        list-style: none;
    }

    .zero-menu-pc .menu-button-section .img
    {
    filter: brightness(0) saturate(100%) 
            invert(44%) sepia(7%) saturate(869%) hue-rotate(202deg) brightness(93%) contrast(88%) !important;
    }
}


/* =================================================================
   MENU PAGE - SP STYLES (Screen < 768px)
   ================================================================= */
@media screen and (max-width: 767px) {

    .zero-menu-sp {
        background-color: #ffffff;
        overflow: hidden;
        width: 100%;
        min-width: 375px;
        min-height: 6655px;
        display: flex;
        flex-direction: column;
    }

    .zero-menu-sp .menu-mv-section-sp {
        margin-left: 0px;
        width: 573px;
        height: 200px;
        position: relative;
        margin-top: 84px;
    }

    .zero-menu-sp .img-2 {
        position: absolute;
        top: 0;
        left: 0px;
        width: 375px;
        height: 258px;
    }

    .zero-menu-sp .text-wrapper-24 {
        position: absolute;
        top: 90px;
        left: -50px;
        width: 293px;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-menu-sp .vector-7 {
        position: absolute;
        top: 132px;
        left: 0px;
        width: 336px;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .element-12 {
        position: absolute;
        top: 21px;
        left: 150px;
        width: 204px;
        height: 99px;
        object-fit: cover;
    }

    .zero-menu-sp .menu-button-section-2 {
        margin-left: 40px;
        width: 296px;
        height: 375px;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .zero-menu-sp .CUT-8 {
        width: 298px;
        height: 45px;
        position: relative;
    }

    .zero-menu-sp .vector-8 {
        position: absolute;
        top: 15px;
        left: 239px;
        width: 49px;
        height: 13px;
    }

    .zero-menu-sp .text-wrapper-25 {
        top: 0;
        left: 0;
        width: 295px;
        height: 45px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 500;
        font-size: 16px;
        text-align: center;
        line-height: 38.4px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b6a75;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .zero-menu-sp .rectangle-11 {
        position: absolute;
        top: 0;
        left: 0;
        width: 296px;
        height: 45px;
        border: 1px solid;
        border-color: #6b6a75;
    }

    .zero-menu-sp .menu-cut-section-sp {
        width: 377px;
        height: 910px;
        position: relative;
        margin-top: 50px;
    }

    .zero-menu-sp .rectangle-12 {
        position: absolute;
        top: 0;
        left: 0;
        width: 375px;
        height: 910px;
        background-color: #eef1f3;
    }

    .zero-menu-sp .text-wrapper-26 {
        top: 44px;
        left: 236px;
        width: 99px;
        height: 21px;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        font-size: 32px;
        text-align: right;
        line-height: 76.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b6a75;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .zero-menu-sp .vector-9 {
        position: absolute;
        top: 74px;
        left: 119px;
        width: 256px;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .mask-group-5 {
        position: absolute;
        top: 40px;
        left: 0;
        width: 131px;
        height: 98px;
    }

    .zero-menu-sp .mask-group-6 {
        position: absolute;
        top: 75px;
        left: 131px;
        width: 98px;
        height: 84px;
    }

    .zero-menu-sp .rectangle-13 {
        position: absolute;
        top: 190px;
        left: calc(50.00% - 148px);
        width: 295px;
        height: 670px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-sp .frame-11 {
        display: flex;
        flex-direction: column;
        width: 247px;
        align-items: flex-start;
        gap: 25px;
        position: absolute;
        top: 240px;
        left: 64px;
    }

    .zero-menu-sp .element-13 {
        position: relative;
        width: 253px;
        height: 82px;
        margin-right: -6.00px;
    }

    .zero-menu-sp .text-wrapper-27 {
        top: 44px;
        left: 97px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-28 {
        top: 44px;
        left: 197px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .div-4 {
        top: 0;
        left: 0;
        width: 247px;
        height: 34px;
        font-size: 16px;
        line-height: 16px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-29 {
        font-weight: 500;
        line-height: 0.1px;
    }

    .zero-menu-sp .text-wrapper-30 {
        font-weight: 500;
        font-size: 12px;
        line-height: 0.1px;
    }

    .zero-menu-sp .text-wrapper-31 {
        font-size: 12px;
        line-height: 19.2px;
    }

    .zero-menu-sp .text-wrapper-32 {
        font-size: 12px;
        line-height: 0.1px;
    }

    .zero-menu-sp .vector-10 {
        position: absolute;
        top: 44px;
        left: 0;
        width: 247px;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .text-wrapper-33 {
        top: 44px;
        left: 96px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-34 {
        top: 44px;
        left: 196px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .menu-perm-section-sp {
        width: 337px;
        height: 750px;
        position: relative;
        margin-top: 50px;
    }

    .zero-menu-sp .text-wrapper-35 {
        left: 35px;
        width: 216px;
        height: 21px;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        font-size: 32px;
        line-height: 76.8px;
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: left;
        color: #6b6a75;
        letter-spacing: 0;
        white-space: nowrap;
        margin-top: 5px;
    }

    .zero-menu-sp .vector-11 {
        position: absolute;
        top: 30px;
        left: 0;
        width: 256px;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .rectangle-14 {
        position: absolute;
        top: 71px;
        left: calc(50.00% - 148px);
        width: 295px;
        height: 650px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-sp .element-14 {
        position: absolute;
        top: 121px;
        left: calc(50.00% - 104px);
        width: 253px;
        height: 120px;
    }

    .zero-menu-sp .text-wrapper-36 {
        top: 82px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-37 {
        top: 82px;
        left: 195px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .element-15 {
        top: 0;
        left: 0;
        width: 247px;
        height: 72px;
        font-size: 16px;
        line-height: 25.6px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-38 {
        font-weight: 500;
    }

    .zero-menu-sp .vector-12 {
        top: 82px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .element-16 {
        position: absolute;
        top: 281px;
        left: calc(50.00% - 104px);
        width: 253px;
        height: 120px;
    }

    .zero-menu-sp .element-17 {
        position: absolute;
        top: 441px;
        left: calc(50.00% - 104px);
        width: 253px;
        height: 150px;
    }

    .zero-menu-sp .text-wrapper-39 {
        top: 112px;
        left: 98px;
        width: 102px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-40 {
        top: 112px;
        left: 200px;
        width: 34px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .div-5 {
        top: 0;
        left: 0;
        width: 247px;
        height: 97px;
        font-size: 16px;
        line-height: 25.6px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-13 {
        top: 112px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .menu-color-section-2 {
        width: 377px;
        height: 1950px;
        position: relative;
        margin-top: 50px;
    }

    .zero-menu-sp .rectangle-15 {
        position: absolute;
        top: 0;
        left: 0;
        width: 375px;
        height: 100% !important;
        background-color: #eef1f3;
    }

    .zero-menu-sp .text-wrapper-41 {
        top: 44px;
        left: 139px;
        width: 196px;
        height: 21px;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        font-size: 32px;
        text-align: right;
        line-height: 76.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b6a75;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .zero-menu-sp .rectangle-16 {
        position: absolute;
        top: 190px;
        left: calc(50.00% - 148px);
        width: 295px;
        height: 1730px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-sp .element-18 {
        position: absolute;
        top: 230px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 120px;
    }

    .zero-menu-sp .element-19 {
        position: absolute;
        top: 390px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 101px;
    }

    .zero-menu-sp .text-wrapper-42 {
        top: 63px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-43 {
        position: absolute;
        top: 63px;
        left: 195px;
        width: 33px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 12px;
        text-align: center;
        letter-spacing: 0;
        line-height: 28.8px;
    }

    .zero-menu-sp .element-20 {
        top: 0;
        left: 0;
        width: 247px;
        height: 53px;
        font-size: 16px;
        line-height: 25.6px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-44 {
        font-weight: 500;
        font-size: 12px;
        line-height: 19.2px;
    }

    .zero-menu-sp .vector-14 {
        top: 62px;
        left: 0;
        width: 246px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .element-21 {
        position: absolute;
        top: 531px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 101px;
    }

    .zero-menu-sp .vector-15 {
        top: 62px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .element-22 {
        position: absolute;
        top: 672px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 120px;
    }

    .zero-menu-sp .text-wrapper-45 {
        top: 82px;
        left: 96px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-46 {
        top: 82px;
        left: 196px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .element-23 {
        position: absolute;
        top: 973px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 120px;
    }

    .zero-menu-sp .text-wrapper-47 {
        top: 82px;
        left: 94px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-48 {
        top: 82px;
        left: 194px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-16 {
        top: 82px;
        left: 1px;
        width: 246px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .group-wrapper {
        position: absolute;
        top: 1133px;
        left: calc(50.00% - 126px);
        width: 247px;
        height: 119px;
        display: flex;
    }

    .zero-menu-sp .group {
        width: 253px;
        height: 119px;
        position: relative;
    }

    .zero-menu-sp .text-wrapper-49 {
        top: 81px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-50 {
        top: 81px;
        left: 195px;
        width: 36px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-17 {
        top: 80px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .element-24 {
        top: 0;
        left: calc(50.00% - 126px);
        width: 247px;
        height: 71px;
        font-size: 16px;
        line-height: 25.6px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .element-25 {
        position: absolute;
        top: 1451px;
        left: calc(50.00% - 122px);
        width: 253px;
        height: 119px;
    }

    .zero-menu-sp .text-wrapper-51 {
        top: 81px;
        left: 195px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .element-26 {
        top: 0;
        left: 0;
        width: 247px;
        height: 71px;
        font-size: 16px;
        line-height: 25.6px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .element-27 {
        position: absolute;
        top: 1292px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 119px;
    }

    .zero-menu-sp .element-28 {
        position: absolute;
        top: 832px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 101px;
    }

    .zero-menu-sp .text-wrapper-52 {
        top: 63px;
        left: 96px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-53 {
        top: 63px;
        left: 196px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .menu-straight-perm-2 {
        width: 339px;
        height: 825px;
        position: relative;
        margin-top: 50px;
    }

    .zero-menu-sp .text-wrapper-54 {
        position: absolute;
        top: 0;
        left: 40px;
        width: 295px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
        margin-top:5px;
    }

    .zero-menu-sp .text-wrapper-55 {
        top: 339px;
        left: 10px;
        width: 295px;
        height: 21px;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        font-size: 32px;
        line-height: 76.8px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-18 {
        position: absolute;
        top: 370px;
        left: 0;
        width: 256px;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .rectangle-17 {
        position: absolute;
        top: 71px;
        left: calc(50.00% - 148px);
        width: 295px;
        height: 225px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-sp .rectangle-18 {
        position: absolute;
        top: 410px;
        left: calc(50.00% - 148px);
        width: 295px;
        height: 403px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-sp .element-29 {
        position: absolute;
        top: 111px;
        left: calc(50.00% - 106px);
        width: 253px;
        height: 138px;
    }

    .zero-menu-sp .text-wrapper-56 {
        top: 100px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-57 {
        top: 100px;
        left: 195px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-19 {
        top: 100px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .element-30 {
        top: 0;
        left: 0;
        width: 247px;
        height: 90px;
        font-size: 16px;
        line-height: 25.6px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .element-31 {
        position: absolute;
        top: 450px;
        left: calc(50.00% - 106px);
        width: 253px;
        height: 129px;
    }

    .zero-menu-sp .text-wrapper-58 {
        top: 91px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-59 {
        top: 91px;
        left: 195px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-20 {
        top: 90px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .div-6 {
        top: 0;
        left: 0;
        width: 247px;
        height: 81px;
        font-size: 16px;
        line-height: 16px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-60 {
        font-weight: 500;
        line-height: 28.8px;
    }

    .zero-menu-sp .text-wrapper-61 {
        font-size: 12px;
        line-height: 21.6px;
    }

    .zero-menu-sp .element-32 {
        position: absolute;
        top: 619px;
        left: calc(50.00% - 106px);
        width: 253px;
        height: 154px;
    }

    .zero-menu-sp .text-wrapper-62 {
        top: 116px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-63 {
        top: 116px;
        left: 195px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-21 {
        top: 116px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .treatment {
        top: 0;
        left: 0;
        width: 247px;
        height: 106px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .menu-set-section-sp {
        width: 377px;
        height: 838px;
        position: relative;
        margin-top: 100px;
    }

    .zero-menu-sp .rectangle-19 {
        position: absolute;
        top: 0;
        left: 0;
        width: 375px;
        height: 838px;
        background-color: #eef1f3;
    }

    .zero-menu-sp .rectangle-20 {
        position: absolute;
        top: 241px;
        left: calc(50.00% - 148px);
        width: 295px;
        height: 547px;
        background-color: #ffffff;
        box-shadow: 0px 0px 7px #00000040, 0px 4px 4px #00000040;
    }

    .zero-menu-sp .element-33 {
        position: absolute;
        top: 281px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 106px;
    }

    .zero-menu-sp .text-wrapper-64 {
        top: 68px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .text-wrapper-65 {
        top: 68px;
        left: 195px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .div-7 {
        top: 0;
        left: 0;
        width: 247px;
        height: 58px;
        font-size: 16px;
        line-height: 16px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-22 {
        top: 68px;
        left: 0;
        width: 247px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .element-34 {
        position: absolute;
        top: 441px;
        left: calc(50.00% - 124px);
        width: 253px;
        height: 128px;
    }

    .zero-menu-sp .text-wrapper-66 {
        top: 90px;
        left: 95px;
        width: 100px;
        height: 38px;
        font-size: 16px;
        text-align: right;
        line-height: 38.4px;
        white-space: nowrap;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .vector-23 {
        top: 90px;
        left: 0;
        width: 246px;
        position: absolute;
        height: 1px;
        object-fit: cover;
    }

    .zero-menu-sp .text-wrapper-67 {
        top: 90px;
        left: 195px;
        width: 33px;
        height: 38px;
        font-size: 12px;
        text-align: center;
        line-height: 28.8px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .div-8 {
        top: 0;
        left: 0;
        width: 247px;
        height: 80px;
        font-size: 16px;
        line-height: 16px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
    }

    .zero-menu-sp .element-35 {
        position: absolute;
        top: 609px;
        left: calc(50.00% - 126px);
        width: 253px;
        height: 129px;
    }

    .zero-menu-sp .text-wrapper-68 {
        line-height: 28.8px;
    }

    .zero-menu-sp .mask-group-7 {
        position: absolute;
        top: 78px;
        left: 228px;
        width: 58px;
        height: 73px;
    }

    .zero-menu-sp .mask-group-8 {
        position: absolute;
        top: 40px;
        left: 0;
        width: 129px;
        height: 181px;
    }

    .zero-menu-sp .mask-group-9 {
        position: absolute;
        top: 88px;
        left: 139px;
        width: 78px;
        height: 114px;
    }
    .zero-menu-sp .menu-button-section .img
    {
    filter: brightness(0) saturate(100%) 
            invert(44%) sepia(7%) saturate(869%) hue-rotate(202deg) brightness(93%) contrast(88%) !important;
    }
}

/* =========================================
   Menuページ(SP)の横幅はみ出し防止
   ========================================= */
@media screen and (max-width: 767px) {
    
    /* 1. 大枠のコンテナを画面幅に制限 */
    .zero-menu-sp {
        width: 100% !important;
        max-width: 100vw !important; /* 画面幅以上にはしない */
        overflow-x: hidden !important; /* はみ出し部分を隠す */
        box-sizing: border-box; /* パディングを含めた幅計算にする */
    }

    /* 2. 画像が親要素より大きくならないようにする */
    .zero-menu-sp img {
        max-width: 100% !important;
        height: auto !important; /* アスペクト比を維持 */
    }

    /* 3. 各セクションの幅も制限 */
    .zero-menu-sp .menu-mv-section-sp,
    .zero-menu-sp .menu-button-section-2,
    .zero-menu-sp .menu-cut-section-sp,
    .zero-menu-sp .menu-perm-section-sp,
    .zero-menu-sp .menu-color-section-2,
    .zero-menu-sp .menu-straight-perm-2,
    .zero-menu-sp .menu-set-section-sp {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden; /* 念のため */
        box-sizing: border-box;
    }

    /* 4. もし固定幅(width: 516pxなど)が指定されている要素があれば解除 */
    /* ※具体的なクラス名が不明な場合のための汎用リセット */
    .zero-menu-sp * {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* =================================================================
   STYLE PAGE - PC STYLES (Screen > 767px)
   ================================================================= */
@media screen and (min-width: 768px) {

    .zero-style-pc {
        background-color: #ffffff;
        overflow: hidden;
        width: 1440px;
        position: relative;
    }

    .style-hero {
        position: relative;
        width: 100%;
        height: 476px;
    }

    /* Common Button Reset for Category Items */
    .zero-style-pc .text-wrapper,
    .zero-style-pc .div,
    .zero-style-pc .text-wrapper-2,
    .zero-style-pc .text-wrapper-3,
    .zero-style-pc .text-wrapper-4,
    .zero-style-pc .text-wrapper-5,
    .zero-style-pc .text-wrapper-6,
    .zero-style-pc .text-wrapper-7,
    .zero-style-pc .text-wrapper-8,
    .zero-style-pc .text-wrapper-9,
    .zero-style-pc .text-wrapper-10 {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: opacity 0.2s ease, color 0.2s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 13px;
        margin-top: -1.00px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 38.4px;
        white-space: nowrap;
    }

    /* Row Wrappers */
    .zero-style-pc .style-sex,
    .zero-style-pc .style-length,
    .zero-style-pc .style-other,
    .zero-style-pc .style-menu,
    .zero-style-pc .style-staff {
        display: inline-flex;
        position: relative;
        align-items: center;
    }

    /* --- Individual Text Wrappers --- */
    /* Sex */
    .zero-style-pc .text-wrapper { width: 48px; color: #6b6a75; }
    .zero-style-pc .div { width: 79px; color: #6b6a75; }

    /* Length */
    .zero-style-pc .text-wrapper-2 { width: 80px; color: #6b6a75; }
    .zero-style-pc .text-wrapper-3 { width: 64px; color: #6b6a75; }
    .zero-style-pc .text-wrapper-4 { width: 241px; color: #6b6a75; } /* Other */

    /* Menu */
    .zero-style-pc .text-wrapper-5 { width: 112px; color: #6b6a75; }

    /* Staff */
    .zero-style-pc .text-wrapper-6 { width: 80px; color: #80b1d2; }
    .zero-style-pc .text-wrapper-7 { width: 80px; color: #e9c865; }
    .zero-style-pc .text-wrapper-8 { width: 80px; color: #f184b0; }
    .zero-style-pc .text-wrapper-9 { width: 80px; color: #000000; }
    .zero-style-pc .text-wrapper-10 { width: 80px; color: #14a32c; }


    /* --- Hover & Active States --- */
    /* Gray items turn Black on hover */
    .zero-style-pc .text-wrapper:hover, .zero-style-pc .text-wrapper:focus,
    .zero-style-pc .div:hover, .zero-style-pc .div:focus,
    .zero-style-pc .text-wrapper-2:hover, .zero-style-pc .text-wrapper-2:focus,
    .zero-style-pc .text-wrapper-3:hover, .zero-style-pc .text-wrapper-3:focus,
    .zero-style-pc .text-wrapper-4:hover, .zero-style-pc .text-wrapper-4:focus,
    .zero-style-pc .text-wrapper-5:hover, .zero-style-pc .text-wrapper-5:focus {
        color: #000000;
    }

    .zero-style-pc .text-wrapper[aria-pressed="true"],
    .zero-style-pc .div[aria-pressed="true"],
    .zero-style-pc .text-wrapper-2[aria-pressed="true"],
    .zero-style-pc .text-wrapper-3[aria-pressed="true"],
    .zero-style-pc .text-wrapper-4[aria-pressed="true"],
    .zero-style-pc .text-wrapper-5[aria-pressed="true"] {
        color: #000000;
        font-weight: 700;
    }

    /* Colored items opacity change on hover */
    .zero-style-pc .text-wrapper-6:hover, .zero-style-pc .text-wrapper-6:focus,
    .zero-style-pc .text-wrapper-7:hover, .zero-style-pc .text-wrapper-7:focus,
    .zero-style-pc .text-wrapper-8:hover, .zero-style-pc .text-wrapper-8:focus,
    .zero-style-pc .text-wrapper-9:hover, .zero-style-pc .text-wrapper-9:focus,
    .zero-style-pc .text-wrapper-10:hover, .zero-style-pc .text-wrapper-10:focus {
        opacity: 0.8;
    }

    .zero-style-pc .text-wrapper-6[aria-pressed="true"],
    .zero-style-pc .text-wrapper-7[aria-pressed="true"],
    .zero-style-pc .text-wrapper-8[aria-pressed="true"],
    .zero-style-pc .text-wrapper-9[aria-pressed="true"],
    .zero-style-pc .text-wrapper-10[aria-pressed="true"] {
        font-weight: 700;
    }


    /* --- MV Section --- */
    .zero-style-pc .style-mv-section {
        position: absolute;
        top: 50px;
        left: 0;
        width: 1440px;
        height: 426px;
    }

    .zero-style-pc .logo {
        position: absolute;
        top: 40px;
        left: 695px;
        width: 731px;
        height: 355px;
        object-fit: cover;
        opacity: 0.3;
    }

    .zero-style-pc .text-wrapper-11 {
        position: absolute;
        top: 180px;
        left: 180px;
        width: 404px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        color: #ffffff;
        font-size: 96px;
        letter-spacing: 0;
        line-height: 230.4px;
        white-space: nowrap;
    }

    .zero-style-pc .vector {
        top: 270px;
        left: 0;
        width: 874px;
        position: absolute;
        height: 2px;
    }

    .zero-style-pc .img {
        top: 683px;
        left: 363px;
        width: 74px;
        position: absolute;
        height: 2px;
    }


    /* --- List Section --- */
    .style-list-container {
        position: absolute;
        top: 350px;
        left: 180px;
        width: 1079px;
        height: 2130px;
    }

    .zero-style-pc .style-list-section {
        width: 100%;
        height: 100%;
        display: block;
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
}


/* =================================================================
   STYLE PAGE - SP STYLES (Screen < 768px)
   ================================================================= */
@media screen and (max-width: 767px) {

    .zero-style-sp {
        background-color: #ffffff;
        width: 100%;
        min-width: 375px;
        min-height: auto;
        position: relative;
    }

    .zero-style-sp .style-mv-section-2 {
        position: absolute;
        top: 84px;
        left: 0;
        width: 375px;
        height: 258px;
    }

    .zero-style-sp .text-wrapper-12 {
        position: absolute;
        top: 115px;
        left: 25px;
        width: 147px;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-style-sp .vector-2 {
        position: absolute;
        top: 155px;
        left: 0;
        width: 336px;
        height: 1px;
        object-fit: cover;
    }

    .zero-style-sp .logo-2 {
        position: absolute;
        top: 25px;
        left: 130px;
        width: 204px;
        height: 99px;
        object-fit: cover;
    }

    .zero-style-sp .style-category-2 {
        display: flex;
        width: 295px;
        height: 40px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px;
        position: absolute;
        top: 382px;
        left: 40px;
        border: 1px solid;
        border-color: #000000;
        /* cursor: pointer; を追加しても良いかもしれません */
    }

    .zero-style-sp .text-wrapper-13 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 218px;
        margin-top: -10.00px;
        margin-bottom: -8.00px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 38.4px;
    }

    .zero-style-sp .polygon-stroke {
        position: relative;
        width: 13.68px;
        height: 7.05px;
    }

    .zero-style-sp .style-list-section-2 {
        position: absolute;
        top: 462px;
        left: 40px;
        width: 298px;
        height: 1855px;
    }
}

/* =================================================================
   STAFF PAGE - PC STYLES (Screen > 767px)
   ================================================================= */
@media screen and (min-width: 768px) {

    .zero-staff-pc {
        background-color: #ffffff;
        overflow: hidden;
        width: 1440px;
        min-height: 8465px;
        position: relative;
    }

    .zero-staff-pc .staff-mv-section {
        position: absolute;
        top: 0px;
        left: 0;
        width: 1427px;
        height: 355px;
    }

    .zero-staff-pc .element {
        position: absolute;
        top: 0;
        left: 694px;
        width: 731px;
        height: 355px;
        object-fit: cover;
        opacity: 0.1;
    }

    .zero-staff-pc .text-wrapper {
        position: absolute;
        top: 147px;
        left: 180px;
        width: 404px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffae90;
        font-size: 96px;
        letter-spacing: 0;
        line-height: 230.4px;
        white-space: nowrap;
    }

    .zero-staff-pc .vector {
        position: absolute;
        top: 236px;
        left: 0;
        width: 874px;
        height: 2px;
    }

    .zero-staff-pc .img {
        position: absolute;
        top: 2055px;
        left: 0;
        width: 874px;
        height: 2px;
    }

    .zero-staff-pc .vector-2 {
        position: absolute;
        top: 5450px;
        left: 0;
        width: 874px;
        height: 2px;
    }

    .zero-staff-pc .vector-3 {
        position: absolute;
        top: 3749px;
        left: 566px;
        width: 874px;
        height: 2px;
    }

    .zero-staff-pc .staff-chief-section {
        position: absolute;
        top: 465px;
        left: 0px;
        width: 1442px;
        height: 1488px;
    }

    .zero-staff-pc .view {
        position: absolute;
        top: 0;
        left: 0;
        width: 1454px;
        height: 1488px;
    }

    .zero-staff-pc .rectangle {
        position: absolute;
        top: 36px;
        left: 0;
        width: 1360px;
        height: 1452px;
        background-color: #eef1f3;
        border-radius: 0px 60px 60px 0px;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-pc .div {
        position: absolute;
        width: 2.79%;
        height: 2.73%;
        top: 10.75%;
        left: 82.46%;
        background-color: #6b6a75;
        border-radius: 20.31px;
    }

    .zero-staff-pc .rectangle-2 {
        position: absolute;
        top: 9px;
        left: 9px;
        width: 24px;
        height: 23px;
        background-color: #6b6a75;
        border-radius: 6.55px;
        border: 3.28px solid;
        border-color: #ffffff;
    }

    .zero-staff-pc .ellipse {
        left: 14px;
        width: 13px;
        height: 13px;
        background-color: #6b6a75;
        border-radius: 6.32px;
        border: 3.28px solid;
        border-color: #ffffff;
        position: absolute;
        top: 14px;
    }

    .zero-staff-pc .ellipse-2 {
        left: 26px;
        width: 2px;
        height: 2px;
        background-color: #ffffff;
        border-radius: 1.13px;
        position: absolute;
        top: 14px;
    }

    .zero-staff-pc .vector-4 {
        position: absolute;
        top: 207px;
        left: 616px;
        width: 824px;
        height: 1px;
    }

    .zero-staff-pc .vector-5 {
        position: absolute;
        top: 1180px;
        left: 0;
        width: 697px;
        height: 1px;
    }

    .zero-staff-pc .vector-5-right {
        position: absolute;
        top: 1180px;
        right: 0;
        width: 697px;
        height: 1px;
    }

    .zero-staff-pc .text-wrapper-2 {
        top: 81px;
        left: 640px;
        position: absolute;
        width: 620px;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 90px;
        text-align: center;
        letter-spacing: 0;
        line-height: 216.0px;
        white-space: nowrap;
    }

    .zero-staff-pc .text-wrapper-3 {
        position: absolute;
        top: 167px;
        left: 915px;
        width: 173px;
        font-family: "Noto Sans JP", Helvetica;
        color: #6b6a75;
        line-height: 38.4px;
        white-space: nowrap;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
    }

    .zero-staff-pc .text-on-a-path {
        position: absolute;
        top: -1506px;
        left: -9132px;
        width: 1260px;
        height: 120px;
    }

    .zero-staff-pc .text-wrapper-4 {
        top: 1151px;
        left: calc(50.00% - 86px);
        width: 619px;
        height: 59px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 90px;
        text-align: center;
        letter-spacing: 0;
        line-height: 216.0px;
        white-space: nowrap;
    }

    .zero-staff-pc .chief {
        position: absolute;
        top: 171px;
        left: 641px;
        width: 311px;
        height: 19px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Yu Mincho-Light", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 24px;
        line-height: 57.6px;
        white-space: nowrap;
    }

    .zero-staff-pc .span {
        font-weight: 300;
        color: #6b6a75;
        letter-spacing: 0;
        font-family: "Yu Mincho";
    }

    .zero-staff-pc .text-wrapper-5 {
        font-family: "Roboto Mono", Helvetica;
        font-weight: 100;
        color: #80b1d2;
        letter-spacing: 0;
    }

    .zero-staff-pc .text-wrapper-6 {
        font-family: "Roboto Mono", Helvetica;
        font-size: 20px;
        letter-spacing: 0.40px;
        line-height: 48.0px;
        font-weight: 500;
        color: #26252e;
    }

    .zero-staff-pc .CHIEF {
        position: absolute;
        top: 162px;
        left: 272px;
        width: 344px;
        height: 578px;
        object-fit: cover;
    }

    .zero-staff-pc .text-wrapper-7 {
        position: absolute;
        top: 642px;
        left: calc(50.00% - 86px);
        width: 390px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 90px;
        text-align: center;
        letter-spacing: 0;
        line-height: 216.0px;
        white-space: nowrap;
    }

    .zero-staff-pc .rectangle-3 {
        position: absolute;
        top: 8px;
        left: 112px;
        width: 185px;
        height: 977px;
        background-color: #ff8a5fb2;
    }

    .zero-staff-pc .foreverygeneration {
        position: absolute;
        top: 399px;
        left: -325px;
        width: 991px;
        transform: rotate(90deg);
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 103.2px;
        text-align: center;
        letter-spacing: 0;
        line-height: 103.2px;
    }

    .zero-staff-pc .group {
        position: absolute;
        top: 8px;
        left: 267px;
        width: 30px;
        height: 977px;
    }

    .zero-staff-pc .text-wrapper-8 {
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 977px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Roboto Mono", Helvetica;
        color: #26252e;
        text-align: center;
        line-height: 22.4px;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
    }

    .zero-staff-pc .text-wrapper-9 {
        position: absolute;
        top: 415px;
        left: 10px;
        width: 16px;
        font-family: "Roboto Mono", Helvetica;
        color: #26252e;
        text-align: center;
        line-height: 22.4px;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
    }

    .zero-staff-pc .rectangle-4 {
        position: absolute;
        top: 238px;
        left: 640px;
        width: 620px;
        height: 343px;
        background-color: #ffffff;
        border-radius: 30px;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-pc .p {
        position: absolute;
        top: 282px;
        left: 708px;
        width: 484px;
        font-family: "Noto Sans JP", Helvetica;
        color: #6b6a75;
        line-height: 16px;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
    }

    .zero-staff-pc .text-wrapper-10 {
        font-weight: 700;
        line-height: 25.6px;
    }

    .zero-staff-pc .text-wrapper-11 {
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height:25.6px;
    }

    .zero-staff-pc .mask-group {
        position: absolute;
        top: 767px;
        left: 269px;
        width: 320px;
        height: 346px;
    }

    .zero-staff-pc .mask-group-2 {
        position: absolute;
        top: 767px;
        left: 657px;
        width: 320px;
        height: 346px;
    }

    .zero-staff-pc .mask-group-3 {
        position: absolute;
        top: 767px;
        left: 1045px;
        width: 320px;
        height: 346px;
    }

    .zero-staff-pc .div-2 {
        top: 1232px;
        left: 181px;
        position: absolute;
        width: 1072px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 25.6px;
    }

    .zero-staff-pc .text-wrapper-12 {
        font-weight: 700;
    }

    .zero-staff-pc .text-wrapper-13 {
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 25.6px;
    }

    .zero-staff-pc .vector-6 {
        top: 672px;
        left: 1066px;
        width: 374px;
        position: absolute;
        height: 1px;
    }

    .zero-staff-pc .staff-hitomin {
        position: absolute;
        top: 3836px;
        left: 0;
        width: 1442px;
        height: 1488px;
    }

    .zero-staff-pc .text-on-a-path-2 {
        top: -4877px;
        position: absolute;
        left: -9128px;
        width: 1260px;
        height: 120px;
    }

    .zero-staff-pc .mask-group-4 {
        position: absolute;
        top: 162px;
        left: 272px;
        width: 344px;
        height: 578px;
    }

    .zero-staff-pc .hitomin {
        position: absolute;
        top: 171px;
        left: 641px;
        width: 311px;
        height: 19px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Yu Mincho-Light", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 24px;
        letter-spacing: 0;
        line-height: 57.6px;
        white-space: nowrap;
    }

    .zero-staff-pc .text-wrapper-14 {
        font-weight: 300;
        color: #6b6a75;
        font-family: "Yu Mincho";
    }

    .zero-staff-pc .text-wrapper-15 {
        font-family: "Roboto Mono", Helvetica;
        font-weight: 100;
        color: #80b1d2;
    }

    .zero-staff-pc .text-wrapper-16 {
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 500;
        color: #26252e;
    }

    .zero-staff-pc .text-wrapper-17 {
        position: absolute;
        top: 479px;
        left: -412px;
        width: 1151px;
        transform: rotate(90deg);
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 125px;
        text-align: center;
        letter-spacing: 0;
        line-height: 125px;
    }

    .zero-staff-pc .div-wrapper {
        position: absolute;
        top: 246px;
        left: 267px;
        width: 18px;
        height: 462px;
        display: flex;
    }

    .zero-sub-page .zero-staff-pc .div-wrapper .text-wrapper-18 {
        width: 15.6px;
        height: 462px;
        font-family: "Roboto Mono", Helvetica;
        color: #26252e;
        text-align: center;
        line-height: 22.4px;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
        white-space:unset;
    }

    .zero-staff-pc .mask-group-5 {
        position: absolute;
        top: 767px;
        left: 1046px;
        width: 319px;
        height: 346px;
    }

    .zero-staff-pc .staff-iku-section {
        position: absolute;
        top: 2148px;
        left: 0;
        width: 1442px;
        height: 1480px;
    }

    .zero-staff-pc .iku {
        position: absolute;
        top: 0;
        left: 0;
        width: 1454px;
        height: 1480px;
    }

    .zero-staff-pc .rectangle-5 {
        top: 28px;
        left: 80px;
        width: 1360px;
        height: 1452px;
        border-radius: 0px 60px 60px 0px;
        transform: rotate(180deg);
        position: absolute;
        background-color: #eef1f3;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-pc .view-2 {
        position: absolute;
        width: 2.79%;
        height: 2.74%;
        top: 10.27%;
        left: 50.83%;
        background-color: #6b6a75;
        border-radius: 20.31px;
    }

    .zero-staff-pc .vector-7 {
        position: absolute;
        top: 199px;
        left: 0;
        width: 824px;
        height: 1px;
    }

    .zero-staff-pc .vector-8 {
        top: 1172px;
        left: 743px;
        width: 697px;
        position: absolute;
        height: 1px;
    }

    .zero-staff-pc .text-wrapper-19 {
        top: 71px;
        left: 181px;
        position: absolute;
        width: 620px;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 90px;
        text-align: center;
        letter-spacing: 0;
        line-height: 216.0px;
        white-space: nowrap;
    }

    .zero-staff-pc .text-wrapper-20 {
        position: absolute;
        top: 159px;
        left: 430px;
        width: 173px;
        font-family: "Noto Sans JP", Helvetica;
        color: #6b6a75;
        line-height: 38.4px;
        white-space: nowrap;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
    }

    .zero-staff-pc .text-on-a-path-3 {
        top: -3189px;
        position: absolute;
        left: -9128px;
        width: 1260px;
        height: 120px;
    }

    .zero-staff-pc .text-wrapper-21 {
        top: 1145px;
        left: calc(50.00% - 530px);
        width: 567px;
        height: 54px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 90px;
        text-align: center;
        letter-spacing: 0;
        line-height: 216.0px;
        white-space: nowrap;
    }

    .zero-staff-pc .iku-2 {
        position: absolute;
        top: 163px;
        left: 181px;
        width: 333px;
        height: 19px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Yu Mincho-Light", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 24px;
        line-height: 57.6px;
        white-space: nowrap;
    }

    .zero-staff-pc .text-wrapper-22 {
        position: absolute;
        top: 629px;
        left: calc(50.00% - 338px);
        width: 390px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 90px;
        text-align: center;
        letter-spacing: 0;
        line-height: 216.0px;
        white-space: nowrap;
    }

    .zero-staff-pc .mask-group-6 {
        position: absolute;
        top: 156px;
        left: 824px;
        width: 344px;
        height: 578px;
    }

    .zero-staff-pc .rectangle-6 {
        position: absolute;
        top: 0;
        left: 1146px;
        width: 185px;
        height: 977px;
        background-color: #ff8a5fb2;
    }

    .zero-staff-pc .text-wrapper-23 {
        position: absolute;
        top: 486px;
        left: 644px;
        width: 1163px;
        transform: rotate(90deg);
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 125px;
        text-align: center;
        letter-spacing: 0;
        line-height: 125px;
    }

    .zero-staff-pc .group-2 {
        position: absolute;
        top: 0;
        left: 1160px;
        width: 28px;
        height: 977px;
    }

    .zero-staff-pc .text-wrapper-24 {
        position: absolute;
        top: 534px;
        left: 8px;
        width: 16px;
        font-family: "Roboto Mono", Helvetica;
        color: #26252e;
        text-align: center;
        line-height: 22.4px;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
    }

    .zero-staff-pc .rectangle-7 {
        position: absolute;
        top: 230px;
        left: 181px;
        width: 620px;
        height: 343px;
        background-color: #ffffff;
        border-radius: 30px;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-pc .element-2 {
        position: absolute;
        top: 274px;
        left: 249px;
        width: 484px;
        font-family: "Noto Sans JP", Helvetica;
        color: #6b6a75;
        line-height: 25.6px;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0;
    }

    .zero-staff-pc .mask-group-7 {
        position: absolute;
        top: 759px;
        left: 77px;
        width: 320px;
        height: 346px;
    }

    .zero-staff-pc .mask-group-8 {
        position: absolute;
        top: 759px;
        left: 465px;
        width: 319px;
        height: 346px;
    }

    .zero-staff-pc .mask-group-9 {
        position: absolute;
        top: 759px;
        left: 853px;
        width: 320px;
        height: 346px;
    }

    .zero-staff-pc .men-s-lady-s {
        top: 1222px;
        left: 188px;
        position: absolute;
        width: 1072px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 25.6px;
        margin-top:15px;
    }

    .zero-staff-pc .vector-9 {
        top: 659px;
        left: 0;
        width: 376px;
        position: absolute;
        height: 1px;
    }

    .zero-staff-pc .staff-section {
        position: absolute;
        top: 5604px;
        left: 0;
        width: 1444px;
        height: 1359px;
    }

    .zero-staff-pc .vector-10 {
        position: absolute;
        top: 294px;
        left: 566px;
        width: 874px;
        height: 2px;
        filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
    }     

    .zero-staff-pc .rectangle-8 {
        top: 0;
        left: 0;
        width: 812px;
        height: 1241px;
        border-radius: 0px 30px 30px 0px;
        position: absolute;
        background-color: #eef1f3;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-pc .zero {
        position: absolute;
        top: 420px;
        left: 180px;
        width: 528px;
        height: 682px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 20px;
        line-height: 44px;
    }

    .zero-staff-pc .text-wrapper-25 {
        font-weight: 500;
        color: #f7412a;
        letter-spacing: 0.40px;
    }

    .zero-staff-pc .text-wrapper-26 {
        color: #26252e;
        font-size: 17.5px;
        letter-spacing: 0;
        line-height: 35.2px;
    }

    .zero-staff-pc .text-wrapper-27 {
        font-weight: 500;
        color: #26252e;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 35.2px;
    }

    .zero-staff-pc .mask-group-10 {
        position: absolute;
        top: 366px;
        left: 732px;
        width: 708px;
        height: 490px;
    }

    .zero-staff-pc .mask-group-11 {
        position: absolute;
        top: 869px;
        left: 732px;
        width: 708px;
        height: 490px;
    }

    .zero-staff-pc .our-five-guiding {
        position: absolute;
        top: 34px;
        left: 259px;
        width: 1080px;
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Regular", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 96px;
        letter-spacing: 0;
        line-height: 134.4px;
    }

    .zero-staff-pc .text-wrapper-28 {
        color: #ffffff;

    }

    .zero-staff-pc .text-wrapper-29 {
        color: #eef1f3;
    }

    .zero-staff-pc .click {
        position: absolute;
        top: 1300px;
        left: calc(50.00% - 216px);
        width: 180px;
        height: 46px;
        display: block;
        text-decoration: none;
    }

    .zero-staff-pc .text-wrapper-30 {
        position: absolute;
        top: 12px;
        left: 33px;
        font-family: "Shippori Mincho", Helvetica;
        font-weight: 500;
        color: #26252e;
        font-size: 16px;
        text-align: center;
        letter-spacing: 1.60px;
        line-height: normal;
    }

    .zero-staff-pc .vector-11 {
        position: absolute;
        top: 15px;
        left: 131px;
        width: 51px;
        height: 14px;
    }

    .zero-staff-pc .vector-12 {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 175px;
        height: 48px;
    }
}

@media screen and (min-width: 768px) {
    /* タイトル全体に対してグラデーション設定 */
    .pc-only .our-five-guiding {
        /* 背景色としてグラデーションを指定（左は白、右は指定グレー） */
        /* ※ 55% の位置で色が切り替わります。表示を見てこの数値を調整してください */
        background: linear-gradient(to right, #ffffff 0%, #ffffff 51%, #EFF2F4 51%, #EFF2F4 100%); 
        
        /* 背景を文字の形に切り抜く指定 */
        -webkit-background-clip: text;
        background-clip: text;
        
        /* もともとの文字色を透明にして、背景のグラデーションが見えるようにする */
        color: transparent;
        -webkit-text-fill-color: transparent;
        
        /* インライン要素だとグラデーションが効きづらいためブロック表示を確実に */
        display: block;
    }

    /* 子要素のspan（text-wrapper-28, 29）の色設定をリセット */
    .pc-only .our-five-guiding .text-wrapper-28,
    .pc-only .our-five-guiding .text-wrapper-29 {
        color: inherit !important; /* 親の透明色を引き継ぐ */
        -webkit-text-fill-color: inherit !important;
        background: none !important; /* 個別の背景指定があればリセット */
    }
}


/* =================================================================
   STAFF PAGE - SP STYLES (Screen < 768px)
   ================================================================= */
@media screen and (max-width: 767px) {

    .zero-staff-sp {
        background-color: #ffffff;
        overflow: hidden;
        width: 100%;
        min-width: 375px;
        min-height: 6057px;
        display: flex;
        flex-direction: column;
    }

    .zero-staff-sp .staff-mv-section-2 {
        width: 400px;
        height: 115px;
        position: relative;
        margin-top: 0px;
    }

    .zero-staff-sp .element-3 {
        position: absolute;
        top: 0;
        left: 161px;
        width: 214px;
        height: 115px;
        object-fit: cover;
        opacity: 0.1;
    }

    .zero-staff-sp .text-wrapper-48 {
        position: absolute;
        top: 67px;
        left: calc(25.00% - 158px);
        width: 295px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffae90;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-staff-sp .vector-19 {
        top: 96px;
        left: 0;
        width: 335px;
        object-fit: cover;
        position: absolute;
        height: 1px;
        filter: brightness(0) saturate(100%) invert(93%) sepia(3%) saturate(686%) hue-rotate(185deg) brightness(103%) contrast(93%);
    }

    .zero-staff-sp .staff-chief-section-2 {
        width: 395px;
        height: 1490px;
        position: relative;
        margin-top: 52px;
    }

    .zero-staff-sp .rectangle-12 {
        position: absolute;
        top: 0;
        left: 0;
        width: 335px;
        height: 1068px;
        background-color: #eef1f3;
        border-radius: 0px 60px 60px 0px;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .rectangle-13 {
        position: absolute;
        top: 968px;
        left: 0;
        width: 375px;
        height: 522px;
        background-color: #eef1f3;
        border-radius: 0px 60px 60px 0px;
        transform: rotate(180deg);
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .CHIEF-2 {
        position: absolute;
        top: 71px;
        left: 120px;
        width: 176px;
        height: 295px;
        object-fit: cover;
    }

    .zero-staff-sp .rectangle-14 {
        position: absolute;
        top: 52px;
        left: 52px;
        width: 72px;
        height: 366px;
        background-color: #ff8a5fb2;
    }

    .zero-staff-sp .foreverygeneration-2 {
        position: absolute;
        top: 200px;
        left: -114px;
        width: 379px;
        transform: rotate(90deg);
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 38px;
        text-align: center;
        letter-spacing: 0;
        line-height: 38px;
    }

    .zero-staff-sp .group-7 {
        position: absolute;
        top: 75px;
        left: 109px;
        width: 19px;
        height: 379px;
        display: flex;
        gap: 2.8px;
    }

    .zero-staff-sp .text-wrapper-49 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6.2px;
        height: 378.58px;
        font-family: "Roboto Mono", Helvetica;
        font-weight: 400;
        color: #26252e;
        font-size: 10px;
        text-align: center;
        letter-spacing: 0;
        line-height: 14px;
    }

    .zero-staff-sp .text-wrapper-50 {
        margin-top: 143px;
        width: 6.04px;
        height: 14px;
        font-family: "Roboto Mono", Helvetica;
        font-weight: 400;
        color: #26252e;
        font-size: 10px;
        text-align: center;
        letter-spacing: 0;
        line-height: 14px;
        margin-left:-3px;
    }

    .zero-staff-sp .text-wrapper-51 {
        left: 119px;
        position: absolute;
        top: 30px;
        width: 176px;
        height: 23px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        text-align: center;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-staff-sp .vector-20 {
        top: 469px;
        left: 80px;
        width: 295px;
        position: absolute;
        height: 1px;
    }

    .zero-staff-sp .text-wrapper-52 {
        top: 429px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        letter-spacing: 0;
        position: absolute;
        left: 139px;
        width: 196px;
        height: 13px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 16px;
        line-height: 38.4px;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-53 {
        position: absolute;
        top: 376px;
        left: 139px;
        width: 196px;
        height: 10px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Yu Mincho-Light", Helvetica;
        font-weight: 300;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 1.60px;
        line-height: 38.4px;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-54 {
        top: 401px;
        font-family: "Roboto Mono", Helvetica;
        font-weight: 500;
        color: #26252e;
        letter-spacing: 1.60px;
        position: absolute;
        left: 139px;
        width: 196px;
        height: 13px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 16px;
        line-height: 38.4px;
        white-space: nowrap;
    }

    .zero-staff-sp .rectangle-15 {
        position: absolute;
        top: 495px;
        left: 0;
        width: 375px;
        height: 573px;
        background-color: #ffffff;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .div-3 {
        position: absolute;
        top: 512px;
        left: 40px;
        width: 295px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 12px;
    }

    .zero-staff-sp .text-wrapper-55 {
        font-weight: 700;
        line-height: 19.2px;
    }

    .zero-staff-sp .text-wrapper-56 {
        font-family: "Noto Sans JP", Helvetica;
        font-weight:400;
        color:#6b6a75;
        font-size:12px;
        letter-spacing:0;
        line-height:19.2px;
    }

    .zero-staff-sp .rectangle-16 {
        position: absolute;
        top: 979px;
        left: 40px;
        width: 295px;
        height: 46px;
        background-color: #ffffff;
        border: 0.5px solid;
        border-color: #000000;
    }

    .zero-staff-sp .text-wrapper-57 {
        top: 990px;
        position: absolute;
        left: 40px;
        width: 295px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 500;
        color: #000000;
        font-size: 16px;
        text-align: center;
        letter-spacing: 1.60px;
        line-height: normal;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-58 {
        position: absolute;
        top: 813px;
        left: calc(30.00% - 158px);
        width: 295px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #eef1f3;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-59 {
        top: 1108px;
        position: absolute;
        left: calc(50.00% - 20px);
        width: 157px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        text-align: right;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-staff-sp .vector-21 {
        top: 827px;
        left: 185px;
        width: 188px;
        position: absolute;
        height: 1px;
    }

    .zero-staff-sp .vector-22 {
        top: 1122px;
        left: 0;
        width: 177px;
        position: absolute;
        height: 1px;
    }

    .zero-staff-sp .mask-group-20 {
        position: absolute;
        top: 856px;
        left: 37px;
        width: 103px;
        height: 111px;
    }

    .zero-staff-sp .mask-group-21 {
        position: absolute;
        top: 856px;
        left: 138px;
        width: 103px;
        height: 111px;
    }

    .zero-staff-sp .mask-group-22 {
        position: absolute;
        top: 856px;
        left: 237px;
        width: 103px;
        height: 111px;
    }

    .zero-staff-sp .men-s-lady-s-2 {
        top: 1150px;
        position: absolute;
        left: 40px;
        width: 295px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 19.2px;
    }

    .zero-staff-sp .text-wrapper-60 {
        font-weight: 700;
    }

    .zero-staff-sp .text-wrapper-61 {
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 19.2px;
    }

    .zero-staff-sp .staff-iku-section-2 {
        width: 395px;
        height: 1252px;
        position: relative;
        margin-top: 80px;
    }

    .zero-staff-sp .rectangle-17 {
        top: 945px;
        height: 307px;
        position: absolute;
        left: 0;
        width: 375px;
        background-color: #eef1f3;
        border-radius: 0px 60px 60px 0px;
        transform: rotate(180deg);
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .mask-group-23 {
        position: absolute;
        top: 72px;
        left: 80px;
        width: 175px;
        height: 294px;
    }

    .zero-staff-sp .rectangle-18 {
        top: 54px;
        left: 249px;
        position: absolute;
        width: 72px;
        height: 379px;
        background-color: #ff8a5fb2;
    }

    .zero-staff-sp .text-wrapper-62 {
        position: absolute;
        top: 244px;
        left: 60px;
        width: 472px;
        transform: rotate(90deg);
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 48px;
        text-align: center;
        letter-spacing: 0;
        line-height: 48px;
    }

    .zero-staff-sp .text-wrapper-63 {
        left: 80px;
        position: absolute;
        top: 30px;
        width: 176px;
        height: 23px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        text-align: center;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-staff-sp .vector-23 {
        left: 0;
        width: 295px;
        position: absolute;
        top: 469px;
        height: 1px;
    }

    .zero-staff-sp .text-wrapper-64 {
        position: absolute;
        top: 429px;
        left: 80px;
        width: 196px;
        height: 13px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 38.4px;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-65 {
        position: absolute;
        top: 376px;
        left: 80px;
        width: 196px;
        height: 10px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Yu Mincho-Light", Helvetica;
        font-weight: 300;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 1.60px;
        line-height: 38.4px;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-66 {
        position: absolute;
        top: 401px;
        left: 80px;
        width: 196px;
        height: 13px;
        display: flex;
        align-items: center;
        justify-content: left;
        font-family: "Roboto Mono", Helvetica;
        font-weight: 500;
        color: #26252e;
        font-size: 16px;
        letter-spacing: 1.60px;
        line-height: 38.4px;
        white-space: nowrap;
    }

    .zero-staff-sp .rectangle-19 {
        height: 515px;
        position: absolute;
        top: 495px;
        left: 0;
        width: 375px;
        background-color: #ffffff;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .element-4 {
        position: absolute;
        top: 512px;
        left: 40px;
        width: 295px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 19.2px;
    }

    .zero-staff-sp .rectangle-20 {
        top: 921px;
        position: absolute;
        left: 40px;
        width: 295px;
        height: 46px;
        background-color: #ffffff;
        border: 0.5px solid;
        border-color: #000000;
    }

    .zero-staff-sp .text-wrapper-67 {
        top: 932px;
        position: absolute;
        left: 40px;
        width: 295px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 500;
        color: #000000;
        font-size: 16px;
        text-align: center;
        letter-spacing: 1.60px;
        line-height: normal;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-68 {
        top: 755px;
        position: absolute;
        left: calc(30.00% - 158px);
        width: 295px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #eef1f3;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-69 {
        top: 1041px;
        position: absolute;
        left: calc(50.00% - 20px);
        width: 157px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        text-align: right;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-staff-sp .vector-24 {
    top: 769px;
    left: 185px;
    position: absolute;
    width: 188px;
    height: 1px;
    }

    .zero-staff-sp .vector-25 {
    top: 1055px;
    position: absolute;
    left: 0;
    width: 177px;
    height: 1px;
    }

    .zero-staff-sp .men-s-lady-s-3 {
    top: 1083px;
    position: absolute;
    left: 40px;
    width: 295px;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 400;
    color: #6b6a75;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 19.2px;
    }

    .zero-staff-sp .group-8 {
    position: absolute;
    top: 93px;
    left: 256px;
    width: 27px;
    height: 311px;
    }

    .zero-staff-sp .text-wrapper-70 {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 311px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto Mono", Helvetica;
    font-weight: 400;
    color: #26252e;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: 14px;
    }

    .zero-staff-sp .text-wrapper-71 {
    position: absolute;
    top: 182px;
    left: 7px;
    width: 16px;
    font-family: "Roboto Mono", Helvetica;
    font-weight: 400;
    color: #26252e;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0;
    line-height: 14px;
    }

    .zero-staff-sp .mask-group-24 {
    position: absolute;
    top: 798px;
    left: 39px;
    width: 97px;
    height: 105px;
    }

    .zero-staff-sp .mask-group-25 {
    position: absolute;
    top: 798px;
    left: 140px;
    width: 97px;
    height: 105px;
    }

    .zero-staff-sp .mask-group-26 {
    position: absolute;
    top: 798px;
    left: 239px;
    width: 97px;
    height: 105px;
    }

    .zero-staff-sp .staff-hitomin-2 {
    width: 395px;
    height: 1365px;
    position: relative;
    margin-top: 80px;
    }

    .zero-staff-sp .rectangle-21 {
    top: 915px;
    height: 450px;
    position: absolute;
    left: 0;
    width: 375px;
    background-color: #eef1f3;
    border-radius: 0px 60px 60px 0px;
    transform: rotate(180deg);
    box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .mask-group-27 {
    position: absolute;
    top: 72px;
    left: 119px;
    width: 175px;
    height: 294px;
    }

    .zero-staff-sp .rectangle-22 {
    top: 48px;
    left: 52px;
    position: absolute;
    width: 72px;
    height: 379px;
    background-color: #ff8a5fb2;
    }

    .zero-staff-sp .text-wrapper-72 {
    position: absolute;
    top: 237px;
    left: -146px;
    width: 458px;
    transform: rotate(90deg);
    font-family: "Yu Mincho-Demibold", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 48px;
    text-align: center;
    letter-spacing: 0;
    line-height: 48px;
    }

    .zero-staff-sp .group-9 {
    position: absolute;
    top: 75px;
    left: 109px;
    width: 8px;
    height: 379px;
    display: flex;
    }

    .zero-staff-sp .vector-26 {
    left: 109px;
    width: 266px;
    position: absolute;
    top: 469px;
    height: 1px;
    }

    .zero-staff-sp .rectangle-23 {
    height: 535px;
    position: absolute;
    top: 495px;
    left: 0;
    width: 375px;
    background-color: #ffffff;
    box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .rectangle-24 {
    top: 941px;
    position: absolute;
    left: 40px;
    width: 295px;
    height: 46px;
    background-color: #ffffff;
    border: 0.5px solid;
    border-color: #000000;
    }

    .zero-staff-sp .text-wrapper-73 {
    top: 952px;
    position: absolute;
    left: 40px;
    width: 295px;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 500;
    color: #000000;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1.60px;
    line-height: normal;
    white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-74 {
    top: 775px;
    position: absolute;
    left: calc(30.00% - 158px);
    width: 295px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Yu Mincho-Demibold", Helvetica;
    font-weight: 400;
    color: #eef1f3;
    font-size: 32px;
    letter-spacing: 0;
    line-height: 76.8px;
    white-space: nowrap;
    }

    .zero-staff-sp .text-wrapper-75 {
    top: 1061px;
    position: absolute;
    left: calc(50.00% - 20px);
    width: 157px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Yu Mincho-Demibold", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 32px;
    text-align: right;
    letter-spacing: 0;
    line-height: 76.8px;
    white-space: nowrap;
    }

    .zero-staff-sp .vector-27 {
        top: 789px;
        left: 187px;
        position: absolute;
        width: 188px;
        height: 1px;
    }

    .zero-staff-sp .vector-28 {
        top: 1075px;
        position: absolute !important;
        left: 0px;
        width: 177px;
        height: 1px;
        filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(769%) hue-rotate(202deg) brightness(97%) contrast(85%) !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 1px !important;
        z-index: 100 !important;
    }

    .zero-staff-sp .men-s-etc-lady-s {
        top: 1103px;
        position: absolute;
        left: 40px;
        width: 295px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 19.2px;
    }

    .zero-staff-sp .mask-group-28 {
        position: absolute;
        top: 818px;
        left: 39px;
        width: 98px;
        height: 106px;
    }

    .zero-staff-sp .mask-group-29 {
        position: absolute;
        top: 818px;
        left: 139px;
        width: 97px;
        height: 105px;
    }

    .zero-staff-sp .mask-group-30 {
        position: absolute;
        top: 818px;
        left: 239px;
        width: 97px;
        height: 105px;
    }

    .zero-staff-sp .staff-guide-section {
        width: 379px;
        height: 681px;
        position: relative;
        margin-top: 80px;
    }

    .zero-staff-sp .vector-29 {
        top: -40px !important;
        left: 118px;
        width: 257px;
        object-fit: cover;
        position: absolute;
        height: 1px;
    }

    .zero-staff-sp .rectangle-25 {
        position: absolute;
        top: 40px;
        left: 0;
        width: 334px;
        height: 641px;
        background-color: #eef1f3;
        border-radius: 0px 30px 30px 0px;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-staff-sp .span-wrapper {
        position: absolute;
        top: 80px;
        left: 40px;
        width: 295px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Regular", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 36px;
        letter-spacing: 0;
        line-height: 50.4px;
    }

    .zero-staff-sp .text-wrapper-76 {
        color: #ffffff;
        padding-left:20px;
    }

    .zero-staff-sp .mask-group-31 {
        position: absolute;
        top: 203px;
        left: 119px;
        width: 256px;
        height: 178px;
    }

    .zero-staff-sp .mask-group-32 {
        position: absolute;
        top: 431px;
        left: 0;
        width: 256px;
        height: 169px;
    }

    .zero-staff-sp .zero-2 {
        position: absolute;
        top: 183px;
        left: 40px;
        width: 294px;
        height: 448px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 12px;
        line-height: 12px;
    }

    .zero-staff-sp .text-wrapper-77 {
    font-weight: 500;
    color: #f7412a;
    letter-spacing: 0.14px;
    line-height: 21.6px;
    }

    .zero-staff-sp .text-wrapper-78 {
    color: #26252e;
    letter-spacing: 0;
    line-height: 21.6px;
    }

    .zero-staff-sp .text-wrapper-79 {
    font-weight: 500;
    color: #26252e;
    letter-spacing: 0.14px;
    line-height: 21.6px;
    }
}

/* =========================================
   レスポンシブ表示制御（強制修正）
   ========================================= */

/* スマホ画面（767px以下）では、PC用要素を隠す */
@media screen and (max-width: 767px) {
    .pc-only,
    .zero-staff-pc {
        display: none !important;
    }
}

/* PC画面（768px以上）では、SP用要素を隠す */
@media screen and (min-width: 768px) {
    .sp-only,
    .zero-staff-sp {
        display: none !important;
    }
}

/* =========================================
   【重要】表示崩れを直す強制リセットCSS
   ========================================= */

/* スマホ画面（767px以下）の時 */
@media screen and (max-width: 767px) {
    /* PC用の要素を完全に消す（これで崩れが消えます） */
    .pc-only,
    .zero-staff-pc {
        display: none !important;
    }

    /* SP用の要素を確実に表示する */
    .zero-staff-sp {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        overflow-x: hidden; /* 横スクロール防止 */
    }
    
    /* 画像が画面からはみ出すのを防ぐ */
    .zero-staff-sp img {
        max-width: 100%;
    }
}

/* PC画面（768px以上）の時 */
@media screen and (min-width: 768px) {
    /* SP用の要素を完全に消す */
    .sp-only,
    .zero-staff-sp {
        display: none !important;
    }
    
    /* PC用の要素を表示 */
    .pc-only,
    .zero-staff-pc {
        display: block !important;
    }
}

/* ▼▼▼ Staff Guide Section Layout Fix (SP) ▼▼▼ */
@media screen and (max-width: 767px) {
    
    /* 1. セクション全体の高さ調整 */
    .zero-staff-sp .staff-guide-section {
        height: auto !important; /* 高さを内容に合わせて自動化 */
        min-height: 900px;       /* 最低限の高さを確保 */
        padding-bottom: 50px;
        position: relative;
    }

    /* 2. 背景のグレー（左側） */
    .zero-staff-sp .rectangle-25 {
        width: 90% !important; /* 画面の半分強をカバー */
        height:80% !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 30px 30px 0;
        z-index: 0;
    }

    /* 3. タイトル "Our Five..." */
    .zero-staff-sp .span-wrapper {
        width: 90% !important;
        left: 20px !important;
        top: 40px !important;
        justify-content: flex-start !important; /* 左寄せ */
        text-align: left !important;
        z-index: 10;
    }

    /* 5. テキストエリア（左側に配置） */
    .zero-staff-sp .zero-2 {
        position: absolute !important;
        left: 40px !important;     /* 左に少し余白 */
        top: 150px !important;     /* 画像と同じ高さから開始 */
        width: 80% !important;     /* 画面の50% */
        height: auto !important;
        display: block !important; /* フレックス解除 */
        z-index: 10;
    }

    /* 6. テキストの見た目調整（赤文字と黒文字） */
    .zero-staff-sp .text-wrapper-77 {
        display: block !important; /* 改行させる */
        color: #f7412a;
        font-weight: bold;
        font-size: 14px !important; /* 少し小さくして収まりよく */
        margin-top: 20px;
        line-height: 1.4 !important;
    }
    /* 最初の項目だけ上の余白を消す */
    .zero-staff-sp .text-wrapper-77:first-child {
        margin-top: 0;
    }

    .zero-staff-sp .text-wrapper-78 {
        display: block !important; /* 改行させる */
        color: #26252e;
        font-size: 13px !important; /* 少し小さくして読みやすく */
        line-height: 1.6 !important;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 767px) {
    .zero-staff-sp .vector-22,
    .zero-staff-sp .vector-25,
    .zero-staff-sp .vector-28 {
        /* 画像の中身（SVG）を表示させず、背景色だけで線を作ります */
        height: 0 !important;          /* 画像自体の高さをゼロにする */
        padding-top: 1px !important;   /* 代わりにpaddingで1pxの厚みを作る */
        background-color: #6B6A75 !important; /* ここに欲しい色を指定 */
        overflow: hidden !important;   /* はみ出した画像の中身を隠す */
        
        /* 位置とサイズの強制 */
        width: 177px !important;
        z-index: 999 !important;       /* 最前面に持ってくる */
        filter: none !important;       /* フィルターはもう不要なので解除 */
        opacity: 1 !important;
        
        /* 位置調整（念のため） */
        position: absolute !important;
        left: 0 !important;
    }
}

/* =========================================
   SPヘッダー右側メニューを右端に強制配置
   ========================================= */
@media screen and (max-width: 767px) {
    .sp-header-right {
        width: auto !important;
        justify-content: flex-end !important;

        /* 親要素の余白設定を無視して、画面（またはヘッダー）の絶対位置で配置します */
        position: absolute !important;
        
        /* 右端と上端に隙間なく配置 */
        right: 0 !important;
        top: 0 !important;
        
        /* 余計な余白をリセット */
        margin: 0 !important;
        padding: 0 !important;
        
        /* 横並びレイアウトを維持 */
        display: flex !important;
        align-items: center !important;
        
        /* ヘッダーの高さに合わせる（必要であれば数値を調整してください） */
        height: 100% !important; 
        /* または height: 60px !important; など固定値 */
    }

    /* メニューボタン自体の右余白も念のため削除 */
    .sp-h-btn.menu {
        margin-right: 0 !important;
    }
}

/* =================================================================
   BLOG PAGE - PC STYLES (Screen > 767px)
   ================================================================= */
@media screen and (min-width: 768px) {
    .zero-blog-pc {
        background-color: #ffffff;
        overflow:hidden;
        min-width: 1440px;
        min-height: 2368px;
        position: relative;
    }
	
	.zero-blog-pc .blog-mv-wrapper {
		position:relative;
		height:472px;
		width:100%;
		padding-top:20px;
	}

    .zero-blog-pc .blog-mv-section {
        position: relative;
        left: 0;
        width: 1440px;
        height: 426px;
    }

    .zero-blog-pc .logo {
        position: absolute;
        top: 15px;
        left: 695px;
        width: 731px;
        height: 355px;
        object-fit: cover;
        opacity: 0.3;
    }

    .zero-blog-pc .text-wrapper-31 {
        position: absolute;
        top: 140px;
        left: 180px;
        width: 404px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 96px;
        letter-spacing: 0;
        line-height: 230.4px;
        white-space: nowrap;
    }

    .zero-blog-pc .vector-13 {
        top: 240px;
        width: 874px;
        height: 2px;
        position: absolute;
        left: 0;
    }
}
/* =================================================================
   BLOG PAGE - PC STYLES (Refactored)
   ================================================================= */
@media screen and (min-width: 768px) {
  /* 全体のラッパー */
  .zero-blog-pc .blog-content-container {
    position: relative; 
    width: 100%;
    max-width: 1090px; /* 左カラム712px + 隙間24px + 右カラム354px */
    margin: 80px auto 100px; 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px; /* 画面幅が狭まった時の保険 */
  }
  
  /* 左側：記事グリッド */
  .zero-blog-pc .blog-post-grid {
    width: 712px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    column-gap: 24px; /* 横の隙間 */
    row-gap: 60px;    /* 縦の隙間 */
  }

  /* 記事カード */
  .zero-blog-pc .blog-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 画像とテキストの間隔 */
  }

  /* サムネイル画像 */
  .zero-blog-pc .blog-card-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 348 / 160; /* 画像比率を維持 */
    object-fit: cover;
    box-shadow: 1px 4px 4px rgba(0,0,0,0.25); /* 元の影を再現 */
    display: block;
  }

  /* 記事本文エリア */
  .zero-blog-pc .blog-card-body {
    background: #fff;
    padding: 10px; /* 必要に応じて調整 */
    /* rectangle-9 の影をここに適用したい場合 */
    /* box-shadow: 1px 4px 4px #00000040; */
  }

  /* 日付 */
  .zero-blog-pc .blog-card-date {
    display: block;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-size: 12px;
    color: #26252e;
    margin-bottom: 8px;
  }

  /* タイトル */
  .zero-blog-pc .blog-card-title {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-size: 16px;
    color: #26252e;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
  }


  /* 右側：アーカイブサイドバー */
  .zero-blog-pc .blog-archive-sidebar {
    width: 354px;
	padding-left:50px;
    /* 必要ならstickyにしてスクロール追従させる */
    /* position: sticky; top: 20px; */
  }

  .zero-blog-pc .archive-header {
    margin-bottom: 40px;
    position: relative;
  }

  .zero-blog-pc .archive-title-en {
    font-size: 16px;
    color: #6b6a75;
    letter-spacing: 0.2em;
    font-weight: 400;
    margin: 0;
  }
  
  .zero-blog-pc .archive-title-jp {
    position: relative;
    top: -60px; /* 配置調整 */
    left: 0;
    font-size: 24px;
    color: #6b6a75;
    letter-spacing: 0.2em;
  }

  /* アコーディオン部分 */
  .zero-blog-pc .archive-year {
    margin-bottom: 20px;
    position: relative;
  }

  .zero-blog-pc .archive-year-trigger {
    font-size: 16px;
    font-weight: 700;
    color: #6b6a75;
    letter-spacing: 0.2em;
    cursor: pointer;
    list-style: none; /* デフォルトの三角を消す */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
  }

  /* デフォルトのマーカー非表示（Chromeなど用） */
  .zero-blog-pc .archive-year-trigger::-webkit-details-marker {
    display: none;
  }

  .zero-blog-pc .toggle-icon {
    width: 16px;
    transition: transform 0.3s;
  }

  /* 開いているときはアイコンを回転 */
  .zero-blog-pc .archive-year[open] .toggle-icon {
    transform: rotate(180deg);
  }

  /* 月リスト */
  .zero-blog-pc .archive-months {
    list-style: none;
    padding: 10px 0 10px 20px;
    margin: 0;
  }
  
  .zero-blog-pc .archive-months li a {
    text-decoration: none;
    color: #6b6a75;
    font-size: 14px;
    display: block;
    padding: 5px 0;
  }

  .zero-blog-pc .separator-line {
    width: 100%;
    margin-top: 10px;
    display: block;
  }
}

/* =================================================================
   BLOG PAGE - SP STYLES (Screen < 767px)
   ================================================================= */
@media screen and (max-width: 767px) {
    .zero-blog-sp {
        background-color: #ffffff;
        width: 100%;
        min-width: 375px;
        min-height: 2016px;
        position: relative;
    }

    .zero-blog-sp .blog-mv-section-2 {
        position: absolute;
        top: 84px;
        left: 0;
        width: 375px;
        height: 258px;
    }

    .zero-blog-sp .text-wrapper-39 {
        position: absolute;
        top: 190px;
        left: calc(30.00% - 158px);
        width: 293px;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Yu Mincho-Demibold", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 76.8px;
        white-space: nowrap;
    }

    .zero-blog-sp .vector-17 {
        position: absolute;
        top: 226px;
        left: 0;
        width: 336px;
        height: 1px;
        object-fit: cover;
    }

    .zero-blog-sp .logo-2 {
        position: absolute;
        top: 105px;
        left: 131px;
        width: 204px;
        height: 99px;
        object-fit: cover;
        opacity: 0.5;
    }

    .zero-blog-sp .blog-page-section-2 {
        position: absolute;
        top: 382px;
        left: 40px;
        width: 295px;
        height: 616px;
    }

    .zero-blog-sp .blog-7 {
        position: absolute;
        top: 424px;
        left: 0;
        width: 138px;
        height: 192px;
    }

    .zero-blog-sp .group-5 {
        position: absolute;
        top: 80px;
        left: 0;
        width: 142px;
        height: 112px;
    }

    .zero-blog-sp .rectangle-10 {
        position: absolute;
        top: 0;
        left: 0;
        width: 138px;
        height: 112px;
        background-color: #ffffff;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-blog-sp .text-wrapper-40 {
        position: absolute;
        top: 15px;
        left: 0;
        width: 138px;
        height: 10px;
        font-weight: 400;
        color: #26252e;
        font-size: 12px;
        text-align: center;
        letter-spacing: 0;
        line-height: 16.8px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
    }

    .zero-blog-sp .text-wrapper-41 {
        position: absolute;
        top: 40px;
        left: 18px;
        width: 102px;
        height: 57px;
        font-weight: 400;
        color: #26252e;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 22.4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
    }

    .zero-blog-sp .mask-group-17 {
        position: absolute;
        top: -4px;
        left: -3px;
        width: 146px;
        height: 88px;
    }

    .zero-blog-sp .blog-8 {
        position: absolute;
        top: 424px;
        left: 158px;
        width: 137px;
        height: 192px;
    }

    .zero-blog-sp .group-6 {
        position: absolute;
        top: 80px;
        left: 0;
        width: 141px;
        height: 112px;
    }

    .zero-blog-sp .rectangle-11 {
        position: absolute;
        top: 0;
        left: 0;
        width: 137px;
        height: 112px;
        background-color: #ffffff;
        box-shadow: 1px 4px 4px #00000040;
    }

    .zero-blog-sp .text-wrapper-42 {
        position: absolute;
        top: 15px;
        left: 0;
        width: 137px;
        height: 10px;
        font-weight: 400;
        color: #26252e;
        font-size: 12px;
        text-align: center;
        letter-spacing: 0;
        line-height: 16.8px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
    }

    .zero-blog-sp .text-wrapper-43 {
        position: absolute;
        top: 40px;
        left: 18px;
        width: 101px;
        height: 57px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #26252e;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 22.4px;
    }

    .zero-blog-sp .mask-group-18 {
        width: 144px;
        position: absolute;
        top: -4px;
        left: -3px;
        height: 88px;
    }

    .zero-blog-sp .blog-9 {
        position: absolute;
        top: 212px;
        left: 0;
        width: 138px;
        height: 192px;
    }

    .zero-blog-sp .blog-10 {
        position: absolute;
        top: 212px;
        left: 158px;
        width: 137px;
        height: 192px;
    }

    .zero-blog-sp .mask-group-19 {
        width: 145px;
        position: absolute;
        top: -4px;
        left: -3px;
        height: 88px;
    }

    .zero-blog-sp .blog-11 {
        position: absolute;
        top: 0;
        left: 0;
        width: 138px;
        height: 192px;
    }

    .zero-blog-sp .blog-12 {
        position: absolute;
        top: 0;
        left: 158px;
        width: 137px;
        height: 192px;
    }

    .zero-blog-sp .blog-archive-section-2 {
        position: absolute;
        top: 1058px;
        left: 40px;
        width: 305px;
        height: 212px;
        display: flex;
        flex-direction: column;
    }

    .zero-blog-sp .text-wrapper-44 {
        width: 111px;
        height: 34px;
        font-weight: 400;
        color: #6b6a75;
        font-size: 24px;
        letter-spacing: 4.80px;
        line-height: 33.6px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
    }

    .zero-blog-sp .text-wrapper-45 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 85px;
        height: 22px;
        margin-top: 5px;
        font-family: "Noto Sans JP", Helvetica;
        font-weight: 400;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 3.20px;
        line-height: 22.4px;
        white-space: nowrap;
    }

    .zero-blog-sp .text-wrapper-46 {
        width: 67px;
        height: 12px;
        margin-top: 40px;
        font-weight: 700;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 3.20px;
        line-height: 22.4px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
    }

    .zero-blog-sp .polygon-4 {
        margin-left: 268.4px;
        width: 16.11px;
        height: 7.03px;
        margin-top: 1.2px;
    }

    .zero-blog-sp .vector-18 {
        width: 295px;
        margin-top: 6.3px;
        height: 1px;
        object-fit: cover;
    }

    .zero-blog-sp .text-wrapper-47 {
        width: 67px;
        height: 12px;
        margin-top: 14.5px;
        font-weight: 700;
        color: #6b6a75;
        font-size: 16px;
        letter-spacing: 3.20px;
        line-height: 22.4px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Noto Sans JP", Helvetica;
    }
}

/* =========================================
   下層ページ（Staffなど）のヘッダー強制修正
   ※検索で見つからなくても、これを最後に追加すれば直ります
   ========================================= */

/* ヘッダー枠の修正 */
.zero-sub-page .view-6 {
    position: relative !important; /* 絶対配置を解除 */
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #fff !important;
    padding: 10px 20px !important; /* 少し余白を入れる */
}

/* 巨大化したロゴ（.studio）を小さくする */
.zero-sub-page .studio {
    width: 180px !important; /* PCでの適切なサイズ */
    height: auto !important;
    position: static !important; /* 変な位置指定を解除 */
    margin: 0 !important;
}

/* ナビゲーションメニューを横並びにする */
.zero-sub-page .navbar {
    display: flex !important;
    gap: 30px !important; /* メニュー間の隙間 */
    position: static !important;
    margin: 0 !important;
}

/* スマホ表示の時はロゴ調整（念のため） */
@media screen and (max-width: 767px) {
    .zero-sub-page .studio {
        width: 120px !important; /* スマホなら少し小さく */
    }
}

/* =========================================
   【修正版】下層ページヘッダー
   TOPページのレイアウト（絶対配置）をそのまま再現します
   ========================================= */

/* 1. ヘッダーの「箱」をTOPページと同じサイズ・設定にする */
html body .page-container .zero-sub-page .view-6 {
    background-color: transparent !important; /* グレー/透明から白に変更 */
    background: transparent !important;
    position: relative !important; /* ページ内では相対配置 */
    width: 1237px !important;      /* 中身の幅をTOPと同じに固定 */
    height: 122px !important;      /* 高さも固定 */
    margin: 0 !important;     /* 画面中央に寄せる */
    padding: 0 !important;         /* 余計な余白を消す */
    background-color: transparent !important; /* 背景は透過（白背景の上にのる） */
    display: block !important;     /* Flexboxを解除して絶対配置を使えるようにする */
    overflow: visible !important;  /* はみ出しを表示 */
}
html body .page-container .zero-sub-page {
    background-color: #ffffff !important; /* グレー/透明から白に変更 */
    background: #ffffff !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

body .page-container .zero-sub-page {
    background: #FFFFFF !important;
    background-color: #ffffff !important;
}

/* 2. ロゴの位置とサイズをTOPページに合わせる */
body .page-container .zero-sub-page .view-6 .studio {
    position: absolute !important;
    top: 11px !important;
    left: 0 !important;
    width: 200px !important;
    height: 97px !important;
    margin: 0 !important;
    object-fit: cover !important;
    display: block !important;
    mix-blend-mode: multiply !important; /* 白背景となじませる */
}

/* 3. メニュー（TOP staff menu...）の位置修正 */
body .page-container .zero-sub-page .view-6 .navbar {
    position: absolute !important;
    top: 50px !important;
    left: 210px !important;
    display: inline-flex !important;
    gap: 0 !important; /* 元のデザインに合わせて調整 */
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* メニュー文字のデザイン */
body .page-container .zero-sub-page .view-6 .navbar a {
    font-family: "Noto Sans JP", Helvetica !important;
    font-weight: 500 !important;
    color: #6b6a75 !important; /* 文字色：グレー */
    font-size: 14px !important;
    text-align: center !important;
    letter-spacing: 1.60px !important;
    line-height: normal !important;
    width: 80px !important; /* 文字間隔の確保 */
    display: block !important;
}

/* 4. 電話番号エリアの復活と配置 */
body .page-container .zero-sub-page .view-6 .pc-tel-group {
    display: flex !important; /* 非表示を解除 */
    position: absolute !important;
    top: 37px !important;
    left: 870px !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
}
/* 電話番号の文字スタイル */
body .page-container .zero-sub-page .view-6 .pc-tel-group p {
    font-family: "Noto Sans JP", Helvetica !important;
    font-weight: 500 !important;
    color: #6b6a75 !important;
    font-size: 20px !important;
    letter-spacing: 2.00px !important;
    line-height: 32px !important;
    white-space: nowrap !important;
    display: block !important;
}
/* 電話アイコン */
body .page-container .zero-sub-page .view-6 .pc-tel-group svg {
    width: 20px !important;
    height: 20px !important;
    color: #6b6a75 !important;
    display: block !important;
}

/* 5. 予約ボタン（丸いCTA）の復活と配置 */
body .page-container .zero-sub-page .view-6 .group-9 {
    display: block !important; /* 非表示を解除 */
    position: absolute !important;
    top: 0 !important;
    left: 1111px !important;
    width: 126px !important;
    height: 122px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 20 !important;
}

/* 予約ボタンの中身を確実に表示 */
body .page-container .zero-sub-page .view-6 .group-9 .ellipse,
body .page-container .zero-sub-page .view-6 .group-9 .text-wrapper-2,
body .page-container .zero-sub-page .view-6 .group-9 .text-wrapper-3,
body .page-container .zero-sub-page .view-6 .group-9 img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.page-container .zero-sub-page .view-6 .group-9 .vector-3{
    position:absolute;
    top:86px;
    left:93px;
    width: 7px;
    height: 9px;
}

.page-container .zero-sub-page .view-6 .group-9 .vector-4{
    position:absolute;
    top:86px;
    left:24px;
    width: 7px;
    height: 9px;
}

html body .page-container .zero-sub-page header.view-6 {
    /* 背景を「白」で完全に上書き (画像も色もリセット) */
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    
    /* 透過を無効化 */
    opacity: 1 !important;
    visibility: visible !important;
        
    /* 他の要素より手前に表示 */
    z-index: 99999 !important;
}

html body .page-container .zero-sub-page {
    background-color: #ffffff !important;
}

html body .page-container .zero-sub-page .view-6::before {
    content: "" !important;
    display: block !important;
    
    /* 画面のどこにいても必ずヘッダーの場所に張り付く設定 */
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* 親の中心に合わせる */
    
    /* ここがポイント：親の幅に関係なく画面いっぱい（ビューポート幅）に広げる */
    width: 100vw !important; 
    height: 100% !important;
    
    background-color: #ffffff !important; /* 真っ白 */
    z-index: -1 !important; /* 文字やロゴより後ろに配置 */
}

/* ----------------------------------------------------
   スマホ表示時の調整（ヘッダーが崩れないように）
   ---------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* スマホでは絶対配置を解除して、通常のスマホヘッダーに戻す */
    body .page-container .zero-sub-page .view-6 {
        position: fixed !important;
        width: 100% !important;
        height: 70px !important;
        top: 0 !important;
        left: 0 !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* スマホ用ロゴ */
    body .page-container .zero-sub-page .view-6 .studio {
        position: static !important;
        width: auto !important;
        height: 50px !important;
        object-fit: contain !important;
    }

    /* スマホではPC用のメニューや電話番号を隠す */
    body .page-container .zero-sub-page .view-6 .navbar,
    body .page-container .zero-sub-page .view-6 .pc-tel-group,
    body .page-container .zero-sub-page .view-6 .group-9 {
        display: none !important;
    }
}

body .page-container .zero-sub-page .view-6 .studio {
    /* 画像の白い背景部分を透明に見せる処理 */
    mix-blend-mode: multiply !important; 
    background-color: transparent !important;
    
    /* 位置の念押し */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body .page-container .zero-sub-page .view-6 .OPEN {
    /* これまで非表示にしていたのを解除 */
    display: block !important;
    visibility: visible !important;
    
    /* TOPページと同じ位置に固定 */
    position: absolute !important;
    top: 72px !important;
    left: 903px !important;
    width: 150px !important;
    
    /* 見た目の調整 */
    text-align: right !important;
    color: #6b6a75 !important;
    font-size: 16px !important;
    font-family: "Noto Sans JP", sans-serif !important;
    z-index: 10 !important;
    height: 12px;
    align-items: center;
    font-weight: 400;
    text-align: right;
    letter-spacing: 1.6px;
    line-height: 38.4px;
}

body .page-container .zero-sub-page .view-6 .group-9 {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 1111px !important; /* TOPページと同じ位置 */
    width: 126px !important;
    height: 122px !important;
    z-index: 20 !important;
    transform: none !important;
    background: transparent !important;
}

body .page-container .zero-sub-page .view-6 .group-9 .ellipse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* 円のデザイン */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 122px !important;
    height: 122px !important;
    background-color: #718594 !important; /* グレーの背景色 */
    border-radius: 50% !important; /* 綺麗な円にする */
    z-index: 1 !important;
}

body .page-container .zero-sub-page .view-6 .group-9 .text-wrapper-2,
body .page-container .zero-sub-page .view-6 .group-9 .text-wrapper-3,
body .page-container .zero-sub-page .view-6 .group-9 img {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    z-index: 21 !important; /* 円（z-index:1）より手前に */
}

body .page-container .zero-sub-page .view-6 .group-9 .text-wrapper-2 {
    position:absolute !important;
    top:68px;
    left:2px;
    width: 119px;
    height:9px;
    display:flex !important;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 11.6px;
    text-align: center;
    letter-spacing: 1.16px;
    line-height: 27.9px;
    white-space: nowrap;
}

body .page-container .zero-sub-page .view-6 .group-9 .text-wrapper-3 {
    position:absolute !important;
    top:87px;
    left:2px;
    width: 119px;
    height:9px;
    display:flex !important;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 11.6px;
    text-align: center;
    letter-spacing: 1.16px;
    line-height: 27.9px;
    white-space: nowrap;
}
.page-container .zero-sub-page .view-6 .group-9 .element {
    position: absolute !important;
    top: 21px;
    left: 44px;
    width: 35px;
    height: 35px;
}

body .page-container .zero-sub-page .view-6 .image-2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* =================================================================
   【完全版】下層ページフッター修正用CSS
   ※ 背景ブルー、2カラムレイアウト、ロゴ透かし、予約ボタン配置
   ================================================================= */

/* --------------------------------------------------
   1. PC版レイアウト（768px以上）
   -------------------------------------------------- */

/* フッター枠組み：Gridレイアウトで左右に分割 */
html body .page-container > footer.view-2 {
    /* 絶対配置を解除して通常配置へ */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 5% !important;
    
    /* 背景色 */
    background-color: #EFF2F4 !important; 
    
    /* レイアウト設定（左：地図 / 右：情報） */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 1:1で分割 */
    gap: 40px !important; /* 間の余白 */
    
    /* サイズと余白 */
    width: 100% !important;
    max-width: 100% !important;
    /*padding: 80px 10% !important; /* 上下80px、左右10%の余白 */
    box-sizing: border-box !important;
    align-items: center !important;
    flex-direction: row !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* はみ出し防止と重なり順 */
    overflow: hidden !important;
    z-index: 10 !important;
    
    /* 不要なスタイルリセット */
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 左側：地図エリア (.pc-map-frame) */
html body .page-container > footer.view-2 .pc-map-frame {
    grid-column: 1 / 2 !important; /* 左列 */
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;  /* 最低でもこの高さ */
    margin: 0 !important;
}

/* 右側：住所情報エリア (.group-2) */
html body .page-container > footer.view-2 .group-2 {
    grid-column: 2 / 3 !important; /* 右列 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 24px !important;
    text-align: center !important;
    
    width: 100% !important;
    margin: 0 !important;
}

/* 住所テキストのスタイル調整 */
html body .page-container > footer.view-2 .group-2 * {
    position: static !important;
    text-align: left !important;
    width: auto !important;
    margin: 0 0 10px 0 !important;
    color: #333333 !important; /* 文字色を濃く */
    font-size: 14px !important;
    font-family: "Noto Sans JP", sans-serif !important;
    line-height: 1.8 !important;
}

/* 予約ボタン：右下に固定配置 (.group) */
html body .page-container > footer.view-2 .group {
    position: absolute !important;
    bottom: 40px !important;
    right: 5% !important;
    width: 120px !important;
    height: 120px !important;
    z-index: 20 !important; /* 最前面 */
    display: block !important;
    margin: 0 !important;
    transform: none !important;
}
/* ボタンの中身（円など）は絶対配置を維持 */
html body .page-container > footer.view-2 .group * {
    position: absolute !important;
}

/* コピーライト：一番下 (.p) */
html body .page-container > footer.view-2 .p {
    font-weight: 300;
    letter-spacing: 2.38px;
    line-height: 14px;
    font-family: "Roboto Mono", Helvetica;
}

/* レイアウト崩れの原因になる装飾（四角形など）を消す */
html body .page-container > footer.view-2 .rectangle,
html body .page-container > footer.view-2 .rectangle-2 {
    display: none !important;
}

html body .page-container > footer.view-2 .group-2 > div {
    display: flex !important;
    flex-direction: row !important; /* 横並びにする */
    align-items: flex-start !important; /* 上端を揃える */
    width: 100% !important;
    margin-bottom: 20px !important; /* 行ごとの間隔 */
    padding-bottom: 20px !important; /* 文字の下に少し余白 */
    border-bottom: 1px solid #FFFFFF !important; /* 薄い下線で見やすく */
    top: -25px !important;
    left: 5px !important;
}

/* 左側：タイトル（ADDRESS, TEL等） */
/* ※HTMLでは後ろにありますが、order:-1で強制的に先頭（左）に移動させます */
html body .page-container > footer.view-2 .group-2 h3 {
    position:absolute !important;
    top:-25px !important;
    left:2px;
    font-family: "Noto Sans JP", "Helvetical";
    font-weight:400;
    color:#26252e;
    font-size:16px !important;
    letter-spacing:2.72px;
    line-height: 14px;
    white-space:nowrap;


    /*order: -1 !important;       /* 表示順序を一番最初にする */
    /*width: 110px !important;    /* 左側の幅を固定 */
    /*min-width: 110px !important;*/
}

html body .page-container > footer.view-2 .group-2 .group-4 .text-wrapper-5 {
    top: -35px !important;
}

html body .page-container > footer.view-2 .group-2 .group-4 .text-wrapper-6 {
    top: -35px !important;
}

/* 右側：中身（住所、電話番号テキスト） */
html body .page-container > footer.view-2 .group-2 p
{
    position:absolute !important;
    top:-20px !important;
    left:116px !important;
    font-family: "Noto Sans JP", Helvetica !important;
    font-weight: 300;
    color: #26252e;
    font-size: 16px !important;
    letter-spacing: 2.72px;
    line-height: 14px !important;
    white-space: nowrap;
}

html body .page-container > footer.view-2 .group-2 .element-3 {
    position:absolute !important;
    top:-35px !important;
    left:116px !important;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 300;
    color: #26252e;
    font-size: 16px;
    letter-spacing: 2.72px;
    line-height: 25.6px !important;
    white-space: nowrap;
}

html body .page-container > footer.view-2 .group-2 .element-4 {
    position:absolute !important;
    top:-35px !important;
    left:116px !important;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 300;
    color: #26252e;
    font-size: 16px;
    letter-spacing: 2.72px;
    line-height: 25.6px !important;
    white-space: nowrap;
}

/* SNSリンクの並び調整（これも横並びに） */
html body .page-container > footer.view-2 .group-2 .group-7 {
    align-items: center !important;
    border: none !important; /* SNSの行は下線なし */
}
html body .page-container > footer.view-2 .group-2 .group-7 .frame {
    position:absolute !important;
    top:-25px !important;
    left:116px !important;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 300;
    color: #26252e;
    font-size: 16px;
    letter-spacing: 2.72px;
    line-height: 14px;
    white-space: nowrap;
    border-bottom: 1px solid #333 !important; /* リンクっぽい下線 */
}
html body .page-container > footer.view-2 .group-2 .group-7 .div-wrapper {
    position:absolute !important;
    top:-25px !important;
    left:231px !important;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 300;
    color: #26252e;
    font-size: 16px;
    letter-spacing: 2.72px;
    line-height: 14px;
    white-space: nowrap;
    border-bottom: 1px solid #333 !important; /* リンクっぽい下線 */
}

/* 1. 下層ページのフッター枠（.page-container直下のフッターのみ対象） */
html body .page-container > footer.view-2 {
    /* 以前の余白設定を全て無効化し、基準点を作る */
    position: relative !important;
    padding: 0 !important;       /* 余白ゼロ */
    width: 100% !important;
    min-height: 450px !important; /* 高さ確保 */
    border: none !important;
    overflow: hidden !important;  /* はみ出し防止 */
    
    /* GridやFlexの影響を受けないようにブロック要素にする */
    display: block !important;
}

/* 2. マップを「絶対配置」で左上に固定 */
/* 親の余白がどうなっていようと、座標指定(left:0)で強制的に左端へ */
html body .page-container > footer.view-2 .pc-map-frame {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;      /* ★ここが重要：左端に張り付きます */
    width: 50% !important;   /* 画面の左半分 */
    height: 100% !important; /* フッターの高さ一杯 */
    margin: 0 !important;
    z-index: 1 !important;
}

/* 3. 店舗情報エリアを「右半分」に寄せる */
html body .page-container > footer.view-2 .group-2 {
    position: relative !important;
    width: 50% !important;       /* 幅は画面の半分 */
    margin-left: 50% !important; /* 左半分（マップの場所）を空ける */
    
    /* 見た目の調整 */
    padding: 60px 5% 80px 50px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

/* --- スマホ表示時のリセット（縦並びに戻す） --- */
@media screen and (max-width: 900px) {
    html body .page-container > footer.view-2 {
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 80px !important;
    }
    
    /* マップの絶対配置を解除 */
    html body .page-container > footer.view-2 .pc-map-frame {
        position: relative !important;
        width: 100% !important;
        height: 450px !important;
        left: auto !important;
        top: auto !important;
    }
    
    /* 情報エリアも元に戻す */
    html body .page-container > footer.view-2 .group-2 {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 40px 20px !important;
    }
    
    html body .page-container > footer.view-2 .p {
        width: 100% !important;
        left: 0 !important;
    }
}

/* ============================================
   【最終・中央揃え修正版】
   1. page-containerを「中央揃え」に戻しました（これで左寄りが直ります）
   2. フッターのレイアウト崩れ防止機能は維持しています
   ============================================ */

/* 1. ページ全体の横揺れ防止 */
html, body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 2. 親要素の設定（★ここを修正：中央揃えにする） */
html body .page-container {
    display: flex !important;          /* Flexboxを使用 */
    flex-direction: column !important; /* 縦並び（上から下へ） */
    align-items: center !important;    /* ★これで中身を中央に寄せます */
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

/* --------------------------------------------------
   PC表示（901px以上）の設定
   -------------------------------------------------- */
@media screen and (min-width: 901px) {

    /* ▼ フッター枠：画面全幅（Breakout手法） ▼ */
    html body .page-container > footer.view-2 {
        /* 通常配置（relative）で重なりを回避 */
        position: relative !important;
        
        /* 画面左端から右端まで強制的に広げる */
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        
        /* ★横並びを強制★ */
        display: flex !important;
        flex-direction: row !important; /* 横方向 */
        flex-wrap: nowrap !important;   /* 折り返し禁止 */
        justify-content: space-between !important;
        align-items: stretch !important;
        
        /* リセット */
        padding: 0 !important;
        background: transparent !important;
        height: auto !important;
        max-width: none !important;
        gap: 0 !important;
        z-index: 10 !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* ▼ 左側：マップ（親の幅の50%＝画面半分） ▼ */
    html body .page-container > footer.view-2 .pc-map-frame {
        /* 幅50%を死守 */
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        
        /* 高さ固定 */
        height: 597px !important;
        min-height: 597px !important;
        
        /* 配置 */
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        order: 1 !important;
        top: auto !important;
        left: auto !important;
    }
    
    /* マップの中身 */
    html body .page-container > footer.view-2 .pc-map-frame iframe {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        border: none !important;
    }

    /* ▼ 右側：店舗情報（親の幅の50%＝画面半分） ▼ */
    html body .page-container > footer.view-2 .group-2 {
        /* 幅50%を死守 */
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        
        /* 高さ固定 */
        height: 597px !important;
        min-height: 597px !important;
        
        /* デザイン */
        background-color: #c5d8e6 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 5% !important;
        box-sizing: border-box !important;
        
        /* 配置 */
        position: relative !important;
        margin: 0 !important;
        order: 2 !important;
        top: auto !important;
        left: auto !important;
    }

    /* ▼ コピーライト（絶対配置で最下部に重ねる） ▼ */
    html body .page-container > footer.view-2 .p {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        
        background-color: #ffffff !important;
        text-align: center !important;
        padding: 20px 0 !important;
        margin: 0 !important;
        color: #666 !important;
        z-index: 20 !important;
    }
}

/* --------------------------------------------------
   スマホ表示（900px以下）の設定
   -------------------------------------------------- */
@media screen and (max-width: 900px) {
    /* フッター枠のリセット */
    html body .page-container > footer.view-2 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        
        /* スマホは縦並び */
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 0 !important;
        height: auto !important;
    }

    /* ★マップを完全に非表示にする★ */
    html body .page-container > footer.view-2 .pc-map-frame {
        display: none !important;
    }

    /* 店舗情報（幅100%） */
    html body .page-container > footer.view-2 .group-2 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        
        padding: 40px 20px !important;
        height: auto !important;
        min-height: auto !important;
        order: 1 !important;
    }

    /* コピーライト */
    html body .page-container > footer.view-2 .p {
        position: relative !important;
        width: 100% !important;
        bottom: auto !important;
        left: auto !important;
        padding: 20px 0 !important;
        order: 2 !important;
    }
}

/* --------------------------------------------------
   スマホ表示（900px以下）の設定
   -------------------------------------------------- */
@media screen and (max-width: 900px) {
    /* フッター枠のリセット */
    html body .page-container > footer.view-2 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        
        /* 縦並びに戻す */
        display: flex !important;
        flex-direction: column !important;
    }

    /* ★マップを非表示にする★ */
    html body .page-container > footer.view-2 .pc-map-frame {
        display: none !important;
    }

    /* 店舗情報 */
    html body .page-container > footer.view-2 .group-2 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 20px !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* コピーライト */
    html body .page-container > footer.view-2 .p {
        position: relative !important; /* スマホでは通常配置 */
        width: 100% !important;
        bottom: auto !important;
        left: auto !important;
    }
}

/* --------------------------------------------------
   2. スマホ版レイアウト（767px以下）
   -------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* 1列に戻す */
    html body .page-container > footer.view-2 {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        height: auto !important;
    }
    
    /* 地図 */
    html body .page-container > footer.view-2 .pc-map-frame {
        grid-column: 1 / -1 !important;
        height: 250px !important;
        min-height: 250px !important;
    }
    
    /* 住所情報（中央揃えに変更） */
    html body .page-container > footer.view-2 .group-2 {
        grid-column: 1 / -1 !important;
        align-items: center !important;
        text-align: center !important;
    }
    html body .page-container > footer.view-2 .group-2 * {
        text-align: center !important;
        margin: 0 auto 10px auto !important;
    }
    
    /* 予約ボタン（スマホでは記事の下へ） */
    html body .page-container > footer.view-2 .group {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 auto 20px auto !important;
        width: 100px !important;
        height: 100px !important;
    }
    
    /* 背景ロゴ（スマホサイズ調整） */
    html body .page-container > footer.view-2 .element-2 {
        width: 100% !important;
        opacity: 0.03 !important; /* さらに薄く */
    }
}

html body .page-container {
    /* 横並び(row) を 縦並び(column) に変更 */
    flex-direction: column !important;
    
    /* 中身を中央揃えにする（TOPページが左に寄るのを防ぐため） */
    align-items: center !important;
    
    /* 念のため折り返しも許可 */
    flex-wrap: wrap !important;
    
    /* 横スクロール防止 */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

html body .page-container > footer.view-2 {
    width: 100% !important;
    max-width: 1440px !important;
    position: relative !important; /* 絶対配置を解除 */
}



/* ============================================
   【最終修正】フッター幅を1440pxに制限
   1. 画面全幅(100vw)の設定を解除し、最大幅1440pxに制限
   2. margin: 0 auto で中央に配置
   3. 内部の2カラムレイアウトは維持
   ============================================ */

/* 1. 親要素の設定 */
html body .page-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 子要素を中央揃え */
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

/* --------------------------------------------------
   PC表示（901px以上）の設定
   -------------------------------------------------- */
@media screen and (min-width: 901px) {

    /* ▼ フッター枠：幅を1440pxに制限して中央配置 ▼ */
    html body .page-container > footer.view-2 {
        /* ★ここが修正点：幅を制限します */
        width: 100% !important;
        max-width: 1440px !important;
        
        /* 中央配置 */
        margin: 0 auto !important;
        
        /* ★以前の「画面一杯に広げる記述」を強制リセット */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        
        /* 内部レイアウト（横並び維持） */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        
        /* 背景・余白 */
        background: transparent !important;
        padding: 0 !important;
        height: auto !important;
        gap: 0 !important;
        z-index: 10 !important;
    }

    /* ▼ 左側：マップ（親要素の50%） ▼ */
    html body .page-container > footer.view-2 .pc-map-frame {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        
        /* 高さ固定 */
        height: 597px !important;
        min-height: 597px !important;
        
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        order: 1 !important;
        left: auto !important;
        top: auto !important;
    }
    
    html body .page-container > footer.view-2 .pc-map-frame iframe {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        border: none !important;
    }

    /* ▼ 右側：店舗情報（親要素の50%） ▼ */
    html body .page-container > footer.view-2 .group-2 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        
        height: 597px !important;
        min-height: 597px !important;
        
        background-color: #eef1f3 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 5% !important;
        box-sizing: border-box !important;
        
        position: relative !important;
        margin: 0 !important;
        order: 2 !important;
        left: auto !important;
        top: auto !important;
    }

    /* 文字配置のリセット */
    html body .page-container > footer.view-2 .group-2 * {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* ▼ コピーライト（最下部） ▼ */
    html body .page-container > footer.view-2 .p {
        width: 100% !important;
        flex: 0 0 100% !important;
        
        position: relative !important;
        text-align: center !important;
        padding: 30px 0 !important;
        margin: 0 !important;
        color: #80b1d2 !important;
        
        order: 3 !important;
        bottom: auto !important;
        left: auto !important;
        font-size:14px !important;
    }
}

/* --------------------------------------------------
   スマホ表示（900px以下）の設定
   -------------------------------------------------- */
@media screen and (max-width: 900px) {
    html body .page-container > footer.view-2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* マップ非表示 */
    html body .page-container > footer.view-2 .pc-map-frame {
        display: none !important;
    }

    /* 店舗情報 */
    html body .page-container > footer.view-2 .group-2 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 20px !important;
        height: auto !important;
        min-height: auto !important;
        order: 1 !important;
    }

    /* コピーライト */
    html body .page-container > footer.view-2 .p {
        width: 100% !important;
        order: 2 !important;
        padding: 20px 0 !important;
    }
}

/* ============================================
   【修正・2重スクロールバー防止版】
   1. htmlタグのみにスクロールを許可し、bodyは「はみ出し表示(visible)」にします
   2. これでスクロールバーが1本に統合されます
   3. 1440px固定幅の挙動は維持されます
   ============================================ */

@media screen and (min-width: 768px) {

    /* 1. ブラウザ全体の枠（html）のみスクロールを許可 */
    html {
        overflow-x: auto !important;
        width: 100% !important;
    }

    /* 2. 中身（body）はスクロールバーを出さず、そのまま広げる */
    body {
        overflow-x: visible !important; /* ★ここが修正点：autoからvisibleへ */
        min-width: 1440px !important;   /* 1440pxを強制確保 */
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. 親要素（コンテナ）を1440pxに完全固定 */
    html body .page-container {
        width: 1440px !important;
        min-width: 1440px !important;
        max-width: 1440px !important;
        
        margin: 0 auto !important;    /* 画面が広い時は中央揃え */
        overflow: visible !important; /* 中身のカット禁止 */
        
        /* 配置リセット */
        display: block !important;
        position: relative !important;
    }

    /* 4. ヘッダー領域の固定 */
    html body .view-6,
    html body header.view-6 {
        width: 1440px !important;
        min-width: 1440px !important;
        max-width: 1440px !important;
        
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        
        margin: 0 !important;
        transform: none !important;
        background-color: #ffffff !important;
    }

    /* 5. フッターも親要素（1440px）に合わせて固定 */
    html body .page-container > footer.view-2 {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        
        position: relative !important;
        left: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* ============================================
   【修正】サブページの横スクロールバー削除
   ※画面外(-9000px等)にある装飾テキストを非表示にし、
     レイアウトを崩さずにスクロールバーだけを消します。
   ============================================ */

/* 画面外に配置されている装飾要素を強制非表示 */
.text-on-a-path,
.text-on-a-path-2,
.text-on-a-path-3,
.zero-PCTOP .mask-group-2 {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   【最終・絶対解決版】
   1. ツールが見逃した「擬似要素(::before/::after)」を強制修正
   2. 「100vw（スクロールバーを含む幅）」を「100%」に書き換え
   3. これにより、サブページの謎の右側余白を消滅させます
   ============================================ */

/* 1. サブページの全要素についた「装飾（擬似要素）」のはみ出しをカット */
.zero-staff-pc *,
.zero-staff-pc *::before,
.zero-staff-pc *::after,
.zero-menu-pc *,
.zero-menu-pc *::before,
.zero-menu-pc *::after,
.zero-style-pc *,
.zero-style-pc *::before,
.zero-style-pc *::after,
.zero-blog-pc *,
.zero-blog-pc *::before,
.zero-blog-pc *::after,
.zero-sub-page *,
.zero-sub-page *::before,
.zero-sub-page *::after {
    max-width: 100% !important; /* 親幅(1440px)を超えさせない */
    box-sizing: border-box !important;
}

/* 2. 特に怪しい「背景装飾」を持つクラスを狙い撃ち */
.bg-pattern::before,
.bg-pattern::after,
.decoration::before,
.decoration::after,
.view-2::before,
.view-2::after {
    width: 100% !important; /* 画面幅ではなく親幅に合わせる */
    right: 0 !important;    /* 右端を揃える */
    left: 0 !important;
    margin: 0 !important;
}

/* 3. 以前の「横スクロール許可」設定の副作用を修正 */
/* html/bodyの幅計算のズレ（100vw問題）を吸収します */
html {
    overflow-x: auto !important; /* スクロールは許可 */
    width: 100% !important;
}

body {
    overflow-x: hidden !important; /* bodyからはみ出た幽霊要素は見せない */
    position: relative !important;
    width: 100% !important;
    min-width: 1440px !important; /* 1440px固定は維持 */
}

/* コンテナはしっかり見せる（背景色確保） */
html body .page-container {
    overflow: visible !important;
    width: 1440px !important;
    margin: 0 auto !important;
}

/* ============================================
   【修正】ヘッダーデザインの復元
   ============================================ */

@media screen and (min-width: 768px) {
    html body .view-6,
    html body header.view-6 {
        /* 幅を元の1237pxに戻す */
        width: 1237px !important;
        min-width: 1237px !important;
        max-width: 1237px !important;
        
        /* 位置を元の「少し浮かせた位置」に戻す */
        position: absolute !important;
        top: 11px !important;
        left: 81px !important; 
        right: auto !important;
        
        /* リセット */
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        border: none !important;
        z-index: 1000 !important;
        
        background: transparent !important;
        background-color: transparent !important;
    }

    /* 2. サブページで背景が白くなる設定は維持する */
    html body .page-container .zero-sub-page header.view-6 {
        background-color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 1200px !important;
    }
}

html body .page-container > footer.view-2 .element-2 {
    /* Gridの影響を受けない絶対配置で背景に敷く */
    position: absolute !important;
    top: 458px !important;
    left: 915px !important;
    width: 235px !important;
    height: 114px;
    object-fit:cover;
    display:block !important;
    z-index: 3 !important;
}

/* 予約ボタン（スマホでは記事の下へ） */
html body .page-container > footer.view-2 .group {
    position: absolute !important;
    top: 454px !important;
    left: 1230px !important;
    width: 126px !important;
    height: 122px !important;
    z-index:3 !important;
    display: block !important;
}

html body .page-container > footer.view-2 .group .text-wrapper-2 {
    position: absolute !important;
    top: 68px !important;
    left: 2px !important;
    width: 119px !important;
    height: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Noto Sans JP", Helvetica !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    font-size: 11.6px !important;
    text-align: center !important;
    letter-spacing: 1.16px !important;
    line-height: 27.9px !important;
    white-space: nowrap !important;
}

html body .page-container > footer.view-2 .group .text-wrapper-3 {
    position: absolute !important;
    top: 87px !important;
    left: 2px !important;
    width: 119px !important;
    height: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Noto Sans JP", Helvetica !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    font-size: 11.6px !important;
    text-align: center !important;
    letter-spacing: 1.16px !important;
    line-height: 27.9px !important;
    white-space: nowrap !important;
}

html body .page-container > footer.view-2 .group .vector-3 {
    position:absolute !important;
    top: 86px !important;
    left: 93px !important;
    width: 7px !important;
    height: 9px !important;
}

html body .page-container > footer.view-2 .group .vector-4 {
    position:absolute !important;
    top: 86px !important;
    left: 24px !important;
    width: 7px !important;
    height: 9px !important;
}

html body .page-container > footer.view-2 .group .element {
    position: absolute !important;
    top: 21px !important;
    left: 44px !important;
    width: 35px !important;
    height: 35px !important;
}

html body .page-container > footer.view-2 .group .ellipse {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 122px !important;
    height: 122px !important;
    background-color: #718594 !important;
    border-radius: 61px !important;
}

@media screen and (max-width: 767px) {
    
    /* 1. HTML/BODYの幅制限を解除 */
    html, body {
        min-width: 0 !important;      /* 1440pxの最小幅を解除 */
        width: 100% !important;       /* 画面幅に合わせる */
        overflow-x: hidden !important; /* 横スクロール禁止 */
    }

    /* 2. ページ全体のコンテナを100%に戻す */
    html body .page-container {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* はみ出しカット */
        margin: 0 !important;
    }

    /* 3. ヘッダーの幅固定も解除 */
    html body .view-6,
    html body header.view-6 {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        
        position: relative !important; /* 絶対配置だと崩れやすいので通常配置へ */
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
    }

    /* 4. フッターの幅固定も解除 */
    html body .page-container > footer.view-2 {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }
    
    /* 5. サブページの中身も強制的に100%に収める */
    .zero-staff-pc,
    .zero-menu-pc,
    .zero-style-pc,
    .zero-blog-pc,
    .zero-sub-page {
        width: 100% !important;
        max-width: 100% !important;
        clip-path: none !important; /* PC用の切り抜きを解除 */
    }
}

/* スマホ用 */
@media screen and (max-width: 767px) {
    html body .page-container .zero-PCTOP .view-2 .footer-sp-wrapper {
        max-width: 100vw !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    html body .page-container .zero-PCTOP .view-2 .footer-sp-wrapper .footer-info-list{
        max-width: 100vw !important;
    }
    html body .view-2 .footer-row dt, html body .view-2 .footer-row dd{
        font-family: 'Noto Sans JP' !important;
        font-style: normal !important;
        font-weight: 300 !important;
        font-size: 16px !important;
        line-height: 160% !important;
        letter-spacing: 0.17em !important;
        color: #26252E !important;
    }
    html body .view-2 .footer-row dt, html body .view-2 .footer-row dt{
        font-family: 'Noto Sans JP' !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 14px !important;
        letter-spacing: 0.17em !important;
    }
    /* 子ページスマホヘッダー部分の修正 */
    html body .page-container .zero-sub-page header.view-6 {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        height: 84px !important;
        padding: 0 15px !important
    }
    body .page-container .zero-sub-page .view-6 .studio {
        height: auto !important;
        width: 100px !important;
        object-fit: contain !important;
        display: block !important;
        mix-blend-mode: multiply !important;
        position: static !important;
        padding-top: 10.2px !important;
    }
    /* Staff, Menu, Style, Blog のスマホ用コンテナ全てに適用 */
    .zero-staff-sp,
    .zero-menu-sp,
    .zero-style-sp,
	.zero-recruit-sp{
        position: relative !important;
        top: auto !important;
        left: auto !important;
        
        padding-top: 15px !important; 
        
        /* 幅とレイアウトの確保 */
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
    }

    /* style SP用 */
    .zero-menu-sp, .zero-style-sp{
        padding-top: 20px !important;
    }
}

@media screen and (max-width: 767px) {
    
    /* 1. PC用のフッター構成要素を根こそぎ非表示にする */
    html body .page-container > footer.view-2 .group-2,      /* PC用店舗情報エリア */
    html body .page-container > footer.view-2 .pc-map-frame, /* PC用マップエリア */
    html body .page-container > footer.view-2 .rectangle,    /* PC用背景図形 */
    html body .page-container > footer.view-2 .rectangle-2,  /* PC用背景図形 */
    html body .page-container > footer.view-2 .image,        /* PC用画像 */
    html body .page-container > footer.view-2 .element-2,    /* PC用ロゴ */
    html body .page-container > footer.view-2 .p             /* PC用コピーライト（重複する場合） */
    {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
    }

    /* 2. フッター本体の高さを「中身なり（auto）」に強制リセット */
    /* ※ここが固定値（100%や597px）になっていると異常に伸びます */
    html body .page-container > footer.view-2 {
        height: auto !important;
        min-height: 0 !important;
        
        /* 余計な余白の削除 */
        padding-top: 0 !important;
        padding-bottom: 20px !important;
        margin-top: 0 !important;
        
        /* レイアウト崩れ防止 */
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }


}

/* ============================================
   【修正】Menuページ 装飾ラインの色変更 & リストレイアウト修正
   ============================================ */
@media screen and (min-width: 768px) {
    .zero-menu-pc .vector-2{
         /* CSSフィルターで #F7412A を再現 */
        filter: brightness(0) saturate(100%) 
                invert(37%) sepia(54%) saturate(5833%) hue-rotate(346deg) brightness(100%) contrast(96%) !important;
        opacity: 1 !important;
    }

    .zero-menu-pc .frame {
        gap: 40px !important;
        width: 854px !important;
        left: calc(45% - 368px) !important;
    }

    .zero-menu-pc .frame-2 {
        display:flex !important;
        flex-direction: row !important; /* 横並び */
        align-items: center !important; /* 上下中央揃え */
        justify-content: flex-start !important; /* 左から並べる */
        width: 100% !important;
        padding: 20px 60px !important; 
        box-sizing: border-box !important;
    }

    .zero-menu-pc .frame-2 .p,
    .zero-menu-pc .frame-2 .div-2 {
        display: flex !important;
        flex-direction: column !important; /* ★ここで縦並びに変更 */
        justify-content: left !important;
        align-items: flex-start !important; /* 左寄せ */
        
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        line-height: 1.5 !important;

        margin-right: auto !important;
        flex-grow: 1 !important;
        width:auto !important;
        max-width: 60% !important;

    }

    .zero-menu-pc .element-2,
    .zero-menu-pc .text-wrapper-7 {
        width: auto !important;
        height: auto !important;

        text-align: right !important;
        white-space: nowrap !important;

        margin: 0 15px 0 0 !important;
        padding: 0 !important;

        flex-shrink: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    .zero-menu-pc .text-wrapper-5{
        width: auto !important;
        height: auto !important;

        font-size: 12px !important;
        white-space: nowrap !important;

        position: relative !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        flex-shrink: 0 !important;
    }

    .zero-menu-pc .frame-2 .span,
    .zero-menu-pc .frame-2 .text-wrapper-6{
        display: block !important;
        white-space: normal !important; /* 必要なら折り返し許可 */
        text-align: left !important;
    }
    .zero-menu-pc .frame-2 .text-wrapper-2{
        display: block !important;
        position: relative !important;
        margin-top: 5px !important;    /* 上の文字との隙間 */
        font-size: 12px !important;    /* フォントサイズ調整（お好みで） */
        line-height: 1.2 !important;
        text-align: left !important;
        color: #6b6a75 !important;
        
        /* 以前の位置調整をリセット */
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }

    /* ============================================
   【修正】Menuページ PERMセクション(frame-3)の右寄せ整列
   1. リスト行(frame-4)をFlexbox化
   2. メニュー名と説明文を縦並び＆左側に配置
   3. 価格と税込を右端に配置
   ============================================ */
    /* PERM部 */
    .zero-menu-pc .vector-3 {
    filter: brightness(0) saturate(100%) 
            invert(37%) sepia(54%) saturate(5833%) hue-rotate(346deg) brightness(100%) contrast(96%) !important;
    opacity: 1 !important;
    }

    .zero-menu-pc .frame-3 {
        gap: 40px !important;
        width: 854px !important;
        left: calc(50% - 368px) !important;
    }

    /* 1. リスト行（li.frame-4）のレイアウト設定 */
    .zero-menu-pc .frame-4,
    .zero-menu-sp .frame-4 {
        display: flex !important;
        flex-direction: row !important; /* 横並び */
        align-items: center !important; /* 上下中央揃え */
        justify-content: flex-start !important; /* 左から配置 */
        width: 100% !important;
        
        /* 左右余白（PCは広め、SPは狭め） */
        padding: 20px 60px !important; 
        box-sizing: border-box !important;
    }

    /* 2. メニュー名＆説明文エリア（左側） */
    /* クラス名: element-5, element-6, div-3 をまとめて指定 */
    .zero-menu-pc .frame-4 .element-5,
    .zero-menu-pc .frame-4 .element-6,
    .zero-menu-pc .frame-4 .div-3,
    .zero-menu-sp .frame-4 .element-5,
    .zero-menu-sp .frame-4 .element-6,
    .zero-menu-sp .frame-4 .div-3 {
        margin-right: auto !important; /* ★これで価格たちを右端へ押しやる */
        flex-grow: 1 !important;
        
        /* 縦並び設定 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        
        width: auto !important;
        max-width: 60% !important; /* 価格に被らないように制限 */
        height: auto !important;
        margin: 0 !important;
        margin-right: auto !important; /* 再度指定 */
        line-height: 1.5 !important;
    }

    /* 3. メニュー名（text-wrapper-6 および span） */
    .zero-menu-pc .frame-4 .text-wrapper-6,
    .zero-menu-pc .frame-4 .span,
    .zero-menu-sp .frame-4 .text-wrapper-6,
    .zero-menu-sp .frame-4 .span {
        display: block !important;
        white-space: normal !important;
        text-align: left !important;
        /* 元のフォントスタイル維持 */
    }

    /* 4. 説明文（text-wrapper-2） */
    .zero-menu-pc .frame-4 .text-wrapper-2,
    .zero-menu-sp .frame-4 .text-wrapper-2 {
        display: block !important;
        position: relative !important;
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-align: left !important;
        color: #6b6a75 !important;
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }

    /* 5. 価格（text-wrapper-9） */
    .zero-menu-pc .text-wrapper-9,
    .zero-menu-sp .text-wrapper-9 {
        width: auto !important;
        height: auto !important;
        text-align: right !important;
        white-space: nowrap !important;
        margin: 0 15px 0 0 !important; /* 税込との隙間 */
        padding: 0 !important;
        flex-shrink: 0 !important;
        
        /* 位置リセット */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        
        /* フォント調整（念のため） */
        font-size: 16px !important;
        color: #6b6a75 !important;
    }

    /* 6. 税込（text-wrapper-10） */
    .zero-menu-pc .text-wrapper-10,
    .zero-menu-sp .text-wrapper-10 {
        width: auto !important;
        height: auto !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        
        /* 位置リセット */
        position: relative !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        flex-shrink: 0 !important;
    }

    /* ============================================
   【修正】Menuページ COLORセクション(frame-6)の右寄せ整列
   1. 装飾ライン(vector-4)を赤色に変更
   2. リスト行(frame-6)をFlexbox化
   3. メニュー名と説明文を縦並び＆左側に配置
   4. 価格と税込を右端に配置
   ============================================ */
    /* 1. COLORセクションの装飾ライン（vector-4）を赤色(#F7412A)に変更 */
    .zero-menu-pc .vector-4 {
        filter: brightness(0) saturate(100%) 
                invert(37%) sepia(54%) saturate(5833%) hue-rotate(346deg) brightness(100%) contrast(96%) !important;
        opacity: 1 !important;
    }

    /* 2. リスト行（li.frame-6）のレイアウト設定 */
    .zero-menu-pc .frame-6{
        display: flex !important;
        flex-direction: row !important; /* 横並び */
        align-items: center !important; /* 上下中央揃え */
        justify-content: flex-start !important; /* 左から配置 */
        width: 100% !important;
        
        /* 左右余白 */
        padding: 20px 60px !important; 
        box-sizing: border-box !important;
    }

    /* スマホ用の余白調整 */
    @media screen and (max-width: 767px) {
        .zero-menu-sp .frame-6 {
            padding: 20px 20px !important;
        }
    }

    /* 3. メニュー名＆説明文エリア（左側：element-7） */
    .zero-menu-pc .frame-6 .element-7{
        margin-right: auto !important; /* 右側の要素を端へ押しやる */
        flex-grow: 1 !important;
        
        /* 縦並び設定 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        
        width: auto !important;
        max-width: 80% !important; /* 価格に被らないように制限 */
        height: auto !important;
        margin: 0 !important;
        margin-right: auto !important; /* 再度指定 */
        line-height: 1.5 !important;
    }

    /* 4. メニュー名（text-wrapper-14） */
    .zero-menu-pc .frame-6 .text-wrapper-14{
        display: block !important;
        white-space: normal !important;
        text-align: left !important;
    }

    /* 5. 説明文（text-wrapper-15） */
    .zero-menu-pc .frame-6 .text-wrapper-15{
        display: block !important;
        position: relative !important;
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-align: left !important;
        color: #6b6a75 !important;
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }

    /* 6. 価格（text-wrapper-16） */
    .zero-menu-pc .text-wrapper-16{
        width: auto !important;
        height: auto !important;
        text-align: right !important;
        white-space: nowrap !important;
        margin: 0 15px 0 0 !important; /* 税込との隙間 */
        padding: 0 !important;
        flex-shrink: 0 !important;
        
        /* 位置リセット */
        position: relative !important;
        top: auto !important;
        left: 120px !important;
        
        /* フォント調整 */
        font-size: 16px !important;
        color: #6b6a75 !important;
    }

    /* 7. 税込（text-wrapper-17） */
    .zero-menu-pc .text-wrapper-17{
        width: auto !important;
        height: auto !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        
        /* 位置リセット */
        position: relative !important;
        margin: 0 !important;
        top: auto !important;
        left: 120px !important;
        flex-shrink: 0 !important;
    }

    /* ============================================
   【修正】Menuページ STRAIGHT PERMセクション(frame-7)の右寄せ整列
   1. 装飾ライン(vector-5)を赤色に変更
   2. メニュー行(frame-7)をFlexbox化し、白枠に合わせて配置
   3. メニュー名・説明を左側、価格・税込を右側に配置
   ============================================ */

    /* 1. STRAIGHT PERMセクションの装飾ライン（vector-5）を赤色(#F7412A)に変更 */
    .zero-menu-pc .vector-5 {
        filter: brightness(0) saturate(100%) 
                invert(37%) sepia(54%) saturate(5833%) hue-rotate(346deg) brightness(100%) contrast(96%) !important;
        opacity: 1 !important;
    }

    /* 2. メニュー行（frame-7）のレイアウト設定 */
    .zero-menu-pc .frame-7 {
        display: flex !important;
        flex-direction: row !important; /* 横並び */
        align-items: center !important; /* 上下中央揃え */
        justify-content: flex-start !important; /* 左から配置 */
        
        /* 白枠（rectangle-7）と同じ位置・幅に強制設定 */
        width: 1080px !important;
        left: calc(50% - 451px) !important; /* 白枠の座標に合わせる */
        
        /* 左右余白で文字位置を調整 */
        padding: 0px 110px !important; 
        box-sizing: border-box !important;
    }

    /* 3. メニュー名＆説明文エリア（左側：element-9） */
    .zero-menu-pc .frame-7 .element-9 {
        margin-right: auto !important; /* 価格を右端へ押しやる */
        flex-grow: 1 !important;
        
        /* 縦並び設定 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        
        width: auto !important;
        max-width: 60% !important; /* 右側と被らないように制限 */
        height: auto !important;
        margin: 0 !important;
        margin-right: auto !important; /* 再度指定 */
        line-height: 1.5 !important;
    }

    /* 4. メニュー名（text-wrapper-14） */
    .zero-menu-pc .frame-7 .text-wrapper-14 {
        display: block !important;
        text-align: left !important;
        width: auto !important;
    }

    /* 5. 説明文（text-wrapper-15） */
    .zero-menu-pc .frame-7 .text-wrapper-15 {
        display: block !important;
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        color: #6b6a75 !important;
        text-align: left !important;
    }

    /* 6. 価格（text-wrapper-18） */
    .zero-menu-pc .text-wrapper-18 {
        width: auto !important;
        height: auto !important;
        text-align: right !important;
        white-space: nowrap !important;
        margin: 0 15px 0 0 !important; /* 税込との隙間 */
        padding: 0 !important;
        flex-shrink: 0 !important;
        
        /* 位置リセット */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        
        font-size: 16px !important;
        color: #6b6a75 !important;
    }

    /* 7. 税込（text-wrapper-19） */
    .zero-menu-pc .text-wrapper-19 {
        width: auto !important;
        height: auto !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        
        /* 位置リセット */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* ============================================
   【修正】Menuページ TREATMENTセクション(frame-8, frame-9)の右寄せ整列
   1. メニュー行(frame-8, frame-9)をFlexbox化し、白枠に合わせて配置
   2. メニュー名・説明を左側、価格・税込を右側に配置
   ============================================ */

    /* 1. メニュー行（frame-8, frame-9）のレイアウト設定 */
    .zero-menu-pc .frame-8,
    .zero-menu-pc .frame-9 {
        display: flex !important;
        flex-direction: row !important; /* 横並び */
        align-items: center !important; /* 上下中央揃え */
        justify-content: flex-start !important; /* 左から配置 */
        
        /* 白枠（rectangle-8）と同じ位置・幅に強制設定 */
        width: 1080px !important;
        left: calc(50% - 451px) !important; /* 白枠の座標に合わせる */
        
        /* 左右余白で文字位置を調整 */
        padding: 20px 110px !important; 
        box-sizing: border-box !important;
    }

    /* 2. メニュー名＆説明文エリア（左側：div-3） */
    /* ※ div-3 は他のセクションでも使われている可能性があるため親クラスで限定 */
    .zero-menu-pc .frame-8 .div-3,
    .zero-menu-pc .frame-9 .div-3 {
        margin-right: auto !important; /* 価格を右端へ押しやる */
        flex-grow: 1 !important;
        
        /* 縦並び設定 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        
        width: auto !important;
        max-width: 60% !important; /* 右側と被らないように制限 */
        height: auto !important;
        margin: 0 !important;
        margin-right: auto !important; /* 再度指定 */
        line-height: 1.5 !important;
    }

    /* 3. メニュー名（span） */
    .zero-menu-pc .frame-8 .span,
    .zero-menu-pc .frame-9 .span {
        display: block !important;
        text-align: left !important;
        width: auto !important;
        white-space: normal !important;
    }

    /* 4. 説明文（text-wrapper-2） */
    .zero-menu-pc .frame-8 .text-wrapper-2,
    .zero-menu-pc .frame-9 .text-wrapper-2 {
        display: block !important;
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        color: #6b6a75 !important;
        text-align: left !important;
        white-space: normal !important; /* 長文の折り返しを許可 */
    }

    /* 5. 価格（text-wrapper-20） */
    .zero-menu-pc .text-wrapper-20 {
        width: auto !important;
        height: auto !important;
        text-align: right !important;
        white-space: nowrap !important;
        margin: 0 15px 0 0 !important; /* 税込との隙間 */
        padding: 0 !important;
        flex-shrink: 0 !important;
        
        /* 位置リセット */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        
        font-size: 16px !important;
        color: #6b6a75 !important;
    }

    /* 6. 税込（text-wrapper-21） */
    .zero-menu-pc .text-wrapper-21 {
        width: auto !important;
        height: auto !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        
        /* 位置リセット */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex-shrink: 0 !important;
    }

    /* HAIR SET部 */
    .zero-menu-pc .vector-6{
        filter: brightness(0) saturate(100%) invert(37%) sepia(54%) saturate(5833%) hue-rotate(346deg) brightness(100%) contrast(96%) !important;
        opacity: 1 !important;
        height: 2px !important;
    }
}   

@media screen and (max-width: 767px) {
    .zero-menu-sp .vector-2 {
        /* CSSフィルターで #F7412A を再現 */
        filter: brightness(0) saturate(100%) 
            invert(37%) sepia(54%) saturate(5833%) hue-rotate(346deg) brightness(100%) contrast(96%) !important;
        opacity: 1 !important;
    }
    .zero-menu-sp .vector-10,
    .zero-menu-sp .vector-12,
    .zero-menu-sp .vector-13,
    .zero-menu-sp .vector-14,
    .zero-menu-sp .vector-15,
    .zero-menu-sp .vector-16,
    .zero-menu-sp .vector-17,
    .zero-menu-sp .vector-19,
    .zero-menu-sp .vector-20,
    .zero-menu-sp .vector-21,
    .zero-menu-sp .vector-22,
    .zero-menu-sp .vector-23{
        filter: brightness(0) saturate(100%) invert(44%) sepia(7%) saturate(869%) hue-rotate(202deg) brightness(93%) contrast(88%) !important;
        opacity: 1 !important;
    }
    .zero-menu-sp {
        padding-top: 0px !important;
    }
    .zero-menu-sp .menu-mv-section-sp {
        margin-top: 0px !important;
    }
    .zero-menu-sp .vector-8{
        filter:brightness(0) saturate(100%) 
            invert(44%) sepia(7%) saturate(869%) hue-rotate(202deg) brightness(93%) contrast(88%) !important;
    }
    /* ============================================
   【SP修正】Menuページ CUTセクション(frame-11)のレイアウト調整
   1. メニュー名と詳細を左上へ
   2. ライン(vector-10)を中央へ配置
   3. 金額と税込を右下へ配置
   ============================================ */

    /* 1. 各メニュー項目のコンテナ設定 */
    .zero-menu-sp .element-13 {
        display: flex !important;
        flex-wrap: wrap !important;       /* 折り返しを許可して縦積みにする */
        justify-content: flex-end !important; /* 右寄せ（価格用） */
        align-items: baseline !important; /* ベースラインで揃える */
        
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 0px !important;   /* 項目ごとの間隔 */
        
        /* 以前の固定配置をリセット */
        top: auto !important;
        left: auto !important;
    }

    /* 2. メニュー名・内容エリア（.div-4） */
    /* 左上に配置し、幅100%を取ることでラインを下に押しやる */
    .zero-menu-sp .element-13 .div-4 {
        order: 1 !important;              /* 表示順：1番目 */
        width: 100% !important;           /* 横幅いっぱいに */
        
        text-align: left !important;      /* 左揃え */
        position: relative !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
    }

    /* 3. 区切り線（.vector-10） */
    /* メニュー名の下に配置 */
    .zero-menu-sp .element-13 .vector-10 {
        order: 2 !important;              /* 表示順：2番目 */
        width: 100% !important;           /* 横幅いっぱいに */
        
        position: relative !important;
        height: 1px !important;
        margin: 10px 0 !important;        /* 上下の余白 */
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
        object-fit: cover !important;
    }

    /* 4. 金額（.text-wrapper-27, 33） */
    /* ラインの下、右側に配置 */
    .zero-menu-sp .element-13 .text-wrapper-27,
    .zero-menu-sp .element-13 .text-wrapper-33 {
        order: 3 !important;              /* 表示順：3番目 */
        width: auto !important;
        
        text-align: right !important;
        margin-right: 10px !important;    /* 税込との間の余白 */
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }

    /* 5. 税込（.text-wrapper-28, 34） */
    /* 金額の右横に配置 */
    .zero-menu-sp .element-13 .text-wrapper-28,
    .zero-menu-sp .element-13 .text-wrapper-34 {
        order: 4 !important;              /* 表示順：4番目 */
        width: auto !important;
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }
    /* ============================================
   【SP修正】Menuページ PERMセクションのレイアウト調整
   対象: .element-14, .element-16, .element-17
   1. メニュー名と詳細を左上へ (order: 1)
   2. ラインを中央へ配置 (order: 2)
   3. 金額と税込を右下へ配置 (order: 3, 4)
   ============================================ */
    .zero-menu-sp .frame-12{
        display: flex;
        flex-direction: column;
        width: 247px;
        align-items: flex-start;
        gap: 0px;
        position: absolute;
        top: 110px;
        left: 64px;
    }

    /* 1. コンテナ設定（枠組み） */
    .zero-menu-sp .element-14,
    .zero-menu-sp .element-16,
    .zero-menu-sp .element-17 {
        display: flex !important;
        flex-wrap: wrap !important;           /* 折り返し許可 */
        justify-content: flex-end !important; /* 右寄せ（価格用） */
        align-items: baseline !important;     /* ベースライン揃え */
        
        position: relative !important;        /* 絶対配置を解除 */
        width: 100% !important;
        height: auto !important;
        margin-bottom: 30px !important;       /* 項目間の余白 */
        
        /* 固定配置リセット */
        top: auto !important;
        left: auto !important;
    }

    /* 2. メニュー名・詳細エリア（左上） */
    /* 対象クラス: .element-15, .div-5 */
    .zero-menu-sp .element-14 .element-15,
    .zero-menu-sp .element-16 .element-15,
    .zero-menu-sp .element-17 .div-5 {
        order: 1 !important;
        width: 100% !important;               /* 横幅いっぱいに */
        
        position: relative !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        text-align: left !important;
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
    }

    /* 3. 区切り線（中央） */
    /* 対象クラス: .vector-12, .vector-13 */
    .zero-menu-sp .element-14 .vector-12,
    .zero-menu-sp .element-16 .vector-12,
    .zero-menu-sp .element-17 .vector-13 {
        order: 2 !important;
        width: 100% !important;               /* 横幅いっぱいに */
        
        position: relative !important;
        height: 1px !important;
        margin: 10px 0 !important;            /* 上下の余白 */
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
        object-fit: cover !important;
    }

    /* 4. 金額（右下） */
    /* 対象クラス: .text-wrapper-36, .text-wrapper-39 */
    .zero-menu-sp .element-14 .text-wrapper-36,
    .zero-menu-sp .element-16 .text-wrapper-36,
    .zero-menu-sp .element-17 .text-wrapper-39 {
        order: 3 !important;
        width: auto !important;
        
        text-align: right !important;
        margin-right: 10px !important;        /* 税込との余白 */
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }

    /* 5. 税込（金額の右横） */
    /* 対象クラス: .text-wrapper-37, .text-wrapper-40 */
    .zero-menu-sp .element-14 .text-wrapper-37,
    .zero-menu-sp .element-16 .text-wrapper-37,
    .zero-menu-sp .element-17 .text-wrapper-40 {
        order: 4 !important;
        width: auto !important;
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }

    .zero-menu-sp .frame-13{
        display: flex;
        flex-direction: column;
        width: 247px;
        align-items: flex-start;
        gap: 0px;
        position: absolute;
        top: 250px;
        left: 64px;
    }

    /* ============================================
   【SP修正】Menuページ COLORセクションのレイアウト調整
   対象: element-18, 19, 21, 22, 23, 25, 27, 28, group
   1. メニュー名と詳細を左上へ (order: 1)
   2. ラインを中央へ配置 (order: 2)
   3. 金額と税込を右下へ配置 (order: 3, 4)
   ============================================ */

    /* 1. コンテナ設定（枠組み） */
    /* 対象クラスを網羅して一括指定 */
    .zero-menu-sp .element-18,
    .zero-menu-sp .element-19,
    .zero-menu-sp .element-21,
    .zero-menu-sp .element-22,
    .zero-menu-sp .element-23,
    .zero-menu-sp .element-25,
    .zero-menu-sp .element-27,
    .zero-menu-sp .element-28,
    .zero-menu-sp .group {
        display: flex !important;
        flex-wrap: wrap !important;           /* 折り返し許可 */
        justify-content: flex-end !important; /* 右寄せ（価格用） */
        align-items: baseline !important;     /* ベースライン揃え */
        
        position: relative !important;        /* 絶対配置を解除 */
        width: 100% !important;
        height: auto !important;
        margin-bottom: 30px !important;       /* 項目間の余白 */
        
        /* 固定配置リセット */
        top: auto !important;
        left: auto !important;
    }

    /* 2. メニュー名・詳細エリア（左上） */
    /* 対象クラス: element-15, element-20, element-24, element-26 */
    .zero-menu-sp .element-15,
    .zero-menu-sp .element-20,
    .zero-menu-sp .element-24,
    .zero-menu-sp .element-26 {
        order: 1 !important;
        width: 100% !important;               /* 横幅いっぱいに */
        
        position: relative !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        text-align: left !important;
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
    }

    /* 3. 区切り線（中央） */
    /* 対象クラス: vector-12, 14, 15, 16, 17 */
    .zero-menu-sp .vector-12,
    .zero-menu-sp .vector-14,
    .zero-menu-sp .vector-15,
    .zero-menu-sp .vector-16,
    .zero-menu-sp .vector-17 {
        order: 2 !important;
        width: 100% !important;               /* 横幅いっぱいに */
        
        position: relative !important;
        height: 1px !important;
        margin: 10px 0 !important;            /* 上下の余白 */
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
        object-fit: cover !important;
    }

    /* 4. 金額（右下） */
    /* 対象クラス: text-wrapper-36, 42, 45, 47, 49, 52 */
    .zero-menu-sp .text-wrapper-36,
    .zero-menu-sp .text-wrapper-42,
    .zero-menu-sp .text-wrapper-45,
    .zero-menu-sp .text-wrapper-47,
    .zero-menu-sp .text-wrapper-49,
    .zero-menu-sp .text-wrapper-52 {
        order: 3 !important;
        width: auto !important;
        
        text-align: right !important;
        margin-right: 10px !important;        /* 税込との余白 */
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }

    /* 5. 税込（金額の右横） */
    /* 対象クラス: text-wrapper-37, 43, 46, 48, 50, 51, 53 */
    .zero-menu-sp .text-wrapper-37,
    .zero-menu-sp .text-wrapper-43,
    .zero-menu-sp .text-wrapper-46,
    .zero-menu-sp .text-wrapper-48,
    .zero-menu-sp .text-wrapper-50,
    .zero-menu-sp .text-wrapper-51,
    .zero-menu-sp .text-wrapper-53 {
        order: 4 !important;
        width: auto !important;
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }

    /* 特殊ケース：group-wrapper のリセット */
    /* これがあるとレイアウト崩れの原因になるため */
    .zero-menu-sp .group-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* ============================================
   【SP修正】Menuページ STRAIGHT PERMセクション(element-29)のレイアウト調整
   1. メニュー名と詳細(element-30)を左上へ (order: 1)
   2. ライン(vector-19)を中央へ配置 (order: 2)
   3. 金額(text-wrapper-56)と税込(text-wrapper-57)を右下へ配置 (order: 3, 4)
   ============================================ */

   .zero-menu-sp .frame-14{
        display: flex;
        flex-direction: column;
        width: 247px;
        align-items: flex-start;
        gap: 0px;
        position: absolute;
        top: 100px;
        left: 64px;
    }

    /* 1. コンテナ設定 */
    .zero-menu-sp .element-29 {
        display: flex !important;
        flex-wrap: wrap !important;           /* 折り返し許可 */
        justify-content: flex-end !important; /* 右寄せ（価格用） */
        align-items: baseline !important;     /* ベースライン揃え */
        
        position: relative !important;        /* 絶対配置を解除 */
        width: 100% !important;
        height: auto !important;
        margin-bottom: 30px !important;
        
        /* 固定配置リセット */
        top: auto !important;
        left: auto !important;
    }

    /* 2. メニュー名・詳細エリア (.element-30) */
    /* 左上に配置 */
    .zero-menu-sp .element-29 .element-30 {
        order: 1 !important;
        width: 100% !important;               /* 横幅いっぱいに */
        
        text-align: left !important;
        position: relative !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
    }

    /* 3. 区切り線 (.vector-19) */
    /* 中央に配置 */
    .zero-menu-sp .element-29 .vector-19 {
        order: 2 !important;
        width: 100% !important;               /* 横幅いっぱいに */
        
        position: relative !important;
        height: 1px !important;
        margin: 10px 0 !important;            /* 上下の余白 */
        
        /* 位置リセット */
        top: auto !important;
        left: auto !important;
        object-fit: cover !important;
    }

    /* 4. 金額 (.text-wrapper-56) */
    /* 右下に配置 */
    .zero-menu-sp .element-29 .text-wrapper-56 {
        order: 3 !important;
        width: auto !important;
        
        text-align: right !important;
        margin-right: 10px !important;        /* 税込との余白 */
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }

    /* 5. 税込 (.text-wrapper-57) */
    /* 金額の右横 */
    .zero-menu-sp .element-29 .text-wrapper-57 {
        order: 4 !important;
        width: auto !important;
        
        position: relative !important;
        height: auto !important;
        
        /* 位置リセット */
        top: auto !important;
        left: -20px !important;
    }

    /* ============================================
   【SP修正】Menuページ TREATMENTセクション (frame-15)
   対象: element-31, element-32
   1. メニュー名と詳細を左上へ (order: 1)
   2. ラインを中央へ配置 (order: 2)
   3. 金額と税込を右下へ配置 (order: 3, 4)
   ============================================ */
   /* --- 1. リスト全体の枠組み調整 --- */
    /* 白い枠のデザインを中身(frame-15)に適用し、高さが自動で伸びるようにする */
    /* ※これをしないと文字数によって枠からはみ出たり崩れたりします */
    .zero-menu-sp .frame-15 {
        position: relative !important;
        width: 80% !important;
        max-width: 400px !important;
        height: auto !important;      /* 中身に合わせて伸縮 */
        margin: 0 auto 50px auto !important;
        padding: 30px 20px !important;
               
        /* 固定配置リセット */
        top: 400px !important;
        left: auto !important;
    }

    /* --- 2. 各行（element-31, 32）の共通コンテナ設定 --- */
    .zero-menu-sp .element-31,
    .zero-menu-sp .element-32 {
        display: flex !important;
        flex-wrap: wrap !important;           /* 折り返し許可 */
        justify-content: flex-end !important; /* 右寄せ（価格用） */
        align-items: baseline !important;     /* ベースライン揃え */
        
        width: 100% !important;
        height: auto !important;
        margin-bottom: 30px !important;
        position: relative !important;
        
        /* 固定配置リセット */
        top: auto !important;
        left: auto !important;
    }


    /* --- 3. メニュー名・詳細エリア（左上） --- */
    /* 1つ目のクラス: .div-6, 2つ目のクラス: .treatment */
    .zero-menu-sp .element-31 .div-6,
    .zero-menu-sp .element-32 .treatment {
        order: 1 !important;
        width: 100% !important;
        
        text-align: left !important;
        display: block !important;
        margin: 0 0 5px 0 !important;
        
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }


    /* --- 4. 区切り線（中央） --- */
    /* 1つ目: .vector-20, 2つ目: .vector-21 */
    .zero-menu-sp .element-31 .vector-20,
    .zero-menu-sp .element-32 .vector-21 {
        order: 2 !important;
        width: 100% !important;
        
        height: 1px !important;
        margin: 20px 0 10px 0 !important;
        object-fit: cover !important;
        
        position: relative !important;
        top: auto !important;
        left: -20px !important;
    }


    /* --- 5. 金額（右下） --- */
    /* 1つ目: .text-wrapper-58, 2つ目: .text-wrapper-62 */
    .zero-menu-sp .element-31 .text-wrapper-58,
    .zero-menu-sp .element-32 .text-wrapper-62 {
        order: 3 !important;
        width: auto !important;
        
        text-align: right !important;
        margin-right: 10px !important; /* 税込との余白 */
        
        position: relative !important;
        top: auto !important;
        left: -20px !important;
    }


    /* --- 6. 税込（金額の右横） --- */
    /* 1つ目: .text-wrapper-59, 2つ目: .text-wrapper-63 */
    .zero-menu-sp .element-31 .text-wrapper-59,
    .zero-menu-sp .element-32 .text-wrapper-63 {
        order: 4 !important;
        width: auto !important;
        
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    /* set */
    .zero-menu-sp .frame-16 {
        position: relative !important;
        width: 80% !important;
        max-width: 400px !important;
        height: auto !important;      /* 中身に合わせて伸縮 */
        margin: 0 auto 50px auto !important;
        padding: 30px 20px !important;
               
        /* 固定配置リセット */
        top: 230px !important;
        left: auto !important;
    }
    /* ============================================
   【SP修正】Menuページ SETセクション
   対象: element-33, element-34, element-35
   レイアウト: メニュー名(左上) → 線(中央) → 価格(右下)
   ============================================ */
   /* --- 1. 各行の共通コンテナ設定 --- */
    /* Flexboxで並び順を制御するためのベース設定 */
    .zero-menu-sp .element-33,
    .zero-menu-sp .element-34,
    .zero-menu-sp .element-35 {
        display: flex !important;
        flex-wrap: wrap !important;           /* 折り返し許可 */
        justify-content: flex-end !important; /* 価格を右寄せ */
        align-items: baseline !important;     /* ベースライン揃え */
        
        width: 100% !important;
        height: auto !important;
        margin-bottom: 15px !important;
        position: relative !important;
        
        /* 固定配置をリセット */
        top: auto !important;
        left: auto !important;
    }


    /* --- 2. メニュー名・詳細エリア（左上：Order 1） --- */
    /* 対象クラス: .div-7 (33内), .div-8 (34内), .div-6 (35内) */
    .zero-menu-sp .element-33 .div-7,
    .zero-menu-sp .element-34 .div-8,
    .zero-menu-sp .element-35 .div-6 {
        order: 1 !important;
        width: 100% !important;
        
        text-align: left !important;
        display: block !important;
        margin: 20px 0 5px 0 !important;
        
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }


    /* --- 3. 区切り線（中央：Order 2） --- */
    /* 対象: imgタグ (.vector-22, .vector-23) */
    .zero-menu-sp .element-33 img,
    .zero-menu-sp .element-34 img,
    .zero-menu-sp .element-35 img {
        order: 2 !important;
        width: 100% !important;
        
        height: 1px !important;
        margin: 5px 0 10px 0 !important;
        object-fit: cover !important;
        
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }


    /* --- 4. 金額（右下：Order 3） --- */
    /* 対象クラス: .text-wrapper-64 (33内), .text-wrapper-66 (34内), .text-wrapper-58 (35内) */
    .zero-menu-sp .element-33 .text-wrapper-64,
    .zero-menu-sp .element-34 .text-wrapper-66,
    .zero-menu-sp .element-35 .text-wrapper-58 {
        order: 3 !important;
        width: auto !important;
        
        text-align: right !important;
        margin-right: 10px !important; /* 税込との余白 */
        
        position: relative !important;
        top: auto !important;
        left: -20px !important;
    }


    /* --- 5. 税込（金額の右横：Order 4） --- */
    /* 対象クラス: .text-wrapper-65 (33内), .text-wrapper-67 (34内), .text-wrapper-59 (35内) */
    .zero-menu-sp .element-33 .text-wrapper-65,
    .zero-menu-sp .element-34 .text-wrapper-67,
    .zero-menu-sp .element-35 .text-wrapper-59 {
        order: 4 !important;
        width: auto !important;
        
        position: relative !important;
        top: auto !important;
        left: -20px !important;
    }

    /* ============================================
   【修正】要素(CUT-8)のリンク化に伴うスタイル調整
   ※aタグにしてもデザインが変わらないように強制リセットします
   ============================================ */
    .menu-button-section-2 a.CUT-8 {
    text-decoration: none !important; /* リンクの下線を消す */
    color: inherit !important;        /* 文字色を元の色（親要素）に合わせる */
    cursor: pointer !important;       /* カーソルを指マークにする */
    
    /* レイアウト崩れ防止：divと同じように箱として振る舞わせる */
    display: flex !important;         /* 必要に応じて block または flex */
    align-items: center !important;   /* 中身の縦位置を整える */
    width: auto !important;           /* 必要なら調整 */
    }
    /* ============================================
   【修正】ボタンのリンク反応改善
   ※ 透明な要素の重なりで押せなくなるのを防ぐため、
     z-indexで最前面にし、クリック判定を強制有効化します。
   ============================================ */

    .menu-button-section-2 a.CUT-8 {
        position: relative !important;   /* 重なり順を指定するために必須 */
        z-index: 100 !important;         /* 他の要素より手前に持ってくる */
        pointer-events: auto !important; /* クリック判定を強制的にONにする */
        
        /* 念のためクリック領域を確保 */
        display: flex !important;
        width: 100% !important;          /* 横幅いっぱいに広げて押しやすくする */
        max-width: 100% !important;
    }
    /* 1. 親要素を強力に最前面へ持ち上げる */
    .zero-menu-sp .menu-button-section-2 {
        position: relative !important;
        z-index: 99999 !important; /* 画面上の他のあらゆる要素より手前に */
    }

    /* 2. リンクボタン自体の設定 */
    .zero-menu-sp .menu-button-section-2 a.CUT-8 {
        display: flex !important;       /* 押しやすいようにボックス化 */
        position: relative !important;
        z-index: 100 !important;
        pointer-events: auto !important; /* クリック判定を強制ON */
        cursor: pointer !important;
        
        /* ↓デバッグ用：本当にボタンがそこにあるか確認するため */
        /* 反応したらこの行は消してください */
        /* background-color: rgba(255, 0, 0, 0.2) !important; */
    }
}

/* =========================================
   STYLE GALLERY: 基本レイアウト & グリッド
   ========================================= */

/* 1. ギャラリー全体のラッパー調整 */
.style-gallery-wrapper {
    width: 100%;
    margin-top: 20px;
}

/* 2. グリッド設定 (PC: 3列) */
.style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 20px; /* 画像同士の隙間 */
    width: 100%;
}

/* 3. 画像カードのデザイン */
.style-item {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* 縦長の写真に見える比率 */
    overflow: hidden;
    border-radius: 4px; /* 角を少し丸める */
    box-sizing: border-box; /* 枠線をサイズに含める */
    
    /* デフォルトの枠線（透明） */
    border: 7px solid transparent; 
    transition: all 0.3s ease;
}

.style-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング */
    display: block;
}

.style-thumb {
    width: 100%;
    height: 100%;
}


/* =========================================
   STYLE GALLERY: 担当者別カラー設定
   ========================================= */
/* --- 画像の枠線 --- */
/* Chief: 水色 */
.style-item.staff-border-stylist-chief {
    border-color: #00BFFF !important; 
}
/* Iku: ゴールド/黄色 */
.style-item.staff-border-stylist-iku {
    border-color: #FFD700 !important;
}
/* Hitomin: ピンク */
.style-item.staff-border-stylist-hitomin-1 {
    border-color: #FF69B4 !important;
}
/* ※その他のHitomin用（スラッグに合わせて追加） */
.style-item.staff-border-stylist-hitomin-2 { border-color: #00BFFF !important; }
.style-item.staff-border-stylist-hitomin-3 { border-color: #FF69B4 !important; }


/* --- フィルタボタンのデザイン --- */
.style-category section {
    margin-bottom: 20px;
}

.filter-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px 15px;
    margin: 0 5px 5px 0;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: #333;
}

/* ボタンホバー時 */
.filter-btn:hover {
    background: #f5f5f5;
}

/* 選択中（アクティブ）のボタン */
.filter-btn.active {
    background: #333;
    color: #fff !important; /* 担当色も白文字にするなら !important */
    border-color: #333;
}

/* アコーディオンの子要素コンテナ */
.accordion-child-container {
    display: none; /* 初期状態は非表示 */
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    background: #ffffff;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    
    /* アニメーション用（display切り替えだと効かないので単純にパッと出る仕様） */
}

/* 子ボタンのデザイン（少し小さくするなど） */
.accordion-child-container .filter-btn {
    font-size: 13px;
    background: #fff;
    border-color: #ccc;
}

/* 親ボタンが開いている時のスタイル */
.filter-btn.has-child-accordion.open {
    background-color: #eee;
    font-weight: bold;
}
.style-gallery-wrapper .style-gender,
.style-gallery-wrapper .style-length,
.style-gallery-wrapper .style-other,
.style-gallery-wrapper .style-menu,
.style-gallery-wrapper .style-staff{
    width: 1100px !important;
}

/* =========================================
   修正：フィルタカテゴリのレイアウト整理
   ========================================= */

/* 1. カテゴリごとのセクション設定 */
/* セクション自体は縦に積む */
.style-category section {
    display: flex;        /* 中身（ボタン）を横並びにする */
    flex-wrap: wrap;      /* 【重要】画面端で折り返す設定 */
    align-items: center;  /* 上下中央揃え */
    gap: 10px;           /* ボタン同士の隙間 */
    margin-bottom: 25px;  /* 次のセクションとの余白 */
    width: 100%;          /* 横幅いっぱい使う */
}

/* 2. ボタンの文字崩れ防止 */
.filter-btn {
    white-space: nowrap;  /* 文字が変なところで改行されないようにする */
    flex-shrink: 0;       /* ボタンが押しつぶされないようにする */
}

/* 3. アコーディオン（子コンテナ）の強制改行設定 */
.accordion-child-container {
    /* これで「強制的に次の行」に行きます */
    flex-basis: 100%;     
    width: 100%;
    
    /* コンテナのデザイン */
    display: none;        /* 初期状態：非表示 */
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;     /* 親ボタンとの隙間 */
    
}

/* 4. 親ボタンが開いている時の見た目 */
.filter-btn.has-child-accordion.open {
    background-color: #333;
    color: #fff;
    border-color: #333;
}
/* 展開中は下矢印っぽくする装飾（お好みで） */
.filter-btn.has-child-accordion::after {
    content: " ▼";
    font-size: 0.8em;
    margin-left: 4px;
}
.filter-btn.has-child-accordion.open::after {
    content: " ▲";
}

/* 5. 子ボタン（年代など）のデザイン調整 */
.accordion-child-container .filter-btn {
    background: #fff;
    border: 1px solid #ccc;
    font-size: 13px;
    padding: 4px 12px;
}
.accordion-child-container .filter-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* =========================================
   修正：担当スタイリスト別カラー設定（最新版）
   ========================================= */

/* --- 1. Chief (水色: #80B1D2) --- */
/* ボタンの文字と枠線 */
button.staff-btn-stylist-chief {
    color: #80B1D2 !important;
    border-color: #80B1D2 !important;
}
/* 画像の枠線 */
.style-item.staff-border-stylist-chief {
    border-color: #80B1D2 !important;
}

/* --- 2. Iku (黄色: #E9C865) --- */
button.staff-btn-stylist-iku {
    color: #E9C865 !important;
    border-color: #E9C865 !important;
}
.style-item.staff-border-stylist-iku {
    border-color: #E9C865 !important;
}

/* --- 3. Hitomin-1 (ピンク: #F284B0) --- */
button.staff-btn-stylist-hitomin-1 {
    color: #F284B0 !important;
    border-color: #F284B0 !important;
}
.style-item.staff-border-stylist-hitomin-1 {
    border-color: #F284B0 !important;
}

/* --- 4. Hitomin-2 (黒: #000000) --- */
button.staff-btn-stylist-hitomin-2 {
    color: #000000 !important;
    border-color: #000000 !important;
}
.style-item.staff-border-stylist-hitomin-2 {
    border-color: #000000 !important;
}

/* --- 5. Hitomin-3 (緑: #14A32C) --- */
button.staff-btn-stylist-hitomin-3 {
    color: #14A32C !important;
    border-color: #14A32C !important;
}
.style-item.staff-border-stylist-hitomin-3 {
    border-color: #14A32C !important;
}

/* =========================================
   修正：アコーディオン展開時のレイアウト崩れ防止
   ========================================= */

/* 1. 元々のテーマが持っている「高さ固定」と「inline-flex」を強制解除 */
.zero-style-pc .style-category section,
.zero-style-sp .style-category-2 section, /* SP用も念のため */
.style-category section {
    display: flex !important;       /* inline-flexをやめてflexにする */
    height: auto !important;        /* 高さ13px固定を解除し、中身に合わせて伸びるようにする */
    flex-wrap: wrap !important;     /* 折り返しを許可する */
    align-items: center;
    width: 100% !important;
    margin-bottom: 10px !important; /* セクション間の余白確保 */
    position: static !important;    /* 変な重なり防止 */
}

/* 2. ボタンの下にアコーディオンを配置するための設定 */
.accordion-child-container {
    flex-basis: 100%;     /* 強制的に改行して1行使う */
    width: 100%;
    display: none;        /* 初期状態非表示 */
    flex-wrap: wrap;
    gap: 5px;
    padding: 0px;
    border-radius: 8px;
    margin-top: 0px;     /* 親ボタンとの隙間 */
    
    /* 確実に下の要素を押し下げるために */
    position: relative;
    z-index: 10;
}

/* 3. 親ボタン（年代別）の見た目調整 */
.filter-btn {
    white-space: nowrap;
    margin-bottom: 5px;   /* ボタン同士がくっつきすぎないように */
}

/* 4. アコーディオンが開いている時 */
.accordion-child-container[style*="display: flex"],
.accordion-child-container[style*="display: block"] {
    /* 開いたときに高さを確保する */
    height: auto !important;
}

.zero-style-pc .style-sex { gap: 10px; }
.zero-style-pc .style-length {gap: 10px; }
.zero-style-pc .style-other {gap: 10px; }
.zero-style-pc .style-menu {gap: 10px; }
.zero-style-pc .style-staff {gap: 10px; }

/* =========================================
   STYLE GALLERY: ページネーション (PC用)
   ========================================= */
.style-pagination {
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    width: 100%;
}

.pagination-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.pagination-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.pagination-btn.active {
    background: #333; /* 現在のページは黒 */
    color: #fff;
    border-color: #333;
    pointer-events: none; /* クリック不可にする */
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================
   STYLEページ(ID:455) 最終修正コード
   「絶対配置」を解除し、自然な積み重ねレイアウトに戻す
   ========================================= */

/* 1. ページ全体の大枠 */
html body.page-id-572 .zero-style-pc.style-gallery-wrapper {
    position: relative !important; /* 絶対配置を解除 */
    height: auto !important;       /* 高さを中身に合わせる */
    min-height: auto !important;
    width: 100% !important;
    max-width: 1440px !important;  /* 最大幅制限 */
    margin: 0 auto !important;     /* 中央揃え */
    padding-bottom: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 2. カテゴリボタンエリア（元々absoluteで浮いていたのを直す） */
html body.page-id-572 .style-category {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 90% !important;         /* 画面幅に合わせて調整 */
    max-width: 1100px !important;
    height: auto !important;
    margin: 40px auto 20px auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. ★最重要★ ギャラリーのコンテナ（ここが崩れの主犯） */
html body.page-id-572 .style-list-container {
    position: relative !important; /* absoluteを解除して流れに戻す */
    top: auto !important;
    left: auto !important;
    
    width: 90% !important;         /* 固定幅をやめてレスポンシブに */
    max-width: 1100px !important;
    
    height: auto !important;       /* 2130px固定を解除 */
    margin: 0 auto !important;     /* 中央配置 */
    
    display: block !important;
    overflow: visible !important;
}

/* 4. グリッドレイアウトの再定義 */
html body.page-id-572 .style-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3列 */
    gap: 30px !important;          /* 画像間の隙間 */
    width: 100% !important;
    height: auto !important;
    margin-bottom: 40px !important;
}

/* 5. 画像アイテムのスタイル（巨大化防止） */
html body.page-id-572 .style-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important; /* 縦長比率を維持 */
    position: relative !important;
    border-radius: 8px !important;
    
}

html body.page-id-572 .style-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 6. ページネーション（ギャラリーの直下に配置） */
html body.page-id-572 #pc-pagination {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 80px !important; /* フッターとの余白 */
    padding: 20px 0 !important;
    clear: both !important;
}

/* 7. フッター（一番下に配置） */
html body.page-id-572 footer.view-2 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    transform: none !important;
    z-index: 100 !important;
    clear: both !important;
}

/* 8. 親要素の制限解除（念の為） */
html body.page-id-572 .zero-sub-page {
    height: auto !important;
    overflow: visible !important;
}

/* =========================================
   STYLEページ(ID:455) デザイン調整
   ========================================= */

/* 1. 本体：背景色を指定して、影の上に重なるようにする */
html body.page-id-572 .zero-style-pc.style-gallery-wrapper {
    position: relative !important;
    background-color: #ffffff !important; /* 影が透けないように背景色を白に */
    z-index: 1 !important; /* 影より手前に表示 */
    box-shadow: none !important; /* 本体の影はオフ */
}

/* 2. 影専用の要素（擬似要素）を背面に配置 */
html body.page-id-572 .zero-style-pc.style-gallery-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    
    /* 上下を少し内側に引っ込めることで、上下の影を見えなくする */
    top: 0px !important;
    bottom: 0px !important;
    
    /* 左右はピッタリ合わせる */
    left: 0 !important;
    right: 0 !important;
    
    /* 影の指定（ご希望の値） */
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1) !important;
    
    /* 本体の後ろに隠す */
    z-index: -1 !important;
}

/* =========================================
   STYLEページ(ID:455) ヒーローエリアのSVG色変更
   Target Color: #EFF2F4 (薄い青グレー)
   ========================================= */
html body.page-id-572 .zero-style-pc .vector {
    /* 1. filterをリセットせず、色変換を適用 */
    /* brightness(0) saturate(100%) で一旦「黒」にします */
    /* その後、黒から #EFF2F4 に変換する値を適用します */
    filter: brightness(0) saturate(100%) invert(92%) sepia(6%) saturate(285%) hue-rotate(182deg) brightness(103%) contrast(92%) !important;

    /* 3. 表示を確実にする */
    opacity: 1 !important;
}

/* =========================================
   STYLE GALLERY: スマホ(SP)用調整
   ========================================= */
@media screen and (max-width: 767px) {
    /* グリッドを2列に変更 */
    .sp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* SP用フィルタモーダル */
    .sp-filter-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.98);
        z-index: 99999;
        padding: 60px 20px 20px 20px; /* 上に閉じるボタン用の余白 */
        overflow-y: auto;
    }
    
    .sp-filter-group {
        margin-bottom: 20px;
    }
    
    .sp-filter-buttons {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* 閉じるボタン */
    .sp-filter-close-btn {
        display: block;
        width: 100%;
        padding: 15px;
        background: #333;
        color: #fff;
        border: none;
        margin-top: 20px;
        font-size: 16px;
    }
}

.zero-style-pc.pc-only.style-gallery-wrapper{
    height: auto !important;      /* JSや固定指定を無視して自動伸縮 */
    min-height: auto !important;  /* 不要な最小高さ制限も解除 */
    overflow: visible !important; /* 中身がはみ出さないように見える状態にする */
    padding-bottom: 20px;         /* 一番下のボタンとフッターの間に余白を作る */
}

    /* =========================================
   STYLEページ(ID:455) SP版レスポンシブ修正 (決定版)
   ========================================= */
@media screen and (max-width: 767px) {

    /* 1. 全体の大枠：絶対配置を解除して積み重ねる */
    html body.page-id-572 .zero-style-sp,
    html body.page-id-572 .style-list-section-2 {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        width: 80% !important;
        padding: 0 0px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: flex !important;      /* 縦並びにする */
        flex-direction: column !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 2. ヒーロー画像エリア */
    html body.page-id-572 .style-mv-section-2 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 20px !important;
        top: auto !important;
        left: auto !important;
    }

    /* 3. カテゴリボタン等（既存の配置リセット） */
    html body.page-id-572 .style-category-2 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* 4. グリッド：1列表示に変更 */
    html body.page-id-572 #style-grid-sp,
    html body.page-id-572 .sp-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* ★1列表示★ */
        gap: 30px !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }

    /* 5. 画像アイテム */
    html body.page-id-572 .style-item {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
        position: relative !important;
        margin: 0 !important;
        border-radius: 8px !important;
        /* display: block !important; ←これは削除（JS動作のため） */
    }

    html body.page-id-572 .style-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 6. スマホ用ページネーション調整 */
    html body.page-id-572 #sp-pagination {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 80px !important; /* フッターとの余白 */
        padding: 20px 0 !important;
    }

    /* 7. フッター位置調整 */
    html body.page-id-572 footer.view-2 {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
        z-index: 10 !important;
    }

    /* =========================================
   SP用フィルタモーダル & トリガーボタン
   ========================================= */
    @media screen and (max-width: 767px) {
        
        /* 1. トリガーボタン（画像のデザイン再現） */
        .sp-filter-wrapper {
            margin: 20px 20px 30px;
        }
        
        .sp-category-btn {
            width: 100%;
            height: 50px;
            background: #ffffff;
            border: 1px solid #999;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            font-family: "Noto Sans JP", sans-serif;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            border-radius: 0; /* 角丸なし */
        }
        
        .sp-category-btn .arrow {
            font-size: 12px;
            transform: scaleY(0.8);
        }

/* 2. モーダル本体（画面全体を覆う黒背景） */
        .sp-filter-modal {
            display: none; 
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important; /* スマホのURLバー考慮 */
            background-color: rgba(0,0,0,0.5) !important;
            z-index: 99999 !important;
        }
        
        /* 白い箱（ど真ん中に固定し、高さを画面の85%に制限） */
        .modal-content {
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important; /* ど真ん中に固定 */
            width: 90% !important;
            max-height: 85vh !important;
            max-height: 85dvh !important;
            background: #fff !important;
            border-radius: 12px !important; /* 中央浮遊に合わせ角丸を統一 */
            display: flex !important;
            flex-direction: column !important; /* 縦並びのFlexbox */
            overflow: hidden !important;
            /* ※transformを破壊するため、slideUpアニメーションは削除しています */
        }

        /* ヘッダー（絶対に潰さない） */
        .modal-header {
            padding: 20px !important;
            border-bottom: 1px solid #eee !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            flex-shrink: 0 !important; /* 縮小を禁止 */
        }
        .modal-header h3 {
            margin: 0 !important;
            font-size: 16px !important;
            font-weight: bold !important;
        }
        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            padding: 0 10px;
        }

        /* 中身（残りの空間を埋め、はみ出たらスクロール） */
        .modal-body {
            flex-grow: 1 !important; /* 余った高さを全て使い切る */
            overflow-y: auto !important; /* はみ出たらスクロール */
            padding: 20px !important;
            -webkit-overflow-scrolling: touch !important;
            /* ※ここにmax-heightを書くと崩れるため書きません */
        }
        
        .sp-filter-group {
            margin-bottom: 30px;
        }
        .sp-filter-group h4 {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .sp-filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* チェックボックス風ボタン */
        .sp-check-btn {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 30px;
            background: #fff;
            font-size: 13px;
            color: #333;
            cursor: pointer;
            transition: all 0.2s;
        }
        .sp-check-btn.checked {
            background: #333;
            color: #fff;
            border-color: #333;
        }
        /* 担当カラー対応 */
        .sp-check-btn.checked[data-val*="chief"] { background: #80B1D2; border-color: #80B1D2; }
        .sp-check-btn.checked[data-val*="iku"] { background: #E9C865; border-color: #E9C865; }
        .sp-check-btn.checked[data-val*="hitomin-1"] { background: #F284B0; border-color: #F284B0; }
        .sp-check-btn.checked[data-val*="hitomin-3"] { background: #14A32C; border-color: #14A32C; }

        /* フッター（絶対に潰さない） */
        .modal-footer {
            padding: 20px !important;
            border-top: 1px solid #eee !important;
            background: #fff !important;
            flex-shrink: 0 !important; /* 縮小を禁止 */
        }
        .apply-btn {
            width: 100%;
            padding: 15px;
            background: #333;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        
        /* 既存のSP用カテゴリ（style-category-2）は非表示にする */
        .zero-style-sp .style-category-2 {
            display: none !important;
        }
        /* 1. ページ全体のコンテナ：高さを中身に合わせて自動化 */
        html body.page-id-572 .page-container {
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;       /* 固定高さを解除 */
            min-height: 100vh !important;  /* 最低でも画面の高さは確保 */
            overflow: visible !important;  /* はみ出しを表示 */
            padding-bottom: 0 !important;
        }

        /* 2. サブページの大枠：高さを自動化 */
        html body.page-id-572 .zero-sub-page {
            height: auto !important;
            min-height: auto !important;
            overflow: visible !important;
        }

        /* 3. スタイルページ（SP）のコンテナ：高さを自動化 */
        /* これが130pxなどで止まっていたのが原因の可能性大 */
        html body.page-id-572 .zero-style-sp.sp-only {
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;       /* ★最重要：中身に合わせて伸びろ */
            min-height: auto !important;
            position: relative !important;
            padding-bottom: 0px !important; /* 下に少し余白 */
            overflow: visible !important;
            width: 100% !important;
        }

        /* 4. ギャラリーラッパーの位置修正 */
        /* 上の要素に被らないように配置 */
        html body.page-id-572 .zero-style-sp.sp-only .style-gallery-wrapper {
            position: relative !important;
            top: auto !important;          /* 固定位置を解除 */
            left: auto !important;
            margin-top: 20px !important;   /* 上の要素との間隔 */
            height: auto !important;
            display: block !important;
        }
    }
    /* =========================================
   STYLEページ(ID:455) 最終配置修正
   クラス削除後のギャラリーエリア整形
   ========================================= */
    @media screen and (max-width: 767px) {

        /* 1. ギャラリーエリアの配置（クラス名変更に対応） */
        html body.page-id-572 .style-gallery-wrapper.sp-only {
            position: relative !important;
            display: block !important;
            width: 100% !important;
            height: auto !important;       /* 中身に合わせて伸びる */
            min-height: 0 !important;
            
            margin-top: 0 !important;      /* ヒーロー画像の下に吸着 */
            padding-top: 20px !important;
            
            top: auto !important;
            left: auto !important;
            z-index: 500 !important;
        }

        /* 2. 念の為、スペーサーの完全抹消（保険） */
        html body.page-id-572 .style-gallery-wrapper.sp-only::before {
            content: none !important;
            display: none !important;
        }

        /* 3. ページネーションの位置 */
        html body.page-id-572 #sp-pagination {
            position: relative !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            z-index: 10 !important;
        }
    }
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap");

/* ========================================
   Base Styles
   ======================================== */

.zero-recruit-pc {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #6b6a75;
  background-color: #ffffff;
  line-height: 1.6;
}

.zero-recruit-pc * {
  box-sizing: border-box;
}

.zero-recruit-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.message.zero-recruit-container {
  width: 53%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.zero-recruit-pc .vector{
	filter:brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
}

/* ========================================
   Hero Section
   ======================================== */

.zero-recruit-hero {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.zero-recruit-hero-visual {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.zero-recruit-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zero-recruit-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.zero-recruit-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.zero-recruit-hero-logo {
  position: absolute;
  top: -100px;
  right: 30px;
  width: 731px;
  height: auto;
  max-width: 50%;
  opacity:0.4;
}

.zero-recruit-hero-title {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 96px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 1.2;
  padding-left:150px;
}

.zero-recruit-hero-line {
  width: 874px;
  max-width: 100%;
  height: 2px;
  background-color: #ffffff;
}

/* ========================================
   Message Section
   ======================================== */

.zero-recruit-message {
  padding-top:117px;
  background-color: #ffffff;
}

.zero-recruit-message-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  color: #6b6a75;
  margin: 0;
  max-width: 738px;
  margin: 0 auto;
}

/* ========================================
   Assistant Section
   ======================================== */

.zero-recruit-assistant {
  position: relative;
  padding-top: 57px;
}

.zero-recruit-assistant-bg {
  position: absolute;
  top: 320px;
  left: 0;
  width: 100%;
  height: 410px;
  background-color: #eef1f3;
  z-index: 0;
}

.zero-recruit-assistant-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0px;
  margin-bottom: 165px;
}

.zero-recruit-assistant-left {
  flex: 0 0 auto;
  width: 734px;
  max-width: 50%;
}

.zero-recruit-assistant-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 70px;
}

.zero-recruit-assistant-right {
  flex: 1;
  padding-top: 40px;
}

.zero-recruit-section-header {
  margin-bottom: 100px;
  margin-top: 60px;
  position: relative;
  width:100%;
}

.zero-recruit-section-header-left {
  text-align: left;
}

.zero-recruit-section-title {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 86px;
  font-weight: 450;
  color: #CDD7DE;
  line-height: 1.2;
  text-align: left;
  padding-left:50px;
  padding-bottom:10px;
}

.zero-recruit-section-header-left .zero-recruit-section-title {
  text-align: left;
  margin-left: 137px;
}

.zero-recruit-section-line {
  position:absolute;
  right:0;
  width: 110%;
  max-width: 759px;
  height: 2px;
  background-color: #F7412A;
  margin: 0 0 0 auto;
  max-width: none !important;
}

.zero-recruit-section-header-left .zero-recruit-section-line {
  right: auto;
  left: 0;
  width:120%;
  z-index: 20;
}

.zero-recruit-assistant-card {
  background-color: #ffffff;
  border-radius: 30px;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 50px 40px;
  max-width: 464px;
  width:70%;
  margin-left:50px;
}

.zero-recruit-assistant-card-title-section{
  padding-left:60px
}

.zero-recruit-card-title {
  font-size: 16px;
  font-weight: 500;
  color: #6b6a75;
  margin: 0 0 30px 0;
  text-align: left;
  padding-left:50px;
}

.zero-recruit-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 2.4;
  color: #6b6a75;
}

.zero-recruit-card-list li {
  position: relative;
  padding-left: 70px;
}

.zero-recruit-card-list li::before {
  position: absolute;
  left: 0;
}

.zero-recruit-assistant-description {
  position: relative;
  z-index: 1;
  max-width: 909px;
  margin: 0 auto;
  width:65%;
  margin-top:0px;
}

.zero-recruit-description-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.8;
  text-align: left;
  color: #6b6a75;
  margin: 0;
}

/* ========================================
   Stylist Section
   ======================================== */

.zero-recruit-stylist {
  position: relative;
  padding: 80px 0 100px;
}

.zero-recruit-stylist-bg {
  position: absolute;
  top: 340px;
  left: 0;
  width: 100%;
  height: 397px;
  background-color: #eef1f3;
  z-index: 0;
}

.zero-recruit-stylist-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
}

.zero-recruit-stylist-left {
  flex: 1;
  padding-top: 30px;
}

.zero-recruit-stylist-card {
  background-color: #ffffff;
  border-radius: 30px;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 20px;
  max-width: 464px;
  margin-left:195px;
  margin-top:120px;
  width:70%;
}

.zero-recruit-stylist-card .zero-recruit-card-list {
  margin-bottom: 10px;
}

.zero-recruit-stylist-note {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  text-align: left;
  color: #6b6a75;
  margin: 0;
  margin-left:192px;
  margin-top:30px;
}

.zero-recruit-stylist-right {
  flex: 0 0 auto;
  width: 811px;
  max-width: 55%;
}

.zero-recruit-stylist-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   Contact Section
   ======================================== */

.zero-recruit-contact {
  padding: 160px 0 200px;
  background-color: #ffffff;
}

.zero-recruit-contact-inner {
  max-width: 532px;
  margin: 0 auto;
  text-align: center;
}

.zero-recruit-contact-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: #6b6a75;
  margin: 0 0 65px 0;
}

.zero-recruit-contact-box {
  background-color: #718694;
  padding: 30px 30px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
  gap: 12px;
  width:40%;
  margin: 0 auto;
}

.zero-recruit-contact-icon {
  width: 17px;
  height: auto;
  margin-bottom: 8px;
}

.zero-recruit-contact-phone {
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 2px;
  text-decoration: none;
  display: block;
  transition: opacity 0.3s ease;
}

.zero-recruit-contact-phone:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.zero-recruit-contact-phone:focus {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.zero-recruit-contact-hours {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 1.6px;
  margin: 0;
}

/* =========================================
   PC リクルートページ：コンタクトボックス修正
   ========================================= */
@media screen and (min-width: 769px) {
    .zero-recruit-contact-box {
        display: grid !important;
        grid-template-columns: auto auto !important; /* 左：アイコン、右：電話番号 */
        grid-template-rows: auto auto !important;    /* 上段、下段 */
        justify-content: center !important;          /* ボックス全体を中央寄せ */
        align-items: center !important;              /* 上下中央揃え */
        column-gap: 15px !important;                 /* アイコンと電話番号の隙間 */
        row-gap: 8px !important;                     /* 電話番号と営業時間の隙間 */
        width: 40% !important;
    }

    /* 1. アイコン（左上） */
    .zero-recruit-contact-icon {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
        display: block !important;
        /* アイコンが大きすぎる場合はここで width: 30px !important; 等で調整可能です */
    }

    /* 2. 電話番号（右上） */
    .zero-recruit-contact-phone {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        text-align: left !important;
        display: block !important;
        text-decoration: none !important;
    }

    /* 3. 営業時間（下段すべて） */
    .zero-recruit-contact-hours {
        grid-column: 1 / 3 !important; /* 横幅いっぱいに結合 */
        grid-row: 2 / 3 !important;
        text-align: center !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/*
 * SP用
 */
@media (max-width: 767px) {
	.zero-recruit-sp {
		padding-top:0px !important;
	}
	.zero-recruit-sp .recruit-contact-2 {
	  position: relative;
	  width: 100%;
	  height: 197px;
	}

	.zero-recruit-sp .rectangle-6 {
	  position: relative;
	  width: 100%;
	  height: 120px;
	  background-color: #718694;
      margin-top: 35px;
	}

	.zero-recruit-sp .recruit-contact-3 {
	  position: relative;
	  width: 190px;
	  height: 47px;
	}

	.zero-recruit-sp .OPEN-2 {
	  position: absolute;
	  top: 120%;
	  left: 54%;
	  width: 150px;
	  height: 12px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-family: "Noto Sans JP", Helvetica;
	  font-weight: 400;
	  color: #ffffff;
	  font-size: 16px;
	  text-align: right;
	  letter-spacing: 1.60px;
	  line-height: 38.4px;
	  white-space: nowrap;
	}

	.zero-recruit-sp .text-wrapper-11 {
	  position: absolute;
	  top: 50%;
	  left: 60%;
	  width: 154px;
	  font-family: "Noto Sans JP", Helvetica;
	  font-weight: 500;
	  color: #ffffff;
	  font-size: 20px;
	  letter-spacing: 2.00px;
	  line-height: 32px;
	  white-space: nowrap;
	}

	.zero-recruit-sp .image {
	  position: absolute;
	  width: 12.19%;
	  height: 58.85%;
	  top: 50%;
	  left: 42%;
	}

	.zero-recruit-sp .recruit-contact-4 {
	  position: relative;
	  top: 0;
	  left: 41px;
	  width: 296px;
	  height: 41px;
	  display: flex;
	  justify-content: center;
	  margin-top:76px;
	  margin-bottom:36px;
	}

	.zero-recruit-sp .text-wrapper-12 {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 294px;
	  height: 41px;
	  margin-left: -2px;
	  font-weight: 400;
	  text-align: center;
	  letter-spacing: 0;
	  line-height: 25.6px;
	  font-family: "Noto Sans JP", Helvetica;
	  color: #6b6a75;
	  font-size: 16px;
	}

	.zero-recruit-sp .recruit-stylist-4 {
	  position: relative;
	  left: 0;
	  width: 100%;
	  height: 418px;
      margin-top:0px;
	}

	.zero-recruit-sp .rectangle-7 {
	  position: absolute;
	  top: 80px;
	  left: 0;
	  width: 100%;
	  height: 340px;
	  background-color: #eef1f3;
	}

	.zero-recruit-sp .rectangle-8 {
	  position: absolute;
	  top: 210px;
	  left: 40px;
	  width: 295px;
	  height: 168px;
	  background-color: #ffffff;
	  border-radius: 15px;
	  box-shadow: 1px 4px 4px #00000040;
	}

	.zero-recruit-sp .recruit-stylist-5 {
	  position: absolute;
	  top: 141px;
	  left: 41px;
	  width: 296px;
	  height: 39px;
	  display: flex;
	}

	.zero-recruit-sp .text-wrapper-13 {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 294px;
	  height: 39px;
	  font-weight: 500;
	  letter-spacing: 0;
	  line-height: 25.6px;
	  font-family: "Noto Sans JP", Helvetica;
	  color: #6b6a75;
	  font-size: 16px;
	}

	.zero-recruit-sp .text-wrapper-14 {
	  position: absolute;
	  top: 250px;
	  left: calc(50.00% - 116px);
	  width: 230px;
	  height: 88px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-weight: 400;
	  letter-spacing: 0;
	  line-height: 38.4px;
	  font-family: "Noto Sans JP", Helvetica;
	  color: #6b6a75;
	  font-size: 16px;
	}

	.zero-recruit-sp .recruit-stylist-6 {
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 157px;
	  height: 117px;
	  z-index: 50;
	}

	.zero-recruit-sp .recruit-stylist-7 {
	  position: absolute;
	  top: 30px;
	  left: 0;
	  width: 337px;
	  height: 31px;
	  display: flex;
	  flex-direction: column;
	  gap: 9.5px;
	}

	.zero-recruit-sp .text-wrapper-15 {
	  margin-left: 40px;
	  display: flex;
	  align-items: center;
	  justify-content: left;
	  width: 295px;
	  height: 21px;
	  font-family: "Yu Mincho", Helvetica;
	  font-weight: 450;
	  color: #CDD7DE;
	  font-size: 32px;
	  letter-spacing: 0;
	  line-height: 240%;
	  white-space: nowrap;
	}

	.zero-recruit-sp .vector-3 {
	  width: 256px;
	  height: 1px;
	  object-fit: cover;
	}

	.zero-recruit-sp .recruit-assistant-7 {
	  position: relative;
	  left: 0;
	  width: 100%;
	  height: 636px;
	  margin-top:80px;
	}

	.zero-recruit-sp .recruit-assistant-8 {
	  position: absolute;
	  top: 491px;
	  left: 38px;
	  width: 297px;
	  height: 145px;
	  display: flex;
	  justify-content: center;
	}

	.zero-recruit-sp .text-wrapper-16 {
	  width: 295px;
	  height: 145px;
	  margin-left: -2px;
	  font-weight: 500;
	  letter-spacing: 1.60px;
	  line-height: 28.8px;
	  font-family: "Noto Sans JP", Helvetica;
	  color: #6b6a75;
	  font-size: 16px;
	}

	.zero-recruit-sp .recruit-assistant-9 {
	  position: absolute;
	  top: 97px;
	  left: 0;
	  width: 100%;
	  height: 314px;
	}

	.zero-recruit-sp .rectangle-9 {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 314px;
	  background-color: #eef1f3;
	}

	.zero-recruit-sp .rectangle-10 {
	  position: absolute;
	  top: 86px;
	  left: 40px;
	  width: 295px;
	  height: 188px;
	  background-color: #ffffff;
	  border-radius: 15px;
	  box-shadow: 1px 4px 4px #00000040;
	}

	.zero-recruit-sp .text-wrapper-17 {
	  position: absolute;
	  top: 130px;
	  left: calc(50.00% - 126px);
	  width: 247px;
	  height: 100px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-weight: 400;
	  letter-spacing: 0;
	  line-height: 28.8px;
	  font-family: "Noto Sans JP", Helvetica;
	  color: #6b6a75;
	  font-size: 16px;
	}

	.zero-recruit-sp .text-wrapper-18 {
	  position: absolute;
	  top: 44px;
	  left: 40px;
	  width: 295px;
	  height: 12px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-weight: 500;
	  text-align: center;
	  letter-spacing: 0;
	  line-height: 38.4px;
	  white-space: nowrap;
	  font-family: "Noto Sans JP", Helvetica;
	  color: #6b6a75;
	  font-size: 16px;
	}

	.zero-recruit-sp .recruit-assistant-10 {
	  position: absolute;
	  top: 47px;
	  right: 0;
	  width: 337px;
	  height: 31px;
	  display: flex;
	  flex-direction: column;
	  gap: 9.5px;
	}

	.zero-recruit-sp .text-wrapper-19 {
	  text-align: right;
	  display: flex;
	  align-items: center;
	  justify-content: right;
	  width: 295px;
	  height: 21px;
	  font-family: "Yu Mincho", Helvetica;
	  font-weight: 450;
	  color: #CDD7DE;
	  font-size: 32px;
	  letter-spacing: 0;
	  line-height: 240%;
	  white-space: nowrap;
	}

	.zero-recruit-sp .vector-4 {
	  margin-left: 79px;
	  width: 256px;
	  height: 1px;
	  object-fit: cover;
	}

	.zero-recruit-sp .recruit-assistant-11 {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 119px;
	  height: 118px;
      z-index: 50;
	}

	.zero-recruit-sp .recruit-mv-section-2 {
	  position: relative;
	  left: -20px;
	  width: 411px;
	  height: 411px;
	}

	.zero-recruit-sp .recruit-mv-section-3 {
	  position: absolute;
	  top: 288px;
	  left: 20vw;
	  width: 297px;
	  height: 123px;
	  display: flex;
	  justify-content: center;
      margin-top:30px;
      margin-bottom:30px;
	}

	.zero-recruit-sp .text-wrapper-20 {
	  width: 295px;
	  height: 123px;
	  margin-left: -2px;
	  font-weight: 500;
	  letter-spacing: 1.60px;
	  line-height: 25.6px;
	  font-family: "Noto Sans JP", Helvetica;
	  color: #6b6a75;
	  font-size: 16px;
	}

	.zero-recruit-sp .img-2 {
	  position: absolute;
	  top: 0;
	  left: 20px;
	  width: 100%;
	  height: 258px;
	}

	.zero-recruit-sp .text-wrapper-21 {
	  position: absolute;
	  top: 120px;
	  left: 62px;
	  width: 293px;
	  height: 33px;
	  display: flex;
	  align-items: center;
	  justify-content: left;
	  font-family: "Yu Mincho", Helvetica;
	  font-weight: 400;
	  color: #ffffff;
	  font-size: 32px;
	  letter-spacing: 0;
	  line-height: 76.8px;
	  white-space: nowrap;
	}

	.zero-recruit-sp .vector-5 {
	  position: absolute;
	  top: 162px;
	  left: 20px;
	  width: 336px;
	  height: 1px;
	  object-fit: cover;
	}

	.zero-recruit-sp .logo {
	  position: absolute;
	  top: 21px;
	  left: 151px;
	  width: 204px;
	  height: 99px;
	  object-fit: cover;
	}
}

/* =================================================================
   SINGLE BLOG PAGE FIX (Scoped to Theme Structure)
   ================================================================= */

/* 親テーマの影響をリセットし、ベースを作る */
.page-container .zero-sub-page .zero-blog-single-page {
    background-color: #ffffff; /* 白背景を強制 */
    width: 100%;
    position: relative;
    z-index: 10; /* 背景より手前に表示 */
    padding-top: 40px; /* ヘッダーとの隙間 */
    padding-bottom: 100px;
    color: #333; /* 文字色を強制的に黒系に */
}

/* =================================================================
   LAYOUT & CONTENT
   ================================================================= */

/* 共通コンテナ */
.zero-blog-single-page .blog-content-container {
    width: 100%;
    max-width: 1090px;
    margin: 0 auto; /* 中央寄せ */
    padding: 0 20px;
    display: flex; /* 横並びレイアウトの要 */
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

/* 左カラム：メイン記事エリア */
.zero-blog-single-page .blog-main-column {
    width: 100%;
    max-width: 712px;
    min-width: 0; /* Flexアイテムのはみ出し防止 */
}

/* 右カラム：サイドバー */
.zero-blog-single-page .blog-archive-sidebar {
    width: 100%;
    max-width: 354px;
    flex-shrink: 0; /* 縮小させない */
}


/* =================================================================
   ARTICLE STYLES (Specificity Boosted)
   ================================================================= */

/* 記事ラッパー */
.zero-blog-single-page .single-article {
    margin-bottom: 60px;
}

/* 日付 */
.zero-blog-single-page .article-meta-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    font-family: "Noto Sans JP", sans-serif;
}

/* タイトル */
.zero-blog-single-page .article-main-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: #26252e;
    margin: 0 0 30px 0;
    font-family: "Noto Sans JP", sans-serif;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    text-align: left; /* 親テーマのcenter強制を解除 */
}

/* アイキャッチ画像 */
.zero-blog-single-page .article-thumbnail {
    margin-bottom: 40px;
}
.zero-blog-single-page .article-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: block;
}

/* 本文エリア */
.zero-blog-single-page .article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 60px;
    text-align: left; /* 親テーマの影響解除 */
}
/* 本文内の要素 */
.zero-blog-single-page .article-content p { margin-bottom: 1.5em; }
.zero-blog-single-page .article-content img { max-width: 100%; height: auto; }


/* =================================================================
   SIDEBAR STYLES
   ================================================================= */
.zero-blog-single-page .sidebar-section {
    margin-bottom: 60px;
    text-align: left;
}

/* アーカイブ・最新記事見出し */
.zero-blog-single-page .archive-header {
    margin-bottom: 20px;
    position: relative;
}
.zero-blog-single-page .archive-title-en {
    font-size: 18px;
    color: #6b6a75;
    font-weight: bold;
    margin: 0;
}
.zero-blog-single-page .archive-title-jp {
    font-size: 12px;
    color: #999;
    display: block;
    margin-top: 5px;
}

/* 最新記事カード */
.zero-blog-single-page .new-posts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.zero-blog-single-page .new-post-card {
    display: flex;
    gap: 15px;
    text-decoration: none;
    align-items: flex-start;
}
.zero-blog-single-page .new-post-thumb {
    width: 100px;
    flex-shrink: 0;
}
.zero-blog-single-page .new-post-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
}
.zero-blog-single-page .new-post-info {
    display: flex;
    flex-direction: column;
}
.zero-blog-single-page .new-post-date {
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
}
.zero-blog-single-page .new-post-title {
    font-size: 14px;
    line-height: 1.4;
    color: #26252e;
    font-weight: 500;
}

/* =================================================================
   RESPONSIVE (SP)
   ================================================================= */
@media screen and (max-width: 768px) {
    /* コンテナを縦積みに */
    .zero-blog-single-page .blog-content-container {
        flex-direction: column;
        gap: 60px;
    }
    
    .zero-blog-single-page .blog-archive-sidebar {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }
}

/* =================================================================
   ★BLOG LAYOUT FINAL FIX (レイアウト崩れ・幅修正)
   ================================================================= */

/* 1. コンテナ：強制的に横並びを維持 */
body.single-post .blog-content-container,
.zero-blog-single-page .blog-content-container {
    display: flex !important;
    flex-direction: row !important; /* 横並び強制 */
    flex-wrap: nowrap !important;   /* 折り返し禁止 */
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 60px !important;
    width: 100% !important;
    max-width: 1090px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* 2. メインカラム（左）：幅を自動調整し、潰れないようにする */
body.single-post .blog-main-column,
.zero-blog-single-page .blog-main-column {
    flex: 1 1 auto !important; /* 余った幅を埋める設定 */
    width: auto !important;    /* 100%指定を解除 */
    max-width: 712px !important;
    min-width: 0 !important;   /* 最小幅0でFlexboxのバグ回避 */
}

/* 3. サイドバー（右）：幅を固定し、縮まないようにする */
body.single-post .blog-archive-sidebar,
.zero-blog-single-page .blog-archive-sidebar {
    flex: 0 0 354px !important; /* 354pxで固定・伸縮禁止 */
    width: 354px !important;
    max-width: 354px !important;
    margin-top: 0 !important;
    padding-left: 0 !important; /* 以前の記述ミスの影響をクリア */
    display: block !important;
}

/* 4. レスポンシブ（スマホ）：縦並びに戻す */
@media screen and (max-width: 768px) {
    body.single-post .blog-content-container,
    .zero-blog-single-page .blog-content-container {
        flex-direction: column !important;
        gap: 40px !important;
    }
    
    body.single-post .blog-main-column,
    .zero-blog-single-page .blog-main-column {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.single-post .blog-archive-sidebar,
    .zero-blog-single-page .blog-archive-sidebar {
        flex: 1 1 auto !important; /* 固定を解除 */
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =================================================================
   BLOG PAGE - SP STYLES (New)
   ================================================================= */
@media screen and (max-width: 767px) {
    
    /* コンテナ全体 */
    .zero-blog-sp {
        width: 100%;
        background-color: #ffffff;
        padding-bottom: 80px;
    }

    /* MVセクション */
    .zero-blog-sp .blog-mv-wrapper {
        position: relative;
        width: 100%;
        height: 250px; /* 画像に合わせて調整 */
        overflow: hidden;
    }
    .zero-blog-sp .blog-mv-section {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* MV内の文字 */
    .zero-blog-sp .text-wrapper-31 {
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
        font-family: "Yu Mincho-Demibold", serif;
        font-size: 40px;
        color: #ffffff;
        letter-spacing: 0.1em;
    }
    .zero-blog-sp .vector-13 {
        position: absolute;
        bottom: 100px;
        left: -3px;
        width: 80%;
    }

    /* コンテンツエリア */
    .zero-blog-sp .blog-content-container {
        padding: 40px 20px;
        width: 100%;
    }

    /* 記事グリッド (2列表示) */
    .zero-blog-sp .blog-post-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列 */
        gap: 15px; /* 記事間の隙間 */
        width: 100%;
    }

    /* 記事カード */
    .zero-blog-sp .blog-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #fff;
        /* 必要なら影など */
        /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
    }

    .zero-blog-sp .blog-card-thumb {
        width: 100%;
        aspect-ratio: 4 / 3; /* 画像比率 */
        overflow: hidden;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    
    .zero-blog-sp .blog-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .zero-blog-sp .blog-card-date {
        font-size: 11px;
        color: #6b6a75;
        display: block;
        margin-bottom: 5px;
        font-family: "Noto Sans JP", sans-serif;
    }

    .zero-blog-sp .blog-card-title {
        font-size: 13px;
        line-height: 1.5;
        color: #26252e;
        margin: 0;
        font-weight: 500;
        /* 3行で省略 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* サイドバー (アーカイブ) */
    .zero-blog-sp .sp-sidebar-wrapper {
        margin-top: 60px;
        padding-top: 40px;
        border-top: 1px solid #eee;
    }
    
    .zero-blog-sp .archive-header {
        margin-bottom: 20px;
    }
    .zero-blog-sp .archive-title-en {
        font-size: 16px;
        letter-spacing: 0.1em;
        color: #6b6a75;
        margin-bottom: 5px;
    }
    .zero-blog-sp .archive-title-jp {
        font-size: 12px;
        color: #999;
    }
    .zero-blog-sp .sp-only {
        position:relative !important;
    }
}

/* =================================================================
   ★SP SCROLL FIX: ブログ一覧(SP)のスクロールバグ修正
   ================================================================= */

@media screen and (max-width: 768px) {
    
    /* 1. コンテナの高さをJSに計算させず、中身に合わせて自動で伸ばす */
    /* ※インラインスタイルの height: 1374px などを強制上書きします */
    html body .zero-blog-sp,
    html body .zero-blog-sp.sp-only {
        height: auto !important;
        min-height: 100vh !important; /* 最低でも画面いっぱいは確保 */
        overflow: visible !important; /* はみ出しを許可（隠さない） */
    }

    /* 2. 親要素の「はみ出し禁止」設定を解除 */
    /* これが hidden だと、伸びた分がちょん切れてスクロールできません */
    html body .page-container,
    html body .zero-sub-page {
        overflow: visible !important;
        height: auto !important;
    }

    /* 3. フッターがコンテンツにめり込まないよう、クリアランスを確保 */
    /* フッターの上部に余白を持たせ、配置を確実にします */
    html body footer.view-2,
    html body .page-container > footer.view-2 {
        position: relative !important; /* 絶対配置を解除 */
        z-index: 100 !important;
        margin-top: 0 !important;
        clear: both !important;        /* 回り込み解除 */
        display: block !important;     /* しっかり箱として表示 */
    }
}

/* =================================================================
   ★SP SCROLL & LAYOUT FIX: ブログ一覧(SP)の表示バグ
   ================================================================= */

@media screen and (max-width: 768px) {
    
    /* 1. コンテナの配置を強制的に「通常フロー」に戻す */
    /* position: absolute が効いているとフッターと重なるため、relativeで解除 */
    html body .zero-blog-sp,
    html body .zero-blog-sp.sp-only {
        position: relative !important; /* ★最重要：絶対配置を解除 */
        height: auto !important;
        min-height: 100vh !important;
        width: 100% !important;        /* 幅を確保 */
        top: auto !important;
        left: auto !important;
        overflow: visible !important;
        display: block !important;
        z-index: 10 !important;        /* フッター(100)より下、背景より上 */
    }

    /* 2. 親要素の「はみ出し禁止」設定を解除 */
    html body .page-container,
    html body .zero-sub-page {
        overflow: visible !important;
        height: auto !important;
    }

    /* 3. フッターの配置確保 */
    html body footer.view-2,
    html body .page-container > footer.view-2 {
        position: relative !important;
        z-index: 100 !important;
        margin-top: 0 !important;
        clear: both !important;
        display: block !important;
    }
}

/* =================================================================
   ★投稿ページのスタイリング-PC
   ================================================================= */
@media screen and (min-width: 769px) {

    /* メインタイトル非表示 */
    .zero-blog-single-page .blog-content-container .article-main-title {
        display: none !important;
    }    

    /* H2 見出し */
    .zero-blog-single-page .article-content h2 {
        font-family: 'Noto Sans JP', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 180%;
        display: flex; /* 元のSP指定通り維持 */
        color: #718694;
        margin: 40px 0 20px; 
    }

    /* 本文 (Pタグ) */
    .zero-blog-single-page .article-content p {
        font-family: 'Noto Sans JP', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 180%;
        display: flex; /* 元のSP指定通り維持 */
        color: #6B6A75;
    }

    /* H3 見出し */
    .zero-blog-single-page .article-content h3 {
        font-family: 'Noto Sans JP', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 160%;
        color: #6B6A75;
        border-bottom: 2px solid #F7412A !important;
        margin-bottom: 10px;
        padding: 20px 15px 14px;
    }

    /* H4 見出し */
    .zero-blog-single-page .article-content h4 {
        padding: 20px 15px 14px;
        gap: 20px;
        background: #718694;
        font-family: 'Noto Sans JP', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 160%;
        color: #FFFFFF;
        margin-bottom: 10px;
    }

    /* H5 見出し */
    .zero-blog-single-page .article-content h5 {
        padding: 20px 10px 14px;
        font-family: 'Noto Sans JP', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 160%;
        color: #718694;
        border-bottom: 2px solid #718694 !important;
        margin-bottom: 10px;
    }
}

/* =================================================================
   ★投稿ページのスタイリング-SP
   ================================================================= */
@media screen and (max-width: 768px) {
    .zero-blog-single-page .blog-content-container .article-main-title {
        display:none;
    }    

    .zero-blog-single-page .article-content h2{
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 180%;
        display: flex;
        color: #718694;
        margin: 40px 0 20px; 
    }

    .zero-blog-single-page .article-content p{
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 180%;
        display: flex;
        color: #6B6A75;
    }

    .zero-blog-single-page .article-content h3{
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 160%;
        align-items: center;
        color: #6B6A75;
        border-bottom: 2px solid #F7412A !important;
        margin-bottom:10px;
        padding: 20px 15px 14px;
    }

    .zero-blog-single-page .article-content h4{
        padding: 20px 15px 14px;
        gap: 20px;
        background: #718694;
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 160%;
        align-items: center;
        color: #FFFFFF;
        margin-bottom:10px;
    }

    .zero-blog-single-page .article-content h5{
        padding: 20px 10px 14px;
        font-family: 'Noto Sans JP';
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 160%;
        align-items: center;

        color: #718694;
        border-bottom: 2px solid #718694 !important;
        margin-bottom:10px;
        padding: 20px 15px 14px;
    }
}

/* =================================================================
   ★MODERN NAVIGATION BUTTONS (Zero Theme Style)
   ================================================================= */

/* 1. コンテナ：PCでは左・中・右に均等配置 */
body.single .post-navigation {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr; /* 左・中央・右の3カラム */
    align-items: center;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 60px 0 0 !important;
    padding: 40px 0 0 !important;
    border-top: 1px solid #eee; /* 上に区切り線 */
}

/* 2. 各エリアの配置指定 */
body.single .nav-prev { justify-self: start; }
body.single .nav-link { justify-self: center; }
body.single .nav-next { justify-self: end; }

/* 3. ボタン共通デザイン（ピル型・ゴーストボタン） */
body.single .post-navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;           /* 高さ固定で押しやすく */
    padding: 0 32px;        /* 横幅にゆとりを持たせる */
    background-color: #fff;
    border: 1px solid #ddd; /* 薄いグレーの枠線 */
    border-radius: 50px;    /* 丸みを帯びたピル型 */
    
    /* フォント設定 */
    color: #6b6a75;         /* サイト共通グレー */
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.05em;
    white-space: nowrap;    /* 改行禁止 */
    
    /* アニメーション */
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* 4. 真ん中（一覧へ戻る）だけ少し強調 */
body.single .post-navigation .nav-link a {
    border-color: #b0b0b0;  /* 枠線を少し濃く */
    min-width: 160px;       /* 最低幅を確保 */
}

/* 5. ホバー時の動き（サイトカラーに反転＋浮き上がり） */
body.single .post-navigation a:hover {
    background-color: #6b6a75; /* 背景をグレーに */
    color: #ffffff;            /* 文字を白に */
    border-color: #6b6a75;
    transform: translateY(-3px); /* ふわっと浮く */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* 影を落とす */
    opacity: 1; /* 既存のhover opacityを打ち消し */
}

/* 6. 空の要素（次の記事がない場合など）の崩れ防止 */
body.single .post-navigation div:empty {
    display: block; /* 空間だけ確保してレイアウトを維持 */
}

/* --------------------------------------------------
   スマホ対応 (768px以下)
   -------------------------------------------------- */
@media screen and (max-width: 768px) {
    body.single .post-navigation {
        display: flex !important;
        flex-direction: column; /* 縦積みに変更 */
        gap: 15px;
        padding-top: 30px !important;
    }

    /* 各ラッパーを幅いっぱいに */
    body.single .nav-prev,
    body.single .nav-link,
    body.single .nav-next {
        width: 100%;
        justify-self: auto; /* 配置リセット */
    }

    /* ボタンを幅いっぱいにして押しやすく */
    body.single .post-navigation a {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 並び順の調整（必要であれば） */
    /* 通常は「前へ」→「一覧」→「次へ」の順で並びます */
}

/* =================================================================
   ★ANIMATION STYLES (Slide In Added)
   左右のスライドインを追加しました
   ================================================================= */

.animate-fade-up, .animate-fade-in, .animate-slide-left, .animate-slide-right {
    opacity: 0;
    /* transition の 0.8s を短くすると「鋭く」、長くすると「重厚」になります */
    /* cubic-bezier は「最初はゆっくり、後半は急激に」動かす魔法の数字です */
    transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform; /* ブラウザの負荷軽減 */
}

/* 各アニメーションの「溜め」を作る（移動距離を大きくする） */
.animate-fade-up { transform: translateY(120px); }    /* 20px → 80px に強化 */
.animate-slide-left { transform: translateX(-100px); } /* 距離を 100px に強化 */
.animate-slide-right { transform: translateX(100px); }

/* 発火時：共通 */
.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* =================================================================
   ★ANIMATION STYLES (Mobile Optimized)
   スマホ用に移動距離を調整し、横揺れを防止します
   ================================================================= */

@media screen and (max-width: 768px) {
    /* 移動距離をスマホの画面幅に合わせてスケールダウン */
    .animate-fade-up { 
        transform: translateY(60px); 
    }
    
    .animate-slide-left { 
        transform: translateX(-50px); /* 100pxだと画面外に飛び出しすぎるため */
    }
    
    .animate-slide-right { 
        transform: translateX(50px); 
    }

    /* 実行時の時間はPC版(0.8s)を継承し、滑らかさを維持 */
    .animate-fade-up, 
    .animate-fade-in, 
    .animate-slide-left, 
    .animate-slide-right {
        /* 必要に応じてスマホだけ少し速く(0.6s)しても「鋭さ」が出て良いです */
        transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1), 
                    transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* =================================================================
   ★SAFE HEADER FOLLOW (レイアウト非破壊・追従のみ)
   ================================================================= */

/* PC表示時のみ適用 */
@media screen and (min-width: 768px) {

    /* 1. スクロール時、ヘッダーを「固定(fixed)」に切り替え 
      ※ width: 1237px を維持しつつ、画面中央(left: 50%)に配置します
    */
    body.is-scrolled .view-6,
    body.is-scrolled header.view-6 {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* 画面ど真ん中に配置 */
        
        width: 1237px !important;
        max-width: 1237px !important;
        margin: 0 !important;
        padding: 0 !important;
        
        z-index: 999999 !important;
        
        /* 本体は透明のまま（背景は下の::beforeで作る） */
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        
        /* 上から降りてくるアニメーション */
        animation: safeHeaderSlideDown 0.6s ease forwards !important;
    }

    /* 2. 画面全幅の白背景を作る（擬似要素）
      ※ ヘッダー本体からはみ出して、画面の端から端まで白くします
    */
    body.is-scrolled .view-6::before,
    body.is-scrolled header.view-6::before {
        content: "";
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* 親の中心に合わせる */
        
        /* 画面幅より大きく取って全幅をカバー */
        width: 100vw !important; 
        height: 100% !important;
        
        background-color: rgba(255, 255, 255, 0.98) !important; /* 白背景 */
        box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;      /* 影 */
        
        z-index: -1 !important; /* 文字の下に敷く */
        pointer-events: none;
    }

    /* アニメーション定義 */
    @keyframes safeHeaderSlideDown {
        0% { top: -150px; }
        100% { top: 0; }
    }
}

/* =================================================================
   ★HEADER FIXED FINAL (TOP & SUB PAGE SUPPORT)
   レイアウトを崩さずに、TOPとサブページ両方のヘッダーを追従させます
   ================================================================= */
@media screen and (min-width: 768px) {

    /* -------------------------------------------------------
       1. TOPページ用 (.view-6直下)
       ------------------------------------------------------- */
    html body.is-scrolled > .view-6,
    html body.is-scrolled > header.view-6 {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        width: 1237px !important;
        max-width: 1237px !important;
        margin: 0 !important;
        
        z-index: 999999 !important;
        background: transparent !important;
        
        animation: safeHeaderSlideDown 0.6s ease forwards !important;
    }

    /* TOPページ用：背景の白い帯 */
    html body.is-scrolled > .view-6::before,
    html body.is-scrolled > header.view-6::before {
        content: "";
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100vw !important; 
        height: 100% !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
        z-index: -1 !important;
        pointer-events: none;
    }

    /* -------------------------------------------------------
       2. サブページ用 (.page-containerの中にある場合)
       ※ここが以前のコードで足りていなかった部分です
       ------------------------------------------------------- */
    
    /* サブページヘッダー固定化 */
    /* セレクタを長くして、既存のrelative指定に打ち勝ちます */
    html body.is-scrolled .page-container .zero-sub-page .view-6,
    html body.is-scrolled .page-container .zero-sub-page header.view-6 {
        position: fixed !important; /* relativeを上書きして固定 */
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        width: 1237px !important;
        max-width: 1237px !important;
        margin: 0 !important;
        
        background: transparent !important; /* 本体は透明 */
        box-shadow: none !important;
        z-index: 999999 !important;
        
        animation: safeHeaderSlideDown 0.6s ease forwards !important;
    }

    /* サブページ用：背景の白い帯 */
    html body.is-scrolled .page-container .zero-sub-page .view-6::before,
    html body.is-scrolled .page-container .zero-sub-page header.view-6::before {
        content: "";
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100vw !important; /* 画面幅いっぱい */
        height: 100% !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
        z-index: -1 !important;
        pointer-events: none;
    }

    /* ★重要：サブページのガタつき防止 */
    /* ヘッダーが浮いた分、コンテンツを下にずらして埋め合わせる */
    html body.is-scrolled .zero-sub-page {
        padding-top: 122px !important; /* ヘッダーの高さ */
    }

    /* アニメーション定義 */
    @keyframes safeHeaderSlideDown {
        0% { top: -150px; }
        100% { top: 0; }
    }
}

/* =================================================================
   ★HEADER FIXED FINAL v2 (Transformを使わない中央揃え)
   背景を確実に画面全幅にするため、配置方法を根本から変更します
   ================================================================= */
@media screen and (min-width: 768px) {

    /* 1. 追従ヘッダー本体の設定 */
    /* TOPページ、サブページ共通 */
    html body.is-scrolled .page-container .zero-sub-page .view-6,
    html body.is-scrolled .page-container .zero-sub-page header.view-6,
    html body.is-scrolled > .view-6,
    html body.is-scrolled > header.view-6 {
        position: fixed !important;
        top: 0 !important;
        
        /* ★変更点：transformをやめて、marginで中央に置く */
        /* これにより子要素のfixedが「画面」を基準にできるようになります */
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        
        width: 1237px !important;
        max-width: 1237px !important;
        
        background: transparent !important;
        box-shadow: none !important;
        z-index: 999999 !important;
        
        animation: safeHeaderSlideDown 0.6s ease forwards !important;
    }

    /* 2. 背景の白い帯 (画面全幅) */
    html body.is-scrolled .page-container .zero-sub-page .view-6::before,
    html body.is-scrolled .page-container .zero-sub-page header.view-6::before,
    html body.is-scrolled > .view-6::before,
    html body.is-scrolled > header.view-6::before {
        content: "";
        display: block !important;
        
        /* ★画面全体を基準に固定配置 */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        
        width: 100% !important;   /* 画面幅いっぱい */
        height: 122px !important; /* ヘッダーの高さ */
        
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
        
        z-index: -1 !important; /* 文字の下 */
        pointer-events: none;
        transform: none !important;
    }
    
    /* 3. サブページのガタつき防止（埋め合わせ） */
    html body.is-scrolled .zero-sub-page {
        padding-top: 122px !important;
    }

    /* アニメーション定義 */
    @keyframes safeHeaderSlideDown {
        0% { top: -150px; }
        100% { top: 0; }
    }
}

@media screen and (max-width: 768px) {
    .zero-PCTOP .mask-group-13 {
        display: none !important;
    }
    .zero-PCTOP .style-item {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .blog-section-under-line {
        position:absolute;
        right:0;
        width:70%;
        height:2px;
        background-color:#F7412A;
        margin:0 0 0 auto;
        max-width: none !important;
        top: 137px;
        z-index:20;
    }
}

@media screen and (min-width: 769px) {
    /* 画像を囲む箱の設定 */
    .style-item-wrap {
        position: relative; /* 文字の基準点 */
        
        /* ▼重要：箱が潰れないようにする設定 */
        display: block; 
        width: max-content; /* 中身の画像サイズに合わせて箱を広げる */
        max-width: 100%;    /* 親要素からはみ出さない */
        height: auto;
        
        overflow: hidden; /* はみ出し防止 */
        cursor: default;
        margin: 0 auto; /* 必要に応じて中央寄せ */
    }

    /* 画像自体の設定 */
    .style-item-wrap img {
        display: block; /* 画像下の隙間を消す */
        width: 100%;    /* 箱いっぱいに広げる */
        height: auto;   /* 高さは自動維持 */
        transition: filter 0.3s ease;
    }

    /* ▼「View」の文字設定 */
    .style-item-wrap::after {
        content: "View";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        color: #fff;
        font-family: "Yu Mincho", serif;
        font-size: 18px;
        letter-spacing: 0.1em;
        font-weight: 500;
        
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 2;
    }

    /* ▼ ホバー時の動き */
    .style-item-wrap:hover img {
        filter: brightness(0.6);
    }
    
    .style-item-wrap:hover::after {
        opacity: 1;
    }
    /* 画像を囲む箱（div）の設定 */
    .style-item-wrap {
        /* 1. 強制的に正円の枠を作る */
        border-radius: 50% !important; /* 完全に丸く */
        overflow: hidden !important;   /* はみ出た部分をカット */
        
        /* 2. どんな画像が来ても「正方形」の枠を維持する */
        aspect-ratio: 1 / 1 !important; 
        /* ※ width や height の指定が他にあっても、これで正方形が優先されます */
    }

    /* 中の画像の設定 */
    .style-item-wrap img {
        /* 3. 枠に合わせて歪まずにトリミングする */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* これが重要：枠いっぱいに綺麗に埋めます */
        
        /* 画像自体の角丸はリセット（親の枠で切り抜くため） */
        border-radius: 0 !important; 
    }
}

/* =========================================
   PC版 STYLEスライダー設定 (不具合修正版)
   ========================================= */
@media screen and (min-width: 769px) {
    
    /* コンテナの設定 */
    #styleScrollContainer.slick-initialized {
        display: block !important;
        overflow: visible !important;
        padding: 0;
        width: 100%;
        max-width: 100% !important;
        margin: 0 auto;
        opacity: 1 !important;
        visibility: visible !important;
        
        top: 250px;
        z-index: 50;
    }

    #styleScrollContainer .slick-slide,
    #styleScrollContainer .slick-cloned {
        padding: 0;
        box-sizing: border-box;
        z-index: 50 !important;
        position: relative !important;
    }

    #styleScrollContainer .slick-track {

    }

    /* ▼▼▼ 画像ラッパー（箱）の設定 ▼▼▼ */
    #styleScrollContainer .style-item-wrap,
    #styleScrollContainer .mask-group-1, #styleScrollContainer .mask-group-2,
    #styleScrollContainer .mask-group-3, #styleScrollContainer .mask-group-4,
    #styleScrollContainer .mask-group-5, #styleScrollContainer .mask-group-6,
    #styleScrollContainer .mask-group-7, #styleScrollContainer .mask-group-8,
    #styleScrollContainer .mask-group-9 {
        
        /* ★ここに安全装置を追加！ */
        /* JSが動く前でも、画面の約1/5（5枚並び想定）のサイズにしておく */
        width: 19vw !important; 
        max-width: 300px !important; /* ついでに最大サイズ制限も保険でかけておく */

        position: relative !important; 
        top: auto !important; left: auto !important;
        transform: none !important;
        
        display: block !important;
        aspect-ratio: 1 / 1 !important; 
        height: auto !important;
        
        margin: 0 !important;
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
        
        border-radius: 50% !important; 
        overflow: hidden !important;
        
        box-shadow: none !important;
        outline: none;
    }

    /* 中の画像の設定 */
    #styleScrollContainer .style-item-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        position: static !important;
    }

    /* ホバー時の挙動 */
    #styleScrollContainer .style-item-wrap:hover img {
        transition: filter 0.3s ease, transform 0.3s ease !important;
        filter: brightness(0.6);
        transform: scale(1.1) !important;
    }

    /* 矢印（白）のデザイン */
    .slide-arrow {
        position: absolute;
        top: auto;
        bottom: -60px;
        width: 50px;
        height: 50px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 100;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s;
    }
    .slide-arrow:hover {
        opacity: 0.6;
    }
    .prev-arrow {
        left: 25%;
        transform: rotate(180deg);
    }
    .next-arrow {
        right: 25%;
    }
    .slide-arrow svg {
        width: 25px;
        height: auto;
        filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
    }
    .slide-arrow svg path {
        fill: #FFF !important;
    }

    /* プログレスバー */
    .slider-progress-container {
        display: block;
        width: 100%;
        max-width: 600px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        border-radius: 2px;
        z-index: 50;
        top: 250px;
        transform: translateY(20px); 
    }
    .slider-progress-bar {
        display: block;
        height: 100%;
        background-color: #FFF;
        box-shadow: 0 0 4px rgba(0,0,0,0.2);
        position: absolute;
        top: 0;
        left: 0;
        transition: left 0.3s ease, width 0.3s ease;
    }
}

/* =========================================
   読み込み直後の「縦並び」防止用スタイル
   ========================================= */
/* スライダーが準備完了(slick-initialized)する前の状態を指定 */
#styleScrollContainer:not(.slick-initialized) {
    display: flex !important;   /* 強制的に横並び */
    overflow: hidden !important;/* はみ出た分は隠す */
    width: 100%;
    gap: 0;
}

/* 準備前の画像の設定 */
#styleScrollContainer:not(.slick-initialized) .style-item-wrap {
    flex-shrink: 0; /* 潰れないようにする */
    width: 20%;     /* 画面の1/5 (5枚表示想定なので) */
}

/* =========================================
   スマホ版 STYLEスライダー (完全1枚中央・同期版)
   ========================================= */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    /* 1. スライダー全体の余白を完全にゼロにする（開始地点の固定） */
    #styleScrollContainer .slick-list {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. 外箱を「画面幅」に厳密に一致させる（移動距離の固定） */
    #styleScrollContainer .slick-slide,
    #styleScrollContainer .slick-cloned {
        width: 240px !important; /* 1スライド = 1画面幅 */
        padding: 0 !important;
        margin: 0 !important;
        float: left !important;
        display: block !important;
        text-align: center !important; /* 中身の画像を中央へ */
        visibility: visible !important;
    }

    #styleScrollContainer .slick-track {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* flexが残っていると1枚目がズレるので解除 */
        /*相対的に位置をずらしたい場合は margin-left を使います */
        margin-left: 0px !important; /* ここに -20px や 20px を入れて微調整 */
    }

    /* 3. 画像の箱（サイズ固定・マージン中央） */
    #styleScrollContainer .style-item-wrap,
    #styleScrollContainer .style-item-wrap[class*="mask-group-"] {
        display: inline-block !important; /* 中央配置用 */
        
        /* 画像サイズを 240px に固定 */
        width: 240px !important; 
        height: 240px !important;
               
        border-radius: 50% !important;
        overflow: hidden !important;
        position: relative !important;
        
        /* Slickのデフォルトスタイルや以前の干渉を徹底リセット */
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin:0 5px !important;

        float:none !important;
    }

    /* 4. 画像本体 */
    #styleScrollContainer .style-item-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 5. プログレスバー（位置と色を再定義） */
    .slider-progress-container {
        display: block !important;
        width: 80% !important;
        max-width: 300px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.1) !important;
        margin: 30px auto 0 auto !important;
        border-radius: 2px;
        position: relative !important;
        top: 320px !important;
        transform: none !important;
    }
    .slider-progress-bar {
        background-color: #FFF !important; /* 白いバーを確実に出す */
        height:2px;
        display: block !important;
        position:absolute !important;
    }
    
    #styleScrollContainer {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

/* =========================================
   スマホ版修正：HTML変更に伴うスタイル調整
   ========================================= */
@media screen and (max-width: 768px) {
    /* コンテナの設定（念のため横スクロールを維持） */
    #styleScrollContainer {
        display: flex !important;
        overflow-x: auto !important;
        gap: 15px; /* 画像間の隙間 */
        padding: 0 20px 20px 20px; /* 横の余白と下のスクロールバー余白 */
    }

    /* 画像を囲む箱（div）の設定 */
    .style-item-wrap {
        /* PC用の「絶対配置」を強制解除して、素直に横に並ばせる */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;

        /* スマホでのサイズ設定 */
        width: 60vw !important; /* 画面幅の60%くらいの大きさ（お好みで調整） */
        max-width: 280px;       /* 大きくなりすぎないように */
        height: auto !important;
        flex-shrink: 0;         /* 潰れないようにする */
        
        /* スマホでは「View」の文字や暗くなる演出は邪魔なので消す */
        pointer-events: none; 
    }

    /* 画像の設定 */
    .style-item-wrap img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 12px; /* 少し角丸にするとスマホっぽいです */
    }

    /* スマホでは「View」文字を非表示 */
    .style-item-wrap::after {
        display: none !important;
    }
    /* 画像を囲む枠を強制的に丸くして、はみ出しをカット */
    .style-item-wrap {
        border-radius: 50% !important; /* 真ん丸にする */
        overflow: hidden !important;   /* 丸からはみ出た画像をカット */
        
        /* 正方形を維持するための設定（もし楕円になる場合はここを調整） */
        aspect-ratio: 1 / 1 !important; 
    }

    /* 中の画像の角丸はリセット（親の枠に合わせるため） */
    .style-item-wrap img {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 枠いっぱいに綺麗に埋める */
    }
}

.zero-sub-page .text-wrapper-18 { 
    position: static; 
    font-family: "Noto Sans JP", Helvetica; 
    font-weight: 500; 
    color: #6b6a75; 
    font-size: 20px; 
    letter-spacing: 2.00px; 
    line-height: 32px; 
    white-space: nowrap; 
}

@media screen and (min-width: 769px) {
    .zero-PCTOP .text-wrapper-16 {
        color: #FFFFFF !important;
        left: 113px !important;
    }
    .zero-PCTOP .text-wrapper-20{
        left:60px !important;
    }
    .zero-PCTOP .text-wrapper-48 {
        left:425px !important;
        top:60px !important;
    }
    .zero-PCTOP .mask-group-16 {
        left:0px;
        width:345px;
    }
    .zero-PCTOP .mask-group-17 {
        left:366.5px;
        width:345px;
    }
    .zero-PCTOP .mask-group-18 {
        left:736px;
        width:344px;
    }

}

/* =========================================
   RESERVE/CONTACT セクション (共通)
   ========================================= */
.zero-reserve-section {
    width: 100%;
    padding: 0px 20px; /* 上下の余白 */
    background-color: #fff; /* 背景色 */
    text-align: center;
    box-sizing: border-box;
    padding-top:239px;
    padding-bottom:120px;
}

/* タイトルエリア */
.zero-reserve-title {
    font-family: "Yu Mincho", serif;
    font-size: 64px !important;
    color: #CDD7DE !important;
    margin-bottom: 15px !important;
    font-weight: 450 !important;
    line-height: 120% !important;
    align-items: center !important;
    text-align: center !important;
}

.zero-reserve-subtitle {
    font-size: 24px;
    color: #6B6A75;
    margin-bottom: 100px; /* ボタンとの距離 */
}

/* ボタンコンテナ（PC用レイアウト：横並び） */
.zero-reserve-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* ボタン間の隙間 */
    max-width: 1000px;
    margin: 0 auto;
}

/* ボタン共通スタイル */
.zero-reserve-btn {
    display: flex;
    flex-direction: column; /* 文字を縦に積む */
    justify-content: center;
    align-items: center;
    width: 300px; /* ボタン幅 */
    height: 90px; /* ボタン高さ */
    background-color: #718694;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    
}

.zero-reserve-btn:hover {
    opacity: 0.9;
    transform: translateY(2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ボタン内の文字 */
.btn-sub-text {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.2;
    font-family: 'Noto Sans JP';
    letter-spacing: 0.1em;
}

.btn-main-text {
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1.2;
    font-family: 'Noto Sans JP';
    font-weight: 400;
}

/* 電話ボタン専用スタイル（横並びにする） */
.btn-type-phone {
    flex-direction: row; /* アイコンと文字を横並びに */
    gap: 15px;
}
.btn-type-phone .phone-num {
    font-size: 24px; /* 電話番号は少し小さめに調整 */
}

/* 電話アイコン画像 */
.reserve-phone-icon {
    width: 24px;
    height: auto;
}

/* =========================================
   SP用スタイル (スマホ表示：縦並び)
   ========================================= */
@media screen and (max-width: 768px) {
    .zero-reserve-section {
        padding: 0px 20px !important;
        padding-bottom: 100px !important;
    }

    .zero-reserve-title {
        font-size: 24px !important;
        font-weight: 600 !important;
    }

    .zero-reserve-subtitle {
        font-size: 16px !important;
        margin-bottom: 40px !important;
        font-weight: 400 !important;
    }

    .zero-reserve-container {
        flex-direction: column !important; /* 縦積みに変更 */
        align-items: center !important;
        gap: 15px !important;
    }

    .zero-reserve-btn {
        width: 90% !important;       /* 横幅いっぱい */
        max-width: 340px !important;  /* ただし広がりすぎないように制限 */
        height: 80px !important;      /* スマホは少し高さを抑える */
    }
}

/* ========================================
　　ヘッダー微調整
   ======================================== */
@media screen and (min-width: 769px) {
    .zero-PCTOP .navbar,
    body .page-container .zero-sub-page .view-6 .navbar {
        left:250px !important;
    }
    .zero-PCTOP .text-wrapper-19,
    body .page-container .zero-sub-page .view-6 .navbar a {
        width: 100px !important;
        font-weight:450 !important;
        font-size:16px !important;
    }
}

@media screen and (max-width: 768px) {
    .sp-only.sp-header-right{
        right:55px !important;
        top:20px !important;
        height:60% !important;
    }
    .sp-h-btn.phone{
        border-left:1px solid #6B6A75 !important;
        width:85px;
    }
    .header-tel-icon{
        filter: brightness(0) saturate(100%) invert(46%) sepia(8%) saturate(884%) hue-rotate(201deg) brightness(93%) contrast(86%);
        width:25%;
    }
    .sp-h-btn span{
        font-size:8px !important;
        color:#6B6A75 !important;
    }
    .reserve.sp-h-btn span{
        color:#FFFFFF !important;
    }
    .view-6 .studio,
    body .page-container .zero-sub-page .view-6 .studio{
        margin-left:25px;
        margin-top:25px;
    }
    body .page-container .zero-sub-page .view-6 .studio{
        position:relative !important;
        top:20px !important;
        left: 25px !important;
    }
    html body .view-6, html body header.view-6{
        height:84px !important;
    }
    .sp-header-right{
        width:160px !important;
    }
}

img.mask-group-12:hover,
img.mask-group-10:hover,
img.mask-group-11:hover,
img.mask-group-15:hover,
img.mask-group-14:hover,
img.mask-group-16:hover,
img.mask-group-17:hover,
img.mask-group-18:hover,
img.mask-group:hover {
    filter: brightness(0.6);
}

/* =========================================
   アニメーション遅延専用クラス
   ========================================= */

/* 0.2秒遅延 */
.delay-1 {
    transition-delay: 0.2s !important;
}

/* 0.4秒遅延 */
.delay-2 {
    transition-delay: 0.4s !important;
}

/* 0.6秒遅延 */
.delay-3 {
    transition-delay: 0.6s !important;
}

/* 0.8秒遅延 */
.delay-4 {
    transition-delay: 0.8s !important;
}

@media screen and (max-width: 768px) {
    /* 1. 動画を囲む親要素があれば、そこに固定用の高さを設定（なければbody直下でも可） */
    /* 動画自体を画面いっぱいに固定し、その場に留まらせる */
    .sp-fv-bg.sp-only {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover; /* 画面いっぱいに広げる */
        z-index: 1 !important; /* 動画を一番下に配置 */
    }

    /* 2. 動画の直後に来るメインコンテンツ（せり上がってくる部分） */
    /* コンテンツの開始位置を調整し、動画の上に重ねる */
    #page-container, 
    .main-content, 
    header + div { 
        position: relative !important;
        z-index: 10 !important; /* 動画（z-index: 1）の上に重ねる */
        background: #fff; /* 重なった時に動画が透けないよう背景色を指定 */
        margin-top: 0; /* 必要に応じて調整 */
    }
}

.style-hero .logo,
.zero-blog-pc .logo,
.zero-recruit-hero-logo,
.mv-logo {
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1))
            drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.8));
    opacity:0.6 !important;
}

@media screen and (max-width: 768px) {
    .menu-mv-section-sp .element-12,
    .zero-recruit-sp .logo,
    .zero-style-sp .logo-2,
    .zero-blog-sp .logo {
        filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1))
                drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.8));
        opacity:0.6 !important;
    }

    .zero-blog-sp .logo {
        position: absolute;
        top: 25px;
        left: 130px;
        width: 204px;
        height: 99px;
        object-fit: cover;
    }
}
@media screen and (max-width: 768px) {
    /* 1. モーダル全体（黒い背景）を画面に完全固定 */
    .sp-filter-modal {
        display: none; 
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* SafariのURLバー対策 */
        background-color: rgba(0,0,0,0.5) !important;
        z-index: 99999 !important;
    }
    
    /* 2. 白い箱（下端に接地させる） */
    .sp-filter-modal .modal-content {
        position: absolute !important;
        bottom: 0 !important;       /* ★画面の一番下にくっつける */
        left: 0 !important;
        top: auto !important;       /* 中央寄せのtop指定を解除 */
        transform: none !important; /* 中央寄せのtransformを解除 */
        width: 100% !important;     /* 画面幅いっぱいに広げる */
        max-height: 85vh !important;/* 高すぎないよう画面の85%を上限に */
        max-height: 85dvh !important;
        background: #fff !important;
        border-radius: 20px 20px 0 0 !important; /* 上だけ角丸にする */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin: 0 !important;
        
        /* 下からスッと出てくるアニメーション */
        animation: slideUpModal 0.3s ease-out forwards !important;
    }

    /* アニメーションの定義 */
    @keyframes slideUpModal {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* 3. ヘッダーとフッター（絶対に高さを潰さない） */
    .sp-filter-modal .modal-header,
    .sp-filter-modal .modal-footer {
        flex-shrink: 0 !important;
        background: #fff !important;
        z-index: 10 !important;
    }

    /* 4. 中身（残りの空間を埋め、溢れたらスクロール） */
    .sp-filter-modal .modal-body {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        padding: 20px !important;
        -webkit-overflow-scrolling: touch !important; /* スマホ特有の滑らかなスクロール */
    }
}

/* =================================================================
   ★ STAFFページ STYLE BOOK ボタンの横並びレイアウト
   ================================================================= */

/* 1. ボタン全体の大枠（元の絶対配置を活かしつつ、サイズを中身に合わせる） */
.style-book-link {
    position: absolute !important;
    top: 10% !important;   /* 上からの位置（必要に応じて調整） */
    right: 10% !important;  /* 右に配置 */
    left: auto !important; /* 元のleftを打ち消し */
    
    width: auto !important;  /* ★重要：幅を自動にして文字を潰さない */
    height: auto !important;
    background: transparent !important;
    text-decoration: none !important;
    z-index: 50 !important;
    transition: all 0.3s ease !important;
}

.style-book-link-right {
    position: absolute !important;
    top: 9.6% !important;   /* 上からの位置（必要に応じて調整） */
    right: auto !important;  /* 右に配置 */
    left: 45% !important; /* 元のleftを打ち消し */
    
    width: auto !important;  /* ★重要：幅を自動にして文字を潰さない */
    height: auto !important;
    background: transparent !important;
    text-decoration: none !important;
    z-index: 50 !important;
    transition: all 0.3s ease !important;
}

/* 2. テキストと画像を横並びにする（Flexbox） */
.staff-style-book {
    display: flex !important;
    align-items: center !important; /* 上下中央揃え */
    justify-content: flex-end !important;
    gap: 15px !important; /* 文字と画像の間隔 */
}

/* 3. テキストの設定 */
.staff-style-book p {
    font-family: "Noto Sans JP", Helvetica, sans-serif !important;
    font-size: 16px !important; /* 画像に近いサイズ感 */
    font-weight: 500 !important;
    color: #6b6a75 !important;
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important; /* 絶対に改行させない */
}

/* 4. 矢印画像の設定 */
.staff-style-book img {
    width: 20px !important; /* アイコンの大きさ */
    height: 70px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 50% !important; /* 念のため丸くする */
}

/* 5. ホバー時のアクション（少し薄くなって右に動く） */
.style-book-link:hover,
.style-book-link-right:hover {
    opacity: 0.7 !important;
    transform: translateX(5px) !important;
}

.staff-style-book-right {
    display: flex !important;
    align-items: center !important; /* 上下中央揃え */
    justify-content: flex-end !important;
    gap: 15px !important; /* 文字と画像の間隔 */
}

.staff-style-book-right p {
    font-family: "Noto Sans JP", Helvetica, sans-serif !important;
    font-size: 16px !important; /* 画像に近いサイズ感 */
    font-weight: 500 !important;
    color: #6b6a75 !important;
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important; /* 絶対に改行させない */
}

.staff-style-book-right img {
    width: 20px !important; /* アイコンの大きさ */
    height: 70px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 50% !important; /* 念のため丸くする */
}

/* 6. スマホ表示時の調整 */
@media screen and (max-width: 767px) {
    /* =================================================================
    ★ SP版 STAFFページ STYLE BOOKボタンの横並び・中央揃え
    ================================================================= */

    /* 1. aタグをFlexboxにして横並び＆中央揃えにする */
    .zero-staff-sp a.text-wrapper-67 {
        display: flex !important;
        align-items: center !important;      /* ★上下を中央揃えにする */
        justify-content: center !important;  /* 左右を中央揃えにする */
        gap: 15px !important;                /* 画像と文字の間の隙間（お好みで調整） */
        text-decoration: none !important;
        
        /* 元のabsolute配置などの影響で縦ズレしないよう、高さを親に合わせるか指定する */
        height: 46px !important; /* ※背景の白枠(rectangle-20)の高さに合わせています */
        top: 921px !important;   /* ※枠と同じ高さに揃えるための微調整 */
    }
    .zero-staff-sp a.text-wrapper-57 {
        display: flex !important;
        align-items: center !important;      /* ★上下を中央揃えにする */
        justify-content: center !important;  /* 左右を中央揃えにする */
        gap: 15px !important;                /* 画像と文字の間の隙間（お好みで調整） */
        text-decoration: none !important;
        
        /* 元のabsolute配置などの影響で縦ズレしないよう、高さを親に合わせるか指定する */
        height: 46px !important; /* ※背景の白枠(rectangle-20)の高さに合わせています */
        top: 980px !important;   /* ※枠と同じ高さに揃えるための微調整 */
    }

    .zero-staff-sp a.text-wrapper-73 {
        display: flex !important;
        align-items: center !important;      /* ★上下を中央揃えにする */
        justify-content: center !important;  /* 左右を中央揃えにする */
        gap: 15px !important;                /* 画像と文字の間の隙間（お好みで調整） */
        text-decoration: none !important;
        
        /* 元のabsolute配置などの影響で縦ズレしないよう、高さを親に合わせるか指定する */
        height: 46px !important; /* ※背景の白枠(rectangle-20)の高さに合わせています */
        top: 940px !important;   /* ※枠と同じ高さに揃えるための微調整 */
    }

    /* 2. pタグ（文字）の不要な余白を消す */
    .zero-staff-sp p.style-book-text {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 16px !important;
        color: #000000 !important;
        font-family: "Noto Sans JP";
    }
}