@charset "utf-8";
/* ========================================================
   変数 (Variables)
   ======================================================== */ 
:root {
    /* カラーパレット (プロジェクトごとに変更) */
    --black: #333;
    --white: #fff;
    --accent: #00eae0; /* アクセントカラー 水色 */
    --bg_gray: #f2f2f2; /* 背景カラー */
    --bg_dark_gray: #4d4d4d; /* エントリー部分背景カラー */
    /* フォント  */
    --font_base: "Zen Kaku Gothic New","Sawarabi Gothic","Noto Sans JP", sans-serif;
    --font_en: "Zen Kaku Gothic New", "Sawarabi Gothic", "Noto Sans JP", sans-serif;
    /* ボックスシャドウ */
    --shadow_primary: .3rem .3rem 1.5rem -.3rem rgba(0, 0, 0, .2);
    /* Z-index管理 */
    --z_back: -1;
    --z_default: 1;
    --z_header: 100;
    --z_modal: 1000;
    --z_toast: 9999;
    /* JS連携用 */
    --js_windowWidth: 100vw;
    --js_vw: 1vw;
    
    /* PC: MVの文字(8rem)が入るくらいの幅 */
    --frame-width-pc: 800px;
    /* SP: 一般的なスマホ(375px)でも収まる幅 */
    --frame-width-sp: 340px;
}
@media screen and (max-width: 768px) {
    :root {
        --shadow_primary: .2rem .2rem 1rem -.2rem rgba(0, 0, 0, .2);
    }
}
/* ========================================================
   色設定 (Color Utilities)
   ======================================================== */
/* --- 文字色 (Text Color) --- */
/* 変数 --c_black などを適用 */
.c_black {
    color: var(--black);
}
.c_white {
    color: var(--white);
}
.c_accent {
    color: var(--accent);
}
/* 必要であればグレー系やサブカラーもここに追加 */
/* .c_gray { color: #ccc; } */
/* --- 背景色 (Background Color) --- */
.bg_black {
    background-color: var(--black);
}
.bg_white {
    background-color: var(--white);
}
.bg_accent {
    background-color: var(--accent);
}
.bg_gray {
    background-color: var(--bg_gray);
}
.bg_dark_gray {
    background-color: var(--bg_dark_gray);
}
/* --- ホバー時の挙動（リンクやボタン用） --- */
/* 例: .hover_opacity をつけるとマウスを乗せた時に透ける */
.hover_opacity {
    transition: opacity 0.3s;
}
.hover_opacity:hover {
    opacity: 0.6;
}
/* ========================================================
   リセット & ベース (Reset & Base)
   ======================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%; /* 1rem = 10px */
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth; /* ページ内リンクのスムーススクロール */
}
body {
    font-family: var(--font_base);
    color: var(--c_black);
    font-size: 1.6rem;
    font-weight: 500;
    background: var(--c_white);
    letter-spacing: 0.05em; /* 日本語は少し開けたほうが読みやすい */
    -webkit-font-smoothing: antialiased; /* 文字を滑らかに */
}

html,body {
    overflow-x: hidden;
}
/* 画像の基本設定 */
img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
    border-style: none;
}
img[src*=".svg"] {
    width: 100%;
}
/* リンク */
a {
    color: inherit;
    text-decoration: none;
    transition: opacity .3s, color .3s;
    cursor: pointer;
}
/*
a:hover {
    opacity: 0.7;
}
*/
/* フォーム要素 */
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background-color: transparent;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
textarea {
    resize: vertical;
}
/* リスト・テーブル */
ul, ol {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
/* ========================================================
   レスポンシブ文字サイズ制御 (Fluid Typography)
   ※いただいたロジックを維持
   ======================================================== */
@media screen and (max-width: 1200px) {
    html {
        font-size: 58.59%;
    }
}
@media screen and (max-width: 1024px) {
    html {
        font-size: 54.69%;
    }
}
@media screen and (max-width: 768px) {
    html {
        font-size: 93.75%;
    }
}
@media screen and (max-width: 530px) {
    html {
        font-size: 78.13%;
    }
}
@media screen and (max-width: 430px) {
    html {
        font-size: calc(2.551 * var(--js_vw));
    }
}
@media screen and (max-width: 768px) {
    body {
        font-size: 1.4rem;
        scroll-padding-top: 0 !important;
    }
}
/* ========================================================
   レイアウト (Layout Helpers)
   ======================================================== */
/* コンテナ */
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
    position: relative;
}
/* Flexbox (Gap対応版) */
.flex {
    display: flex;
    flex-wrap: wrap;
}
.flex.nowrap {
    flex-wrap: nowrap;
}
.ai_c {
    align-items: center;
}
.ai_fs {
    align-items: flex-start;
}
.ai_fe {
    align-items: flex-end;
}
.ai_s {
    align-items: stretch;
} /* 高さ揃え */
.jc_c {
    justify-content: center;
}
.jc_sb {
    justify-content: space-between;
}
.jc_sa {
    justify-content: space-around;
}
.jc_fs {
    justify-content: flex-start;
}
.jc_fe {
    justify-content: flex-end;
}
.fd_c {
    flex-direction: column;
}
.fd_rr {
    flex-direction: row-reverse;
}
/* Gap (モダンな余白指定) */
.gap10 {
    gap: 1rem;
}
.gap20 {
    gap: 2rem;
}
.gap30 {
    gap: 3rem;
}
.gap40 {
    gap: 4rem;
}
/* Grid (あると便利) */
.grid {
    display: grid;
}
.place_center {
    display: grid;
    place-content: center;
} 
/* 完全中央配置 */
/* PC/SP 表示切り替え */
.pc_only {
    display: block;
}
.sp_only {
    display: none;
}
@media screen and (max-width: 768px) {
    .pc_only {
        display: none;
    }
    .sp_only {
        display: block;
    }
    .inner {
        width: 100%;
        padding: 0 2rem;
    }
}
/* ========================================================
   ユーティリティ (Utility Classes)
   ======================================================== */
/* --- テキスト制御 --- */
.tal {
    text-align: left;
}
.tac {
    text-align: center;
}
.tar {
    text-align: right;
}
.bold {
    font-weight: 700;
}
.fw_normal {
    font-weight: 400;
}
/* 行数制限 (3点リーダーで省略) */
.line_clamp1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.line_clamp2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.line_clamp3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/* 行間調整 (見出しなどで文字間が広すぎる時用) */
.lh_narrow {
    line-height: 1.2;
}
.lh_normal {
    line-height: 1.6;
}
.lh_wide {
    line-height: 2.0;
}
/* --- 画像・オブジェクト制御 --- */
/* 画像を親要素いっぱいにカバーさせる（背景画像のように振る舞う） */
.object_cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.object_contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
/* アスペクト比固定 (YouTube等にも使える) */
.aspect_16_9 {
    aspect-ratio: 16 / 9;
}
.aspect_4_3 {
    aspect-ratio: 4 / 3;
}
.aspect_1_1 {
    aspect-ratio: 1 / 1;
}
/* --- アクセシビリティ --- */
/* 画面からは消すが、スクリーンリーダーには読ませる */
.visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* --- 余白 (Spacer Utilities) --- */
/* ※元データにあった大量のpadding/marginクラスは、
   必要に応じてここに貼り付けてください。
   ここでは代表的なもののみ記述します。 */
.mt0 {
    margin-top: 0 !important;
}
.mb0 {
    margin-bottom: 0 !important;
}
.mt10 {
    margin-top: 1rem;
}
.mt20 {
    margin-top: 2rem;
}
.mt30 {
    margin-top: 3rem;
}
.mt40 {
    margin-top: 4rem;
}
.mt50 {
    margin-top: 5rem;
}
.mt60 {
    margin-top: 6rem;
}
.mt80 {
    margin-top: 8rem;
}
.mt100 {
    margin-top: 10rem;
}
.mb10 {
    margin-bottom: 1rem;
}
.mb20 {
    margin-bottom: 2rem;
}
.mb30 {
    margin-bottom: 3rem;
}
.mb40 {
    margin-bottom: 4rem;
}
.mb50 {
    margin-bottom: 5rem;
}
.mb60 {
    margin-bottom: 6rem;
}
.mb80 {
    margin-bottom: 8rem;
}
.mb100 {
    margin-bottom: 10rem;
}
/* SP用の余白調整 */
@media screen and (max-width: 768px) {
    .sp_mt20 {
        margin-top: 2rem;
    }
    .sp_mb20 {
        margin-bottom: 2rem;
    }
    /* 必要に応じて追加 */
}
/* ========================================================
   アニメーション (Animation)
   ======================================================== */
.fade_in {
    animation: fadeIn 0.8s ease forwards;
    opacity: 0;
}
.fade_up {
    animation: fadeUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ここまでテンプレート部分 --- */

/* ========================================================
   ヘッダー
   ======================================================== */
.header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background: var(--white);
    z-index: var(--z_header);
    box-shadow: var(--shadow_primary);
    padding: 2.5rem 3rem;
    transition: padding 0.3s ease, background-color 0.3s ease;
}
.is_scroll .header {
    padding: 1rem 3rem; 
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
.header-logo {
    margin: 0; /* h1が最初から持っている上下の余白を消す */
    line-height: 1; /* 行間の余白をゼロにする */
}

.header-logo a {
    display: block; /* リンクをブロック要素にして隙間を消す */
}

.header-logo img { 
    height: 6rem; 
    vertical-align: bottom; /* ★重要：画像の下にできる「謎の隙間」を完全に消す魔法 */
}
/* PCナビ */
.pc-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.pc-nav-list {
    display: flex;
    list-style: none;
    gap: 1rem;
    margin: 0;
    padding: 0;
}
.pc-nav-list a {
    /* ★ここがポイント：Flexbox化して中央揃え */
    display: inline-flex;
    align-items: center;    /* 上下中央 */
    justify-content: center; /* 左右中央（念のため） */
    line-height: 1;         /* 行間の悪さをリセット */
    
    font-size: 1.6rem;
    font-weight: bold;
    
    /* ホバー時の背景カプセル用にパディング調整 */
    /* さっきのボタンと同じような数値バランス（上が少なめ）が良いかもしれません */
    padding: 0.8rem 1.5rem 1rem; 
    
    border-radius: 50px;
    transition: background-color 0.3s, color 0.3s;
    
    /* 念のため色指定 */
    color: var(--black); 
    text-decoration: none;
}

/* ホバー時 */
.pc-nav-list a:hover {
    background-color: var(--accent); /* 水色背景 */
    color: var(--black); /* 必要なら文字色も指定 */
}

/* ENTRYボタン */
.btn-entry {
    display: inline-flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    line-height: 1; 
    font-size: 1.8rem !important;
    
    background: var(--accent);
    color: var(--black);
    
    padding: 0.7rem 3rem 1.1rem; 
    
    border-radius: 50px;
    font-family: var(--font_en);
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: background-color 0.3s, color 0.3s;
}

.btn-entry:hover {
    background: var(--black); 
    color: var(--accent);
}
/* ========================================================
   メインビジュアル (MV)
   ======================================================== */
.mv {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* .mv-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: var(--z_back);
}
.mv-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
}
.mv-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
} */

