@charset "utf-8";

/* ==========================================================================
   1. トップページ専用カラー変数
   ========================================================================== */
:root {
    --header-pink-bg: #fff9fc;
    --header-pink-border: #ffdbed;
    --nav-yellow: #fff9c4;
    --portal-yellow-bg: #fffde7;
    --portal-yellow-border: #fff176;
}

/* ==========================================================================
   2. ヘッダー・ナビゲーション（一体化デザイン）
   ========================================================================== */

/* 固定ヘッダーの色合いをパステルに */
.sticky-header {
    background-color: var(--header-pink-bg) !important;
    border-bottom: 2px solid var(--header-pink-border) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.01) !important;
}

/* ヘッダー直後の余白をゼロにして帯と密着させる */
.header-spacer {
    height: 70px; /* Style5のヘッダー高さに合わせる */
}

/* 【重要】ナビゲーション帯：画面端まで背景色を広げ、浮遊感を解消 */
.top-nav-band {
    width: 100%;
    background-color: var(--nav-yellow);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 12px 0; /* 少しスリムに調整 */
    margin: 0;
}

/* 帯の中のボタンコンテナ（背景や枠線を消して帯に馴染ませる） */
.top-nav-band .button-container {
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ボタンカードのデザイン（丸文字・白背景・接地感のある影） */
.top-nav-band .button-container a.button-link {
    font-family: 'Zen Maru Gothic', sans-serif;
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
    color: #333333 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    flex: 1;
    max-width: 180px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* 研修ポータルボタンのみ黄色で強調 */
.top-nav-band .button-container a.button-link.portal-card {
    background-color: var(--portal-yellow-bg) !important;
    border: 2px solid var(--portal-yellow-border) !important;
}

/* ホバーアクション */
.top-nav-band .button-container a.button-link:hover {
    background-color: #fffde7 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.15) !important;
}

/* ==========================================================================
   3. メイン装飾（スライダー）
   ========================================================================== */

/* スライダーを主役にするための余白 */
.main-content {
    padding-top: 40px !important;
}

/* スライダーに白枠をつけて写真風に */
#slider1_container {
    border-radius: 15px !important;
    border: 5px solid #fff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    background-color: #fdfdfd;
}

/* ==========================================================================
   4. スマホ対応（スマホメニューのフォント変更）
   ========================================================================== */
@media screen and (max-width: 768px) {
/* スマホではナビゲーション帯を非表示にする */
    .top-nav-band {
        display: none !important;
    }
    
    .menu-overlay a {
        font-family: 'Zen Maru Gothic', sans-serif;
    }
    /* スマホ時のスライダー上部の余白を微調整（必要に応じて） */
    .main-content {
        padding-top: 20px !important;
    }
}