/* ========================================
   有限会社第一印刷 - common.css
   プロジェクト: daiichi-printing
   テーマ: カラフル・ポップ（印刷会社らしい賑やかさ）
======================================== */

/* ========================================
   :root カスタムプロパティ
======================================== */
:root {
    /* ──────────────────────────────
       カラー（白×緑メイン／黄を差し色）
    ────────────────────────────── */
    --color-primary:        #1FA66E;  /* メイン：鮮やかなグリーン */
    --color-primary-dark:   #188556;  /* メイン（暗め・ホバー） */
    --color-primary-light:  #3DC489;  /* メイン（明るめ） */

    --color-cyan:           #16B697;  /* アクセント：ややシアン寄りの青緑 */
    --color-yellow:         #FFC93C;  /* 差し色：イエロー */
    --color-green:          #5BC98A;  /* アクセント：ライトグリーン */

    --color-accent:         #FFC93C;  /* 差し色（黄） */
    --color-accent-dark:    #F5B722;  /* 差し色（ホバー） */

    /* ベース */
    --color-bg:             #FFFFFF;  /* ページ背景（白） */
    --color-bg-light:       #F1FAF4;  /* セクション背景（薄緑） */
    --color-bg-cyan:        #E7F6F2;  /* セクション背景（薄ティール） */

    /* テキスト・ボーダー */
    --color-text:           #3A3A3A;  /* 本文 */
    --color-title:          #1B2B23;  /* 見出し（緑みのある濃色） */
    --color-text-light:     #6B7770;  /* 補足 */
    --color-border:         #DCEBE2;  /* ボーダー（薄緑グレー） */
    --color-white:          #FFFFFF;

    /* ──────────────────────────────
       フォント
    ────────────────────────────── */
    --font-family:   'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;  /* 本文 */
    --font-heading:  'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;  /* 見出し */
    --font-en:       'Plus Jakarta Sans', sans-serif;                /* 英字装飾 */

    --body-font-size-sp:     1rem;
    --body-font-size-pc:     clamp(1rem, 2vw, 1.1rem);
    --body-line-height-sp:   1.8;
    --body-line-height-pc:   1.9;
    --body-letter-spacing:   0.04em;

    /* ──────────────────────────────
       角丸（ポップなので大きめ）
    ────────────────────────────── */
    --radius-xs:  0.375rem;
    --radius-sm:  0.625rem;
    --radius-md:  1rem;
    --radius-lg:  1.5rem;
    --radius-xl:  2rem;
    --radius-pill: 999px;

    /* ──────────────────────────────
       落ち影
    ────────────────────────────── */
    --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.05);
    --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.12);
    --shadow-pop: 0 8px 0 rgba(0, 0, 0, 0.08);  /* ポップな立体影 */

    /* ──────────────────────────────
       スペーシング
    ────────────────────────────── */
    --spacing-xxs:  0.5rem;
    --spacing-xs:   0.75rem;
    --spacing-sm:   1.5rem;
    --spacing-md:   2rem;
    --spacing-lg:   3rem;
    --spacing-xl:   4rem;
    --spacing-xxl:  5.5rem;
    --spacing-3xl:  8rem;

    --spacing-section: 5.5rem;
    --section-pad-x:   1.5rem;

    /* ──────────────────────────────
       ヘッダー高さ
    ────────────────────────────── */
    --header-h: 64px;

    /* セクション幅 */
    --section-width-md:   860px;
    --section-width-lg:   1080px;
    --section-width-xl:   1240px;
}

/* ========================================
   リセット
======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    scroll-padding-top: var(--header-h);
}

html:not(.js-ready) {
    scroll-behavior: auto;
}

/* ========================================
   375px未満：コンテンツを375px幅でレイアウトして縮小表示
   htmlにtransformがかかるため、position:fixed要素の
   包含ブロックがhtmlに変わる。全画面系の固定要素は
   スケール逆数で高さを割り戻して実画面を埋める。
======================================== */
@media (max-width: 374px) {
    html {
        width: 375px;
        transform-origin: top left;
        transform: scale(calc(100vw / 375));
    }

    /* 全幅・全画面の固定要素は375px幅基準にする */
    .drawer-overlay,
    .page-loader {
        width: 375px;
    }

    /* 全画面を覆う要素はスケール逆数で高さを割り戻す */
    .drawer-overlay,
    .page-loader {
        height: calc(100dvh / (100vw / 375));
    }
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--body-font-size-sp);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--body-line-height-sp);
    letter-spacing: var(--body-letter-spacing);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
    body {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
    }
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, p {
    margin: 0;
}

button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    width: 100%;
}

input, textarea, select {
    font-family: inherit;
    font-size: 1rem;
}

