@charset "utf-8";

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Hiragino Mincho StdN", "Shippori Mincho", "YuMincho", serif;
    overflow-x: hidden;
}

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

.mv {
    background-image: url(../images/mv_bg.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
}

.hakuba_logo {
    width: 23%;
    position: absolute;
    top: 8vw;
    right: 8vw;
}

h1 {
    font-size: 6vw;
    font-weight: bold;
    line-height: 1.28em;
    width: 95.334%;
    padding-top: 20vw;
    padding-bottom: 52vw;
    margin: 0 auto;
}

h1 span {
    display: block;
}

h1 strong {
    font-size: 10.1334vw;
    line-height: 1.24em;
}

.date {
    width: 100%;
    padding: .85em 0 .95em;
    font-size: 6vw;
    text-align: center;
    color: #fff;
    background-image: url(../images/date_bg.jpg);
    background-size: 100% auto;
}

.date strong {
    font-size: 7vw;
}

.discription_wrapper {
    padding-bottom: 8vw;
}

.description {
    padding-bottom: 12vw;
    background-image: url(../images/description_bg.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #94aeba;
}

.experience {
    width: 100%;
    padding: .8vw 0 0 0;
    font-size: 6.1334vw;
    font-weight: bold;
    line-height: 1.283em;
}

.experience span {
    display: block;
}

.pc_span {
    display: inline;
}

.des01,
.des02 {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 4vw;
    background-color: #fff;
    overflow: hidden;
    border-radius: 4vw;
}

.des01 p,
.des02 p {
    padding: 1.2667em 1.5334em 1.3em 1.5334em;
    font-size: 4vw;
    line-height: 1.5em;
}

.discussion {
    position: relative;
    width: 92%;
    margin: 0 4%;
    padding: 3.7682% 0 4.5334vw;
}

#discussion {
    position: relative;
    z-index: 1;
}

.discussion_img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(28%, 213px);
    margin: 0 auto;
    transform: translate(-50%, -50%);
}

.introducing {
    width: 100%;
    margin: 0 auto;
    padding: .5334vw 0 0 0;
    font-size: 6.1334vw;
    font-weight: bold;
    line-height: 1.28em;
}

.exterior_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4vw;
    overflow: hidden;
}

.exterior_img {
    width: 100%;
}

.onef_img,
.m1_2f_img,
.m2f_img {
    width: 75.363%;
}

.exterior_img {
    padding-bottom: 11.334vw;
}

.onef_img {
    padding-bottom: 1.0667vw;
}

.m1_2f_img {
    padding-bottom: 0;
}

.m2f_img {
    padding-bottom: .5334vw;
}

footer {
    position: relative;
    padding: 7.2vw 0 3.7334vw;
}

.booknow {
    position: relative;
    width: 86.667%;
    margin: 0 auto;
    border: .667vw solid #003a77;
}

.booknow a {
    display: block;
    padding: 3.75vw 0 3.75vw .6em;
}

.booknow p {
    font-size: 5.0667vw;
    font-weight: bold;
    text-align: center;
    color: #003a77;
}

.book_img {
    position: absolute;
    left: 21.334vw;
    bottom: 50%;
    width: 7.96875%;
    transform: translateY(50%);
    pointer-events: none;
}

.book_arrow {
    position: absolute;
    right: 11.4667vw;
    bottom: calc(50% - .4vw);
    width: 2.65625%;
    transform: translateY(50%);
    pointer-events: none;
}

.tghjr_logo {
    width: 73.8667%;
    margin: 0 auto;
    padding: 10.9334vw 0 3.7334vw;
}

.go_top {
    position: absolute;
    right: 2.9334vw;
    bottom: 17.0667vw;
    width: 10.5334vw;
}

.copyright {
    font-size: 3.4667vw;
    text-align: center;
}

