@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:https://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/

/*about-nav
========================================================================================================
*/

.about-nav{
  width:100%;
  margin: 0 auto 60px auto;
}

.about-nav ul{
  width:90%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center; 
  padding: 0 0 60px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:1100px) {
.about-nav ul{
  padding: 0;
  margin: 0 auto;
  }
}

.about-nav ul li{
  display: inline-block;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  text-align: center;
  padding: 3px 15px;
  margin: 5px 0 5px -1px;
}

@media print, screen and (min-width:768px) {
.about-nav ul li{
  padding: 15px 30px;
  margin: 10px 0 10px -1px;
  }
}

@media print, screen and (min-width:1100px) {
.about-nav ul li{
  padding: 15px 30px;
  margin: 10px 0 10px -1px;
  }
}

.about-nav ul li a{
  font-size: 1.3rem;
  line-height: 1.5em;
}

@media print, screen and (min-width:768px) {
.about-nav ul li a{
  font-size: 1.6rem;
  }
}

.about-nav ul li a span{
  padding: 0 0 5px 0;
}

/*about_us
========================================================================================================
*/

.about-wrap{
  position: relative;
  width:100%;
  padding: 60px 0 30px 0;
  margin: 0 auto 60px auto;
}
@media print, screen and (min-width:768px) {
.about-wrap{
  width:100%;
  max-width: 1200px;
  padding: 100px 0 0 0;
  margin: 0 auto 100px auto;
  }
}

.about-wrap figure{
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 100;
}

.about-wrap figure img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: cover;
}
@media print, screen and (min-width:1100px) {
.about-wrap figure img{
  display: block;
  width:100%;
  height: 90%;
  object-fit: cover;
  }
}

.about-wrap span{
  display: block;
  position: relative;
  font-size: 1.4rem;
  color: #FFF;
  text-align: center;
  z-index: 101;
}
@media print, screen and (min-width:768px) {
.about-wrap span{
  font-size: 2.0rem;
  }
}

.about-wrap h3{
  position: relative;
  font-size: 2.6rem;
  color: #FFF;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  margin: 15px auto 0 auto;
  z-index: 101;
}
@media print, screen and (min-width:768px) {
.about-wrap h3{
  font-size: 4.2rem;
  margin: 30px auto;
  }
}

.flow-box{  
  counter-reset: number 0;
  position: relative;
  width:90%;
  padding: 0 0 40px 0;
  margin: 120px auto 0 auto;
  z-index: 101;
}

@media print, screen and (min-width:768px) {
.flow-box{  
  position: relative;
  width:90%;
  padding: 0 0 100px 0;
  margin: 120px auto 0 auto;
 }
}
@media print, screen and (min-width:1100px) {
.flow-box{  
  position: relative;
  width:100%;
  max-width:1000px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  column-gap:18px;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  margin: 90px auto 0 auto;
  }
}

.flow-box dl{
  position: relative;
  width:100%;
  margin: 0 auto;
}
@media print, screen and (min-width:1100px) {
.flow-box dl{
  position: relative;
  width:100%;
  margin:100px 0 0 0;
 }
}

.flow-box dl + dl{
  margin: 110px auto 0 auto;
}
@media print, screen and (min-width:1100px) {
.flow-box dl + dl{
  margin:100px 0 0 0;
 }
}

.flow-box dl dt{
  width:100%;
  height: 150px; 
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #FFF;
  position: absolute;
  top:-80px;
  left:0;
  margin: 0 auto;
}
@media print, screen and (min-width:1100px) {
.flow-box dl dt{
  width:100%;
  height: 170px;
  position: absolute;
  top:-110px;
  left:0;
  }
}

.flow-box dl dt p{
  position: relative;
  color: #FFF;
  text-align: center;
  padding: 40px 0 0 0;
  margin: 40px 0 0 0;
  z-index: 105;
}
@media print, screen and (min-width:1100px) {
.flow-box dl dt p{
  padding: 50px 0 0 0;
  margin: 35px 0 0 0;
  }
}

.flow-box dl dt p span{
  display: block;
  font-size: 1.2rem;
  margin: 5px 0 0 0;
}

.flow-box dl dt p::before{
  counter-increment: number 1;
  content: "0" counter(number) " "; 
  font-weight: 400;
  font-size: 3.0rem;
  position: absolute;
  top:0;
  left:50%;  
  transform: translateX(-50%);  
}

.flow-box dl dt::before{
  display: block;
  content: "";
  width:150px;
  height:150px;
  background: url("/images/about_us/about_us02.png") no-repeat 50% 50%;
  background-size: 100%;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  z-index: 102;
}
@media print, screen and (min-width:1100px) {
.flow-box dl dt::before{
  display: block;
  content: "";
  width:170px;
  height:170px;
  background: url("/images/about_us/about_us02.png") no-repeat 50% 50%;
  background-size: 100%;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  z-index: 102;
  }
}

