@charset "utf-8";

section {
    padding-right: 0!important;
}

.mv {
    aspect-ratio: 2816 / 839;
}

/* ========================================================
   ドライアイス製造装置コーナー：導入セクション
======================================================== */
.di-intro-section {
    padding: 60px 0;
    background-color: #fff;
    color: #333;
}

.di-intro-header {
    text-align: center;
    margin-bottom: 40px;
}

.di-intro-title {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #222;
}

.di-intro-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
}

/* 官公庁風バナーセクションのデザインを流用・独立化 */
.di-law-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid var(--heat-bg, #0056b3);
    border-top: 8px solid var(--heat-bg, #0056b3); 
    padding: 30px 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.di-law-badge {
    display: inline-block;
    background-color: #FE4D11;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 6px 16px;
    margin-bottom: 15px;
    align-self: flex-start;
}

.di-law-desc {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px;
}

.di-law-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.di-law-link-item {
    display: flex;
    flex-direction: column;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 20px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.di-law-link-item:hover {
    border-color: var(--heat-bg, #0056b3);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.di-law-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--heat-bg, #0056b3);
    line-height: 1.4;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 15px;
}

.di-law-action {
    text-align: right;
    margin-top: auto;
}

.di-law-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--heat-bg, #0056b3);
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: bold;
    transition: background-color 0.2s;
}

.di-law-btn::after {
    content: "＞";
    margin-left: 10px;
    font-size: 0.8rem;
}

.di-law-link-item:hover .di-law-btn {
    background-color: #12235a;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .di-intro-title {
        font-size: 1.4rem;
    }
    .di-law-card {
        padding: 20px;
    }
    .di-law-links {
        grid-template-columns: 1fr;
    }
    .di-law-title {
        font-size: 1.1rem;
    }
    .di-law-action {
        text-align: center;
    }
    .di-law-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ========================================================
   ドライアイス製造装置コーナー：困りごとセクション
======================================================== */
.di-trouble-section {
    padding: 60px 0;
    background-color: #f4f6f9; /* 前のセクション（白）と区別するため淡いグレー背景 */
}

.di-trouble-maintitle {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 40px;
}

.di-trouble-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.di-trouble-card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.di-trouble-card:hover {
    /* transform: translateY(-4px); */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.di-trouble-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background-color: #e2e8f0; /* アイコンの背景用のプレースホルダー色 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* アイコン画像がある場合のサイズ調整 */
.di-trouble-icon img {
    width: 32px;
    height: auto;
}

.di-trouble-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--heat-bg, #0056b3);
    line-height: 1.5;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--heat-bg, #0056b3);
    padding-bottom: 10px;
    display: inline-block;
}

.di-trouble-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
    text-align: left; /* 読みやすさのためテキストは左寄せ */
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    .di-trouble-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .di-trouble-section {
        padding: 40px 0;
    }
    .di-trouble-maintitle {
        font-size: 1.4rem;
        margin-bottom: 30px;
        padding: 0 15px;
    }
}


/* ========================================================
   ドライアイス製造装置コーナー：解決策セクション
======================================================== */
.di-solution-section {
    padding: 60px 0;
    background-color: #fff;
}

.di-solution-maintitle {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--heat-bg, #0056b3);
    margin-bottom: 20px;
}

/* タイトルの両脇に線を引く装飾 */
.di-solution-maintitle::before,
.di-solution-maintitle::after {
    content: "ー";
    color: var(--heat-bg, #0056b3);
}

.di-solution-maintitle::before {
    margin-right: 10px;
}

.di-solution-maintitle::after {
    margin-left: 10px;
}

.di-solution-header {
    text-align: center;
    margin-bottom: 20px;
}

.di-solution-subtitle {
    font-size: 2.3rem;
    font-weight: bold;
    color: #222;
    line-height: 1.5;
    margin-bottom: 20px;
}

.di-solution-desc {
    font-size: 1rem;
    color: #444;
    line-height: 1.8;
    margin: 0 auto;
}

.di-solution-flex {
    display: flex;
    gap: 50px;
    align-items: center;
}

.di-solution-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 画像のプレースホルダースタイル（実際の画像パスに合わせて調整してください） */
.di-solution-img-main img,
.di-solution-img-sub img {
    width: 100%;
    height: auto;
    background-color: #e2e8f0; 
    border: 1px solid #ddd;
    object-fit: cover;
}

.di-solution-img-main,
.di-solution-img-sub {
    text-align: center;
}

.di-solution-caption {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
}

.di-solution-details {
    flex: 1;
}

.di-solution-point-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--heat-bg, #0056b3);
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.di-solution-point-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.di-solution-point-list li {
    margin-bottom: 24px;
    position: relative;
    padding-left: 24px;
}

/* リストの箇条書きマーク（オレンジの丸） */
.di-solution-point-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    background-color: #FE4D11;
    border-radius: 50%;
}

.di-solution-point-list strong {
    display: block;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 8px;
}

.di-solution-point-list p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- 【改修】注目されている理由のボックス（全幅版） --- */
.di-reason-box-wide {
    border: 2px solid #2969B3;
    margin-bottom: 150px; /* 下の画像エリアとの余白をしっかり取る */
    background-color: #fff;
    width: 100%!important;
}

.di-reason-box-wide .di-reason-header {
    background-color: #2969B3;
    color: #fff;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.di-reason-box-wide .di-reason-label {
    background-color: #FE4D11;
    font-size: 0.85rem;
    font-weight: 900;
    padding: 4px 12px;
    letter-spacing: 0.1em;
}

.di-reason-box-wide .di-reason-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
}

/* 全幅になったので、テキストが間延びしないよう少し左右に余白を持たせるか、2段組み風に見せる */
.di-reason-box-wide .di-reason-body {
    padding: 30px 40px;
    background-color: #f8fafc;
    border-top: 1px solid #2969B3;
}

.di-reason-box-wide .di-reason-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 15px;
}

