@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');

/* ========================================================
   変数 (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;
    --font_mincho: "Yu Mincho", "YuMincho", "游明朝", "游明朝体", 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;
}
.pc_only02 {
    display: block;
}

.sp_only {
    display: none;
}
.tb_only_1200 {
    display: none;
}
@media screen and (max-width: 1200px) {
    .pc_only02 {
    display: none;
}
    .tb_only_1200 {
    display: block;
}
}
@media screen and (max-width: 768px) {
    .pc_only {
        display: none;
    }
    .pc_only02 {
    display: block;
}
    .sp_only {
        display: block;
    }
    .tb_only_1200 {
    display: none;
}

    .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;
    }

    /* 必要に応じて追加 */
}

/* ========================================================
   アニメーション (下からフェード ＆ 遅延完全対応版)
   ======================================================== */

/* --- 【初期状態】画面に出る前（透明 ＆ 少し下に下げておく） --- */
.trigger.fade_in {
    opacity: 0;
    margin-top: 20px; /* ★ここで「下から」の移動量を復活！ */
    /* アニメーション時間：0.8秒 */
    transition-property: opacity, margin-top;
    transition-duration: 0.8s;
    transition-timing-function: ease;
    transition-delay: 0s; /* デフォルトの遅延は0秒 */
}

/* --- 【着火時】JSで .animation クラスがついたら不透明 ＆ 元の位置へ --- */
.trigger.fade_in.animation {
    opacity: 1;
    margin-top: 0; /* ★元の位置に上がってくる */
}

/* --- ディレイ（遅延）の設定 --- */
/* 強制的に遅延を上書き適用します */
.delay02 { transition-delay: 0.2s !important; }
.delay04 { transition-delay: 0.4s !important; }
.delay06 { transition-delay: 0.6s !important; }
.delay08 { transition-delay: 0.8s !important; }

/* ========================================================
   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;
    }
}

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

/* ========================================================
   ヘッダー
   ======================================================== */
.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;
}


/* ========================================================
   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,
    .sp-btn-tel {
        width: 33.333%;
        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: #ffff00;
        color: #069c8c;
        border-left: 1px solid var(--black);
    }

    .sp-btn-menu {
        background: var(--black);
        color: var(--accent);
    }
    .sp-btn-tel {
        background: var(--accent);
        color: var(--black);
    }
}

/* ========================================================
   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;
    }

}

/* ========================================================
   共通設定 & ユーティリティ
   ======================================================== */
/* --- 共通見出しデザイン (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;
}
@media screen and (max-width: 1024px) {
    .csh-title {
        font-size: 5.2rem;
    }
}
/* 既存の .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: 6rem;
        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;
    }
}


/* --- グリッドと線の魔法 --- */
.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;
}
p {
        font-size: 1.8rem;
    }
@media screen and (max-width: 768px) {
    p {
        font-size: calc(100vw * (27 / 750));
    }
}

/* ========================================================
   リストの列幅（比率）を左右で非対称にする魔法
   ======================================================== */
@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 3rem 3rem;
    }
    
    /* 最後のアイテムだけ下に線を引く（これで線が重ならず、すべて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%);
    }
}


/* ========================================================
   左右分割レイアウト（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 2rem 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の余白（縦線まで） */
}





/* ========================================================
   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: #ffff00;
        color: #069c8c;
        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);
    }
}
/* ========================================================
   共通
   ======================================================== */
   #dry_ice .inner {
    padding: 0;
   }
   @media screen and (max-width: 1200px) {
    #dry_ice .inner {
        width: 96%;
        margin: 0 auto;
    }
   }
/* ========================================================
   btn
   ======================================================== */