.sp-only { display: inline; }
@media (min-width: 768px) {
    .sp-only { display: none; }
}

/* ========================================
   共通：セクション余白・コンテナ
======================================== */
section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
}

@media (min-width: 576px) {
    :root { --section-pad-x: 2rem; }
}
@media (min-width: 1024px) {
    :root { --section-pad-x: 3rem; }
}

/* ========================================
   共通：見出し
======================================== */
.sec-heading {
    margin-bottom: var(--spacing-lg);
}

.sec-heading__en {
    font-family: var(--font-en);
    font-style: italic;
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}
/* 英語タイトル左の正円装飾（スクロールインで水滴→正円に着地）
   文字の上下中央（水平ライン）に合わせるため position:relative の top で微調整。
   inkDrop の translateY とは独立して効くためアニメと競合しない。 */
.sec-heading__en::before {
    content: '';
    display: inline-block;
    width: 0.25em;
    height: 0.25em;
    margin-right: 0.4em;
    border-radius: 50%;
    background-color: var(--color-primary);
    vertical-align: middle;
    position: relative;
    top: -0.12em;
    transform-origin: center bottom;
}
/* 見出し円：画面中央までスクロールしたら水滴が落ちて着地→正円
   （animation.js が sec-heading__en の上端が画面中央に来たら is-dropped を付与） */
