@charset "UTF-8";
/* CSS Document */

html {
	scroll-behavior: smooth;
}

.header {
   margin-bottom: 0!important;
}

.footer-info {
   display: none!important;
}

.pane-footer {
   display: none!important;
}

* {box-sizing: border-box;}
body { margin: 0;}

.main_container {
   position: relative;
}

main {
   display: flex;
    background-color: #111;
    text-align: center;
    padding: 0 0 1% 0;
}

.bgc {
   
    background-color: #111;
    max-width: 700px;
    margin: 0 auto 0 auto;
    /* filter: drop-shadow(0px 0px 10px rgba(0,0,0,60%)); */
}

.con {
   margin:0 0 -1% 0;
   padding: 0;
}

  /* -------- FV -------- */

.fv {
    position:relative;
}

.fv_img1 {
    position: absolute;
    top:45.7%;
    left: 0;
}

.fv_img2 {
   position: absolute;
   top:83.5%;
   left: 0;
}

/* -------- offer -------- */ 

.offer {
   position:relative;
}

.offer_img1 {
   position: absolute;
   top:17.4%;
   left: 0;
}

.offer_img2 {
   position: absolute;
   top:24.9%;
   left: 0;
}

.offer_img3 {
   position: absolute;
   top:31%;
   left: 0;
}

.offer_img4 {
   position: absolute;
   top:36.9%;
   left: 0;
}

.offer_img5 {
   position: absolute;
   top:75.7%;
   left: 0;
}

.offer_btn {
   position: absolute;
   top:88.5%;
   left: 0;
}

/* -------- offer2 -------- */ 

.offer2 {
   position:relative;
}

.offer_btn2 {
   position: absolute;
   top:77.5%;
   left: 0;
}

