@charset "UTF-8";
/*reset*/
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
  line-height: 1.5;
  font-size: 80%;
  font-style: normal;
  text-align: justify;
  font-weight: 400;
}

span, del, dfn, em, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, label, caption, time, mark {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
  line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, picture, source {
  display: block;
}

ol, ul, li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

img {
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: auto;
  border: 0;
}

strong {
  font-weight: normal;
}

picture {
  width: 100%;
}

/*base*/
html {
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: "NotoSansCJKjp",sans-serif;
  color: #434343;
}

img {
  display: block;
}

a {
  color: colors(base);
  text-decoration: none;
  will-change: transform;
  -webkit-transition: .2s;
  transition: .2s;
}

a:hover {
  opacity: .8;
}

@media screen and (min-width: 641px) {
  a[href^="tel:"] {
    cursor: default;
  }
}

@media screen and (max-width: 1000px) {
  a:hover {
    opacity: 1;
  }
}

input {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}

input::-webkit-search-decoration {
  display: none;
}

input::focus {
  outline-offset: -2px;
}

input[type="image"] {
  -webkit-appearance: none;
}

/*selectのリセット*/
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
  background: #000;
  color: #fff;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

select::-ms-expand {
  display: none;
}

/*Base*/
/* CSS Document */
.wrap {
  width: 750px;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
}

@media screen and (max-width: 750px) {
  .wrap {
    width: 100%;
  }
}

.overlaid {
  position: relative;
  z-index: 1;
}

.abs {
  position: absolute;
}

.offer_btn_01 {
  top: 76%;
  width: 87%;
  left: 6.5%;
}

.offer_btn_02 {
  top: 74.4%;
  width: 89.334%;
  left: 6.3%;
}

.oc_btn {
  margin: 0 auto;
  width: 49.467%;
  cursor: pointer;
  position: relative;
}

.oc_btn.on .open {
  display: none;
}

.oc_obj {
  width: 208px;
  top: 16px;
  left: 14px;
  z-index: 3;
}

@media screen and (max-width: 750px) {
  .oc_obj {
    width: 27.73333vw;
    top: 2.13333vw;
    left: 1.86667vw;
  }
}

.oc_cont {
  position: relative;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  height: 534px;
  box-shadow: 1px 1px 5px rgba(35, 24, 21, 0.2);
  transition: all .4s;
}

@media screen and (max-width: 750px) {
  .oc_cont {
    height: 71.2vw;
  }
}

.oc_cont::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 40%;
  background: linear-gradient(rgba(255, 255, 255, 0) 70%, #fff 90%);
  bottom: 0;
  z-index: 1;
  transition: all .4s;
}

.oc_cont.on {
  height: 100%;
}

.oc_cont.on::before {
  height: 0%;
}

.oc_b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 27px;
  padding: 65px 27px 40px;
}

@media screen and (max-width: 750px) {
  .oc_b {
    gap: 5.33333vw 3.6vw;
    padding: 8.66667vw 3.6vw 5.33333vw;
  }
}

.oc_a {
  display: none;
}

.oc_a.on {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 27px;
  padding: 0 27px 40px;
}

@media screen and (max-width: 750px) {
  .oc_a.on {
    gap: 5.33333vw 3.6vw;
    padding: 0 3.6vw 5.33333vw;
  }
}

.ab {
  position: absolute;
  width: 92%;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 27.2%;
}

.video_01 {
  top: 25%;
  width: 85%;
  left: 0;
  z-index: -1;
}

.video_02 {
  top: 30%;
  width: 100%;
  left: 0;
  z-index: -1;
}

.gif_01 {
  top: 57%;
  width: 90%;
  left: 5.3%;
}

.gif_02 {
  top: 42%;
  width: 92%;
  left: 4%;
}

.gif_03 {
  top: 34%;
  width: 90%;
  left: 5.3%;
}

.gif_04 {
  top: 37%;
  width: 87.9%;
  left: 6.2%;
}

.gif_05 {
  top: 60%;
  width: 89.5%;
  left: 6%;
}

.gif_06 {
  top: 16.5%;
  width: 89.5%;
  left: 6%;
}

.gif_07 {
  top: 14.5%;
  width: 89.5%;
  left: 6%;
}

.gif_08 {
  top: 81.5%;
  width: 41.2%;
  left: 2.5%;
}

.gif_09 {
  top: 19%;
  width: 43%;
  left: 53.5%;
}

.gif_10 {
  top: 23%;
  width: 42%;
  left: 3%;
}

.gif_11 {
  top: 18%;
  width: 91%;
  left: 5%;
}

.gif_12 {
  top: 31%;
  width: 91%;
  left: 4.8%;
}

.gif_13 {
  top: 9%;
  width: 91%;
  left: 4.8%;
}

.op_01 {
  top: 30%;
  width: 35%;
  left: 2%;
  z-index: 2;
}

.op_02 {
  top: 46%;
  width: 46%;
  left: 50%;
  z-index: 2;
}

.op_03 {
  top: 53.3%;
  width: 44.667%;
  left: 52.4%;
  z-index: 2;
}

