/* ========================================
   Webフォント定義
   ======================================== */

@font-face {
    font-family: "Noto Serif JP";
    src: url("/fonts/NotoSerifJP-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: "Zen Old Mincho";
    src: url("/fonts/ZenOldMincho-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} */

@font-face {
    font-family: "Source Serif Display";
    src: url("/fonts/SourceSerif4Display-Semibold.ttf.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yonaga Old Mincho";
    src: url("/fonts/YonagaOldMincho-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   CSS変数
   ======================================== */
:root {
    /* フォントファミリー */
    --font-noto: "Noto Serif JP", serif;
    --font-source-serif-display: "Source Serif Display", serif;
    --font-yonaga: "Yonaga Old Mincho", serif;

    /* プロジェクト採用フォント */
    /* --font-heading-vertical: "Zen Old Mincho", serif; */
    --font-heading-vertical: "Yonaga Old Mincho", serif;
    /* --font-heading: "Zen Old Mincho", serif; */
    --font-heading: "Yonaga Old Mincho", serif;
    --font-body: "Noto Serif JP", serif;

    /* カラー */
    --c-text: #231815;
    --c-dark: #2c2c2c;
    --c-white: #ffffff;
    /* --c-gray-light: #ded8d4; */
    --c-gray-light: #e5e5e6;
    /* --c-gray: #5a5b5b; */
    --c-gray: #c3bba6;
    --c-border: #231815d7;
    /* --c-bg-light: #ded8d4; */
    --c-bg-light: #e5e5e6;
    --c-cream: #f8eed4;
    --c-brown: #4d3417;

    /* テーマカラー */
    /* --c-onsen: #035777; */
    --c-onsen: #195772;
    --c-onsen-dark: #002f4b;
    --c-dining: #ed6a1b;
    --c-sauna: #7a6a56;

    /* フォントサイズ */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;

    /* スペーシング */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 3rem;
    --space-section: 3rem;

    /* セクションpadding（レスポンシブ対応） */
    --section-padding-sp: 5rem;
    --section-padding-pc: 8rem;

    /* コンテナ */
    --container-max-width: 1200px;
    --container-narrow-width: 860px;
    --container-enkuuu-width-sp: 293px;
    --container-padding: 1rem;
    --container-padding-md: 1.5rem;
    --container-padding-lg: 2rem;

    /* ボーダーラディウス */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* シャドウ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* トランジション */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========================================
   リセット・ベース
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* scroll-behavior: smooth; */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--c-text);
    font-size: var(--fs-base);
    background-color: var(--c-white);
    letter-spacing: 0.08em;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   基本要素
   ======================================== */
img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

a img:hover {
    opacity: 0.9;
}

a:has(img)::after {
    visibility: hidden;
}

a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    padding-bottom: 0.6rem;
    border-bottom: none;
    line-height: 1;
    transition: color var(--transition-fast), opacity var(--transition-base);
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.75px;
    width: 100%;
    background: var(--c-brown);
    transition: width 0.5s var(--transition-fast);
    pointer-events: none;
}

a:hover {
    color: var(--c-gray);
    opacity: 0.8;
}

a:hover::after {
    width: 0;
}

a img {
    display: block;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

a:hover img {
    opacity: 0.9;
}

a.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ========================================
   タイポグラフィ
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

h1 {
    font-size: var(--fs-2xl);
    letter-spacing: 0.2rem;
}
h2 {
    font-size: var(--fs-xl);
    letter-spacing: 0.2rem;
}
h3 {
    font-size: var(--fs-lg);
    letter-spacing: 0.1rem;
}
h4 {
    font-size: var(--fs-base);
    letter-spacing: 0.1rem;
}
h5 {
    font-size: var(--fs-sm);
}
h6 {
    font-size: var(--fs-xs);
}

p {
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

ul {
    list-style: disc;
    margin: 0 0 1rem 1em;
    padding: 0;
}

li {
    padding: 0.25rem 0;
}

li:last-child {
    border-bottom: none;
}

ul ul {
    margin-bottom: 0;
    list-style: circle;
}

/* ========================================
   フォーム要素・ボタン
   ======================================== */
input,
textarea,
select {
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.5;
}

button {
    font-family: inherit;
    font-size: var(--fs-base);
    cursor: pointer;
    border: none;
    background: none;
    transition: all var(--transition-base);
}

/* CTAボタン共通スタイル（背景色は個別に設定） */
[class*="__btn"] {
    font-family: inherit;
    font-size: var(--fs-sm);
    display: inline-block;
    color: #ffffff;
    line-height: 1;
    padding: 0.85rem 2rem;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-base);
}

[class*="__btn"]:hover {
    opacity: 1;
    background: var(--c-gray);
    color: var(--c-white);
}
[class*="__btn"]::after {
    content: none;
}

/* ========================================
   セクション共通スタイル
   ======================================== */

.section-container,
.section-content,
[class*="__container"],
[class*="__content"] {
    width: var(--container-enkuuu-width-sp);
    max-width: 1200px;
    margin-inline: auto;
    /* padding-inline: 0.5rem; */
}
.section-title,
[class*="__title"]:not(.hero__title) {
    font-size: var(--fs-lg);
    margin: 0 auto var(--space-xl);
}

.section-title--center {
    text-align: center;
}

[class*="__title"].en {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    margin-bottom: 2.5rem;
    border-bottom: 0.5px solid var(--c-brown);
    padding-bottom: 1.2rem;
    /* width: var(--container-enkuuu-width-sp); */
    color: var(--c-brown);
}

.section-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: bold;
    margin-bottom: var(--space-md);
}

[class*="__label"].en {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

.section-description,
[class*="__description"]:not(.hero__description) {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin: 0;
}

.section-description--small {
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.section-description--with-margin {
    margin: 0 0 2rem;
}
@media (min-width: 768px) {
    .section-container,
    .section-content,
    [class*="__container"],
    [class*="__content"] {
        width: 100%;
        max-width: 1200px;
        padding-inline: 1.5rem;
    }

    .section-title,
    [class*="__title"]:not(.hero__title) {
        font-size: var(--fs-xl);
        margin: 0 auto var(--space-xl);
    }

    [class*="__title"].en {
        font-size: var(--fs-xl);
        width: 20rem;
    }
    [class*="__label"].en {
        font-size: var(--fs-lg);
    }
}
@media (min-width: 1024px) {
    .section-container,
    .section-content,
    [class*="__container"],
    [class*="__content"] {
        padding-inline: 2rem;
    }

    .section-title,
    [class*="__title"]:not(.hero__title) {
        font-size: var(--fs-2xl);
        margin: 0 auto var(--space-xl);
    }

    [class*="__title"].en {
        font-size: var(--fs-xl);
        width: 25rem;
    }

    [class*="__label"].en {
        font-size: var(--fs-lg);
    }
}

/* ========================================
   ヒーローセクション共通スタイル
   ======================================== */
.hero {
    padding: var(--space-section) 0;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

.hero__visual {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.hero__label {
    display: block;
    font-size: var(--fs-base);
    margin-bottom: 0.5rem;
}

.hero__title {
    font-size: clamp(28px, 5vw, 36px);
    margin: 0 0 1rem;
    color: #ec0b0b;
}

.hero__subtitle {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.hero__header-info {
    font-size: var(--fs-base);
    margin-bottom: 1.5rem;
}

.hero__page-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hero__page-link {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: var(--fs-base);
    transition: background var(--transition-base),
        transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.hero__page-link:hover {
    background: #f0f0f0;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero__concept {
    font-size: var(--fs-base);
    line-height: 1.8;
    text-align: center;
}

/* ========================================
   ユーティリティクラス
   ======================================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}

.narrow {
    width: 100%;
    /* width: var(--container-enkuuu-width-sp); */
    margin-inline: auto;
    /* padding-inline: 1rem; */
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw; /* container の padding を無視して端まで広げる */
    margin-right: -50vw;
    padding: 0; /* 余白ゼロ */
}

@media (min-width: 768px) {
    .container {
        width: 100%;
        max-width: 1200px;
        padding-inline: 1.5rem;
    }
    .narrow {
        width: 100%;
        max-width: 860px;
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-inline: 2rem;
    }
    .narrow {
        max-width: 940px;
        padding-inline: 2rem;
    }
    .full-width {
        width: 100%;
        max-width: 1280px; /* PC時のみ最大幅を制限 */
        margin-inline: auto; /* センタリング */
        left: auto;
        right: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

.font-bold {
    font-weight: bold;
}
.font-normal {
    font-weight: normal;
}

.text-xs {
    font-size: var(--fs-xs);
}
.text-sm {
    font-size: var(--fs-sm);
}
.text-base {
    font-size: var(--fs-base);
}
.text-lg {
    font-size: var(--fs-lg);
}
.text-xl {
    font-size: var(--fs-xl);
}

.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: var(--space-xs);
}
.mb-2 {
    margin-bottom: var(--space-sm);
}
.mb-3 {
    margin-bottom: var(--space-md);
}
.mb-4 {
    margin-bottom: var(--space-lg);
}
.mb-5 {
    margin-bottom: var(--space-xl);
}

.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: var(--space-xs);
}
.mt-2 {
    margin-top: var(--space-sm);
}
.mt-3 {
    margin-top: var(--space-md);
}
.mt-4 {
    margin-top: var(--space-lg);
}
.mt-5 {
    margin-top: var(--space-xl);
}

.p-0 {
    padding: 0;
}
.p-1 {
    padding: var(--space-xs);
}
.p-2 {
    padding: var(--space-sm);
}
.p-3 {
    padding: var(--space-md);
}
.p-4 {
    padding: var(--space-lg);
}
.p-5 {
    padding: var(--space-xl);
}

/* フレックスコンテナ */
.flex {
    display: flex !important;
}
.inline-flex {
    display: inline-flex !important;
}

/* フレックス方向 */
.flex-row {
    flex-direction: row !important;
}
.flex-row-reverse {
    flex-direction: row-reverse !important;
}
.flex-col {
    flex-direction: column !important;
}
.flex-col-reverse {
    flex-direction: column-reverse !important;
}

/* フレックスラップ */
.flex-wrap {
    flex-wrap: wrap !important;
}
.flex-nowrap {
    flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* アラインメント */
.items-start {
    align-items: flex-start !important;
}
.items-center {
    align-items: center !important;
}
.items-end {
    align-items: flex-end !important;
}
.items-baseline {
    align-items: baseline !important;
}
.items-stretch {
    align-items: stretch !important;
}

.justify-start {
    justify-content: flex-start !important;
}
.justify-center {
    justify-content: center !important;
}
.justify-end {
    justify-content: flex-end !important;
}
.justify-between {
    justify-content: space-between !important;
}
.justify-around {
    justify-content: space-around !important;
}
.justify-evenly {
    justify-content: space-evenly !important;
}

/* ギャップ（間隔） */
.gap-0 {
    gap: 0 !important;
}
.gap-1 {
    gap: var(--space-xs) !important;
}
.gap-2 {
    gap: var(--space-sm) !important;
}
.gap-3 {
    gap: var(--space-md) !important;
}
.gap-4 {
    gap: var(--space-lg) !important;
}
.gap-5 {
    gap: var(--space-xl) !important;
}

@media (min-width: 768px) {
    .flex-md {
        display: flex !important;
    }
    .flex-col-md {
        flex-direction: column !important;
    }
    .flex-row-md {
        flex-direction: row !important;
    }
    .gap-3-md {
        gap: var(--space-md) !important;
    }
}

/* ========================================
   フォント設定クラス
   ======================================== */
.heading {
    font-family: var(--font-heading);
}

.heading-vertical {
    font-family: var(--font-heading-vertical);
    writing-mode: vertical-rl;
    text-orientation: upright;
    /* margin-left: 0.5em; */
    text-align: start;
    line-height: inherit;
    letter-spacing: 0.2em;
}

.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    /* margin-left: 0.5em; */
    text-align: start;
    line-height: inherit;
    /* letter-spacing: 0.2em; */
}

.en {
    font-family: var(--font-source-serif-display);
    letter-spacing: 0.1em;
}
.sanskrit {
    font-family: var(--font-source-serif-display);
    letter-spacing: 0.1em;
}
.font-yonaga {
    font-family: var(--font-yonaga);
}

/* ========================================
   セクション背景色ユーティリティクラス
   ======================================== */
.bg-white {
    background-color: var(--c-white) !important;
}

.bg-light {
    background-color: var(--c-bg-light) !important;
}

.bg-cream {
    background-color: var(--c-cream) !important;
}

/* ========================================
   表示ユーティリティ
   ======================================== */
.br-sp {
    display: inline;
}
.sp-only {
    display: block;
}
.pc-only {
    display: none;
}

/* ========================================
   レスポンシブ
   ======================================== */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-xl);
    }

    .section-container,
    .section-content,
    [class*="__container"],
    [class*="__content"] {
        padding: 0 var(--container-padding-md);
    }

    .full-width {
        /* margin-left: calc(-1 * var(--container-padding-md));
        margin-right: calc(-1 * var(--container-padding-md));
        width: calc(100% + 2 * var(--container-padding-md)); */
    }

    .br-sp {
        display: none;
    }
    .sp-only {
        display: none;
    }
    .pc-only {
        display: block;
    }

    .md\:text-center {
        text-align: center;
    }
    .md\:text-left {
        text-align: left;
    }
    .md\:text-right {
        text-align: right;
    }
}

@media (min-width: 1024px) {
    .section-container,
    .section-content,
    [class*="__container"],
    [class*="__content"] {
        padding: 0 var(--container-padding-lg);
    }

    .full-width {
        margin-left: calc(-1 * var(--container-padding-lg));
        margin-right: calc(-1 * var(--container-padding-lg));
        width: calc(100% + 2 * var(--container-padding-lg));
    }

    .lg\:text-center {
        text-align: center;
    }
    .lg\:text-left {
        text-align: left;
    }
    .lg\:text-right {
        text-align: right;
    }
}

/* ========================================
   スクロールアニメーション
   ======================================== */

/* アニメーション用の共通設定 */
:root {
    /* アニメーションのタイミング */
    --anim-duration-fast: 1.2s;
    --anim-duration-base: 1.4s;
    --anim-duration-slow: 1.6s;

    /* アニメーションの遅延 */
    --anim-delay-none: 0s;
    --anim-delay-short: 0.2s;
    --anim-delay-base: 0.4s;
    --anim-delay-long: 0.6s;
}

/* パターン1: フェードイン（移動なし） */
.js-fade-in {
    opacity: 0;
    transition: opacity var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

.js-fade-in.is-visible {
    opacity: 1;
}

/* 背景用（早めに表示） */
.js-fade-in--bg {
    opacity: 0;
    transition: opacity var(--anim-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
}

.js-fade-in--bg.is-visible {
    opacity: 1;
}

/* コンテンツ用（少し遅く表示） */
.js-fade-in--content {
    opacity: 0;
    transition: opacity var(--anim-duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--anim-delay-base);
}

.js-fade-in--content.is-visible {
    opacity: 1;
}

/* ファーストビュー用（即座に表示） */
.js-fade-in--immediate {
    opacity: 1;
}

/* パターン2: 下からフェードイン（少しゆったりめの動き） */
.js-slide-up {
    opacity: 0;
    transform: translateY(8px);
    /* 少し長めの時間と遅延を使って、ゆったりと浮かび上がる印象にする */
    transition: opacity var(--anim-duration-slow) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--anim-duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--anim-delay-short);
}

.js-slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* パターン3: スケールアップ（後で実装予定） */
.js-scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

.js-scale-up.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* パターン4&5: タイトルアニメーション（ボーダーが左から右に伸びる → テキスト表示）*/
/* 共通: タイトルラッパー */
.news .title-wrapper,
.concept .title-wrapper,
.service-section .title-wrapper {
    position: relative;
    display: block;
}

/* 共通: ボーダー要素（先に実行） */
.news .title-border,
.concept .title-border,
.service-section .title-border {
    width: 0;
    height: 0.5px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ボーダー色の差異 */
.service-section .title-border {
    background-color: var(--c-brown);
}

.news .title-border,
.concept .title-border {
    background-color: #ffffff;
}

/* newsセクションのタイトルボーダーだけ中央寄せにする */
.news .title-border {
    left: 50%;
    transform: translateX(-50%);
}

/* 共通: ボーダーの幅 */
.news .title-border.is-visible,
.concept .title-border.is-visible,
.service-section .title-border.is-visible {
    width: var(--container-enkuuu-width-sp);
}

/* 共通: タイトルテキスト（ボーダー途中から下から浮かび上がる） */
.news [class*="__title"].en.js-title-text,
.concept [class*="__title"].en.js-title-text,
.service-section [class*="__title"].en.js-title-text {
    opacity: 0;
    transform: translateY(8px);
    border-bottom: none;
}

/* タイトルテキストの遅延タイミングの差異 */
.news [class*="__title"].en.js-title-text,
.concept [class*="__title"].en.js-title-text {
    transition: opacity var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1)
            var(--anim-delay-base),
        transform var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1)
            var(--anim-delay-base);
}

.service-section [class*="__title"].en.js-title-text {
    transition: opacity var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1)
            var(--anim-delay-long),
        transform var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1)
            var(--anim-delay-long);
}

/* 共通: タイトルテキスト表示状態 */
.news [class*="__title"].en.js-title-text.is-visible,
.concept [class*="__title"].en.js-title-text.is-visible,
.service-section [class*="__title"].en.js-title-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 共通: レスポンシブ対応 */
@media (min-width: 768px) {
    .news .title-border.is-visible,
    .concept .title-border.is-visible,
    .service-section .title-border.is-visible {
        width: 20rem;
    }
}

@media (min-width: 1024px) {
    .news .title-border.is-visible,
    .concept .title-border.is-visible,
    .service-section .title-border.is-visible {
        width: 25rem;
    }
}

/* パターン6: 3方向から集まる画像アニメーション */
/* 左から8pxスライドしながらフェードイン */
.js-slide-from-left {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

.js-slide-from-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 斜め右上から8pxスライドしながらフェードイン */
.js-slide-from-top-right {
    opacity: 0;
    transform: translate(8px, -8px);
    transition: opacity var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

.js-slide-from-top-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* 斜め右下から8pxスライドしながらフェードイン */
.js-slide-from-bottom-right {
    opacity: 0;
    transform: translate(8px, 8px);
    transition: opacity var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--anim-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
}

.js-slide-from-bottom-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}