@charset "utf-8";

/* =============================================================== reset */
html, body {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6,
p {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
}

menu, ul, ol, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, video, canvas, svg, figure {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* table, tr, th, td {
    box-sizing: border-box;
} */

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

blockquote, figure {
    margin: 0;
}




/* 雪の粒のスタイル */
.snowflake {
    position: absolute;
    top: -10px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
    filter: blur(1px);
}

/* 落下アニメーション */
@keyframes fall {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(500px);
        /* ヘッダーの高さ以上に設定 */
    }
}

/* 左右の揺れアニメーション */
@keyframes sway {
    0%, 100% {
        margin-left: 0;
    }

    50% {
        margin-left: 20px;
    }
}




/* =============================================================== common */
body {

    background-image: url(../img/bg_snow.webp), url(../img/bg_snow.webp), linear-gradient(0deg,
            hsl(201deg 23% 85%) 0%,
            hsl(195deg 23% 90%) 50%,
            hsl(189deg 26% 95%) 100%);

    background-repeat: repeat-y;
    background-position: top left, top right;
    font-family:
        "Noto Sans JP", "Hiragino Sans", Meiryo, "Helvetica Neue", Arial, sans-serif;
    background-color: antiquewhite;


}

.wrapper {
    position: relative;
    overflow: hidden;

    background-image: linear-gradient(180deg,
            hsl(201deg 23% 85%) 0%,
            hsl(195deg 23% 90%) 50%,
            hsl(189deg 26% 95%) 100%);

    font-size: clamp(0.8rem, 0.706rem + 0.47vw, 1rem);
    color: #165570;

    max-width: 1200px;
    min-width: 320px;

    margin: 0px auto;
}

.wrapper .inner {
    padding: 10px;
}

.wrapper hr.line_01, .wrapper hr.line_02 {
    background-image: url(../img/bg_line_01.webp);
    background-position: center top;
    border: none;
    padding: 25px;
    margin: 50px auto;
}

.wrapper hr.line_02 {
    background-image: url(../img/bg_line_02.webp);
}


/* menu */
.wrapper menu {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    text-align: center;
    padding: 20px 10px 20px;
    gap: 20px
}


.wrapper menu li {
    font-weight: bold;
    color: #165570;
}

.wrapper menu li a {
    font-size: clamp(0.8rem, 0.612rem + 0.94vw, 1.2rem);
    text-decoration: none;
    font-weight: bold;
    color: #165570;
    padding: 5px 10px;
    border-bottom: 2px dotted #c9e3f1;
    transition: all 0.6s ease 0s;
}

.wrapper menu li a:hover {
    color: #f16e24;
    border-bottom: 2px dotted #f1ecc9;
}


/* header */


.wrapper header {


    background-image: url(../img/snow_01_bottom.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    padding: 10px;
}

.wrapper header h1 img {
    display: block;
    padding-top: clamp(50px, 10vw, 200px);
    margin: 0px auto 50px;
}

/* about  */
.wrapper #about {}

.wrapper #about .main_img {

    position: relative;

    background-image: url(../img/snow_02_top.svg), linear-gradient(to bottom, transparent calc(100% - 105px), white 0);


    background-repeat: no-repeat;
    background-position: bottom 100px center, bottom center;
    background-size: 100% auto;
    padding: 10px;
}

.wrapper #about .main_img img {
    display: block;
    width: 800px;
    border-radius: 50px;
    outline: 6px dotted #fff;
    outline-offset: -10px;

    margin: 0px auto 50px;
}

.wrapper #about .main_img figcaption {
    font-family: "Kaisei Decol", serif;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);

    display: block;
    width: 80%;
    max-width: 500px;
    background-color: #6da1bc;
    border-radius: 50px;
    padding: 10px;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 400px) {
    .wrapper #about .main_img figcaption {
        padding: 5px;
    }
}

.wrapper #about .bg_white {
    background-color: #fff;
}

.wrapper #about .snowsculptures_txt {
    max-width: 1000px;
    padding: 20px;
    margin: 0px auto;
}

.wrapper #about .symbolmark {
    background-image: url(../img/bg_snow_l.jpg), url(../img/bg_snow_r.jpg);
    background-repeat: no-repeat;
    background-position: bottom left 20px, bottom right 20px;
    background-size: auto 100%;

    text-align: center;
}

@media screen and (max-width: 700px) {
    .wrapper #about .symbolmark {
        /* background-image: none; */
        background-position: top 50% left, top 50% right;

        background-size: 30%;
    }
}


.wrapper #about .symbolmark img {
    width: fit-content;
    padding: 50px 20px;
}

@media screen and (max-width: 700px) {
    .wrapper #about .symbolmark img {
        height: 300px;
    }

}

/* booth  */
.wrapper .booth {
    max-width: 1000px;
    margin: 0px auto;
}

.wrapper #about .booth h2 {
    font-family: "Kaisei Decol", serif;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem);
    font-weight: bold;
    color: #165570;

    border-left: 10px solid #f16e24;
    padding: 20px;
    margin: 20px 0px;
}

.wrapper #about .booth .box {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-around;

    margin-bottom: 20px;
}

.wrapper #about .booth .box figure {
    border-radius: 20px;
    background-color: #d1dce2;
    width: calc(50% - 10px);

    padding: 10px;
}

