/* ============================================================
Base
============================================================ */

html,
body {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
    color: #073E78;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    line-height: 1.5;
}

img {
    object-fit: cover;
}

.color-orange {
    color: #DB4324;
}

.padding-b100 {
    padding-bottom: 100px;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

/* ============================================================
ファーストビュー
============================================================ */

/* FVは画面全体を覆うオーバーレイ */
.fv {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #fff;
}

/* 背景画像コンテナ */
.fv-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fv-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    pointer-events: none;
}

.fv-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.fv-bg-img.is-active {
    opacity: 1;
}

/* SKIPボタン */
.fv-skip {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: min(3.73vw, 14px);
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 1.5em 5.8em;
    cursor: pointer;
    border-radius: 2px;
    transition: opacity 0.2s;
}

.fv-skip:hover {
    opacity: 0.6;
}

/* タグライン */
.fv-tagline {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: bold;
    color: #333;
    letter-spacing: 0.12em;
    white-space: nowrap;
    opacity: 0;
    text-align: center;
}

.fv-counter {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fv-counter__inner {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fv-digit-slot {
    position: relative;
    width: 64px;
    height: 90px;
    overflow: hidden;
}

.fv-digit-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    transform: translateY(0);
}

.fv-digit-item {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}

/* メインコンテンツ：FV終了まで非表示 */
.main-content {
    opacity: 0;
}

/* ============================================================
ヘッダー
============================================================ */
header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}

.header-line {
    width: 100%;
    background: #ffffff;
    padding: 6px 16px;
    text-align: right;
}

.header-line img {
    width: 40%;
    max-width: 156px;
}

.header-logo {
    width: 26%;
    max-width: 180px;
    position: absolute;
    bottom: 0;
    left: 2.5vw;
    translate: 0 calc(100% + 24px);
}

/* ============================================================
KVエリア（FV後のメインコンテンツ）
============================================================ */
.top-btn {
    position: fixed;
    right: 50px;
    bottom: 30px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.top-btn a {
    display: block;
    background: #303030;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    transition: all .3s;
}

@media (any-hover: hover) {
    .top-btn a:hover {
        opacity: 0.6;
    }
}

.top-btn a span {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #ffffff;
}

.top-btn a span::before,
.top-btn a span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 4px;
    height: 38%;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: 50% 2px;
}

.top-btn a span::before {
    transform: rotate(45deg);
}

.top-btn a span::after {
    transform: rotate(-45deg);
}

.kv-area {
    width: 100%;
    height: 100svh;
    position: relative;
    overflow: hidden;
    background: url(../images/kv-bg.png) no-repeat;
    background-size: cover;
}

.kv-bg-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.kv-bg-dot img {
    object-fit: cover;
}

.kv-img-wrap {
    width: 100%;
    height: 100vh;
    /* transform: scale(0.8);
    opacity: 0; */
}

.kv-img {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 20px;
    overflow: hidden;
    z-index: 0;
}

.kv-img:nth-of-type(1) {
    width: 18.89%;
    translate: -170% -240%;
}

.kv-img:nth-of-type(2) {
    width: 16.11%;
    translate: -238% -80%;
    z-index: 1;
}

.kv-img:nth-of-type(3) {
    width: 25.69%;
    translate: -188% 71%;
}

.kv-img:nth-of-type(4) {
    width: 19.79%;
    translate: 144% -208%;
}

.kv-img:nth-of-type(5) {
    width: 16.94%;
    translate: 216% -66%;
}

.kv-img:nth-of-type(6) {
    width: 16.94%;
    translate: 118% 38%;
    z-index: 1;
}

.kv-img:nth-of-type(7) {
    width: 19.79%;
    translate: 160% 74%;
}

.kv-img:nth-of-type(8) {
    width: 19.72%;
    translate: -290% -130%;
}

.kv-img:nth-of-type(9) {
    width: 21.72%;
    translate: 18% -130%;
}

.kv-img:nth-of-type(10) {
    width: 21.72%;
    translate: -60% 144%;
}

.kv-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 41.67%;
    z-index: 3;
    /* transform: scale(0.6);
    opacity: 0; */
}

