@charset "utf-8";
/* ==================================================
   変数をまとめた基本設定CSS
   カラーパレット、サイズ、フォントなどの基本設定
================================================== */

:root {
    /* レイアウト変数 */
    --header-height: 80px;

    /* カラーパレット */
    /* メインカラー */
    --main-color: #FFC0CB /*基本*/;
    --light-color: #FFEAE9 /*明*/;
    --dark-color: #FF69B4 /*暗*/;

    /* バックグラウンドカラー */
    --back-main: #FFFFFF /*基本*/;
    --back-light: #FDFDFD /*明*/;
    --back-dark: #F5F5F5 /*暗*/;

    /* アクセントカラー1 */
    --accent-01: #624597 /*基本*/;
    --accent-01-light: #E6E6FA /*明*/;
    --accent-01-dark: #573583 /*暗*/;

    /* アクセントカラー2 */
    --accent-02: #FFF7AF /*基本*/;
    --accent-02-light: #FFFACD /*明*/;
    --accent-02-dark: #FAC156 /*暗*/;

    /* テキストカラー */
    --text-color: #333;
    --light-gray: #f8f8f8;

    /* UIカラー */
    --ui-dark: rgba(51,51,51,1);
    --ui-darker: rgba(102,102,102,1);
    --ui-lighter: rgba(109,107,91,1);
    --ui-light: rgba(221,221,221,1);

    /* 透過カラー */
    --white-a: rgba(255,255,255,.8);
    --main-color-a: rgba(240,131,0,.1);

    /* フォントファミリー */
    --fn-jp-sans: 'BIZ UDGothic';
    --fn-jp-serif: 'BIZ UDMincho';

    /* アニメーション設定 */
    --transition-base: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.5s ease;

    /* スペーシング */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    /* ボーダー */
    --border-radius: 16px;
    --border-radius-sm: 4px;
    --border-radius-round: 50px;

    /* シャドウ */
    --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* ==================================================
   基本スタイル
================================================== */
html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--fn-jp-sans), sans-serif;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

address {
    margin: 0;
    padding: 0;
    font-style: normal;
}

/* ==================================================
   ユーティリティクラス - フォント
================================================== */
.font-uklink { color: #1e87f0 !important; }
.font-jp-sans { font-family: var(--fn-jp-sans), sans-serif !important; }
.font-jp-serif { font-family: var(--fn-jp-serif), serif !important; }

/* カラー */
.font-main-color { color: var(--main-color) !important; }
.font-light-color { color: var(--light-color) !important; }
.font-dark-color { color: var(--dark-color) !important; }
.font-back-main { color: var(--back-main) !important; }
.font-back-light { color: var(--back-light) !important; }
.font-back-dark { color: var(--back-dark) !important; }
.font-accent-01 { color: var(--accent-01) !important; }
.font-accent-01-light { color: var(--accent-01-light) !important; }
.font-accent-01-dark { color: var(--accent-01-dark) !important; }
.font-accent-02 { color: var(--accent-02) !important; }
.font-accent-02-light { color: var(--accent-02-light) !important; }
.font-accent-02-dark { color: var(--accent-02-dark) !important; }
.font-text-color { color: var(--text-color) !important; }
.font-light-gray { color: var(--light-gray) !important; }
.font-ui-dark { color: var(--ui-dark) !important; }
.font-ui-darker { color: var(--ui-darker) !important; }
.font-ui-lighter { color: var(--ui-lighter) !important; }
.font-ui-light { color: var(--ui-light) !important; }

/* ==================================================
   ユーティリティクラス - 背景
================================================== */
.bg-main-color { background: var(--main-color) !important; }
.bg-light-color { background: var(--light-color) !important; }
.bg-dark-color { background: var(--dark-color) !important; }
.bg-back-main { background: var(--back-main) !important; }
.bg-back-light { background: var(--back-light) !important; }
.bg-back-dark { background: var(--back-dark) !important; }
.bg-accent-01 { background: var(--accent-01) !important; }
.bg-accent-01-light { background: var(--accent-01-light) !important; }
.bg-accent-01-dark { background: var(--accent-01-dark) !important; }
.bg-accent-02 { background: var(--accent-02) !important; }
.bg-accent-02-light { background: var(--accent-02-light) !important; }
.bg-accent-02-dark { background: var(--accent-02-dark) !important; }
.bg-text-color { background: var(--text-color) !important; }
.bg-light-gray { background: var(--light-gray) !important; }
.bg-ui-dark { background: var(--ui-dark) !important; }
.bg-ui-darker { background: var(--ui-darker) !important; }
.bg-ui-lighter { background: var(--ui-lighter) !important; }
.bg-ui-light { background: var(--ui-light) !important; }
.bg-white-a { background: var(--white-a) !important; }

/* パターン背景 */
.bg-dot-black {
    background: url("../img/assets/bg_dot_black.png") !important;
    background-size: 4px !important;
}
.bg-dot-white {
    background: url("../img/assets/bg_dot_white.png") !important;
    background-size: 4px !important;
}
.bg-lined {
    background-image: url("../img/assets/bg_oblique_T.png") !important;
    background-size: 15px !important;
    background-repeat: repeat;
}
.bg-lined-white {
    background-image: url("../img/assets/bg_oblique_whiteT.png") !important;
    background-size: 15px !important;
    background-repeat: repeat;
}

/* 透過背景 */
.bg-transparent { background: rgba(34,34,34,.3); }
.bg-transparent-black { background: rgba(0,0,0,.5); }
.bg-transparent-white { background: rgba(255,255,255,.7); }

/* ==================================================
   レスポンシブユーティリティ
================================================== */
@media (max-width: 639px) {
    .auto-scale { transform: scale(.75); }
    .auto-scale-xs { transform: scale(.65); }
}

@media (max-width: 740px) {
    .uk-visible\@740 { display: none !important; }
}

@media (max-width: 1279px) {
    .uk-visible\@1280 { display: none !important; }
    .mr0_1280 { margin-right: 0 !important; }
}

@media (min-width: 1280px) {
    .uk-hidden\@1280 { display: none !important; }
}