/* LP全体の親コンテナ */
.lp-mining-container {
    width: 100%;
    overflow-x: hidden; /* 横揺れ防止 */
}

/* 画像の基本設定 */
.lp-mining-container img {
    max-width: 100%;
    height: auto;
    display: block; /* 隙間防止 */
}

/* LP全体の共通インナー（幅の管理はここだけ！） */
.lp-inner {
    max-width: 85.9% !important; /* ヘッダーと全く同じ最大幅 */
    width: 100%;                 /* 基本は100% */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0;                  /* ヘッダーのpaddingが0なので0に合わせる */
    box-sizing: border-box;      /* これもヘッダーと同じ */
    display: block;
    font-family: "Noto Sans JP", sans-serif;
}

.lp-hero {
    margin-top: 103.49px; 
    width: auto;
    /* 【重要】高さは指定せず、画像の横幅に対する比率で決める設定にします */
    height: auto; 
    aspect-ratio:  1933/ 1091; /* 作成した画像の「横 / 縦」の比率を入れてください */
    /*釜野さんへ依頼 ヘッダー画像を作成するときはこのサイズで*/
    background-image: url('../images/lp/LP-1-72-04.webp');
    background-size: 100% 100%;   /* 画像を枠内にピタッと収める */
    background-position: center;
    background-repeat: no-repeat;
    /* タイトルを左下に配置するための設定 */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    /* 以前の悪さをしていた設定をリセット */
    min-height: 0;
}

.lp-hero__title {
    color: #ffffff;             /* 文字色は白 */
    /*
       font-sizeを画面幅に連動させる
       clamp(最小値, 推奨値, 最大値)
       推奨値を vw にすることで、画面サイズに合わせて滑らかに変動します
    */
    font-size: clamp(40px, 5.5vw, 80px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    padding-bottom: 50px; /* 下からの余白 */
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.8);
}

/* 特徴セクション全体 */
.lp-features {
    background-color: #ffffff;
    padding-top: 75px;
    padding-bottom: 75px; /* 上下の余白 */
}

.lp-features__inner {
    display: flex;
    flex-direction: column; /* タイトルとアイテム群を縦に並べる */
    align-items: center;
}

.lp-features__title {
    font-family: "Noto Sans JP", sans-serif; /* 以前設定したNoto Sans */
    font-size: 45px;                         /* ご指定のサイズ */
    font-weight: 900;                        /* Black (最太) */
    color: #DC474F;                          /* ご指定の赤色 */
    text-align: center;
    width: 100%;
    margin-bottom: 60px;                     /* 下のコンテンツとの間隔 */
    letter-spacing: -0.02em;
}

.lp-features__items {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
/* 各アイテム（3等分） */
.lp-features__item {
    flex: 1;
    text-align: center;
    padding: 0 30px;
    position: relative;
}

.lp-features__item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    /* 両方の線を強制的に2pxにします */
    width: 1px !important;
    height: 100%;
    background-color: #dddddd; /* 色も統一 */
}

/* 最後のアイテム（3つ目）の右側だけ、線を消します */
.lp-features__item:last-child::after {
    display: none !important;
}

/* アイコン画像 */
.lp-features__icon {
    height: 140px; /* アイコンの高さを揃えてガタつきを防止 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.lp-features__icon img {
    width: auto;
    height: 100%; /* 高さいっぱいに表示 */
    max-width: 100%;
    object-fit: contain; /* アスペクト比を維持して収める */
}

/* メインテキスト */
.lp-features__text {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    color: #333;
    margin-bottom: 15px;
}

/* サブテキスト（1つ目のみ） */
.lp-features__subtext {
    font-size: 15px;
    line-height: 1.5;
    color: #666;
}

.lp-merit {
    width: 100%;
    /* 【重要】画像の比率（2:1）に合わせて高さを自動計算。これで画像が絶対に切れません */
    height: auto;
    aspect-ratio: 1925 / 1090;
    background-color: #000; /* 背景が黒 */
    background-image: url('../images/lp/LP-1-72-03.webp'); /* 製品と岩の画像 */
    background-size: cover;
    background-position: center;
    position: relative; /* 必須：リストの配置基準になります */
    /* display: flex; 関連はすべて削除または無効化 */
    padding: 4vw 0;
    color: #fff;
}

.lp-merit__header {
    padding-left: 8vw;
    position: relative;
    z-index: 2;
}

.lp-merit__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(24px, 2.5vw, 42px);
    font-weight: 900;
    margin: 0 0 10px 0;
}

