@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
*/
@charset "utf-8";
/*reset-----------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, th, td, figure{margin: 0; padding: 0;}
html{font-size: 62.5%; overflow-y: auto;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal;}
ol, ul{list-style:none;}
fieldset, img{border:0;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
address, caption, cite, code, dfn, th, var,em,i{font-style: normal; font-weight: normal;}
img{border:none;}
/*-------------------------------------------------------------------*/
body {
min-width:1200px;
overflow:hidden;
background:#fff;
font-size: 1.8rem;
line-height:2;
color:#000;
letter-spacing: 0.07em;
-webkit-text-size-adjust: 100%;
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
--main_color: #000;
}
body.fixed{width: 100%; height: 100%; position: fixed; overflow: visible;}

input, button, textarea, select {border-radius: 0; font-size: 1.6rem; font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}

a,.btn{transition:all 0.6s ease-out 0s; color:#fff; text-decoration: none;}
a:hover{opacity: .6;}
picture{display: block;}
img{display: block; vertical-align:bottom; width:100%; max-width: 100%; height: auto;}
em,i{font-style:normal;}
b,strong,em{font-weight: normal;}
small{font-size: 100%;}
body *{box-sizing: border-box;}

.mint{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-feature-settings: "palt";}
.phr{display: inline-block;}
.dpc{display:block !important;}
.dsp{display:none !important;}


@media screen and (max-aspect-ratio: 1/1) {
    html{font-size: calc(100vw / 599 * 10);}
    input, button, textarea, select {font-size: 3.7333vw;}
    select{-webkit-appearance: none; appearance: none;}
    input[type="checkbox"]{-webkit-appearance: auto !important; -moz-appearance: auto !important; appearance:auto !important; border-radius: 0;}
    body{min-width:unset; font-size: 2.2rem;}
    .dpc{display:none !important;}
    .dsp{display:block !important;}
}

/*-------------------------------------------------------------------*/
.wrapper{
    position: relative;
    --ease-00: all .5s ease-in-out;
    --ease-01: all 1s ease-in-out;
    --ease-02: width 1.2s, opacity 1.2s cubic-bezier(0.4, 0.33, 0.26, 1);
    --ease-03: all .8s cubic-bezier(0.22, 0.8, 0.26, 1);
    background-color: #e0e0e0;
}


.haruta_logo{width: 20vw; opacity: 1; position: absolute; top: 25px; left: 26px; z-index: 3;}
.haruta_logo.show{opacity: 1;}
.haruta_logo_follow{width: 13.2vw; opacity: 0; position: fixed; top: 25px; left: 26px; z-index: 3; transition: var(--ease-00);}
.haruta_logo_follow.show{opacity: 1;}

@media screen and (max-aspect-ratio: 1/1) {
    .haruta_logo{width: 34.7vw; top: auto; bottom: 5vw; left: auto; right: 2vw;}
    .haruta_logo_follow{width: 23vw; top: 4vw; left: 4vw;}
}

._sec {overflow: hidden; position: relative;}

.campaign_txt{width: 0; overflow: hidden; opacity: 0; position: absolute; bottom: 16%; left: 57.9795%;}
.campaign_txt.show{width: 50vw; opacity: 1; transition: var(--ease-02);}
.campaign_txt span{display: block; transform-origin: left;}
.campaign_txt span img{width: 35.9019vw; max-width: unset; height: 3.0278vw;}

@media screen and (max-aspect-ratio: 1/1) {
    .campaign_txt{top: 6vw; bottom: auto; left: 17.52vw;}
    .campaign_txt.show{width: 85.3893vw;}
    .campaign_txt.fix{width: 300vw;}
    .campaign_txt span img{width: 65.3893vw; max-width: unset; height: 5.5146vw; transform-origin: middle;}
}

.palaBg{padding-top: 62.2%; position: relative;}
.palaBg img{width: 200%; max-width: unset; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

@media screen and (max-aspect-ratio: 1/1) {
    .sec02 .palaBg{padding-top: 192.266%;}
    .sec04 .palaBg{padding-top: 208.666%;}
}

.sec02{}
.sec02 .img01,
.sec02 .img02{width: 45.3879%; height: 0; padding-top: 41.4348%; opacity: 0; overflow: hidden; position: absolute; top: 50%; transition: var(--ease-01);}
.sec02 .img01{left: 3.66%; transform: translateY(-35%);}
.sec02 .img02{right: 3.66%; transform: translateY(-65%);}
.sec02 .img01.show,
.sec02 .img02.show{opacity: 1; transform: translateY(-50%);}
.sec02 .img01 img,
.sec02 .img02 img{object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

@media screen and (max-aspect-ratio: 1/1) {
    .sec02{}
    .sec02 .img01,
    .sec02 .img02{width: 89.3333%; padding-top: 75.4666%;}
    .sec02 .img01{top: 16.66vw; left: 50%; transform: translate(-80%,0);}
    .sec02 .img02{top: auto; bottom: 16.66vw; left: 50%; right: auto; transform: translate(-20%,0);}
    .sec02 .img01.show{transform: translate(-50%,0);}
    .sec02 .img02.show{transform: translate(-50%,0);}
}

.sec04{}
.sec04 .img01,
.sec04 .img02{opacity: 0; overflow: hidden; position: absolute; top: 50%; transition: var(--ease-01);}
.sec04 .img01{width: 33.7%; height: 0; padding-top: 46.12%; left: 9.5%; transform: translate(-10%,-50%); transition-delay: .1s;}
.sec04 .img02{width: 43.7%; height: 0; padding-top: 29.57%; right: 9.5%; transform: translate(10%,-50%); transition-delay: .2s;}
.sec04 .img01.show,
.sec04 .img02.show{opacity: 1; transform: translate(0,-50%);}
.sec04 .img01 img,
.sec04 .img02 img{object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

@media screen and (max-aspect-ratio: 1/1) {
    .sec04{}
    .sec04 .img01{width: 69.7333%; padding-top: 95.2%; top: 21.0666vw; left: 50%; transform: translate(-80%,0);}
    .sec04 .img02{width: 84.8%; padding-top: 57.3333%; top: auto; bottom: 21.0666vw; right: 0; transform: translate(30%,0);}
    .sec04 .img01.show{transform: translate(-50%,0);}
    .sec04 .img02.show{transform: translate(0,0);}
}

.sec05{padding: 8.7% 7.2%;}
video{ width: 100%; height: auto;}

@media screen and (max-aspect-ratio: 1/1) {
    .sec05{width: 100%; height: auto; padding: 0}
}

.sec07{padding: 8.7% 7.2%;}
.sec07 cite{display: block; padding: 250px 0 15px 20px; font-weight: 500; line-height: 1; overflow: hidden; margin: -170px 0 0 62px; position: relative;}
.sec07 cite > *{opacity: 0; transition: var(--ease-03);}
.sec07 cite.show > *{opacity: 1;}
.sec07 cite.fix > *{transition-delay: 0s;}
.sec07 cite .line{width: 2px; height: 0; background-color: #000; position: absolute; top: 0; left: 0; transition-delay: 0;}
.sec07 cite i{display: block; font-size: 2rem; transition-delay: .8s; transform: translateX(-200px);}
.sec07 cite h2{font-size: 4rem; margin-top: .8em; transition-delay: 1s; transform: translateX(-200px);}
.sec07 cite h3{font-size: 1.8rem; margin-top: .4em; transition-delay: 1.2s; transform: translateX(-200px);}

.sec07 cite.show .line{height: 384px;}
.sec07 cite.show i{transform: translateX(0);}
.sec07 cite.show h2{transform: translateX(0);}
.sec07 cite.show h3{transform: translateX(0);}

.sec07 .link{display: flex; justify-content: center; align-items: center; width: 311px; height: 40px; border: 1px solid #000; border-radius: 2em; font-size: 2.3rem; font-weight: 200; color: #000; position: absolute; bottom: 120px; right: 10.98%;}
.sec07 .link::after{display: block; content: ""; width: 12px; height: 12px; background: url(../../assets/img/lineup_arrow.svg) 0/contain no-repeat; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.sec07 .link:hover{opacity: 1; background-color: #c0c0c0;}

@media screen and (max-aspect-ratio: 1/1) {
    .sec07{padding: 10.6666% 5.3333%;}
    .sec07 cite{padding: 30vw 0 1vw 5vw; margin: -20vw 0 0 5vw;}
    .sec07 cite .line{width: .2vw;}
    .sec07 cite i{display: block; font-size: 2rem; transform: translateX(-20vw);}
    .sec07 cite h2{font-size: 4rem; margin-top: .8em; transform: translateX(-20vw);}
    .sec07 cite h3{font-size: 1.8rem; margin-top: .5em; transform: translateX(-20vw);}

    .sec07 cite.show .line{height: 51.6vw;}

    .sec07 .link{width: 72.6666vw; height: 9.3333vw; font-size: 5.2vw; margin: 10.6666vw auto 0; position: relative; bottom: 0; right: 0}
    .sec07 .link::after{width: 2.6666vw; height: 2.6666vw; right: 3.2vw;}
}

footer{height: 360px; background: url(../../assets/img/footer.jpg) top/cover; color: #fff; position: relative;}
footer .inner{width: 1000px; height: 100%; margin: 0 auto; position: relative;}
footer .inner > *{position: absolute;}
footer .links{top: 50px; left: 0;}
footer .links li + li{margin-top: .4em;}
footer .links a{display: block; font-size: 1.8rem; font-weight: 500; line-height: 1.3333;}
footer .sns{display: flex; justify-content: flex-end; align-items: center; top: 50px; right: 0;}
footer .sns li{}
footer .sns li + li{margin-left: 12px;}
footer .sns li a{display: block; overflow: hidden;}
footer .sns li.x a{width: 22px; height: 0; padding-top: 22px; background: url(../../assets/img/x.svg) center/contain no-repeat;}
footer .sns li.facebook a{width: 25px; height: 0; padding-top: 25px; background: url(../../assets/img/facebook.svg) center/contain no-repeat;}
footer .sns li.instagram a{width: 24px; height: 0; padding-top: 24px; background: url(../../assets/img/instagram.svg) center/contain no-repeat;}
footer cite{display: block; font-size: 1.1rem; font-weight: 500; bottom: 50px; left: 0;}
footer cite > *{display: block;}
footer .pagetop{display: block; font-size: 1.3rem; font-weight: 500; position: absolute; bottom: 50px; right: 70px;}
footer .pagetop::after{display: block; content: ""; width: 8px; height: 23px; background:  url(../../assets/img/pagetop.svg) center/contain no-repeat; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); transition-duration: .3s;}
footer .pagetop:hover{cursor: pointer;}
footer .pagetop:hover:after{transform: translateY(-60%);}

@media screen and (max-aspect-ratio: 1/1) {
    footer{height: 47.5vw; background: url(../../assets/img/footer_sp.jpg) top/cover;}
    footer .inner{width: unset;}
    footer .links{top: 6.9vw; left: 6vw;}
    footer .sns{top: 6.9vw; right: 6vw;}
    footer .sns li{}
    footer .sns li + li{margin-left: 3vw;}
    footer .sns li.x a{width: 4.2666vw; padding-top: 4.2666vw;}
    footer .sns li.facebook a{width: 5.6666vw; padding-top: 5.6666vw;}
    footer .sns li.instagram a{width: 4.9333vw; padding-top: 4.9333vw; }
    footer cite{display: block; font-size: 1.1rem; font-weight: 500; bottom: 3.5vw; left: 6vw;}
    footer cite > *{display: block;}
    footer .pagetop{bottom: 5vw; right: 9vw;}
    footer .pagetop::after{width: 1.6vw; height: 4.8vw; right: -3vw;}
    footer .pagetop:hover:after{transform: translateY(-50%);}
}