@charset "utf-8";
/* ========================================
   基本設定
======================================== */

:root {
    --color-base: #333333;
    --color-primary: #578e51;
    --font-en: "Noto Serif", serif;
    --font-mincho: "Noto Serif JP", serif;
    --transition-hover: 0.2s;
    --width-content: 430px;
    --width-side-left: 238px;
}

html {
    font-size: clamp(
        16px,
        calc(16px + (18 - 16) * ((100vw - 375px) / (430 - 375))),
        18px
    );
}

body {
    color: var(--color-base);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-size: 0.87rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.4;
    overflow-x: hidden;
    width: 100%;
}

img {
    height: auto;
    max-width: 100%;
    width: 100%;
}

h2,
h3 {
    font-weight: 500;
}

dt {
    font-weight: 500;
}

/* ========================================
   Footer
======================================== */

footer {
    background-color: #666666;
    color: #ffffff;
    padding: 2.3125rem 0 0.9375rem;
    text-align: center;
}

.footer-heading {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 1.875rem;
}

.footer-link {
    font-weight: 400;
    margin: 0 0 1.0625rem;
    transition: var(--transition-hover);
    text-align: center;
}

.footer-link:hover {
    text-decoration: underline;
}

.copyright {
    font-size: 0.625rem;
    font-weight: 400;
    margin: 3.125rem 0 0 0;
}

/* ========================================
   共通要素（ボタン・見出し・レイアウトなど）
======================================== */

/* content */
#content {
    margin-left: auto;
    margin-right: var(--width-side-left);
    width: var(--width-content);
}

/* side */
.side {
    height: 100vh;
    position: fixed;
    top: 0;
}

.side-left {
    left: 0;
    width: calc(100% - var(--width-content) - var(--width-side-left));
}

.side-right {
    background-color: #ffffff;
    right: 0;
    width: var(--width-side-left);
}

/* section */
.section {
    padding-block: 2.1875rem;
}

/* heading */
.section-heading {
    display: inline-block;
    font-weight: 300;
    letter-spacing: 0.07em;
    position: relative;
    top: 0;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
}

.section-heading[data-en]::before {
    color: var(--color-primary);
    content: attr(data-en);
    display: block;
    font-family: var(--font-en);
    font-size: 2.125rem;
    font-weight: 500;
    margin-bottom: 0.5625rem;
    text-transform: uppercase;
}

.section-heading[data-en]::after {
    background-color: #cedecc;
    content: "";
    display: block;
    height: 0.5rem;
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: -1;
}

/* button */
.button {
    border: 1px solid var(--color-primary);
    background-position: right 0.9375rem center;
    background-repeat: no-repeat;
    border-radius: 0.3125rem;
    display: block;
    font-family: var(--font-mincho);
    font-weight: 500;
    margin: 0 auto;
    padding: 0.75rem 0 0.75rem 1.5625rem;
    transition: var(--transition-hover);
    width: 17.8125rem;
}

.button:hover {
    border-radius: 1.6875rem;
}

.button-entry {
    background-color: var(--color-primary);
    background-image: url(../images/icon_link_white.svg);
    color: #ffffff;
    font-size: 1.125rem;
    letter-spacing: 0.01em;
}

.button-spot {
    background-color: #ffffff;
    background-image: url(../images/icon_link.svg);
    color: var(--color-primary);
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
}