.op_04 {
  top: 55%;
  width: 20%;
  left: 75%;
}

.op_05 {
  top: 41.5%;
  width: 20%;
  left: 75%;
}

/*-----------------------------
 common_from_HE
-------------------------------*/
.wrap,.footer{
  max-width: 750px;
  margin: 0 auto;
  background:#fff;
  }
  .footer img{
      display: inline;
      max-width: 750px;
  }
  .footer p{
      font-size: 0.9rem;
  }
  .verisign{
      width: 101px;
      height: 71px;
  }
  .mlritz{
      width: 130px;
      height: 47px;
  }
.overlaid{
position: relative;
}
.movie {
padding:20% 0 0 0;
  width:100%;
z-index: 1;
  position: absolute;
}
  .btn,.option,.gif,.pop{
      position: absolute;
  }
  .btn01{
      width: 92%;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 100%;
  }
  .btn02{
      width: 92%;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 6%;
  }
  .btn03{
      width: 92%;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 5.6%;
  }
  .gif01{
      width: 82%;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom:14%;
  }
  .gif02{
      width: 85%;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 13%;
  }
  .option01{
      width: 44%;
      left: -0.3%;
      bottom: 38.7%;
      z-index: 3;
  }
  .gif03{
      width: 82%;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 42.6%;
      overflow: hidden;
  }
  .slide_bg_01{
      position: absolute;
  }
  .slideArea01{
      padding: 436px 0 47px;
      max-height: 1419px;
      width: 97%;
      margin: 0 auto;
      background: #F0F0EB;
  }
  .slick-slide {
      position: relative;
  }
  #thumb{
      margin: 0 auto 1% 1.6%;
  }
  #slick01{
      width: 99%;
      margin: 0 auto;
  }
  #thumb .slick-slide::after{
      width: 100%;
      max-width: 103px;
      height: 13.8vw;
      max-height: 104px;
      position: absolute;
      content: "";
      background: rgba(0, 0, 0, 0.6);
      top: 0;
      border-radius: 5px;
  }
  #thumb .slick-slide{
      margin: 0 2.4% 0 0;
      cursor: pointer;
      max-width: 103px;
  }
  #thumb .slick-slide:last-child{
      margin: 0 0 0 0;
  }
  #thumb .slick-current::after{
      background: none;
  }
  .slick-prev, .slick-next {
      width: 91px;
      height: 91px;
  }
  .slick-prev::before{
      content:url("../dis_04t/before.png");
      background-size: 100%;
  }
  .slick-next::before {
      content:url("../dis_04t/after.png");
      background-size: 100%;
  }
  button.slick-prev, button.slick-next {
      z-index:2;
  }
  .slick-prev{
      left: 5.2%;
  }
  .slick-next{
      right: 5.6%;
  }
  .slick04Area .slick-prev{
      left: 1.2%;
      top: 65.9%;
  }
  .slick04Area .slick-next{
      right: 0%;
      top: 65.9%;
  }
  .slick-prev:before, .slick-next:before {
      content:"";
  }
  .slick-arrow{z-index:10;}
  .slick-prev img:hover{
      opacity: .6;
  }
  .slick-next img:hover{
      opacity: .6;
  }
  .slideArea01 .slick-dots{
      bottom: 48.6%;
  }
  .slick-dots li button:before{
      font-size: 45px;
  }
  #slick02.slick-slide,#slick03 .slick-slide{
      max-width: 10%;
  }
  .slide_bg_02{
      position: absolute;
      top:0;
  }
  .slide_bg_03{
      position: absolute;
      bottom:0;
  }     
  #slick02{
      padding: 60% 0 5% 0;
      width: 100%;
      z-index: 3;
  }
  #slick03{
      padding: 0 0 86px;
      z-index: 3;
  }
  #slick04{
      width: 90%;
      margin: 0 auto;
      margin: -98% auto 0%;
      padding-bottom: 20%;
  }
  #slick04 .slick-dots{
      z-index: 5;
      bottom: 8.3%;
  }
  .pop01{
      width: 86%;
      left: 0.7%;
      right: 0;
      margin: 0 auto;
      bottom: 6.3%;
  }
  .pop01:hover{
      opacity: .6;
  }
  .close{
      width: 11.25vw;
      max-width: 72px;
      height: 11.25vw;
      max-height: 72px;
      background: rgba(0,0,0,0.9);
      border-radius: 50%;
      position: absolute;
      right: -5%;
      top: -4%;
      display: block;
      cursor: pointer;
  }
  .close:hover{
      opacity: 0.6;
  }
  .close::before{
      position: absolute;
      content: "";
      width: 60%;
      height: 1px;
      border-bottom: solid #fff 3px;
      transform:rotate(-45deg);
      margin: auto;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
  }
  .close::after{
      position: absolute;
      content: "";
      width: 60%;
      height: 1px;
      border-bottom: solid #fff 3px;
      transform:rotate(45deg);
      margin: auto;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
  }
  .modal-window-content img{
      width: 100%;
  }
  .scroll{
      position: absolute;
      width:100%;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
      overflow-y: scroll;
      max-height: 810px;
      height: 108vw;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 9%;
      -ms-overflow-style:none;
  }
  .scroll::-webkit-scrollbar{
      display:none;
  }
  .iziModal .iziModal-wrap {
      width: 86%;
  }
  #thumb .slick-track{
      transform: translate3d(0, 0px, 0px) !important;
  }
  @media screen and (max-width: 750px){
      .footer p{
          font-size: 1.92vw;
      }
      .verisign{
          width: 13.466vw;
          height: 9.46vw;
      }
      .mlritz{
          width: 17.33vw;
          height: 6.266vw;
      }
      .slick-dots li button:before{
          font-size: 6vw;
      }
      .slick-prev, .slick-next {
          width:12.2vw; 
          height:12.2vw; 
      }
      .slideArea01{
          padding: 58vw 0 6vw;
      }
              /*------------------------------------
          #slick02{
          padding-top: 40%;
          padding-bottom: 10%;
          z-index: 3;
              / ------------------------------------*/

      }
      #slick03{
          padding: 0 0 11.47vw;
          z-index: 3;
      }
      #slick04 {
      }
      .slick-dots li{
          width: 2.7vw;
          height: 2.7vw;
      }
      .pop01:hover{
          opacity: 1;
      }
      .iziModal .iziModal-wrap {
          width: 90%;
      }
  }/*SP end*/


