html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 1.2;
  letter-spacing: 0.2px;
  font-size: 11px;
  transition: all 1.6s ease 0s;
  background-color: #fff;
  font-family: "zooja-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (min-width: 821px) {
  body {
    margin: 0 auto !important;
  }
}

img {
  display: block;
  width: 100%;
}

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

@media screen and (min-width: 821px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 820px) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 821px) {
  .pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 820px) {
  .pcNone {
    display: block;
  }
}

/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

.sp_fv {
  position: relative;
  opacity: 0;
  transition: opacity 0.5s;
}
.sp_fv.on {
  opacity: 1;
}
.sp_fv h1 {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 16vw;
  white-space: nowrap;
  line-height: 0.6;
}
@media screen and (min-width: 821px) {
  .sp_fv h1 {
    font-size: 10vw;
    line-height: 0.5;
  }
}
.sp_fv h1 span {
  font-size: 6.5vw;
}
@media screen and (min-width: 821px) {
  .sp_fv h1 span {
    font-size: 4vw;
  }
}

.menu {
  background-image: url(../images/back_line.svg);
  background-position: top;
  background-size: 120%;
  width: 100%;
  height: 160vw;
  opacity: 0;
  transition: opacity 0.5s;
}
.menu.on {
  opacity: 1;
}
.menu ul {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  padding-top: 10%;
}
.menu ul li {
  width: 25%;
}
.menu ul li:nth-child(1),
.menu ul li:nth-child(4) {
  margin-top: 7%;
}
.menu ul li:nth-child(2) {
  width: 22%;
}
.menu ul li:nth-child(4) {
  width: 28%;
}
.menu ul li:nth-child(5) {
  width: 24%;
}
.menu ul li:nth-child(6) {
  width: 17%;
  margin: -8% 0 0 2%;
}
.menu ul li:nth-child(7) {
  width: 28%;
}
.menu ul li:nth-child(8) {
  width: 29%;
}

.item_sec {
  overflow: hidden;
}
.item_sec .flex {
  display: flex;
}
.item_sec .img01 {
  width: 58.9984350548vw;
}
@media screen and (min-width: 821px) {
  .item_sec .img01 {
    width: 39.3322900365vw;
  }
}
.item_sec .maru {
  position: absolute;
}
.item_sec h2 {
  font-size: 14.0062597809vw;
  line-height: 0.8;
  text-align: center;
  margin-top: 8%;
}
@media screen and (min-width: 821px) {
  .item_sec h2 {
    font-size: 9.3375065206vw;
  }
}
.item_sec h2 span {
  font-size: 11.6588419405vw;
}
@media screen and (min-width: 821px) {
  .item_sec h2 span {
    font-size: 7.7725612937vw;
  }
}
.item_sec .maru_box {
  position: relative;
  line-height: 1.3;
  height: 6.5vw;
  width: 6.1815336463vw;
}
@media screen and (min-width: 821px) {
  .item_sec .maru_box {
    width: 4.1210224309vw;
  }
}
.item_sec .maru_box p {
  font-size: 6vw;
  position: absolute;
  left: 34%;
  top: -5%;
}
@media screen and (min-width: 821px) {
  .item_sec .maru_box p {
    font-size: 4vw;
    left: 29%;
    top: -2%;
  }
}
.item_sec ul {
  background-color: #FFDA00;
  border-bottom: 1px solid #4c4b46;
  font-size: 6.7292644757vw;
  padding: 14% 8%;
  width: 43.2707355243vw;
  margin-top: 10%;
  position: relative;
  z-index: 10;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
@media screen and (min-width: 821px) {
  .item_sec ul {
    font-size: 4.4861763172vw;
    width: 28.8471570162vw;
  }
}
.item_sec ul span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: 4.6948356808vw;
  margin-left: 2vw;
}
@media screen and (min-width: 821px) {
  .item_sec ul span {
    font-size: 3.1298904538vw;
  }
}
.item_sec ul li {
  display: block;
  width: 100%;
}
.item_sec ul a {
  display: inline-block;
  max-width: 100%;
}
.item_sec ul .soon {
  text-decoration: none;
}
.item_sec .flex_right {
  margin-left: -9%;
  transform: rotate(-3deg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 821px) {
  .item_sec .flex_right {
    margin-left: -14%;
  }
}

#sec01 {
  margin-top: 5%;
}
#sec01 .img01 {
  margin-left: 3%;
}
#sec01 ul {
  margin-bottom: 12%;
}
@media screen and (min-width: 821px) {
  #sec01 ul {
    margin-left: 12%;
  }
}
#sec01 .maru_box p {
  left: 38%;
}

.w_80 {
  width: 80%;
  margin-top: 1%;
}

.kirinuki {
  width: 41%;
  margin: -5% -3% -5% -15%;
  position: relative;
  z-index: 1;
}

.w_90 {
  width: 93%;
}