.scroll {
    font-size: 14px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    translate: -50% 0;
    z-index: 4;
}

.scroll span {
    position: relative;
    font-weight: bold;
}

.scroll span::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DB4324;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 120%;
    animation: scrollDot 1.0s ease infinite;
}

@keyframes scrollDot {
    0% {
        opacity: 0;
        translate: -50% 120%;
    }

    70% {
        opacity: 1;
        translate: -50% calc(120% + 20px);
    }

    100% {
        opacity: 1;
        translate: -50% calc(120% + 20px);
    }
}

/* ============================================================
Section
============================================================ */
section {
    position: relative;
    padding: 100px 0;
}

.section-inner {
    width: 90%;
    max-width: 1360px;
    margin: 0 auto;
}

h2 {
    font-family: m-plus-1p, sans-serif;
    font-size: 40px;
    margin: 0 auto 60px;
    width: 90%;
    max-width: 718px;
    text-align: center;
}

h2 span.h2_en {
    font-weight: 800;
    display: block;
    padding-bottom: 0.2em;
    margin-bottom: 0.2em;
    border-bottom: 1px solid #DB4324;
}

h2 span.h2_ja {
    font-weight: 500;
    font-size: 26px;
    display: block;
    letter-spacing: 0.2em;
}

/* ============================================================
メッセージ
============================================================ */
.message-section h2 {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.message-section h2 span.h2_ja {
    text-align: right;
}

.message-content-wrap {
    display: flex;
    gap: 5%;
    padding: 0 min(0.13vw, 30px);
}

.message-content-wrap .message-content {
    width: 55%;
}

.message-content-wrap .top-img {
    width: 40%;
    border-radius: 20px;
    overflow: hidden;
}

.message p {
    line-height: 1.8;
    text-align: justify;
}

.message p:not(:first-of-type) {
    margin-top: 1em;
}

.message p.top-name {
    text-align: right;
}


/* ============================================================
沿革
============================================================ */
.history-section {
    background: #FBFAF8;
}

/* 背景パララックス円 */

.history-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.circle {
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    opacity: 0.2;
}

.circle:nth-child(1) {
    width: 413px;
    top: 1%;
    left: 40%;
    background: #DB4324;
}

.circle:nth-child(2) {
    width: 400px;
    top: 4%;
    left: 55%;
    background: #DF2C3F;
}

.circle:nth-child(3) {
    width: 367px;
    top: 7%;
    left: 66%;
    background: #E0286A;
}

.circle:nth-child(4) {
    width: 322px;
    top: 10%;
    left: 70%;
    background: #DB2479;
}

.circle:nth-child(5) {
    width: 276px;
    top: 13%;
    left: 66%;
    background: #C024DB;
}

.circle:nth-child(6) {
    width: 242px;
    top: 16%;
    left: 55%;
    background: #9F24DB;
}

.circle:nth-child(7) {
    width: 230px;
    top: 19%;
    left: 40%;
    background: #6D24DB;
}

.circle:nth-child(8) {
    width: 242px;
    top: 22%;
    left: 25%;
    background: #2430DB;
}

.circle:nth-child(9) {
    width: 276px;
    top: 25%;
    left: 14%;
    background: #284BBC;
}

.circle:nth-child(10) {
    width: 322px;
    top: 28%;
    left: 10%;
    background: #073E78;
}

.circle:nth-child(11) {
    width: 367px;
    top: 31%;
    left: 14%;
    background: #074b78;
}

.circle:nth-child(12) {
    width: 400px;
    top: 34%;
    left: 25%;
    background: #073E78;
}

.circle:nth-child(13) {
    width: 413px;
    top: 37%;
    left: 40%;
    background: #284BBC;
}

.circle:nth-child(14) {
    width: 400px;
    top: 40%;
    left: 55%;
    background: #2430DB;
}

.circle:nth-child(15) {
    width: 367px;
    top: 43%;
    left: 66%;
    background: #6D24DB;
}

.circle:nth-child(16) {
    width: 322px;
    top: 46%;
    left: 70%;
    background: #9F24DB;
}

.circle:nth-child(17) {
    width: 276px;
    top: 49%;
    left: 66%;
    background: #C024DB;
}

.circle:nth-child(18) {
    width: 242px;
    top: 52%;
    left: 55%;
    background: #DB2479;
}

.circle:nth-child(19) {
    width: 230px;
    top: 55%;
    left: 40%;
    background: #E0286A;
}

.circle:nth-child(20) {
    width: 242px;
    top: 58%;
    left: 25%;
    background: #DF2C3F;
}

.circle:nth-child(21) {
    width: 276px;
    top: 61%;
    left: 14%;
    background: #DB4324;
}

.circle:nth-child(22) {
    width: 322px;
    top: 64%;
    left: 10%;
    background: #DF2C3F;
}

.circle:nth-child(23) {
    width: 367px;
    top: 67%;
    left: 14%;
    background: #E0286A;
}

.circle:nth-child(24) {
    width: 400px;
    top: 70%;
    left: 25%;
    background: #DB2479;
}

.circle:nth-child(25) {
    width: 413px;
    top: 73%;
    left: 40%;
    background: #284BBC;
}

.circle:nth-child(26) {
    width: 400px;
    top: 76%;
    left: 55%;
    background: #2430DB;
}

.circle:nth-child(27) {
    width: 367px;
    top: 79%;
    left: 66%;
    background: #6D24DB;
}

.circle:nth-child(28) {
    width: 322px;
    top: 82%;
    left: 70%;
    background: #9F24DB;
}

.circle:nth-child(29) {
    width: 276px;
    top: 85%;
    left: 66%;
    background: #C024DB;
}

.circle:nth-child(30) {
    width: 242px;
    top: 88%;
    left: 55%;
    background: #DB2479;
}

.circle:nth-child(31) {
    width: 230px;
    top: 91%;
    left: 40%;
    background: #6D24DB;
}

.circle:nth-child(32) {
    width: 242px;
    top: 94%;
    left: 25%;
    background: #2430DB;
}

.circle:nth-child(33) {
    width: 276px;
    top: 97%;
    left: 14%;
    background: #284BBC;
}

.history-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto 40px;
    width: 90%;
}