.di-reason-box-wide .di-reason-text:last-child {
    margin-bottom: 0;
}

.di-reason-box-wide .di-reason-text strong {
    color: #FE4D11;
    font-weight: bold;
    border-bottom: 2px solid rgba(211, 47, 47, 0.3); /* 強調を少しリッチに */
}

/* --- 下段の左右レイアウト微調整 --- */
.di-solution-flex {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.di-solution-images {
    flex: 0 0 45%; /* 画像を少し大きめにとる */
    margin: auto 0;
}

.di-solution-details {
    flex: 1;
}

/* --- 「ピンポイントで涼しさを提供」の横並びレイアウト --- */
.di-point-with-image {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* テキストと画像の間の余白 */
}

.di-point-text {
    flex: 1; /* テキストエリアを可能な限り広げる */
}

.di-point-img {
    flex: 0 0 130px; /* 画像エリアのベース幅（必要に応じて調整してください） */
}

.di-point-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* お好みで角を少し丸くしています。不要なら削除してください */
}

/* --- レスポンシブ対応（スマホサイズで縦積みにする） --- */
@media (max-width: 768px) {
    .di-solution-maintitle {
        font-size: 1rem;
    }
    .di-point-with-image {
        flex-direction: column; /* 縦並びに変更 */
        gap: 15px; 
    }

    .di-solution-maintitle::before,
    .di-solution-maintitle::after {
        display: none;
    }

    .di-solution-desc {
        text-align: left;
    }

    .di-point-img {
        width: 100%;
        flex: auto;
    }

    .di-point-img img {
        max-width: 200px; /* スマホで画像が大きくなりすぎるのを防ぐ */
        margin: 0 auto;   /* 中央寄せ */
    }
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .di-solution-flex {
        flex-direction: column;
        gap: 40px;
    }
    .di-solution-images {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .di-reason-box-wide {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%!important;
        width: 100%;
    }
    .di-reason-box-wide .di-reason-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .di-reason-box-wide .di-reason-body {
        padding: 20px;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .di-solution-section {
        padding: 40px 0;
    }
    .di-solution-subtitle {
        font-size: 1.4rem;
        padding: 0 15px;
    }
    .di-solution-flex {
        flex-direction: column;
        gap: 30px;
    }
    .di-solution-details {
        width: 100%;
    }
}


/* --- 追加：使用上の留意点（デザイン踏襲・控えめ） --- */
.di-solution-precautions {
    padding: 35px;
    background-color: #f8fafc; /* 上部の「理由ボックス」と同じ控えめな背景色 */
    border: 1px solid #e2e8f0; /* 馴染みの良い薄いグレーの枠線 */
}

.di-precautions-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333; /* 強い色を使わずダークグレーに */
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cbd5e1;
}

.di-precautions-intro {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 15px;
    line-height: 1.6;
}

.di-precautions-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.di-precautions-list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
}