#sec02 {
  margin-top: -4%;
}
#sec02 .flex_right {
  margin-left: 4%;
  margin-top: 11%;
  margin-right: -9%;
}
#sec02 ul {
  padding: 17% 14%;
}
#sec02 .f_re {
  margin-top: -1%;
  width: 60%;
}
#sec02 .f_ri {
  margin-top: -7%;
  width: 60%;
  margin-left: -10%;
  border-left: 4px solid #fff;
}
#sec02 .img04 {
  width: 64%;
  margin: -31% auto auto 37%;
}
#sec02 .img05 {
  width: 80%;
  margin: -21% auto 0 -13%;
}

#sec03 .flex_right {
  transform: rotate(1deg);
  margin-left: -10%;
  margin-top: 8%;
  margin-bottom: 5%;
}
@media screen and (min-width: 821px) {
  #sec03 .flex_right {
    margin-left: -14%;
  }
}
#sec03 ul {
  margin-top: 6%;
  padding: 12%;
}
@media screen and (min-width: 821px) {
  #sec03 ul {
    margin-left: 18%;
  }
}
#sec03 .img01 {
  margin-left: 3%;
  margin-top: 7%;
}
#sec03 .w_80 {
  width: 65%;
  margin-top: 4%;
}
#sec03 .kirinuki {
  width: 41%;
  margin: 10% 0 0 -7%;
}

#sec04 {
  margin-top: -20%;
}
#sec04 .flex_right {
  margin-left: 4%;
  margin-top: 11%;
  margin-right: -12%;
}
#sec04 .img01 {
  margin-top: -6%;
}
#sec04 .f_re {
  margin-top: -8%;
  width: 60%;
  margin-left: -1%;
}
#sec04 .f_ri {
  margin-top: -14%;
  width: 60%;
  margin-left: -3%;
  border-left: 2px solid #fff;
  background: #fff;
}
@media screen and (max-width: 820px) {
  #sec04 ul {
    width: 45vw;
  }
}

#sec05 {
  padding-bottom: 5%;
}
#sec05 .ki_ri {
  width: 136%;
  margin-bottom: 10%;
  margin-top: 15%;
}
#sec05 .ki_ri div {
  height: 100%;
  margin-left: -13%;
}
#sec05 .ki_ri div:nth-child(1) {
  margin-left: -2%;
}
#sec05 .ki_ri div:nth-child(4) {
  margin: -12% 0 0 -29%;
}
#sec05 .flex_right {
  margin-left: -11%;
  margin-top: 3%;
}
#sec05 .img01 {
  margin-left: 5%;
}
#sec05 .w_78 {
  width: 78%;
  margin-top: 5%;
}
#sec05 .kirinuki {
  width: 70%;
  margin: -36% -24% -5% -23%;
}
#sec05 ul {
  padding: 5%;
  width: 48%;
  margin: -28% 5% 0 auto;
  position: relative;
  transform: rotate(4deg);
  z-index: 5;
}

#sec06 {
  padding-bottom: 10%;
}
#sec06 .img01 {
  margin-left: 7%;
  position: relative;
  z-index: 1;
  margin-right: -9%;
  width: 38%;
}
#sec06 .right_06 {
  width: 59%;
  margin-top: 8%;
}
#sec06 .right_06 .bottom {
  margin: 2% -10% 1% 20%;
}
#sec06 .flex_right {
  margin-left: 10%;
  margin-top: 5%;
  margin-right: -5.5%;
}
#sec06 ul {
  padding: 18% 10%;
  margin-top: 10%;
}

#sec07 .flex_right {
  transform: rotate(1deg);
  margin-left: -12%;
  margin-top: 1%;
  margin-bottom: 5%;
}
#sec07 ul {
  margin-top: 6%;
  padding: 18% 10%;
}
#sec07 .img01 {
  margin-left: 3%;
}
#sec07 .img02 {
  width: 42%;
  margin: -16% auto -48% 1%;
}
#sec07 .img03 {
  width: 65%;
  margin-left: auto;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: relative;
  z-index: 1;
}
#sec07 .img04 {
  width: 67%;
  margin-top: -39%;
}

#sec08 {
  margin-top: 10%;
}
#sec08 .flex_right {
  margin-left: 5%;
  margin-top: 11%;
  margin-right: -12%;
  margin-bottom: -6%;
}
#sec08 ul {
  padding: 17% 10%;
}
#sec08 .a_e {
  align-items: end;
  margin-bottom: 7%;
  margin-top: 5%;
}
#sec08 .f_re {
  width: 55%;
}
#sec08 .f_ri {
  width: 60%;
  margin-top: -6%;
  margin-left: -4%;
  border-left: 2px solid #fff;
}

footer {
  display: flex;
  width: 90%;
  justify-content: space-between;
  margin: 20% auto 8%;
  align-items: end;
}
footer div {
  width: 36%;
}
@media screen and (min-width: 821px) {
  footer div {
    width: 28%;
  }
}

.z10 {
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 821px) {
  .pc_flex {
    display: flex;
  }
  .pc_flex .menu {
    position: fixed;
    width: 33.3333333333%;
  }
  .pc_flex .pc_right {
    width: 66.6666666667%;
    margin-left: 33.3333333333%;
  }
}
.video--filter {
  filter: drop-shadow(0px 0px #000);
}/*# sourceMappingURL=style.css.map */