@charset "utf-8";
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

/* ▼ フローティングバナー（追従ボタン）の枠の設定 ▼ */
.floating-banner {
  position: fixed;
  bottom: 4.5%;
  /* 左右から引っ張って強制的にド真ん中に置く記述 */
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 750px;
  /* 他の画像の後ろに隠れないように一番手前に出す */
  z-index: 999;
}

/* ▼ バナーの中の画像がはみ出さないようにする設定 ▼ */
.floating-banner img {
  width: 100%;
  height: auto;
}

body {
  font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color:#000;
  line-height: 1.5em;
}
ul,ol {
  list-style-type:none;
}
a:hover {
  opacity:1.0;
}
a:focus {
  outline: none;
}
.content_wrap {
  max-width: 750px;
  margin:0 auto;
  overflow: hidden;
}
.content_wrap img {
  height:auto;
  display: block;
  height: auto;
  border: 0;
  max-width: 100%;
  margin:0;
}
.content_wrap video {
  width: 100%;
  display: block;
  height: auto;
  border: 0;
  outline: none;
}
.content_wrap a {
  display: block;
}
.content_wrap .rl {
  position: relative;
}
.content_wrap .pt01 {
  position:absolute;
  z-index:2;
  width: 80%;
  left:10%;
  top:-2.8%;
}
.content_wrap .video01 {
  position:absolute;
  width: 89.33%;
  z-index:-1;
  top:32.9%;
  left:5.3%;
}
.content_wrap .video02 {
  position:absolute;
  width: 88%;
  z-index:2;
  top:4.5%;
  left:6%;
}
.content_wrap .video02 video {
  border:min(0.93vw,7px) solid #fff;
  border-radius: min(2vw,15px);
}
.content_wrap .video03 {
  position:absolute;
  width: 100%;
  z-index:-1;
  bottom:0;
  left:0;
  background: transparent url(../img/1-3.jpg) 50% 50% / cover no-repeat;
}
.content_wrap .btn01 {
  position: absolute;
  width: 89.33%;
  top:74.5%;
  left:5.6%;
}
.content_wrap .btn01 img {
  animation: btn_ani 1.3s ease-in-out infinite;
}
@keyframes btn_ani {
0% {
  transform: scale(0.95, 0.95);
 }
 50% {
  transform: scale(1, 1);
 }
100% {
  transform: scale(0.95, 0.95);
 }
}
.content_wrap .sld {
  opacity: 0;
  transition: opacity .3s linear;
}
.content_wrap .sld.slick-initialized {
  opacity: 1;
}
.content_wrap .slide01 {
  position: absolute!important;
  width: 100%!important;
  top:30.9%;
  left:0;
  padding:0 4%!important;
}
.content_wrap .slide01.slide01-2 {
  position: absolute!important;
  width: 100%!important;
  top:3.7%;
  left:0;
  padding:0 5.1%!important;
}
.content_wrap .slide01 .slick-prev {
  left: 0%;
  background: url(../img/sld01-prev.png) left top/100% no-repeat;
  background-size: 100%;
  content: "";
}
.content_wrap .slide01.slide01-2 .slick-prev {
  left: 0%;
  background: url(../img/sld02-prev.png) left top/100% no-repeat;
  background-size: 100%;
  content: "";
}
.content_wrap .slide01 .slick-arrow {
  position: absolute;
  top: min(58.1vw,436px);
  width: min(9.33vw,70px);
  height: min(15.46vw,116px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  text-indent: -9999px;
  z-index: 100;
  cursor: pointer;
}
.content_wrap .slide01.slide01-2 .slick-arrow {
  position: absolute;
  top: min(45vw,338px);
  width: min(9.33vw,70px);
  height: min(15.46vw,116px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  text-indent: -9999px;
  z-index: 100;
  cursor: pointer;
}
.content_wrap .slide01 .slick-next {
  right: 0%;
  background: url(../img/sld01-next.png) left top/100% no-repeat;
  background-size: 100%;
  content: "";
}
.content_wrap .slide01.slide01-2 .slick-next {
  right: 0%;
  background: url(../img/sld02-next.png) left top/100% no-repeat;
  background-size: 100%;
  content: "";
}
.content_wrap .slide01.slide01-2 .slick-slide img {
  border-radius: min(2.66vw,20px);
}
.content_wrap .video03 {
  position:absolute;
  width: 100%;
  left: 0;
  bottom:0;
  z-index:-1;
}
.content_wrap .video04 {
  position:absolute;
  width: 89.4%;
  left: 5.3%;
  top:38.4%;
}
.content_wrap .video05 {
  position:absolute;
  width: 44%;
  left: 5.3%;
  top:73.5%;
}
.content_wrap .video06 {
  position:absolute;
  width: 44%;
  right: 5.3%;
  top:73.5%;
}
.content_wrap .qa_wrap {
  background:url(../img/qa_bg.jpg) left top/100% no-repeat;
  padding:0 min(5.33vw,40px) min(8vw,60px);
}
.content_wrap .qa_wrap .accordionlist {
  margin-top: min(4vw,30px);
}
.content_wrap .accordionlist dt {
  position: relative;
  cursor: pointer;
}
.content_wrap .accordionlist dt img {
  border-radius: min(2vw,15px);
  border-left:solid #50a0d2 min(0.66vw,5px);
  border-right:solid #50a0d2 min(0.66vw,5px);  
}
.content_wrap .accordionlist dt:before {
  position: absolute;
  content: "";
  top: 0;
  width: min(3.06vw,23px);
  background: #50a0d2;
  height: min(0.53vw,4px);
  transform: rotate(0deg);
  top: 49%;
  right: min(4.93vw,37px);
  transition: .3s all;
}
.content_wrap .accordionlist dt:after {
  position: absolute;
  content: "";
  top: 0;
  width: min(3.06vw,23px);
  background: #50a0d2;
  height: min(0.53vw,4px);
  transform: rotate(90deg);
  top: 49%;
  right: min(4.93vw,37px);
  transition: .3s all;
}
.content_wrap .accordionlist dt.active:before {
  display: none;
}

.content_wrap .accordionlist dt.active:after {
  transform: rotate(180deg);
}
.content_wrap .accordionlist dt.active img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.content_wrap .accordionlist dd {
  display: none;
}
.content_wrap .accordionlist dd img {
  border-bottom-left-radius: min(2vw,15px);
  border-bottom-right-radius: min(2vw,15px);
  border-top:5px solid #50a0d2;
  border-bottom:solid #50a0d2 min(0.66vw,5px);
  border-left:solid #50a0d2 min(0.66vw,5px);
  border-right:solid #50a0d2 min(0.66vw,5px);
}
@media(max-width:749px) {
  .content_wrap img {
    width: 100%;
  }

}