@charset "UTF-8";

/* ==========================================================================
   Variables & Reset
   ========================================================================== */
:root {
    --color-main: #800005;   /* メインカラー（暗い赤） */
    --color-sub: #310606;    /* サブカラー（さらに暗い赤） */
    --color-accent: #ffff00; /* アクセントカラー（黄） */
    
    --color-hero-bg: #440606; /* 画像が読み込まれるまでの背景色 */
    
    --color-bg: #0a0000;     /* ベース背景色 */
    --color-text: #FFFFFF;   /* 基本テキスト色 */
    --color-gray: #333333;
    
    /* --font-base: 'Kozuka Gothic Pr6N', '小塚ゴシック Pr6N', 'Kozuka Gothic Pro', '小塚ゴシック Pro', sans-serif; */
    --font-base: 'A P-OTF 翠流アトラス StdN', 'A P-OTF Suiryu Atlas StdN', 'Noto Sans JP', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
ul { list-style: none; }

/* ==========================================================================
   Layout (l-)
   ========================================================================== */
.l-container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

/* ==========================================================================
   Components (c-, u-)
   ========================================================================== */
.c-btn { display: inline-block; padding: 10px 20px; border-radius: 4px; font-weight: bold; transition: all 0.3s ease; cursor: pointer; }
.c-btn--outline { border: 1px solid var(--color-text); }
.c-btn--outline:hover { background-color: var(--color-text); color: var(--color-main); }
.c-btn--primary { color: var(--color-accent); padding: 5px 0; font-size: 1.1rem; }
.c-btn--large { background-color: var(--color-main); color: #fff; padding: 15px 50px; font-size: 1.2rem; border-radius: 50px; }
.u-text-accent { color: var(--color-accent); }

/* SEO・アクセシビリティ用の隠しテキストクラス */
.u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Project / Pages (p-)
   ========================================================================== */

   /* ==========================================================================
   デザイナー要望：詳細情報テキストのフォント上書き（Noto Sans JP）
   ========================================================================== */
.p-concept__box-inner p,
.p-product-card__sub,
.p-product-card__list li,
.l-footer__copyright { /* ★ここを追加：フッターの商標・コピーライト */
    font-family: 'Noto Sans JP', sans-serif !important; /* 強制的にNoto Sans JPを適用 */
    font-weight: 400; /* 詳細情報は太字よりRegular（400）の方が視認性が上がります */
}

/* ※Conceptの文字は元々 bold(700) 指定だったので、もし細すぎる場合は上記を 700 に戻してください */
/* --- Hero Section (ここだけ完全画像化) --- */
.p-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-hero-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    
    /* PC版画像と比率 */
    background-image: url('./2x/hero-pc.png');
    aspect-ratio: 1500 / 1712.5;
}


/* --- Concept Section (Grid Logic) --- */
.p-concept {
    position: relative;
    /* 背景画像の設定（継続） */
    background-image: url('./2x/bg-concept-pc.png');
    aspect-ratio: 3000 / 2248;
    background-size: 100% auto;
    width: 100%;
}

.p-concept__grid {
    position: absolute;
    /* 正確な座標から算出した相対パーセンテージ（継続） */
    left: 16.368%;  /* 245.5152px / 1500px */
    top: 48.075%;   /* 540.3641px / 1124px */
    width: 67.240%; /* グリッド全体の幅 (1008.6px / 1500px) */
    height: 30.900%;/* グリッド全体の高さ (347.32px / 1124px) */
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
    /* 余白比率（継続） */
    column-gap: 3.283%;
    row-gap: 9.027%;
}

.p-concept__box {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* 透過20%の白 */
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* グラデーション線の再現（継続） */
.p-concept__box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 16px; 
    padding: 2px;
    background: linear-gradient(69deg, #942a1f 0%, #cc2500 10.1563%, #ffa700 58.0047%, #942a1f 100%); 
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* 【大幅修正】ボックス内のテキスト配置コンテナ */
.p-concept__box-inner {
    /* ★削除：絶対配置（position, left, top）の指定を消去します */
    
    /* ★ここを追加：文字が端に寄りすぎないよう幅を85%程度に制限 */
    width: 100%;
    max-width: 85%;
    
    text-align: left; /* 左寄せ（複数行になった時に綺麗に見せるため） */
    font-family: var(--font-base);
}

/* 本文テキスト（タイトルと分けず、プレーンな塊としてスタイル定義） */
.p-concept__box-inner p {
    margin: 0; 
    /* 見た目のバランスに合わせて 1.1vw に微調整 */
    font-size: 1.1vw; 
    line-height: 1.6; /* 行間も少しだけ引き締めます */
    letter-spacing: 0.02em; /* イラレの文字詰めに少しだけ寄せます */
    color: #ffffff;
    font-weight: 700; 
}

/* --- Products Section --- */
.p-products {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    /* PC版画像と比率 */
    background-image: url('./2x/bg-products-pc.png');
    aspect-ratio: 1528.5 / 1286.5; 
}

/* いただいた座標を元にした絶対配置グリッド */
.p-products__grid {
    position: absolute;
    left: 17.791%;   /* 271.9406 / 1528.5 */
    top: 18.868%;    /* 242.7379 / 1286.5 */
    width: 63.235%;  /* 966.5446 / 1528.5 */
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15.619%; /* 150.961 / 966.5446 */
}

/* カードの背景やボーダーは削除し、縦並びのコンテナとして使用 */
.p-product-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    
    /* ★ここを追加：文字が長くてもカード幅を勝手に広げない（画像サイズを左右で完全に一致させる） */
    min-width: 0; 
    
    font-family: var(--font-base); 
}

/* PC版ではスマホ専用改行を無効化する */
.u-sp-only {
    display: none;
}

/* タイトル（黄色・中央寄せ） */
.p-product-card__title {
    font-size: 1.8vw; 
    color: var(--color-accent);
    margin-bottom: 10px;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    
    /* ★ここを追加：文字が長くても絶対に改行させず、1行に収める */
    white-space: nowrap; 
}

/* サブタイトル（白・中央寄せ） */
.p-product-card__sub {
    font-size: 1.1vw;
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.6;
    text-align: center;
    font-weight: 400; /* normal ではなく 400 */
    letter-spacing: 0.05em;
}

/* 画像エリア（グラデーションの正方形の箱） */
.p-product-card__img-wrapper {
    width: 100%; /* 幅はカード全体の407.7918pxに対して100% */
    aspect-ratio: 1 / 1; /* 正方形に固定（407.7918px × 407.7918pxの比率） */
    
    /* イラレの90度をCSS用の0degに変換したグラデーション */
    background: linear-gradient(0deg, #d56969 0%, #842121 100%);
    
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 本番の画像が入った時の設定（ベース） */
.p-product-card__img {
    /* ここにあった width: 90%; を削除し、下の個別指定に分けます */
    height: auto;
    object-fit: contain;
    display: block;
}

/* 左のカード（FHD変換装置）の画像サイズ */
.p-product-card:nth-child(1) .p-product-card__img {
    /* もしこちらも大きすぎる/小さすぎる場合は、ここを調整してください */
    width: 75%; 
}

/* 右のカード（カメラ）の画像サイズ（イラレの数値から算出した完璧な比率） */
.p-product-card:nth-child(2) .p-product-card__img {
    width: 51.643%; /* 210.5965 / 407.7918 */
}

/* リストのスタイル */
.p-product-card__list {
    margin-bottom: 40px;
    /* 5%だった余白を、イラレの座標(2.14px / 407.79px)から算出した 0.5% に修正 */
    padding-left: 0.5%; 
}

.p-product-card__list li {
    position: relative;
    /* 中黒点（・）と文字の間の隙間。少し広ければ 1em などに微調整してください */
    padding-left: 1.2em; 
    margin-bottom: 12px;
    font-size: 0.9vw;
    line-height: 1.6;
    color: #ffffff;
    letter-spacing: 0.02em; 
}

/* 中黒点（・）を擬似要素で再現 */
.p-product-card__list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffffff;
}

/* Read more ボタン（PC版） */
.c-btn--primary {
    position: relative; /* 矢印の基準点 */
    color: var(--color-accent);
    font-size: 1.2vw;
    font-weight: bold;
    align-self: flex-start;
    
    /* 矢印（三角形）と「Read more」の文字が被らないための内側余白 */
    padding-left: 1.5vw; 
    
    /* ★ここを追加：ボタン全体を右にずらしてPC版のリスト開始位置と揃える */
    margin-left: 1.8%; 
    
    text-decoration: none;
}

/* PC版の矢印（三角形） */
.c-btn--primary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-accent);
    border-width: 0.8vw 0 0.8vw 0.6vw; /* PC版の仮サイズ（適宜調整してください） */
}

/* --- LiDAR Section --- */
.p-lidar {
    position: relative;
    width: 100%;
    background-color: #410504; /* ←ここを #240404 から変更しました */
    padding: 6vw 0; 
}

.p-lidar__header {
    text-align: center;
    margin-bottom: 3vw;
}

.p-lidar__title {
    font-size: 2vw; /* ★少し小さく調整 */
    color: var(--color-accent);
    margin-bottom: 0.5vw;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.p-lidar__sub {
    font-size: 1.2vw; /* ★少し小さく調整 */
    color: #ffffff;
    letter-spacing: 0.05em;
}

/* 動画ラッパー（既存の記述を上書き：クリックできるように cursor を追加、基準点に設定） */
.p-lidar__video-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 3vw;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    position: relative; /* 再生ボタンの基準点にする */
    cursor: pointer; /* マウスを乗せたら指マークにする */
}

.p-lidar__video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ★YouTube風の大きな再生ボタンのデザイン */
.p-lidar__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 46px;
    background-color: rgba(0, 0, 0, 0.7); 
    border-radius: 14px;
    transition: all 0.3s ease;
    pointer-events: none; 
    
    /* ★ここを追加：動画より絶対に手前に表示させる魔法 */
    z-index: 10; 
}