.lp-merit__subtitle {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(24px, 2.5vw, 42px);
    font-weight: 900;
    margin: 0;
}

.lp-merit__content {
    position: absolute; /* 親要素を基準に自由に動かせるようになります */
    /* 右下からの距離を指定して、理想の位置に配置 */
    bottom: 10%;        /* 下端からの距離（ここを増減して高さを調整！） */
    right: 5vw;         /* 右端からの距離 */
    width: 25vw;        /* リストの横幅 */
    z-index: 3;
}

.lp-merit__list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 26vw; /* リストの横幅 */
}

.lp-merit__list li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.2vw;
    /* チェックボックスの再現 */
    display: flex;
    align-items: center;
    gap: 15px; /* チェックボックスと文字の間隔 */
        /* --- 追加：重厚感を出す影 --- */
        text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* チェックアイコンの再現（赤いチェックマーク） */
.lp-merit__list li::before {
    content: "\2714";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8vw;
    height: 1.8vw;
    min-width: 22px;
    min-height: 22px;
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #E60012; /* チェックの赤色 */
    font-size: 1.2vw;
    font-family: Arial, sans-serif; 
}

/* お客様の声セクション */
.lp-testimonials {
    background-color: #f5f5f5; /* 少しグレーの背景 */
    padding: 50px 0;
}

.lp-testimonials__header {
    text-align: center;
    margin-bottom: 70px;
}

.lp-testimonials__label {
    color: #DC474F;
    font-size: 35px;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
}

.lp-testimonials__title {
    font-family: "Noto Sans JP", sans-serif; /* 以前設定したNoto Sans */
    font-size: 45px;                         /* ご指定のサイズ */
    font-weight: 900;                        /* Black (最太) */
    color: #DC474F;                          /* ご指定の赤色 */
    text-align: center;
    width: 100%;
    margin-bottom: 60px;                     /* 下のコンテンツとの間隔 */
    letter-spacing: -0.02em;
}

