@charset "utf-8";



.animate{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s, transform .7s;
}

.animate.appear{
  opacity: 1;
  transform:none;
}

/* common */

html{
  font-size:80px;
}
@media (max-width: 1200px) and (min-width:800px){
  html{
    font-size:55px;
  }

}

/*medium screen*/
@media (max-width: 799px) and (min-width:600px){
  html{
    font-size:45px;
  }

}

/* small screen */
@media (max-width: 599px){
  html{
    font-size:40px;
  }

}

@media (max-width: 400px){
  html{
    font-size:30px;
  }

}

body{
  font-size: 0.16rem;
  font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}



*{
  padding:0;
  margin: 0;
  
}

ul li{
  list-style-type: none;
 
}

a{
  color:white;
  text-decoration: none;
}



.title{
  margin-top: 0.8rem;
  margin-bottom: 0.24rem;
  padding-top: 0.4rem;
}
 .title h2{
  font-weight: bold;
  font-size: 0.72rem;
  text-align: center;
  color: #0b74d1;
  
 
 
}

.title p{
  font-weight: normal;
  font-size: 0.4rem;
  text-align: center;
  color: #0b74d1;
  margin-bottom: -0.24rem;
 
}

@media (max-width: 599px){
  .title{
    margin-top: 1rem;
    margin-bottom: 0.24rem;
    padding: 0.56rem 0;
  }
  .title h2{
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    color: #0b74d1;
    
   
   
  }
  
  .title p{
    font-weight: normal;
    font-size: 0.48rem;
    text-align: center;
    color: #0b74d1;
    margin-bottom: -0.24rem;
   
  }
 

}

.about_service{
  display: block;
  margin:1rem auto;
  text-align: center;

}

.about_service .more_service{
  padding: 0.24rem;
  font-weight: bolder;
  font-size: 0.32rem;
  color: #0d0505;
  border-radius: 0.25rem;
  background: #fff;
  border: 0.03rem solid #298ec6;
 
  
}

.about_service .more_service:hover {
  background-color: #298ec6; /* 背景色 */
}

@media (max-width: 799px){

  .about_service{
    display: block;
    margin:1rem auto;
    text-align: center;
   
  
  }
  
  .about_service .more_service{
    
    padding: 0.32rem 1rem;
    font-weight: bolder;
    font-size: 0.48rem;
    color: #0d0505;
    border-radius: 0.25rem;
    background: #fff;
    border: 0.03rem solid #298ec6;
   
    
  }
  
 
}



.logo{
      width:3.2rem;
      height:0.64rem;
}


/* header */
header .container{
   background-image:url("../img/back.png");
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 10rem;

}



header .header_nav{
  width: 90%;
  margin:0 auto;
  padding-top: 0.32rem;
  display: flex;
  justify-content:space-between;
}

header ul{
  display: flex;
}

@media (max-width: 799px){
 .normal_nav{
   display: none;
 }

}

@media (min-width:800px){
 .nav{
   display: none;
 }

}

header ul li{
  font-size: 0.24rem;
  margin-top: 0.16rem;
  margin-right:0.32rem;
  font-weight: bolder;
}

.nav_list{
  display: flex;
  flex-direction:column;
}

.nav_item a{
  font-size:0.5rem;
  padding-bottom: 0.8rem;
 }
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 0.6rem;
  width: 0.6rem;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: rgb(255, 255, 255);
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #0394F2;
  transition: .5s;
  text-align: center;
  padding-top: 20px;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}
  


header .header_container {
  display: flex;
 
 
}

header .header_container .header_font{
    margin-top: 1rem;
    color:white;
    
  
    text-align: center; 
    width: 50%;
    

}

header .header_container .header_font h1{
  font-size: 0.56rem;
  padding-bottom: 0.4rem;

}

header .header_container .header_font p{
  font-size: 0.56rem; 
  font-weight: bold;
  
}

header .header_container .header_font p:last-child{
  font-weight: bold;
  font-size: 0.8rem;
}

.header_container .header_font .st{
  font-size: 0.8rem;
}


header .header_container .header_font .small_font{
  font-size: 0.4rem;

}

