﻿header nav ul li:last-of-type a{
     padding: 4px 8px;
         background: #1EA5D8;
         color: #fff;
         border-radius: 4px;
       }


.scroll-border {
    position: fixed;
       z-index: 3;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px 0;
    box-sizing: border-box;
    transition: transform 0.6s ease;
    transform: translateY(100%);
    display: flex;
    justify-content: center;

  }
  .scroll-border.show {
    transform: translateY(0);
  }
  .scroll-border .btn{
         width: 400px;
         padding: 10px 0;
         margin-top: 0;
         color: #fff;
         border: none;
         background-color: #E85109;
  }


header {
     border: none;
       border-bottom: none;
}


main img{
       width: 100%;
}

footer{
       padding-bottom: 74px;
}
/* index
---------------------------------------- */
/* General styles */
#tenken {
     text-align: left;
}
/* Title styles */
#tenken #title {
     background-position: center;
     height: 320px;
     background: #1EA5D8;
     position: relative;
     overflow: hidden;
     @media (max-width: 768px) {
          padding: 40px 0;
   }

}
#tenken #title .inner{
     justify-content: center;
     display: flex;
     z-index: 1;
     position: relative;
     @media (max-width: 768px) {
          display: block;
   }

}



#tenken #title h1{
     position: relative;
     color: #fff;
     align-self: center;
     font-size: 32px;
     @media (max-width: 768px) {
          font-size: 24px;
          }
}

#tenken #title .logo{
     max-width: 330px;
     width: 40%;
     align-self: center;
     @media (max-width: 768px) {
     margin: 0 auto;
     width: 200px;
     }

}
#tenken #title .logo img{

}
#tenken #title figure:nth-of-type(2){
     max-width: 282px;
     width: 20%;
     align-self: center;
     margin: 0 50px 0;
     @media (max-width: 768px) {
          width: 180px;
          margin: 20px auto 30px;
          }
}
#tenken #title figure:nth-of-type(2) img{

}

#tenken #title::before{
     z-index: 0;
     content: '';
     position: absolute;
     left: -1070px;
     top: 120px;
     border-radius: 50% 50% / 50% 70%;
     width: 4000px;
     height: 4000px;
     content: "";
     background-image: radial-gradient(circle closest-side, #1EA5D8 94%, #1EA5D8 86%, #67d8e3 109%, #1EA5D8 112%);
     animation-iteration-count: infinite;
     animation-duration: 20s;
     animation-timing-function: ease-in-out;
     animation-name: windmove;
     filter: blur(13px);
     opacity: 0.5;
}
@keyframes windmove{
     0% {
		transform: rotate(0);
          filter: blur(8px);
          skew(1deg)
	}
	50% {
		transform: rotate(360deg);
          filter: blur(16px);
          skew(100deg)
	}
     100% {
		transform: rotate(360deg);
          filter: blur(8px);
          skew(1deg)
	}

}











/* Section 1 styles */
#tenken #sec1 {
     max-width: 1118px;
     display: flex;
     height: auto;
}
/* Section 1 - Recommendation section */
#tenken #sec1 .osusume {
     width: 100%;
     margin-bottom: 0px;
     text-align: center;
}
@media (max-width: 1120px) {
     #tenken #sec1 .osusume .pc {
          display: none;
     }
}
/* Section 1 - Heading styles */
#tenken #sec1 h3 {
     font-size: 22px;
     margin-bottom: 24px;
}
/* Section 1 - Service section */
#tenken #sec1 .survice {
     max-height: 500px;
     margin-bottom: 30px;
}
#tenken #sec1 .top {
     margin-bottom: 10px;
}
#tenken #sec1 .bottom {
     margin-bottom: 10px;
}#tenken #sec1 .red {
     color: #DD0B0B;
     font-size: 16px;
     line-height: 24px;
     font-weight: 600;
}
#tenken #sec1 p {
     font-size: 18px;
     line-height: 30px;
}


#tenken #sec1 p:last-of-type{
     font-size: 16px;
     color: #c00;
     margin: 10px 0 0 0;
}



#tenken #sec1 .hosoku {
     font-size: 14px;
}
/* Section 1 - Links */
#tenken #sec1 a {
     float: left;
     color: #fff;
     border-color: #E85109;
     line-height: 2em;
     background-color: #E85109;
}



