/* ==========================================================================
   タブレット用スタイル（SP版の境界 768px 〜 PC版の未満 959px）
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 959px) {

    /* ------------------------------------------------------------------------
     1. ヘッダー (PC版想定 1200px幅 → タブレット幅へ最適化)
     ------------------------------------------------------------------------ */
    header {
        width: 100%;
    }

    .header__inner {
        width: 100%;
        max-width: none;
        /* 画面端に要素が張り付かないよう、左右に余白（20px〜40px等）を確保 */
        padding-left: 4%;
        padding-right: 4%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* ------------------------------------------------------------------------
     2. メインビジュアル (PC版想定 1200px幅 → タブレット幅へ最適化)
     ------------------------------------------------------------------------ */
    #hero {
        width: 100%;
    }

    .hero__inner {
        width: 100%;
        max-width: none;
        padding-left: 4%;
        padding-right: 4%;
    }

    /* ------------------------------------------------------------------------
     3. ボディ部分・各セクション (PC版想定 960px固定 → 100%可変へ)
     ------------------------------------------------------------------------ */
    /* HTML内の全ての共通インナークラスに適用 */
    .section__inner {
        width: 100%;
        max-width: none;
        /* タブレットで見やすくなるよう左右に適切なクッションを配置 */
        padding-left: 5%;
        padding-right: 5%;
        box-sizing: border-box;
    }

    /* ------------------------------------------------------------------------
     4. その他・タブレット向けレイアウト微調整（必要に応じて）
     ------------------------------------------------------------------------ */
    /* 例：DETAILの4つのグリッドがPCだと横並び・SPだと縦並びの場合、
     タブレットでは 2段×2列（50%ずつ）にするのが綺麗です */
    .detail__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .detail__item {
        width: 48%;
        /* 2列並び */
        margin-bottom: 4%;
    }

    .detail__item img {
        width: 100%;
        height: auto;
    }

    /* 例：CONCEPTのテキストとキャラ画像を、タブレット幅に合わせて調整 */
    .concept__content {
        display: flex;
        flex-direction: column;
        /* タブレット幅では縦並びにして見やすくする（状況に応じて） */
        align-items: center;
    }

    .concept__text {
        width: 100%;
        margin-bottom: 30px;
    }

}