body {
  font-family: graphie, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  image-rendering: -webkit-optimize-contrast;
  color: #5E5D5E
}

body::after {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  background: url(../img/bg_pc3.jpg) no-repeat left top;
  background-size: cover
}

body .wrapp {
  background: #fff;
  overflow: hidden;
  width: 540px;
  margin: 0 auto
}

body .wrapp header {
  position: fixed;
  background: #fff;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 540px;
  overflow: hidden;
  z-index: 1
}

body .wrapp header .logo {
  width: 110px;
  float: left;
  height: 60px;
  position: relative;
  margin-left: 24px
}

body .wrapp header .logo img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

body .wrapp header .menu {
  position: relative;
  float: right;
  width: 60px;
  height: 60px;
  background: url(../img/icon_menu.svg) no-repeat center center #9DAABA;
  background-size: contain
}

body .wrapp .fv {
  position: relative
}

body .wrapp .fv img {
  width: 100%;
  margin-top: 40px;
}

body .wrapp .fv h1 {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/ttl_mv.svg) no-repeat top center;
  width: 55%;
  height: 300px;
  background-size: contain;
  text-indent: -9999px
}

body .wrapp .fv p {
  position: relative;
  width: 75%;
  margin: 20px auto 30px;
  /* left: 40px; */
  font-size: 0.6rem;
  line-height: 1.5
}

body .wrapp .fv .scroll {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 40px
}

body .wrapp .sec {
  padding: 80px;
  line-height: 2
}

body .wrapp .sec .ttl {
  width: auto;
  margin-bottom: 20px;
  transform: scale(0.8);
  transform-origin: top left
}

body .wrapp .sec img {
  width: 100%
}

body .wrapp .sec .pt {
  width: calc(100% + 80px)
}

body .wrapp .sec .pt.left {
  transform: translateX(-80px)
}

body .wrapp .sec.con01 {
  background: #9DAABA;
  color: #fff;
  letter-spacing: 1px
}

body .wrapp .sec.con01 h2 {
  margin-bottom: 16px;
  font-size: 1.5rem
}

body .wrapp .sec.con02 .ttl {
  margin-bottom: 40px
}

body .wrapp .sec.con02 h2 {
  background: url(../img/ttl_01.svg) no-repeat left top;
  background-size: contain;
  width: 300px;
  height: 32px;
  margin-bottom: 16px;
  text-indent: -9999px
}

body .wrapp .sec.con02 p {
  margin-bottom: 40px
}

body .wrapp .sec.con02 a {
  border-bottom: #5E5D5E solid 1px;
  font-size: 0.8rem;
  font-weight: bold
}

body .wrapp .sec.con03 {
  background: #EDF3FA
}

body .wrapp .sec.con03 h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  letter-spacing: 2px
}

body .wrapp .sec.con03 p {
  margin-bottom: 40px
}

body .wrapp .sec.con03 p span {
  font-size: 0.6rem
}

body .wrapp .sec.con03 .pt {
  margin-bottom: 80px
}

body .wrapp .sec.con04 h2 {
  font-size: 1.5rem;
  color: #9DAABA;
  margin-bottom: 30px
}

body .wrapp .sec.con04 .product {
  margin-bottom: 160px
}

body .wrapp .sec.con04 .product:last-child {
  margin: 0px
}

body .wrapp .sec.con04 .product .txt img+p {
  margin-bottom: 40px
}

body .wrapp .sec.con04 .product .ano {
  font-size: 0.7rem;
  display: block;
  line-height: 1.5;
  padding-bottom: 20px
}

body .wrapp .sec.con04 .product .ano+a {
  display: block;
  font-size: 20px;
  background: #5e5e5e;
  color: #fff;
  padding: 20px 0px;
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer
}

body .wrapp .sec.con04 .product .ano+a i {
  background: url(../img/icon_cart.svg) no-repeat center center;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  vertical-align: sub
}

body .wrapp .sec.con04 .product .ano+a:hover {
  opacity: 0.8
}

body .wrapp .sec.con04 .product .pt {
  margin-bottom: 40px
}

body .wrapp .sec.con04 .product p span {
  background: #C30D23;
  color: #fff;
  padding: 2px;
  margin-left: 12px
}

body .wrapp .sec.con04 .product p span.hide {
  background: #0075C2
}

body .wrapp .sec.con04 .product ul {
  margin: 24px 0;
  display: flex;
  justify-content: center
}

body .wrapp .sec.con04 .product ul li {
  width: 33%;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5;
  margin-right: 14px
}

body .wrapp .sec.con04 .product ul li span {
  vertical-align: super;
  font-size: 0.6rem
}

body .wrapp .sec.con04 .product ul li:last-child {
  margin: 0;
}

body .wrapp .sec.con04 .product ul li img {
  width: 100%;
  margin-bottom: 16px
}

body .wrapp .sec.con04 .product ul+img {
  margin-bottom: 16px
}

body .wrapp footer {
  background: #9DAABA;
  padding: 80px
}

body .wrapp footer>img {
  display: block;
  width: 140px;
  margin: 0px auto 40px
}

body .wrapp footer .sns {
  display: flex;
  justify-content: center;
  margin-bottom: 40px
}

body .wrapp footer .sns a {
  margin-right: 40px
}