@media (max-width: 1120px) {
     #tenken #sec1 .osusume .pc {
          display: none;
     }
}
/* Responsive styles for smaller screens */
@media (max-width: 768px) {
       main>.content{
	width:calc(100% - 50px);
	max-width:1118px;
	padding:30px 0 20px 0;
	margin: 0 auto;
}
     #tenken #sec1 .osusume {
          width: 100%;
          padding: 0;
          background-image: none;
            margin-bottom: 20px;
     }
     #tenken #sec1 h3 {
          font-size: 18px;
          text-align: left;
          margin-bottom: 15px;
          line-height: 1.4;
     }
     #tenken #sec1 .survice {
          max-height: 500px;
          margin-bottom: 30px;
     }
     #tenken #sec1 .top {
          margin-bottom: 7px;
     }
     #tenken #sec1 p {
          font-size: 14px!important;
          line-height: 1.6;
          text-align: justify;
          letter-spacing: .05rem;
     }
     #tenken #sec1 .hosoku {
          font-size: 12px;
          margin: 8px 0 30px;
     }
     #tenken #sec1 a {
          float: none;
          margin: auto;
          text-align: center;
          color: #0B57A0;
          border-color: #0B57A0;
          line-height: 2em;
     }
}



/* General styles */
#tenken {
     text-align: left;
}
/* Section 2 styles */
#tenken #sec2 {
     max-width: 1118px;
     margin-bottom: 60px;
}
#tenken #sec2 ul{

}

.teiki_block #sec2 ul li{
margin: 0 0 30px 0;

@media (max-width: 768px){
     padding: 0 0 20px 0;
     overflow-x: scroll;
}

}

.teiki_block #sec2 ul li span{
     font-size: 18px;
     text-align: left;
     display: block;
     margin: 0 0 16px 0;
}
.teiki_block #sec2 ul li:first-child span{
     font-size: 18px;
     text-align: left;
     display: block;
     margin: 0 0 -16px 0;
     @media (max-width: 768px){
          font-size: 16px;
     }
     
}

.teiki_block #sec2 ul li img{
width: 100%;
@media (max-width: 768px){
     width: 800px;
}
     }


#tenken .teiki_block #sec2 p{
     margin: 0 0 0px 0;
     text-align: left;
     font-size: 18px;
     line-height: 1.7;
     @media (max-width: 768px){
          font-size: 16px;
     }
     }


     #tenken .spot_block #sec2 p{
          text-align: left;
          line-height: 1.7;
          word-break: break-all;
          font-size: 16px;
    margin: 0px 0 10px;
          }
     

          .spot_block #sec2 h3{
               font-size: 18px;
               font-weight: bold;
               text-align: left;
               margin: 0 0 10px;
               color: #c00;
               }
          
          

     .spot_block #sec2 li p:nth-of-type(1){
          font-size: 18px;
     

          }
          .spot_block #sec2 li p:nth-of-type(2){
               font-size: 16px;
               word-wrap: break-word;
               margin: 0 0 8px 0;
               }

               .spot_block #sec2 li p:nth-of-type(3){
                    font-size: 16px;
               
                    }
                    .spot_block #sec2 li p:nth-of-type(4){
                         font-size: 13px;
                    
                         }
               
     

                         .spot_block #sec2 ul{
                              display: flex;
                              justify-content: center;
                              @media(max-width:768px){
                                   flex-wrap: wrap;
                    
                              }
                    
                              }
                    
                         .spot_block #sec2 ul li:nth-of-type(1){
                              margin: 0 4% 30px 0;
                              width: 19%;
                              max-width: 200px;
                              @media(max-width:768px){
                                   width: 60%;
                              }
                              }
                         .spot_block #sec2 ul li:nth-of-type(2){
                              margin: 0 0 30px 0;
                              width: 54%;
                              max-width: 602px;
                              @media(max-width:768px){
                                   width: 100%;
                              }
                              }
                    




ul.tab_switch{
     max-width: 1118px;
     width: 100%;
     display: flex;
     margin: 0 0 40px 0;
}

.teiki_block, .spot_block {
     display: none;

}

li.teiki, li.spot {
     cursor: pointer;
     display: inline-block;
     color: #1EA5D8;
     font-size: 20px;
     font-weight: bold;
     border: 1px #1EA5D8 solid;
     border-top: 4px #1EA5D8 solid;
     border-bottom: none;
     padding: 12px 4px;
     max-width: 559px;
     width: 50%;
     transition: 0.3s ease-in-out;
     @media (max-width: 768px) {
     font-size: 16px;

     }

}

