/* ローディング画面全体 */
#loading{
  position:fixed; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;          /* 背景色 */
  z-index:9999;                /* 最前面 */
  transition:opacity .8s ease, visibility .8s ease;
}

/* ローディングコンテンツ */
.loading-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 90px auto 0;
    padding: 40px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000000; /* デフォルトの文字色 */
    height: calc(88vh - 90px);
    box-sizing: border-box;
}

/* メインテキスト */
.loading-main-text {
    font-family: 'Zen Kaku Gothic Antique', 'Yaldevi', sans-serif; /* Zen Kaku Gothic Antique, Yaldeviフォント、なければsans-serif */
    font-weight: 700;
    font-size: 42px; /* 49pxから5px減らす */
    color: #212022f0; /* Figma指定から変更 */
    line-height: 71px; /* Figma指定 */
    letter-spacing: -0.04em; /* Figma指定 */
    margin-bottom: 0px; /* Figmaの配置から調整 */
    text-align: center; /* 中央揃えを明示 */
}

/* ひらがなを漢字より少し小さく (42pxの97.6%≈41px) */
.loading-main-text .char-te,
.loading-main-text .char-de,
.loading-main-text .char-wo,
.loading-main-text .char-no,
.loading-main-text .char-ki,
.loading-main-text .char-comma {
    font-size: calc(42px * 0.976);
}

.loading-main-text span {
    display: inline-block; 
    vertical-align: middle; 
    opacity: 0; /* 初期状態: 透明 */
    transform: translateY(20px); /* 初期状態: 少し下に */
    filter: blur(5px); /* 初期状態: 少しぼかす */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.4s ease-out;
}


/* ロゴ */
.loading-logo img {
    width: 760px;
    height: auto;
    flex-shrink: 0;
    aspect-ratio: 616 / 143; /* Figmaの値から設定 */
    object-fit: contain;
    margin-bottom: 30px; /* Figmaの配置から調整 */
    position: relative;
}

/* タグライン */
.loading-tagline {
    font-family: "Hiragino Sans", sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #1F2020;
    line-height: 1.5; /* Figma: 1.5em */
    letter-spacing: 0.57em; /* Figma: 57% */
    position: relative;
}

/* 読み込み完了後に付与されるクラス */
#loading.loadEnd{
  opacity:0; visibility:hidden;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .loading-content {
        max-width: 90%;
        padding: 20px;
    }
    .loading-main-text {
        font-size: 31px; /* 36pxから5px減らす */
        line-height: 1.4;
        letter-spacing: -0.03em;
        margin-bottom: 5px;
    }
    .loading-main-text .char-te,
    .loading-main-text .char-de,
    .loading-main-text .char-wo,
    .loading-main-text .char-no,
    .loading-main-text .char-ki,
    .loading-main-text .char-comma {
        font-size: calc(31px * 0.976);
    }
    .loading-logo img {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    .loading-tagline {
        font-size: 18px; /* モバイル用のフォントサイズ */
        letter-spacing: 0.3em;
    }
}

/* 580px前後での調整 */
@media (max-width: 580px) {
    .loading-main-text {
        font-size: 26px; /* 768pxの31pxと450pxの22pxの間 */
        line-height: 1.3;
        letter-spacing: -0.025em; /* 微調整 */
        white-space: nowrap; /* 2行になるのを防ぐ */
    }
    .loading-main-text .char-te,
    .loading-main-text .char-de,
    .loading-main-text .char-wo,
    .loading-main-text .char-no,
    .loading-main-text .char-ki,
    .loading-main-text .char-comma {
        font-size: calc(26px * 0.976);
    }
    .loading-logo img {
        width: 100%;
    }
    .loading-tagline {
        font-size: 15px; /* タグライン調整 */
        letter-spacing: 0.2em;
    }
}

/* 小さなスクリーン用の追加調整 */
@media (max-width: 450px) {
    .loading-main-text {
        font-size: 20px; /* さらに小さく調整 */
        line-height: 1.3;
        letter-spacing: -0.02em;
    }
    .loading-main-text .char-te,
    .loading-main-text .char-de,
    .loading-main-text .char-wo,
    .loading-main-text .char-no,
    .loading-main-text .char-ki,
    .loading-main-text .char-comma {
        font-size: calc(20px * 0.976);
    }
    .loading-logo img {
        width: 100%;
    }
    .loading-tagline {
        font-size: 13px;
        letter-spacing: 0.15em;
    }
}

/* 超小型デバイス用追加調整 */
@media (max-width: 375px) {
    .loading-main-text {
        font-size: 15px; /* 19px→17pxに変更 */
        line-height: 1.1; /* 1.2→1.1に変更 */
        white-space: nowrap;
    }
    .loading-main-text .char-te,
    .loading-main-text .char-de,
    .loading-main-text .char-wo,
    .loading-main-text .char-no,
    .loading-main-text .char-ki,
    .loading-main-text .char-comma {
        font-size: calc(15px * 0.976);
    }
    .loading-logo img {
        width: 100%;
        margin-bottom: 15px;
    }
    .loading-tagline {
        font-size: 10px; /* 11px→10pxに変更 */
        letter-spacing: 0.08em; /* 0.1em→0.08emに変更 */
    }
}

/* 文字アニメーション用スタイル */
.loading-main-text span {
    display: inline-block; 
    vertical-align: middle; 
    opacity: 0; /* 初期状態: 透明 */
    transform: translateY(20px); /* 初期状態: 少し下に */
    filter: blur(5px); /* 初期状態: 少しぼかす */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.4s ease-out;
}

/* アニメーション表示状態 */
.loading-main-text span.animate-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* 旧サブタイトルアニメーションスタイルはコメントアウト済み */
/*
.loading-subtitle .loading-subtitle-char {
    display: inline-block;
    font-size: 48px; 
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.4s ease-out;
}
*/

/*
.loading-subtitle .loading-subtitle-char.animate-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}
*/