/* 原稿の「■」をCSSでグレー色にして表現 */
.di-precautions-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #71717a; /* 目立ちすぎない落ち着いたグレー */
    font-size: 0.9rem;
}

.di-precautions-note {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .di-solution-precautions {
        padding: 20px;
        margin-top: 40px;
    }
}


/* ========================================================
   ドライアイス製造装置コーナー：調達・製造装置セクション
======================================================== */
.di-procure-section {
    padding: 60px 0;
    background-color: #f8fafc; /* 白と区別するための淡いブルーグレー */
}

.di-procure-header {
    text-align: center;
    margin-bottom: 40px;
}

.di-procure-maintitle {
    font-size: 1.6rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 16px;
}

.di-procure-lead {
    font-size: 1rem;
    color: #444;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.di-procure-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* --- 左カラム：メディア --- */
.di-procure-media {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.di-procure-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #333;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.di-video-placeholder {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #aaa;
}

.di-video-icon {
    font-size: 2rem;
    color: #fff;
}

.di-procure-image-wrapper {
    text-align: center;
}

.di-procure-img {
    width: 100%;
    height: auto;
    border: 1px solid #cbd5e1;
    background-color: #e2e8f0;
    object-fit: cover;
}

.di-procure-caption {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
}

/* --- 右カラム：特徴 --- */
.di-procure-features {
    flex: 1;
}

.di-procure-subtitle {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--heat-bg, #0056b3);
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #cbd5e1;
}

.di-feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.di-feature-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.di-feature-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.di-feature-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #FE4D11;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9rem;
}

.di-feature-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.di-feature-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 900px) {
    .di-procure-container {
        flex-direction: column;
    }
    .di-procure-media,
    .di-procure-features {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .di-procure-section {
        padding: 40px 0;
    }
    .di-procure-maintitle {
        font-size: 1.4rem;
        padding: 0 15px;
    }
    .di-feature-item {
        padding: 16px;
    }
}



/* ========================================================
   ドライアイス製造装置コーナー：調達セクション (デザイン改修版)
======================================================== */
.di-procure-v2-section {
    padding: 80px 0;
    background-color: #f0f4f8; /* 背景を少し濃くして独立感を出す */
}

.di-procure-v2-header {
    text-align: center;
    margin-bottom: 40px;
}

.di-procure-v2-maintitle {
    font-size: 1.8rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 15px;
}

.di-procure-v2-lead {
    font-size: 1.05rem;
    color: #444;
}

/* 中央配置のメディアボックス */
.di-procure-v2-media-box {
    margin: 0 auto 50px;
    background: #fff;
    padding: 20px;
}

.di-procure-v2-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.di-video-placeholder {
    text-align: center;
    color: #ccc;
}

.di-video-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.di-procure-v2-image-caption {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
    padding: 0 10px;
}

.di-mini-img {
    width: 80px;
    height: 50px;
    object-fit: cover;
    border: 1px solid #ddd;
}

/* 3つのメリットグリッド */
.di-procure-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.di-procure-v2-card {
    background: #fff;
    border-bottom: 4px solid var(--heat-bg, #0056b3); /* 下線でアクセント */
    padding: 25px;
    transition: transform 0.3s ease;
}

.di-procure-v2-card:hover {
    transform: translateY(-5px);
}

.di-procure-v2-card-head {
    margin-bottom: 15px;
}

.di-procure-v2-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--heat-bg, #0056b3);
    background: #eef2ff;
    padding: 2px 10px;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.di-procure-v2-card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #222;
    margin: 0;
}

.di-procure-v2-card-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* レスポンシブ */
@media (max-width: 850px) {
    .di-procure-v2-grid {
        grid-template-columns: 1fr;
    }
    .di-procure-v2-maintitle {
        font-size: 1.4rem;
    }
    .di-procure-v2-image-caption {
        flex-direction: column;
        text-align: center;
    }
}



/* ========================================================
   ドライアイス製造装置コーナー：追加セクション
======================================================== */

/* 共通：セクション見出し */
/* ========================================================
   ドライアイス製造装置：活用シーン（V4 スリム＆詳細画像版）
======================================================== */
.di-usage-v4-section {
    padding: 80px 0; /* 上下余白を少し縮小 */
    background-color: #eff7f8;
}

.content_maxwidth_1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ヘッダーエリア：スリム化 --- */
.di-uv4-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 3px solid #222;
    padding-bottom: 15px;
}