/* ========================================================
   メインビジュアル (MV) スライダーアニメーション
   ======================================================== */
.mv-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: var(--z_back);
    overflow: hidden; /* ズーム時に画像がはみ出さないようにする */
}

/* スライド全体の設定 */
.mv-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    /* 1枚あたり6秒表示 × 3枚 = 18秒で1ループ */
    animation: mvFade 18s infinite;
}

/* 背景画像の設定 */
.mv-img {
    width: 100%; height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    /* 18秒かけてゆっくりズームし続ける */
    animation: mvZoom 18s linear infinite;
}

/* 黒フィルター */
.mv-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* 画像の1つ上に被せる */
}

/* --- 画像の指定 --- */
.slide01 .mv-img { background-image: url('../img/mv01.jpg'); }
.slide02 .mv-img { background-image: url('../img/mv02.jpg'); }
.slide03 .mv-img { background-image: url('../img/mv03.jpg'); }

/* --- PC版 画像の表示位置調整 --- */
.slide01 .mv-img { background-position: center center; }
.slide02 .mv-img { background-position: center center; }
.slide03 .mv-img { background-position: center center; }

/* --- アニメーションのタイミング（順番待ち） --- */
.slide01, .slide01 .mv-img { animation-delay: 0s; }
.slide02, .slide02 .mv-img { animation-delay: 6s; }
.slide03, .slide03 .mv-img { animation-delay: 12s; }

/* --- フェードイン＆アウトの動き --- */
@keyframes mvFade {
    0%   { opacity: 0; }
    10%  { opacity: 1; } /* ふわっと現れる */
    33%  { opacity: 1; } /* ここまで表示状態をキープ */
    43%  { opacity: 0; } /* 次の画像に切り替わりながら消える */
    100% { opacity: 0; }
}

/* --- ズームの動き --- */
@keyframes mvZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.15); } /* 15%だけ拡大 */
}
@media screen and (max-width: 768px) {
    /* X軸(横) Y軸(縦) の順で指定します。
       例：60% center（少し右寄り）、 20% center（左寄り）
       実際の画像を見ながらパーセンテージを微調整してください！ 
    */
    .slide01 .mv-img { background-position: 60% center; }
    .slide02 .mv-img { background-position: 58% center; }
    .slide03 .mv-img { background-position: 47% center; }
}
.mv-content {
    position: relative;
    z-index: var(--z_default);
    width: 100%;
    padding: 0 2rem;
    color: var(--white);
}

.copy-box {
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    padding: 2rem 4rem;
    text-align: center;
}

.cross-frame {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

.line-v-left, .line-v-right {
    position: absolute;
    top: 0;
    height: 100%; 
    width: 1px;
    background: var(--white);
}
.line-v-left { left: 0; }
.line-v-right { right: 0; }

.line-horz {
    position: absolute;
    top: 71.5%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 10rem);
    height: 1px;
    background: var(--white);
}

.hex-point {
    position: absolute;
    top: 69%;
    width: 1.4rem;
    height: 1.4rem;
}
.hex-left {
    left: 0; 
    transform: translate(-50%, -50%);
}
.hex-right {
    right: 0;
    left: auto;
    transform: translate(50%, -50%);
}
.copy-jp {
    font-size: 8rem;
    line-height: 1.5;
    margin-bottom: 4rem;
    
}
.copy-en {
    font-family: var(--font_en);
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 2rem;
}
/* カギカッコ（開き）「 */
.k-open {
    display: inline-block;
    /* 右側の余白を削って、後ろの文字を引き寄せる */
    margin-right: 0.05em; 
    /* 必要なら左側も詰める（左端揃えの微調整など） */
    margin-left: -0.4em;  
}

/* カギカッコ（閉じ）」 */
.k-close {
    display: inline-block;
    /* 左側の余白を削って、前の文字に近づく */
    margin-left: 0.05em; 
    /* 右側の余白を削って、後ろの「と」などを引き寄せる */
    margin-right: -0.4em; 
}
/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    /* ▼▼▼ 追加：枠幅統一ルール ▼▼▼ */
    /* 全てのヘッダーラッパーを同じ幅・同じ中央配置にする */
    .copy-box, .common-sec-head, .msg-head-wrapper {
        width: var(--frame-width-sp) !important; /* 強制的に統一 */
        /* ど真ん中に配置 */
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        transform: translateX(-50%); /* これで全セクションの軸が揃います */
        position: relative;
        /* パディングのリセット */
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* テキスト中央揃え */
        text-align: center;
        /* MESSAGEのグリッド解除・配置リセット */
        display: block;
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
    }
    /* ▲▲▲ 追加終わり ▲▲▲ */
}

/* ========================================================
   MVのコピー：カギカッコの左揃え微調整
   ======================================================== */

/* ▼ PC版（769px以上の画面）の時の設定 */
@media screen and (min-width: 769px) {
    /* 1つ目のカギカッコ（「安全） */
    .copy-jp .k-open:nth-of-type(1) {
        margin-left: -1.1em;
    }
    /* 2つ目のカギカッコ（「信頼） */
    .copy-jp .k-open:nth-of-type(4) {
        margin-left: -0.7em;
    }
}

/* ▼ SP版（768px以下のスマホ画面）の時の設定 */
@media screen and (max-width: 768px) {
    /* スマホの時は、左に寄りすぎないように数値をリセット（または微調整） */
    .copy-jp .k-open:nth-of-type(1),
    .copy-jp .k-open:nth-of-type(4) {
        margin-left: -0.55em; /* ★スマホで見て、ちょうどいい数字に変えてください！ 0 にしてもOKです */
    }
}

/* ========================================================
   SP対応
   ======================================================== */
.sp-fixed-nav { display: none; }

@media screen and (max-width: 768px) {
    .header {
        padding: 0 1rem; /* 上下のパディングを削って高さ指定に任せる */
        height: 8rem;    /* ★ヘッダー高さを固定 */
        display: flex;
        align-items: center; /* 縦中央揃え */
        z-index: var(--z_toast);
        transition: transform 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
    }

    .is-header-hide .header {
        transform: translateY(-100%);
    }
    .header-logo {
        height: 6rem; /* ロゴの高さも固定してあげる */
        display: flex;
        align-items: center; /* 念のため中央揃え */
    }
    .header-logo a {
        display: flex;
        align-items: center;
        height: 100%; 
    }
    .header-logo img {
        width: auto;  /* 横幅100%をやめて、高さに合わせる */
        height: 100%;
        max-height: 5rem; /* 余白を持たせるための安全策 */
    }
    .mv {
        /* ヘッダーの高さ(60px)分、MV自体を下にずらす */
        margin-top: 8rem; 
        
        /* ★魔法の計算式 */
        /* 100dvh = アドレスバーを除いた「本当の画面の高さ」 */
        /* そこから ヘッダー(60px) と フッター(64px) を引く */
        height: calc(100dvh - 8rem - 6rem); 
        
        /* PC版の min-height: 600px が効いていると、
           画面の小さいスマホではみ出すのでリセットする */
        min-height: auto; 
    }
    .pc-nav {
        display: none;
    }
    .copy-box {
        padding: 0;
    }
    .copy-jp {
        font-size: 4rem;
        margin-bottom: 3rem;
    }
    .copy-en {
        font-size: 2.2rem;
    }
    .line-v-left, .mh-line-v.mh-left {
        left: 0; /* 枠の左端 */
    }
    .line-v-right, .mh-line-v.mh-right {
        right: 0; /* 枠の右端 */
    }
    /* 六角形の位置（線の上） */
    .hex-left, .mh-hex-left {
        left: 0; 
    }
    .hex-right, .mh-hex-right {
        right: 0;
        left: auto; /* right指定を有効にするため */
    }
    .copy-text {
        padding: 0 4rem;
        display: inline-block;
        text-align: left;
    }
    .sp-fixed-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: var(--z_toast);
    }
    
    /* ========================================================
       SP版 モーダルメニュー
       ======================================================== */
    .sp-menu-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh; /* スマホのアドレスバー対策 */
        z-index: 9998; /* 固定ナビの1つ下 */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 60px; /* 下の固定ナビの高さ分だけスペースを空ける */
        
        /* 初期状態は非表示 */
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    /* 開いた時の状態 */
    .sp-menu-modal.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* 背景の暗幕 */
    .sp-menu-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.4); /* 画像と同じくらいの暗さ */
    }
    
    .sp-menu-modal.is-open .sp-menu-inner {
        transform: translateY(0);
    }
    
    /* メニューの白い箱（下からスライドさせる魔法） */
    .sp-menu-inner {
        position: relative;
        background: var(--white);
        width: 100%;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    
    /* リストのデザイン */
    .sp-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--black);
    }
    .sp-menu-list li {
        border-bottom: 1px solid var(--black);
    }
    .sp-menu-list a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 6rem; /* タップしやすい広めの高さ */
        background: var(--white);
        color: var(--black);
        font-size: 1.4rem;
        font-weight: bold;
        text-decoration: none;
        transition: background-color 0.2s;
    }
    
    .sp-menu-list a:active,
    .sp-menu-list a:hover {
        background-color: var(--accent);
    }
    
    .sp-btn-entry, .sp-btn-menu {
        width: 50%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font_en);
        font-weight: bold;
        font-size: 1.6rem;
        border-top: 1px solid var(--black);
        border-bottom: 1px solid var(--black);
    }
    .sp-btn-entry {
        background: var(--accent);
        color: var(--black);
    }
    .sp-btn-menu {
        background: var(--black);
        color: var(--accent);
    }
}

/* ========================================================
   PC版でスマホ用モーダルメニューを完全に隠す
   ======================================================== */
@media screen and (min-width: 769px) {
    .sp-menu-modal {
        display: none !important; /* PCの時は絶対に見せない！ */
    }
}

/* ========================================================
   枠幅の統一設定 (PC)
   ======================================================== */