/* 白いカード部分 */
.lp-testimonials__card {
    background-color: #fff;
    max-width: 900px; /* カードの幅を絞って中央に寄せる */
    margin: 0 auto;
    padding: 60px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.lp-testimonials__logo {
    display: flex;
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center;     /* 縦方向の中央寄せ（必要であれば） */
    margin-bottom: 40px;     /* 既存の値を維持 */
    width: 100%;             /* コンテナが確実に幅いっぱいになるように */
}

.lp-testimonials__logo img {
    max-width: 200px;
    height: auto;
}

.lp-testimonials__content {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px;
    text-align: left; /* テキストは左揃えが読みやすい */
}

.lp-testimonials__content strong {
    font-weight: 800;
    color: #000;
}

/* カード内の2枚画像ギャラリー */
.lp-testimonials__gallery {
    display: flex;
    gap: 20px;
}

.lp-testimonials__gallery-item {
    width: 50%;
}

.lp-testimonials__gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

/* さまざまな業界セクション */
.across {
    padding: 50px 0;
    background-color: #f9f9f9;
}

.section-heading {
    text-align: center;
    margin-bottom: 50px;
}

.section-heading_text-top {
    font-family: "Noto Sans JP", sans-serif; /* 以前設定したNoto Sans */
    font-size: 45px;                         /* ご指定のサイズ */
    font-weight: 900;                        /* Black (最太) */
    color: #DC474F;                          /* ご指定の赤色 */
    text-align: center;
    width: 100%;
    margin-bottom: 60px;                     /* 下のコンテンツとの間隔 */
    letter-spacing: -0.02em;
}

.section-heading_text-bottom {
    font-family: "Noto Sans JP", sans-serif; /* 以前設定したNoto Sans */
    font-size: 45px;                         /* ご指定のサイズ */
    font-weight: 900;                        /* Black (最太) */
    color: #DC474F;                          /* ご指定の赤色 */
    text-align: center;
    width: 100%;
    margin-bottom: 60px;                     /* 下のコンテンツとの間隔 */
    letter-spacing: -0.02em;
}

/* カードのデザイン */
.across_figure {
    margin: 0;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.across_figure img {
    width: 100%;
    /* 【重要】横4に対して縦3の比率（正方形より少し横長）に固定 */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    height: auto;
    border-radius: 8px;
}

.across_caption {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #333;
    min-height: 3em;           /* 2行分の高さを最低限確保（1.5行×2） */
    display: flex;             /* 中の文字を上下中央に寄せるため */
    align-items: center;       /* 1行の時も2行の時も上下中央に配置 */
    justify-content: center;   /* 左右中央に配置 */
    line-height: 1.2;          /* 行間を少し詰めて2行に収まりやすくする */
}

/* 矢印の色（Splide標準を上書き） */
.splide__arrow svg {
    fill: #DC474F;
}

/* ドット全体の配置 */
.splide__pagination {
    bottom: -30px; /* スライダーの下に配置 */
    padding: 0;
}

/* ドット一つ一つのスタイル */
.splide__pagination__page {
    background: #ccc; /* 通常時の色 */
    border: none;
    width: 10px;
    height: 10px;
    margin: 3px;
    opacity: 0.5;
    transition: transform 0.2s, opacity 0.2s;
}

/* 現在地のドットのスタイル */
.splide__pagination__page.is-active {
    background: #DC474F; /* 現在地の赤色 */
    transform: scale(1.4); /* 少し大きくする */
    opacity: 1;
}

/* =========================================
   お問い合わせセクション
========================================= */

.lp-contact {
    width: 100%;
    padding: 50px 20px;
    background-color: #dc474f;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
}

.lp-contact *,
.lp-contact *::before,
.lp-contact *::after {
    box-sizing: border-box;
}

/* 内側の最大幅 */
.lp-contact__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Contactタイトル */
.lp-contact__title {
    margin: 0 0 35px;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

/* 左右2カラム */
.lp-contact__container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 100px;
    width: 100%;
    margin: 0 auto;
}

/* 各問い合わせブロック */
.lp-contact__method {
    flex: 1 1 0;
    width: 100%;
    max-width: 500px;
    min-width: 0;
    text-align: center;
}

/* 各ブロックの見出し */
.lp-contact__label {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* =========================================
   メール問い合わせボタン
========================================= */

.lp-contact__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    min-height: 64px;
    margin: 0 auto;
    padding: 14px 28px;
    border-radius: 50px;
    background-color: #ffffff;
    color: #dc474f;
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.lp-contact__button:hover {
    transform: translateY(-3px);
    background-color: #fffafa;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ボタン内の矢印 */
.lp-contact__arrow {
    position: relative;
    display: inline-block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #dc474f;
}

.lp-contact__arrow::after {
    position: absolute;
    top: 50%;
    left: 55%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #ffffff;
    content: "";
    transform: translate(-50%, -50%);
}

/* =========================================
   SNSアイコン
========================================= */

.lp-contact__sns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    min-height: 64px;
}

.lp-contact__sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.lp-contact__sns-link img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: contain;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.lp-contact__sns-link:hover img {
    opacity: 0.85;
    transform: scale(1.1);
}

/* =========================================
   補足説明文
========================================= */

.lp-contact__note {
    width: 100%;
    max-width: 440px;
    margin: 20px auto 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

/* SNS側の説明文 */
.lp-contact__method:last-child .lp-contact__note {
    max-width: 480px;
}

/* =========================================
   タブレット対応
========================================= */

@media screen and (max-width: 900px) {
    .lp-contact__container {
        gap: 45px;
    }

    .lp-contact__title {
        font-size: 42px;
    }

    .lp-contact__label {
        font-size: 17px;
    }

    .lp-contact__sns {
        gap: 10px;
    }

    .lp-contact__sns-link img {
        width: 55px;
        height: 55px;
    }
}

/* =========================================
   スマートフォン対応
========================================= */

@media screen and (max-width: 767px) {
    .lp-contact {
        padding: 40px 20px;
    }

    .lp-contact__title {
        margin-bottom: 30px;
        font-size: 36px;
    }

    .lp-contact__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 42px;
    }

    .lp-contact__method {
        width: 100%;
        max-width: 500px;
    }

    .lp-contact__label {
        margin-bottom: 18px;
        font-size: 16px;
    }

    .lp-contact__button {
        width: 100%;
        max-width: 360px;
        min-height: 58px;
        padding: 12px 20px;
        font-size: 17px;
    }

    .lp-contact__arrow {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
    }

    .lp-contact__sns {
        min-height: auto;
        gap: 12px;
    }

    .lp-contact__sns-link img {
        width: 52px;
        height: 52px;
        border-radius: 8px;
    }

    .lp-contact__note,
    .lp-contact__method:last-child .lp-contact__note {
        max-width: 360px;
        margin-top: 16px;
        font-size: 13px;
        line-height: 1.65;
    }
}

/* JRCについてセクション */
.lp-about {
    padding-top: 60px;
    background-color: #ffffff;
}

/* メインタイトル */
.lp-about__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: #DC474F;
    text-align: center;
    margin-bottom: 60px;
}

/* 左右並びのコンテナ */
.lp-about__container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* 各カラム（左・右共通） */
.lp-about__content-box {
    flex: 1;
    text-align: center;
}

/* 左側：見出しテキスト */
.lp-about__label {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: #333333;
    margin-bottom: 30px;
}

/* 右側：サブタイトル（グローバル拠点） */
.lp-about__sub-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: #333333;
    margin-bottom: 30px;
}

/* 画像サイズ調整 */
.lp-about__emblem img, {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.lp-about__map-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;

    /* 枠に沿ってぼかす設定 */
    --mask-width: 15px; /* ぼかしの幅をここで調整できます */

    -webkit-mask-image: 
        linear-gradient(to right, transparent, black var(--mask-width), black calc(100% - var(--mask-width)), transparent),
        linear-gradient(to bottom, transparent, black var(--mask-width), black calc(100% - var(--mask-width)), transparent);
    mask-image: 
        linear-gradient(to right, transparent, black var(--mask-width), black calc(100% - var(--mask-width)), transparent),
        linear-gradient(to bottom, transparent, black var(--mask-width), black calc(100% - var(--mask-width)), transparent);
    
    /* 2つのグラデーションが重なった部分だけを表示する設定 */
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* 注釈テキスト */
.lp-about__note {
    font-size: 11px;
    line-height: 1.6;
    color: #333333;
    text-align: left;
    margin-top: 15px;
    word-break: break-all;
}

/* JRCの選ばれる理由セクション */
.lp-reason {
    padding: 40px 0 100px 0;
    background-color: #ffffff;
}

.lp-reason__item {
    position: relative;
    width: 100%;
    /* aspect-ratio: 16 / 9;  ← これを削除 */
    /* 代わりにこれを追加 */
    min-height: 450px; /* 最低限確保したい高さ（デザインに合わせて調整） */
    height: auto;      /* 中身が増えたら自動で伸びるようにする */
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* overflow: hidden;  ← 中身がはみ出しても隠さず、親を伸ばすために一応削除を検討 */
    padding: 30px 0;    /* 上下に余白を持たせると、中身が詰まっても背景が綺麗に見えます */
}

/* 各段の背景画像指定 */
.lp-reason__item.reason-1 { background: url('../images/lp/reason-bg-1-lg-DozhZrL9.webp') center/cover; }
.lp-reason__item.reason-2 { background: url('../images/lp/reason-bg-2-lg@2x-ZHqeCtIK.webp') center/cover; }
.lp-reason__item.reason-3 { background: url('../images/lp/reason-bg-3-lg@2x-DS8MxMKw.webp') center/cover; }

.lp-reason__content {
    max-width: 900px;
    text-align: left;
    padding: 40px;
    z-index: 2;
}

.lp-reason__number {
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.8;
}

.lp-reason__lead {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.3;
}

.lp-reason__text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 3枚並びの画像エリア */
.lp-reason__images {
    display: flex;
    gap: 15px;
    border: 3px solid #fff; /* 白い枠線で囲むデザインの場合 */
    padding: 15px;
}

.lp-reason__images figure {
    flex: 1;
    margin: 0;
}

.lp-reason__images img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Reason 02 の検査リスト（赤い見出しのボックス） */
/* 親要素の高さ固定を解除 */
.lp-reason__item.reason-2 {
    height: auto !important;
    min-height: 600px;
    aspect-ratio: auto; /* 比率固定を解除 */
    padding: 30px 20px;
}

/* 2カラムレイアウトの設定 */
.lp-reason__flex-container {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* ボックスの高さに引っ張られないようにする */
    margin-top: 20px;
}

/* 左側：検査ボックスのデザイン */
.lp-reason__spec {
    flex: 1; /* 幅を柔軟に */
    max-width: 450px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 0; /* 内部にヘッダーを作るため一旦0 */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.lp-reason__spec-title {
    background: #dc474f; /* 2枚目の画像のような赤い見出し */
    color: #fff;
    margin: 0;
    padding: 12px;
    text-align: center;
    font-size: 18px;
}

.lp-reason__spec-list {
    padding: 20px;
    margin: 0;
}

.lp-reason__spec-list dt {
    font-weight: 900;
    font-size: 16px;
    color: #000;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* チェックマークをdtの前に追加 */
.lp-reason__spec-list dt::before {
    content: "\2714";
    color: #dc474f;     /* チェックマークの赤 */
    font-weight: 900;
    margin-right: 8px;  /* 文字との間隔 */
    display: inline-block;
}

.lp-reason__spec-list dd {
    margin-left: 20px;
    font-size: 14px;
    color: #444;
    line-height: 1.4;
}

/* 右側：テキストエリア */
.lp-reason__main-text {
    flex: 1;
    text-align: left;
}

/* Reason 3 全体の調整 */
.lp-reason__item.reason-3 {
    height: auto !important;
    padding: 30px 0;
}

/* 白いカードボックス */
.lp-reason__image-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    gap: 20px;
    margin-top: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.lp-reason__card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lp-reason__card figure {
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.lp-reason__card img {
    width: 100%;
    aspect-ratio: 3 / 2; /* 写真の比率を固定 */
    object-fit: cover;
    display: block;
}

.lp-reason__card p {
    color: #333;
    font-weight: 700;
    font-size: 16px;
    margin-top: 15px;
    text-align: center;
    line-height: 1.4;
    /* 2行になってもガタつかないための高さ確保 */
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   フッター問い合わせセクション
========================================= */

.lp-footer-contact {
    width: 100%;
    padding: 60px 20px;
    background-color: #dc474f;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
}

.lp-footer-contact *,
.lp-footer-contact *::before,
.lp-footer-contact *::after {
    box-sizing: border-box;
}

/* 内側の幅 */
.lp-footer-contact__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Contactタイトル */
.lp-footer-contact__title {
    margin: 0 0 35px;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

/* メイン問い合わせ */
.lp-footer-contact__main {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.lp-footer-contact__lead,
.lp-footer-contact__sns-lead {
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

/* 問い合わせボタン */
.lp-footer-contact__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    min-height: 64px;
    padding: 14px 28px;
    border-radius: 50px;
    background-color: #ffffff;
    color: #dc474f;
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.lp-footer-contact__button:hover {
    background-color: #fffafa;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

/* ボタン右側の丸い矢印アイコン */
.lp-footer-contact__button-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #dc474f;
}

/* 白い右向き矢印 */
.lp-footer-contact__button-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #ffffff;
    content: "";
    transform: translate(-35%, -50%);
}

.lp-footer-contact__button-icon i {
    margin-left: 2px;
}

/* 補足説明 */
.lp-footer-contact__note {
    width: 100%;
    max-width: 520px;
    margin: 20px auto 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

/* =========================================
   SNSエリア
========================================= */

.lp-footer-contact__sns {
    width: 100%;
    margin-top: 55px;
}

.lp-footer-contact__sns-lead {
    margin-bottom: 22px;
}

/* SNSアイコン並び */
.lp-footer-contact__sns-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

/* SNSリンク */
.lp-footer-contact__sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.lp-footer-contact__sns-link img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: contain;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.lp-footer-contact__sns-link:hover img {
    opacity: 0.85;
    transform: scale(1.1);
}


/* 追従バナー全体 */
.floating-banners {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    z-index: 9999;
}

/* 共通設定 */
.calculator-card,
.catalog-banner,
.whatsapp-banner {
    display: flex;
    text-decoration: none;
    transition: transform 0.3s, filter 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 計算機カード */
.calculator-card {
    flex-direction: column;
    align-items: center;
    width: 280px;
    padding: 15px;
    background-color: #0066b3;
    border: 2px solid #ffffff;
    border-radius: 20px;
}

.calculator-card__title {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.calculator-card__image {
    width: 100%;
    padding: 8px;
    background-color: #ffffff;
    border-radius: 12px;
}

.calculator-card__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* 共通カプセル型バナー */
.catalog-banner,
.whatsapp-banner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 48px;
    border-radius: 50px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: bold;
    gap: 8px;
}

/* 資料ダウンロード */
.catalog-banner {
    background-color: #0066b3;
}

.catalog-banner .banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WhatsApp */
.whatsapp-banner {
    background-color: #7f8c8d;
}

.whatsapp-banner img {
    display: block;
    width: 20px;
    height: auto;
}

/* ホバー */
.calculator-card:hover,
.catalog-banner:hover,
.whatsapp-banner:hover {
    transform: translateY(-5px);
    filter: brightness(1.1);
}

/* スマートフォン対応 */
@media screen and (max-width: 767px) {
    .floating-banners {
        right: 15px;
        bottom: 15px;
        gap: 10px;
    }

    .calculator-card {
        width: 210px;
        padding: 10px;
        border-radius: 15px;
    }

    .calculator-card__title {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .catalog-banner,
    .whatsapp-banner {
        width: 175px;
        height: 42px;
        font-size: 14px;
    }
}



/* レスポンシブ：スマホでは縦並び */
/* --- スマホ用 (768px以下) --- */
@media screen and (max-width: 768px) {
    .lp-hero {
        aspect-ratio: 485 / 400;
        margin-top: 60px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #d64545;
    }

    .lp-hero__title {
        /* 3. フォントサイズの調整 */
        font-size: 26px;
        line-height: 1.2;
        text-align: left;
        width: 100%;
        padding: 0 0 22px;
        text-shadow: none;
    }

    /*3つの特長*/
    .lp-features {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    /* タイトルサイズをスマホに最適化 */
    .lp-features__title {
        font-size: 28px; /* 45pxから縮小 */
        margin-bottom: 40px;
    }

    /* 横並び(flex)を解除して縦並びにする */
    .lp-features__items {
        flex-direction: column;
        align-items: center;
    }

    /* 各アイテムの調整 */
    .lp-features__item {
        width: 100%;
        padding: 0 0 20px 0; /* 左右のpaddingを消し、下に余白を作る */
        margin-bottom: 20px;
    }

    /* PC版で表示していた右側の垂直線を消し、代わりに下の境界線を入れる */
    .lp-features__item::after {
        right: 50% !important;
        transform: translateX(50%); /* 中央配置 */
        top: auto;
        bottom: 0;
        width: 80% !important; /* 横幅いっぱいにせず少し短くすると綺麗 */
        height: 1px !important;
        background-color: #dddddd;
    }

    /* 最後のアイテムの線と余白を消す */
    .lp-features__item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .lp-features__item:last-child::after {
        display: none !important;
    }

    /* アイコンサイズの微調整 */
    .lp-features__icon {
        height: 100px; /* 140pxから少し小さく */
        margin-bottom: 20px;
    }

    /* メインテキストの調整 */
    .lp-features__text {
        font-size: 18px; /* 20pxから少し縮小 */
        padding: 0 10px; /* 文字が端に寄りすぎないように */
    }

    /* サブテキストの調整 */
    .lp-features__subtext {
        font-size: 14px;
        padding: 0 5px;
        br { display: none; } /* スマホでの不自然な改行を防ぐ */
    }

    /*アピールポイントセクション*/
    .lp-merit {
        display: flex; /* 並び替えを有効にする */
        flex-direction: column; /* 縦に並べる */
        background-color: #000;
        padding: 0;
    }

    .lp-merit__inner {
        max-width: 100% !important;
        width: 100%;
        overflow-x: hidden;
    }

    /* 2. タイトルエリアを画像の上に配置 */
    .lp-merit__header {
        position: static;
        width: 100%;
        padding: 40px 7% 0px;
        position: relative;
        z-index: 1;
    }

    /* 3. 画像表示エリア：ここにスマホ専用画像を出し、比率を維持する */
    .lp-merit__image-space {
        display: block;
        width: 120vw;
        margin-left: calc(50% - 50vw);
        aspect-ratio: 1785/ 1086;
        background-image: url('../images/lp/LP-1-72-03.webp'); /* スマホ専用画像 */
        background-size: cover;
        background-position: center bottom;
        position: relative; /* z-indexを有効にするために必要 */
        z-index: 0;
        margin-top: -120px;
        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%)
    }

    /* 4. チェックリストエリア：画像の下に配置 */
    .lp-merit__content {
        position: static; /* 絶対配置を解除 */
        width: 100%;
        padding: 40px 6%; /* 左右に少し余裕を持たせる */
        background-color: #000; /* 画像背景の黒と繋げる */
        box-sizing: border-box;
    }

    .lp-merit__list {
        width: 100%;
        margin-top: 20px;
    }

    .lp-merit__list li {
        font-size: 16px;
        margin-bottom: 25px;
        line-height: 1.5;
        display: flex;
        align-items: flex-start; /* チェックアイコンを1行目の横に固定 */
        text-shadow: none; /* 背景が純黒なら影は不要 */
    }

    /* チェックアイコンの微調整 */
    .lp-merit__list li::before {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 14px;
        margin-top: 2px; /* テキストとの高さを合わせる */
    }
    /* BAYAN事例セクション */
    .lp-testimonials {
        padding: 30px 0;
    }

    .lp-testimonials__header {
        margin-bottom: 40px;
    }

    .lp-testimonials__title {
        font-size: 28px; /* 45pxからスマホサイズへ */
        margin-bottom: 30px;
    }

    /* 1. 白いカード部分の調整 */
    .lp-testimonials__card {
        padding: 30px 20px; /* 余白を大幅に削ってコンテンツ幅を確保 */
        border-radius: 8px;
    }

    /* 2. ロゴのサイズ微調整 */
    .lp-testimonials__logo {
        margin-bottom: 30px;
    }
    .lp-testimonials__logo img {
        max-width: 210px; /* スマホに合わせて少し小さく */
    }

    /* 3. テキストの調整 */
    .lp-testimonials__content {
        font-size: 15px; /* 18pxから読みやすいサイズへ */
        line-height: 1.6;
        margin-bottom: 30px;
    }

    /* 4. 現場写真ギャラリーの調整 */
    .lp-testimonials__gallery {
        flex-direction: column; /* 縦並びに切り替え（大きく見せる） */
        gap: 15px;
    }

    .lp-testimonials__gallery-item {
        width: 100%; /* 横幅いっぱい */
    }

    .lp-testimonials__gallery-item img {
        height: 220px; /* 縦長になりすぎないよう高さを調整 */
        /* object-fit: cover; は維持 */
    }

    /* さまざまな業界 */
    .across {
        padding: 20px 0 50px 0;
    }

    .section-heading {
        text-align: center;
        margin-bottom: 20px;
    }

    .section-heading_text-top {
        font-size: 28px;
        margin-bottom: 20px;
    }

    /* 1. 矢印を少し小さくし、画像と重なっても見やすくする */
    .splide__arrow {
        width: 30px;
        height: 30px;
        background: rgba(255, 255, 255, 0.8); /* 背景を少し白くして視認性UP */
    }

    /* 2. ドットを少し大きくしてタップしやすくする（インドネシア標準） */
    .splide__pagination__page {
        width: 12px;
        height: 12px;
        margin: 5px;
    }

    /* 3. キャプション（業界名）の文字サイズ調整 */
    .across_caption {
        font-size: 15px;
        min-height: 2.5em; /* スマホでは高さを少し抑える */
    }

    /* 4. スライダー全体の余白（チラ見せ設定用） */
    .across_container {
        padding: 0 10px;
    }


    /* --- 共通・PC設定 --- */
.floating-banners {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 9999;
}

.floating-banner, .floating-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.calculator-banner {
    background-color: #DC474F;
    border: 3px solid rgba(255, 255, 255, 0.6);
    padding: 10px 20px !important;
    line-height: 1.2 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.calculator-banner .banner-text {
    font-size: 13px;
    text-align: left;
    white-space: normal !important;
    display: block;
}

.floating-whatsapp {
    background-color: #25d366;
    padding: 12px 20px;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.floating-whatsapp img {
    width: 22px;
    height: auto;
    margin-right: 8px;
}

.floating-banner:hover, .floating-whatsapp:hover {
    transform: translateX(-5px);
    opacity: 0.9;
}

/* お問い合わせセクション */
.lp-contact {
    padding: 50px 0;
    text-align: center;
}

.lp-contact__title {
    font-size: 48px;
    margin-bottom: 40px;
}

/* 2. コンテナを縦並びに */
.lp-contact__container {
    display: flex;
    flex-direction: column;
    gap: 25px; /* メールとSNSの間の余白 */
}

.lp-contact__method {
    width: 100%;
}

.lp-contact__label {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* 3. ボタンの調整 */
.lp-contact__button {
    width: 100%; /* スマホでは横幅いっぱい近くまで広げる */
    max-width: 100%;
    padding: 18px 20px; /* 上下を少し厚くして押しやすく */
    font-size: 18px;
}

.lp-contact__arrow {
    width: 28px; /* 少しだけコンパクトに */
    height: 28px;
}

/* 4. SNSエリア（重要！） */
/* 4. SNSエリアの修正 */
.lp-contact__sns {
    background: #7f8c8d;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 24px;
    gap: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    max-width: 280px; 
    margin: 20px auto 0; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.lp-contact__sns-link {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}

.lp-contact__sns-link:active {
    transform: scale(0.95); /* タップした時に少し沈む演出 */
}

.lp-contact__sns-link img {
    width: 80px; /* サイズは維持 */
    height: auto;
    /* 元のアイコン自体が丸い場合は、border-radiusは不要 */
    display: block;
}

/* About JRC */
.lp-about {
    padding: 25px 0;
}

.lp-about__title {
    font-size: 28px;
    margin-bottom: 40px;
}

/* 1. コンテナを縦並びに */
.lp-about__container {
    flex-direction: column;
    gap: 20px; /* シェアエリアと採用エリアの間隔 */
    padding: 0 5%;
}

/* 2. 左側：シェアエリアの調整 */
.lp-about__share {
    max-width: 100%;
}

.lp-about__label,.lp-about__sub-title {
    font-size: 18px;
    margin-bottom: 20px;
}

.lp-about__emblem img {
    max-width: 280px; /* スマホで大きすぎないように調整 */
    margin: 0 auto 20px;
}

/* 選ばれる理由 */
.lp-reason {
    padding: 20px 0;
}

.section-heading_text-bottom {
    font-size: 28px;
}

.lp-reason__item {
    min-height: auto; /* 高さ固定を解除 */
    padding: 50px 0;
}

/* スマホでは文字の視認性を上げるため、背景を少し暗くする（擬似要素） */
.lp-reason__item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* 60%の黒を重ねる */
    z-index: 1;
}

.lp-reason__content {
    padding: 0 5%;
    z-index: 2; /* オーバーレイより上にする */
}

.lp-reason__number {
    font-size: 40px;
    margin-bottom: 5px;
}

.lp-reason__lead {
    font-size: 20px;
    margin-bottom: 20px;
}

.lp-reason__text {
    font-size: 14px;
    margin-bottom: 25px;
}

/* --- Reason 01: 3枚画像をスワイプしやすく縦か横並びに --- */
.lp-reason__images {
    display: flex;
    flex-direction: column; /* 縦に積む */
    gap: 20px;
    padding: 20px;
    background-color: #ffffff; /* 背景を白に */        
    border: none;              /* 白い枠線は不要になるので消す */
    border-radius: 12px;       /* Reason 3に合わせて角を丸く */        
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 重厚感を出す影 */
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
}

.lp-reason__images figure {
    width: 100%;
    margin: 0;
}

.lp-reason__images img {
    width: 100%;
    aspect-ratio: 16 / 9;   /* 縦並びの時は少し横長の方が綺麗に見えます */
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

/* --- Reason 02: 検査リストを縦並びに --- */
.lp-reason__flex-container {
    flex-direction: column-reverse; /* スマホではリード文を先に読ませるならこれ */
    gap: 30px;
}

.lp-reason__spec {
    max-width: 100%;
    width: 100%;
}

.lp-reason__spec-list dt {
    font-size: 15px;
}

/* --- Reason 03: 白いカードを2列か1列に --- */
.lp-reason__image-box {
    flex-direction: column; /* 1列に積み上げる */
    padding: 20px;
    gap: 25px;
}

.lp-reason__card p {
    font-size: 14px;
    min-height: auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* 区切り線 */
}

.lp-reason__card:last-child p {
    border-bottom: none;
}

.floating-banners {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;

    width: 100%;
    height: 60px;
    padding: 0;

    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
}

/*
 * 3つのバナーを均等配置
 */
.floating-banners .calculator-card,
.floating-banners .catalog-banner,
.floating-banners .whatsapp-banner {
    display: flex;
    flex: 1 1 33.333%;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: 33.333%;
    min-width: 0;
    height: 60px;
    min-height: 60px;
    margin: 0;
    padding: 0 4px;

    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;

    text-align: center;
}

/* バナー間の境界線 */
.floating-banners .calculator-card,
.floating-banners .catalog-banner {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

/* 計算ツール */
.floating-banners .calculator-card {
    background-color: #298bee;
    gap: 4px;
}

/* 計算ツール画像はスマートフォンでは非表示 */
.floating-banners .calculator-card__image {
    display: none;
}

.floating-banners .calculator-card__title {
    width: auto;
    margin: 0;
    padding: 0;

    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* 資料ダウンロード */
.floating-banners .catalog-banner {
    flex-direction: column;
    gap: 3px;

    background-color: #1f7a4d;
    color: #ffffff;
}

/* Get in Touch */
.floating-banners .whatsapp-banner {
    flex-direction: column;
    gap: 3px;

    background-color: #7f8c8d;
    color: #ffffff;
}

/* アイコン */
.floating-banners .banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}

.floating-banners .banner-icon img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.floating-banners .catalog-banner svg {
    display: block;
    width: 19px;
    height: 19px;
}

/* バナーテキスト */
.floating-banners .banner-text {
    display: block;
    max-width: 100%;
    overflow: hidden;

    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* スマートフォンではホバー移動を無効化 */
.floating-banners .calculator-card:hover,
.floating-banners .catalog-banner:hover,
.floating-banners .whatsapp-banner:hover {
    transform: none;
    filter: brightness(1.05);
}

/* ページ下部のコンテンツが隠れないようにする */
body {
    padding-bottom: 60px;
}

}

@media screen and (min-width: 1200px) {
    .offcanvas-header {
        display: none !important;
    }
}

@media screen and (max-width: 1199.98px) {
    .offcanvas-header {
        display: flex !important;
    }
}