/* sns */
.sns-list {
    display: flex;
    gap: 4px 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.section-heading:has(+ .sns-list) {
    margin-bottom: 8px;
}

.sns-list li a {
    transition: var(--transition-hover);
}

.sns-list li a:hover {
    opacity: 0.8;
}

/* ----------------------------------------
   サイド
---------------------------------------- */

/* right */
.side-right {
    align-items: center;
    display: flex;
    gap: 45px 0;
    flex-direction: column;
    justify-content: flex-end;
    justify-content: center;
    padding: 40px 0;
}

.pc-side-image {
    width: 150px;
}

/* nav */
.pc-nav {
    margin: 10px 0 0 0;
}

.pc-nav-list li {
    color: var(--color-primary);
    font-size: 9px;
    text-align: center;
    transform: var(--transition-hover);
}

.pc-nav-list li:not(:last-of-type) {
    margin-bottom: 12px;
}

.pc-nav-list li a[data-en] {
    display: table;
    margin: 0 auto;
    position: relative;
}

.pc-nav-list li a[data-en]::before {
    content: attr(data-en);
    display: table;
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 400;
    margin: 0 auto;
    text-transform: uppercase;
    transform: var(--transition-hover);
}

.pc-nav-list li a[data-en]::after {
    background-color: #cedecc;
    content: "";
    height: 6px;
    position: absolute;
    top: 0.8rem;
    left: 0;
    scale: 0;
    transition: var(--transition-hover);
    width: 100%;
    z-index: -1;
}

.pc-nav-list li a[data-en]:hover::after {
    scale: 1;
}

/* share */
.pc-share {
    width: 165px;
}

.pc-share .section-heading {
    color: var(--color-primary);
    font-family: var(--font-mincho);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* left */
.pc-images {
    display: flex;
    flex-direction: column;
    row-gap: 6px;
    padding: 0 6px 0 0;
}

.pc-images img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pc-image-top {
    display: grid;
    height: 38.51vh;
    gap: 6px;
    grid-template-columns: 1fr 35%;
    grid-template-rows: repeat(1, auto);
}

.pc-image-bottom {
    display: grid;
    height: 61.49vh;
    gap: 6px;
    grid-template-columns: 33.5% 1fr;
    grid-template-rows: calc(50% - 6px) 1fr;
}

.pc-image-bottom-left-bottom {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

.pc-image-bottom-right {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
}

.change-block {
    overflow: hidden;
    position: relative;
}

.change-block img {
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 3s ease-in-out;
}

.change-block img.active {
    opacity: 1;
    z-index: 2; /* 表に出す */
}

.change-block img.inactive {
    z-index: 1; /* 裏に回す */
}

/* ========================================
   各セクションごとの要素
======================================== */

/* ----------------------------------------
   MV
---------------------------------------- */

.mv {
    background: no-repeat top center;
    background-size: cover;
    height: 100svh;
    position: relative;
}

/* mv-slider */
.mv-slider {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.mv-slide img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* mv-balloon */
.mv-balloon {
    height: auto;
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    width: 9.625rem;
    z-index: 5;
}

#text {
    mask: url(#mask);
}

.handwriting-text {
    fill: #ffffff;
}

.handwriting-mask-line {
    animation: handwriting 4s linear 1;
    fill: none;
    stroke: #ffffff;
    stroke-dasharray: 4000px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 7;
}

@keyframes handwriting {
    0% {
        stroke-dashoffset: 4000px;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* mv-heading */
.mv-heading-wrap {
    position: absolute;
    top: 8.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 16.5625rem;
    z-index: 5;
}

.mv-heading {
    align-items: flex-start;
    display: flex;
}

.anime {
    opacity: 0;
}

.anime.is-animated {
    opacity: 1;
}

.mv-heading .anime {
    transition: opacity 0.5s cubic-bezier(0.38, 0.01, 0.27, 0.9),
        transform 1.2s cubic-bezier(0.38, 0.01, 0.27, 0.9);
}

.mv-heading .anime:nth-of-type(1) {
    transition-delay: 3.7s;
    transition-duration: 1s, 1.2s;
    transform: rotateY(-180deg);
    width: 3.435rem;
}

.mv-heading .anime:nth-of-type(2) {
    transition-delay: 2.5s;
    transform: translateX(30px);
    width: 6.75rem;
}

.mv-heading .anime:nth-of-type(3) {
    transition-delay: 3s;
    transform: translateX(-30px);
    width: 3.875rem;
}

.mv-heading .anime:nth-of-type(4) {
    transition-delay: 1.4s;
    transform: translateY(-30px);
    width: 2.5rem;
}

.mv-heading .anime.is-animated {
    transform: translate(0);
}

.mv-heading .anime.is-animated:nth-of-type(1) {
    transform: rotate(0);
}

/* mv-scroll */
.mv-scroll {
    position: absolute;
    bottom: 3.125rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.mv-scroll.anime {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.38, 0.01, 0.27, 0.9);
    transition-delay: 4.6s;
}

.mv-scroll.is-animated {
    opacity: 1;
}

.mv-scroll-wrap {
    height: 110px;
    margin: auto;
    position: relative;
    width: 110px;
}

.mv-scroll-circle {
    animation: rotation 18s linear infinite;
    overflow: visible;
}

.mv-scroll-circle-base {
    fill: none;
}

.mv-scroll-circle-text {
    fill: #ffffff;
    font-family: var(--font-en);
    font-size: 13px;
    letter-spacing: 0.12em;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mv-scroll-arrow {
    animation: circle_scroll 3s infinite;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
}

.mv-scroll-arrow::before {
    background-color: #fff;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
}

.mv-scroll-arrow::after {
    border-bottom: 1px solid #fff;
    content: "";
    height: 12px;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    width: 12px;
}

@keyframes circle_scroll {
    0% {
        transform: translate(-50%, -50%) translateY(-10px);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translateY(10px);
        opacity: 0;
    }
}

/* ----------------------------------------
   Contest
---------------------------------------- */

.section-contest {
    background: url(../images/bg_contest_01.jpg) no-repeat bottom center;
    background-size: cover;
    padding: 4.0625rem 40px 3.4375rem;
}

.section-contest .section-heading {
    color: #ffffff;
    font-family: var(--font-mincho);
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    line-height: 1.75;
    margin-bottom: 1.25rem;
    white-space: nowrap;
}

.section-contest .section-heading span {
    margin-inline: -0.5em;
}

.contest-text {
    color: #ffffff;
    font-family: var(--font-mincho);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin-bottom: 1.125rem;
    text-align: justify;
}

.contest-text:last-of-type {
    margin-bottom: 2.5rem;
}

/* ----------------------------------------
   Present
---------------------------------------- */

.section-present {
    background: url(../images/bg_present_01.jpg) no-repeat top center;
    background-size: cover;
    padding-bottom: 1.25rem;
    padding-inline: 20px;
}

.section-present .section-heading {
    background: url(../images/icon_present_heading.svg) no-repeat center top;
    margin-bottom: 0.9375rem;
    padding-top: 52px;
}

.prize-list {
    background-color: #ffffff;
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 7px 1.875rem;
}

.prize-item:not(:last-of-type) {
    margin-bottom: 1.375rem;
}

.prize-item:last-of-type {
    margin-bottom: 1.25rem;
}

.prize-item-slider-wrap {
    margin: 0.9375rem 0 0;
    padding: 0 34px 18px;
    position: relative;
}

.prize-item-slider-wrap .swiper-slide img {
    width: 100%;
}

.prize-item-slider-wrap .swiper-pagination {
    line-height: 1;
    bottom: 0;
}

.prize-item-slider-wrap .swiper-pagination-bullet {
    background: #cccccc;
    opacity: 1;
}

.prize-item-slider-wrap .swiper-pagination-bullet-active {
    background: var(--color-primary);
}

.prize-item-slider-wrap .swiper-button-next,
.prize-item-slider-wrap .swiper-button-prev {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 20px;
    margin-top: -18px;
    width: 12px;
}

.prize-item-slider-wrap .swiper-button-next {
    background-image: url(../images/arrow_prize_slider_next.svg);
}

.prize-item-slider-wrap .swiper-button-prev {
    background-image: url(../images/arrow_prize_slider_prev.svg);
}

.prize-item-slider-wrap .swiper-button-next:after,
.prize-item-slider-wrap .swiper-button-prev:after {
    content: none;
}

/* ----------------------------------------
   Gallery
---------------------------------------- */

.section-gallery {
    padding-inline: 35px;
}

.section-gallery .section-heading {
    background: url(../images/icon_gallery_heading.svg) no-repeat center top;
    margin-bottom: 1.0625rem;
    padding-top: 48px;
}

.gallery-item {
    margin-bottom: 2.125rem;
}

.gallery-item-photo-wrap {
    margin: 0 0 1.25rem;
    position: relative;
}

.gallery-item-photo {
    box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.15);
}

.gallery-item-photo img {
    width: 100%;
}

.gallery-item-balloon {
    position: absolute;
    z-index: 1;
}

.gallery-item:nth-of-type(2) .gallery-item-balloon {
    top: -34px;
    right: -22px;
    width: 94px;
}

.gallery-item:nth-of-type(1) .gallery-item-balloon {
    top: -28px;
    left: -18px;
    width: 114px;
}

.gallery-item:nth-of-type(5) .gallery-item-balloon {
    top: -20px;
    left: -22px;
    width: 114px;
}

.gallery-item-heading {
    align-items: flex-start;
    display: flex;
    line-height: 1.3;
    margin: 0 0 0.625rem;
}

.gallery-item-heading-city {
    border: 1px solid #cccccc;
    color: #999999;
    font-size: 0.8125rem;
    margin: 0 0.4375rem 0 0;
    padding: 0.23em 0.46em;
    text-align: center;
    min-width: 3.5rem;
}

.gallery-item-heading-spot {
    flex: 1;
    font-family: var(--font-mincho);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ----------------------------------------
   Entry
---------------------------------------- */

.section-entry {
    background-color: #f0f5ef;
    padding-inline: 28px;
}

.section-entry .section-heading {
    background: url(../images/icon_entry_heading.svg) no-repeat center top;
    margin-bottom: 2.1875rem;
    padding-top: 54px;
}

.entry-item {
    margin: 0 0 1.375rem;
}

.entry-item:last-of-type {
    margin-bottom: 1.6875rem;
}

.entry-item-title {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 0 0.625rem;
    position: relative;
}

.entry-item-title span {
    background-color: #ffffff;
    border: 1px solid var(--color-primary);
    border-radius: 1.0625rem;
    color: var(--color-primary);
    display: block;
    font-size: 16px;
    font-size: 1rem;
    letter-spacing: 0.04em;
    padding: 0.31em 1.4375rem;
    position: relative;
    text-align: center;
    min-width: 7.1875rem;
    z-index: 1;
}

.entry-item-title::before {
    background: url(../images/border_entry_dot.svg) no-repeat center;
    background-size: 100% auto;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

.entry-item:last-of-type .entry-item-title::before {
    background-image: url(../images/border_entry_line.svg);
}

.entry-item * + p {
    margin-top: 0.75rem;
}

.entry-item-options div {
    margin: 0.375rem 0 0 0;
}

.entry-item-options dt {
    font-size: 0.9375rem;
    margin: 0 0 0.375rem 0;
}

.entry-item-options dd p:not(:last-child) {
    margin-bottom: 0.5rem;
}

.entry-item-options dd b {
    font-weight: 500;
}

.entry-item-list > li {
    padding: 0 0 0 1em;
    position: relative;
}

.entry-item-list > li::before {
    color: var(--color-primary);
    content: "●";
    font-size: 0.85em;
    position: absolute;
    top: 0.1em;
    left: 0;
}

.entry-item-list > li:not(:last-of-type) {
    margin-bottom: 0.75rem;
}

.entry-item-list li dt {
    font-weight: inherit;
}

.entry-item-list li li {
    text-indent: 1em;
}

.entry-item-list li li::before {
    content: "・";
}

.entry-item-contact {
    display: flex;
    flex-wrap: wrap;
    margin: 0.625rem 0 0 0;
}

.entry-item-contact dt {
    flex-basis: 4.5em;
}

.entry-item-contact dd {
    flex-basis: calc(100% - 4.5em);
}

/* ----------------------------------------
   Share
---------------------------------------- */

.section-share {
    background: url(../images/bg_share_01.jpg) no-repeat bottom center;
    background-size: cover;
    padding-bottom: 5.625rem;
}

.section-share-image {
    margin: 0 auto 13.4375rem;
    width: 18.4375rem;
}

.section-share-image img {
    width: 100%;
}

.section-share .section-heading {
    color: #ffffff;
    font-family: var(--font-mincho);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* ----------------------------------------
   Privacy Policy
---------------------------------------- */

.section-policy .section-heading[data-en]::before {
    font-size: 1.75rem;
}

.policy-intro {
    margin: 2.25rem 0 0 0;
}

.policy-item {
    margin: 1.375rem 0 0 0;
}

.policy-heading {
    font-size: 1rem;
    margin-bottom: 0.375rem;
}

.sub-policy-list {
    margin: 1.375rem 0;
}

ul.sub-policy-list li {
    padding: 0 0 0 1em;
    position: relative;
}

ul.sub-policy-list li::before {
    content: "●";
    font-size: 0.7em;
    position: absolute;
    top: 0.3em;
    left: 0;
}

ol.sub-policy-list {
    counter-reset: sub-counter;
}

ol.sub-policy-list li {
    counter-increment: sub-counter;
}

ol.sub-policy-list li::before {
    content: "（" counter(sub-counter) "）";
}

.modal {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: fixed;
    padding: 20px;
    transition: 0.3s;
    visibility: hidden;
    z-index: 10;
}

.modal.is-active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background-color: #fff;
    border-radius: 0.625rem;
    height: calc(100svh - 40px);
    overflow-y: auto;
    padding: 0 20px;
    position: relative;
    max-width: 600px;
    width: 100%;
}

.modal-content .modal-close-bottom {
    cursor: pointer;
    display: block;
    font-size: 1rem;
    margin: 2.875rem auto 0;
    padding: 0.9375rem 0 0;
    position: relative;
}

.modal-content .modal-close-bottom::before,
.modal-content .modal-close-bottom::after {
    background-color: var(--color-base);
    content: "";
    height: 1.875rem;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
}

.modal-content .modal-close-bottom::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-content .modal-close-bottom::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 背景固定用 */
body.is-fixed {
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    #content {
        margin-right: auto;
        width: 100%;
    }

    .side-right {
        display: none;
    }
}