@media screen and (min-width: 769px) {
    /* MVの箱 */
    .copy-box {
        width: var(--frame-width-pc);
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* JOBの箱 */
    .sec-job .common-sec-head {
        width: var(--frame-width-pc);
        box-sizing: border-box;
    }
    
}


/* ========================================================
   MVアニメーション (Opening Animation)
   ======================================================== */

/* --- 1. アニメーション定義 (Keyframes) --- */

/* 縦線が上から伸びる */
@keyframes lineGrowV {
    0% { height: 0; opacity: 0; }
    1% { opacity: 1; }
    100% { height: 100%; opacity: 1; }
}

/* 横線が左から伸びる（中央基準なら widthを広げる） */
@keyframes lineGrowH {
    0% { width: 0; opacity: 0; }
    1% { opacity: 1; }
    100% { width: calc(100vw - 10rem); opacity: 1; } /* PC幅 */
}

/* SP用の横線アニメーション */
@keyframes lineGrowH_SP {
    0% { width: 0; opacity: 0; }
    1% { opacity: 1; }
    100% { width: 100vw; opacity: 1; }
}

/* 六角形がポンと出る */
@keyframes hexPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
/* 右側の六角形用（基準点が違うため） */
@keyframes hexPopRight {
    0% { transform: translate(50%, -50%) scale(0); opacity: 0; }
    60% { transform: translate(50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(50%, -50%) scale(1); opacity: 1; }
}

/* テキストがふわっと出る */
@keyframes textFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* --- 2. 各要素への適用 & 遅延設定 --- */

/* 1. 左の縦線：最初に動く (0.5s〜1.1s) */
.line-v-left {
    height: 0;
    opacity: 0;
    /* 0.6秒かけて伸びる */
    animation: lineGrowV 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.5s;
}

/* 2. 横線：左の縦線が終わったら伸びる (1.1s〜2.1s) */
.line-horz {
    width: 0;
    opacity: 0;
    /* 1.0秒かけて伸びる */
    animation: lineGrowH 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 1.1s;
}

/* 3. 右の縦線：横線が終わったら降りてくる (2.1s〜2.7s) */
.line-v-right {
    height: 0;
    opacity: 0;
    /* 0.6秒かけて伸びる */
    animation: lineGrowV 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 2.1s;
}

/* --- ここで線が完成！ここから六角形タイム --- */

/* 4. 左の六角形：線が完成した直後に出る (2.8s〜) */
.hex-left {
    opacity: 0;
    animation: hexPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.8s;
}

/* 5. 右の六角形：左のあとに出る (3.0s〜) */
.hex-right {
    opacity: 0;
    animation: hexPopRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 3.2s;
}

/* テキスト：線が動いている間にふわっと出しておく (1.5s〜) */
.copy-text {
    opacity: 0;
    animation: textFadeIn 1.5s ease-out forwards;
    animation-delay: 1.5s; 
    text-shadow:  0px 0px 1rem rgba(0, 0, 0, 0.2);
}


/* --- 3. スマホ対応 (SP) --- */
@media screen and (max-width: 768px) {
    /* 横線のアニメーションをSP用に切り替え */
    .line-horz {
        animation-name: lineGrowH_SP;
    }
}

/* ========================================================
   MESSAGE セクション
   ======================================================== */
.sec-message {
    width: 100%;
    background-color: var(--white);
    padding: 12rem 0;
    overflow: hidden;
}

.sec-message .inner {
    display: grid;
    grid-template-columns: 45% 1fr;
    column-gap: 6rem;
    row-gap: 8rem;
}

/* --- 見出しデザイン (MESSAGE) --- */
.msg-head-wrapper {
    /* グリッド配置：左の列、1行目 */
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    position: relative;
    display: inline-block;
    /* 見出し自体の幅をコンテンツに合わせるための設定 */
    justify-self: start; 
    
    text-align: left;
    padding: 0 2rem !important; /* 縦線の内側の余白 */
}

.msg-title {
    font-family: var(--font_en);
    font-size: 7.2rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* サブタイトル */
.msg-sub {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--black);
    margin-top: 2.3rem;
    letter-spacing: 0.05em;
    text-align: left;
}

/* --- 装飾フレーム（線と六角形） --- */
.msg-head-frame {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.mh-line-v {
    position: absolute;
    top: -1rem;
    bottom: -1rem;
    width: 1px;
    background-color: var(--black);
}
.mh-left { left: 0; }
.mh-right { right: 0; }

.mh-line-h {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 5rem);
    height: 1px;
    background-color: var(--black);
}

.mh-hex {
    position: absolute;
    bottom: 3.55rem;
    width: 14px;
    height: 14px;
    transform: translate(-50%, 15%);
}
.mh-hex-left { left: 0; }
.mh-hex-right { left: 100%; }


/* --- 左下：リード文エリア --- */
.msg-lead {
    /* グリッド配置：左の列、2行目 */
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.msg-lead-line {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.msg-lead-text {
    font-size: 3rem;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 1.2px; /* px指定の場合は単位必須 */
    margin-top: 1.5rem;
    padding-left: 0.2rem;
}

/* ★アニメーション部分（文字も背景も左からワイプ！） */
.lead-bg {
    display: inline-block; /* clip-pathを効かせるため */
    padding: 0.5rem 1rem 0.8rem !important;
    line-height: 1;
    
    /* 背景色設定（最初から色はつけておく） */
    background-color: var(--accent); 
    color: var(--black); /* 必要に応じて文字色指定 */
    
    /* 初期状態：右側100%を隠す（＝何も見えない） */
    clip-path: inset(0 100% 0 0);
    
    /* アニメーション設定 */
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ★発火時：隠していた部分を0にする（＝全部見える） */
.is-active .lead-bg {
    clip-path: inset(0 0 0 0);
}

/* 2行目の遅延 */
.msg-lead-line:nth-child(2) .lead-bg {
    transition-delay: 0.2s;
}


/* --- 右側：本文エリア --- */
.msg-body {
    /* グリッド配置：右の列、1行目〜2行目をぶち抜き */
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    
    /* 見出しと上辺を揃えるための微調整 */
    /* 見出しの文字サイズやline-heightによって微調整してください */
    padding-top: 1rem; 
}

.msg-body p {
    font-size: 1.6rem;
    line-height: 2;
    margin-bottom: 3rem;
    text-align: justify;
}
.msg-body p:last-child {
    margin-bottom: 0;
}



/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .sec-message {
        padding: 6rem 0 10rem;
    }
    /* グリッド解除（縦積み） */
    .sec-message .inner {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0 2rem;
    }
    .msg-title {
        font-size: 5.6rem;
        line-height: 1.1 !important;
    }
    .msg-sub {
        text-align: left;
        margin-top: 1.4rem;
    }
    .line-horz, .mh-line-h {
        width: calc(100% + 5rem);
    }
    .msg-lead {
        margin-top: 3rem;
    }
    /* 配置順序や幅の調整 */
    .msg-lead, .msg-body {
        text-align: left; /* 左揃え */
    }
    .msg-lead-line {
        font-size: 2.4rem;
    }
    .msg-lead-text {
        font-size: 2.4rem;
    }
    .msg-body p {
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }
    
    .msg-head-wrapper .mh-hex {
        bottom: 2.25rem;
    }
    
    .msg-head-wrapper .mh-line-h { 
        bottom: 2rem;
    }
}
/* ========================================================
   共通設定 & ユーティリティ
   ======================================================== */
/* --- 共通見出しデザイン (MESSAGEと同じ) --- */
.common-sec-head {
    position: relative;
    width: fit-content;
    margin: 0 auto 5rem;
    padding: 0 2rem !important;
    text-align: left;
}
.csh-title {
    font-family: var(--font_en);
    font-size: 7.2rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
    position: relative;
    z-index: 1;
    text-align: left;
}

.csh-title .csh-sub.c_white {
    color: var(--white) !important;
}

.csh-sub {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--black);
    margin-top: 2.3rem;
    letter-spacing: 0.05em;
    text-align: left;
}
/* フレーム (線と六角形) */
.csh-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* 既存の .mh-line-v, .mh-hex 等のスタイルを利用します */

@media screen and (min-width: 769px) {
    .common-sec-head {
    position: relative;
    
    /* ▼ これが最強の可変幅（文字に合わせて枠がピタッと縮む！） */
    display: inline-block;
    
    /* ▼ 枠ごと画面のド真ん中に持ってくる */
    left: 50%;
    transform: translateX(-50%);
    
    /* ▼ 修正：ここを center から left に変えるだけ！！ */
    text-align: left; 
    
    margin-bottom: 8rem;
    padding: 0 3rem;
    }

    .csh-title {
        /* 枠が広がっても「文字の塊」として独立させ、
           親の text-align: center の効果で画面の中央に配置し続けます */
        display: inline-block;
        
        /* 塊の中では左寄せにする（サブタイトルがタイトルの左端にピッタリ揃う） */
        text-align: left; 
    }
    
    .common-sec-head .csh-title .csh-sub {
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 769px) {
    .csh-title {
        line-height: 1.1;
        font-size: 5.6rem;
    }
    
    .common-sec-head .csh-title .csh-sub {
        font-size: 1.4rem;
    }
}



/* ========================================================
   JOB DESCRIPTION セクション
   ======================================================== */
.sec-job {
    padding: 12rem 0 0;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}
.sec-intro-text {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 8rem;
}

/* --- Job Grid --- */
.job-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    /* 隙間なしでぴったりくっつける場合 */
    gap: 0; 
}

.job-item {
    position: relative;
    display: block;
    width: 100%;
    /* アスペクト比固定 (例: 16:9に近い比率) */
    aspect-ratio: 16 / 7; 
    overflow: hidden;
    text-decoration: none;
    color: var(--white);
    border: 1px solid var(--black);
}
.job-item:nth-of-type(2) {
    border-left: none;
}
.job-item:nth-of-type(3) {
    border-top: none;
}
.job-item:nth-of-type(4) {
    border-top: none;
    border-left: none;
}

/* 背景画像 */
.job-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

/* オーバーレイ（暗幕） */
.job-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

/* 中身 */
.job-content {
    text-align: center;
    z-index: 2;
}

/* 職種名 (アニメーション対象) */
.job-name {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    
    /* ★追加：親要素にも opacity: 0 などの初期設定がないか確認し、
       もしあれば消すか opacity: 1 に固定する */
    opacity: 1 !important; 
    transform: none !important;
}
/* job-nameの中のlead-bgは、MESSAGEセクションのCSS(.lead-bg)を流用・上書き */
.job-name .lead-bg {
    display: inline-block; /* clip-pathを効かせるため必須 */
    background-color: var(--accent);
    color: var(--black);
    padding: 0.5rem 1.5rem 0.8rem !important;
    
    /* --- アニメーションの初期設定 --- */
    clip-path: inset(0 100% 0 0); /* 右側100%を隠す */
    
    /* 1.2秒かけて clip-path と color/background-color を変化させる */
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s, color 0.3s; 
}

/* ★追加：アニメーション発火時（画面に入った時） */
.job-name.is-active .lead-bg {
    clip-path: inset(0 0 0 0); /* 全て見せる */
}

/* ボタン */
.job-btn {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    font-family: var(--font_en);
    font-size: 1.4rem;
    padding: 0.3rem 2rem;
    border-radius: 50px;
    letter-spacing: 0.1em;
    transition: all 0.3s;
    font-weight: 700;
}

/* --- ホバーエフェクト --- */
.job-item:hover .job-bg {
/*    transform: scale(1.05); */
}
.job-item:hover .job-overlay {
    background: rgba(0,0,0,0.4); /* さらに暗く */
}
/* ラベル反転：背景白、文字水色 */
.job-item:hover .job-name .lead-bg {
    background-color: var(--black);
    color: var(--accent);
}
/* ボタン反転：背景濃いグレー(変数)、文字白 */
.job-item:hover .job-btn {
    background-color: var(--accent);
    color: var(--black);
}

/* ========================================================
   MODAL (ポップアップ)
   ======================================================== */
.modal-wrapper {
    display: none; /* 初期非表示 */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: var(--z_modal);
}
.modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
}
.modal-container {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    background: var(--white);
    padding: 4rem;
    overflow: visible; 
    max-height: none;
    display: flex;
    flex-direction: column;
}
.modal-close-btn {
    position: absolute;
    top: -2.5rem;
    right: -2.5rem; 
    padding: 0.8rem 1rem 1rem;
    width: 40px;
    height: 40px;
    background: var(--black);
    color: var(--white);
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    z-index: 5;
    transition: all 0.3s;
/*    box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/
}

.modal-close-btn:hover{
    background: var(--accent);
    color: var(--black);
}

.modal-title {
    text-align: left;
    font-size: 3.2rem;
    font-weight: 900;
    margin-bottom: 2rem;
}
/* 営業職などのラベルデザイン */
.modal-title span {
    background: var(--accent);
    color: var(--black);
    padding: 0 1rem 0.3rem !important;
    line-height: 1;
}
.modal-text {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    text-align: justify;
}
.modal-footer {
    text-align: right;
}

.modal-footer .btn-entry {
    background: var(--black);
    color: var(--white);
}
.modal-footer .btn-entry:hover {
    background: var(--accent); 
    color: var(--black);
}
.modal-body {
    max-height: 80vh; 
    overflow-y: auto; 
    width: 100%;
}

/* ========================================================
   SP対応
   ======================================================== */
@media screen and (max-width: 768px) {
    /* JOB */
    .job-grid {
        grid-template-columns: 1fr; /* 1列 */
    }
    .job-item {
        aspect-ratio: 2 / 1;
        border: 1px solid var(--black);
    }
    .job-item:nth-of-type(2),
    .job-item:nth-of-type(3),
    .job-item:nth-of-type(4) {
        border-top: none;
    }
    .job-name {
        font-size: 2.6rem;
        margin-bottom: 1rem;
    }
    .job-name .lead-bg {
        padding: 0.5rem 1rem;
    }
    .sec-intro-text {
        text-align: left;
        font-size: 1.4rem;
    }
    
    .job-content {
        text-align: left;
        width: 100%;
        padding-left: 2.4rem;
    }
    
    /* MODAL */
    .modal-container {
        width: calc(100% - 4rem);
        padding: 2rem;
    }
    
    .modal-close-btn {
        top: -5rem;
        right: 0;
    }
    
    .common-sec-head .mh-hex {
        bottom: 3rem;
    }
    
    /* DAY */
    .day-content-box {
        padding: 3rem 0; /* 左右余白なし（スクロールのため） */
    }
    
}


/* ========================================================
   A DAY IN THE LIFE セクション
   ======================================================== */
.sec-day {
    padding: 12rem 0 0;
}

/* --- タブデザイン --- */
.day-tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 500px; /* タブ全体の幅 */
    position: relative;
    z-index: 2; /* 下のコンテンツ枠より上に重ねるため */
    column-gap: 1rem;
}

.tab-item {
    flex: 1; /* 幅を均等に */
    text-align: center;
    font-size: 3.2rem;
    font-weight: bold;
    padding: 1.5rem 0;
    cursor: pointer;
    background: #e0e0e0; /* 非アクティブ時のグレー */
    color: #999;
    
    /* 枠線の設定 */
    border: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    transition: background 0.3s, color 0.3s;
}

/* アクティブなタブ（白くなって下の線と結合する） */
.tab-item.is-active {
    background: var(--white);
    color: var(--black);
    /* 下の線を白で上書きして、下の箱と繋がっているように見せる魔法 */
    border-bottom: 1px solid var(--white); 
}

.tab-item:not(.is-active) {
    border: 1px solid #ccc;
    border-bottom: 1px solid var(--black);
}

.tab-item:not(.is-active):hover {
    background-color: var(--accent);
    color: var(--black);
}

/* --- コンテンツエリア --- */
.day-content-box {
    width: 100%;
    
    /* ▼ 修正：元の白背景と線を透明にする（後で作る魔法の背景に任せるため） */
    background-color: transparent !important; 
    border-top: none;
    
    margin-top: -1px; 
    position: relative;
    z-index: 1;
}

/* ★追加：魔法の背景！ 
   中身はinner幅のまま、背景と上辺の黒線だけを画面幅いっぱい（100vw）に広げます */
.day-content-box::before {
    content: "";
    position: absolute;
    top: 0;
    
    /* 画面のど真ん中を基準にして、100vw(画面全幅)に広げる */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%; /* 下まで真っ白に */
    
    background-color: var(--white); 
    border-top: 1px solid var(--black); 
    
    z-index: -1; /* タイムラインコンテンツの後ろに敷く */
}

/* タブの中身（初期非表示） */
.day-pane {
    display: none;
}
.day-pane.is-show {
    display: block;
    animation: fadeTab 0.5s;
}
@keyframes fadeTab { from{opacity:0;} to{opacity:1;} }


/* --- タイムライン (PC) --- */
.js-scrollable {
    overflow-x: auto; /* SP用スクロール（はみ出しを隠す原因） */
}

.timeline-list {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    width: max-content;
    min-width: 1000px;
    margin: 0 auto;
    padding: 30rem 0;
}

/* 背景の横線 */
.timeline-line {
    position: absolute;
    left: 30px;
    right: 5.6rem;
    top: 50%;
    transform: translateY(-50%);
    height: 1.8rem;
    background: #ccc;
    z-index: 0;
}

/* 矢印の先端（既存のままでOKですが念のため記載します） */
.timeline-line::after {
    content: "";
    position: absolute;
    
    /* ▼ 修正2：矢印の幅(5.6rem)と全く同じ数値だけ、線の右端から外に飛び出させる */
    right: -5.6rem; 
    
    top: 50%;
    transform: translateY(-50%);
    border-left: 5.6rem solid #ccc;
    border-top: 2rem solid transparent;
    border-bottom: 2rem solid transparent;
}
.timeline-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.timeline-item:last-child {
    margin-right: 8rem !important;
}

.timeline-item.item-end .tl-time::after {
    display: none;
}

/* 時間の黒丸 */
.tl-time {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px; height: 60px;
    background: #444; /* 濃いグレー */
    color: var(--white);
    border-radius: 50%;
    font-family: var(--font_en);
    font-size: 1.8rem;
    font-weight: bold;
    position: relative;
    z-index: 3;
}

/* ★点線（時間と箱をつなぐ） */
.tl-time::after {
    content: "";
    position: absolute;
    left: 30px; 
    transform: translateX(-50%);
    width: 1px;
    
    height: 40px; 
    
    border-left: 1px dashed var(--black);
    z-index: 1;
}

/* テキストボックス */
.tl-box {
    position: absolute;
    left: 0; 
    transform: none; 
    font-size: 1.8rem;
    
    /* ★デザイン指定のサイズを適用 */
    min-width: 25rem;
    max-width: 31rem;
    height: 15.5rem;
    width: max-content;
    box-sizing: border-box; /* パディングを含めてこのサイズに収める魔法 */
    
    background: var(--white);
    border: 1px solid var(--black);
    padding: 2rem;
    text-align: left;
}

.tl-box + .tl-box {
    margin-left: 2rem; /* 右側のやつ（2つ目以降）にだけ、左側の余白を足す！ */
}

/* --------------------------------------------------------
   ★上下交互の配置ルール（隙間を完璧にコントロール）
   -------------------------------------------------------- */

/* 1番目、3番目...のアイテム (要素順では even(偶数)) → 【上に出す】 */
.timeline-item:nth-child(even) .tl-box {
    bottom: 110px; /* 箱の位置はそのまま */
}
.timeline-item:nth-child(even) .tl-time::after {
    /* 黒丸(60px) ＋ 隙間(15px) ＝ 下から75pxの位置から線をスタート */
    bottom: 70px; 
    top: auto; /* 念のため古い指定をリセット！ */
}

/* 2番目、4番目...のアイテム (要素順では odd(奇数)) → 【下に出す】 */
.timeline-item:nth-child(odd) .tl-box {
    top: 110px; /* 箱の位置はそのまま */
}
.timeline-item:nth-child(odd) .tl-time::after {
    /* 黒丸(60px) ＋ 隙間(15px) ＝ 上から75pxの位置から線をスタート */
    top: 70px; 
    bottom: auto; /* 念のため古い指定をリセット！ */
}

.tl-tag {
    background-color: var(--accent);
    padding: 0.3rem 0.6rem 0.35rem;
}

.tl-desc {
    padding-left: 0.6rem;
    margin-top: 0.5rem;
}

/* 退社（最後のアイテム） */
.timeline-item.item-end {
    width: auto;
}
.tl-tag-end {
    display: block;
    background: var(--accent);
    color: var(--black);
    font-weight: bold;
    font-size: 1.4rem;
    padding: 0.4rem 1rem;
    position: absolute;
    bottom: 7rem;
    
    left: 3rem; 
    transform: translateX(-50%);
    white-space: nowrap;
}

/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .timeline-list {
        padding: 23rem 0;
        display: flex; 
        flex-wrap: nowrap; 
        width: max-content; 
        padding-right: 3rem;
        
        margin: 0 !important;       /* 中央揃えを解除！ */
        min-width: auto !important; /* 1000pxの縛りを解除！ */
        justify-content: flex-start; /* 確実に左からスタートさせる */
    }
    
    .timeline-item {
        flex-shrink: 0;
    }

    /* ▼ 追加：SP版で矢印が縮むのを防ぐため、pxに変換して固定！ */
    .timeline-line {
        height: 18px; /* 1.8rem相当 */
        right: 56px;  /* 5.6rem相当 */
    }
    .timeline-line::after {
        right: -56px; /* -5.6rem相当 */
        border-left-width: 56px; /* 5.6rem相当 */
        border-top-width: 20px;  /* 2rem相当 */
        border-bottom-width: 20px; /* 2rem相当 */
    }
    
    .tab-item {
        font-size: 2.6rem;
        padding: 1rem 0.4rem;
        line-height: 1;
    }
    .tl-box {
        font-size: 1.4rem;
        height: 13.5rem;
    }
}
/* ========================================================
   VOICES (先輩社員の声) - 修正版
   ======================================================== */
.sec-voices {
    padding: 12rem 0;
    
    /* 背景画像固定（パララックス） */
    background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
        url('../img/voicesbg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed; /* SPで不具合が出る場合は scroll に */
}

/* ▼ 修正：画像がなくなった分の余白確保 */
.voice-grid {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}

.voice-card {
    width: 48%;
    position: relative;
    display: flex; /* 子要素（.voice-content）の高さを親に合わせる */
}

.voice-content {
    background: var(--white);
    padding: 4rem;
    box-shadow: var(--shadow_primary);
    width: 100%;
    margin: 0;
    
    /* ▼ 変更：箱自体は親(voice-card)の高さまでいっぱいに伸ばす */
    height: 100%; 
    
    display: flex;
    flex-direction: column;
}

/* テキストアニメーション（既存のまま） */
.voice-catch {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.vc-line {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 0;
}
.vc-bg {
    display: inline-block;
    line-height: 1;
    padding: 0.3rem 1rem 0.6rem;
    background-color: var(--accent);
    color: var(--black);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-right: -4rem;
}

.vc-bg:has(.space_low) {
    padding: 0.3rem 1.6rem 0.6rem 1rem; 
}

.vc-line.is-active .vc-bg {
    clip-path: inset(0 0 0 0);
}
.voice-catch .vc-line:nth-child(3) .vc-bg { /* brタグ含む場合 */
    transition-delay: 0.2s;
}

.voice-text {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    flex-grow: 0; 
}


/* ▼ 修正：タグのデザイン変更（(氏名) T.T 風） */
.voice-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem; /* 間隔調整 */
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center; /* 縦位置中央揃え */
}

.voice-tags li {
    font-size: 1.6rem;
    font-weight: bold;
    display: flex; /* ラベルと値を横並びにする */
    align-items: center;
    gap: 1rem; /* 丸と文字の間隔 */
}

/* 丸で囲まれたラベル部分 (氏名、職種など) */
.vt-label {
    display: inline-block;
    border: 1px solid var(--black);
    border-radius: 50px;
    padding: 0.3rem 1.5rem;
    font-size: 1.4rem;
    background: var(--white);
    white-space: nowrap;
}

.space_low {
    letter-spacing: -6px !important;
}

/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .voice-grid {
        flex-direction: column;
        gap: 4rem;
        margin-top: 3rem;
    }
    .voice-card {
        width: 100%;
        display: block; /* SPでは高さ揃え解除 */
    }
    
    /* ▼ 修正1：白い箱は画面幅にせず、通常の箱に戻す */
    .voice-content {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 3rem 2rem 4rem; /* 左右の余白は2rem */
        box-sizing: border-box;
    }
    
    /* ▼ 修正2：見出しだけを「箱の外」にはみ出させる魔法！ */
    .voice-catch {
        font-size: 2.6rem;
        margin-right: -5rem; /* 右側も画面端まで突き抜けさせる */
        margin-bottom: 2rem;
    }

    /* ▼ 修正3：タグの並び順（上段に2つ、下段に1つ） */
    .voice-tags {
        gap: 1.5rem 2rem; /* 縦の隙間1.5rem、横の隙間2rem */
    }
    .voice-tags li {
        width: auto; /* 横並びにするために100%を解除 */
    }
    
    /* 3番目（勤続年数）だけを幅100%にして、強制的に次の行に落とす！ */
    .voice-tags li:nth-child(3) {
        width: 100%; 
        margin-top: 0.5rem; /* 少し上に余白を開けてバランスをとる */
    }
    .space_low {
        letter-spacing: -5px !important;
    }
    
    .voice-text {
        font-size: 1.4rem;
    }
    
    .voice-tags li {
        font-size: 1.4rem;
    }

/* 丸で囲まれたラベル部分 (氏名、職種など) */
    .vt-label {
        font-size: 1.2rem;
    }
}

/* ========================================================
   BENEFITS (福利厚生) - 修正版
   ======================================================== */
.sec-benefits {
    padding: 12rem 0 0;
    background-color: var(--white);
    
    /* ▼ 画面外に飛び出した線を隠す（横揺れ防止） */
    overflow-x: hidden; 
}

.benefits-lead {
    text-align: center;
    margin-bottom: 8rem;
    font-size: 1.8rem;
    line-height: 2;
}

/* --- グリッドと線の魔法 --- */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* ここではgapを使わず、アイテム側のpaddingで余白を作ります（線を綺麗に引くため） */
}