.history-nav {
    display: flex;
    justify-content: center;
    gap: min(1.6vw, 40px);
}

.history-nav-btn {
    font-family: m-plus-rounded-1p, sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: min(1.82vw, 30px) min(2.6vw, 42px);
    background: #fff;
    cursor: pointer;
    border: none;
    color: inherit;
    border-radius: 9999px;
    position: relative;
    font-size: min(1.82vw, 16px);
}

.history-nav-btn span {
    font-size: min(2.08vw, 20px);
    display: block;
}

.history-nav-btn+.history-nav-btn {
    margin-left: -1px;
}

.history-nav-btn::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d94a38;
    margin: 6px auto 0;
    transform: translate(0);
    transition: all .3s;
}

@media (any-hover: hover) {
    .history-nav-btn:hover::after {
        transform: translateY(16px);
    }
}



/* スクロールエリア */

.history-scroll-area {
    position: relative;
    z-index: 1;
}


/* GSAP pin 対象（全幅・100vh） */

.history-sticky {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.history-sticky-inner {
    width: 95%;
    max-width: 1360px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: stretch;
}

/* 左：年号リスト */

.history-year-wrap {
    width: 200px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    padding-left: 84px;
}

/* 点線の縦軸（padding-left に合わせてずらす） */
.history-year-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 95px;
    /* 38 + dot-wrap の中心 14px */
    width: 0;
    border-left: 6px dotted #DB4324;
    z-index: 0;
    pointer-events: none;
}

/* リスト本体（GSAPで translateY する対象） */
.history-year-list {
    position: relative;
    z-index: 1;
}

/* 各年号アイテム */
/* ★ INACTIVE_H / ACTIVE_H は JS の定数と合わせること */
.history-year {
    height: 130px;
    /* INACTIVE_H */
    opacity: 1;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease;
}

.history-year.active {
    height: 300px;
    /* ACTIVE_H：上下に余白が生まれる */
    opacity: 1;
}