.di-uv4-title-group {
    border-left: 10px solid var(--heat-bg, #0056b3);
    padding-left: 20px;
}

.di-uv4-eng {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--heat-bg, #0056b3);
}

.di-uv4-maintitle {
    font-size: 2.2rem;
    font-weight: bold;
    color: #222;
    margin: 0;
}

.di-uv4-lead {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}

/* --- グリッド --- */
.di-uv4-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.di-uv4-card {
    background-color: #fff;
    border: 2px solid #222;
    display: flex;
    flex-direction: column;
}

/* ワイドカード（製造業）の設定 */
.di-uv4-card-wide {
    grid-column: span 3;
    flex-direction: row;
    min-height: 390px;
}

/* 画像ボックス */
.di-uv4-img-box {
    position: relative;
    background-color: #eee;
    overflow: hidden;
}

.di-uv4-card-wide .di-uv4-img-box {
    flex: 0 0 38%; /* メイン画像の幅 */
    border-right: 2px solid #222;
}

.di-uv4-card:not(.di-uv4-card-wide) .di-uv4-img-box {
    aspect-ratio: 16 / 9;
    border-bottom: 2px solid #222;
}

.di-uv4-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.di-uv4-label {
    position: absolute;
    top: 0; left: 0;
    background-color: var(--heat-bg, #0056b3);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
    padding: 4px 12px;
}

/* カード本文 */
.di-uv4-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上下で情報を分ける */
}

.di-uv4-card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.di-uv4-card-title::before {
    content: "";
    width: 6px; height: 1.1em;
    background-color: var(--heat-bg, #0056b3);
    margin-right: 8px;
}

.di-uv4-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

/* --- 具体的な活用場所エリア --- */
.di-uv4-detail-area {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
}

.di-uv4-detail-title {
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--heat-bg, #0056b3);
    margin-bottom: 12px;
}

.di-uv4-sub-items {
    display: flex;
    gap: 15px;
}

.di-uv4-sub-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #222;
}

.di-uv4-sub-img {
    aspect-ratio: 3 / 2;
    background-color: #f0f0f0;
    overflow: hidden;
    border-bottom: 1px solid #222;
}

.di-uv4-sub-img img {
    width: 100%; height: 100%; object-fit: cover;
}

.di-uv4-sub-label {
    background-color: #222;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    padding: 4px 0;
    font-weight: bold;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .di-uv4-card-wide {
        flex-direction: column;
        height: auto;
    }
    .di-uv4-card-wide .di-uv4-img-box {
        flex: auto;
        aspect-ratio: 16 / 9;
        border-right: none;
        border-bottom: 2px solid #222;
    }
    .di-uv4-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .di-uv4-card-wide { grid-column: span 2; }
    .di-uv4-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    .di-uv4-body {
        padding: 24px 15px;
    }
    .di-uv4-maintitle {
        font-size: 1.8rem;
    }
}

@media (max-width: 600px) {
    .di-uv4-grid { grid-template-columns: 1fr; }
    .di-uv4-card-wide { grid-column: span 1; }
    .di-uv4-sub-items { flex-direction: column; }
}

/* ========================================================
   ドライアイス製造装置：導入後の声（V5 視認性重視版）
======================================================== */
.di-voice-v5-section {
    padding: 100px 0;
    background-color: #fff;
    color: #222;
}

/* 共通：角丸・影なし */
.di-voice-v5-section *, .di-vv5-item {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- セクションタイトル（左寄せ・下線強調） --- */
.di-vv5-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 6px solid #111; /* 極太の黒線で引き締める */
    padding-bottom: 10px;
}

.di-vv5-maintitle {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.05em;
}

.di-vv5-en {
    color: #555;
    font-size: 1.1rem;
    font-weight: bold;
}

/* --- リスト構造（横並びから縦並びに整理） --- */
.di-vv5-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* 境界線を共有させる */
}

