@charset "UTF-8";

.pagesec dt{
  font-weight: 600;
  padding-bottom: 1rem;
}
/*****************************
  pagesec-service
*****************************/
.pagesec-service .box1{
  gap: 5rem;
}
.pagesec-service .box2 img{
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 300px;
  height: auto;
}
.pagesec-service .box3{
  width: 60%;
  position: relative;
}
.pagesec-service .box3::before{
  content: "";
  background: url(../../images/page/service/service.webp)no-repeat center/contain;
  width: 100%;
  height: 100%;
  opacity: .2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -20;
}
.pagesec-service .box3 .txtbox{
  padding: 2rem 0;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .pagesec-service .box1{
    gap: 2rem;
  }
  .pagesec-service .box3{
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
}
/*****************************
  pagesec-merit
*****************************/
.pagesec-merit .list{
  flex-direction: column;
  gap: 2rem;
  padding-top: 3rem;
}
.pagesec-merit .list li{
  width: 90%;
  box-shadow: 0 4px 4px rgb(0 0 0 / 12%), 0 2px 3px -2px rgba(0 0 0 / 18%);
}
.pagesec-merit .list .imgbox{
  background: #1D2063;
  width: 15%;
  flex-direction: column;
}
.pagesec-merit .list .imgbox img{
  aspect-ratio: 1/1;
  object-fit: cover;
  height: auto;
  width: 80%;
  filter: invert(1);
}
.pagesec-merit .list .txtbox{
  width: 85%;
  padding: 2rem 3rem;
  background: #f9f9f9;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagesec-merit .list .txtbox{
    width: 85%;
    padding: 2rem 2rem 3rem;
    box-shadow: 0 4px 4px rgb(0 0 0 / 12%), 0 2px 3px -2px rgba(0 0 0 / 18%);
  }
  .pagesec-merit .list .imgbox{
    width: 15%;
    aspect-ratio: 1/1;
  }
  .pagesec-merit .list li{
    align-items: flex-start;
  box-shadow: none;
}
}
/*****************************
  pagesec-place
*****************************/
.pagesec-place .txtbox{
  padding-top: 3rem;
}
.pagesec-place .imgbox{
  gap: 2rem;
  padding-top: 3rem;
  width: 100%;
}
.pagesec-place .imgbox li{
  width: calc(100% / 5 - 2rem);
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagesec-place .imgbox{
    gap: 1rem;
  }
  .pagesec-place .imgbox li{
    width: calc(100% / 5 - 1rem);
  }
}
/*****************************
  pagesec-flow
*****************************/
.pagesec-flow ol{
  gap: 3rem;
  counter-reset: number;
}
ol li::before {
  color: #1D2063;
  counter-increment: number;
  content: '0' counter(number);
  font-family: serif;
  font-size: 10rem;
  font-weight: 600;
  line-height: 1;
  opacity: .4;
  position: absolute;
  top: 1rem;
  left: -10rem;
  z-index: 1;
}
.pagesec-flow .flowbox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  gap: 4rem;
  position: relative;
}
.pagesec-flow .flowtxt{
  width: 70%;
}
.pagesec-flow .flowbox .imgbox{
  width: 30%;
}
.pagesec-flow .txtbox{
  margin-top: 3rem;
  padding: 3rem;
  border-radius: 10px;
  background: #f9f9f9;
  box-shadow: 0 4px 4px rgb(0 0 0 / 12%), 0 2px 3px -2px rgba(0 0 0 / 18%);
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
  .pagesec-flow .flowbox{
    width: 100%;
    flex-direction: column-reverse;
  }
  .pagesec-flow .flowtxt{
    width: 100%;
  }
.pagesec-flow .flowbox .imgbox{
    width: 60%;
  }
  ol li::before {
  top: 25rem;
  left: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  ol li::before {
    top: 15rem;
    left: 4rem;
  }
}