.benefit-item {
    position: relative;
    padding: 4rem 0 6.4rem; /* PC版での各ブロックの余白 */
}

/* 中央の縦線 (左側のアイテムの右に線を引く) */
.benefit-item:nth-child(odd) {
    border-right: 1px solid var(--black);
    padding-left: 0;
    padding-right: 2.4rem;
}

.benefit-item:nth-child(even) {
    padding-left: 5.6rem;
    padding-right: 0;
}

/* 上の横線 (1行目のアイテムのみ、画面の端まで伸ばす魔法) */
.benefit-item:nth-child(1)::before,
.benefit-item:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    width: 50vw; /* 画面の半分まで伸びる */
    height: 1px;
    background-color: var(--black);
}
.benefit-item:nth-child(1)::before { right: 0; } /* 左アイテムは右端から左へ伸びる */
.benefit-item:nth-child(2)::before { left: 0; }  /* 右アイテムは左端から右へ伸びる */

/* 下の横線 (すべてのアイテムの下辺に引いて、画面端まで伸ばす) */
.benefit-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50vw;
    height: 1px;
    background-color: var(--black);
}
.benefit-item:nth-child(odd)::after { right: 0; }
.benefit-item:nth-child(even)::after { left: 0; }


/* --- アイコンとタイトル --- */
.bi-head {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.bi-icon {
    width: 8rem;
    height: 8rem;
    background-color: var(--accent); /* 丸い水色背景 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bi-icon img {
    max-width: 5.6rem;
    max-height: 4rem;
/*    width: 50%;  SVGアイコンのサイズ */
    height: auto;
}

.bi-title {
    font-size: 3.2rem;
    font-weight: bold;
    margin: 0;
}

/* --- リスト部分 (2列に分けて縦のラインを揃える) --- */
.bi-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* ▼ 2列グリッド。これで上の行と下の行の「見えない縦の罫線」が完璧に揃います */
    display: grid;
    gap: 1.5rem 1rem;
}