@media screen and (min-width: 751px) {
    .mv_wrapper {
        position: relative;
        width: min(100%, 1200px);
        margin: 0 auto;
        overflow: hidden;
    }

    .mv {
        width: min(100%, 1920px);
        margin: 0 auto;
        padding-bottom: min(9.08334vw, 109px);
        background-color: #fff;
        background-image: url(../images/mv_bg_pc.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: min(160%, 1920px) auto;
    }

    .hakuba_logo {
        top: min(3.41667vw, 41px);
        left: min(6.25vw, 75px);
        width: min(10.41667%, 125px);
    }

    h1 {
        width: min(690px, 57.5%);
        padding: min(16.0834vw, 193px) min(37.58334%, 451px) min(2.91667vw, 35px) min(6.25%, 75px);
        box-sizing: content-box;
        font-size: min(2.667vw, 32px);
        line-height: 1.46em;
    }

    h1 span {
        display: inline-block;
    }

    h1 strong {
        font-size: min(5.667vw, 68px);
        line-height: 1.1em;
    }

    .date {
        width: fit-content;
        margin-left: min(6.25vw, 75px);
        padding: .8em 1.2em .9em;
        font-size: min(1.542vw, 18.5px);
        background: url(../images/date_bg_pc.jpg) left top / cover;
    }

    .date strong {
        font-size: 1.2784em;
    }

    .description {
        background-image: url(../images/description_bg_pc.jpg);
        background-color: #94aeba;
        background-size: min(72.334%, 868px);
        background-repeat: repeat-x;
        background-position: top;
        padding-bottom: min(8vw, 96px);
        width: 100%;
        overflow: hidden;
    }

    .discription_wrapper {
        width: min(100%, 1200px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: min(3.41667vw, 41px);
        margin: 0 auto;
        padding-bottom: min(4.75vw, 57px);
    }

    .experience {
        width: min(100%, 1200px);
        margin: 0 auto;
        padding: min(4.08334vw, 49px) 0 0 0;
    }

    .experience span {
        display: inline-block;
    }

    .des01 {
        order: 1;
        flex-direction: row;
    }

    .des02 {
        order: 2;
        flex-direction: row-reverse;
    }

    .des01,
    .des02 {
        margin: 0 min(6.25vw, 75px);
        border-radius: min(2.5vw, 30px);
    }

    .des01 p,
    .des02 p {
        width: min(29.227273em, 643px);
        font-size: min(1.8334vw, 22px);
        line-height: 1.5em;
    }

    .dis01_img,
    .dis02_img {
        width: min(33.9167vw, 407px);
    }

    .discussion {
        order: 3;
        width: min(66.667%, 800px);
        margin: -2% auto;
        padding: 0;
    }

    .introducing {
        width: min(1200px, 100%);
        margin: 0 auto;
        padding: 0;
    }

    .exterior_wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        row-gap: min(5vw, 60px);
        column-gap: min(3.4286%, 36px);
        width: min(87.5%, 1050px);
        padding-bottom: min(1vw, 12px);
        border-radius: min(2.5vw, 30px);
    }

    .onef_img,
    .m1_2f_img,
    .m2f_img {
        width: min(28.572%, 300px);
        padding-bottom: 0;
    }

    .exterior_img {
        padding-bottom: 0;
    }

    footer {
        width: min(1200px, 100%);
        padding: min(4.25vw, 51px) 0 min(3vw, 36px);
        margin: 0 auto;
    }

    .booknow {
        width: min(40.41667%, 485px);
        border: min(.25vw, 3px) solid #003a77;
    }

    .booknow a {
        padding: min(1.58334vw, 19px) 0 min(1.6667vw, 20px) 1em;
    }

    .booknow p {
        font-size: min(2.5vw, 30px);
    }

    .book_img {
        width: min(7.8351%, 38px);
        left: min(9.91667vw, 119px);
    }

    .book_arrow {
        width: min(2.681%, 13px);
        right: min(5.25vw, 63px);
        bottom: 50%;
    }

    .tghjr_logo {
        width: min(27.6677%, 332px);
        padding: min(5vw, 60px) 0 min(2.5vw, 30px);
    }

    .go_top {
        width: min(4.08334vw, 49px);
        right: min(5.41667vw, 65px);
        bottom: min(5.25vw, 63px);
    }

    .copyright {
        font-size: min(1.08334vw, 13px);
    }
}

/* latest
------------------- */
.latest {
    position: relative;
    display: flow-root;
    background: #c4def4 url(../images/latest_bg02.jpg) repeat-x bottom center / 112% auto;
}

.latest::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: 100%;
    height: 0;
    padding-top: 13.6%;
    background: url(../images/latest_snow01.png) no-repeat center bottom / 100% auto;
    transform: translateX(-50%);
}