#dry_ice .tel_btn {
    width: 40rem;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #069c8c;
    border: 2px solid #069c8c;
    position: relative;
    border-radius: 8rem;
    padding-left: 46px;
    box-shadow: 3px 9px 8px 2px rgba(0, 0, 0, 0.05);
}
#dry_ice .tel_btn::before {
    content: '';
    display: inline-block;
    width: 27px;
    height: 26px;
    background-image: url(../img/icon_tel.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 7.5%;
    transform: translateY(-50%);
}
#dry_ice .tel_btn .dry_ice_no {
    font-weight: 900;
    font-size: 3rem;
    padding-bottom: 6px;
}
#dry_ice .form_btn {
    width: 40rem;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffff00;
    color: #069c8c;
    border: 2px solid #069c8c;
    position: relative;
    border-radius: 8rem;
    font-size: 2.4rem;
    font-weight: bold;
    padding-left: 10px;
    box-shadow: 3px 9px 8px 2px rgba(0, 0, 0, 0.05);
}
#dry_ice .form_btn::before {
    content: '';
    display: inline-block;
    width: 27px;
    height: 26px;
    background-image: url(../img/icon_form.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
    #dry_ice .tel_btn,
    #dry_ice .form_btn {
        width: 96%;
        height: calc(100vw * (100 / 750));
    }
}

/* ========================================================
   MV
   ======================================================== */
   #dry_ice .mv,
#dry_ice .mv-content {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden; /* 横スクロールバーの発生を防ぐ */
}
#dry_ice .mv {
    height: auto;
    min-height: auto;
    padding-top: 110px;
}

#dry_ice .mv .mv-content {
    position: relative;
}


#dry_ice .mv .mv_txt,
#dry_ice .mv .mv_speech_bubble {
    position: absolute;
}

#dry_ice .mv .mv_txt {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 43.15%;
}

#dry_ice .mv .mv_speech_bubble {
    top: 0;
    right: -8px;
    width: calc(100vw * (240 / 1600));
    height: calc(100vw * (240 / 1600));
}
#dry_ice .mv picture,
#dry_ice .mv picture img {
    display: block;  /* 下部の不要な隙間を消す */
    width: 100%;     /* 横幅を画面いっぱいに広げる */
    height: auto;    /* 高さはアスペクト比に合わせて自動調整 */
}
@media screen and (max-width: 1200px) {
    #dry_ice .mv {
        padding-top: 90px; /* ヘッダーの縮小幅に合わせて数値を微調整 */
    }
}

@media screen and (max-width: 768px) {
    #dry_ice .mv {
        padding-top: 0;
    }
    #dry_ice .mv .mv_txt {
        width: 96%;
        top: 47%;
    }
    #dry_ice .mv .mv_speech_bubble {
        top: auto;
    bottom: 11%;
    right: auto;
    width: calc(100vw * (250 / 750));
    left: 4%;
    }
}

/* ========================================================
   販売・レンタル承ります！〜
   ======================================================== */
.dry_ice_cta {
    background-color: var(--accent);
    position: relative;
    text-align: center;
    padding-top: 75px;
    padding-bottom: 36px;
}

