@charset "UTF-8";

html {
  font-size               : 62.5%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust   : 100%;
  -ms-text-size-adjust    : 100%;
  text-size-adjust        : 100%;
  /* font-feature-settings:"palt"; */
}

body {
  font-family      : 'M PLUS Rounded 1c', sans-serif;
  color            : #5B5443;
  background       : url(../img/body-bg.jpg);
  background-size  : 100%;
  background-repeat: repeat-y;
  letter-spacing   : 0.12em;
}

a {
  display: block;
}

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

.wrap {
  overflow: hidden;
}

.top_container {
  max-width: 1290px;
  margin   : 0 auto;
  padding  : 0 45px;
}


.fz18 {
  font-size  : 1.8rem;
  line-height: 2;
}

.fz16 {
  font-size  : 1.6rem;
  line-height: 2;
}

.fz14 {
  font-size  : 1.4rem;
  line-height: 1.8;
}

.fz14 a{text-decoration:underline;  display: inline-block;}



.sec_ttl_ja {
  font-size     : clamp(3.0rem, 4vw, 5.3rem);
  font-weight   : 500;
  letter-spacing: 0.2em;
  text-align    : center;
}

/* ---------------------
Animation
-----------------------*/
.float_01 {
  animation : float_01 5s infinite ease-in-out .8s alternate;
  display   : inline-block;
  transition: 1.5s ease-in-out;
}

@keyframes float_01 {

  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(3px, 15px);
  }

  100% {
    transform: translate(-3px, -10px);
  }
}

.float_02 {
  animation : float_02 4s infinite ease-in-out .8s alternate;
  display   : inline-block;
  transition: 1.5s ease-in-out;
}

@keyframes float_02 {

  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-2px, 15px);
  }

  100% {
    transform: translate(2px, -10px);
  }
}

.fadein {
  transform: translateY(40px);
  opacity  : 0;
}