body .wrapp footer .sns a:last-child {
  margin: 0
}

body .wrapp footer .sns a img {
  height: 40px
}

body .wrapp footer .link {
  text-align: center;
  margin-bottom: 60px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #fff
}

body .wrapp footer .link::before {
  content: "";
  display: block;
  width: calc(100% + 40px);
  height: 8px;
  background: url(../img/bg_footer.png) no-repeat center top;
  background-size: cover;
  margin: 0 auto 60px;
  transform: translateX(-20px)
}

body .wrapp footer .link a {
  /* margin-right: 40px; */
}

body .wrapp footer .link a:last-child {
  margin: 0
}

body .wrapp footer p {
  color: #fff;
  text-align: center;
  letter-spacing: 2px
}

body .wrapp .window {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 100;
  background: #9DAABA;
  width: 540px;
  height: 100%;
  transition: all .3s
}

body .wrapp .window.open {
  opacity: 1;
  top: 0;
  pointer-events: painted
}

body .wrapp .window .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: url(../img/icon_close.svg) no-repeat center center #9DAABA;
  background-size: contain
}

body .wrapp .window .main {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

body .wrapp .window ul {
  font-size: 1.8rem;
  letter-spacing: 2px;
  margin-bottom: 120px
}

body .wrapp .window ul li {
  color: #fff;
  text-align: center;
  margin-bottom: 30px
}

body .wrapp .window .sns {
  display: flex;
  justify-content: center;
  margin-bottom: 40px
}

body .wrapp .window .sns a {
  margin-right: 40px
}

body .wrapp .window .sns a:last-child {
  margin: 0
}

body .wrapp .window .sns a img {
  height: 40px
}

body .wrapp .window .link {
  width: 100%;
  text-align: center;
  color: #fff
}

body .wrapp .window .link a {
  margin-right: 40px;
  font-size: 1.4rem;
  letter-spacing: 2px
}

body .wrapp .window .link a:last-child {
  margin: 0
}



@media screen and (max-width: 599px) {
  body .sp {
    display: none
  }
  body .wrapp {
    width: 100%;
    margin-left: 0
  }
  body .wrapp header {
    width: 100%;
    margin-left: 0
  }
  body .wrapp .fv img {
    margin: 70px 0 0;
  }
  body .wrapp .fv h1 {
    width: 60%;
    height: 200px;
    bottom: 100px
  }
  body .wrapp .fv p {
    width: 70%;
    font-size: 0.7rem
  }
  body .wrapp .fv .scroll {
    position: absolute;
    width: 30px
  }
  body .wrapp .sec {
    padding: 12vw
  }
  body .wrapp .sec .ttl {
    transform: scale(0.6);
    margin-bottom: 0
  }
  body .wrapp .sec .product .pt {
    width: calc(100% + 12vw)
  }
  body .wrapp .sec .product .pt.left {
    transform: translateX(-12vw)
  }
  body .wrapp .sec.con02 .ttl {
    margin-bottom: 20px
  }
  body .wrapp .sec.con04 .product {
    margin-bottom: 100px
  }
  body .wrapp .sec.con04 .product p span {
    display: inline-block;
    margin: 0;
    padding: 0 8px
  }
  body .wrapp footer {
    padding: 12%
  }
  body .wrapp footer .link {
    width: 100%;
    font-size: 0.8rem;
  }
  body .wrapp footer p {
    font-size: 0.6rem
  }
  body .wrapp .window {
    width: 100vw
  }
  body .wrapp .window .link a {
    font-size: 1.2rem
  }
}




body .wrapp  .cv {
  /* display: flex; */
  /* justify-content: center; */
  display: flex;
  /* width: 100%; */
  display: flex;
  justify-content: center;
  /* margin-bottom: 50px; */
  /* margin-top: 70px; */

}

	.body .wrapp  .cv a ul
	justify-content: center;
display:flex;
	}
body .wrapp  .cv a li {
	width:  47%;
	}
body .wrapp  .cv a li{
    width: 200px;
    height: 58px;
    background: #5E5E5E;
    /* width: 50%; */
    /* margin: auto 10px; */ */;
    vertical-align: middle;
}
body .wrapp  .cv li p{
  color:white;
  text-align: center;
  font-size: 1.2rem;
  line-height: 55px;
  width: 150px;
  }
body .wrapp  .cv a {
  margin: 0 5px;
  display: flex;
}
  body .wrapp .sec.con04 .product .cv a li
{
    width: 100%;
    /* margin: auto 0px; */
}

@media screen and (max-width: 599px) {

  body .wrapp .cv {
    /* padding: 0 36px 0; */
    /* height: 360px; */
    /* position: relative; */
    /* margin-bottom: 80px; */
    /* background-size: cover; */
  }
  body .wrapp .cv a {
    /* left: 50%; */
    /* display: table-cell; */
  }
    body .wrapp  .cv a li{
    height: 58px;
    width: 100%;
    /* margin: auto 10px; */
}
  body .wrapp .sec.con04 .product .cv a li
{
    width: 100%;
}

  
      body .wrapp .cv a p {
    height: 40px;
    width: 500px;
    margin:0 auto;
    display: table-cell;
    vertical-align: middle;
    font-size: 0.9rem;
  }
  body .wrapp .cv::after {
    height: 28px;
    bottom: 4px
  }
  }