@charset "UTF-8";

/* =========================================
   Header Styles
   PC: 1440px / SP: 375px (800px → 0.46875)
   ========================================= */

/* -----------------------------------------
   Header Container
   ----------------------------------------- */
.header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 7.4rem;
    background-color: var(--c-primary);
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header__inner {
    width: 100%;
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* -----------------------------------------
   Header Left Group (Logo + Title)
   ----------------------------------------- */
.header__left {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header__logo-img {
    width: 30rem;
    height: 4.4rem;
    object-fit: contain;
}

/* PC用ロゴ表示、SP用ロゴ非表示 */
.header__logo-img--pc {
    display: block;
}

.header__logo-img--sp {
    display: none;
}

.header__page-title {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--c-text-white);
    white-space: nowrap;
    margin-left: -1rem;
}

/* -----------------------------------------
   Header Right Group (Nav + Home)
   ----------------------------------------- */
.header__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

/* -----------------------------------------
   Navigation
   ----------------------------------------- */
.header__nav {
    display: flex;
    align-items: center;
    margin-right: 2rem;
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__nav-item {
    font-family: var(--font-base);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--c-text-white);
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.header__nav-item:hover {
    opacity: 0.7;
}

/* -----------------------------------------
   Home Link (横並び - アイコン右にテキスト)
   ----------------------------------------- */
.header__home {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    color: var(--c-text-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.header__home:hover {
    opacity: 0.7;
}

.header__home-icon {
    width: 3rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    top: 0.2rem; /* ホームアイコンを少し下にずらす */
}

.header__home-icon img {
    width: 3rem;
    height: 2.2rem;
    object-fit: contain;
}

.header__home-text {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--c-text-white);
    white-space: nowrap;
    display: inline;
}

/* -----------------------------------------
   Hamburger Menu (SP Only) - トレース版
   ----------------------------------------- */
.header__hamburger {
    display: none;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    width: 3.2rem;
    height: 2.4rem;
    position: relative;
    z-index: 1005;
}

.header__hamburger-line {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--c-text-white);
    transition: background-color 0.3s 0.1s ease-in-out;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* 上の線 (::before) */
.header__hamburger-line::before {
    content: '';
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--c-text-white);
    position: absolute;
    top: -0.9rem;
    transition: top 0.3s 0.1s ease-in-out, transform 0.3s ease-in-out;
}

/* 下の線 (::after) */
.header__hamburger-line::after {
    content: '';
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--c-text-white);
    position: absolute;
    top: 0.9rem;
    transition: top 0.3s 0.1s ease-in-out, transform 0.3s ease-in-out;
}

/* is-open時のXアニメーション */
.header__hamburger.is-open .header__hamburger-line {
    background-color: transparent;
}

.header__hamburger.is-open .header__hamburger-line::before {
    top: 0;
    transform: rotate(45deg);
    height: 2px;
}

.header__hamburger.is-open .header__hamburger-line::after {
    top: 0;
    transform: rotate(-45deg);
    height: 2px;
}

/* -----------------------------------------
   Mobile Navigation Panel - トレース版
   ----------------------------------------- */
.header__mobile-nav {
    display: none;
    position: fixed;
    top: 4.7rem;
    right: 0;
    width: 50%;
    height: calc(100vh - 4.7rem);
    background-color: rgba(194, 19, 61, 0.90);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 4rem;
    z-index: 1001;
}

.header__mobile-nav.is-open {
    transform: translateX(0);
}

.header__mobile-nav-inner {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.header__mobile-nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__mobile-nav-item {
    text-align: center;
}

.header__mobile-nav-item a {
    font-family: var(--font-base);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--c-text-white);
}

.header__mobile-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    color: var(--c-text-white);
    text-decoration: none;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 2rem;
    font-weight: 700;
}


/* =========================================
   Tablet & Small PC Responsive Styles (1280px以下)
   メニューが被る前にハンバーガーに切り替え
   ========================================= */
@media (max-width: 1280px) {
    /* PC用メニューとホームボタンを【強制的に】非表示 */
    .header__nav,
    .header__home {
        display: none !important;
    }

    /* ハンバーガーアイコンを【強制的に】表示 */
    .header__hamburger {
        display: block !important;
    }

    /* モバイルナビゲーションを【強制的に】裏で待機させる */
    .header__mobile-nav {
        display: block !important;
    }
}

/* =========================================
   SP Responsive Styles (768px以下)
   ========================================= */
@media (max-width: 1025px) {
    .header {
        height: 4.7rem;
    }

    .header__inner {
        padding: 0 1.5rem;
    }

    .header__logo-img {
        width: 15.8rem;
        height: 2.3rem;
    }
    
    /* PC用ロゴを非表示、SP用ロゴを表示 */
    .header__logo-img--pc {
        display: none;
    }
    
    .header__logo-img--sp {
        display: block;
    }

    .header__page-title {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
        margin-left: 0.6rem;
    }

    /* モバイルナビのフォントサイズ調整 */
    .header__mobile-nav-item a {
        font-size: 1.8rem;
    }
}

@media (max-width: 32rem) {
    .header__logo-img {
        width: 13rem;
    }
}

/* =========================================
   Header Spacer (コンテンツ用の余白)
   ========================================= */
.header-spacer {
    height: 7.4rem;
}

@media (max-width: 1025px) {
    .header-spacer {
        height: 4.7rem;
    }
}

/* =========================================
   Small Mobile Adjustments (Header)
   ========================================= */

/* iPhone 12/13/14/15 Pro (390px) 以下 */
@media (max-width: 391px) {
    .header__mobile-nav-item a {
        font-size: 1.6rem;       /* 1.8remから縮小 */
        letter-spacing: 0.05em;  /* 0.1emから縮小して幅を稼ぐ */
        white-space: nowrap;     /* 強制的に改行させない */
    }
}

@media (max-width: 376px) {
    .header__mobile-home {
        font-size: 1.6rem;   /* 2remから縮小 */
        margin-top: 1.5rem;  /* 上の余白を少し詰める */
        padding-top: 1.5rem; /* 枠線との距離を詰める */
    }

    .header__mobile-home img {
        width: 18px;         /* アイコン幅を24pxから縮小 */
        height: auto;
    }
}

@media (max-width: 321px) {
    
    /* 1. 「採用情報ページ」の文字サイズと位置調整 */
    .header__page-title {
        font-size: 1.2rem !important; /* 強制的に小さく */
        margin-left: -0.2rem;         /* 左に少しずらす */
        letter-spacing: 0.1em;
    }

    /* 2. メニュー一覧の行間を狭める */
    .header__mobile-nav-list {
        gap: 1.5rem; /* 1.8rem -> 1.5rem さらに狭める */
    }

    /* 3. 「ホームへ」ボタンの調整（文字縮小＋上にずらす） */
    .header__mobile-home {
        font-size: 1.3rem;      /* 1.6rem -> 1.3rem さらに縮小 */
        margin-top: 0.8rem;     /* 上のリストとの距離を限界まで詰める */
        padding-top: 0.8rem;    /* 罫線と文字の距離も詰める */
    }
    
    .header__mobile-home img {
        width: 15px;            /* アイコンもバランスを見てさらに縮小 */
    }

    /* 念のためメニュー文字サイズ指定 */
    .header__mobile-nav-item a {
        font-size: 1.4rem;
    }
}