.flow-box dl dd{
  position: relative;   
  background: #FFF; 
  border-radius: 20px;  
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 80px 20px 30px 20px;
  margin: 0 0 0 0;
}
@media print, screen and (min-width:768px) {
.flow-box dl dd{
  position: relative;
  height: 100%;
  background: #FFF; 
  border-radius: 20px;  
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 80px 20px 30px 20px;
  margin: 0 0 0 0;
  }
}

.flow-box dl dd p{
  position: relative;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 2em; 
  z-index: 302;
}

#about ul.about-btn-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  margin: 0 auto 60px auto;
}
@media print, screen and (min-width:768px) {
#about ul.about-btn-box{
  column-gap: 20px; 
  margin: 0 auto 100px auto;
  }
}

#about ul.about-btn-box a.btn03{
  width: 175px;
  /*height: 40px;
  border-radius: 20px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
#about ul.about-btn-box a.btn03{
  width: 300px;
  height: 60px;
  border-radius: 30px;
  }
}

#about ul.about-btn-box a.btn03 span{
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.3em;
}

@media print, screen and (min-width:768px) {
#about ul.about-btn-box a.btn03 span{
  font-size: 1.6rem;
  }
}
/*feature
========================================================================================================
*/

.feature-wrap{  
  counter-reset: number 0;
  position: relative;
  width:100%;
  background: url("/images/feature/feature05.jpg") no-repeat 0 0;
  background-size: cover;
  padding: 60px 0;
  margin: 0 auto 40px auto;
}

@media print, screen and (min-width:768px) {
.feature-wrap{  
  counter-reset: number 0;
  position: relative;
  width:100%;
  background: url("/images/feature/feature05.jpg") no-repeat 0 0;
  background-size: cover;
  padding: 120px 0;
  margin: 0 auto 120px auto;
  }
}

.feature-wrap h3{
  font-size: 2.6rem;
  font-weight: 700;
  color: #FFF;
  text-align: center;  
  line-height: 1.5em;
  margin: 0 auto 60px auto;
}
@media print, screen and (min-width:768px) {
.feature-wrap h3{
  font-size: 3.6rem;
  margin: 0 auto 90px auto;
  }
}

.feature-box{  
  width:90%;
  background: #FFF;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  padding: 30px;
  margin: 20px auto 0 auto;
}

@media print, screen and (min-width:1100px) {
.feature-box{  
  width:90%;
  max-width: 1200px;
  background: #FFF;
  display: grid;
  grid-template-columns: 1fr 500px;
  grid-template-rows: auto;
  column-gap: 70px;
  padding: 60px;
  margin: 20px auto 0 auto;
  }
}

.feature-box01{
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print, screen and (min-width:768px) {
.feature-box01{
  min-height: 360px;
  }
}

.feature01 .feature-box01{
  background:url("/images/feature/feature01.jpg") no-repeat 0 0;
  background-size: cover;
}
.feature02 .feature-box01{
  background:url("/images/feature/feature02.jpg") no-repeat 0 0;
  background-size: cover;
}
.feature03 .feature-box01{
  background:url("/images/feature/feature03.jpg") no-repeat 0 0;
  background-size: cover;
}
.feature04 .feature-box01{
  background:url("/images/feature/feature04.jpg") no-repeat 0 0;
  background-size: cover;
}

.feature-box01 h4{
  position: relative;
  width:170px;
  height: 170px;
  background: url("/images/about_us/about_us02.png") no-repeat 50% 50%;
  background-size: 100%;
  color: #FFF;
  text-align: center;
  padding: 85px 0 0 0;
  margin: 0 auto;
}

.feature-wrap h4::before{
  counter-increment: number 1;
  content: "0" counter(number) " "; 
  font-weight: 400;
  font-size: 3.0rem;
  position: absolute;
  top:40px;
  left:50%;  
  transform: translateX(-50%); 
}

.feature-box01 h4 span{
  display: block;
  font-size: 1.2rem;
  margin: 5px 0 0 0;
}

.feature-box02 dt{
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.5em;
  padding: 30px 0 20px 0;
}
@media print, screen and (min-width:768px) {
.feature-box02 dt{
  font-size: 2.6rem;
  font-weight: 700;
  padding: 40px 0;
  }
}
@media print, screen and (min-width:1100px) {
.feature-box02 dt{
  font-size: 2.6rem;
  font-weight: 700;
  padding: 20px 0 30px 0;
  }
}

.feature-box02 dd{
  line-height: 2.0em;
  margin:  0 0 30px 0;
}

@media print, screen and (min-width:768px) {
.feature-box02 dd{
  line-height: 2.5em;
  margin:  0 0 30px 0;
  }
}

.feature-box02 a{
  margin: 0 auto 20px auto;
}

@media print, screen and (min-width:1100px) {
.feature-box02 a{
  margin: 0;
  }
}