@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:https://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/
/* title
========================================================================================================
*/


/* font
========================================================================================================
*/

.font01{
	font-family: 'Noto Serif JP', serif;
}

.font02{
	font-family: 'Noto Sans JP', sans-serif;
}

/* btn
========================================================================================================
*/

.btn01{  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width:200px;  
  height:45px;
  border-radius: 25px;  
  padding: 0 20px;
  transition: 0.8s;
}

@media print, screen and (min-width:768px) {
.btn01{
  display: block;
  width:260px;
  max-width: inherit;
  height:50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  }
}
  
.btn01 span{
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFF;
  padding: 0;  
  margin: 0;
}

@media print, screen and (min-width:768px) {
.btn01 span{
  font-size: 1.6rem;
  }
}

.btn02{
  width:160px;
  height:30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.8s;
}

.btn02 span{
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0;
  margin: 0;
}

.btn03{ 
  width:220px;  
  height:50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center; 
  padding: 0 20px;
  transition: 0.8s;
}

@media print, screen and (min-width:768px) {
.btn03{ 
  width:300px;  
  height:60px;
  border-radius: 30px;
  }
}

.btn03 span{
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
  padding: 0;  
  margin: 0;
}
@media print, screen and (min-width:768px) {
.btn03 span{
  font-size: 1.8rem;
  }
}

.btn04{ 
  display: flex;
  align-items: center;
  justify-content: center;
  width:185px;  
  height:40px;
  border-radius: 20px;  
  padding: 0 20px;
  transition: 0.8s;
}
@media print, screen and (min-width:768px) {
.btn04{ 
  width:185px;  
  height:40px;
  border-radius: 20px;  
  padding: 0 20px;
  transition: 0.8s;
  }
}

.btn04 span{
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFF;
  padding: 0;  
  margin: 0;
}
@media print, screen and (min-width:768px) {
.btn04 span{
  font-size: 1.6rem;
  }
}

.btn05{ 
  width:80%;  
  height:60px;
  border-radius: 30px;    
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: 0.8s;
}

@media print, screen and (min-width:768px) {
.btn05{ 
  width:480px;  
  height:80px;
  border-radius: 40px;  
  padding: 0 20px;
  }
}

.btn05 span{
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
  text-align: center;
  line-height: 1.5em;
  padding: 0;  
  margin: 0;
}

@media print, screen and (min-width:768px) {
.btn05 span{
  font-size: 2.0rem;
  }
}

.btn-faq{
  height:30px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: 0.8s;
}
.btn-faq span{
  font-size: 1.3rem!important;
  font-weight: 700;
  color: #FFF;
  padding: 0;  
  margin: 0;
}
@media print, screen and (min-width:768px) {
.btn-faq span{
  font-size: 1.4rem!important;
  }
}

.btn-color01{
  background: #FF8000;
}
.btn-color02{
  background: #4AB8CF;
}
.btn-color03{
  background: #143841;
}
.btn-color04{
  background: #FFF;
  color: #4AB8CE;
}
.btn-color05{
  background: transparent;
  border: 2px solid #FFF;
}


.btn-color01:hover{
  background: #FFB800;
}
.btn-color02:hover{
  background: #5FE3FF;
}
.btn-color03:hover{
  background: #266D7E;
}
.btn-color04:hover{
  background: #5FE3FF;  
  color: #FFF;
}
.btn-color05:hover{
  background: rgba( 0,0,0,0.3);
}


/* link
========================================================================================================
*/

/*-- hover-underline01 --*/

.hover-underline01{
  padding-bottom: .1em;
  background: linear-gradient(#000, #000) 0 100%/0 1px no-repeat;
  transition: background .8s;
  text-decoration: none;
}

.hover-underline01:hover {
  background-size: 100% 1px;
}

/*-- hover-underline02 --*/
.hover-underline02{
  color: #4AB8CF;
  padding-bottom: .2em;
  background: linear-gradient(#4AB8CF, #4AB8CF) 0 100%/100% 1px no-repeat;
  transition: background .8s;
  text-decoration: none;
}

.hover-underline02:hover {
  background-size: 0 1px;
}

/*-- hover-underline03 --*/
.hover-underline03{
  padding-bottom: .2em;
  background: linear-gradient(#FFF, #FFF) 0 100%/100% 1px no-repeat;
  transition: background .5s;
  text-decoration: none;
}

.hover-underline03:hover {
  background-size: 0 1px;
}

/*-- hover-underline04 --*/
.hover-underline04{
  padding-bottom: .2em;
  background: linear-gradient(#666, #666) 0 100%/100% 1px no-repeat;
  transition: background .5s;
  text-decoration: none;
}

.hover-underline04:hover {
  background-size: 0 1px;
}

/*-- hover-underline05 --*/
.hover-underline05{
  padding-bottom: .1em;
  background: linear-gradient(#FFF, #FFF) 0 100%/0 1px no-repeat;
  transition: background .8s;
  text-decoration: none;
}

.hover-underline05:hover {
  background-size: 100% 1px;
}

/* status
========================================================================================================
*/
.status{
  display: flex;
  flex-flow: row nowrap;
  column-gap: 10px;
  position: absolute;
  top:-13px;
  left:10px;
}

.status span{
  display: flex;
  align-items: center;
  justify-content: center;
  width:120px;
  height: 26px;
  font-size: 1.3rem;
  line-height: 1em;
  color: #FFF;
}

span.status01{
  background: #4AB8CF;
}
span.status02{
  background: #FF8000;
}

/* disolay none
========================================================================================================
*/

/*-- 768以下 非表示--*/
@media only screen and (max-width:768px) { 
  .sm-hide{
	  display:none;	
   }
}

/*-- 1100以下 非表示--*/
@media only screen and (max-width:1100px) { 
  .sm-hide2{
	  display:none;	
   }
}

/*-- 768以上 非表示--*/
@media print, screen and (min-width:768px) {
  .lg-hide{
    display:none;	
  }
}

/*-- 1100以上 非表示--*/
@media print, screen and (min-width:1100px) {
  .lg-hide2{
	 display:none;	
  }
}