.sec-heading__en.is-dropped::before {
    animation: inkDrop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes inkDrop {
    0% {
        opacity: 0;
        transform: translateY(-0.9em) scaleY(1.6) scaleX(0.7);
        border-radius: 50% 50% 50% 50% / 65% 65% 40% 40%;
    }
    55% {
        opacity: 1;
        transform: translateY(0) scaleY(1.5) scaleX(0.78);
        border-radius: 50% 50% 50% 50% / 70% 70% 38% 38%;
    }
    72% {
        transform: translateY(0) scaleY(0.78) scaleX(1.22);
        border-radius: 50%;
    }
    86% {
        transform: translateY(0) scaleY(1.08) scaleX(0.94);
        border-radius: 50%;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        border-radius: 50%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sec-heading__en.is-dropped::before {
        animation: none;
    }
}

.sec-heading__ja {
    font-size: clamp(1.25rem, 4vw, 1.625rem);
    font-weight: 700;
    color: var(--color-title);
    margin-top: 0.25rem;
}

.sec-heading--center {
    text-align: center;
}

.sec-heading--white .sec-heading__ja {
    color: var(--color-white);
}
.sec-heading--white .sec-heading__en {
    color: var(--color-yellow);
}
.sec-heading--white .sec-heading__en::before {
    background-color: var(--color-yellow);
}

/* ========================================
   共通：ボタン
======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.btn i {
    transition: transform 0.2s ease;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn--primary:hover {
    filter: brightness(0.95);
    transform: translateY(-3px);
}
.btn--primary:hover i {
    transform: translateX(4px);
}

.btn--outline {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-3px);
}

/* 共通：keyword装飾 */
.keyword-marker {
    background: linear-gradient(transparent 60%, var(--color-yellow) 60%);
    font-weight: 700;
    padding: 0 0.1em;
}
/* メインセクション（緑背景・白文字）内では、マーカーではなく文字色を黄色に */
.sec-service-main .keyword-marker,
.sec-message .keyword-marker {
    background: none;
    color: var(--color-yellow);
    padding: 0;
}

/* ========================================
   サイトロゴ（FV・page-heroの左上に取り残される）
   親（.fv / .page-hero）の position:relative に対して絶対配置。
   スクロールすると親と一緒に上へ流れて消える。
======================================== */
.site-logo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: block;
    padding: 0.625rem 0.5rem;
    transition: opacity 0.2s ease;
}
.site-logo:hover {
    opacity: 0.85;
}
.site-logo__img {
    height: 24px;
    width: auto;
    display: block;
}
@media (min-width: 768px) {
    .site-logo {
        padding: 0.75rem 0.75rem;
    }
    .site-logo__img {
        height: 28px;
    }
}
@media (min-width: 1024px) {
    .site-logo {
        padding: 0.75rem 1rem;
    }
    .site-logo__img {
        height: 36px;
    }
}

/* ========================================
   デスクトップナビ（右上・縦書き付箋・1024px以上）
   FV下のCMYKバーと対に、右上から4色の短い付箋が垂れ下がる。
======================================== */
.header-nav {
    display: none;
}

@media (min-width: 1024px) {
    .header-nav {
        position: fixed;
        top: 0;
        right: 2rem;
        z-index: 1000;
        display: flex;
        align-items: flex-start;
        gap: 6px;
    }
    .header-nav__tab {
        position: relative;
        width: 52px;
        height: 108px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.2s ease, filter 0.2s ease;
    }
    /* アクティブ・ホバー：左上に小さな角折り三角。色は各タブ色に黒25%を混ぜた濃色。
       非アクティブ時も::afterを生成して透明にし、opacityを0.2sで付け外し */
    .header-nav__tab::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 14px;
        height: 14px;
        clip-path: polygon(0 0, 100% 0, 0 100%);
        background-color: color-mix(in srgb, var(--color-primary) 80%, #000);
        transform: scale(0);
        transform-origin: top left;
        transition: transform 0.2s ease;
        pointer-events: none;
    }
    .header-nav__tab.is-active::after,
    .header-nav__tab:hover::after {
        transform: scale(1);
    }
    /* 各タブ色に黒20%を混ぜた三角色（自分の色を少し暗く） */
    .header-nav__tab--1::after { background-color: color-mix(in srgb, var(--color-primary) 80%, #000); }
    .header-nav__tab--2::after { background-color: color-mix(in srgb, var(--color-cyan) 80%, #000); }
    .header-nav__tab--3::after { background-color: color-mix(in srgb, var(--color-primary) 80%, #000); }
    .header-nav__tab--4::after { background-color: color-mix(in srgb, var(--color-yellow) 80%, #000); }
    .header-nav__tab .header-nav__ja {
        writing-mode: vertical-rl;
        font-weight: 700;
        font-size: 0.875rem;
        letter-spacing: 0.12em;
        line-height: 1;
    }
    /* 4色（グリーン・ティール・白・イエロー） */
    .header-nav__tab--1 { background-color: var(--color-primary); }
    .header-nav__tab--1 .header-nav__ja { color: var(--color-white); }
    .header-nav__tab--2 { background-color: var(--color-cyan); }
    .header-nav__tab--2 .header-nav__ja { color: var(--color-white); }
    .header-nav__tab--3 { background-color: var(--color-white); }
    .header-nav__tab--3 .header-nav__ja { color: var(--color-primary); }
    .header-nav__tab--4 { background-color: var(--color-yellow); }
    .header-nav__tab--4 .header-nav__ja { color: var(--color-white); }
    /* ホバー：少し暗くする（filter 0.2s ease） */
    .header-nav__tab:hover {
        filter: brightness(0.95);
    }
}

/* ========================================
   付箋ボタン群（右上・上から垂れる・1023px以下）
   電話（緑）／お問い合わせ（黄）／メニュー（白）
======================================== */
.header-btn-group {
    position: fixed;
    top: 0;
    right: 0.75rem;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
@media (min-width: 1024px) {
    .header-btn-group { display: none; }
}

/* 共通：上から垂れるアイコン付箋 */
.header-btn-tab {
    width: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    font-size: 1.05rem;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.header-btn-tab--tel {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.header-btn-tab--contact {
    background-color: var(--color-yellow);
    color: var(--color-title);
}
.header-btn-tab--contact i {
    color: var(--color-white);
}
.header-btn-tab--menu {
    background-color: var(--color-white);
    flex-direction: column;
    gap: 0;
}
/* ホバー：背景色だけ少し暗く（アイコン記号はそのまま） */
.header-btn-tab--tel:hover     { background-color: color-mix(in srgb, var(--color-primary) 95%, black); }
.header-btn-tab--contact:hover { background-color: color-mix(in srgb, var(--color-yellow) 95%, black); }
.header-btn-tab--menu:hover    { background-color: color-mix(in srgb, var(--color-white) 95%, black); }

.hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.hamburger__lines {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hamburger__line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-title);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

body.menu-open .hamburger__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
body.menu-open .hamburger__line:nth-child(2) {
    opacity: 0;
}
body.menu-open .hamburger__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* メニュー展開中はボタン群（ハンバーガー）をドロワー（z-index:1050）より前面へ。
   ハンバーガー（バツに変形）をメニューの上に出す */
body.menu-open .header-btn-group {
    z-index: 1060;
}
/* メニュー展開中は3つの付箋の影をじわっと消す */
body.menu-open .header-btn-tab {
    box-shadow: none;
}
/* メニュー展開中（×ボタン）はホバーしても背景色を変えない */
body.menu-open .header-btn-tab--menu:hover {
    background-color: var(--color-white);
}

/* ========================================
   ドロワー
======================================== */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100dvh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 1050;
    overflow-y: auto;
}
body.menu-open .drawer {
    transform: translateX(0);
}

.drawer__inner {
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.drawer__nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
/* 各項目の左に水滴アイコン（フッター見出しと同モチーフ）を配置。
   常時は薄く、active時に本来の緑をはっきり表示。 */
.drawer__nav-item::before {
    content: '';
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    background: url('../images/deco-waterdrop.png') no-repeat center / contain;
    opacity: 0.35;
    transition: opacity 0.2s ease;
}
.drawer__nav-item.is-active::before {
    opacity: 1;
}
.drawer__nav-ja {
    font-weight: 700;
    font-size: 1.05rem;
    transition: color 0.2s ease;
}
.drawer__nav-item:hover .drawer__nav-ja {
    color: var(--color-primary);
}
.drawer__nav-en {
    font-family: var(--font-en);
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.drawer__footer {
    margin-top: auto;
    padding-top: 2rem;
}
.drawer__footer-logo-link {
    display: inline-block;
    position: relative;
    margin-bottom: 0.75rem;
}
.drawer__footer-logo {
    display: block;
    height: 28px;
    width: auto;
}
/* base(黒)の上にhover(緑)を重ね、ホバーでクロスフェード */
.drawer__footer-logo--hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.drawer__footer-logo--base {
    transition: opacity 0.2s ease;
}
.drawer__footer-logo-link:hover .drawer__footer-logo--hover {
    opacity: 1;
}
.drawer__footer-logo-link:hover .drawer__footer-logo--base {
    opacity: 0;
}
.drawer__footer-address {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
}
.drawer__footer-tel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-primary);
}
.drawer__footer-en-logo {
    display: block;
    width: auto;
    height: 32px;
    margin-top: 1.25rem;
    margin-left: auto;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 1040;
}
body.menu-open .drawer-overlay {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   CTAセクション（includes/contact.php）
======================================== */
.sec-cta {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 92.5%, white),
        var(--color-primary),
        color-mix(in srgb, var(--color-primary) 92.5%, black));
    text-align: center;
}
/* 上下パディング：576px未満は4.5rem、576px以上は5.5rem（=88px）。 */
.sec-cta {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
@media (min-width: 576px) {
    .sec-cta {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}
@media (min-width: 1200px) {
    .sec-cta {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
.sec-cta__inner {
    max-width: 576px;
    margin: 0 auto;
}
.sec-cta .sec-heading {
    margin-bottom: 2rem;
}
@media (min-width: 1024px) {
    .sec-cta .sec-heading {
        margin-bottom: 2.5rem;
    }
}
@media (min-width: 768px) {
    .sec-cta__inner {
        max-width: 768px;
    }
}
.sec-cta__text {
    color: var(--color-white);
    margin-bottom: 2.5rem;
    font-weight: 500;
    text-align: left;
}
@media (min-width: 475px) {
    .sec-cta__text {
        text-align: center;
    }
}
@media (min-width: 1024px) {
    .sec-cta__text {
        margin-bottom: 3rem;
    }
}
.sec-cta__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 auto;
}
@media (min-width: 1024px) {
    .sec-cta__cards {
        grid-template-columns: repeat(3, 1fr);
    }
}
.cta-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: var(--color-white);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: transform 0.2s ease;
}
.cta-card:hover {
    transform: translateY(-4px);
}
.cta-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-white);
    transition: background-color 0.2s ease;
}
.cta-card--tel .cta-card__icon  { background-color: var(--color-primary); }
.cta-card--mail .cta-card__icon { background-color: var(--color-accent); }
.cta-card--fax .cta-card__icon  { background-color: var(--color-cyan); }
/* ホバー：背景の円だけ少し暗く（アイコン記号は白のまま） */
.cta-card--tel:hover .cta-card__icon  { background-color: color-mix(in srgb, var(--color-primary) 95%, black); }
.cta-card--mail:hover .cta-card__icon { background-color: color-mix(in srgb, var(--color-accent) 95%, black); }
.cta-card--fax:hover .cta-card__icon  { background-color: color-mix(in srgb, var(--color-cyan) 95%, black); }
.cta-card__label {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-weight: 700;
}
.cta-card__value {
    font-weight: 900;
    font-size: 1.0625rem;
    color: var(--color-title);
}
.cta-card--mail .cta-card__value {
    font-weight: 700;
}
/* メールフォームの改行：1024px未満は改行なし、1024px以上で改行 */
.cta-card__br {
    display: none;
}
@media (min-width: 1024px) {
    .cta-card__br {
        display: inline;
    }
}
.cta-card__note {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* ========================================
   フッター
======================================== */
/* ※ iPad/iOS Safari は repeat 背景だと background-blend-mode を無視するため、
   柄画像を ::before に分離し mix-blend-mode（要素間合成）で下地色に重ねる。 */
.footer {
    position: relative;
    background-color: #5A625E;
    color: #F2F5F4;
    padding-top: var(--spacing-xl);
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/repeat-bg-02.webp');
    background-repeat: repeat;
    background-size: 600px auto;
    mix-blend-mode: multiply;
}
/* フッター内のコンテンツは ::before の上に */
.footer > * {
    position: relative;
    z-index: 1;
}
/* wrapper：左右padding担当（max-widthの外側にpaddingを効かせる）。 */
.footer__wrapper {
    padding: 0 var(--section-pad-x);
}
/* container：max-width＋中央寄せ担当。下線＋下余白で copy と区切る。 */
.footer__container {
    max-width: 576px;
    margin: 0 auto;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
@media (min-width: 768px) {
    .footer__container { max-width: 768px; }
}
@media (min-width: 1024px) {
    .footer__container { max-width: 1200px; }
}
/* ロゴ部（上に独立） */
.footer__head {
    margin-bottom: 2.5rem;
}
.footer__logo {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.footer__logo-img { height: 2.25rem; width: auto; }
@media (min-width: 768px) {
    .footer__logo-img { height: 2.5rem; }
}
/* base(白)の上にhover(緑)を重ね、ホバーで0.2s easeでクロスフェード */
.footer__logo-img--hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.footer__logo-img--base {
    transition: opacity 0.2s ease;
}
.footer__logo:hover .footer__logo-img--hover {
    opacity: 1;
}
.footer__logo:hover .footer__logo-img--base {
    opacity: 0;
}

/* 下段：モバイルは縦積み。768px以上で左列（ナビ→会社情報を縦積み）：右列（マップ）= 1:1 */
.footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        align-items: start;
        align-content: start;
        column-gap: 2.5rem;
        row-gap: 0;
    }
    /* 左列：ナビ（1行目）・会社情報（2行目）を縦に積む。
       会社情報はナビの下に適度な余白をあけて配置。 */
    .footer__col--nav  { grid-column: 1; grid-row: 1; }
    .footer__col--info { grid-column: 1; grid-row: 2; margin-top: 2.5rem; }
    /* 右列：マップを左列（ナビ＋会社情報）の高さいっぱいに合わせる。
       マップの内容高さで行が膨らまないよう min-height:0 を付け、
       セルを stretch で行高に伸ばしてその中でマップを 100% にする。 */
    .footer__col--map  {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        min-height: 0;
        overflow: hidden;
    }
}
.footer__logo-text {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--color-white);
}
.footer__title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-primary);
    letter-spacing: 0.04em;
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
/* タイトル左の水滴装飾 */
.footer__title::before {
    content: '';
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    background: url('../images/deco-waterdrop.png') no-repeat center / contain;
}
.footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}
.footer__nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
}
/* テキスト左の丸装飾：常時白、アクティブ時 primary */
.footer__nav a::before {
    content: '';
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-white);
    transition: background-color 0.2s ease;
}
.footer__nav a.is-active::before {
    background-color: var(--color-primary);
}
@media (min-width: 768px) {
    .footer__nav a {
        font-size: 0.95rem;
    }
}
.footer__nav a:hover {
    color: var(--color-primary);
}
.footer__nav a.is-active {
    color: var(--color-white);
}
.footer__info {
    font-size: 0.8125rem;
    line-height: 1.9;
    color: #EAEEED;
}
@media (min-width: 768px) {
    .footer__info {
        font-size: 0.95rem;
    }
}
.footer__info a {
    color: var(--color-white);
}
.footer__map {
    width: 100%;
    height: 220px;
    overflow: hidden;
}
@media (min-width: 768px) {
    .footer__map { height: 100%; }
}
.footer__en-logo {
    display: block;
    width: auto;
    height: 2.25rem;
    margin-top: 2rem;
    margin-left: auto;
    opacity: 0.8;
}
@media (min-width: 768px) {
    .footer__en-logo {
        height: 2.5rem;
    }
}
.footer__copy {
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #EAEEED;
}

/* ========================================
   パンくずリスト（page-hero下端に配置）
======================================== */
.breadcrumb {
    position: absolute;
    left: 0;
    bottom: 0.5rem;
    width: 100%;
    z-index: 2;
    padding: 0.25rem 0;
}
.breadcrumb__outer {
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
}
@media (min-width: 1024px) {
    .breadcrumb__outer {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}
@media (min-width: 1200px) {
    .breadcrumb__outer {
        padding-left: 5.5rem;
        padding-right: 5.5rem;
    }
}
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.breadcrumb__item {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}
.breadcrumb__item:not(:last-child)::after {
    content: '›';
    margin: 0 0.5rem;
    color: var(--color-primary-light);
}
.breadcrumb__home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-right: 0.3rem;
    transition: background-color 0.2s ease;
}
.breadcrumb__home-icon i {
    display: block;
    transform: translateX(0.5px);
}
.breadcrumb__link {
    color: var(--color-title);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
}
.breadcrumb__link--home {
    display: inline-flex;
    align-items: center;
}
.breadcrumb__link:hover {
    color: var(--color-primary);
}
.breadcrumb__link:hover .breadcrumb__home-icon {
    background-color: var(--color-primary-dark);
}
.breadcrumb__current {
    color: var(--color-text-light);
}

/* ========================================
   ページヒーロー（下層共通）
   パディングなし。内側に80%幅の中央要素を置き、
   その四隅にL字装飾（疑似要素）を付ける。
======================================== */
.page-hero {
    --hero-trim-size: 24px;        /* 四隅L字装飾の辺の長さ */
    --hero-trim-offset: 1rem;      /* 80%幅要素の角からのL字のもぐり出し量 */
    --hero-ratio: 3 / 2;           /* ヒーローのアスペクト比（モバイル：やや縦長） */
    aspect-ratio: var(--hero-ratio);
    min-height: 200px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-bg-light);
    position: relative;
    overflow: hidden;
}
@media (min-width: 576px) {
    .page-hero { --hero-ratio: 2 / 1; }
}
@media (min-width: 768px) {
    .page-hero { --hero-ratio: 5 / 2; }
}
@media (min-width: 1024px) {
    .page-hero { --hero-ratio: 7 / 2; }
}
@media (min-width: 1440px) {
    .page-hero { --hero-ratio: 4 / 1; }
}
@media (min-width: 1600px) {
    .page-hero { --hero-ratio: 9 / 2; }
}
@media (min-width: 768px) {
    .page-hero {
        --hero-trim-size: 30px;
        --hero-trim-offset: 1.25rem;
    }
}
.page-hero--service  { background: var(--color-bg-cyan); }
.page-hero--company  { background: var(--color-bg-light); }
.page-hero--contact  { background: #F0FAF4; }

/* 75%幅の中央要素。上下paddingは持たず、ヒーローの高さは .page-hero 側で確保。
   これを基準に四隅L字を配置。 */
.page-hero__inner {
    position: relative;
    z-index: 1;
    width: 75%;
    max-width: 640px;
    margin: 0 auto;
}
/* 四隅トンボ（コーナーマーク）：__inner の四隅にオフセットして配置。
   --------------------------------------------------------------------
   現在は【シンプル版】＝1本のL字（border で描画）。
   後で本式の二重線トンボに差し替えたいときは、HTMLの各 .page-hero__trim を
   下記SVG（トップFVと同形）に置き換え、CSSは【SVG版】ブロックを有効化する。
   位置・サイズ（--hero-trim-size / --hero-trim-offset）の指定は共通なので、
   描画方法（border か SVG か）だけ切り替えればよい。
   -------------------------------------------------------------------- */
.page-hero__trim {
    position: absolute;
    width: var(--hero-trim-size);
    height: var(--hero-trim-size);
    color: var(--color-primary);
    pointer-events: none;
    z-index: 1;
}

/* 【シンプル版】1本のL字（border 描画・現在有効） */
.page-hero__trim--tl {
    top: calc(-1 * var(--hero-trim-offset));
    left: calc(-1 * var(--hero-trim-offset));
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
}
.page-hero__trim--tr {
    top: calc(-1 * var(--hero-trim-offset));
    right: calc(-1 * var(--hero-trim-offset));
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}
.page-hero__trim--bl {
    bottom: calc(-1 * var(--hero-trim-offset));
    left: calc(-1 * var(--hero-trim-offset));
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
}
.page-hero__trim--br {
    bottom: calc(-1 * var(--hero-trim-offset));
    right: calc(-1 * var(--hero-trim-offset));
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}

/* 【SVG版】本式の二重線トンボ（トップFVと同形・現在は無効）
   有効化するには、上の border 4本指定を消し、HTMLの各トンボを
   <svg class="page-hero__trim page-hero__trim--tl" viewBox="0 0 120 120" aria-hidden="true">
     <path d="M20 0 V80 H100 M40 20 V100 H120" fill="none" stroke="currentColor" stroke-width="2"/>
   </svg>
   に置き換えたうえで、下記のコメントを外す。
.page-hero__trim--tl { top: calc(-1 * var(--hero-trim-offset)); left: calc(-1 * var(--hero-trim-offset)); transform: rotate(270deg); }
.page-hero__trim--tr { top: calc(-1 * var(--hero-trim-offset)); right: calc(-1 * var(--hero-trim-offset)); transform: rotate(0deg); }
.page-hero__trim--bl { bottom: calc(-1 * var(--hero-trim-offset)); left: calc(-1 * var(--hero-trim-offset)); transform: rotate(180deg); }
.page-hero__trim--br { bottom: calc(-1 * var(--hero-trim-offset)); right: calc(-1 * var(--hero-trim-offset)); transform: rotate(90deg); }
*/
.page-hero__en {
    font-family: var(--font-en);
    font-style: italic;
    font-size: clamp(2.5rem, 9vw, 4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}
.page-hero__ja {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    font-weight: 700;
    color: var(--color-title);
    margin-top: 0;
}

/* ========================================
   WIPプレースホルダー
======================================== */
.sec-wip {
    text-align: center;
    padding: var(--spacing-3xl) var(--section-pad-x);
}
.sec-wip__icon {
    font-size: 3rem;
    color: var(--color-primary-light);
    margin-bottom: 1rem;
}
.sec-wip__text {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-title);
}
.sec-wip__sub {
    color: var(--color-text-light);
    margin-top: 0.5rem;
}

/* ========================================
   リビールアニメーション（animation.js連動）
   ※フェードインは停止。is-revealed は付与されるため、
   見出し円の水滴アニメ等のトリガーとしては生きる。
======================================== */
.js-reveal {
    opacity: 1;
    transform: none;
}
.js-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* ========================================
   刷り上がりワイプ（画像が下からインクで載る・animation.js連動）
   画像ラッパーに js-print-wipe を付与して使う
======================================== */
.js-print-wipe {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    transition: -webkit-clip-path 0.9s cubic-bezier(0.5, 0, 0.2, 1),
                clip-path 0.9s cubic-bezier(0.5, 0, 0.2, 1);
    will-change: clip-path;
}
.js-print-wipe.is-wiped {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

/* ========================================
   トンボ（トリムマーク）装飾
   余白の多いセクションに .has-trim を付与し、
   四隅に緑のトンボを薄く表示する
======================================== */
.has-trim {
    position: relative;
}
.has-trim::before,
.has-trim::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.55;
}
/* 左上・右上 */
.has-trim::before {
    top: 14px;
    left: 14px;
    border-left: 1.5px solid var(--color-primary);
    border-top: 1.5px solid var(--color-primary);
}
.has-trim::after {
    top: 14px;
    right: 14px;
    border-right: 1.5px solid var(--color-primary);
    border-top: 1.5px solid var(--color-primary);
}
/* 左下・右下（内部の ···__trim 要素で描画） */
.has-trim__bl,
.has-trim__br {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.55;
}
.has-trim__bl {
    bottom: 14px;
    left: 14px;
    border-left: 1.5px solid var(--color-primary);
    border-bottom: 1.5px solid var(--color-primary);
}
.has-trim__br {
    bottom: 14px;
    right: 14px;
    border-right: 1.5px solid var(--color-primary);
    border-bottom: 1.5px solid var(--color-primary);
}
@media (min-width: 768px) {
    .has-trim::before,
    .has-trim::after,
    .has-trim__bl,
    .has-trim__br {
        width: 28px;
        height: 28px;
    }
}

/* ========================================
   ページ遷移ローダー（紙めくれ）
   animation.js が #pageLoader を動的生成し、
   __sheet の clip-path を左上→右下へ動かしてめくる
======================================== */
/* ローダー表示中はスクロールをロック */
body.is-page-transitioning {
    overflow: hidden;
}

/* 遷移直後：ページ本体を隠し、ローダー（紙）だけ見せる。
   ローダーはHTMLに静的記述済みなので、is-loadingが付いた瞬間
   （CSS適用時）にすでに紙が全面を覆う→チラつきが出ない。
   紙がめくれるとその下の実ページがそのまま現れる。 */
html.is-loading {
    background: var(--color-white, #fff);
}
html.is-loading body > *:not(.page-loader) {
    visibility: hidden;
}

/* ローダー：通常は非表示。is-show が付いた時だけ表示する。
   遷移後は header.php のインラインscript で is-show を即付与し、
   CSS適用時にすでに紙が全面を覆う（チラつき防止）。 */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 1500;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    display: none;
}
.page-loader.is-show {
    display: block;
}

/* 紙本体（clip-path で左上から剥がれる）
   ※ iPad/iOS Safari は repeat 背景だと background-blend-mode を無視するため、
     柄を .page-loader__pattern に分離し mix-blend-mode で白地に重ねる。 */
.page-loader__sheet {
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 初期状態：全面表示（JSが clip-path を書き換える） */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    will-change: clip-path;
    overflow: hidden;
}
/* 柄レイヤー（白地に乗算。::after の白50%はこの上に乗り柄を淡くする） */
.page-loader__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/repeat-bg-02.webp');
    background-repeat: repeat;
    background-size: 600px auto;
    mix-blend-mode: multiply;
}

/* 上辺の薄いアクセント（印刷紙の帯のような） */
.page-loader__sheet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-cyan), var(--color-accent));
    opacity: 0.9;
    z-index: 2;
}
/* 柄を白っぽくする半透明白オーバーレイ */
.page-loader__sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* ロゴ（社名テキスト） */
.page-loader__logo {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}
.page-loader__logo-main {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.25rem, 5vw, 1.875rem);
    letter-spacing: 0.08em;
    color: var(--color-title);
}
.page-loader__logo-sub {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(0.625rem, 2.5vw, 0.8125rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.page-loader__logo-img {
    width: clamp(160px, 50vw, 280px);
    height: auto;
}

/* 完了：オーバーレイをフェードアウト */
.page-loader.is-done {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ========================================
   スプラッシュスクリーン（トップ初回のみ・sessionStorage管理）
   index.js が #splash の __sheet を紙めくれと同じ対角クリップで
   めくり、その下のトップページを見せる。
======================================== */
/* スプラッシュ表示中はスクロールをロック */
body.splash-active {
    overflow: hidden;
}

.splash {
    position: fixed;
    inset: 0;
    z-index: 1600;
    overflow: hidden;
    pointer-events: none;
}
/* スプラッシュ非表示時（2回目以降）は完全に消す */
.splash.is-removed {
    display: none;
}

/* 紙本体（clip-path で左上から剥がれる・ローダーと同構造）
   ※ iPad/iOS Safari は repeat 背景だと background-blend-mode を無視するため、
     柄を ::before に分離し mix-blend-mode で下地の緑に重ねる。 */
.splash__sheet {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    will-change: clip-path;
    overflow: hidden;
}
.splash__sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/repeat-bg-02.webp');
    background-repeat: repeat;
    background-size: 600px auto;
    mix-blend-mode: multiply;
}
/* ロゴは柄の上に */
.splash__logo {
    position: relative;
    z-index: 1;
}

/* ロゴ枠（スプラッシュロゴ） */
.splash__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}
.splash__logo-print {
    position: relative;
    width: clamp(160px, 50vw, 280px);
    height: auto;
    line-height: 0;
}
.splash__logo-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    /* 版が合致した後、下から刷り上がりで本体が出る。
       初期は隠した状態で待機し、is-playing 付与でアニメ開始（画像ロード待ち対応）。 */
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
}
.splash.is-playing .splash__logo-img {
    animation: splashLogoPrint 0.6s cubic-bezier(0.5, 0, 0.2, 1) 0.75s forwards;
}
@keyframes splashLogoPrint {
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}
/* 色版（3版）：ロゴ形に mask したサイトパレットの単色を重ね、
   ずれた位置から本体位置へ収束させる（版ずれ→合致）。色はそのまま見せたいので通常合成。 */
.splash__logo-plate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    pointer-events: none;
    -webkit-mask-image: url('../images/splash-logo02.png');
    mask-image: url('../images/splash-logo02.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* 初期は opacity:0 で待機（is-playing 付与で各版のアニメ開始）。
   各 keyframes の 0% も opacity:0 なので待機状態と地続き。 */
.splash__logo-plate--c {
    background-color: #16B697; /* シアン寄り */
    z-index: 2;
    opacity: 0;
}
.splash__logo-plate--m {
    background-color: #E5407A; /* マゼンタ寄り */
    z-index: 3;
    opacity: 0;
}
.splash__logo-plate--y {
    background-color: #FFC93C; /* イエロー */
    z-index: 4;
    opacity: 0;
}
.splash.is-playing .splash__logo-plate--c {
    animation: splashPlateC 1s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s forwards;
}
.splash.is-playing .splash__logo-plate--m {
    animation: splashPlateM 1s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s forwards;
}
.splash.is-playing .splash__logo-plate--y {
    animation: splashPlateY 1s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s forwards;
}
/* 各版：ずれた位置→合致(55%)。本体の刷り上がり開始(0.75s)に合わせてフェードアウト */
@keyframes splashPlateC {
    0%   { transform: translate(-12px, 8px); opacity: 0; }
    30%  { opacity: 0.85; }
    55%  { transform: translate(0, 0); opacity: 0.85; }
    100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes splashPlateM {
    0%   { transform: translate(11px, -9px); opacity: 0; }
    30%  { opacity: 0.85; }
    55%  { transform: translate(0, 0); opacity: 0.85; }
    100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes splashPlateY {
    0%   { transform: translate(6px, 11px); opacity: 0; }
    30%  { opacity: 0.85; }
    55%  { transform: translate(0, 0); opacity: 0.85; }
    100% { transform: translate(0, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .splash__logo-plate { display: none; }
    .splash__logo-img {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        animation: none;
    }
}

/* 375px未満：スプラッシュも全画面を覆うよう高さを割り戻す */
@media (max-width: 374px) {
    .splash {
        width: 375px;
        height: calc(100dvh / (100vw / 375));
    }
}