@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');


  body{
    background: rgb(181 182 182) ;
    background: -moz-linear-gradient(0deg, rgb(181 182 182) 0%, rgb(181 182 182) 100%);
    margin: 0 0;
    padding:auto 0;
  }

  .main-section{
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    height: 100vh;
    position: relative;
  }

  .spinner {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 99;
  }

  .spinner .sr-only {
    overflow: visible;
    clip: auto;
    position: relative;
    width: auto;
    display: block;
    height: auto;
    font-size: 16px;
  }

  .main-section {
    background-image: url(../images/home_page/写真\ merged.png);
    /* background-position: center top; */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
  }

  .main-section .img-block{
      position: relative;
  }

  .main-section .img-block img{
      max-height: 100%;
      width: 100%;
  }

  .main-section .button-group-one{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 15%;
    /* top: 22%; */
    left: 75%;
  }

  .img-btn img{
    width: 105px;
  }
  .btn-margin{
    /* margin-bottom: 75%; */
    margin-bottom: 98%;
  }

  .main-section .button-group-two{
    position: absolute;
    bottom: 6%;
    width: 100%;
  }

  .main-section .button-group-two .b-btn{
      color: #fff;
      background-color:rgb(18, 16, 16, 0.5);
      border: none;
      letter-spacing: 5px;
      font-size: 16px;
      padding: 5px;
      width: 100%;
  }
  .main-section .button-group-two .b-btn a{
    color:#fff;
    text-decoration: none;
  }
  .main-section .button-group-three{
    position: absolute;
    bottom: 20px;
    width: 100%;
  }
  .main-section .button-group-three .b-btn{
      color: #fff;
      background-color:transparent;
      border: none;
      letter-spacing: 5px;
      font-size: 16px;
      padding: 3px;
      width: 100%;
  }

  /* Second page */
  .second-section{
    background-color: #b5b6b6;
  }


  .second-page{
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    /* min-height: 100vh; */
    position: relative;
  }
  .second-page .img-block{
    position: relative;
  }