/* 再生ボタンの中の白い「▶」マーク */
.p-lidar__play-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%; /* 三角形の位置バランスを整えるため少し右寄りに */
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #ffffff; /* 白い三角形 */
}

/* ラッパーにマウスを乗せた（ホバー）時に、YouTubeのようにボタンが赤くなるエフェクト */
.p-lidar__video-wrapper:hover .p-lidar__play-btn {
    background-color: #ff0000; /* YouTubeレッド */
}

/* ★動画再生が始まったら、再生ボタンをフワッと消すための設定 */
.p-lidar__video-wrapper.is-playing .p-lidar__play-btn {
    opacity: 0;
    visibility: hidden;
}

/* 中央テキストコンテンツ */
.p-lidar__content {
    text-align: center;
    margin-bottom: 4vw;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.p-lidar__desc {
    font-size: 0.95vw; /* ★少し小さく調整 */
    color: #ffffff;
    line-height: 2;
    letter-spacing: 0.05em;
    margin-bottom: 2vw;
    font-weight: 400;
}

.p-lidar__booth {
    font-size: 1.8vw; /* ★少し小さく調整 */
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ★展示会案内エリア（外側は中央寄せ、中身は左寄せ） */
.p-lidar__event {
    text-align: center; /* 外枠を中央に配置 */
    font-family: 'Noto Sans JP', sans-serif !important;
}

.p-lidar__event-inner {
    display: inline-block; /* 中身の幅にピタッと合わせる */
    text-align: left; /* 中のテキストはすべて左寄せ */
}

.p-lidar__event-title {
    font-size: 0.95vw; /* ★少し小さく調整 */
    color: #ffffff;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 2vw;
    letter-spacing: 0.05em;
}

.p-lidar__event-details {
    color: #fff;
    font-size: 0.85vw; /* ★少し小さく調整 */
    line-height: 2;
    margin-bottom: 2vw;
}

.p-lidar__event-details div {
    display: flex;
    gap: 3em; /* 項目名と内容の間の余白を少し広めに確保 */
}

.p-lidar__event-details dt {
    font-weight: 400;
    width: 3em; /* 項目名の幅を固定して縦を綺麗に揃える */
}

/* リンクテキスト */
.p-lidar__event-link {
    font-size: 0.85vw; /* ★少し小さく調整 */
    color: #ffffff;
}

.p-lidar__event-link a {
    color: var(--color-accent);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.p-lidar__event-link a:hover {
    opacity: 0.7;
}

/* --- Footer Section --- */
.l-footer {
    width: 100%;
    /* ここを #000000 から #1b0502 に変更します */
    background-color: #1b0502; 
    
    height: 13.705vw; 
    padding: 0 6.413%; 
    box-sizing: border-box;
}

/* 左右に振り分けるフレックスボックス */
.l-footer__inner {
    display: flex;
    justify-content: space-between; /* 左と右にピタッと分ける */
    align-items: center; /* 縦方向のど真ん中に配置 */
    width: 100%;
    height: 100%;
}

.l-footer__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ロゴ画像 */
.l-footer__logo-img {
    width: 15.358vw; /* 幅 230.3689px から算出 */
    height: auto;
    margin-bottom: 1vw; /* ★ロゴとコピーライトの間の余白（仮） */
}

/* コピーライトテキスト */
.l-footer__copyright {
    color: #ffffff; /* デザインに合わせて白やグレーに変更してください */
    font-size: 1.155vw; /* 13pt (約17.3px) から算出 */
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* コンタクトボタン（画面右下に追従固定） */
.l-footer__contact-btn {
    display: block;
    position: fixed;   /* ★追加：画面に対して固定 */
    bottom: 30px;      /* ★追加：画面下からの距離 */
    right: 30px;       /* ★追加：画面右からの距離 */
    z-index: 9999;     /* ★追加：常に一番手前に表示させる */
    width: 9.36vw; 
    height: 9.36vw;
    /* 巨大モニター（1920px以上）でボタンが大きくなりすぎないためのストッパー */
    max-width: 140px; 
    max-height: 140px;
    transition: transform 0.3s ease;
}
/* ボタンにマウスを乗せた時に少しフワッと大きくなるエフェクト */
.l-footer__contact-btn:hover {
    transform: scale(1.05); 
}

.l-footer__contact-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Responsive (スマホ版への切り替え：max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* --- Hero セクション --- */
    .p-hero {
        background-image: url('./2x/hero-sp.png');
        aspect-ratio: 786 / 3706; 
    }
    
    /* --- Concept セクション --- */
    .p-concept {
        background-image: url('./2x/bg-concept-sp.png');
        /* 基準幅393(x2=786)に対するイラレの画像比率 */
        aspect-ratio: 786 / 3260; 
    }

    .p-concept__grid {
        position: absolute;
        /* スマホ版の座標計算 */
        left: 10.560%;  /* 41.5 / 393 */
        top: 26.129%;   /* 425.909 / 1630(3260の半分) */
        width: 78.880%; /* 310 / 393 */
        height: auto;
        
        display: flex;
        flex-direction: column;
        row-gap: 6.56vw; /* ボックス間の余白: 25.7874 / 393 * 100vw */
    }

    .p-concept__box {
        width: 100%;
        /* スマホ版ボックスの比率（310 / 155.9）を維持 */
        aspect-ratio: 310 / 155.9082; 
    }

    /* スマホ版のテキストサイズ変更 */
    .p-concept__box-inner p {
        font-size: 4.88vw; /* 19.1853 / 393 */
    }
    
    /* --- Products セクション --- */
    .p-products {
        background-image: url('./2x/bg-products-sp.png');
        /* 基準幅393(x2=786)に対するイラレの画像比率 */
        aspect-ratio: 786 / 4518; 
    }

    .p-products__grid {
        position: absolute;
        left: 6.706%;   /* 26.3555 / 393 */
        top: 9.736%;    /* 219.9426 / 2259(4518の半分) */
        width: 86.551%; /* 340.1446 / 393 */
        height: auto;

        display: flex;
        flex-direction: column;
        row-gap: 44.06vw; /* カード間の巨大な余白: 173.1816 / 393 */
    }

    /* --- スマホ版の製品画像サイズの個別最適化 --- */
    /* 左のカード（FHD変換装置）の画像サイズ (スマホ) */
    .p-product-card:nth-child(1) .p-product-card__img {
        width: 75%; 
    }

    /* 右のカード（カメラ）の画像サイズ (スマホ) */
    /* ★ここを修正：PC版と同じく、イラレ通りの比率（51.6%）にすることで、スマホでもカメラが大きくなりすぎず、デザイン通りの美しいバランスになります */
    .p-product-card:nth-child(2) .p-product-card__img {
        width: 51.643%; 
    }

    /* スマホ専用改行をスマホ画面の時だけ有効化する */
    .u-sp-only {
        display: block;
    }

    /* スマホ用にProductsのテキストサイズを上書き */
    .p-product-card__title { 
        font-size: 5.5vw; /* 元の綺麗に見えていた大きさに戻します */
    }

    .p-product-card__sub { font-size: 3.8vw; margin-bottom: 20px; }
    /* ★ここに追加：リスト全体のスマホ用下余白（イラレの 20.46px 相当） */
    .p-product-card__list { 
        margin-bottom: 5.2vw; 
    }

    .p-product-card__list li { font-size: 3.5vw; line-height: 1.8; margin-bottom: 16px; }
    
    /* Products セクション (スマホ版) のボタン */
    .c-btn--primary { 
        font-size: 4.8vw; 
        padding-left: 5vw; /* 矢印が入る分の内側余白 */
        margin-left: 1.5vw; /* ★ここを追加：ボタン全体を右にずらしてリストの開始位置と揃える */
    }

    /* ★ここでイラレから算出した「幅12.8px、高さ32px」の三角形を適用！ */
    .c-btn--primary::before {
        border-width: 4.07vw 0 4.07vw 3.26vw; 
    }

    /* --- LiDAR セクション (スマホ版) --- */
    .p-lidar { padding: 12vw 0; }
    .p-lidar__header { margin-bottom: 8vw; }
    .p-lidar__title { font-size: 5.5vw; }
    .p-lidar__sub { font-size: 4vw; }
    
    .p-lidar__video-wrapper {
        margin-bottom: 8vw;
        border-radius: 8px;
    }

    .p-lidar__content { margin-bottom: 10vw; }
    .p-lidar__desc { font-size: 3.2vw; margin-bottom: 6vw; line-height: 1.6; }
    .p-lidar__booth { font-size: 5vw; }

    /* スマホでも「テキスト群は左寄せで、画面中央に配置」を維持 */
    .p-lidar__event-inner { text-align: left; }
    
    .p-lidar__event-title { font-size: 3vw; margin-bottom: 6vw; line-height: 1.6; }
    .p-lidar__event-details { font-size: 2.8vw; margin-bottom: 6vw; line-height: 1.8; }
    .p-lidar__event-details div { gap: 2em; margin-bottom: 1vw; }
    .p-lidar__event-details dt { width: 3em; }
    .p-lidar__event-link { font-size: 2.8vw; }

    /* --- Footer セクション (スマホ版) --- */
    .l-footer {
        position: relative;
        /* 高さをイラレの数値(180.72)から完全固定 */
        height: 45.98vw; 
        padding: 0; /* 絶対配置にするため内側余白はゼロに */
    }
    
    /* 以前のFlexbox指定を解除し、基準点としての機能だけ残す */
    .l-footer__inner, .l-footer__left, .l-footer__right {
        display: block; 
    }
    
    /* ロゴの絶対配置 */
    .l-footer__logo-img {
        position: absolute;
        left: 6.89vw; /* X: 27.0806 / 393 */
        top: 15.61vw; /* Y: 61.3552 / 393 */
        width: 39.9vw; /* W: 156.8179 / 393 */
        margin: 0;
    }
    
    /* コピーライトテキストの絶対配置 */
    .l-footer__copyright {
        position: absolute;
        left: 7.19vw; /* X: 28.252 / 393 */
        top: 29.74vw; /* Y: 116.8653 / 393 */
        font-size: 2.8vw; /* 11 / 393 */
        line-height: 1.6;
        margin: 0;
    }
    
    /* コンタクトボタンの右下追従（スマホ版） */
    .l-footer__contact-btn {
        position: fixed; /* absolute から fixed に変更 */
        top: auto;       /* ★追加：上からの距離指定をリセット */
        bottom: 20px;    /* ★変更：画面下から20pxの位置に固定 */
        right: 20px;     /* ★変更：画面右から20pxの位置に固定 */
        width: 21.5vw;
        height: 21.5vw;
        /* スマホでボタンが大きくなりすぎないためのストッパー */
        max-width: 80px;
        max-height: 80px;
    }
}

/* ==========================================================================
Scroll Animation (スクロールアニメーション)
========================================================================== */
/* ① 最初は透明にして、少し（30px）下にズラしておく */
.js-fadeup {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* ② 画面に入って「is-active」クラスが付いたら、元の位置・不透明度に戻る */
.js-fadeup.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* js-fadeup が複数並んでいる時の、アニメーション開始の「遅延（ディレイ）」設定 */
.p-concept__box:nth-child(1).js-fadeup { transition-delay: 0s; }   /* 1個目はすぐに出る */
.p-concept__box:nth-child(2).js-fadeup { transition-delay: 0.2s; } /* 2個目は0.2秒遅れて出る */
.p-concept__box:nth-child(3).js-fadeup { transition-delay: 0.4s; } /* 3個目は0.4秒遅れて出る */


/* ==========================================================================
   Wrapper (巨大モニター対策の最大幅ロック)
   ========================================================================== */
/*
body {
    overflow-x: hidden; /* 横スクロールのバグを完全防止 */
    background-color: var(--color-main); /* ★ここ：1920pxを超えた左右の余白をメインカラー（暗い赤）にする */
} 

.l-wrapper {
    width: 100%;
    max-width: 1920px; /* ここで拡大をストップ（イラレの1.28倍サイズ） */
    margin: 0 auto;    /* 画面のド真ん中に固定 */
    background-color: var(--color-bg); /* 内側のベース背景は元の黒（#0a0000）を維持 */
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); /* オプション：背景の赤とLPの境界にうっすら影を入れて立体感を出す */
} 

*/