/* ドット */
.year-dot-wrap {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.year-dot {
    display: none;
}

.history-year.active .year-dot-wrap {
    translate: 0 20px;
}

/* ─── 全年号：小さい赤丸＋白文字（正円） ─── */
.year-dot-wrap::after {
    content: attr(data-year);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #d94a38;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    z-index: 2;
    transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1),
        height 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ─── アクティブ年号：不規則な丸を回転（::after） ─── */
.history-year.active .year-dot-wrap::after {
    content: "";
    /* テキストは ::before で上乗せ */
    width: 150px;
    height: 150px;
    translate: none;
    /* ベースの translate: -50% -50% をリセット（keyframe 内で処理） */
    animation: irregularRotate 9s linear infinite;
}

/* ─── アクティブ年号：年テキストを円の上に固定表示（回転しない） ─── */
.history-year.active .year-dot-wrap::before {
    content: attr(data-year);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
}

@keyframes irregularRotate {
    0% {
        border-radius: 52% 48% 45% 55% / 55% 45% 60% 40%;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    12% {
        border-radius: 38% 62% 60% 40% / 42% 58% 40% 60%;
        transform: translate(-50%, -50%) rotate(43deg);
    }

    25% {
        border-radius: 63% 37% 38% 62% / 58% 42% 65% 35%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    37% {
        border-radius: 44% 56% 55% 45% / 35% 65% 52% 48%;
        transform: translate(-50%, -50%) rotate(133deg);
    }

    50% {
        border-radius: 60% 40% 42% 58% / 62% 38% 44% 56%;
        transform: translate(-50%, -50%) rotate(180deg);
    }

    62% {
        border-radius: 35% 65% 58% 42% / 50% 50% 38% 62%;
        transform: translate(-50%, -50%) rotate(223deg);
    }

    75% {
        border-radius: 55% 45% 36% 64% / 40% 60% 60% 40%;
        transform: translate(-50%, -50%) rotate(270deg);
    }

    87% {
        border-radius: 48% 52% 65% 35% / 60% 40% 45% 55%;
        transform: translate(-50%, -50%) rotate(313deg);
    }

    100% {
        border-radius: 52% 48% 45% 55% / 55% 45% 60% 40%;
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 年テキスト（::after / ::before で代替するため非表示） */
.year-text {
    display: none;
}


/* 右：コンテンツ */

.history-item-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* コンテンツ上端を viewport 中央（年号ドットと同じ高さ）に揃える */
    padding-top: 12vh;
    padding-bottom: 100px;
    /* スクロールバーを非表示（スクロール自体は有効） */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE / Edge legacy */
}

.history-item-wrap::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari */
}

.history-item {
    display: none;
    width: 100%;
}

.history-item.active {
    display: block;
    animation: itemSlideIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.history-item li {
    width: 95%;
    margin-left: 5%;
}


@keyframes itemSlideIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-item li:not(:first-of-type) {
    margin-top: 30px;
}

.history-title {
    font-family: m-plus-rounded-1p, sans-serif;
    font-weight: 700;
    display: block;
    font-size: 20px;
    margin-bottom: 1em;
    line-height: 1.2;
}

.history-info {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.history-img {
    flex-shrink: 0;
    width: 46%;
    max-width: 300px;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.history-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
ライブラリ
============================================================ */
.library-content {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.library-content:not(:first-of-type) {
    margin-top: 40px;
}

.library-content a {
    width: 50%;
    max-width: 413px;
    text-align: center;
}

.library-content .library-img {
    aspect-ratio: 206 / 115;
    overflow: hidden;
}

.library-content a .library-img img {
    transition: all .3s;
}

@media (any-hover: hover) {
    .library-content a:hover .library-img img {
        transform: scale(1.1);
    }
}

.library-title {
    display: block;
    font-family: m-plus-rounded-1p, sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-top: 0.8em;
}

/* ============================================================
フッター
============================================================ */
footer {
    position: relative;
    background: #303030;
    padding: 20px 2.5vw;
}

.footer-logo {
    width: 24%;
    max-width: 140px;
}

.copy-right {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    color: #ffffff;
    font-size: 10px;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 200;
    letter-spacing: 0.05em;
}

/* アニメーション */
.anime {
    opacity: 0;
    translate: 0 30px;
    transition: all 1s;
}

.anime.is-active {
    opacity: 1;
    translate: 0;
}