.heartbeat {
	-webkit-animation: heartbeat 3s ease-in-out infinite both;
	        animation: heartbeat 3s ease-in-out infinite both;
}
/* 
 @keyframes heartbeat {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-transform-origin: center center;
             transform-origin: center center;
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   10% {
     -webkit-transform: scale(0.95);
             transform: scale(0.95);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   17% {
     -webkit-transform: scale(0.98);
             transform: scale(0.98);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   33% {
     -webkit-transform: scale(0.93);
             transform: scale(0.93);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   45% {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
 } */


 @keyframes heartbeat {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-transform-origin: center center;
             transform-origin: center center;
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   10% {
     -webkit-transform: scale(0.95);
             transform: scale(0.95);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   20% {
     -webkit-transform: scale(0.98);
             transform: scale(0.98);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   30% {
     -webkit-transform: scale(0.93);
             transform: scale(0.93);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   45% {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
 }


 /* -------- con1 -------- */

 .con1 {
    position: relative;
 }

 .con1_img1 {
    position: absolute;
    top:1.5%;
    left: 0;
 } 

 .con1_img2 {
    position: absolute;
    top:29.5%;
    left: 0;
 }

 .con1_img3 {
   position: absolute;
   top:49.7%;
   left: 0;
}

.con1_img4 {
   position: absolute;
   top:59.3%;
   left: 0;
}

.con1_img5 {
   position: absolute;
   top:69.7%;
   left: 0;
}

/* .con1_img6 {
   position: absolute;
   top:82.3%;
   left: 0;
} */

.con1_img7 {
   position: absolute;
   top:92%;
   left: 0;
}

 /* -------- con2 -------- */

 .con2 {
   position: relative;
}

.con2_bg {
   margin-bottom: 0;
}

.con2_img1 {
   position: absolute;
   top:13.4%;
   left: 0;
} 

.con2_img2 {
   position: absolute;
   top:54.6%;
   left: 0;
}

.con2_img3 {
   position: absolute;
   top:81.2%;
   left: 0;
}

 /* -------- con3 -------- */
 
 .con3 {
   position: relative;
}

.con3_bg {
   margin-bottom: -1%;
}

.con3_img1 {
   position: absolute;
   top:16.1%;
   left: 0;
} 

.con3_img2 {
   position: absolute;
   top:40.2%;
   left: 0;
} 

.con3_img3 {
   position: absolute;
   top: 67.4%;
   left: 0;
} 

 /* -------- con4 -------- */ 

 .con4 {
   position: relative;
}

.con4_img1 {
   position: absolute;
   top:9.2%;
   left: 0;
} 

.con4_img2 {
   position: absolute;
   top:18.9%;
   left: 0;
} 

.con4_img3 {
   position: absolute;
   top: 29.8%;
   left: 0;
} 

.con4_img4 {
   position: absolute;
   top:44.4%;
   left: 0;
} 

.con4_img5 {
   position: absolute;
   top:53.7%;
   left: 0;
} 

.con4_img6 {
   position: absolute;
   top:63.6%;
   left: 0;
} 

.con4_img7 {
   position: absolute;
   top:77.8%;
   left: 0;
} 

/* -------- con5 -------- */

.con5 {
   position: relative;
}

.con5_img1 {
   position: absolute;
   top:5%;
   left: 0;
} 

.con5_img2 {
   position: absolute;
   top:72.8%;
   left: 0;
} 


/* -------- con6 -------- */

.con6 {
   position: relative;
}

.con6_img1 {
   position: absolute;
   top:61.1%;
   left: 0;
} 

.con6_img2 {
   position: absolute;
   top: 71.8%;
   left: 0;
} 

.con6_img3 {
   position: absolute;
   top:82.6%;
   left: 0;
} 

/* -------- con7 -------- */

.con7 {
   position: relative;
}

.con7_img1 {
   position: absolute;
   top:28%;
   left: 0;
} 

.con7_img2 {
   position: absolute;
   top:36%;
   left: 0;
} 

.con7_img3 {
   position: absolute;
   top:44.1%;
   left: 0;
} 

.con7_img4 {
   position: absolute;
   top:62%;
   left: 0;
}

.con7_img5 {
   position: absolute;
   top:79%;
   left: 0;
} 

/* -------- con8 -------- */

.con8 {
   position: relative;
   background-color: #111;
}

.con8_img1 {
   width: 48%;
   position: absolute;
   top:28%;
   left: 0;
   transition: all 0.5s linear;
} 

.con8_img1:hover {
   opacity: 1;
   transform: scale(1.06);
} 

.con8_img2 {
   width: 48%;
   position: absolute;
   top:28%;
   right: 0;
   transition: all 0.5s linear;
} 

.con8_img2:hover {
   opacity: 1;
   transform: scale(1.06);
} 


/* -------- Q&A -------- */


   /* .con8 {
      position: relative;
      margin-top: -1%;
      background: linear-gradient(#000,#000, #0E518E);
   }

   .con8_title {
   margin: 0 0 8% 0;
   }

   .FAQ_wrapper {
   padding-bottom: 7%;
   }

   summary {
   list-style: none;
   }

   details { margin:5px 0 10px; }
   details[open] > summary::-webkit-details-marker { transform:rotate3d(0, 0, 1, 180deg); display: none;}
   details[open] > summary ~ * { animation:reveal 0.5s;}

   @keyframes reveal {
      from { opacity:0; transform:translate3d(0, -30px, 0); }
      to { opacity:1; transform:translate3d(0, 0, 0); }
   }

   .FAQ {
   margin-bottom: 4%;
   }

   .answer {
   margin-top: -1%;
   } */

/* -------- サイドメニュー -------- */   

.sidemenu {
   display: block;
   position: fixed;
   left: 0;
   right: 0;
   margin: auto;
}

.side_left {
   position: absolute;
   align-items: baseline;
   display: flex;
   height: 100vh;
   justify-content: center;
   width: calc(50vw - 300px);
   text-align: center;
   left: 30px;
   top: 53px;
}


.side_right {
   position: absolute;
   align-items: baseline;
   display: flex;
   height: 100vh;
   justify-content: center;
   width: calc(45vw - 300px);
   right: 15px;
   top: 90px;
}

.menu_list{
   list-style: none;
   font-family: "Libre Caslon Display", serif;
   font-weight: 400;
   font-style: normal;
   font-size: 30px;
   margin-top: 13px;
   letter-spacing: 0.1em;
}

.menu_list a {
   color: #fff;
   transition: color .3s ease;
}

.menu_list a:hover {
   color: #c4bcb3;
}

.side_right a{
   text-decoration: none;
}

@media (min-width:500px) and (max-width:1350px) {

   .side_left {
      display: none;
   }

   .side_right {
      display: none;
   }

   .footer-info {
      display: block!important;
   }
   
   .pane-footer {
      display: block!important;
   }
}


/* ---------------- SP ---------------- */

   
@media (max-width: 700px) {

   .footer-info {
      display: block!important;
   }
   
   .pane-footer {
      display: block!important;
   }

   .sidemenu {
      display: none;
   }

   .fv, .con1, .con2, .con3, .con4,.con5,.con6,.con8,.con9,.offer {
      margin-top: -2.5%;
   }

   .bgc {
      width: 100%;
      max-width: 750px;
      margin:0 auto;
      filter: unset!important;
   }

   main{
      padding: 0!important;
   }

summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
      display: none;
  }

summary {
      list-style-type: none; /* 그 외의 브라우저용 사용자 정의 스타일 */
  }
   
}