@charset "UTF-8";

:root {
    /* カラーパレット */
    /* ベースカラー */
    --color-bg-page: #F4F4F4;
    --color-surface-light: #ffffff;
    --color-surface-dark: #161515;
    --color-red: #c2160a;
    --color-event: #e0a010;
    --color-notice: #454a8c;
    --color-daily: #7b9e44;
    --color-others: #666666;
    --color-filter-default: #555555;
    --color-pagination-dot: rgba(255, 255, 255, 0.5);

    /* テキストカラー */
    --text-main: #000000;
    /* 見出し, 部員紹介カード, イベントカード, ログインフォーム */
    --text-body: #333333;
    /* 本文, infoカード */
    --text-support: #666666;
    /* 補足説明系 */
    --text-caption: #999999;
    /* 段位, 卒業年度等 */
    --text-on-dark: #ffffff;
    /* 白字を使いたいときはこの色 */

    /* 本文タイポグラフィ */
    --font-size-body-fluid: clamp(14px, 2vw, 16px);

    /* ラインカラー */
    --color-line-dark: #333333;
    --color-line-light: #e8e8e8;

    /* アニメーションのイージング */
    --ease-header-scroll: cubic-bezier(0.22, 1, 0.36, 1);
    /* 最初急で最後ゆっくり */
    --ease-menu-open: cubic-bezier(0.65, 0, 0.35, 1);
    /* 最初ゆっくりで急加速して最後ゆっくり */

    /* アニメーションのデュレーション */
    --duration-nav: 0.5s;
    --duration-hero-slide: 1s;

    /* 共通ボタン（events/article） */
    --control-bg: transparent;
    --control-fg: #333;
    --control-border: 1px solid #333;
    --control-hover-scale: 1.02;
    --control-transition-duration: 0.3s;
    --control-transition-ease: ease;

    /* info, members等のカード */
    --card-bg: #ffffff;
    --card-border: 1px solid var(--color-line-light);
    --card-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);

    /* セクション, 名前, 表等の仕切り線 */
    --divider-section: 1px solid var(--color-line-dark);
    --divider-name-header: 1px solid var(--color-line-dark);
    --divider-table-header: 1px solid var(--color-line-dark);
    --divider-table-strong: 2px solid var(--color-line-dark);
    --divider-table-summary-top: 0.5px solid var(--color-line-dark);
    --divider-table-row: 1px solid var(--color-line-light);

    /* heroとheaderのロゴの位置とサイズ */
    --logo-top: clamp(35px, 5vw, 45px);
    --logo-left: clamp(15px, 2vw, 25px);
    --logo-height: 45px;

    --hero-height: 0px;
    --footer-peep-height: 24px;
    /* heroセクションの高さとチラ見えさせたいfooterの高さ */
}

html,
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

html {
    background: var(--color-bg-page);
}

body {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-bg-page);
    min-height: 100dvh;
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--font-size-body-fluid);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}