.latest_wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: min(100%, 988px);
    margin: 0 auto;
}

.latest_instagram {
    order: 2;
    position: relative;
    display: grid;
    justify-content: center;
    margin: -3% auto 0;
}

.instagram_wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 87.333333%;
    margin: 0 auto;
    padding: 0 4% 16%;
    box-sizing: border-box;
    background: #8d633a;
}

.instagram_wrap iframe {
    margin: 0 -1px !important;
    min-width: 100% !important;
    border-right: none !important;
    border-left: none !important;
}

.pct_hammer {
    position: absolute;
    top: -2.8%;
    right: 4.5%;
    width: 24.2%;
    transform: rotate(36deg);
}

.pct_carrying,
.pct_squirrel {
    display: none;
}

.latest_signboard {
    order: 1;
}

.latest_txt {
    padding: 1em 1em 2em 1em;
    box-sizing: border-box;
    font-size: 6.1333333vw;
    font-weight: bold;
    line-height: 1.282608695;
}

@media screen and (min-width: 751px) and (max-width: 839px) {
    .latest {
        background-size: 100% auto;
    }

    .latest_instagram {
        margin-top: 0;
        margin-bottom: 6%;
    }

    .latest_txt {
        font-size: min(6.1333333vw, 1.4375em);
    }
}

@media screen and (min-width: 840px) {
    .latest {
        background: #c4def4 url(../images/latest_bg02_pc.jpg) repeat-x bottom center;
        overflow-x: hidden;
    }

    .latest_wrap {
        align-items: end;
        justify-content: space-between;
        margin: min(2.94%, 29px) auto 0;
    }

    .latest::after {
        width: 1853px;
        padding-top: 95px;
        background: url(../images/latest_snow01_pc.png) no-repeat center bottom;
    }

    .latest::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: 2;
        width: 1853px;
        height: 0;
        padding-top: 135px;
        background: url(../images/latest_snow02_pc.png) no-repeat center bottom;
        transform: translateX(-50%);
    }

    .latest_instagram {
        order: 1;
        left: .8%;
        width: 498px;
        margin: 0 auto;
    }

    .latest_instagram h2 {
        width: 390px;
    }

    .instagram_wrap {
        width: 362px;
        padding: 0 min(4.3835616%, 16px) 72px;
    }

    .pct_hammer {
        top: -15px;
        right: 26px;
        width: 112px;
        transform: rotate(36deg);
    }

    .pct_carrying {
        display: block;
        ;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 44%;
        margin-left: -11.5%;
        margin-bottom: 7%;
    }

    .pct_log {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 65%;
        margin-bottom: 16%;
    }

    .latest_signboard {
        order: 2;
        position: relative;
        left: -5%;
        width: min(36.44%, 360px);
        margin: auto 0 146px auto;
        line-height: 1;
        background: url(../images/latest_signboard.png) no-repeat center top / 100% 100%;
    }

    .latest_signboard::before {
        content: "";
        position: absolute;
        bottom: 1px;
        left: 0;
        width: 100%;
        height: 0;
        padding-top: 46px;
        background: url(../images/latest_signboard_bottom.png) no-repeat center top / 100% auto;
        transform: translateY(100%);
    }

    .latest_txt {
        display: block;
        width: min(81.9444444%, 295px);
        margin: 4.4444% auto 5%;
        padding: 1em 1em 2.6em;
        box-sizing: border-box;
        font-size: min(2.4291vw, 24px);
        font-weight: bold;
        line-height: 1.5;
        background: #fff;
    }

    .latest_txt span {
        display: inline-block;
    }

    .pct_squirrel {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        width: min(6.2%, 62px);
        margin: 0 2.9% 120px 0;
    }

}

/* archive
------------------- */
.archive {
    display: flow-root;
    padding-bottom: 2em;
    background: #003a77;
    overflow: hidden;
}

.archive_title {
    padding: 1.3044em .9783em 1.8479em;
    font-size: 6.1334vw;
    font-weight: bold;
    line-height: 1.1;
    color: #fff;
}

.archive_wrap {
    position: relative;
    width: min(89.87%, 674px);
    margin: 0 auto;
}

