@charset "utf-8";

/* CSS Document */
/*
	variables
================================*/
/* レイアウト関連 */
:root {
    /* レスポンシブ関連 */
    --mq-md: 560px;
    --mq-lg: 960px;
    --mq-md--hp1: 320px;
    --mq-md--hp2: 428px;
    --mq-md--hp3: 834px;
    --mq-lg--hp1: 880px;
    --mq-lg--hp2: 1248px;

    --is-mobile: false;
    --is-tablet: false;
    --is-desktop: false;

    --is-md: false;
    --is-lg: false;
    --is-xlg: false;

    --is-under-md: false;
    --is-under-lg: false;
    --is-under-xlg: false;

    --spacing-5: 4px;
    --spacing-10: 8px;
    --spacing-15: 12px;
    --spacing-20: 16px;
    --spacing-30: 24px;
    --spacing-40: 32px;
    --spacing-50: 40px;
    --spacing-60: 48px;
    --spacing-70: 56px;
    --spacing-80: 64px;
    --spacing-90: 72px;
    --spacing-100: 80px;
    --spacing-150: 120px;
    --spacing-200: 160px;

    --spacing-2xs: calc(clamp(0.25rem, -0.1rem + 1vw, 0.5rem) * 1.6);
    --spacing-xs: calc(clamp(0.5rem, 0.15rem + 1vw, 0.75rem) * 1.6);
    --spacing-sm: calc(clamp(0.75rem, 0.4rem + 1vw, 1rem) * 1.6);
    --spacing-base: calc(clamp(1rem, 0.3rem + 2vw, 1.5rem) * 1.6);
    --spacing-md: calc(clamp(1.5rem, 0.8rem + 2vw, 2rem) * 1.6);
    --spacing-lg: calc(clamp(2rem, 1.3rem + 2vw, 2.5rem) * 1.6);
    --spacing-xl: calc(clamp(2.5rem, -1rem + 10vw, 5rem) * 1.6);
    --spacing-2xl: calc(clamp(5rem, 1.5rem + 10vw, 7.5rem) * 1.6);
    --spacing-3xl: calc(clamp(7.5rem, 4rem + 10vw, 10rem) * 1.6);

    /* 最小幅（モバイルファースト） */
    @media print,
    screen and (min-width: 560px) {
        --is-md: true;
    }

    @media print,
    screen and (min-width: 960px) {
        --is-lg: true;
    }

    @media print,
    screen and (min-width: 1248px) {
        --is-xlg: true;
    }

    /* 最大幅（PCファースト） */
    @media print,
    screen and (max-width: 559px) {
        --is-under-md: true;
    }

    @media print,
    screen and (max-width: 959px) {
        --is-under-lg: true;
    }

    @media print,
    screen and (max-width: 1247px) {
        --is-under-xlg: true;
    }

    /* フォント関連 */
    --fs-2xs: 0.625rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-xl175: 1.75rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3rem;
    --fs-5xl: 4rem;
    --fs-6xl: 5rem;

    --text-xs: calc(clamp(0.625rem, 0.45rem + 0.5vw, 0.75rem) * 1.6);
    --text-sm: calc(clamp(0.75rem, 0.575rem + 0.5vw, 0.875rem) * 1.6);
    --text-base: calc(clamp(0.875rem, 0.7rem + 0.5vw, 1rem) * 1.6);
    --text-md: calc(clamp(1rem, 0.825rem + 0.5vw, 1.125rem) * 1.6);
    --text-lg: calc(clamp(1.125rem, 0.95rem + 0.5vw, 1.25rem) * 1.6);
    --text-xl: calc(clamp(1.25rem, 0.9rem + 1vw, 1.5rem) * 1.6);
    --text-2xl: calc(clamp(1.5rem, 0.8rem + 2vw, 2rem) * 1.6);
    --text-3xl: calc(clamp(2rem, 1.3rem + 2vw, 2.5rem) * 1.6);
    --text-4xl: calc(clamp(2rem, 0.6rem + 4vw, 3rem) * 1.6);
}

/*padding、margin：天地の余白
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/*padding
-=========-=========-=========-=========-=========-=========*/
.ly-pt-2xs {
    padding-top: var(--spacing-2xs);
}

.ly-pt-xs {
    padding-top: var(--spacing-xs);
}

.ly-pt-sm {
    padding-top: var(--spacing-sm);
}

.ly-pt-base {
    padding-top: var(--spacing-base);
}

