@charset "UTF-8";

.hero {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* トップページ(index.html) のheroセクション */
.hero--index {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100lvh;
}

@media screen and (max-width: 500px) {
    .hero--index {
        height: 60vh;
        height: 100svh;
    }
}

.hero__slider--index {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__slider--index .hero__image--index {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration-hero-slide) ease-in-out;
}

.hero__image--index.fade-out {
    opacity: 0;
    z-index: 3;
}

.hero__image--index.current {
    opacity: 1;
    z-index: 3;
}

.hero__image--index.next {
    opacity: 1;
    z-index: 2;
}

.hero__overlay--index {
    position: relative;
    width: 60%;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* サブページのheroセクション */
.hero__image--subpage {
    width: 100%;
    height: auto;
    min-height: 230px;
    overflow: hidden;
    object-fit: cover;
}

.hero__title--subpage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-on-dark);
    font-size: clamp(25px, 5vw, 30px);
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    letter-spacing: clamp(0.08em, 0.7vw, 0.3em);
    padding-left: clamp(0.08em, 0.7vw, 0.3em);
    white-space: nowrap;
    z-index: 10;
}

/* 共通パーツ */
.hero__logo-link {
    position: absolute;
    top: var(--logo-top);
    left: var(--logo-left);
    transform: translate(0, -50%);
    z-index: 100;
}

.hero__logo-picture {
    display: inline-block;
    height: var(--logo-height);
}

.hero__logo-picture img {
    height: var(--logo-height);
    width: auto;
}

.hero__pagination {
    position: absolute;
    bottom: clamp(20px, 4vw, 25px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: clamp(8px, 1vw, 16px);

    z-index: 10;
}

/* ページネーションのドット */
.hero__dot {
    width: clamp(20px, 3vw, 30px);
    height: 1.5px;
    background-color: var(--color-pagination-dot);
    display: inline-block;
    transition: background-color var(--duration-hero-slide) ease, transform var(--duration-hero-slide) ease;
}

/* 表示中の画像に対応するドット */
.hero__dot.current {
    background-color: var(--text-on-dark);
    transform: scale(1.2);
}