/* ========================================================
   リストの列幅（比率）を左右で非対称にする魔法
   ======================================================== */
@media screen and (min-width: 769px) {
    
    /* ▼ 左側（odd）のアイテムの中にあるリストを「2:1」にする */
    .benefit-item:nth-child(odd) .bi-list {
        grid-template-columns: 1.2fr 1fr;
    }

    /* ▼ 右側（even）のアイテムの中にあるリストを「1:2」にする */
    .benefit-item:nth-child(even) .bi-list {
        grid-template-columns: 1fr 1.4fr;
    }
    
}

.bi-list li {
    position: relative;
    padding-left: 1em;
    font-size: 1.8rem;
    line-height: 1.6;
}

/* リストの「●」 */
.bi-list li::before {
    content: "●"; 
    position: absolute;
    left: 0;
    
    /* ▼ 指示通り、一旦 #111 に設定 */
    color: #009e92; 
    
    font-size: 1rem;
    top: 0.7em;
}


/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .benefits-lead {
        text-align: left;
        font-size: 1.4rem;
        margin-bottom: 4rem;
    }
    
    /* ▼ 修正1＆2：innerを無視して画面幅いっぱいに広げ、隙間をなくす */
    .benefits-grid {
        width: 100vw;
        /* 親のinnerの枠を飛び越えて、画面の左端からスタートさせる魔法の計算式 */
        margin-left: calc(50% - 50vw); 
        
        grid-template-columns: 1fr;
        gap: 0; /* アイテム間の隙間をゼロにしてくっつける */
    }
    
    .benefit-item {
        /* 上下だけ線を残し、左右の線は消す */
        border-top: 1px solid var(--black) !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    .benefit-item:nth-child(odd),
    .benefit-item:nth-child(even) {
        /* 画面端まで広げた分、内側の余白(padding)を計算して、文字の位置を綺麗に元に戻します */
        padding: 2.6rem 0 3rem 4rem;
    }
    
    /* 最後のアイテムだけ下に線を引く（これで線が重ならず、すべて1本の線になります！） */
    .benefit-item:last-child {
        border-bottom: 1px solid var(--black) !important;
    }
    
    /* PC版で引いた画面幅の横線を消す */
    .benefit-item::before,
    .benefit-item::after {
        display: none !important;
    }
    
    .bi-head {
        margin-bottom: 2rem;
        gap: 1.5rem;
    }
    
    .bi-icon {
        width: 6rem;
        height: 6rem;
    }
    
    .bi-icon img {
        max-width: 4.2rem;
    }

    
    .bi-title {
        font-size: 2.6rem;
    }
    
    .bi-list {
        padding-left: 0;
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    /* ▼ 修正3：●をアイコンの中央に合わせる調整 */
    .bi-list li {
        /* ●の右側にテキストが来るように余白を確保（50px） */
        padding-left: 4.5rem;
        font-size: 1.4rem;
    }
    .bi-list li::before {
        /* アイコン(60px)のちょうど半分の位置(30px)に●を配置して、ド真ん中に串刺しにする！ */
        left: 30px; 
        top: 0.5em;
        transform: translateX(-60%);
    }
}


/* ========================================================
   CERTIFICATION SUPPORT (資格取得支援) - 修正版
   ======================================================== */
.sec-cert {
    padding: 10rem 0;
    
    /* ▼ 背景画像固定（パララックス） */
    background-image: url('../img/csbg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.sec-cert .inner {
    position: relative;
    z-index: 2;
}

/* --- ヘッダー --- */
.cert-header {
    color: var(--white);
    margin-bottom: 8rem;
}

.cert-desc {
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: center;
}

/* --- 水色アニメーションの微調整 --- */
.sec-cert .vc-bg {
    /* VOICES用のはみ出し設定をこのセクションではリセット */
    margin-right: 0 !important; 
    padding: 0.3rem 1rem 1rem;
}

/* --- 2つの白いボックス --- */
.cert-boxes {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cert-box {
    background: var(--white);
    width: 50%;
    padding: 5.6rem 4rem;
    box-shadow: var(--shadow_primary);
    
    /* ▼ 修正：flexを解除して、宙に浮かすアイコンの「基準地」にする */
    display: block; 
    position: relative;
}

.cb-text {
    /* flex: 1; を削除して、幅いっぱいに使えるようにする */
    display: block;
}

/* ▼ 追加：タイトルと数字は、右に浮いているアイコンと被らないように余白をあける */
.cb-title,
.cb-num-wrap {
    padding-right: 20rem; /* アイコンの幅(18rem)＋余白分をよける */
}

.cb-title {
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.cb-num-wrap {
    /* ▼ 追加：アイコンの高さ分を確保するために、下の注釈との間に広めの余白を取る */
    margin-bottom: 4rem; 
}

.cb-num {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1;
    font-family: var(--font_en);
}
.cb-num span {
    font-size: 7.2rem;
}

/* ▼ 修正：注釈テキストは邪魔するものがなくなったので幅いっぱいに伸びます！ */
.cb-note {
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 0;
}

/* ▼ 修正：アイコンは絶対配置（absolute）で右上にドカッと固定する */
.cb-icon {
    position: absolute;
    top: 5rem; /* 上からの位置調整（少し上に上げました） */
    right: 4rem; /* 右端からの位置調整 */
    width: 18rem;
    height: 18rem;
    margin-left: 0; /* 不要なマージンを削除 */
}

.cb-icon .icon-bg,
.cb-icon .icon-fg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-icon .icon-bg {
    top: 0; left: 0; width: 100%; height: 100%;
}
.cb-icon .icon-fg {
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    width: 10rem; height: 10rem; 
}
.cb-icon img {
    width: 100%; height: 100%; object-fit: contain;
}

/* --- 下部のリストボックス --- */
.cert-list-box {
    background: var(--white);
    padding: 8rem 4rem;
    box-shadow: var(--shadow_primary);
    
    display: flex; /* 左にタイトル、右にリスト */
    gap: 10rem;
}
.clb-head {
    width: 35%;
    flex-shrink: 0;
}
.clb-title {
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 3.2rem;
    line-height: 1.4;
}
.clb-desc {
    font-size: 1.8rem;
    line-height: 1.8;
}

/* 2列のリスト */
.clb-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3.2rem 1.5rem;
}
.clb-item dt {
    margin-bottom: 1rem;
}
.clb-label {
    display: inline-block;
    background-color: var(--accent);
    color: var(--black);
    padding: 0.3rem 0.6rem 0.35rem;
    font-size: 1.8rem;
    font-weight: bold;
}
.clb-item dd {
    font-size: 1.8rem;
    line-height: 1.6;
    margin: 0;
}

/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .common-sec-head .mh-hex {
        bottom: 3rem;
    }
    
    .cb-icon .icon-fg {
        width: 7rem;
        height: 7rem;
    }
    
    .sec-cert {
        padding: 6rem 0 8rem; /* 上下の余白を調整 */
    }
    
    .sec-cert .common-sec-head {
        /* 左右に2remの余白バリアを張って、縦線と文字を離す！ */
        padding: 0 2rem !important; 
    }
    
    .sec-cert .csh-title {
        letter-spacing: -0.5px; 
        line-height: 1.1;
    }

    /* ヘッダー周り */
    .cert-header {
        margin-bottom: 4rem;
    }
    
    .cert-header .common-sec-head {
        padding: 0; /* innerのpaddingがあるので一旦リセット */
        margin-bottom: 5rem;
    }
    .cert-desc {
        text-align: left; /* 左揃えに */
        font-size: 1.4rem;
        line-height: 1.8;
    }

    /* 2つの白いボックス */
    .cert-boxes {
        flex-direction: column;
        gap: 1.5rem; /* ボックス間の間隔を少し広げる */
    }
    .cert-box {
        width: 100%;
        /* デザインに合わせて内側の余白を広めに調整 */
        padding: 2.7rem 1.5rem;
        
        /* 追加：もし文字が少なくて箱が縮んでも、アイコンがはみ出さないように最低限の高さを確保 */
        min-height: 16rem; 
    }

    /* ▼▼▼ 追加・修正：テキスト群全体を縮めて改行させる ▼▼▼ */
    .cb-text {
        /* アイコン幅(12rem) + 少しの余白 = 13.5rem 分を避ける */
        padding-right: 13.5rem; 
    }

    /* アイコンの位置とサイズ */
    .cb-icon {
        width: 13rem;
        height: 13rem;
        
        /* ▼▼▼ 修正：縦のド真ん中に配置 ▼▼▼ */
        top: 50%;
        transform: translateY(-50%);
        right: 1.5rem; /* 箱の右padding(1.5rem)と揃えると綺麗です */
    }

    /* テキストがアイコンに被らないための右余白（リセット） */
    .cb-title,
    .cb-num-wrap {
        /* 全体に余白をつけたので、個別の余白はゼロに戻す */
        padding-right: 0; 
    }

    /* フォントサイズとマージンのバランス調整 */
    .cb-title {
        font-size: 2.6rem; /* PCより少し小さく、でも存在感はあるサイズに */
        margin-bottom: 0.8rem;
    }
    .cb-num {
        font-size: 2.6rem;
    }
    .cb-num span {
        font-size: 6rem; /* 数字のインパクトを出す */
    }
    .cb-num-wrap {
        margin-bottom: 1rem; /* 注釈との間隔 */
    }
    .cb-note {
        font-size: 1.4rem; /* 本文より少し小さめ */
        line-height: 1.6;
    }

    /* 下部のリストボックス */
    .cert-list-box {
        flex-direction: column; /* タイトルを上に、リストを下に */
        padding: 2.7rem 1.5rem;
        gap: 2.5rem;
    }
    .clb-head {
        width: 100%;
    }
    .clb-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    .clb-desc {
        font-size: 1.4rem;
    }
    
    .clb-grid {
        grid-template-columns: 1fr; /* リストも1列に */
        gap: 2.8rem;
    }
    .clb-label {
        font-size: 1.4rem; /* ラベルは少し小さめに */
    }
    .clb-item dd {
        font-size: 1.3rem;
    }
    
}

/* ========================================================
   iOS Safariの背景画像ドアップ（パララックス）バグ修正
   ======================================================== */
@media screen and (max-width: 768px) {
    .sec-voices,
    .sec-cert {
        /* スマホでは背景固定を解除して、普通のスクロールに戻す！ */
        background-attachment: scroll !important;
    }
    .sec-voices {
        background-size: cover !important; /* 全体を覆うのはそのまま */
        background-position: 40% 50% !important;
    }
}


/* ========================================================
   CAREERS (キャリアパス) - 完成版
   ======================================================== */
.sec-careers {
    padding: 12rem 0 0;
    overflow: hidden; /* はみ出した階段と矢印を隠す */
    position: relative;
    border-bottom: solid 1px var(--black);
}

.careers-lead {
    text-align: center;
    margin-bottom: 8rem;
    font-size: 1.8rem;
}

/* --- SP版横スクロール用ラッパー --- */
.career-scroll-wrapper {
    position: relative;
    /* ▼ 修正：PC版でも念のためはみ出し対策を入れておきます */
    width: 100%;
    overflow: visible !important;
}

.career-scroll-inner {
    overflow: visible !important; 
}

.scroll-hint {
    overflow: visible !important;
}

/* --- 階段全体を包む枠 --- */
.career-steps {
    position: relative;
    display: flex;
    justify-content: center; /* アイテムを中央にまとめる */
    align-items: flex-end; /* 下揃えで段差をつける */
    width: 100%;
    
    /* ▼ 修正：PC版では必要以上に横幅を取らないように max-width も設定 */
    min-width: 1000px; 
    max-width: 1200px;
    
    margin: 0 auto;
    
    /* ▼ 修正：矢印などが上にはみ出さないように、上部にも少し余裕を持たせる */
    padding-top: 5rem; 
    padding-bottom: 12rem; /* 下部の余白 */
    z-index: 2; 
}

/* --- 背景の矢印 --- */
.career-bg-arrow {
    position: absolute;
    /* ▼ 修正：padding-topで余裕を持たせたので、top位置を少し下げて自然に配置 */
    top: -16%; 
    left: 10%; 
    width: 80%; 
    height: auto;
    z-index: 1; /* 階段(0)より上、キャラ(3)より下 */
    pointer-events: none;
}
.career-bg-arrow img {
    width: 100%; height: auto;
}

/* --- 各ステップのコンテナ --- */
.step-item {
    position: relative;
    flex: 1; /* 4等分にして隙間をなくし、階段をくっつける */
    display: flex;
    justify-content: center;
}

/* ▼ 階段の段差をつける（アイテム全体を下から押し上げる） */
.step-01 { margin-bottom: 0; }
.step-02 { margin-bottom: 4rem; }
.step-03 { margin-bottom: 8rem; }
.step-04 { margin-bottom: 12rem; }

/* ▼▼▼ 魔法の階段背景 ▼▼▼ */
.step-item::before {
    content: "";
    position: absolute;
    top: 14rem; 
    left: 0;
    width: 100%;
    /* ★heightによる長さ指定は廃止し、bottomで地面にピッタリくっつけます！ */
    background-color: var(--bg_gray); 
    z-index: 0; 
}

/* ▼ PC版：地面（padding-bottom: 12rem）までピッタリ伸ばす計算式に変更！ */
.step-01::before { bottom: -12rem; }
.step-02::before { bottom: calc(-4rem - 12rem); }  /* 自身の浮き上がり(4rem) + 地面(12rem) */
.step-03::before { bottom: calc(-8rem - 12rem); }
.step-04::before { bottom: calc(-12rem - 12rem); }

/* ▼ PC版：左右の端を画面外まで伸ばす */
.step-01::before {
    width: 50vw;
    left: auto;
    right: 0;
}
.step-04::before {
    width: 50vw;
    left: 0;
}

/* --- コンテンツの中身（幅を制限して箱同士の隙間を作る） --- */
.step-content {
    position: relative;
    width: 85%; /* 箱同士がくっつかないように幅を絞る */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ラベル --- */
.step-label {
    position: relative;
    z-index: 2; /* キャラより下 */
    background: var(--accent);
    color: var(--black);
    font-weight: bold;
    font-size: 3.2rem;
    line-height: 1;
    padding: 0.5rem 1rem 0.7rem;
    margin-bottom: -0.5rem; /* キャラと少し重ねる */
    letter-spacing: -0.3px;
}

.dot-space {
    margin-left: -0.4rem;
    margin-right: -1rem;
}

/* --- キャラクター画像 --- */
.step-char {
    position: relative;
    z-index: 3; 
    height: 130px; 
    margin-bottom: 1rem; 
}
.step-char img {
    height: 100%;
    width: auto;
}

/* ▼▼▼ キャラクターのフェードインアニメーション ▼▼▼ */
.fade-char {
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-char.is-active {
    opacity: 1;
    transform: translateY(0); 
}
.step-01 .fade-char { transition-delay: 0.1s; }
.step-02 .fade-char { transition-delay: 0.4s; }
.step-03 .fade-char { transition-delay: 0.8s; }
.step-04 .fade-char { transition-delay: 1.0s; }

/* --- 下の説明ボックス --- */
.step-box {
    position: relative;
    z-index: 2; /* キャラより下 */
    background: var(--white);
    padding: 2rem 2rem;
    border: 1px solid var(--black);
    width: 100%;
    min-height: 120px;
}
.step-text {
    font-size: 1.8rem;
    line-height: 1.6;
    text-align: justify;
    margin: 0;
    letter-spacing: -0.2px;
}


/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .sec-careers {
        padding: 6rem 0 0;
        overflow: hidden; 
    }
    .careers-lead {
        text-align: left;
        margin-bottom: 4rem;
        font-size: 1.4rem;
    }
    
    .career-scroll-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important; 
        -ms-overflow-style: none; 
        scrollbar-width: none; 
        margin: 0 -2rem;
        padding: 0 2rem;
        width: calc(100% + 4rem);
    }
    
    .career-scroll-inner {
        padding: 0 2rem;
        width: 1000px; 
    }
    
    
    .career-scroll-wrapper::-webkit-scrollbar {
        display: none; 
    }
    
    .career-steps {
        width: 100%;
        min-width: auto; 
        padding-top: 3rem; 
        padding-bottom: 10rem;
    }
    
    .career-bg-arrow {
        top: 0;
        width: 70%;
    }
    
    .step-label {
        font-size: 2.6rem;
        padding: 0.8rem 1rem;
    }
    .step-text {
        font-size: 1.4rem;
    }
    .step-char {
        height: 110px;
    }
    .step-box {
        min-height: 100px;
    }
    
    /* ▼▼▼ SP版の階段背景の調整（ここが超重要！） ▼▼▼ */
    .step-item::before {
        top: 13rem; 
    }
    
    /* ▼ SP版：地面（padding-bottom: 2rem）までピッタリ伸ばす計算式 */
    .step-01::before { bottom: -10rem; }
    .step-02::before { bottom: calc(-4rem - 10rem); } /* 浮き上がり(4rem) + 地面(10rem) */
    .step-03::before { bottom: calc(-8rem - 10rem); }
    .step-04::before { bottom: calc(-12rem - 10rem); }

    .step-01 .fade-char { transition-delay: 0.1s; }
    .step-02 .fade-char { transition-delay: 0.3s; }
    .step-03 .fade-char { transition-delay: 0.5s; }
    .step-04 .fade-char { transition-delay: 0.7s; }
    
    /* ▼ スクロール暴走を防ぎつつ、端の隙間を埋める魔法！ */
    .step-01::before {
        width: calc(100% + 5rem); /* 自分の幅 ＋ 左のはみ出し分 */
        left: -5rem;              /* 左に突き出させる */
        right: auto;
    }
    .step-04::before {
        width: calc(100% + 5rem); /* 自分の幅 ＋ 右のはみ出し分 */
        left: 0;                  /* 右に突き出させる */
    }
    
    /* ▼ スクロール暴走を防ぎつつ、端の隙間を埋める魔法！ */
    .step-01 .step-box::before {
        width: calc(100% + 100vw); /* 100vwで画面外まで確実に伸ばす */
        left: -100vw;              
        right: auto;
    }
    .step-04 .step-box::before {
        width: calc(100% + 100vw); 
        left: 0;                  
    }
}


/* ========================================================
       魔法のコード：特定のカードだけをinnerから抜け出させる！
======================================================== */
@media screen and (max-width: 768px) {
    .voice-content, .cert-box, .cert-list-box {
        /* ▼ 1. 画面いっぱいの幅(100vw)から、左右1remずつ（計2rem）を引いた幅にする */
        width: calc(100vw - 2rem) !important;
        /* ▼ 2. innerの制限を無視して、画面左端から「1rem」の位置に強制移動させる計算式 */
        margin-left: calc(50% - 50vw + 1rem) !important;
        box-sizing: border-box;
    }
}


/* ========================================================
   VOICES & CERTIFICATION SUPPORT：見出しの線を白に変更
   ======================================================== */
.sec-voices .common-sec-head .mh-line-v,
.sec-voices .common-sec-head .mh-line-h,
.sec-cert .common-sec-head .mh-line-v,
.sec-cert .common-sec-head .mh-line-h,
.sec-entry .common-sec-head .mh-line-v,
.sec-entry .common-sec-head .mh-line-h{
    background-color: var(--white);
}



/* ========================================================
   画面を貫く縦線（Q&A 〜 ENTRY 共通）
   ======================================================== */
.split-line-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
/* PC版の「左から650px(約40%位置)」の比率を維持する設定 */
.split-line {
    position: absolute;
    top: 0;
    left: 40%; /* 画面幅が1600pxの時に640px付近になる比率 */
    width: 1px;
    height: 100%;
    background-color: var(--black); /* Q&Aは黒線 */
}
.split-line.line-white {
    background-color: var(--white); /* ENTRYはグレー線 */
}

/* ========================================================
   左右分割レイアウト（Q&A 〜 ENTRY 共通）
   ======================================================== */
.split-layout {
    display: flex;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* --- 縦線（inner内を貫く） --- */
.split-line {
    position: absolute;
    top: 0;
    /* 見出しとコンテンツの間（左から約35%付近）に配置 */
    left: 35%; 
    width: 1px;
    height: 100%;
    background-color: var(--black); /* Q&Aの黒線 */
    z-index: 0;
}
.split-line.line-white {
    background-color: var(--white); /* ENTRYのグレー線 */
}

/* --- 左側：見出しエリア --- */
.split-left {
    /* 縦線の左側（35%幅） */
    width: 35%;
    flex-shrink: 0;
    padding: 12rem 11rem 10rem 0; /* 右側に11remの余白（縦線まで） */
    box-sizing: border-box;
}

.split-left .common-sec-head {
    /* 見出しを左に寄せる */
    margin: 0;
    left: 0;
    transform: none;
}

/* --- 右側：コンテンツエリア --- */
.split-right {
    /* 縦線の右側（65%幅） */
    width: 65%;
    padding: 0 0 0 10rem; /* 左側に10remの余白（縦線まで） */
    box-sizing: border-box;
}

.sec-entry .split-right {
    padding: 12rem 0 12rem 10rem; /* 左側に10remの余白（縦線まで） */
}


/* ========================================================
   Q&A (よくあるご質問)
   ======================================================== */
.sec-qa {
    background-color: var(--white);
    padding: 0; /* innerとsplit-layoutで制御 */
}

/* --- 右側スクロール領域 (PCのみ) --- */
.qa-scroll-area {
    height: 85rem; 
    overflow-y: auto;
    padding-right: 2rem; /* スクロールバーとの余白 */
    
    /* スクロールバーのデザイン */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #eee;
}
.qa-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.qa-scroll-area::-webkit-scrollbar-track {
    background: #eee;
}
.qa-scroll-area::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
}

/* --- Q&A アイテム --- */
.qa-list {
    /* パディングは .split-right 側で持つため不要 */
    padding: 12rem 0;
    margin: 0;
}
.qa-item {
    margin-bottom: 5.6rem;
}
.qa-item:last-child {
    margin-bottom: 0;
}

/* 質問 (水色アニメーション) */
.qa-q {
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 2.4rem;
    line-height: 1.6;
}

/* ▼ 修正：親枠（.js-scroll-anim）の中にある .vc-line をアニメーションさせる */
.qa-q .js-scroll-anim .vc-line {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block; /* 独立した箱として横に並べる */
    vertical-align: bottom; /* 縦のズレを防止 */
}

/* 発火時 */
.qa-q .js-scroll-anim.is-active .vc-line {
    clip-path: inset(0 0 0 0);
}

/* ▼▼▼ 追加：ワイプアニメーションを親枠（.vc-line）に移動！ ▼▼▼ */
.qa-q .vc-line {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.qa-q .vc-line.is-active {
    clip-path: inset(0 0 0 0);
}

/* 水色背景のデザイン本体 */
.qa-q .vc-bg {
    /* ▼ 修正：バグの原因になる子要素側のアニメーションは強制解除する */
    clip-path: none !important; 
    transition: none !important;

    margin-right: 0 !important; 
    line-height: 1;
    padding: 0.3rem 1rem 0.8rem;
    display: inline-block; /* 普通の四角い箱に戻す */
}

/* 回答 */
.qa-a {
    font-size: 1.8rem;
    line-height: 1.8;
}


/* ========================================================
   ENTRY (応募フォーム)
   ======================================================== */
.sec-entry {
    padding: 0; /* innerとsplit-layoutで制御 */
}

/* エントリーメッセージ */
.entry-msg {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-top: 8rem; 
    text-align: left;
}

.entry-form-wrapper {
    width: 100%;
}

/* --- フォーム各行 --- */
.form-row {
    margin-bottom: 4rem;
}
.form-row dt {
    font-weight: bold;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.8rem;
    color: var(--white);
}

/* ▼▼▼ 追加：ラジオボタンとファイル選択の崩れを直す魔法 ▼▼▼ */
.sec-entry input[type="radio"],
.sec-entry input[type="checkbox"],
.sec-entry input[type="file"] {
    /* デフォルトの丸いポチやボタンを復活させる */
    -webkit-appearance: auto;
    appearance: auto;
    width: auto;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
/*    accent-color: var(--accent); */
}

/* ラジオボタンをスマホでも押しやすく少し大きくする微調整 */
.radio-wrap input[type="radio"] {
    margin: 0;
    transform: scale(1.2); 
}
/* ▲▲▲ 追加ここまで ▲▲▲ */

/* ラベル (必須/任意) */
.req, .any {
    font-size: 1.4rem;
    padding: 0.2rem 0.8rem;
    border-radius: 2px;
    font-weight: bold;
}
.req {
    background: var(--accent);
    color: var(--black);
}
.any {
    background: var(--black);
    color: var(--white);
}

/* 入力エリア */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
    padding: 1.5rem 1.7rem;
    border: none;
    border-radius: 4px;
    background: #fdfdfd; 
    font-size: 1.6rem;
}
.form-row input[type="text"],
.form-row input[type="tel"] {
    width: 50%;
}
.form-row input[type="email"],
.form-row textarea {
    width: 100%;
}


.form-row textarea {
    resize: vertical;
}

/* ラジオボタンの横並び */
.radio-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
    color: var(--white);
    font-size: 1.6rem;
}
.radio-wrap label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* 送信ボタン */
.form-submit {
    margin-top: 6rem;
    text-align: left; /* 左揃え */
}
.sec-entry .btn-submit {
    display: block;
    width: 100%;
    max-width: 16rem;
    margin: 3rem auto 0;
    padding: 0.8rem 1.5rem;
    background: var(--accent);
    color: var(--black);
    font-size: 2.2rem;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}
.sec-entry .btn-submit:hover {
    background: var(--black);
    color: var(--accent);
}

/* ========================================================
   プレースホルダーの色を全ブラウザで統一！
   ======================================================== */
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: #aaa; 
    /* Firefoxが勝手に半透明にするのを防ぐ魔法 */
    opacity: 1; 
}

