@charset "UTF-8";

:root {
    --maincolor:#d9d6ea;
}

html, body, div, span, a, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    scroll-behavior: smooth;
}

h1 {
    font-size: 2.25vw;
}

h2 {
    font-size: 2vw;
}

p {
    font-size: 1.3vw;
}

ul, ol {
    list-style: none
}

body {
    background-image: linear-gradient(#d9d6ea 0%, #f0f3ff 30%, #f0fff4 60%, #fffee2 100%);
    font-family: "didot";
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* LOADING */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  transition: opacity 2s;
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  font-family: "didot", sans-serif;
  font-size:2vw;
}

.loading-text span:nth-child(1) {
  filter: blur(0px);
  animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
  filter: blur(0px);
  animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
  filter: blur(0px);
  animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
  filter: blur(0px);
  animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
  filter: blur(0px);
  animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
  filter: blur(0px);
  animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
  filter: blur(0px);
  animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

.header {
    width: 100vw;
    height: auto;
    padding: 1.1vw 0 0 2.5vw;
    position: fixed;
    top: 0;
    z-index: 100;
    mix-blend-mode: difference;
}

.header_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.header_inner_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    right: 5.5vw;
    line-height: 4.5vw;
}

.header_inner_listItem {
    margin-left: 2.75vw
}

.header_inner_listItem a {
    font-size: 1.4vw;
    color:#fff;
    /* color:#8e969c; */
    letter-spacing: .1em;
}

.header_inner_listItem a:hover{
    opacity: .7;
}

.header_logo img {
    transform: translate(0, -5%);
    width: 4.5vw;
    height: 4.5vw;
}

.mainVisual {
    width: 100vw;
    height: 100vh
}

.mainVisual_inner{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.mainVisual_title {
    font-size: 3vw;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.125em;
}

.mainVisual_sentence {
    font-size: 2.25vw;
    text-align: center;
    letter-spacing: 0.25em;
    line-height: 2.0em;
}
.mainVisual_illust {
    width: 38vw;
    position: fixed;
    left: 50%;
    top: 80%;
    -webkit-transform: translate(-50%, -80%);
    -ms-transform: translate(-50%, -80%);
    transform: translate(-50%, -80%);
    z-index: -1;
    opacity: .4;
}



.footer {
    width: 100vw;
    height: 15vw;
    display: block;
    background-color: #191919;
    position: relative;
}

.footer_inner {
    height: 100%
}

.footer_inner_copy {
    color: #e5e5de;
    font-size: 1.5vw;
    font-weight: bold;
    letter-spacing: .2em;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .header {
        padding: 2vw 5vw 0;
    }
    .header_inner_listItem {
        margin-left: 3vw
    }
    .header_inner_listItem a {
        font-size: 2.0vw;
        line-height: 8vw
    }
    .header_logo img {
        width: 8vw;
        height: 8vw
    }
    .mainVisual_inner {
        -webkit-transform: translate(-50%, -55%);
        -ms-transform: translate(-50%, -55%);
        transform: translate(-50%, -55%)
    }
    .mainVisual_title {
        font-size: 6vw;
    }
    .mainVisual_sentence {
        font-size: 3vw;
        line-height: 3.0em;
    }
    .mainVisual_illust {
        width: 64vw;
        top: 55%;
        -webkit-transform: translate(-50%, -55%);
        -ms-transform: translate(-50%, -55%);
        transform: translate(-50%, -55%);
    }
    .footer {
        height: 18vw;
    }
    .footer_inner_copy {
        font-size: 2vw;
        letter-spacing: .25em;
    }
}

@media screen and (max-width: 768px) {
    /* 768pxまでの幅の場合に適応される */
    .header {
        padding: 3vw 5vw 0;
    }
    .header_inner_listItem {
        margin-left: 3.5vw
    }
    .header_inner_listItem a {
        font-size: 2.3vw;
        line-height: 10vw
    }
    .header_logo img {
        width: 10vw;
        height: 10vw
    }

    .mainVisual_inner {
        -webkit-transform: translate(-50%, -60%);
        -ms-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
    }
    .mainVisual_title {
        font-size: 6.5vw;
    }
    .mainVisual_sentence {
        font-size: 3.2vw;
        line-height: 2em;
    }
    .mainVisual_illust {
        width:86vw;
        top: 60%;
        -webkit-transform: translate(-50%, -60%);
        -ms-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
    }
    .footer {
        height: 22vw;
    }
    .footer_inner_copy {
        font-size: 3vw;
        letter-spacing: .3em;
    }
}