li.teiki:hover, li.spot:hover{

}

li.inactive {
     color: #888;
     border: 1px #BBB solid;
     border-top: 4px #BBB solid;
   }





#tenken #sec3 {
     max-width: 1118px;
     display: block;
     margin: 48px auto 36px;

}
#tenken #sec3 .title {
     margin-bottom: 56px;
     font-size: 24px;
}
#tenken #sec3 dl {
     display: flex;
         flex-wrap: wrap;
         max-width: 870px;
         width: 100%;
         margin: 0 auto;
         text-align: left;
}

.spot_block #sec3 dl {
     border-bottom: 1px #b3b3b3 solid;
     padding: 0 0 20px 0;
}
.spot_block #sec3 {
     margin: 48px auto 36px;
 }



#tenken #sec3 dl dt{
     color: #1EA5D8;
     font-size: 28px;
     width: 40%;
     margin: 0 0 28px 0;
     font-weight: 500;
     @media (max-width: 768px) {
          font-size: 20px;
          width: 100%;
          margin: 0 0 8px 0;
     }

     }

#tenken #sec3 dl dd{
     font-size: 24px;
     width: 59%;
     @media (max-width: 768px) {
          font-size: 16px;
          width: 100%;
          margin: 0 0 20px 0;
     }

     }




@media (max-width: 1000px) {
     #tenken #sec3 .title {
          font-size: 20px;
            
     }
     #tenken #sec3 h1 {
          font-size: 20px;
            line-height: 1.4;
     }
       
#tenken #sec3 .service_kinds {
       justify-content:flex-start;
       column-gap: 30px;
     font-size: 28px;
}#tenken #sec3 .service_kinds .text{
       color: #000;
     font-size: 16px;
}#tenken #sec3 .service_kinds div p{
       line-height: 50px;
}#tenken #sec3 .service_kinds div{
       line-height: normal;
       margin: 0;
}
       #tenken #sec3 .service_kinds .text span{
     font-size: 11px;
}
#tenken #sec3 .service_kinds p:first-of-type, #tenken #sec3 .service_kinds p:nth-last-of-type(2) {
     margin-bottom: 0px;
}


.teikikoukan{
       max-width: 930px;
       width: 100%;
       margin: auto;
       border: 1px solid #333;
       border-radius: 10px;
             margin-bottom: 50px;
}.teikikoukan .bold{
       border-bottom: 1px solid #333;
       font-size: 24px;
       padding: 15px 0;
}
.koukan{
       padding: 30px 55px;

       
}.koukan>div{
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       column-gap:44px;
       margin-bottom: 30px;
}.koukan div p{
       
}.koukan div img{
       max-width:320px;
       width: 100%;
       margin-top: 16px;
}.koukan>div p{
       text-align: start;
}

.check{
       max-width: 930px;
       width: 100%;
       margin: auto;
       border: 1px solid #333;
       border-radius: 10px;
             margin-bottom: 50px;
}

.check .bold{
       border-bottom: 1px solid #333;
       font-size: 24px;
       padding: 15px 0;
}.check img{
       padding: 45px;
}
       
}
@media (max-width: 768px) {
       .koukan>div{
       display: block;
       justify-content: space-between;
       align-content: center;
       column-gap:44px;
       margin-bottom: 30px;
}
       .koukan div img{
              max-width: 100%;
       margin: auto auto 20px auto;
}
.koukan>div p{
       font-size: 14px;
       text-align: justify;
}
      #tenken #sec3 .service_kinds{
        margin-bottom: 10px;
}#tenken #sec3 .service_kinds div p{
        line-height: normal;
             margin-top: 0;
             margin-bottom: 16px;
}#tenken #sec3 .service_kinds .text .sp{
      margin-bottom: 0;
     font-size: 32px;
       line-height: 50px;
              color: #0B57A0;
}
        #tenken #sec3 .title {
          font-size: 16px;
     }

     
}
@media (max-width: 500px) {
     #tenken #sec3 .title {
          margin-bottom: 20px;
     }
       
     #tenken #sec3 .hosoku {
     font-size: 11px;
     margin-bottom: 40px;
}
       
     #tenken #sec3 .service_kinds {
          font-size: 20px;
     }
        #tenken #sec3 .service_kinds .text{
     font-size: 16px;
}#tenken #sec3 .service_kinds .text .sp{
     font-size: 30px;
}
       .teikikoukan{
             margin-bottom: 30px;
}
       .teikikoukan .bold{
       border-bottom: 1px solid #333;
       font-size: 16px;
       padding: 5px 0;
}
.koukan{
       padding: 15px;
}
       
       .check .bold{
       border-bottom: 1px solid #333;
       font-size: 16px;
       padding: 5px 0;
}
       .check img{
       padding: 15px;
}
       .check{
             margin-bottom: 40px;
}
     
}