/* ========================================================
   ファイル選択のカスタムデザイン（偽物ボタン作戦）
   ======================================================== */
.file-wrap {
    display: flex;
    align-items: center; 
    gap: 1.5rem; 
}


.file-wrap input[type="file"] {
    display: none;
}


.file-btn {
    display: flex;
    align-items: center;
    justify-content: start; 
    width: 30%; 
    min-width: 16rem; 
    padding: 1.5rem 1.7rem; 
    background: #fdfdfd; 
    border: none;
    border-radius: 4px; 
    font-size: 1.6rem; 
    cursor: pointer;
    color: #aaa;
}


.file-name {
    color: var(--white);
    font-size: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%; 
}

.mfp_element_file{
    color: var(--white);
}

/* ========================================================
   カスタムラジオボタン（背景白 ＋ 水色ポチ）
   ======================================================== */
.radio-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
    color: var(--white);
    font-size: 1.6rem;
}

.radio-wrap label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    position: relative;
}

/* ▼ 1. 元のダサいラジオボタンは完全に消し去る */
.radio-wrap input[type="radio"] {
    display: none;
}

/* ▼ 2. デフォルトっぽい「白い丸」を作る */
.radio-wrap label::before {
    content: "";
    display: inline-block;
    width: 2rem;  /* スマホでも押しやすい少し大きめサイズ */
    height: 2rem;
    border: 1px solid #ccc; /* デフォルトっぽいグレーの枠線 */
    background-color: var(--white); /* ★ここ！中を白く塗りつぶす！ */
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0; /* 文字が長くなっても丸が潰れないようにする */
}