.di-vv5-item {
    display: flex;
    border-top: 2px solid #888888;
    padding: 40px 0;
}

.di-vv5-item:last-child {
    border-bottom: 2px solid #888888;
}

/* 左側：属性（固定幅） */
.di-vv5-info {
    flex: 0 0 280px;
}

.di-vv5-no {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    color: #eee; /* 数字を背景に馴染ませる */
    display: block;
    margin-bottom: 10px;
}

.di-vv5-industry {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
}

/* 右側：本文 */
.di-vv5-body {
    flex: 1;
    padding-left: 40px;
    border-left: 1px solid #eee; /* 軽い仕切り線 */
}

.di-vv5-text {
    font-size: 1.15rem;
    line-height: 2;
    color: #333;
    margin: 0;
}

/* 強調表現（サイトカラー赤のアンダーライン） */
.di-vv5-mark {
    background: linear-gradient(transparent 85%, var(--accent-orange) 85%);
    font-weight: bold;
    color: var(--text-color);
}

/* レスポンシブ */
@media (max-width: 800px) {
    .di-vv5-item {
        flex-direction: column;
        padding: 30px 0;
    }
    .di-vv5-info {
        flex: auto;
        margin-bottom: 20px;
    }
    .di-vv5-body {
        padding-left: 0;
        border-left: none;
        border-top: 1px dashed #ccc;
        padding-top: 20px;
    }
    .di-vv5-no {
        font-size: 2rem;
    }
}



/* ========================================================
   ドライアイス製造装置コーナー：Q&Aセクション（ソリッド＆エッジ版）
======================================================== */
.di-faq-v2-section {
    padding: 100px 0;
    background-color: #fff; /* 白背景で前のダークセクションとのコントラストを出す */
    color: #111;
}

.di-faq-v2-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 6px solid #111; /* 極太の黒線で引き締める */
    padding-bottom: 10px;
}

.di-faq-v2-maintitle {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.05em;
}

.di-faq-v2-subtitle {
    font-size: 1.1rem;
    font-weight: bold;
    color: #555;
}

.di-faq-v2-list {
    display: flex;
    flex-direction: column;
}

/* 各項目の区切り線を太く */
.di-faq-v2-item {
    padding: 50px 0;
    border-bottom: 2px solid #222;
}

/* 左側：質問（Q） */
.di-faq-v2-q-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.di-faq-v2-mark-q {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-orange, #ff5722);
    line-height: 1;
}

.di-faq-v2-q-text {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
    color: #111;
    margin: 0;
}

/* 右側：回答（A） */
.di-faq-v2-a-box {
    flex: 1.2;
    padding-top: 10px; /* Qのテキスト位置とバランスを取る */
}

.di-faq-v2-a-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin: 0;
}

/* --- レスポンシブ（スマホ・タブレット時） --- */
@media (max-width: 850px) {
    .di-faq-v2-item {
        flex-direction: column;
        gap: 25px;
        padding: 40px 0;
    }
    .di-faq-v2-a-box {
        padding-top: 0;
    }
    .di-faq-v2-q-box {
        margin-bottom: 15px;
    }
}

@media (max-width: 600px) {
    .di-faq-v2-section {
        padding: 60px 0;
    }
    .di-faq-v2-maintitle {
        font-size: 3rem;
    }
}



/* ========================================================
   共通：セクション見出し（FAQ・導入後の声など）
======================================================== */
.di-common-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 6px solid #111; /* 極太の黒線で引き締める */
    padding-bottom: 10px;
}

.di-common-maintitle {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.05em;
    color: #111;
}

.di-common-subtitle {
    font-size: 1.1rem;
    font-weight: bold;
    color: #555;
}

/* 共通見出しのレスポンシブ */
@media (max-width: 600px) {
    .di-common-maintitle {
        font-size: 3rem;
    }
}



