@charset "UTF-8";

/* ==========================================================================
   Layout - 共通レイアウト
   ========================================================================== */

/* 全体の横揺れ（横スクロール）を防止 */
html, body {
    overflow-x: hidden;
}

/* 1. セクション基本構造 */
.l-section {
    position: relative;
    padding: 0 3%;
    margin-top: -2px;
}

@media (max-width: 768px) {
    .l-section {
        padding: 0;
    }
}

/* 2. コンテンツコンテナ（max-width管理） */
.l-container {
    margin: 0 auto;
    max-width: 1100px;
    padding: 30px 90px 70px; /* 原状の .intro .inner-none を踏襲 */
}

@media (max-width: 480px) {
    .l-container {
        padding: 7% 2%;
    }
}

/* 3. 補助的なコンテナ（幅のバリエーション） */
.l-container--narrow {
    max-width: 900px;
}

.l-container--full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* 4. グリッド・フレキシブル配置（旧 flexbox.css から必要なもののみ） */
.u-flex {
    display: flex;
}

.u-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.u-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.u-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .u-grid-2 {
        grid-template-columns: 1fr;
    }
    .u-grid-3 {
        grid-template-columns: 1fr;
    }
    .u-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .u-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* 5. レスポンシブ表示切り替え（改行用など） */
.pc {
    display: inline !important;
}

.sp {
    display: none !important;
}

@media (max-width: 768px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: inline !important;
    }
}
/* imgなどのブロック要素適用時の特例（必要に応じて） */
img.pc, div.pc { display: block !important; }
img.sp, div.sp { display: none !important; }
@media (max-width: 768px) {
    img.pc, div.pc { display: none !important; }
    img.sp, div.sp { display: block !important; }
}