@charset "utf-8";
/* スマホ用 */
@media screen and (max-width: 600px) {
	html {
	scroll-behavior: smooth;
	scroll-padding-top:62px;
}
  body{
	  animation: bugfix infinite 1s;
	  -webkit-animation: bugfix infinite 1s;
  }
  @keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
.header-nav-sp{
	display: block;
}
#overlay-button {
  position: absolute;
  right: 1.0rem;
  top: 0.40rem;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  background-color: #333;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  background-color: #333;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #fff;
}

input[type=checkbox] {
  display: none; 
  
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible; 
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
  
  
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);

}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);


}
#overlay {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
}
#overlay.active {

}
#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
  width: 100%;
  height: 100vh;
  padding: 0 5.0rem;
  list-style-type: none;
}
#overlay ul li {
  width: 100%;
  padding-bottom: 2.0rem;
  padding-left: 1.0rem;
  margin-bottom: 2.0rem;
  border-bottom: 1px solid #fff;
}
#overlay ul li:first-child{
  border-top: 1px solid #fff;
  padding-top: 2.0rem;
}
#overlay ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 900;
}
#overlay ul li a:hover {
  color: #000!important;
}
  .pc {
	  display: none;
  }
  header .header-inner, #keyv article, #intro article, .about-box, .merit-list, .flow-box {
	  max-width: none;
  }
  #intro {
	  padding: 5.0rem 0;
  }
  #about article h2.ttl, #merit article h2.ttl, #flow article h2.ttl {
	  padding: 2.5rem 3.0rem;
	  line-height: 1.2;
  }
  header .header-inner h1{
	  width: 200px;
  }
  header .header-inner .header-nav {
	  width: 100%;
	  display: none;
  }
  #keyv {
	  height: 580px;
	  overflow-x: hidden;
  }
  #keyv article:after {
	  right: -7.5rem;
	  width: 320px;
	  height: 320px;
  }
  #keyv .keyv-txt {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  bottom: 0;
	  left: 0;
  }
  #keyv .keyv-txt ul{
	  position: absolute;
	  top: 8.0rem;
	  flex-wrap: wrap;
  }
  #keyv .keyv-txt ul li{
	  width: 160px;
	  height: 160px;
	  margin-right: 0;
	  margin-bottom: 1.0rem;
  }
  #keyv .keyv-txt ul li:nth-child(2){
	  margin-left: auto;
  }
  #keyv .keyv-txt ul li .keyv-txt-inner h2.keyv-point-ttl {
      -webkit-text-stroke: 2px #fff;
	  text-stroke: 2px #fff;
	  paint-order: stroke;	  
  }
  #keyv .keyv-txt ul li:last-child{
	  margin-right: 0;
  }
  .keyv-ttl-box {
	  position: absolute;
	  bottom: 1.0rem;
  }
  #keyv .keyv-txt h2.keyv-ttl {
	  font-size: 2.4rem;
  }
  #keyv .keyv-txt h3.keyv-subttl {
	  font-size: 1.6rem;
	  line-height: 1.4;
  }
  #intro article .intro-L {
	  width: 100%;
	  padding-bottom: 0;
	  order: 2;
  }
  #intro article .intro-L h3.subttl {
	  line-height: 1.4;
  }
  #intro article .intro-R {
	  width: 100%;
	  height: 220px;
	  order: 1;
  }
  .about-box .about-box-L {
	  width: 100%;
	  height: 320px;
	  order: 2;
  }
  .about-box .about-box-R {
	  width: 100%;
	  order: 1;
  }
  .about-flow li{
	  width: 100%;
	  text-align: center;
	  margin-bottom: 3.0rem;
  }
  .about-flow li:before{
	  position: absolute;
	  top: 115%;
	  left: 50%;
	  margin-left: -15px;
	  border: 15px solid transparent;
	  border-top: 15px solid #fff;
  }
  .about-flow li:last-child{
	  margin-bottom: 0;
  }
  .merit-box h2.subttl {
	  font-size: 2.5rem;
	  line-height: 1.2;
  }
  .counter {
	  font-size: 4.0rem;
  }
  .counter-label {
	  font-size: 1.4rem;
  }
  .merit-list li{
	  width: 100%;
	  padding: 3.0rem;
	  margin: 0 0 2.0rem;
  }
  .merit-list li .image {
	  width: 150px;
  }
  .merit-list li .ttl {
	  font-size: 2.0rem;
  }
  .merit-list li .txt {
	  font-size: 1.6rem;
  }
  .flow-box {
	  display: block;
  }
  .flow-box .flow-box-subttl {
	  width: 100%;
	  margin: 0 0 2.0rem;
  }
  .flow-box .flow-box-subttl h3{
	  writing-mode: horizontal-tb;
	  font-size: 1.8rem;
	  padding: 1.0rem 0;
  }
  .flow-box .flow-list {
	  width: 100%;
  }
  .flow-list li{
	  display: block;
	  width: 100%;
  }
  .flow-list li .no {
	  width: 100%;
	  height: 35px;
	  font-size: 3.0rem;
  }
  .flow-list li .no span{
	  font-size: 1.6rem;
  }
  .flow-list li .detail {
	  width: 100%;
  }
  .flow-list li .detail h3 {
      font-size: 2.0rem;
      margin-bottom: 1.0rem;
  }
  .flow-list li .detail .txt {
	  line-height: 1.4;
	  font-size: 1.6rem;
  }
  .faq-list, .company-list, .contact-form-box {
	  width: 90%;
  }
  .accordion-hidden:checked+.accordion-open+.accordion-box {
	  padding-right: 2.0rem;
  }
  .contact-form-box ul li h4, .contact-form-box ul li .input-form {
	  width: 100%;
  }
  .contact-form-box {
	  padding: 5.0rem 2.0rem;
  }
  .company-list-box {
	  padding: 3.0rem;
  }
  .company-list-box li{
	  margin-bottom: 2.0rem;
	  padding-bottom: 1.75rem;
	  border-bottom: 1px solid #ccc;
  }
  .company-list-box li:last-child{
	  margin-bottom: 0;
  }
  .company-list-box li span.col {
	  width: 100%;
	  border-bottom: none;
	  margin-bottom: 0.5rem;
  }
  .company-list-box li span{
	  width: 100%;
	  border-bottom: 0;
	  padding: 0;
  }
}