.archive_list {
    position: relative;
}

.archive_list::after {
    content: "";
    position: absolute;
    top: 1em;
    left: 0;
    width: 2px;
    height: calc(100% + 21.3334vw);
    background: #fff;
}

.archive_wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    width: 9.49545%;
    height: 0;
    margin-bottom: 19.5%;
    padding-top: 19.2vw;
    background: url(../images/circle.png) no-repeat bottom center / contain;
    transform: translateX(-50%);
}

.archive_list li {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 0 auto 3em;
    padding: 0 1.2vw;
    box-sizing: border-box;
}

.archive_list li:last-child {
    margin: 0 auto 2.25em;
}

.archive_list a {
    display: block;
    position: relative;
    width: 66%;
    border: 1px solid #fff;
    border-radius: 2.67vw;
    overflow: hidden;
    transform: translateZ(0);
}

.archive_list a::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10em;
    background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .8));
}

.archive_list .more {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    bottom: 0;
    left: 50%;
    display: grid;
    grid-template-columns: 1em 1fr 1em;
    align-items: center;
    width: 8.3em;
    margin: .6em 0;
    font-size: 4.8vw;
    color: #fff;
    text-align: center;
    letter-spacing: .05em;
    transform: translateX(-50%);
}

.archive_list .more::before {
    content: "";
}

.archive_list .more::after {
    content: "";
    display: inline-block;
    width: .45em;
    height: .45em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(25%) rotate(45deg);
}

.archive time {
    position: relative;
    display: inline-block;
    margin-top: -.3em;
    padding: 0 1em;
    font-size: 4.2667vw;
    font-weight: bold;
    color: #fff;
    width: 5em;
}

.archive time span {
    font-size: 1.25em;
}

.archive time::before {
    content: "";
    position: absolute;
    top: .55em;
    left: -10.5%;
    width: .6em;
    height: .6em;
    background: #fff;
    border-radius: 50%;
}

.archive_list li:first-child time {
    margin-top: 0;
    margin-left: .9em;
    padding: .3em .5em .46em;
    line-height: 1;
    color: #003a77;
    background: #fff;
    border-radius: .3em;
    text-align: center;
}

.archive_list li:first-child time::before {
    top: .5em;
    left: -32.5%;
    width: .95em;
    height: .95em;
}

.archive_list li:first-child time::after {
    content: "";
    position: absolute;
    top: 50%;
    left: .1em;
    width: .7em;
    height: calc(tan(60deg) * .7em / 2);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background: #fff;
    transform: translate(-90%, -50%);
}

.archive_bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 2.25em 0;
}

.archive_label {
    position: relative;
    top: .2em;
    display: inline-block;
    margin-left: .9em;
    padding: .2em .6em .3em;
    font-size: 5.33333vw;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    color: #003a77;
    background: #fff;
    border-radius: .3em;
}

.archive_label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: .3em;
    width: .7em;
    height: calc(tan(60deg) * .7em / 2);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background: #fff;
    transform: translate(-90%, -50%);
}

.archive_txt {
    position: relative;
    width: 59%;
    margin: 0 6.26666vw 0 auto;
    font-size: 5.33333vw;
    line-height: 1.25;
    color: #fff;
    font-weight: bold;
}

.archive_txt span {
    display: inline-block;
}


.btn_instagram {
    width: 96%;
    margin: 0 auto;
}

.btn_instagram a {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 1em auto;
    padding: .5em .8em;
    box-sizing: border-box;
    font-size: 6.1333vw;
    line-height: 1;
    font-weight: bold;
    text-align: center;
    color: #003a77;
    background: #fff;
    border-radius: 2em;
}

.btn_instagram a::before {
    content: "";
    width: 1em;
    height: 1em;
    margin: 0 0 0 auto;
    background: url(../images/icon_instagram.png) no-repeat center / contain;
}

.btn_instagram a::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin: 0 0 0 auto;
    border-top: 4px solid #003a77;
    border-right: 4px solid #003a77;
    transform: rotate(45deg);
}

.btn_instagram a span {
    margin-bottom: .25em;
    margin-left: 1em;
}

