@charset "UTF-8";
/* CSS Document */

/* slickスライダー */
.full-width-box {
    width: 100vw;
    height: 80vh;  /* 画面いっぱいの高さ */
    background: #FFF; /* 背景色（自由に変更） */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.slick-slider div {
    top: 0;
    width: 100%;
}

.slick-slider {
    position: relative;
    height: 80vh;
    width: 100vw;
}

.slick-slider img {
    position: relative;
    width: 100%;
    height: 80vh;
    object-fit: cover; /* 画像を画面いっぱいにフィット */
    object-position: 30% center; /* ←ここで位置調整 */
}



/* スライダーテキストエリア */
.top-box {
    position: absolute;
    width: 100vw;
    height: 80vh;
    top: 0;
    overflow: hidden;
}

.top-box div {
    /* 追加のスタイルが必要ならここに記載 */
}

.left-text-box {
    width: 50vw;
    background-color: hsla(0, 1%, 23%, 0.3);
    height: 80vh;
    position: relative;
}

.left-text-box .set {
    color: #FFFFFF !important;
    padding-left: 5%;
    padding-right: 5%;
    text-align: left;
    max-width: 600px;
    padding-top: 0px;
}

.left-text-box h1 {
    font-family: 'Zen Old Mincho', serif;
    color: #FFFFFF !important;
    font-size: clamp(20px, 6vw, 65px);
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.left-text-box h2 {
    color: #FFFFFF !important;
    font-size: clamp(16px, 3vw, 23px);
    font-weight: 400;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.left-text-box p {
    color: #FFFFFF !important;
    font-size: clamp(16px, 3vw, 22px);
}

.left-text-box p a {
    color: #FFFFFF !important;
    text-decoration: none;
}

.left-text-box p a:hover {
    color: #FFFFFF !important;
    text-decoration: underline;
}

img.spin-slow {
    position: absolute!important;
    bottom: -10%;
    right: -10%;
    animation: spin 90s linear infinite;
}

.top-box img {
    max-width: 500px;
    width: 30%;
    min-width: 200px;
    opacity: 0.5;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}