@charset "utf-8";

/* CSS Document */
/*====================
property
====================*/
:root {
  --blue01: #318dff;
  --orange01: #ec9339;
  --winterblue: #6398af;
  --springpink:#e5a1ac;
  --mv-bg-path: url("../img/mv_bg_sp.png");
  --mv-bg-spHeight: 616vw;
  --mv-bg-spWidth: 375;
  --mv-copy-path: url("../img/mv_copy_sp.png");
  --mv-copy-spHeight: 173vw;
  --mv-copy-spWidth: 343;
}

.l-main {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/*====================
mv
====================*/
.l-mv-wrapper {
  position: relative;
  height: 500px;
  margin-bottom: 138px;
  background: url("../img/mv_bg.png") center center / cover no-repeat;
}
.l-mv-wrapper::before {
  content: "";
  position: absolute;
  top: 405px;
  right: 17px;
  z-index: 1;
  width: 704px;
  height: 193px;
  background-image: url("../img/mv_copy.png");
}
.l-mv {
  max-width: 1096px;
  margin: auto;
  padding: 52px 0 64px 0;
}
#mv .l-nav {
  display: flex;
  margin-top: 30px;
  padding: 0;
}
#mv .l-nav .l-nav-child {
  list-style: none;
  width: calc((190% / 1100)*100);
  height: 300px;
  text-decoration: none;
}
#mv .l-nav .l-nav-child a {
  text-decoration: none;
}
#mv .l-nav .l-nav-child:first-child,
#mv .l-nav .l-nav-child:last-child {
  width: calc((170% / 1100)*100);
}
#mv .l-nav .l-nav-child:first-child a {
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0% 100%);
}
#mv .l-nav .l-nav-child:nth-child(2) a,
#mv .l-nav .l-nav-child:nth-child(4) a {
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 100%, 0% 100%);
}
#mv .l-nav .l-nav-child:nth-child(3) a,
#mv .l-nav .l-nav-child:nth-child(5) a {
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
}
#mv .l-nav .l-nav-child:last-child a {
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0% 100%);
}

#mv .l-nav .l-nav-child a div {
  display: flex;
  justify-content: center;
  height: 100%;
  padding-top: 120px;
  background-repeat: repeat;
  font-weight: bold;
  font-size: 28px;
}

/* ボタンの背景画像 */
.l-nav .l-nav-child:first-child a div {
  background-image: url("../img/btn_bg_01.png");
}
.l-nav .l-nav-child:nth-child(2) a div {
  background-image: url("../img/btn_bg_02.png");
}
.l-nav .l-nav-child:nth-child(3) a div,
.l-nav .l-nav-child:nth-child(5) a div {
  background-image: url("../img/btn_bg_03.png");
}
.l-nav .l-nav-child:nth-child(4) a div {
  background-image: url("../img/btn_bg_04.png");
}
.l-nav .l-nav-child:last-child a div {
  background-image: url("../img/btn_bg_05.png");
}
.l-nav .l-nav-child a {
  display: block;
  width: 100%;
  height: 100%;
}
.l-nav .l-nav-child a::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: all .3s ease;

  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.l-nav .l-nav-child:nth-child(odd) a:hover::after {
  opacity: .2;
}
.l-nav .l-nav-child:nth-child(even) a:hover::after {
  opacity: .5;
}
.l-nav .l-nav-child div::after {
  content: "";
  display: block;
  position: absolute;
  top: 178px;
  width: 20px;
  height: 9px;
}
.l-nav .l-nav-child:nth-child(odd) a {
  background-color: var(--blue01);
  color: #fff;
}
.l-nav .l-nav-child:nth-child(odd) a div::after {
  background-image: url("../img/btn_arrow_01.png");
}
.l-nav .l-nav-child:nth-child(even) a {
  background-color: #fff;
  color: #000;
}
.l-nav .l-nav-child:nth-child(even) a div::after {
  background-image: url("../img/btn_arrow_02.png");
}

@media screen and (max-width: 767px) {
  .l-mv-wrapper {
    position: relative;
    height: calc(var(--mv-bg-spHeight) / var(--mv-bg-spWidth) * 100);
    margin-bottom: 30px;
    background: var(--mv-bg-path) center center / cover no-repeat;
  }
  .l-mv-wrapper::before {
    display: none;
  }
  .l-mv {
    padding: 0;
  }
  .l-mv-logo {
    display: none;
  }
  #mv .l-nav {
    display: flex;
    flex-direction: column;
    width: 66%;
    margin: 0 auto 0;
    padding-top: 48%;
  }
  #mv .l-nav .l-nav-child {
    width: 100%!important;
    height: auto;
  }
  #mv .l-nav .l-nav-child a {
    height: 18vw;
  }
  #mv .l-nav .l-nav-child a div {
    justify-content: left;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0;
    padding-left: 10vw;
    font-weight: bold;
    font-size: 28px;
  }
  #mv .l-nav .l-nav-child:first-child a {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
  }
  #mv .l-nav .l-nav-child:nth-child(2) a,
  #mv .l-nav .l-nav-child:nth-child(4) a {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 85%);
  }
  #mv .l-nav .l-nav-child:nth-child(3) a,
  #mv .l-nav .l-nav-child:nth-child(5) a {
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
  }
  #mv .l-nav .l-nav-child:last-child a {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
  }
  #mv .l-nav .l-nav-child div::after {
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    right: 30%;
    width: 20px;
    height: 9px;
  }
}