@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Cormorant+Infant:wght@600&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

.countUp_area {
    background-image: url(../img/hero_img.png);
    background-color: #8f9294;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: auto;
    background-repeat: repeat;
    background-position: left top;
    
  /* ★ position を relative から fixed に変更して最前面に固定します */
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 9999; /* ★ z-index を非常に高くして、後ろのギャラリー写真より手前にします */

  /* フェードアウト（消えるとき）用の滑らかな変化時間を設定 */
    opacity: 1;
    visibility: visible;
    transition: opacity 2.5s ease-in-out, visibility 2.5s ease-in-out;
}

/* ★ アニメーション完了後にJSから付与されるフェードアウト用のクラス */
.countUp_area.fade-out {
    opacity: 0;
    visibility: hidden;
    /* ★ 追加：消え始めた瞬間から、背後のスクロールやクリック操作を一切邪魔しないようにする */
    pointer-events: none;
}

body.no-scroll .AnivTitle,
body.no-scroll .line-wrapper,
body.no-scroll .SinceTitle {
    opacity: 0 !important;
    transition: none !important;
}

/* ★ 演出中に背後のサイトが勝手にスクロールされるのを防ぐ設定 */
body.no-scroll {
    overflow: hidden !important;
    height: 100% !important;
    position: fixed !important;
    width: 100% !important;
}

.countUp_area::before {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
}

.countUp {
    text-align:center;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.company-name {
    font-family:'Bona Nova SC',sans-serif;
    font-weight:300;
    font-size:32px;
    letter-spacing:0.2rem;
    margin-bottom:4px;

    opacity:0;
    transform:translateY(10px);
    transition:opacity 1s cubic-bezier(0.4,0,0.2,1), transform 1s cubic-bezier(0.4,0,0.2,1);
}

/* ─────────────────────────────────────────
    number-row: digitStrip + th を横並び
    年フェーズ時は th は display:none
    120フェーズ時は th を表示
───────────────────────────────────────── */
.number-row {
    display:flex;
    align-items:flex-end;   /* 底辺基準で揃える */
    justify-content:center;
}

#digitStrip {
    display:flex;
    align-items:flex-start;
    opacity:0;
    transition:opacity 1.6s cubic-bezier(0.4,0,0.2,1);
    transform: translateX(-20px);
}

.d-cell { overflow:hidden; position:relative; }
/* 年フェーズはディセンダーが切れないよう overflow を visible に */
.d-cell.year-cell { overflow:visible; }
.d-strip { display:flex; flex-direction:column; will-change:transform; }

.d-cell:not(.year-cell) {
  margin: 0 -7px; /* ★左右をマイナスにしてセル同士を重ねます（お好みで -15px 〜 -30px で微調整してください） */
}

/* ── 120フェーズ用文字 ── */
.d-char {
    font-family:'Cormorant Infant',serif;
    font-weight:600;
    font-size:198px;
    line-height:0.88;
    color:white;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-shrink:0;
}

/* ── 年フェーズ用文字 ── */
.d-char.year {
    font-family:'Cormorant Garamond',serif !important;
    font-weight:300 !important;
    font-size:100px !important;
    line-height:0.88 !important;
    color:rgba(255,255,255,0.38) !important;
    
    /* ★修正：不要な力技のズレを完全にリセットし、ブラウザの自動中央寄せに委ねます */
    transform: none !important; 
}

/* ─────────────────────────────────────────
    カクつきを100%解消し、120th全体を完全に中央寄せするスタイル
   ───────────────────────────────────────── */

.show { opacity:1 !important; transform:translateY(0) !important; }


/* ─────────────────────────────────────────
    オープニングスキップボタン
   ───────────────────────────────────────── */
.skip-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4); /* うっすら白い枠線 */
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 24px;
    font-size: 0.85rem;
    font-family: "Cormorant Garamond", serif; /* 年号と同じ上品なフォント */
    letter-spacing: 0.15em;
    cursor: pointer;
    z-index: 1000; /* カウントアップの数字より手前に配置 */
    border-radius: 30px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px); /* 背景をわずかにぼかして視認性をアップ */
}

/* ホバーした時の滑らかな変化 */
.skip-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
}

/* スマホ（画面幅が狭いとき）の位置微調整 */
@media (max-width: 768px) {
    .skip-btn {
        top: 20px;
        right: 20px;
        padding: 6px 16px;
        font-size: 0.75rem;
    }
}