@media screen and (min-width: 751px) {
    .archive {
        padding-bottom: 3.4em;
    }

    .archive_title {
        width: min(70%, 840px);
        margin: 1.6em auto 1.8em auto;
        box-sizing: content-box;
        padding: 0 min(210px, 17.5%) 0 min(150px, 12.5%);
        font-size: min(3vw, 2.25em);
        line-height: 1.25;
        letter-spacing: .08em;
    }

    .archive_wrap {
        position: relative;
        width: min(59.666666%, 716px);
        margin: 0 auto;
    }

    .archive_list::after {
        left: 50%;
        transform: translateX(-50%);
        height: calc(100% + min(3vw, 36px));
    }

    .archive_wrap::after {
        display: none;
    }

    .archive_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.8em 0;
    }

    .archive_list li {
        display: grid;
        grid-template-rows: max-content 1fr;
        gap: 1em;
        margin: 0;
        padding: 0;
    }

    .archive_list li:first-child {
        gap: calc(1.3em - 1px);
    }

    .archive_list li:nth-child(even) {
        margin: calc((100% - 3.1875em) / 2 - 75px + 3.1875em + 4px) 0 0 auto;
    }

    .archive_list li:nth-child(2) {
        margin: calc(3.5em + 33.7%) 0 0 auto;
    }

    .archive_list a {
        width: 87%;
        border-width: 2px;
        border-radius: 1.5em;
    }

    .archive_list li:nth-child(even) a {
        margin-right: 0;
        margin-left: auto;
    }

    .archive time {
        display: inline-block;
        font-size: min(2vw, 1.5em);
        width: fit-content;
    }

    .archive_list li:nth-child(odd) time {
        margin: 0 0 0 auto;
    }

    .archive_list li:first-child time {
        margin-right: 1.5em;
        padding: calc(0.3em + 1px) .5em .46em ;
    }

    .archive_list li:nth-child(odd) time::before {
        left: auto;
        right: 0;
        transform: translateX(50%);
    }

    .archive_list li:first-child time::before {
        left: auto;
        right: -1.5em;
        transform: translateX(50%);
    }

    .archive_list li:first-child time::after {
        left: auto;
        right: -1.3em;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        transform: translate(-90%, -50%);
    }

    .archive time::before {
        left: calc(-.2em - min(0.16667vw, 2px));
    }

    .archive_list .more {
        grid-template-columns: .8em 1fr .8em;
        margin: .7em auto;
        font-size: min(2vw, 24px);
    }

    .archive_bottom {
        display: block;
        position: relative;
        z-index: 2;
        margin: 2.2em 0 3.4em;
        padding: 2.2em 0 0;
        background: #003a77 url(../images/circle_pc.png) no-repeat top center / 4.75% auto;
    }

    .archive_label {
        position: absolute;
        display: inline-block;
        top: -.6em;
        left: auto;
        right: 50%;
        margin-left: 0;
        margin-right: .9em;
        font-size: min(2.5vw, 1.875em);
    }

    .archive_label::before {
        top: .54em;
        left: auto;
        right: calc(-.9em + min(.1666666vw, 2px) - .3em);
    }

    .archive_label::after {
        left: auto;
        right: .3em;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        transform: translate(90%, -50%);
    }

    .archive_txt {
        width: 105%;
        margin: 4.2em auto 0;
        font-size: min(2.1667vw, 1.625em);
        padding-left: min(24px, 2vw);
        line-height: 1.5;
        letter-spacing: .075em;
    }

    .btn_instagram a {
        width: min(14em, 388px);
        font-size: min(2.3333vw, 1.75em);
    }

    .btn_instagram a::after {
        border-width: 2px 2px 0 0;
    }
}

@media (hover: hover) {

    .hakuba_logo a:hover img,
    .booknow:hover,
    .tghjr_logo a:hover img,
    .go_top:hover {
        opacity: .8;
    }

    .archive_list a img {
        transition: transform .4s;
    }

    .archive_list a:hover img {
        transform: scale(1.1);
    }

    .btn_instagram a,
    .hakuba_logo a img,
    .booknow,
    .tghjr_logo a img,
    .go_top {
        transition: opacity .2s;
    }

    .btn_instagram a:hover,
    .hakuba_logo a:hover img,
    .booknow:hover,
    .tghjr_logo a:hover img,
    .go_top:hover {
        opacity: .7;
    }
}