/* ▼ 3. 中の「水色ポチ」を作る（初期状態は縮めて見えなくしておく） */
.radio-wrap label::after {
    content: "";
    position: absolute;
    top: 50%;
    /* 外枠の幅(2rem)の半分の位置を中心に設定 */
    left: 1rem; 
    transform: translate(-50%, -50%) scale(0); /* scale(0)で見えない状態 */
    width: 1.2rem;  /* 水色ポチのサイズ */
    height: 1.2rem;
    background-color: var(--accent); /* ★アクセントカラー！ */
    border-radius: 50%;
    transition: transform 0.05s ease-in-out;
}

/* ▼ 4. 選択された時だけ、水色ポチを拡大して表示！ */
.radio-wrap label:has(input[type="radio"]:checked)::after {
    transform: translate(-50%, -50%) scale(1);
}


/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    /* 縦線を消す */
    .split-line {
        display: none;
    }
    
    /* 左右分割を縦積みに変更 */
    .split-layout {
        flex-direction: column;
    }
    .split-left,
    .split-right,
    .sec-entry .split-right {
        width: 100%;
        padding: 0; /* PC版の余白をリセット */
    }
    
    
    /* 見出しを中央に戻す */
    .split-left .common-sec-head {
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }

    /* --- Q&A --- */
    .sec-qa {
        padding: 6rem 0;
    }
    .sec-qa .split-left {
        padding: 0 0 6rem; 
    }
    
    .qa-list  {
        padding: 0;
    }
    
    /* スクロール領域を解除し、全表示にする */
    .qa-scroll-area {
        height: auto;
        overflow: visible;
        padding: 0; 
    }
    .qa-q {
        font-size: 2.6rem;
        margin-bottom: 2rem;
    }
    .qa-q .vc-bg {
        padding: 0.2rem 1rem 0.6rem;
    }
    .qa-a {
        font-size: 1.4rem;
    }
    .qa-item {
        margin-bottom: 4rem;
    }
    .qa-q .js-scroll-anim .vc-line:nth-of-type(2) {
        transition-delay: 0.2s; /* 0.2秒遅れてシュッと出る！ */
    }
    
    /* --- ENTRY --- */
    .sec-entry {
        padding: 6rem 0;
    }
    .sec-entry .split-left {
        padding: 0 0 4rem; 
    }
    .entry-msg {
        text-align: left;
    }
    .form-row {
        margin-bottom: 3rem;
    }
    .form-row dt {
        font-size: 1.4rem;
    }
    .radio-wrap {
        display: grid; /* flexからgridに変更 */
        grid-template-columns: 1fr 1fr; /* 均等な2列にする！ */
        gap: 1.5rem 1rem; /* 縦の隙間1.5rem、横の隙間1rem */
        font-size: 1.4rem; /* スマホ用に少し文字を小さく */
    }
    .form-submit {
        text-align: center;
    }
    .btn-submit {
        width: 100%; 
        padding: 1.5rem;
    }
    
    .file-wrap {
        flex-direction: column; 
        align-items: flex-start;
    }
    .file-btn {
        width: 100%; 
        max-width: 20rem;
        padding: 1.5rem; 
    }
}