.second-section .second-page .button-group-one{
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: absolute;
    top: 14.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.second-page .button-group-one img{
  width: 100px;
  /* height: 115px; */
}

/* Third page */
.third-section{
  background-color: #3b3b3b;
}
.third-section .third-page{
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    /* min-height: 100vh; */
    position: relative;
}

.third-page .button-group-one img {
  width: 100px
}

.third-section .third-page .button-group-one{
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  /* top: 14%; */
  top: 14.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.third-page .button-group-one .b-btn{
color: #fff;
background-color: rgb(139, 39, 48, 0.8);
border-radius: 4px;
border: 1px solid rgb(139, 39, 48, 1);
border: none;
letter-spacing: 5px;
font-size: 16px;
min-width: 200px;
padding: 12px;
margin: 10px;
}
@media(max-width:320px){
.third-page .button-group-one .b-btn{
  min-width: 148px;
  padding: 5px;
  margin: 0 5px;
  letter-spacing: 2px;
}
}
.overlay-slider{
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  height: 100vh;
  position: absolute; 
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display:none;
  z-index: 99999;
  /* background: url(../images/ΦâîµÖ».png);
  background-position: center;
  background-size: cover; */
  background-color: #313131;
}

 .overlay-slider{
  overflow: auto;
}

.carousel-inner{
  overflow: unset;
  display: flex;
  align-items: center;
  height: 100vh;
}

.carousel-item{
  height: auto !important;
  max-height: 100%;
  overflow: auto;
  padding: 50px 0;
}
.overlay{
    background-color: rgb(33 33 33 / 85%);
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    height: 100vh;
    position: absolute;
}

.show-popup{
  display: block;
}


.carousel-item{
  height: 100vh;
 
}
.scroll-inner-content .button-group-one{
  position: absolute;
  top: 8%;
  left: 5%;
}
.scroll-inner-content .button-group-two{
  position: absolute;
  top: 10%;
  right: 1px;
}
.scroll-inner-content .button-group-three{
  position: absolute;
  top: 30%;
  left: 15%;
}
.scroll-inner-content .button-group-four{
  position: absolute;
  top: 40%;
  right: 72px;
}
.scroll-inner-content .button-group-five{
  position: absolute;
  top: 55%;
  left: 1px;
}
.scroll-inner-content .button-group-six {
  position: absolute;
  top: 57%;
  right: 1px;
}

.scroll-inner-content .r-btn {
  border: 1px solid #fff;
  width: 105px;
  height: 125px;
  background-color: rgb(184, 178, 154, 0.349);
  color: #fff;
  letter-spacing: 3px;
  font-size: 10px;
}

.bottom-btn-group .btn-one{
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  left: 50%;
}

.bottom-btn-group .btn-one .b-btn{
  width: 195px;
  margin: 0 10px;
  color: #fff;
  background-color: rgb(139, 39, 48, 0.8);
  border-radius: 4px;
  border: 1px solid rgb(139, 39, 48, 1);
  border: none;
  letter-spacing: 5px;
  font-size: 16px;
  padding: 5px;
}

 .r-btn-2 {
    width: 140px !important;
    height: 144px !important;
  }
  .r-btn-3 {
    width: 101px !important;
    height: 118px !important;
  }
  .r-btn-4 {
    width: 162px !important;
    height: 182px !important;
  } 

.close{
  position: absolute;
  right: 5%;
  z-index: 99999;
  top: 8%;
}

.close img{
  width: 40%;
}

/* Detail Page */

.overlay-slider-detail{
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  height: 100vh;
  position: absolute; 
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 999;
  background-color: #494a4a;
  overflow: auto;
}

/* .detail-img-block{
  width: 100%;
  height: 100%;
  background-color: #494a4a;
  display: flex;
  align-items: center;
}

.detail-img-block-2{
  max-height: 100%;
  position: relative;
  margin: 50px 0;
  overflow: auto;
} */

.detail-img-block-2{
  max-height: 100%;
  position: relative;
  margin: 50px 0;
  overflow: auto;
}

.show-detail-popup {
  display: block;
}

#fullImage{
  height: 100%;
}

.pointThis{
  cursor: pointer;
}


.btn-detail {
  position: absolute;
  top: 13%;
  left: 0;
  display: flex;
  color: white;
  height: 78%;
  flex-direction: column;
  padding: 20px;
  /* padding-top: 95px; */
  width: 100%;
}

.btn-detail h4{
  border-bottom: 2px solid  rgb(139, 39, 48, 0.8);
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
  z-index: 99;
  font-family: 'Noto Sans Japanese'; 
}

.btn-detail p{
  font-size: 18px;
  z-index: 99;
  text-align: justify;
  overflow: hidden;
  overflow-y: auto;
  font-family: 'Noto Sans Japanese';

}
.btn-detail p span{
  font-size: 20px !important;
}
.overlay__detail{
  background-color: rgb(0 0 0/ 50%);
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  height: 100vh;
  position: absolute;
}
/* .overlay__detail{
  top: 0;
  left: 0;
} */
.top__slide__btn img{
  position: absolute;
  width: 80px;
  top: 8%;
  left: 40%;
  z-index: 99;
}

.top__slide__btn_2 img{
  position: absolute;
  width: 80%;
  top: 4%;
  left: 50%;
  z-index: 99;
  display: none;
  transform: translateX(-50%);
}
@media(min-width:500px){
  .top__slide__btn img {
    position: absolute;
    width: 195px;
    top: 8%;
    left: 35% !important;
    z-index: 99;
}
}

.overlay-slider .img__div img{
  display: none;
}

.back__button {
  position: absolute;
  left: 37px;
  bottom: -20px;
  width: 100%;
  text-align: center;
  z-index: 999999;
  display: block;
  transform: translate(-50%, -50%);
}

.back__button img{
  /* width: 63px ; */
  width: 50px ;
}

/* Media Query */
@media (max-width:375px){
  .scroll-inner-content .button-group-one{
    position: absolute;
    top: 8%;
    left: 5%;
  }
  .scroll-inner-content .button-group-two{
    position: absolute;
    top: 15%;
    right: 1px;
  }
  .scroll-inner-content .button-group-three{
    position: absolute;
    top: 30%;
    left: 15%;
  }
  .scroll-inner-content .button-group-four{
    position: absolute;
    top: 40%;
    right: 72px;
  }
  .scroll-inner-content .button-group-five{
    position: absolute;
    top: 55%;
    left: 1px;
  }
  
}

/* IPhone 12 */
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { 
  .overlay-slider .img__div img{
    display: block !important;
    position: absolute !important;
    width: 390px !important;
    height: 844px !important;
  }
  .scroll-inner-content .button-group-one{
    position: absolute !important;
    top: 8% !important;
    left: 11%!important;
  }
  .scroll-inner-content .button-group-two{
    position: absolute !important;
    top: 8% !important;
    right: 1px !important;
  }
  .scroll-inner-content .button-group-three{
    position: absolute !important;
    top: 29% !important;
    left: 25% !important;
  }
  .scroll-inner-content .button-group-four{
    position: absolute !important;
    top: 36% !important;
    right: 41px !important;
  }
  .scroll-inner-content .button-group-five{
    position: absolute !important;
    top: 50% !important;
    left: 1px !important;
  }
  .scroll-inner-content .button-group-six {
    position: absolute;
    top: 57%;
    right: 1px;
}
  .scroll-inner-content .r-btn {
    width: 104px;
    height: 117px;
}
  .base-button {
    bottom: 17px !important;
}

.scroll-inner-content .btn-grp-two {
  position: absolute !important;
  top: 17% !important;
  right: 8% !important;
}
.scroll-inner-content .btn-grp-three {
  position: absolute !important;
  top: 29% !important;
  left: 25% !important;
}
.scroll-inner-content .btn-grp-four{
  position: absolute !important;
  /* top: 34% !important; */
  top: 36% !important;
  right: 1px !important;
}
.scroll-inner-content .btn-grp-five {
  position: absolute !important;
  top: 50% !important;
  left: 12% !important;
}

}

/* Other Devices */
@media(min-width:375px) and (max-width:425px){
  .scroll-inner-content .button-group-one{
    position: absolute;
    top: 8%;
    left: 5%;
  }
  .scroll-inner-content .button-group-two{
    position: absolute;
    top: 15%;
    right: 1px;
  }
  .scroll-inner-content .button-group-three{
    position: absolute;
    top: 29%;
    left: 15%;
  }
  .scroll-inner-content .button-group-four{
    position: absolute;
    top: 36%;
  right: 35px;
  }
  .scroll-inner-content .button-group-five{
    position: absolute;
    /* top: 45%; */
    top: 51%;
    left: 1px;
  }
  .scroll-inner-content .button-group-six{
    position: absolute;
    top: 52%;
    right: 1px;
  }
  .scroll-inner-content .btn-grp-two{
    position: absolute;
    top: 17% !important;
    /* right: 12% !important; */
    right: 14%;
  }
  .scroll-inner-content .btn-grp-three{
    position: absolute;
    top: 29% !important;
    /* left: 17% !important; */
    left: 23% !important;
  }
  .scroll-inner-content .btn-grp-four{
    position: absolute;
    top: 36% !important;
    right: 1px !important;
  }
  .scroll-inner-content .btn-grp-five{
    position: absolute;
    top: 50% !important;
    /* left: 22% !important; */
    left: 5% !important;
  }
  .scroll-inner-content .btn-grp-six {
    position: absolute !important;
    top: 54% !important;
    right: 1px !important;
  }
}

@media(min-width:425px) and (max-width:575px){
  .scroll-inner-content .button-group-one{
    position: absolute;
    top: 8%;
    left: 5%;
  }
  .scroll-inner-content .button-group-two{
    position: absolute;
    top: 15%;
    right: 1px;
  }
  .scroll-inner-content .button-group-three{
    position: absolute;
    top: 29%;
    left: 27%;
  }
  .scroll-inner-content .button-group-four{
    position: absolute;
    top: 36%;
    right: 44px;
  }
  .scroll-inner-content .button-group-five{
    position: absolute;
    top: 50%;
    left: 1px;
  }
  .scroll-inner-content .button-group-six{
    position: absolute;
    top: 51%;
    right: 1px;
  }
  .scroll-inner-content .btn-grp-two{
    position: absolute;
    top: 17% !important;
    right: 12% !important;
  }
  .scroll-inner-content .btn-grp-three{
    position: absolute;
    top: 29% !important;
    left: 24% !important;
  }
  .scroll-inner-content .btn-grp-four{
    position: absolute;
    top: 34% !important;
    right: 1px !important;
  }
  .scroll-inner-content .btn-grp-five{
    position: absolute;
    top: 50% !important;
    left: 22% !important;
  }
}

@media(min-width:575px) and (max-width:768px){
  .scroll-inner-content .button-group-one{
    position: absolute;
    top: 7%;
    left: 5%;
  }
  .scroll-inner-content .button-group-two{
    position: absolute;
    top: 15%;
    right: 1px;
  }
  .scroll-inner-content .button-group-three{
    position: absolute;
    top: 33%;
    left: 10%;
  }
  .scroll-inner-content .button-group-four{
    position: absolute;
    top: 41%;
    right: 72px;
  }
  .scroll-inner-content .button-group-five{
    position: absolute;
    top: 54%;
    left: 1px;
  }
  .scroll-inner-content .button-group-six{
    position: absolute;
    top: 56%;
    right: 1px;
  }
  .scroll-inner-content .btn-grp-two{
    position: absolute;
    top: 17% !important;
    right: 12% !important;
  }
  .scroll-inner-content .btn-grp-three{
    position: absolute;
    top: 29% !important;
    left: 24% !important;
  }
  .scroll-inner-content .btn-grp-four{
    position: absolute;
    top: 34% !important;
    right: 1px !important;
  }
  .scroll-inner-content .btn-grp-five{
    position: absolute;
    top: 50% !important;
    left: 22% !important;
  }
  
}

/* Tab view*/
@media(min-width:768px) and (max-width:991px){
  .scroll-inner-content .button-group-one{
    position: absolute;
    top: 3%;
    left: 5%;
  }
  .scroll-inner-content .button-group-two{
    position: absolute;
    top: 12%;
    right: 1px;
  }
  .scroll-inner-content .button-group-three{
    position: absolute;
    top: 25%;
    left: 12%;
  }
  .scroll-inner-content .button-group-four{
    position: absolute;
    top: 40%;
    right: 72px;
  }
  .scroll-inner-content .button-group-five{
    position: absolute;
    top: 50%;
    left: 1px;
  }
  .scroll-inner-content .button-group-six{
    position: absolute;
    top: 57%;
    right: 1px;
  }
  .r-btn-1{
    width: 187px !important;
    height: 202px !important;
  }
  .r-btn-2{
    width: 193px !important;
    height: 200px !important;
  }
  .r-btn-3{
    width: 118px !important;
    height: 167px !important;
  }
  .r-btn-4{
    width: 210px !important;
    height: 245px !important;
  }
  .r-btn-5{
    width: 118px !important;
    height: 167px !important;
  }
  .scroll-inner-content .r-btn {
    font-size: 14px !important;
  } 
  .scroll-inner-content .btn-grp-two{
    position: absolute;
    top: 12% !important;
    right: 12% !important;
  }
  .scroll-inner-content .btn-grp-three{
    position: absolute;
    top: 29% !important;
    left: 24% !important;
  }
  .scroll-inner-content .btn-grp-four{
    position: absolute;
    top: 34% !important;
    right: 1px !important;
  }
  .scroll-inner-content .btn-grp-five{
    position: absolute;
    top: 50% !important;
    left: 22% !important;
  }
  
}


/* User Guide CSS */
.overlay-slider-detail-new{
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  height: 100vh;
  position: absolute; 
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  display: none;
  /* background: url(../images/ΦâîµÖ».png);
  background-position: center;
  background-size: cover; */
  align-items: center;
  background-color:#3e3f3f;
}
.btn-detail-new{
  display: flex;
  color: white;
  /* height: 100%; */
  height:85%;
  flex-direction: column;
  padding: 20px;
  /* padding-top: 95px; */
  padding-top: 93px;
}
.btn-detail-new h4{
  border-bottom: 2px solid  rgb(139, 39, 48, 0.8);
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
  z-index: 99;
}
.btn-detail-new .guide-contents{
  font-size: 14px;
  z-index: 99;
  overflow: hidden;
  overflow-y: auto;
}

.close{
  background-color: transparent !important;
  border: none !important;
}
.pr-10{
  padding-right: 10px;
}
.padding-bottom{
  padding-bottom: 10px;
}

/* Indezx page */
.spalsh-section{
  display: flex;
  align-items: center;
  height: 100vh;
}

.spalsh-section .img-block img{
  width: 100%;
}

.loading-text-cameraPage h4{
  text-align: center;
  background-color: #3b3b3b;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  padding: 10px 0;
}

.loading-text-mainPage{
  width: 100%;
    position: absolute;
    top: 3%;
}
.loading-text-mainPage h4{
  text-align: center;
  background-color: #3b3b3b;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  padding: 10px 0;
}

.loading-text-cameraPage {
  display: none;
}
  

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* toggle */
.toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 78px;
  height: 48px;
  border-radius: 50px;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle span {
  position: absolute;
  top: 18px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.toggle span:nth-of-type(1) {
  right: 5px;
  color: rgba(0, 0, 0, 0.175);
}
.toggle span:nth-of-type(2) {
  left: 7px;
  color: #fff;
  letter-spacing: 2px;
}
.toggle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  display: block;
  background: #e9e9eb;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.toggle:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.toggle.checked:before {
  background: #35c759;
}
.toggle.checked:after {
  left: 33px;
  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
}