.ly-pt-md {
    padding-top: var(--spacing-md);
}

.ly-pt-lg {
    padding-top: var(--spacing-lg);
}

.ly-pt-xl {
    padding-top: var(--spacing-xl);
}

.ly-pt-2xl {
    padding-top: var(--spacing-2xl);
}

.ly-pt-3xl {
    padding-top: var(--spacing-3xl);
}

/*padding-bottomレスポンシブ対応
-=========-=========-=========*/
.ly-pb-2xs {
    padding-bottom: var(--spacing-2xs);
}

.ly-pb-xs {
    padding-bottom: var(--spacing-xs);
}

.ly-pb-sm {
    padding-bottom: var(--spacing-sm);
}

.ly-pb-base {
    padding-bottom: var(--spacing-base);
}

.ly-pb-md {
    padding-bottom: var(--spacing-md);
}

.ly-pb-lg {
    padding-bottom: var(--spacing-lg);
}

.ly-pb-xl {
    padding-bottom: var(--spacing-xl);
}

.ly-pb-2xl {
    padding-bottom: var(--spacing-2xl);
}

.ly-pb-3xl {
    padding-bottom: var(--spacing-3xl);
}

/*margin
-=========-=========-=========-=========-=========-=========*/
/*margin-topレスポンシブ対応
-=========-=========-====*/
.ly-mt-2xs {
    margin-top: var(--spacing-2xs);
}

.ly-mt-xs {
    margin-top: var(--spacing-xs);
}

.ly-mt-sm {
    margin-top: var(--spacing-sm);
}

.ly-mt-base {
    margin-top: var(--spacing-base);
}

.ly-mt-md {
    margin-top: var(--spacing-md);
}

.ly-mt-lg {
    margin-top: var(--spacing-lg);
}

.ly-mt-xl {
    margin-top: var(--spacing-xl);
}

.ly-mt-2xl {
    margin-top: var(--spacing-2xl);
}

.ly-mt-3xl {
    margin-top: var(--spacing-3xl);
}

/*margin-bottomレスポンシブ対応
  -=========-=========-====*/
.ly-mb-2xs {
    margin-bottom: var(--spacing-2xs);
}

.ly-mb-xs {
    margin-bottom: var(--spacing-xs);
}

.ly-mb-sm {
    margin-bottom: var(--spacing-sm);
}

.ly-mb-base {
    margin-bottom: var(--spacing-base);
}

.ly-mb-md {
    margin-bottom: var(--spacing-md);
}

.ly-mb-lg {
    margin-bottom: var(--spacing-lg);
}

.ly-mb-xl {
    margin-bottom: var(--spacing-xl);
}

.ly-mb-2xl {
    margin-bottom: var(--spacing-2xl);
}

.ly-mb-3xl {
    margin-bottom: var(--spacing-3xl);
}

/*デバイスによって出し分け
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/

/*spだけ表示
-=========-=========-====*/
@container style(--is-md: true) {
    .show-smOnly {
        display: none !important;
    }
}

/*pcだけ表示
-=========-=========-====*/
@container style(--is-under-lg: true) {
    .show-lgOnly {
        display: none !important;
    }
}

/*spだけ非表示
-=========-=========-====*/
@container style(--is-under-md: true) {
    .none-smOnly {
        display: none !important;
    }
}

/*pcだけ非表示
-=========-=========-====*/
@container style(--is-lg: true) {
    .none-lgOnly {
        display: none !important;
    }
}

/*テキスト
-=========-=========-=========-=========-=========-=========-=========-=========-=========-=========*/
/* サイズ
-=========-=========-=========-=========-========= */
/* classで設定
=========-=========-========= */
/* 10px~12px */
.text-xs {
    font-size: var(--text-xs) !important;
}

/* 12px~14px */
.text-sm {
    font-size: var(--text-sm) !important;
}

/* 14px~16px */
.text-base {
    font-size: var(--text-base) !important;
}

/* 16px~18px */
.text-md {
    font-size: var(--text-md) !important;
}

/* 18px~20px */
.text-lg {
    font-size: var(--text-lg) !important;
}

/* 20px~24px */
.text-xl {
    font-size: var(--text-xl) !important;
}

/* 24px~32px */
.text-2xl {
    font-size: var(--text-2xl) !important;
}

/* 32px~40px */
.text-3xl {
    font-size: var(--text-3xl) !important;
}

/* 32px~48px */
.text-4xl {
    font-size: var(--text-4xl) !important;
}