/* タブレット縦向き用 */
@media screen and (min-width: 601px) and (max-width: 900px) {
  .pc {
	  display: none;
  }
  header .header-inner h1{
	  width: 150px;
  }
  header .header-inner .header-nav .header-list li{
	  font-size: 1.4rem;
	  margin-right: 1.5rem;
  }
  header .header-inner .header-nav {
	  width: 565px;
  }
  #keyv {
  	  height: 650px;
  	  overflow-x: hidden;
  }
  #keyv article:after{
	  right: -10.0rem;
  }
  #keyv .keyv-txt {
	  bottom: 3.0rem;
  }
  #keyv .keyv-txt ul li{
	  margin-right: 2.0rem;
	  width: 160px;
	  height: 160px;
  }
  #intro article .intro-L {
	  padding: 5.0rem 3.0rem 5.0rem 0;
  }
  #intro article .intro-L h2.ttl {
	  font-size: 3.0rem;
  }
  #about article h2.ttl, #merit article h2.ttl, #flow article h2.ttl {
	  padding: 2.5rem 3.0rem;
  }
  .about-box .about-box-L {
	  order: 2;
	  width: 100%;
	  height: 350px;
  }
  .about-box .about-box-R {
	  order: 1;
	  width: 100%;
  }
  .merit-list li{
	  padding: 2.0rem;
  }
  .merit-list li .image {
	  width: 120px;
  }
  .merit-list li .ttl {
	  font-size: 1.8rem;
  }
  .merit-list li .txt {
	  font-size: 1.4rem;
  }
  .faq-list, .contact-form-box, .company-list {
	  width: 90%;
  }
}

/* タブレット横向き用 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 横タブレット・小型PC向けスタイル */
}

/* PC用 */
@media screen and (min-width: 1025px) {
  /* PC向けのスタイル */
}