/* ========================================================
   FOOTER
   ======================================================== */
.footer {
    background: var(--white);
    border-top: solid 1px var(--black);
}

/* 共通のinnerに対して、フッター専用の上下余白をつける */
.footer .inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* --- 上部：ロゴとナビゲーション --- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    height: 6rem; 
}

/* PC用ナビゲーション */
.footer-nav-list {
    display: flex;
    align-items: center;
    /* 1200pxの中に綺麗に収まるように、少しだけ隙間を調整 */
    gap: 3rem; 
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav-list a {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--black);
    text-decoration: none;
}

/* --- 下部：コピーライト --- */
.footer-bottom {
    /* 画像に合わせて、黒っぽいしっかりした区切り線を引く */
    border-top: 1px solid var(--black); 
    text-align: center;
    padding: 0.8rem 0 1rem;
}

.copyright {
    font-size: 1.4rem;
    color: var(--black);
    font-family: var(--font_en);
    margin: 0;
}

/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .footer .inner {
        padding-top: 6rem;
        padding-bottom: 4rem;
    }

    /* 縦積みに変更 */
    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
    }

    .footer-logo {
        width: 90%; 
    }

    .footer-nav {
        width: 100%;
    }

    /* ▼▼▼ SP版：2列のグリッドレイアウト ▼▼▼ */
    .footer-nav-list {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 均等な2列 */
        row-gap: 3rem; /* 縦の隙間 */
        column-gap: 4.5rem; /* 横の隙間 */
        
        /* リスト全体を中央に配置しつつ、文字は左揃えにする魔法 */
        width: fit-content;
        margin: 0 auto; 
    }

    .footer-nav-list a {
        font-size: 1.4rem; 
    }
    
    .footer-bottom {
        /* 上：1.5rem、左右：2rem、下：1.5rem ＋ 固定メニューの高さ(60px) */
        padding: 0.5rem 2rem calc(0.8rem + 60px);
    }
    .copyright {
        font-size: 1.2rem;
        line-height: 1.4;
    }
}

/* ========================================================
   スクロール着地点の調整（透明な的作戦）
   ======================================================== */
.sec-entry {
    position: relative; /* 的の基準位置にする */
}

.scroll-target {
    position: absolute;
    /* ▼ PC版ヘッダーの高さ（7rem）分、上空に的を配置する！ */
    top: -7rem; 
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ========================================================
   SP対応 (max-width: 768px)
   ======================================================== */
@media screen and (max-width: 768px) {
    .scroll-target {
        /* ▼ SP版ヘッダーの高さ（76px）分、上空に的を配置する！ */
        top: -76px; 
    }
}



/* ========================================================
   Mailformproのシステム用隠し要素を非表示にする
   ======================================================== */
#mfp_hidden {
    display: none !important;
}

.mfp_err {
    color: var(--white);
}

/* ========================================================
   Mailformproの警告・エラーメッセージの装飾
   ======================================================== */
#mfp_warning {
    color: var(--white) !important; /* ご要望の白文字！ */
    font-size: 1.6rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 3rem; /* フォームとの間に余白を空ける */
}

/* ========================================================
   Mailformproのおせっかい自動サイズを強制リセット
   ======================================================== */
.form-row textarea.mfp_element_textarea {
    width: 100% !important;  /* JSの指定を強制的に上書きして100%幅にする！ */
    height: auto !important; /* または 200px !important などお好みで */
    min-height: 150px;
}


/* ========================================================
   ScrollHintのz-index調整（裏に隠れるの防止）
   ======================================================== */
.scroll-hint-icon-wrap {
    /* サイト内の他の要素（背景や枠線）より確実に上に来る数値を指定！ */
    /* ※もし変数（var(--z_toast)など）があればそれに合わせてもOKです */
    z-index: var(--z_toast) !important; 
    pointer-events: none !important;
}

@media screen and (max-width: 768px) {
    /* スクロールの動きをスマホに最適化！ */
    .js-scrollable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* iPhoneで滑らかにスクロールさせる魔法 */
    }
}

/* ========================================================
   PC版ではScrollHint（スクロールアイコン）を完全に隠す
   ======================================================== */
@media screen and (min-width: 769px) {
    .scroll-hint-icon-wrap {
        display: none !important; /* PCの時は強制的に非表示！ */
    }
}



/* ========================================================
   サンクスページ (thanks.html) 用スタイル
   ======================================================== */
.main-thanks {
    /* 固定ヘッダーの分だけ上の余白をガッツリ取る */
    padding: 22rem 2rem 18rem; 
    text-align: center;
    /* フッターが画面の中途半端な位置に浮かないように高さを確保 */
    min-height: calc(100vh - 350px); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.thanks-title {
    font-family: var(--font_en);
    font-size: 7.2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 4rem;
    line-height: 1;
}
.thanks-message {
    font-size: 1.8rem;
    line-height: 2;
    margin-bottom: 6rem;
}

/* 戻るボタン */
.btn-back {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--accent);
    color: var(--black);
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0.8rem 3rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: var(--black);
    color: var(--accent);
}

@media screen and (max-width: 768px) {
    .main-thanks {
        padding: 15rem 2rem 10rem;
    }
    .thanks-title {
        font-size: 5.6rem;
    }
    .thanks-message {
        font-size: 1.4rem;
        text-align: left; /* スマホでは読みやすく左揃え */
    }
    
    .btn-back {
        font-size: 1.4rem;
    }
}

/* ========================================================
   PC版レスポンシブ (1370px 〜 769px) の右端ドロワー
   ======================================================== */

/* 基本は非表示 */
.pc-drawer-trigger, .pc-menu-modal { display: none; }

@media screen and (min-width: 769px) and (max-width: 1370px) {
    /* 通常のPCナビを消す */
    .pc-nav { display: none !important; }

    /* ★ヘッダーを最前面（暗幕の上）に固定 */
    .header { z-index: var(--z_toast) !important; }

    /* ヘッダー右端に固定されるENTRY/MENUブロック */
    .pc-drawer-trigger {
        display: flex;
        position: absolute;
        top: 0; right: 0;
        width: 40rem; /* ここがボタンとモーダルの横幅になります */
        height: 100%; /* ヘッダーの高さに追従 */
        border-left: 1px solid var(--black);
    }
    .drawer-btn-entry, .drawer-btn-menu {
        flex: 1; /* 横幅を均等に半分こ（160pxずつ） */
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font_en);
        font-weight: bold;
        font-size: 1.8rem;
        text-decoration: none;
        transition: opacity 0.3s;
    }
    .drawer-btn-entry {
        background: var(--accent);
        color: var(--black);
        border-right: 1px solid var(--black);
    }
    .drawer-btn-menu {
        background: var(--black);
        color: var(--accent);
    }

    /* -------------------------------------------
       モーダル本体のデザイン
       ------------------------------------------- */
    .pc-menu-modal {
        display: block;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100vh;
        z-index: 9998; /* ヘッダーより1つ下 */
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .pc-menu-modal.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* 暗幕 */
    .pc-menu-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.4);
    }
    
    /* メニューの白い箱（ボタンと全く同じ幅で下に伸びる） */
    .pc-menu-inner {
        position: absolute;
        top: 0; right: 0;
        width: 40rem; /* ★上のボタンブロックと同じ幅！ */
        height: 100vh;
        background: var(--white);
        border-left: 1px solid var(--black);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        
        /* ヘッダーの高さ分だけ、メニューリストを下に押し下げる（11rem = 110px） */
        padding-top: 11rem; 
    }
    .pc-menu-modal.is-open .pc-menu-inner {
        transform: translateX(0);
    }

    /* スクロールしてヘッダーが縮んだ時は、押し下げる幅も減らす（8rem = 80px） */
    .is_scroll .pc-menu-inner {
        padding-top: 8rem;
    }

    /* -------------------------------------------
       ★100vhを均等に割るメニューリスト
       ------------------------------------------- */
    .pc-menu-list {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0; padding: 0;
        height: 100%; /* ヘッダー分を除いた残りの高さをフルに使う */
    }
    .pc-menu-list li {
        flex: 1; /* 高さを均等に分割する魔法！ */
        border-top: 1px solid var(--black);
    }
    /* 最後のアイテムの下にも線を引く */
    .pc-menu-list li:last-child {
        border-bottom: 1px solid var(--black);
    }
    .pc-menu-list a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%; height: 100%;
        background: var(--white);
        color: var(--black);
        font-size: 1.8rem;
        font-weight: bold;
        text-decoration: none;
        transition: background-color 0.2s, color 0.2s;
    }
    /* ホバーで水色＆黒文字 */
    .pc-menu-list a:hover {
        background: var(--accent);
        color: var(--black);
    }
}



/* ========================================================
   
   ======================================================== */