.dry_ice_speech_bubble {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 20px; /* 三角の高さ分、下に余白を作る（次の要素と被らないため） */
  
  /* 以下はすでに入っていると思いますが、背景色とドットの指定 */
  background-color: #4d4d4d;
  background-image: 
    radial-gradient(rgba(0, 234, 224, 0.4) 1px, transparent 1px),
  radial-gradient(rgba(0, 234, 224, 0.4) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 24px 12px;
  
  /* 文字の読みやすさのための余白や色（必要に応じて調整してください） */
  color: #fff;
  width: 996px;
  padding: 16px;
  border: 2px solid var(--accent);
  font-size: 2.4rem;
  background-clip: padding-box;
}

.dry_ice_speech_bubble::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -20px; /* 三角の高さ分、下へ */
  left: 50%;
  transform: translateX(-50%);
  
  /* 三角のサイズ */
  width: 36px;  
  height: 20px; 
  
  /* 先に三角の形に切り抜く */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  
  /* ★ここで線の色（#00eae0）で塗りつぶす */
  background-color: #00eae0; 
}
.dry_ice_speech_bubble::after {
  content: "";
  position: absolute;
  z-index: 2; /* 線の要素（z-index: 1）よりも手前に重ねる */
  
  /* ★ポイント：線の太さ分（左右2px、上0px）だけ内側に小さく配置する */
  bottom: -17px; 
  left: 50%;
  transform: translateX(-50%);
  
  /* 線の太さ2px分、横幅を小さくする（36px - 4px = 32px） */
  width: 32px;  
  /* 線の太さ2px分、縦を小さくする（20px - 2px = 18px） */
  height: 18px; 
  
  /* 吹き出し本体と「全く同じ」ドット背景 */
  background-color: #4d4d4d;
  background-image: 
    radial-gradient(rgba(0, 234, 224, 0.4) 1px, transparent 1px),
  radial-gradient(rgba(0, 234, 224, 0.4) 1px, transparent 1px);
  background-size: 24px 30px;
  background-position: 0 0, 32px 20px;

  /* 同じく三角に切り抜く */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.dry_ice_cta .flex {
    gap: 10px;
    justify-content: center;
}
@media screen and (max-width: 1200px) {
    .dry_ice_speech_bubble {
        top: 1rem;
    }
}
@media screen and (max-width: 1000px) {
    .dry_ice_speech_bubble {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .dry_ice_speech_bubble {
        width: 96%;
        font-size: calc(100vw * (30 / 750));
        padding: 8px 0;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
    }
    .dry_ice_cta .flex {
        flex-direction: column;
        gap: calc(100vw * (20 / 750));
        align-items: center;
    }
    .dry_ice_cta {
        padding-bottom: calc(100vw * (60 / 750));
        padding-top: calc(100vw * (180 / 750));
    }
}

/* ========================================================
   -79℃の氷点下ベスト
   ======================================================== */
   .dry_ice_sec01 {
    background-image: url(../img/bg01.jpg);
    background-repeat: repeat;
    background-size: contain;
    padding: 3.6rem 0 7.2rem;
   }
   .dry_ice_sec01 hgroup {
    text-align: center;
    text-shadow: 0 0 8px  #fff, /* 輪郭をはっきりさせるための強い白 */
    0 0 8px  #fff, /* 2枚重ねてさらに濃く */
    0 0 8px  #fff, /* 2枚重ねてさらに濃く */
    0 0 12px #fff, /* 中間の広がり */
    0 0 20px #fff;
   }
   .dry_ice_sec01 hgroup p {
    font-size: 3.2rem;
    font-weight: bold;
   }
   .dry_ice_sec01 hgroup h2 {
    font-size: 6rem;
    line-height: 1;
   }
   .dry_ice_sec01 hgroup h2 span {
    font-family: var(--font_mincho);
    font-style: italic;
   }
   .dry_ice_sec01 hgroup h2 .big {
    font-size: 9rem;
   }
   .dry_ice_sec01 ul.flex {
    justify-content: space-around;
    align-items: flex-end;
    margin: 1.7rem 0 3rem;
    flex-wrap: nowrap;
   }
   .dry_ice_sec01 ul.flex li {
    max-width: 370px;
   }
   .dry_ice_caution {
    text-align: center;
    font-size: 1.8rem;
   }
   @media screen and (max-width: 768px) {
    .dry_ice_sec01 {
        padding-top: calc(100vw * (100 / 750));
    }
    .dry_ice_sec01 hgroup p {
        font-size: calc(100vw * (32 / 750));
    }
    .dry_ice_sec01 hgroup h2 {
        font-size: calc(100vw * (60 / 750));
    }
    .dry_ice_sec01 hgroup h2 .big {
        font-size: calc(100vw * (90 / 750));
    }
    .dry_ice_sec01 ul.flex {
        display: block;
    }
    .dry_ice_sec01 ul.flex li {
        margin: 0 auto 1rem;
        max-width: none;
        width: calc(100vw * (555 / 750));
    }
    .dry_ice_sec01 ul.flex li img{
        width: 100%;
    }
    .dry_ice_caution {
        width: 96%;
        font-size: calc(100vw * (27 / 750));
    }
   }
/* ========================================================
   暑い夏、こんなお悩みはありませんか？
   ======================================================== */
   .dry_ice_sec02_top {
    background-color: #4d4d4d;
    padding-bottom: 10rem;
   }
   .dry_ice_sec02_top h2,
   .dry_ice_sec03 h2,
   .sec-entry h2 {
    border-bottom: 1px solid #fff;
    color: #fff;
    text-align: center;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 2.2;
   }
   .dry_ice_sec02_top ul.flex {
    margin: 10rem 0 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 3rem
   }
   .dry_ice_sec02_top_content {
  flex: 1;
  display: flex;
  flex-direction: column; /* 上下に並べる */
}

/* ＝★ここがポイント：疑似要素で画像エリアの比率を作る＝ */
.dry_ice_sec02_top_content::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 画像の【縦 ÷ 幅 × 100】の％（4:3なら75%） */
  
  /* 背景画像の基本設定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* content01の疑似要素（画像エリア）にだけ背景画像を指定 */
.dry_ice_sec02_top_content.content01::before {
  background-image: url('../img/sec02_top_img01.jpg');
}
.dry_ice_sec02_top_content.content02::before {
  background-image: url('../img/sec02_top_img02.jpg');
}
.dry_ice_sec02_top_content.content03::before {
  background-image: url('../img/sec02_top_img03.jpg');
}
/* content02, content03 に画像を足す場合も同様に指定可能 */
/* .dry_ice_sec02_top_content.content02::before { background-image: ... } */

/* 下に押し出されるテキストの指定 */
.dry_ice_sec02_top_content p {
  margin: 0;
  padding-top: 1.6rem;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.6;
  color: #fff;
}
.dry_ice_sec02_bottom {
    padding-bottom: 22rem;
}
.dry_ice_sec02_bottom h2 {
    background-color: var(--accent);
    text-align: center;
    padding: 8px 0;
    border: 1px solid #4d4d4d;
    font-size: 3.6rem;
    line-height: 1.7;
}
.dry_ice_sec02_bottom h2 .c_accent {
    background-color: #fff;
    padding: 0 8px;
}
.dry_ice_sec02_bottom_content {
    margin-top: 10rem;
}
.dry_ice_sec02_bottom_content li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    margin-top: 4rem;
}
.dry_ice_sec02_bottom_content li:first-child {
    margin-top: 0;
}
.dry_ice_sec02_bottom_content li .img_wrap {
    width: 50%;
    height: 0;
    padding-top: 33.333%;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}
.dry_ice_sec02_bottom_content li.content01 .img_wrap {
    background-image: url(../img/sec02_bottom_img01.jpg);
}
.dry_ice_sec02_bottom_content li.content02 .img_wrap {
    background-image: url(../img/sec02_bottom_img02.jpg);
}
.dry_ice_sec02_bottom_content li.content03 .img_wrap {
    background-image: url(../img/sec02_bottom_img03.jpg);
}
.dry_ice_sec02_bottom_content li.content02 {
    flex-direction: row-reverse;
}
.dry_ice_sec02_bottom_content li h3 {
    font-size: 3rem;
    font-weight: bold;
}
.dry_ice_sec02_bottom_content li p {
    margin-top: 1.5rem;
}
.dry_ice_sec02_bottom_content li div.flex {
    margin-top: 5rem;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.dry_ice_sec02_bottom_content li div.flex img {
    display: block;
    width: 32%;
}
 @media screen and (max-width: 768px) {
    .dry_ice_sec02_bottom {
        padding-bottom: calc(100vw * (160 / 750));
    }
    .dry_ice_sec02_bottom_content {
        margin-top: calc(100vw * (100 / 750));
    }
    .dry_ice_sec02_bottom_content li {
        flex-direction: column;
        gap: calc(100vw * (40 / 750));
        margin-top: calc(100vw * (120 / 750));
    }
    .dry_ice_sec02_bottom_content li .img_wrap,
    .dry_ice_sec02_bottom_content li .txt_wrap {
        width: 100%;
    }
    .dry_ice_sec02_bottom_content li .img_wrap {
        padding-top: 66.666%;
    }
    .dry_ice_sec02_top {
        padding-bottom: calc(100vw * (100 / 750));
    }
    
    .dry_ice_sec02_top h2,
   .sec-entry h2 {
    font-size: calc(100vw * (48 / 750));
    line-height: 1.5;
    padding: 8px;
   }
   .dry_ice_sec02_top ul.flex {
    display: block;
    width: 90%;
    margin: 0 auto;
    margin-top: calc(100vw * (100 / 750));
    margin-bottom: 0;
   }
   .dry_ice_sec02_top ul.flex li {
    margin-top: calc(100vw * (50 / 750));
   }
   .dry_ice_sec02_top ul.flex li:first-child {
    margin-top: 0;
   }
   .dry_ice_sec02_top_content p {
    font-size: calc(100vw * (32 / 750));
   }
   .dry_ice_sec02_bottom h2 {
    font-size: calc(100vw * (48 / 750));
   }
   .dry_ice_sec02_bottom_content li div.flex {
    margin-top: calc(100vw * (40 / 750));
   }
   .dry_ice_sec02_bottom_content li.content02 {
    flex-direction: column;
}
.dry_ice_sec02_bottom_content li h3 {
    font-size: calc(100vw * (40 / 750));
}
.dry_ice_sec02_bottom_content li p {
    margin-top: calc(100vw * (20 / 750));
}

 }
/* ========================================================
   さらに！ドライアイス製造機のみの販売・レンタルも行っております。
   ======================================================== */
.dry_ice_sec02_sup,
.dry_ice_sec05 {
    background-color: #e2f4f3;
    position: relative;
    padding: 10rem 0;
}
.dry_ice_sec02_sup {
    border-top: 1px solid #000;
}
.dry_ice_sec02_sup h2 {
    position: absolute;
    top: 0;
    text-align: center;
    max-width: 787px;
    letter-spacing: 0;
    
}
.dry_ice_sec02_sup h2 .icon_emphasis {
    position: absolute;
    top: -113%;
    left: -9%;
    font-family: var(--font_mincho);
    background-color: var(--accent);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-weight: 900;
    font-style: italic;
    transform: rotate(-8deg);
    letter-spacing: -7px;
    font-size: 3.3rem;
    padding-right: 5px;
}
.dry_ice_sec02_sup .dry_ice_sec02_sup_content {
    gap: 4rem;
    align-items: flex-start;
}
.dry_ice_sec02_sup .dry_ice_sec02_sup_content .txt_wrap {
    width: 45%;
}
.dry_ice_sec02_sup .dry_ice_sec02_sup_content .txt_wrap h3 {
    font-size: 2.4rem;
    background-color: var(--accent);
    padding: 8px;
    display: inline-block;
}
.dry_ice_sec02_sup .dry_ice_sec02_sup_content .txt_wrap p {
    margin-top: 2rem;
}
.dry_ice_sec02_sup .dry_ice_sec02_sup_content .txt_wrap p span {
    margin-top: 4rem;
    color: #4d4d4d;
}
.dry_ice_sec02_sup .dry_ice_sec02_sup_content .img_wrap {
    width: 50%;
    height: 0;
    padding-top: 33.333%;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../img/sec02_sup_img01.jpg);
}
div.caution_box {
    margin-top: 4rem;
}
div.caution_box .left_wrap {
    width: 70px;
    height: 70px;
    background: url('../img/icon_caution.svg') center / 50% no-repeat #e60012;
    background-position: center;
}
div.caution_box .right_wrap {
    background-color: #fff;
    border: 2px solid #e60012;
    color: #e60012;
    padding-left: 1.8rem;
    display: flex;
    align-items: center;
    width: calc(100% - 70px);
    max-height: 70px;
    line-height: 1.4;
    font-size: 1.8rem;
}
 @media screen and (max-width: 1200px) {
    .dry_ice_sec02_sup h2 {
        max-width: none;
    }
    .dry_ice_sec02_sup h2 .icon_emphasis {
        left: 0;
        top: -70%;
        letter-spacing: -4px;
        width: 80px;
        height: 80px;
        font-size: 2.4rem;
    }
 }
 @media screen and (max-width: 768px) {
    .dry_ice_sec02_sup {
        padding-top: 0;
        padding-bottom: calc(100vw * (100 / 750));
    }
    #dry_ice .dry_ice_sec02_sup .inner {
        width: 100%;
        padding-top: calc(100vw * (200 / 750));
    }
    .dry_ice_sec02_sup h2 {
        top: 0;
        transform: none;
    }
    .dry_ice_sec02_sup h2 .icon_emphasis {
        width: calc(100vw * (120 / 750));
        height: calc(100vw * (120 / 750));
        font-size: calc(100vw * (32 / 750));
        top: -50%;
        left: 2%;
    }
    .dry_ice_sec02_sup .dry_ice_sec02_sup_content {
        gap: calc(100vw * (40 / 750));
    }
    .dry_ice_sec02_sup .dry_ice_sec02_sup_content .txt_wrap,
    .dry_ice_sec02_sup .dry_ice_sec02_sup_content .img_wrap {
        width: 96%;
        margin: 0 auto;
    }
    .dry_ice_sec02_sup .dry_ice_sec02_sup_content .img_wrap {
        padding-top: 66.666%;
    }
    .dry_ice_sec02_sup .dry_ice_sec02_sup_content .txt_wrap h3 {
        font-size: calc(100vw * (36 / 750));
        display: block;
        text-align: center;
    }
    div.caution_box {
        display: block;
        margin-top: calc(100vw * (40 / 750));
    }
    div.caution_box .left_wrap,
    div.caution_box .right_wrap {
        width: 100%;
        padding: calc(100vw * (18 / 750));
    }
    div.caution_box .right_wrap {
        font-size: calc(100vw * (30 / 750));
    }
    div.caution_box .left_wrap {
    height: calc(100vw * (70 / 750));
    background-size: 7%;
}
 }