.fadein.is-active {
  transform : translateY(0);
  opacity   : 1;
  transition: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

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

  100% {
    opacity: 1
  }
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .top_container {
    padding: 0 15px;
  }

  .fz18 {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 600px) {
  .fz18 {
    font-size: 1.4rem;
  }
}


/* =============================================================

loading

===============================================================*/
.loading {
  position  : fixed;
  width     : 100%;
  height    : 100%;
  z-index   : 9999;
  background: #fff;
  text-align: center;
  color     : #fff;
}

.loading_logo {
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
  width    : 20%;
  max-width: 180px;
}

.fadeUp {
  animation-name     : fadeUpAnime;
  animation-duration : 0.6s;
  animation-fill-mode: forwards;
  opacity            : 0;
}

@keyframes fadeUpAnime {
  from {
    opacity  : 0;
    transform: translateY(50px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}


/* =============================================================

header

===============================================================*/
.header_wrap {
  height  : 100%;
  position: relative;
}

.header {
  width     : 100%;
  height    : 180px;
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;
  z-index   : 100;
  transition: .5s;
}

.header .logo {
  width    : 10%;
  max-width: 108px;
  position : absolute;
  top      : 0;
  left     : 50%;
  transform: translate(-50%, 0);
  z-index  : 20;
}

/* ---------------------------------------

nav

----------------------------------------*/
.header_nav {
  height  : 100%;
  position: relative;
}

.header_nav::before {
  content        : "";
  display        : block;
  width          : 100%;
  height         : 250px;
  background     : url(../img/bg-shape.png) no-repeat;
  background-size: 100%;
  position       : absolute;
  top            : -50px;
  left           : 0;
  right          : 0;
  z-index        : -1;
}

.header_nav ul {
  width          : 85%;
  height         : 100%;
  margin         : 0 auto;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding-top    : 20px;
  position       : relative;
}

.header_nav ul::before {
  content        : "";
  width          : 15%;
  max-width      : 165px;
  height         : 20vw;
  max-height     : 118px;
  background     : url(../img/mv-mv-texture-blue.svg) no-repeat;
  background-size: 100%;
  display        : inline-block;
  position       : absolute;
  top            : -50%;
  left           : 5%;
  animation      : float 5s infinite ease-in-out .8s alternate;
  display        : inline-block;
  transition     : 1.5s ease-in-out;
}

.header_nav ul::after {
  content        : "";
  width          : 20%;
  max-width      : 215px;
  height         : 30vw;
  max-height     : 216px;
  background     : url(../img/mv-mv-texture-yellow.svg) no-repeat;
  background-size: 100%;
  display        : inline-block;
  position       : absolute;
  top            : -90%;
  right          : 2%;
  animation      : float_04 5s infinite ease-in-out .8s alternate;
  display        : inline-block;
  transition     : 1.5s ease-in-out;
}

@keyframes float {

  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(3px, 15px);
  }

  100% {
    transform: translate(-3px, -10px);
  }
}

.header_nav ul li:nth-child(3) {
  padding-right: 10%;
}

.header_nav ul li:nth-child(4) {
  padding-left: 10%;
}

.header_nav ul li.header_nav_item_sp {
  width        : 85%;
  padding      : 0;
  border-radius: 6px;
  display      : none;
}

.header_nav ul li a {
  font-size     : 1.8rem;
  font-weight   : 500;
  letter-spacing: 0.1em;
}

.header_logo_left_sp {
  width      : 20%;
  height     : 100%;
  max-width  : 63px;
  display    : flex;
  align-items: center;
  display    : none;
}

/* ---------------------------------------

sp_nav_btn

----------------------------------------*/
.sp_nav_btn {
  width    : 50px;
  height   : 50px;
  position : absolute;
  right    : 15px;
  top      : 50%;
  transform: translate(0, -50%);
  z-index  : 100;
  display  : none;
}

.sp_nav_btn::before {
  content      : "MENU";
  display      : block;
  font-size    : 1.2rem;
  font-weight  : 400;
  color        : #86C02E;
  margin-bottom: 3px;
  text-align   : center;
}

.sp_nav_btn span {
  width     : 100%;
  height    : 6px;
  display   : block;
  transition: all 0.5s;
}

.sp_nav_btn span:nth-child(1) {
  background: #F4D628;
}

.sp_nav_btn span:nth-child(2) {
  background: #E891A7;
  margin    : 6px 0;
}

.sp_nav_btn span:nth-child(3) {
  background: #86C02E;
}

.sp_nav_btn.active span:nth-child(1) {
  transform : translateY(23px) rotate(-45deg);
  transition: all 0.5s;
  background: #E891A7;
}

.sp_nav_btn.active span:nth-child(2) {
  opacity         : 0;
  transform-origin: right center;
  transition      : transform .5s;
}

.sp_nav_btn.active span:nth-child(3) {
  transform : translateY(0) rotate(45deg);
  transition: all 0.5s;
}

.sp_nav_btn.active::before {
  display: none;
}

/* ---------------------------------------

header animation // スクロールで変形

----------------------------------------*/
.header_animation {
  background: rgba(255, 255, 255, .9);
  height    : 120px;
  transition: .5s;
  position  : fixed;
  top       : 0;
  z-index   : 1000;
}

.header_animation .logo {
  width    : 4%;
  min-width: 70px;
  top      : 10px;
}

.header_animation nav::before {
  display: none;
}

.header_animation nav ul::before,
.header_animation nav ul::after {
  display: none;
}


/* --------------------------------------------------------------

レスポンシブ  header

----------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
  .header_nav ul li a {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 1024px) {
  .header_wrap {
    height: 100%;
  }

  .header {
    width     : 100%;
    height    : 100px;
    position  : fixed;
    top       : 0;
    left      : 0;
    right     : 0;
    bottom    : unset;
    z-index   : 1000;
    transition: .5s;
    background: #fff;
    padding   : 0 15px;
  }

  .header .logo {
    width    : 138px;
    max-width: 100%;
    top      : 50%;
    transform: translate(-50%, -50%);
  }

  .header_logo_left_sp {
    display: flex;
  }

  /* ---------------------------------------

  nav

  ----------------------------------------*/
  .header_nav {
    width            : 100%;
    height           : 100vh;
    position         : fixed;
    top              : 0;
    left             : 0;
    opacity          : 0;
    transition       : all .7s;
    visibility       : hidden;
    z-index          : -1;
    background       : url(../img/body-bg.jpg);
    background-size  : 100%;
    background-repeat: repeat-y;
  }

  .header_nav.active {
    position  : fixed;
    top       : 0;
    left      : 0;
    opacity   : 1;
    visibility: visible;
    height    : 100vh;
    z-index   : -1;
    overflow-y: scroll;
    transition: all .7s;
  }

  .header_nav::before {
    display: none;
  }

  .header_nav ul {
    width         : 90%;
    max-width     : 450px;
    height        : auto;
    padding-top   : 110px;
    flex-direction: column;
  }

  .header_nav ul::before,
  .header_nav ul::after {
    display: none;
  }

  .header_nav ul li {
    padding      : 17px;
    width        : 100%;
    text-align   : center;
    background   : #fff;
    margin-bottom: 25px;
    border-radius: 30px;
  }

  .header_nav ul li:nth-child(3),
  .header_nav ul li:nth-child(4) {
    padding: 17px 0;
  }

  .header_nav ul li.header_nav_item_sp {
    display: block;
  }

  .header_nav_contact {
    display: none;
  }


  /* ---------------------------------------

  sp_nav_btn

  ----------------------------------------*/
  .sp_nav_btn {
    display: block;
  }

  /* ---------------------------------------

  header animation // スクロールで変形

  ----------------------------------------*/
  .header_animation .logo {
    width: 138px;
  }
}


/* =============================================================

footer

===============================================================*/
.footer {
  background      : url(../img/top-concept-bg.png) no-repeat bottom;
  background-size : 100%;
  background-color: #fff;
  padding         : 25px 0 28%;
}

.footer_logo {
  width    : 40%;
  max-width: 378px;
  min-width: 312px;
  margin   : 0 auto 23px;
}

.footer .address {
  font-size : clamp(1.4rem, 1.8vw, 1.6rem);
  display   : block;
  text-align: center;
}

.btn_scrollup {
  width: 6%;
  max-width          : 50px;
  min-width: 35px;
  height: 6vw;
  max-height         : 50px;
  min-height: 35px;
  background     : url(../img/btn-scrollup.svg) no-repeat;
  background-size: 100%;
  position       : fixed;
  bottom         : 18vw;
  right          : 2%;
  z-index        : 10;
}


/* --------------------------------------------------------------

レスポンシブ  footer

----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .btn_scrollup {
    bottom: 25vw;
  }
}

@media screen and (max-width: 650px) {
  footer {
    padding: 25px 0 32%;
  }
  .btn_scrollup {
    bottom: 50vw;
  }
}