#tenken #sec4 {
     max-width: 1118px;
       margin-bottom: 40px;
}


#tenken #sec4 a{
     text-align: left;
     max-width: 520px;
     display: block;
     }
     
     

#tenken #sec4 h3{
     font-size: 32px;
     margin: 50px 0 20px 0;
     letter-spacing: 0.08em;
     @media (max-width: 768px) {
          font-size: 24px;
          text-align: left;
          margin: 20px 0 20px 0;
          line-height: 1.4em;
          text-underline-offset: 6px;
     }
}





#tenken #sec4 p{
     font-size: 16px;
     letter-spacing: 0.1em;
     @media (max-width: 768px) {
          text-align: left;
     }
}
#tenken #sec4 p a{
     margin: 0 0 0 8px;
}
#tenken #sec4 figure{
     display: flex;
     margin: 30px 0 0 0;
     @media (max-width: 768px) {
          overflow-x: scroll;
          padding: 0 0 30px 0;
     }
}
.spot_block #sec4 figure{
     margin: 10px 0 0 0;
}


.teiki_block #sec4 figure img:nth-of-type(1){
     display: block;
     max-width: 814px;
     width: 73%;
     margin: 0 2% 0 0;
     @media (max-width: 768px) {
          width: auto;
          height: 180px;
      }
     }
     .teiki_block #sec4 figure img:nth-of-type(2){
     display: block;
     max-width: 280px;
     width: 28%;
     margin: 0 0 0 0;
     @media (max-width: 768px) {
          width: auto;
          height: 180px;
      }
     }

.spot_block #sec4 figure img:nth-of-type(1){
display: block;
    max-width: 373px;
    width: 34%;
    margin: 0 2% 0 0;
    @media (max-width: 768px) {
     width: auto;
     height: 180px;
 }
}

.spot_block #sec4 figure img:nth-of-type(2){

display: block;
max-width: 727px;
width: 65%;
margin: 0 0 0 0;
@media (max-width: 768px) {
     width: auto;
     height: 180px;
 }
}



#tenken #sec4 img {
     margin: 20px 20px 20px 0px;
     
}
@media (max-width: 768px) {
     #tenken #sec4 p {
          font-size: 14px;
     }
     #tenken #sec4 .title {
          font-size: 16px;
            
     }
     #tenken #sec4 h1 {
          font-size: 16px;
     }
       #tenken #sec4 img {
     margin: 5px 10px 10px 0px;
       }
       #tenken #sec4 div {
       margin-bottom: 30px;
}
       
}@media (max-width: 500px) {

     #tenken #sec4 .title {
          font-size: 16px;
     }
     #tenken #sec4 h1 {
          font-size: 16px;
     }
}


     #sec5 {
       margin-bottom: 60px;
     }
     #sec5 .title{
       font-size: 24px;
       margin-bottom: 40px;
     }
     #sec5 .title span{
     font-size: 16px;
     }


     #sec5 #scrollarea{
          margin-bottom: 20px;
     }



#sec5 section {
     display: flex;
     flex-flow: nowrap;
     justify-content: space-between;
     align-items: center;
     position: relative;
     column-gap: 35px;
     overflow-x: scroll;
     cursor: grab;
     margin-bottom: 0;

}
#sec5 section img {
     width: 100%;
}
#sec5 section img {
     width: calc(2866px / 2);
     padding: 0 0px 20px;
     pointer-events: none;
     user-select: none;
     @media (max-width: 768px) {
     width: 900px;
     }
}

#sec5 p {
text-align: left;
}

#sec5 a {
     text-align: left;
     width: 100%;
     display: block;
     margin: 8px 0 0 0;
     font-size: 14px;
     color: #0B57A0;
     text-decoration: underline;
 }