/* ========================================================
   氷点下ベストはこんな場所で活躍します
   ======================================================== */
.dry_ice_sec03 h2 {
    border-bottom: 0;
    background-color: #4d4d4d;
}
.dry_ice_grid02 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.dry_ice_grid02 li {
    height: 0;
    padding-top: 37.5%; 
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
}

.dry_ice_grid02 li.content01 {
    background-image: url(../img/sec03_img01.jpg);
}
.dry_ice_grid02 li.content02 {
    background-image: url(../img/sec03_img02.jpg);
}
.dry_ice_grid02 li.content03 {
    background-image: url(../img/sec03_img03.jpg);
}
.dry_ice_grid02 li.content04 {
    background-image: url(../img/sec03_img04.jpg);
}
.dry_ice_grid02 li.content05 {
    background-image: url(../img/sec03_img05.jpg);
}
.dry_ice_grid02 li.content06 {
    background-image: url(../img/sec03_img06.jpg);
}

.dry_ice_grid02 li .txt_area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 360px;
    
    /* テキストの配置調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    font-weight: bold;

}
.dry_ice_grid02 li .txt_area h3,
.dry_ice_grid02 li .txt_area p {
    width: 100%;
}
.dry_ice_grid02 li .txt_area h3 {
    background-color: var(--accent);
    font-size: 3rem;
    padding: 16px;
}
.dry_ice_grid02 li .txt_area p {
    background-color: rgba(255, 255, 255, .85);
    font-size: 2rem;
    padding: 10px;
}
 @media screen and (max-width: 1200px) {
    .dry_ice_grid02 li {
        padding-top: 53.333%;
    }
 }
 @media screen and (max-width: 768px) {
    .dry_ice_grid02 {
        grid-template-columns: 1fr;
    }
    .dry_ice_sec03 h2 {
        font-size: calc(100vw * (48 / 750));
    line-height: 1.5;
    padding: 8px;
    }
    .dry_ice_grid02 li {
        padding-top: 53.333%;
    }
    .dry_ice_grid02 li .txt_area h3 {
        font-size: calc(100vw * (45 / 750));
    }
    .dry_ice_grid02 li .txt_area p {
        font-size: calc(100vw * (30 / 750));
    }
    .dry_ice_grid02 li .txt_area {
        max-width: calc(100vw * (540 / 750));
    }
 }
/* ========================================================
   導入事例
   ======================================================== */