.acc_content {
  display: none;
}

.acc_content_last {
  margin-top: 30px;
}

@media screen and (max-width: 750px) {
  .acc_content_last {
    margin-top: 4vw;
  }
}

.acc_btn {
  width: 48%;
  left: 0;
  right: 0;
  margin: 0 auto;
  cursor: pointer;
}

.acc_btn::before {
  position: absolute;
  content: "";
  width: 26px;
  height: 3px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #fff;
  right: 5%;
}

@media screen and (max-width: 750px) {
  .acc_btn::before {
    width: 3.46667vw;
    height: 0.4vw;
  }
}

.acc_btn::after {
  position: absolute;
  content: "";
  width: 26px;
  height: 3px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #fff;
  right: 5%;
  transform: rotate(90deg);
  transition: all 0.4s;
}

@media screen and (max-width: 750px) {
  .acc_btn::after {
    width: 3.46667vw;
    height: 0.4vw;
  }
}

.acc_btn.on::after {
  transform: rotate(0);
}

.acc_btn_01 {
  bottom: 4%;
}

.acc_btn_02 {
  bottom: 4.3%;
}

.acc_btn_03 {
  bottom: 4.9%;
}

.slide-arrow {
  width: 67px;
  top: -5.1%;
  bottom: 0;
  margin: auto 0;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

@media screen and (max-width: 750px) {
  .slide-arrow {
    width: 8.93333vw;
  }
}

.slick-disabled {
  display: none !important;
}

.prev-arrow {
  left: 3%;
}

.next-arrow {
  right: 3%;
}

.qa {
  background-color: rgba(160, 56, 72, 0.2);
  padding-bottom: 6.7%;
}

.qa_list {
  width: 92.534%;
  margin: 0 auto 6%;
}

.qa_term {
  cursor: pointer;
  position: relative;
}

.qa_term::before {
  position: absolute;
  content: "";
  width: 26px;
  height: 3px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #fff;
  right: 5%;
}

@media screen and (max-width: 750px) {
  .qa_term::before {
    width: 3.46667vw;
    height: 0.4vw;
  }
}

.qa_term::after {
  position: absolute;
  content: "";
  width: 26px;
  height: 3px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #fff;
  right: 5%;
  transform: rotate(90deg);
  transition: all 0.4s;
}

@media screen and (max-width: 750px) {
  .qa_term::after {
    width: 3.46667vw;
    height: 0.4vw;
  }
}

.qa_term.on::after {
  transform: rotate(0);
}

.qa_desc {
  display: none;
}

.obj {
  opacity: 0;
  transform: translate(0, 4%);
  transition: all .4s;
  transition-delay: .3s;
}

.obj.fadeIn {
  opacity: 1;
  transform: translate(0, 0);
}

.obj_01 {
  width: 405px;
  top: 33.3%;
  left: 0.9%;
}

@media screen and (max-width: 750px) {
  .obj_01 {
    width: 54vw;
  }
}

.obj_02 {
  width: 303px;
  top: 59.9%;
  left: 59.9%;
}

@media screen and (max-width: 750px) {
  .obj_02 {
    width: 40.4vw;
  }
}

.obj_03 {
  width: 378px;
  top: 77.1%;
  left: 2.9%;
}

@media screen and (max-width: 750px) {
  .obj_03 {
    width: 50.4vw;
  }
}
/*-----------------------------
/ footer
/------------------------------*/
.links{padding: 0 10px 15px;text-align:center;font-size:12px;line-height:1.7em;}
.links a{
    font-size:12px;
    color:#0100fe;
    text-decoration:underline;
}
#footer{
    color:#0100fe;
    font-size:11px;
    display:block;
    width:100%;
    text-align:center;
    padding:5px 0 28px;
    background-color:#ebf7f7
}

/*# sourceMappingURL=base.css.map */