@media (max-width: 768px) {
       #sec5 {
              margin-bottom: 40px;
       }
       #sec5 .title{
              font-size: 20px;
              margin-bottom: 20px;
       }#sec5 .title span{
              font-size: 12px;
       }
       #sec5 section {
          display: flex;
          flex-flow: nowrap;
          justify-content: space-between;
          align-items: center;
          position: relative;
          column-gap: 15px;
          overflow-x: scroll;
              margin-bottom: 20px;
     }
}@media (max-width: 500px) {
       #sec5 .title{
              font-size: 16px;
       }#sec5 .title span{
              font-size: 10px;
       }
       
     #sec5 section {
          display: flex;
          flex-flow: nowrap;
          justify-content: space-between;
          align-items: center;
          position: relative;
          overflow-x: scroll;
     }


     #sec5 section .polygon img {
          width: 21px;
     }
}
/* kiyaku
---------------------------------------- */
#kiyaku {}
/* entry
---------------------------------------- */
#entry {}
/* confirm
---------------------------------------- */
#confirm {}
/* complete
---------------------------------------- */
#complete {}
/* 質問共通
---------------------------------------- */


details {
     text-align: left;
     border-bottom: 1px solid #ccc;
     margin-bottom: 10px;
}
details .answer {
     display: flex;
     max-width: 1118px;
     width: 100%;
     text-align: left;
     flex-wrap: nowrap;
}


details .answer section{
     display: block;
     width: 100%;
     margin: 0px 0 36px 36px;
}

details .answer section article{
     display: block;
     width: 100%;
     margin: 18px 0;
     font-size: 14px;
}


details .answer section img{
     display: block;
     width: 100%;
}

details .answer section .js-scrollable img{
     display: block;
     width: 823px;
}




details .answer section h4{
     display: block;
     width: 100%;
     margin: 0 0 8px 0;
}
details .answer section h4 span{
font-size: 14px;
     margin: 0 0 0px 18px;
}




details p:first-of-type {
     width: 34px;
     padding: 2px 10px;
     margin-right: 4px;
}
details p:last-of-type {
     max-width: 1050px;
     margin-bottom: 20px;
     margin-right: 45px;
     @media (max-width: 768px) {
          margin-bottom: 20px;
          margin-right: 0px;
          margin-left: 0px;
          font-size: 14px;
     }
}



details p:last-of-type {
     max-width: 1050px;
     margin-bottom: 20px;
     margin-right: 45px;
}
summary {
     display: block;
     cursor: pointer;
     padding: 10px 0px 20px;
     position: relative;
}
summary::-webkit-details-marker {
     display: none;
}
summary > h3::before {
     content: "Q.";
     border-radius: 5px;
     padding: 5px 8px;
     margin-right: 4px;
}
summary > h3 {
     max-width: 1118px;
     font-size: 18px;
     line-height: 1.8em;
}
summary::after {
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     content: "";
     display: inline-block;
     margin: 0;
     width: 32px;
     height: 32px;
     background-image: url("../img/QA_tagu.png");
     background-size: cover;
     transition: transform 0.2s;
     float: right;
}
details[open] summary::after {
     background-image: url("../img/QA_tagu2.png");
}
.qa {
     margin-bottom: 90px;
}
@media (max-width: 900px) {
     details{
          margin-bottom: 0;
     }details .answer {
          font-size: 14px;
     }
     summary{
          padding: 10px 0;
     }summary h3 {
          width: 85%;
            height: 50px;
            display:flex;
            align-items: center;
            font-size: 16px;
          line-height: 1.4;
}
       .qa {
     margin-bottom: 30px;
}@media (max-width: 500px) {
       
     details{
          margin-bottom: 0;
     }details .answer {
          font-size: 12px;
     }
     summary{
          padding: 10px 0;
     }summary h3 {
          width: 85%;
            height: 50px;
            display:flex;
            align-items: center;
            font-size: 14px;
          line-height: 1.4;
}


details .answer section{
     display: block;
     width: 100%;
     margin: 0px 0 36px 0px;
}

details .answer section article{
     display: block;
     width: 100%;
     margin: 18px 0;
     font-size: 12px;
}


details .answer section img{
     display: block;
}
details .answer section h4{
     display: block;
     width: 100%;
     margin: 0 0 8px 0;
}







.qa {
     margin-top: -10px;
}
       #discount-section::before {
            content: "";
            display: block;
            height: 300px;
            margin-top: -300px;
            visibility: hidden;
        }
       @media (max-width: 500px) {
footer .content {
    width: calc(100% - 30px);
    padding: 15px 0 15px 0;
    display: none;
       }
       footer #copyright {
    border-top: 1px solid #ccc;
}
       }
/* contact共通
---------------------------------------- */