/* ========================================================
   ドライアイス製造装置コーナー：調達セクション（インダストリアル版）
======================================================== */
/* 角丸・影なしルールの徹底 */
.di-procure-v3-section *, .di-pv3-mini-img, .di-pv3-video-wrapper, .di-pv3-feature-item {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.di-procure-v3-section {
    padding: 0; /* ヘッダーの背景を横幅いっぱいにするため */
    background-color: #fff;
    color: #222;
    border-bottom: 2px solid #222;
}

.di-pv3-container {
    margin: 0 auto;
    padding: 0 0 80px 0; /* 下だけ余白 */
}

/* --- タイトルエリア：サイトカラーの紺背景 --- */
.di-pv3-header {
    background-color: var(--heat-bg, #0056b3);
    padding: 60px 20px;
    margin-bottom: 60px;
    border-bottom: 2px solid #222;
    position: relative;
    overflow: hidden;
}

.di-pv3-header-child {
    max-width: 1400px;
    margin: 0 auto;
}

.di-pv3-maintitle {
    font-size: 2.2rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
    margin: 0;
    text-align: center;
}

.di-pv3-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 2カラムレイアウト */
.di-pv3-content {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin: 50px auto 0;
    max-width: 1400px;
    padding: 0 20px;
}

/* --- 左側：メディア --- */
.di-pv3-media-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.di-pv3-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border: 4px solid #FE4D11; /* 赤の太枠でインパクト */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.di-video-placeholder {
    text-align: center;
    color: #fff;
}

.di-video-icon {
    font-size: 3rem;
}

.di-pv3-caption {
    display: flex;
    gap: 15px;
    align-items: center;
}

.di-pv3-mini-img {
    width: 100px;
    height: 60px;
    object-fit: cover;
}

.di-pv3-cap-text {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
}

.di-pv3-lead {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    background-color: #f4f6f9;
    padding: 20px;
    border: 2px solid #222;
    margin: 0;
}

.di-pv3-lead strong {
    display: inline-block;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* メリットアイテム：極太線でメリハリ */
.di-pv3-feature-item {
    background-color: #fff;
    border: 2px solid #222;
    border-top: 10px solid var(--heat-bg, #0056b3); /* 上部に青の極太線 */
    padding: 30px;
    display: flex;
    gap: 20px;
}

/* ラベル部分をサイトカラー青で塗る */
.di-pv3-f-head {
    flex: 0 0 70px;
    background-color: var(--heat-bg, #0056b3);
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
    font-size: 0.8rem;
    writing-mode: vertical-lr; /* 縦書きにしてアクセントに */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.di-pv3-f-body {
    flex: 1;
}

.di-pv3-f-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #111;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* 数字だけを大きくして赤色に（コントラスト強化） */
.di-pv3-f-big {
    font-size: 3rem;
    font-weight: 900;
    color: #FE4D11;
    margin: 0 5px;
    vertical-align: baseline;
}

/* サイトカラー赤の強調テキスト */
.di-pv3-f-hl {
    color: #FE4D11;
}

.di-pv3-f-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* --- レスポンシブ --- */
@media (max-width: 900px) {
    .di-pv3-content {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .di-pv3-header {
        padding: 40px 15px;
        margin-bottom: 40px;
    }
    .di-pv3-maintitle {
        font-size: 1.6rem;
    }
    .di-pv3-maintitle span {
        display: block;
    }
    .di-pv3-feature-item {
        padding: 20px;
        flex-direction: column;
    }
    .di-pv3-f-head {
        writing-mode: horizontal-tb;
        flex: auto;
        padding: 5px 10px;
    }
    .di-pv3-video-wrapper {
        width: auto;
    }
    .di-pv3-f-title {
        font-size: 1.4rem;
    }
    .di-pv3-f-big {
        font-size: 2.5rem;
    }
}


/* --- ドライアイス・インゴット グラフィック --- */
.di-pv3-features {
    position: relative; /* グラフィックの基準点 */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.di-pv3-ingot-graphic {
    position: absolute;
    top: -20px;
    right: 80px;
    width: 300px;
    height: 300px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
    transform: rotate(5deg);
}

.di-pv3-ingot-graphic svg {
    width: 100%;
    height: auto;
}

/* 各アイテムがグラフィックの上に重なるように調整 */
.di-pv3-feature-item {
    position: relative;
    z-index: 2; /* グラフィックより上に表示 */
    background-color: rgba(255, 255, 255, 0.95); /* 背後が透けすぎないよう調整 */
    border: 2px solid #222;
    border-top: 10px solid var(--heat-bg, #0056b3);
    padding: 30px 20px;
    display: flex;
    gap: 20px;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .di-pv3-ingot-graphic {
        width: 100px;
        top: 0;
        right: -10px;
    }
}


/* ========================================================
   比較表スタイル
======================================================== */
/* スマホ・タブレット用のはみ出し横スクロール対応 */
.di-compare-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 40px;
}

.di-table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* スマホでの慣性スクロール */
    margin-bottom: 50px;
}

.di-compare-table {
    width: 100%;
    min-width: 900px; /* PCレイアウトを保つための最小幅 */
    border-collapse: collapse;
    background-color: #fff;
    text-align: left;
    border: 1px solid #cbd5e1;
    margin-bottom: 50px;
    -webkit-overflow-scrolling: touch;
}

/* ヘッダーセル（th） */
.di-compare-th {
    background-color: #f8fafc;
    color: #333;
    font-weight: bold;
    padding: 16px;
    border: 1px solid #cbd5e1;
    text-align: center;
    font-size: 1.05rem;
}

/* データセル（td） */
.di-compare-td {
    padding: 16px;
    border: 1px solid #cbd5e1;
    color: #444;
    vertical-align: middle;
    font-size: 0.95rem;
}

/* 左端の項目名カラム */
.di-compare-td.is-header {
    background-color: #f8fafc;
    font-weight: bold;
    color: #333;
}

/* ハイライト（本方式の列） */
.di-compare-table .is-highlight {
    background-color: #f0f7ff; /* 薄い青背景で自社製品を強調 */
}

/* ヘッダー部分のハイライトだけ少し目立たせる */
th.di-compare-th.is-highlight {
    background-color: #2969B3; /* これまでのサイトカラーに合わせる */
    color: #fff;
    border-color: #2969B3;
}

/* テキスト装飾（メリット・デメリットの強調） */
.di-compare-td.text-blue {
    color: #0369a1; /* 深めの青 */
    font-weight: bold;
}

.di-compare-td.text-red {
    color: #ef4444; /* 赤 */
    font-weight: bold;
}

/* ホバー時の行ハイライト（PCのみ） */
@media (hover: hover) {
    .di-compare-table tbody tr:hover td {
        background-color: #fafafa;
    }
    .di-compare-table tbody tr:hover td.is-highlight {
        background-color: #e6f2ff; /* ハイライト列はホバー時も色を残す */
    }
}



/* ========================================================
   製品紹介ムービーセクション（コーポレート・スタンダード）
======================================================== */
.di-movie-section-v4 {
    padding: 80px 0;
    background-color: #f0f4f8; /* 参考画像のような、清潔感のある極薄いブルーグレー */
}

/* タイトル部分 */
.di-movie-header {
    text-align: center;
    margin-bottom: 40px;
}

.di-movie-en-title {
    display: block;
    font-size: 0.85rem;
    color: #2969B3; /* これまでのサイトの青 */
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    font-style: italic; /* 参考画像に合わせた斜体 */
}

.di-movie-jp-title {
    display: inline-block;
    background-color: #2969B3; /* 参考画像の緑ベタにあたる部分 */
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 8px 24px;
    margin: 0;
    letter-spacing: 0.05em;
}

/* コンテンツを囲む白い箱 */
.di-movie-card {
    background-color: #fff;
    display: flex;
    align-items: stretch; /* 左右の高さを揃える */
    max-width: 1000px; /* 参考画像のように少し幅を絞り、視線を集中させる */
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ほんの少しだけ影を落として浮き上がらせる */
}

/* 左側：テキスト */
.di-movie-card-text {
    flex: 1;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.di-movie-catch {
    font-size: 1.5rem;
    color: #2969B3; /* メッセージの強調色 */
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: bold;
}

.di-movie-desc {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.8;
    margin: 0;
}

/* 右側：動画 */
.di-movie-card-video {
    flex: 1.2; /* 動画エリアを少しだけ広く取る */
    background-color: #000;
    display: flex;
    align-items: center;
}

.di-movie-iframe-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 の比率を維持 */
}

.di-movie-iframe-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .di-movie-section-v4 {
        padding: 50px 0;
    }
    .di-movie-card {
        flex-direction: column; /* スマホでは縦並びに */
        margin: 0 15px;
    }
    .di-movie-card-text {
        padding: 30px 20px;
    }
    .di-movie-catch {
        font-size: 1.3rem;
    }
}


.di-demo-cta-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
}

/* --- 背景画像と透過オーバーレイ --- */
.di-demo-cta-bg {
    position: absolute;
    top: -40%; right: -20%;
    overflow: hidden;
    width: 45%; height: auto;
    z-index: -2;
}

.di-demo-cta-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* --- 背景画像と透過オーバーレイ --- */
.di-demo-cta-bg02 {
    position: absolute;
    bottom: 0; left: 0;
    overflow: hidden;
    width: 30%; height: auto;
    z-index: -2;
}

.di-demo-cta-bg02 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* サイトカラーの青を基調としたグラデーションをかぶせる */
.di-demo-cta-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* 左から右へ、少し透明度を変えながら青色を重ねる */
    background: linear-gradient(to right, var(--heat-bg, #0056b3), var(--heat-bg, #0056b3));
    opacity: 0.65;
    z-index: -1;
}

/* --- コンテンツエリア --- */
.di-demo-cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* タイトルと装飾（\ \ と / /）のレイアウト */
.di-demo-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.di-deco-line {
    font-size: 2.2rem;
    font-weight: 300;
    color: #ffffff;
    line-height: 1;
    opacity: 0.9;
}

.di-demo-catch {
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.05em;
}

.di-demo-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #f3f8ff; /* 真っ白より少し落ち着かせた色 */
    margin-bottom: 40px;
}

/* --- ゴーストボタン（透明枠線ボタン） --- */
.di-demo-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 50px;
    background-color: transparent; /* 背景は透明 */
    color: #ffffff!important;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #ffffff;
    border-radius: 50px; /* 角丸（pill型） */
    transition: all 0.3s ease;
}

/* ホバー時のアクション（白背景になり、文字が青になる） */
.di-demo-ghost-btn:hover {
    background-color: #ffffff;
    color: var(--heat-bg, #0056b3)!important;
}

/* アイコンの色もホバー時に追従させるためのおまじない（テキストの場合は不要ですが絵文字以外を使用する想定） */
.di-btn-icon {
    font-size: 1.2rem;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 1024px) {
    .di-demo-catch { font-size: 1.6rem; }
    .di-deco-line { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .di-demo-cta-section { padding: 60px 0; }
    
    /* スマホでは装飾（\ \）を消すか、小さくするか（今回は非表示にしてスッキリさせます） */
    .di-deco-line { display: none; }
    
    .di-demo-catch {
        font-size: 1.4rem;
        line-height: 1.6;
    }
    
    .di-demo-desc {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }
    
    .di-demo-ghost-btn {
        max-width: 320px;
        padding: 14px 30px;
        font-size: 1rem;
    }
    /* --- 背景画像と透過オーバーレイ --- */
    .di-demo-cta-bg {
        position: absolute;
        top: 10%; right: -50%;
        overflow: hidden;
        width: 90%; height: auto;
        z-index: -2;
    }

    .di-demo-cta-bg img {
        width: 100%; height: 100%;
    }
}

/* ========================================================
   追加：お問い合わせボタンセクション（添付画像参照・全幅）
======================================================== */
.di-contact-cta-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    color: #ffffff;
}

/* 全幅の冷たい背景グラフィック */
.di-cta-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
}

/* 添付画像の暗く冷たいトーンを再現するためのオーバーレイ */
.di-cta-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

.di-cta-bg img {
    width: 100%; height: 100%; object-fit: cover;
}

/* コンテンツ中央配置 */
.di-cta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.di-cta-phrase {
    font-size: 2.2rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

/* 添付画像の pill-shaped（丸みを帯びた）ボタンを模倣 */
.di-cta-button {
    display: inline-block;
    padding: 12px 36px;
    background-color: rgba(255, 255, 255, 0.9); /* 薄い色のpill背景 */
    color: #333; /* ボタンテキストはダークグレーに */
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.di-cta-button:hover {
    background-color: #ffffff;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .di-cta-phrase { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .di-contact-cta-section { padding: 80px 0; }
    .di-cta-phrase { font-size: 1.2rem; padding: 0; }
    .di-cta-phrase span {
        display: block;
    }
}