@charset "utf-8";

.reason-top{
  margin:100px 0 40px;
}

.reason-top .container{
  max-width:980px;
}

.reason-top-txt{
  padding:0 5% 3rem;
  border:0.5px solid #212B27;
  border-radius:10px;
}

.reason-top-txt h2{
  font-size:clamp(1.25rem, 0.667rem + 1.94vw, 3rem);
  padding: 0.5rem 1rem;
  background: #fff;
  line-height: 1;
  width: fit-content;
  margin: -2rem auto 2rem;
}

.reason-top-txt h2 strong{
  background: linear-gradient(transparent 70%, #8AC7C9 30%);
}

.reason-top-txt p{
  width: fit-content;
  margin: 0 auto ;
  font-size:clamp(0.875rem, 0.792rem + 0.28vw, 1.125rem);
}

.reason-top-txt p strong{
  font-weight:bold;
  font-size:clamp(1rem, 0.917rem + 0.28vw, 1.25rem);
}


.scroll_down{
  margin:0 auto;
  height:96px;
  position: relative;
  width: fit-content;
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:#003455;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
  z-index:10;
}

@keyframes circlemove{
  0%{bottom:90px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:1px;
  height: 96px;
  background:#9F9D9D;
}

.quality .container{
  max-width:1345px;
}

.quality h2{
  text-align:center;
  font-size:clamp(1.25rem, 0.833rem + 1.39vw, 2.5rem);
}

.quality-top{
  padding:100px 0 120px;
  position:relative;
  z-index:1;
}

.quality-top::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  background:url(https://kaiou-service.com/system_panel/uploads/images/20260629121745820594.png) no-repeat center/contain;
}

.quality-wrap{
  max-width:1090px;
  display:flex;
  align-items:center;
}

.quality-wrap:not(:first-child){
  margin-top:7.5rem;
}

.quality-wrap:nth-child(even){
  margin-left:auto;
  flex-direction: row-reverse;
}

.quality-wrap:nth-child(even) .quality-box{
  margin-left: auto;
  text-align: left;
}

.quality-wrap:nth-child(even) .quality-txt h3{
  padding-right: 0;
  padding-left: 15%;
  justify-content: flex-start;
}

.quality-wrap > img{
  width:31%;
}

.quality-txt{
  width:69%;
}

.quality-txt h3{
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: end;
  padding-right: 15%;
  margin-bottom: 1.5rem;
}

.quality-txt h3 strong{
  font-weight:400;
  font-family: "Noto Sans", sans-serif;
  font-size:clamp(0.875rem, 0.833rem + 0.14vw, 1rem);
}

.quality-box{
  width:85%;
  margin-top: -1rem;
  text-align:right;
  font-size:14px;
}

.quality-box h4{
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
  margin:1.5rem 0;
}

.quality-box .blue-p,
.quality-box .blue-p em{
  font-weight:bold;
  font-size:1rem;
  color:#2D96D9;
}

.quality-box strong,
.quality-box em{
  color:#003455;
  font-size:1rem;  
  font-weight:bold;
}


.quality-bottom{
  padding:100px 0 200px;
  text-align:center;
  background:url(https://kaiou-service.com/system_panel/uploads/images/20260629122228646313.png) no-repeat center/cover;
}

.quality-bottom .container{
  max-width:720px;
}

.quality-bottom h2{
  font-size:clamp(1.25rem, 0.667rem + 1.94vw, 3rem);
}

.quality-bottom h2 strong{
  background: linear-gradient(transparent 70%, #8AC7C9 70% 90%, transparent 90%);
}

.quality-bottom img{
  max-width:525px;
  margin:4rem auto 0;
}

.reason-service{
  padding:5rem 0;
  background:#DBEAF4;
}

.reason-service .container{
  max-width:1030px;
}

.reason-service-wrap{
  display:flex;
  gap:1rem 1.5rem;
  flex-wrap:wrap;
}

.reason-service-item{
  width:calc((100% - 4.5rem ) / 4);
  padding:1.5rem 1rem  3rem 2.5rem;
  border-left:0.8px solid #9F9D9D;
  border-top:0.8px solid #9F9D9D;
}

.reason-service-item p{
  line-height:1;
}

.reason-service-item p:first-child{
  color:#9F9D9D;
  font-size:12px;
  margin-bottom:1rem;
}

.reason-service-item p:last-child{
  font-size:20px;
  font-weight:bold;
}

.flow{
  margin:10rem 0;
}

.flow .container{
  max-width:1445px;
  width:75%;
}

.flow-bg{
  position:relative;
  z-index:1;
}

.flow-bg::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
  width:auto;
  height:90%;
  aspect-ratio:300/2050;
  background:url(https://kaiou-service.com/system_panel/uploads/images/20260629151044485410.png) no-repeat center/cover;
}

.flow-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:3.5rem 0;
  max-width:1040px;
  margin:0 auto;
}

.flow-item + img{
  max-width:1040px;
  margin:0 auto;
}

.flow-item > img{
  width:32%;
}

.flow-txt{
  width:63%;
}

.flow-p{
  display: flex;
  align-items: flex-start;
  gap:8px;
}

.flow-p:not(:last-child){
  margin-bottom:10px;
}

.flow-p img{
  width:20px;
  padding-top: 6px;
}

.flow-title{
  display: flex;
  align-items: center;
  gap:1rem;
  margin-bottom:1rem;
}

.flow-title .english{
  color:#2D96D9;
  font-weight:500;
}

.flow-title h3{
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
}

.flow-box{
  padding:1rem 2rem;
  border-radius:10px;
  border:1px solid #2D96D9;
  margin-top:2rem;
}

.flow-bottom{
  padding:5rem 7.5%;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position:relative;
  max-width:1340px;
  margin:7.5rem auto 0;
}

.flow-bottom::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  background:url(https://kaiou-service.com/system_panel/uploads/images/20260629150201630721.png) no-repeat center/cover;
  --radius: 32px;
  clip-path: polygon(
    var(--radius) 0,
    100% 0,
    100% calc(100% - var(--radius)),
    calc(100% - var(--radius)) 100%,
    0 100%,
    0 var(--radius)
  );
}

.flow-bottom > img{
  width: 46%;
  position: absolute;
  bottom: 10%;
  right: 2.5%;
}

.flow-bottom-txt{
  width:55%;
}

.flow-bottom-txt h3{
  font-size:clamp(1.25rem, 1rem + 0.83vw, 2rem);
  margin-bottom:1rem;
}

.flow-bottom-txt p:last-child{
  margin-top:1.5rem;
  font-size:10px;
  line-height:1;
}

@media screen and (max-width: 1600px) {
  .flow-bottom > img{
    bottom: 15%;
  }
  .flow-bottom {
    padding: 3rem 7.5%;
  }
}

@media screen and (max-width: 1400px) {
  .flow-bottom > img{
    bottom: 20%;
  }
}

@media screen and (max-width: 1024px) {
  .quality .container,
  .flow .container{
    width:90%;
  }
  .quality-box {
    width: 90%;
  }
  .quality-txt h3{
    padding-right: 10%;
  }
}

@media screen and (max-width: 960px) {
  .reason-service-item {
    width: calc((100% - 1.5rem) / 2);
  }
  .flow-bottom {
    flex-direction: column-reverse;
    gap: 2.5rem;
  }
  .flow-bottom > img{
    position: relative;
    right: auto;
    bottom: auto;
    width: 80%;
  }
  .flow-bottom-txt {
    width: fit-content;
  }
  .flow-item{
    flex-direction: column;
    gap: 2.5rem;
  }
  .flow-item > img {
    width: 100%;
    max-width: 400px;
  }
  .flow-txt {
    width: 100%;
  }
  .flow-bg::before{
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  .quality-box{
    font-size: 13px;
  }
  .flow .container{
    width:80%;
  }
}

@media screen and (max-width: 767px) {
  .reason-top-txt h2{
    margin: -1rem auto 1rem;
    font-size: 17px;
    padding: 0.5rem;
  }
  .reason-top-txt {
    padding: 0 5% 1.5rem;
  }
  .reason-top {
    margin: 3rem 0 2rem;
  }
  .quality-txt{
    width:100%;
  }
  .quality-txt h3,
  .quality-wrap:nth-child(even) .quality-txt h3{
    justify-content: center;
    padding: 0;
    gap: 8px;
  }
  .quality-txt h3 + .sp{
    width: 70%;
    margin: 0 auto 1rem;
  }
  .quality-box{
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  .quality-box img{
    order: 5;
    margin-top: 2rem;
  }
  .quality-top::before{
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-size: cover;
    width: 115%;
    opacity: 0.8;
  }
  .quality-wrap:not(:first-child) {
    margin-top: 4rem;
  }
  .quality-bottom {
    padding: 3rem 5%;
  }
  .quality-bottom img{
    margin: 2rem auto 0;
  }
  .reason-service-item{
    padding: 1rem 0.5rem 1.5rem;
  }
  .reason-service {
    padding: 3rem 0;
  }
  .flow {
    margin: 3rem 0;
  }
  .flow-item{
    padding: 2.5rem 0;
    gap: 1.5rem;
  }
  .flow-item:first-child{
    padding-top:0;
  }
  .flow-title{
    margin-bottom: 0.5rem;
  }
  .flow-box{
    padding: 1rem 1rem;
    margin-top: 1rem;
  }
  .flow-bottom{
    margin: 1rem auto 0;
    padding: 2rem 5%;
  }
  .flow .container {
    width: 90%;
  }
}