@media screen and (max-width: 600px) {
    .wrapper #about .booth .box figure {
        width: 100%;
    }
}


.wrapper #about .booth .box figure img {
    border-radius: 10px;
}


.wrapper #about .booth .box figure figcaption {
    text-align: center;

    font-weight: bold;
    color: #165570;

    padding-top: 10px;
}

.wrapper #about .booth p {
    padding-bottom: 20px;
}

/* projectionMapping  */
.wrapper #about .projectionMapping {
    max-width: 1000px;
    padding-bottom: 50px;
    margin: 0px auto;
}

.wrapper #about .projectionMapping h2 {
    font-family: "Kaisei Decol", serif;
    font-size: clamp(1rem, 0.529rem + 2.35vw, 2rem);
    font-weight: bold;
    color: #165570;

    border-left: 10px solid #f16e24;
    padding: 20px;
    margin: 20px 0px;
}

.wrapper #about .projectionMapping .schedule::before {
    content: "●";
    color: #f16e24;
    padding-right: 1rem;
    margin: 20px 0px;
}

.wrapper #about .projectionMapping .schedule {
    font-weight: bold;
}

.wrapper #about .projectionMapping figure {
    text-align: center;
    margin-bottom: 20px;
}

.wrapper #about .projectionMapping p {
    padding-bottom: 20px;
}

/* event */

.wrapper #event {
    background-image: linear-gradient(to bottom, transparent calc(100% - 10px), #6da1bc 0),
        url(../img/snow_02_bottom.svg), url(../img/snow_03_top.svg), url(../img/bg_snow.webp);

    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-position: top center, top center, bottom center, center;
    background-size: auto, 100% auto, 100% auto, auto;


    padding: 200px 10px 150px;
}

.wrapper #event h2 {
    text-align: center
}

.wrapper #event table {
    max-width: 1000px;
    background: #FFFFFF;
    border-collapse: collapse;
    text-align: left;
    margin: 50px auto;
}

.wrapper #event table th {
    background: #6da1bc;
    font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    color: #FFFFFF;
}

.wrapper #event table td.time {
    width: 150px;
    padding: 10px;
    color: #695855;
    font-weight: bold;
    vertical-align: top;
    border-bottom: 1px solid #c0b3b1;
    background: #f5f3e7;
}

.wrapper #event table td {
    width: 350px;
    padding: 10px;
    vertical-align: top;
    border-bottom: 1px solid #c0b3b1;
}

.wrapper #event .comingsoon {
    font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
    font-weight: bold;
    text-align: center;
    padding: 100px 0px;

    color: #f16e24;
}

/* access */

.wrapper #access {
    background-color: #6da1bc;
    padding: 50px 10px 50px;
    text-align: center;
    color: #fff;
}

.wrapper #access iframe {
    width: 100%;
    max-width: 720px;
    height: 250px;
    margin: 50px auto 20px;
}

.wrapper #access figure img {
    padding: 50px 20px 10px;
}

.wrapper #access figcaption span {
    color: #165570;
    font-weight: bold;
}

/* past */

.wrapper #past {
    background-image: linear-gradient(to bottom, transparent calc(100% - 10px), #fff 0), url(../img/snow_03_bottom.svg), url(../img/snow_02_top.svg), url(../img/bg_snow.webp);


    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-position: top center, top center, bottom center, center;
    background-size: auto, 100% auto, 100% auto, auto;

    padding: 200px 10px 200px;

    font-size: 0.8rem;
}

.wrapper #past h2 {
    text-align: center;
}

.wrapper #past .slider {
    background-color: #fff;
    margin: 50px 0px 20px;
}

.wrapper #past .slider li {
    text-align: center;
}

.wrapper #past .slider li img {
    height: 165px;
    width: auto;
    padding: 5px;
}


.wrapper #past .slider li .title {
    padding-bottom: 10px;
    font-weight: bold;
}


.wrapper #past .slider li .title span {
    display: block;
}


/* スライダーレンジ */

.slider-range {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: #6da1bc;
    border-radius: 2px;
    outline: none;
    margin-top: 10px;
    cursor: pointer;
}

.slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    border-radius: 2px;
}

.slider-range::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
    border-radius: 2px;
}

.slider-range::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
            #165570 var(--progress, 0%),
            #6da1bc var(--progress, 0%));
    height: 4px;
    border-radius: 2px;
}

.slider-range::-moz-range-track {
    background: linear-gradient(to right,
            #165570 var(--progress, 0%),
            #6da1bc var(--progress, 0%));
    height: 4px;
    border-radius: 2px;
}




/* info  */

.wrapper .info {
    background-color: #FFFFFF;

    text-align: center;
    padding: 100px 20px;
}

.wrapper .info ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.wrapper .info ul li {
    margin: 50px;
}




.wrapper .info p {
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
    font-weight: bold;
}


.wrapper .info a {
    width: 300px;
    display: block;
    background-color: #165570;

    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;

    color: #FFFFFF;

    padding: 20px;
    margin: 20px auto;

    border-radius: 10px;

    transition: all 0.6s ease 0s;
}

.wrapper .info a:hover {
    background-color: #f16e24;
}