/* ============================================================
   ローディング画面の入り（案C「線が幕を切る」）— TOP と内覧リクエストで共通
   2026-10-01 徳田さん「案Cで統一しておきましょう」
   ロゴを一筆書き → ロゴの下に金の細線と英字の社名 → 金線が画面の端まで伸び、その線で画面が上下に割れて本文が出る
   動きは /common/loading_draw.js の tpLoadingIntro()。#tp_loading に class="tp_intro" を付けたページだけに効く
   ============================================================ */

/* 入りの間は進捗バーと「Loading...」を置かない（内覧リクエストの送信中の幕では、tp_intro が外れて出る） */
/* 割れる2枚の幕（.tp_half）は元の幕の写しなので、同じ見た目にする */
#tp_loading.tp_intro .tp_loading_bar,
#tp_loading.tp_intro .tp_loading_text,
.tp_half .tp_loading_bar,
.tp_half .tp_loading_text { display: none; }
#tp_loading.tp_intro .tp_loading_inner,
.tp_half .tp_loading_inner { width: auto; }
#tp_loading.tp_intro .tp_loading_logo,
.tp_half .tp_loading_logo { margin: 0 auto; }

/* 描き始める前に完成形のロゴが一瞬見えるのを防ぐ（JS が tp_run を付けてから描く） */
#tp_loading.tp_intro:not(.tp_run) .tp_loading_logo { visibility: hidden; }

/* ロゴの下の金の細線と社名 */
.tp_mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
}

.tp_mark_rule {
    display: block;
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, rgba(232, 184, 75, 0), rgba(232, 184, 75, 0.95) 50%, rgba(232, 184, 75, 0));
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.tp_mark_word {
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.62em;
    padding-left: 0.62em; /* 字間のぶん右へずれないように左にも同じだけ */
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(247, 242, 233, 0.66);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.9s ease, letter-spacing 1.4s cubic-bezier(0.22, 0.7, 0.2, 1),
                padding-left 1.4s cubic-bezier(0.22, 0.7, 0.2, 1), transform 1s cubic-bezier(0.22, 0.7, 0.2, 1);
}

@media screen and (max-width: 420px) {
    .tp_mark_word { font-size: 9px; }
}

.tp_mark.in .tp_mark_rule { transform: scaleX(1); }
.tp_mark.in .tp_mark_word { opacity: 1; transform: none; letter-spacing: 0.42em; padding-left: 0.42em; }

/* 画面いっぱいに伸びる金線（幕を切る線） */
.tp_cut {
    position: fixed;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 100001;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(232, 184, 75, 0), rgba(232, 184, 75, 0.95) 18%, rgba(247, 225, 170, 1) 50%, rgba(232, 184, 75, 0.95) 82%, rgba(232, 184, 75, 0));
    transform-origin: 50% 50%;
    transition: transform 0.46s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease 0.15s;
}

.tp_cut.go { transform: scaleX(1) !important; }
.tp_cut.out { opacity: 0; }

/* 上下に割れる2枚の幕（元の幕の写し） */
.tp_half {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #1a1510;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}

.tp_half .tp_loading_logo { visibility: visible !important; }
.tp_half .tp_draw_pen { opacity: 0 !important; }

/* 同じタブで2回目以降／動きを減らす設定：描かずに短く抜ける */
#tp_loading.tp_quick { transition: opacity 0.3s ease, visibility 0.3s; }
#tp_loading.tp_quick .tp_loading_inner { display: none; }