/* ===========================================
   Responsive Breakpoints 
   =========================================== */

/* ヘッダー仕様（PC/SP対応） */
:root {
    --header-height-pc: 86px;        /* PC: 79px + ボーダー1px */
    --header-height-sp: 60px;        /* SP: 固定60px */
    --header-padding-pc-v: 20px;     /* PC上下パディング */
    --header-padding-pc-h: 160px;    /* PC左右パディング */
    --header-padding-sp: 20px;       /* SPパディング */
    --header-border: 1px;            /* 下ボーダー */
}

/* ===========================================
   Container System
   =========================================== */
   .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;  /* モバイル基本パディング */
}

/* タブレット以上（390px〜） */
@media (min-width: 390px) {
    .container {
        padding: 0 24px;
    }
}

/* PC以上（960px〜） */
@media (min-width: 960px) {
    .container {
        max-width: var(--container-width);  /* 1200px */
        padding: 0 40px;
    }
}

/* ===========================================
   Grid System
   =========================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.col {
    padding: 0 10px;
    flex: 1;
}

/* PC用グリッドカラム（960px以上） */
@media (min-width: 960px) {
    .col-pc-1 { flex: 0 0 8.333%; }
    .col-pc-2 { flex: 0 0 16.666%; }
    .col-pc-3 { flex: 0 0 25%; }
    .col-pc-4 { flex: 0 0 33.333%; }
    .col-pc-6 { flex: 0 0 50%; }
    .col-pc-8 { flex: 0 0 66.666%; }
    .col-pc-12 { flex: 0 0 100%; }
}

/* タブレット用グリッドカラム（390px〜959px） */
@media (min-width: 390px) and (max-width: 959px) {
    .col-tablet-6 { flex: 0 0 50%; }
    .col-tablet-12 { flex: 0 0 100%; }
}

/* モバイル（〜389px）は基本的に100%幅 */
@media (max-width: 389px) {
    .col,
    [class*="col-"] {
        flex: 0 0 100%;
    }
}

/* ===========================================
   Header Responsive
   =========================================== */
   .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: var(--header-border) solid #E5E5E5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* PC版ヘッダー（960px以上） */
@media (min-width: 960px) {
    .header {
        height: var(--header-height-pc);  /* 86px */
        padding: var(--header-padding-pc-v) var(--header-padding-pc-h);
    }
}

/* SP版ヘッダー（〜959px） */
@media (max-width: 959px) {
    .header {
        height: var(--header-height-sp);  /* 60px */
        padding: 0 var(--header-padding-sp);
    }
}


/* ===========================================
   Section Spacing
   =========================================== */
.section {
    padding: 80px 0;  /* PC基本 */
}

/* タブレット（390px〜959px） */
@media (min-width: 390px) and (max-width: 959px) {
    .section {
        padding: 60px 0;
    }
}

/* モバイル（〜389px） */
@media (max-width: 389px) {
    .section {
        padding: 40px 0;
    }
}

/* ===========================================
   Display Control Classes
   =========================================== */

/* PC専用表示（960px以上のみ） */
@media (max-width: 959px) {
    .show-pc-only {
        display: none !important;
    }
}

/* タブレット専用表示（390px〜959px） */
@media (max-width: 389px), (min-width: 960px) {
    .show-tablet-only {
        display: none !important;
    }
}

/* モバイル専用表示（〜389px） */
@media (min-width: 390px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* モバイル非表示 */
@media (max-width: 389px) {
    .hide-mobile {
        display: none !important;
    }
}

/* タブレット非表示 */
@media (min-width: 390px) and (max-width: 959px) {
    .hide-tablet {
        display: none !important;
    }
}

/* PC非表示 */
@media (min-width: 960px) {
    .hide-pc {
        display: none !important;
    }
}

/* ===========================================
   Body Offset for Fixed Header
   =========================================== */
   body {
    padding-top: var(--header-height-sp);  /* デフォルトSP: 60px */
}

@media (min-width: 960px) {
    body {
        padding-top: var(--header-height-pc);  /* PC: 86px */
    }
}