.dry_ice_sec04 {
    padding-top: 5rem;
}

/* ========================================================
   商品詳細
   ======================================================== */
   .product-slider-container {
    width: 47.5%;
    position: relative;
}

/* Swiperコンテナの基本設定 */
.swiper.mv_list {
    width: 100%;
}

/* スライド要素のフェード安定化（ユーザー様のカスタムをベースに調整） */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
    opacity: 1 !important;
}

/* 画像ラッパー */
.slide-inner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-img-wrapper {
    width: 100%;
    max-width: 800px;
}

.slide-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* --- ページネーション（ドットが縦0になるのを防ぐ修正） --- */
.swiper-pagination {
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important; /* 縦幅をしっかり確保して潰れを防ぐ */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important; /* ドット同士の間隔 */
    z-index: 10;
}

/* cmn.jsによって生成されるドット（spanタグ）自体の強制サイズ指定 */
.swiper-pagination-bullet {
    width: 14px !important;  /* SVGリングが収まるサイズ */
    height: 14px !important; /* SVGリングが収まるサイズ */
    background: transparent !important; /* デフォルトの黒丸を非表示に */
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important; /* インラインブロック化でサイズを確実に適用 */
    cursor: pointer;
    position: relative;
}

/* ドットの中にあるSVGタグが縦0になるのを防ぐ */
.swiper-pagination-bullet .ring {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    overflow: visible !important;
}