header .header_container.main_image {
  display: flex;
  flex-direction: column;
  padding: 0.64rem auto;
  margin-right: 1rem;
  

}



 header .header_container .main_image img{
  margin: 0.64rem auto;
  width: 50%;
  /* margin-right: 1rem; */
  /* margin-left: 0.8rem; */
  width: 6rem;
  /* height: rem; */
 
} 


.back {
  animation-name: play;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;

}

@keyframes play {
  0% {
      transform: translate(0,0px);
  }

  100% {
      transform: translate(0,-0.15rem)
  }
}


header .header_container .main_image .front {
  margin-top: -4rem;
  padding-left: 1rem;
  position: relative;

 
} 





   @media (max-width: 1200px) and (min-width:600px ) { 

    header .header_container.main_image {
      display: flex;
      flex-direction: column;
      padding: 0.64rem auto;
      margin-right: 1rem;
      
    
    }
    
    
    
     header .header_container .main_image img{
      margin: 0.64rem auto;
      width: 50%;
      /* margin-right: 1rem; */
      /* margin-left: 0.8rem; */
      width: 6rem;
      /* height: rem; */
     
    } 
    
    
    .back {
      animation-name: play;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-duration: 1.5s;
    
    }
    
    @keyframes play {
      0% {
          transform: translate(0,0px);
      }
    
      100% {
          transform: translate(0,-0.15rem)
      }
    }
    
    
    header .header_container .main_image .front {
      margin-top: -4rem;
      padding-left: 1rem;
      position: relative;
    
     
    } 
   }

    
 @media (max-width: 599px){

  header .container{
    background-image:url("../img/back.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 15rem;
 
 }

 header .header_container .header_font{
  margin-top: 1rem;
  color:#ffffff;
  width: 100%;
  text-align:center;
  

}

 
 header .header_container .header_font h1{
  font-size: 0.8rem;
  
  padding-bottom: 0.4rem;

}

header .header_container .header_font p{
  font-size: 1rem; 
  font-weight: bold;
  
}

header .header_container .header_font p:last-child{
  font-weight: bold;
  font-size: 1rem;
}

header .header_container .header_font .small_font{
  font-size: 0.56rem;

}
 

  .header_container{
    margin: 0 auto;
    height: 10rem;
    flex-direction: column;
    width: 100%;
  }

  .header_container .main_image {
   
    margin: 0 auto;
  } 

  .header_container .main_image img{
   
    width: 4rem;
    height: 4rem;
   
  } 
 
   .back {
    animation-name: play;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    padding-left:1rem ;
  
  }

  header .header_container .main_image .front {
    width: 80%;
    margin-top: -4rem;
    padding-left: 1rem;
    position: relative;
    padding-left: 2rem;
  
   } 
  
  

  

}


 

 .anim-box.zoomin.is-animated {
  animation: zoomIn 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  ;
}
 
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


    


/* main */

/* どうしてそんなに結果が出るの？*/

.introduction{
  margin-top: 0.56rem;
  background-color: #FAFAFA;
  margin-right: 1rem;
  margin-left: 1rem;
  text-align: center;
}

.introduction h2{
  padding-top: 0.4rem;
  font-size: 0.64rem;
  font-style: bold;
}

.introduction .contents :first-child{
 font-size: 0.4rem;
 margin-bottom: -0.16rem;
 margin-top: 0.16rem;
 
}

.introduction .contents :last-child{
  text-decoration: underline;
  margin-bottom: 0.32rem;
 }

.introduction .contents{
  font-size: 0.56rem;
  font-weight: bold;
}

.introduction p{
  font-size: 0.56rem;
  font-weight: bold;
}

.introduction img{
  width: 2.4rem;
  margin-bottom: 0.4rem;
}

.introduction .reason{
  width: 80%;
  margin:0 auto;
  padding:0.6rem;
  background-color: #0394F2;
  color: #ffffff;
  border-radius: 0.1rem;
  box-shadow: 0 0.1rem 0.25rem 0 rgba(0, 0, 0, .5);
 
}

@media (max-width: 599px){

  .introduction{
    margin-top: 0.56rem;
    text-align: center;
   
  }

  .introduction h2{
    padding-top: 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.64rem;
    font-style: bold;
  }

  .introduction .contents :first-child{
    font-size: 0.56rem;
    margin-bottom: -0.16rem;
    margin-top: 0.16rem;
    
   }
   

  .introduction .contents{
    font-size: 0.64rem;
    font-weight: bold;
    
  }
  
  .introduction .contents p{
    font-size: 0.64rem;
    font-weight: bold;
  
  }
  
  .introduction img{
    width: 2.4rem;
    margin-bottom: 0.4rem;
  }
  
  .introduction .reason{
    width: 90%;
    margin:0 auto;
    padding:0.6rem;
    background-color: #0394F2;
    color: #ffffff;
    border-radius: 0.1rem;
    box-shadow: 0 0.1rem 0.25rem 0 rgba(0, 0, 0, .5);
   
  }
  

  
}

/* 顧客獲得の３STEP*/
.steps{
  
  width: 100%;
  background: linear-gradient(to right, #ddebe4 0%, #a8dbfa 100%);
  padding-bottom: 1rem;
}

.steps_images{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:auto;
  margin-right: auto;
  
}

@media (max-width: 799px){
  .steps_images{
    width: 90%;
    display: flex;
    flex-direction: column;
    margin:auto ;

  }
 
 
}

  

.steps .step_image{
  width: 4.5rem;
  height: 7rem;
  border-radius: 0.8rem;
  background: #fafafa;
  box-shadow: 0 0.16rem 0.16rem rgba(0, 0, 0, 0.16);
  text-align: center;
  color: #0b74d1;

}



@media (max-width: 799px){
  .steps .step_image{
    width: 80%;
    height: 6rem;
    border-radius: 0.8rem;
    background: #fafafa;
    box-shadow: 0 0.16rem 0.16rem rgba(0, 0, 0, 0.16);
    text-align: center;
    
    color: #0b74d1;
    margin-bottom: 0.2rem;

  
  }
  
 
 
}

.steps .steps_images .step_image
img{
  width: 2rem;
  height: 2.8rem;
  padding-top: 0.4rem;
}

.steps .steps_images .step_image
.approach{
  width: 3rem;
}  

@media (max-width: 799px){
  .steps .steps_images .step_image img{
    display: none;
    } 

}

.steps .steps_images .arrow img{
  width: 0.24rem;
  height: 0.24rem;
  margin: 0 0.3rem;
  } 

  @media (max-width: 799px){
    .steps .steps_images .arrow img{
      width: 0.24rem;
      height: 0.24rem;
      margin: 0.4rem;
      transform: rotate(90deg); 
      } 

  }


.steps .step_image .step_number{
font-weight: bolder;
font-size: 0.32rem;

}

.steps .step_image .step_do{
font-weight: bolder;
font-size: 0.56rem;

}

.steps .step_image .step_sentence {
margin-top: 0.08rem;
font-size: 0.24rem;
color: #0d0505;
}



.steps .detail{
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  width: 80%;
 
}

.steps .detail p{
  
  display: inline-block;
  font-size: 0.24rem;
  text-align: left;
  color: #111;
  line-height: 0.4rem;
}

@media (max-width: 799px){

  .steps .step_image .step_number{
    margin-top: 0.72rem;
    font-weight: bolder;
    font-size: 0.56rem;
    
    }
    
    .steps .step_image .step_do{
    font-weight: bolder;
    font-size: 0.72rem;
    
    }
    
    .steps .step_image .step_sentence {
    margin-top: 0.08rem;
    font-size: 0.48rem;
    color: #0d0505;
    }
    

   .steps .detail p{
     font-size:0.48rem;
     line-height: 0.7rem;
   } 
  

}


/*どちらが成果が出ると思いますか*/

.comparison .double{
  display: flex;
  position: relative;
  width: 100%;
}


/* small screen */
@media (max-width: 799px){
  .comparison .double{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  

}




.comparison .triangle{
  width: 0.64rem;
  height: 0.48rem;
}

.comparison .woman{
  width: 4.2rem;
  height: 3rem;
}




.comparison .other{
  width: 50%;
  height: 9rem;
  background: #63b6ef;

}




.comparison .other .title_holder{
  width: 4.2rem;
  height: 1.2rem;
  background: #fff;
  display: block;
  margin: 0.2rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.comparison .other .title_holder h3{
  font-weight: bold;
  font-size: 0.72rem;
 
  color: #63b6ef;
 
}

.comparison .other h4{
  font-weight: bold;
  font-size: 0.56rem;
  text-align: center;
  color: #fff;
 
}

.comparison .other p{
  font-weight:normal;
  font-size: 0.32rem;
  text-align: center;
  color: #fff;
  padding-bottom: 0.32rem;
  margin-top: -0.16rem;

}

.comparison .other img{
  display: block;
  margin: 0 auto;
}

@media (max-width: 799px){
  
  .comparison .other{
    width: 100%;
    height: 10rem;
    background: #63b6ef;
  
  }

  .comparison .other .title_holder{
    width: 70%;
    height: 1.2rem;
    background: #fff;
    display: block;
    margin: 0.2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  
  .comparison .other .title_holder h3{
    font-weight: bold;
    font-size: 1rem;
   
    color: #63b6ef;
   
  }
  
  .comparison .other h4{
    font-weight: bold;
    font-size: 0.64rem;
    text-align: center;
    color: #fff;
   
  }
  
  .comparison .other p{
    font-weight:normal;
    font-size: 0.48rem;
    text-align: center;
    color: #fff;
    padding-bottom: 0.32rem;
    margin-top: -0.16rem;
  
  }

}




.comparison .our{
  width: 50%;
height: 9rem;
background: #0394F2;
}






.comparison .our .title_holder{
  width: 4.2rem;
  height: 1.2rem;
  background: #fff;
  margin: 0.2rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison .our .title_holder h3{
  font-weight: bold;
  font-size: 0.72rem;
  text-align: center;
  color:#0394F2;
 
}

.comparison .our h4{
  font-weight: bold;
  font-size: 0.56rem;
  text-align: center;
  color: #fff;
 
}

.comparison .our p{
  font-weight: normal;
  font-size: 0.32rem;
  text-align: center;
  color: #fff;
  padding-bottom: 0.32rem;
  margin-top: -0.16rem;

}

.comparison .our img{
  display: block;
  margin: 0 auto;
}

@media (max-width: 799px){
  
  .comparison .our{
    width: 100%;
  height: 10rem;
  background: #0394F2;
  }

  .comparison .our .title_holder{
    width: 70%;
    height: 1.2rem;
    background: #fff;
    margin: 0.2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .comparison .our .title_holder h3{
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    color:#0394F2;
   
  }
  
  .comparison .our h4{
    font-weight: bold;
    font-size: 0.72rem;
    text-align: center;
    color: #fff;
   
  }
  
  .comparison .our p{
    font-weight: normal;
    font-size: 0.48rem;
    text-align: center;
    color: #fff;
    padding-bottom: 0.32rem;
    margin-top: -0.16rem;
  
  }

}

.comparison .point{
  width:90%;
  position: relative;
  display: block;
  margin: auto;
  margin-top:-0.80rem;
  

  }


.comparison .point p{
  font-weight: bold;
  background: #ffffff;
  height: 1.6rem;
  font-size: 0.48rem;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:0.16rem 0;
  box-shadow: 0 0.16rem 0.16rem rgba(0, 0, 0, 0.16);
  

}


/*当社の強み*/

.strong_points{
  width: 100%;
  height: 10rem;
  background: #fafafa;

}



.strong_points .points{
  display: flex;
  width: 90%; 
  background: transparent;
  margin-left:auto;
  margin-right: auto;

}

.strong_points .chenge_points{
  display: none;
}

.animate.delay{
  transition-delay: 0.2s;

}

.animate.delay_more{
  transition-delay: 0.4s;

}

@media (max-width: 799px){

  .strong_points{
    width: 100%;
    height: auto;
    padding-bottom: 0.8rem;
    background: #fafafa;
  
  }
  .strong_points .points{
    display: none;
   
  
  }

  .strong_points .chenge_points{
    display: flex;
    flex-direction: column;
    margin:0 auto;
    margin-bottom: 0.8rem;

  }

  .strong_points .chenge_points .point img{
    width: 2rem;
    height: 2rem;
    background: transparent;
    margin-top: 0.3rem; 
  }
  
  .strong_points .chenge_points .point{
    text-align: center;
    flex:1;
  }
  
  .strong_points .chenge_points .point h3{
  font-weight: bold;
  font-size: 0.56rem;
  
  line-height: 0.6rem;
  text-align: center;
  color: #030303;
  margin-bottom: 0.32rem;
  }
  
  .strong_points .chenge_points p{
    flex: 1;
    display: block;
    
    font-size: 0.48rem;
    line-height: 0.7rem;
    text-align: center;
    color: #030303;
    margin-bottom: 0.8rem;
  
  }
  
  

}


.strong_points .points .point img{
  width: 2rem;
  height: 2rem;
  background: transparent;

}

.strong_points .points .point{
  text-align: center;
  border-right:rgba(0, 0, 255, 0.178) solid 1px; 
  flex:1;
}

.strong_points .points .point:last-child{
  border-right:none; 
}

.strong_points .points .point h3{
font-weight: bold;
font-size: 0.32rem;
text-align: center;
color: #030303;
margin-bottom: 0.32rem;
}

.strong_points .points p{
  flex: 1;
  display: block;
  line-height: 0.38rem;
  font-weight: normal;
  font-size: 0.24rem;
  text-align: center;
  color: #030303;

}




/*サービスプラン*/

.services{
  width:90% ;
  margin: 0 auto;
}


.services .service .sub{
  transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  font-size: 0.48rem;
  font-weight: bolder;
  color: #0b0a0a;
  margin-right:50%;
  margin-bottom: -0.16rem;
  text-align: center;

}

.services .service .system{
  transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  font-size: 0.48rem;
  font-weight: bolder;
  color: #0b0a0a;
  margin-right:40%;
  margin-bottom: -0.16rem;
  text-align: center;

}





.services .service h3{
  font-weight: bold;
  font-size: 0.56rem;
  text-align: center;
  color: #0d0c0c;
  border-bottom: 0.01rem solid #0d0c0c;
  margin-bottom: 0.32rem;

}

.services .service .formula{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.32rem;
}
.services .service .formula .circle{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.32rem;
}

.services .service .formula img{
  width: 1.6rem;
  height: 1.6rem;
  background: #fff;
  opacity: 0.8;


}
.services .service .formula .mark{
 
font-weight: normal;
font-size: 0.64rem;
text-align: center;
color: #0d0c0c;
margin: 0.16rem;
}




.services .service .formula .price{
  margin: 0.16rem;
}



.services .service .formula .price p{
  font-weight: normal;
  font-size: 0.32rem;
  color: #0d0c0c;
  text-align: left;
  margin-bottom: -0.32rem;
 }

.services .service .formula .price .line {
  display: flex;
  align-items : flex-end;
}

.services .service .formula .price .line p{
  font-weight: bold;
  font-size: 0.8rem;
  color: #0d0c0c;
  margin: 0;
  padding: 0;
}

.services .service .formula .price .line p:last-child{
  font-weight: normal;
  font-size: 0.24rem;
  margin-top: -0.24rem;
  color: #0d0c0c;
  
}

@media (max-width: 599px){

  .services .service .formula .mark{
    display: none;
    }
    .services .service .formula .circle{
      display: block;
      margin: 0;
    }
  .services .service .formula {
      display: flex;
      flex-direction: column;
      }
      .services .service .formula img{
        width: 2rem;
        height: 2rem;
        background: #fff;
        opacity: 0.8;
      
      
      }

  .services .service .formula .price{
        margin: 0.24rem;
        padding-left: 1rem;
      }
  
      
.services .service .formula .price p{
  font-weight: normal;
  font-size: 0.48rem;
  color: #0d0c0c;
  text-align: left;
  margin-bottom: -0.32rem;
 }

.services .service .formula .price .line {
  display: flex;
  align-items : flex-end;
}

.services .service .formula .price .line p{
  font-weight: bold;
  font-size: 1rem;
  color: #0d0c0c;
  margin: 0;
  padding: 0;
}

.services .service .formula .price .line p:last-child{
  font-weight: normal;
  font-size: 0.48rem;
  margin-top: -0.24rem;
  color: #0d0c0c;
  
}
  
    
}



/*よくあるご質問*/

.questions{
  background: #fafafa;
  height: auto;
  padding-top: 0.24rem;
  padding-bottom: 0.24rem;
  
 

}

.questions .question{
  display: flex;
  flex-direction: column;
  margin-bottom:0.64rem ;

 
  

} 

@media (max-width: 599px){
  .questions .question{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

 
    
}










dt::before{
  content:'Q.';
}

dt {
  
  font-weight: bolder;
  cursor:pointer;
  user-select: none; 
  position: relative; 
  font-weight: bold;
  font-size: 0.32rem;
  /* height: 1.4rem; */
  color: #0b74d1;
  margin: 0 auto;
  text-align: center;
  width: 80%;
  
  border-bottom: 1px solid #000;
  
 
 
}



dt::after{
  content:'+';
  position: absolute;
  
  right:-0.16rem;
  transition: transform .3s;
} 

dl > div.move dt::after {
  transform: rotate(45deg);
}


dd{
  
  margin: 0;
  display: none;
 
}

dd::before{
  content:'A.';
}

dl > div.move dd {
  display: block;
  animation: .3s fadeIn;
  width: 80%;
  font-size: 0.32rem;
  text-align: left;
  color: #000000;
  text-align: center;
  margin:0.24rem auto;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 599px){
 dt{
   width: 90%;
  font-size: 0.48rem;
 }

 dl > div.move dd {
  
  font-size: 0.48rem;
  
}
    
}



/*まずはお気軽にお電話ください*/


    


/* call */
.call{
  display: flex;
  width: 90%;
  margin: 0.8rem auto 0 auto;
  height: 3.5rem;
  background: #fff;
  border: 0.08rem solid #000;
}

.call img:first-child{
  width: 2.8rem;
  height: 2.4rem;
  margin: auto auto auto 0.16rem;
}
@media (max-width: 799px){
  .call img:first-child{
    width: 1.8rem;
    height: 1.6rem;
    /* margin: auto auto auto 0.16rem; */
  }

 
    
}

.call .call_info h3{
  font-size: 0.4rem;
  margin: 0.4rem auto auto auto;
  text-align: center;
  color: #0d0c0c;
}

.call .call_info .number{
 margin: auto;
font-weight: bold;
font-size: 0.56rem;
text-align: center;
color: #0d0c0c;
}

.call .call_info .time{
  
font-weight: normal;
font-size: 0.32rem;
text-align: center;
color: #0d0c0c;
line-height: 0.4rem;

}

.call .contact{
  
  background: #fff;
  box-shadow: 0 0.16rem 0.16rem rgba(0, 0, 0, 0.16);
  margin:auto 0.16rem auto auto;
 
  
}

.call .contact a{
  text-align: center;
  width: 2.8rem;
  height: 2rem;
  
  padding-top: 0.6rem;
  display: block;
  font-weight: bolder;
  font-size: 0.40rem;
  color: #0d0c0c;
}

.call .contact a:hover {
  background-color: rgba(0, 0, 0, 0.16);
}


@media (max-width: 799px){

  .call{
    display: flex;
    width: 90%;
    margin: 0.8rem auto 0 auto;
    height: 3.5rem;
    background: #fff;
    border: 0.08rem solid #000;
  }
  
  .call .contact{
    width: 2.3rem;
    height: 2rem;
    background: #fff;
    box-shadow: 0 0.16rem 0.16rem rgba(0, 0, 0, 0.16);
    margin:auto 0.16rem auto auto;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  
  .call .contact a{
    display: block;
    font-weight: bolder;
    font-size: 0.4rem;
    color: #0d0c0c;
  }

 
    
}





/* footer */
footer {
 
  background-image: url("../img/footer_background.png");
  background-size: cover;
  width: 100%;
  height: 4rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  position: relative;
  padding-bottom: none;
  }


footer .footer_nav{
  width: 90%;
  display: flex;
  justify-content:space-between;
  padding-top: 1.4rem;
  color:white;
  margin:0 auto;
  text-align: center;
  
}

footer ul{
  display: flex;
}

footer ul li{
  margin-top: 0.16rem;
  margin-right:0.16rem;
  font-size: 0.36rem;
  font-weight: bolder;
}

@media (max-width: 900px){
  footer .footer_nav{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.4rem;
    color:white;
    margin:0 auto;
    text-align: center;
    
  }
  footer ul li{
    margin-top: 0.16rem;
    margin-right:0.16rem;
    font-size: 0.28rem;
    font-weight: bolder;
  }
  

}


footer p {
  color:white;
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;

  }