/* 通常時のリングの線の色（グレーで塗りつぶし） */
.swiper-pagination-bullet .ring-path {
    stroke: #d0d0d0 !important;
    stroke-width: 4px !important;
    fill: #d0d0d0 !important; /* 添付画像のように中身を塗りつぶす */
    transition: all 0.3s ease;
}

/* アクティブ（選択中）時のリングの色（水色 / シアン） */
.swiper-pagination-bullet-active .ring-path {
    stroke: #00e5d9 !important;
    fill: #00e5d9 !important; /* 中身を水色で塗りつぶす */
}
.dry_ice_sec05_list {
    margin-top: 9rem;
}
.dry_ice_sec05_list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 8rem;
}
.dry_ice_sec05_list li:first-child {
    margin-top: 0;
}
.dry_ice_sec05_list li .txt_wrap {
    width: 47%;
}
.dry_ice_sec05_list li .txt_wrap hgroup {
    align-items: flex-end;
}
.dry_ice_sec05_list li .txt_wrap h3 {
    font-size: 3rem;
    background-color: var(--accent);
    padding: 6px 32px;
    font-weight: bold;
    margin-right: 16px;
}
.dry_ice_sec05_list li .txt_wrap hgroup p.bg_gray {
    background-color: #4d4d4d;
    border-radius: 30px;
    color: #fff;
    font-size: 1.8rem;
    width: fit-content;
    height: 3rem;
    margin-right: .6rem;
    margin-bottom: .8rem;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dry_ice_tbl01 {
    border-top: 1px solid #4d4d4d;
    margin: 24px 0;
}
.dry_ice_tbl01 tr th,
.dry_ice_tbl01 tr td {
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #4d4d4d;
    border-right: 1px solid #4d4d4d;
    text-align: left;
}
.dry_ice_tbl01 tr th {
    font-weight: bold;
}
.dry_ice_tbl01 tr th.bg_gray {
    background-color: #f3f3f3;
}
.dry_ice_tbl01 tr th:last-child,
.dry_ice_tbl01 tr td:last-child {
    border-right: 0;
}
@media (max-width: 1024px) {
    .dry_ice_sec05_list li .txt_wrap hgroup {
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    .dry_ice_sec05_list li .txt_wrap hgroup .bg_gray {
        margin-top: calc(100vw * (24 / 750));
    }
}
@media (max-width: 768px) {
    .dry_ice_sec05_list li {
        display: block;
    }
    .product-slider-container {
        width: 90%;
        margin: 0 auto;
    }
    .dry_ice_sec05_list li .txt_wrap {
        width: 100%;
        margin-top: calc(100vw * (40 / 750));
    }
    .dry_ice_sec05_list li .txt_wrap h3 {
        font-size: calc(100vw * (45 / 750));
        margin-right: 0;
    }
    .dry_ice_sec05_list li .txt_wrap hgroup {
        align-items: center;
    }
    
}
/* ========================================================
   FOOTER
   ======================================================== */
.footer {
    background: var(--white);
    border-top: solid 1px var(--black);
}

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

/* --- 上部：ロゴとナビゲーション --- */
.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;
    }
}
/* ========================================================
   ENTRY (応募フォーム)
   ======================================================== */
.sec-entry {
    padding: 0;
    /* innerとsplit-layoutで制御 */
}

/* エントリーメッセージ */
.entry-msg {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-top: 1rem;
    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);
}
.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);
}
.sec-entry .bg_blue {
    background-color: var(--accent);
    padding: 4px;
    width: 100%;
    margin-top: 5rem;
    text-align: center;
    font-size: 2rem;
}

/* ========================================================
   プレースホルダーの色を全ブラウザで統一！
   ======================================================== */
.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: 44%;
        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秒遅れてシュッと出る！ */
    }


    .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;
    }
    .sec-entry h2 {
        margin-bottom: calc(100vw * (40 / 750));
    }
    .sec-entry {
        padding: 0 0 6rem;
    }
    #dry_ice .sec-entry .inner {
        width: 90%;
    }
}



/* ========================================================
   スクロール着地点の調整（透明な的作戦）
   ======================================================== */
.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;
}