@charset "utf-8";

.sec-intro {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 830px;
  align-items: center;
  position: relative;
}

.sec-intro .sec-img {
  max-width: calc(812 / 1920 * 100vw);
  width: 100%;
  height: 100%;
}

.sec-intro .sec-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-intro .sec-text {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-left: 10%;
  margin-right: 15%;
}

.sec-intro .tit-ja .char {
  display: inline-block;
  opacity: var(--opacity, 0);
  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.05s * var(--char-index));
  font-family: var(--font-notoserif);
  font-weight: 600;
  font-size: clamp(1.438rem, 0.398rem + 2.17vw, 3rem);
  line-height: clamp(3.75rem, 2.918rem + 1.73vw, 5rem);
  color: #db992c;
}

.sec-intro .sec-text .desc p {
  font-family: var(--font-notosans);
  font-weight: 400;
  font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
  line-height: calc(40 / 18);
  color: #232426;
}

.sec-intro .tit-ja.is-active {
  --opacity: 1;
}

.sec-intro::before {
  content: "";
  background: url(/system_panel/uploads/images/20260519000135663466.png) no-repeat top/100% auto;
  position: absolute;
  height: 761px;
  top: 0;
  width: 100%;
  z-index: -1;
}

.main-contents {
  overflow: hidden;
}

.main-contents .inner {
  padding: 101px 0 120px;
}

.main-contents .sec-title {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
}

.main-contents .sec-title .tit-ja {
  font-family: var(--font-notoserif);
  font-weight: 400;
  font-size: 16px;
  color: #db992c;
}

.main-contents .sec-title .tit-en {
  font-family: var(--font-shippori);
  font-weight: 600;
  font-size: clamp(3rem, 1.67rem + 2.78vw, 5rem);
  color: #db992c;
}

.features {
  margin-bottom: 120px;
}

.features .sec-title {
  margin-bottom: 69px;
}

.features .list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.features .list .item {
  display: flex;
  align-items: center;
  gap: 113px;
}

.features .list .item.reverse {
  flex-direction: row-reverse;
}

.features .list .item:nth-child(1) {
  margin-bottom: 35px;
}

.features .list .item .item-img {
  max-width: 524px;
  width: 48%;
  position: relative;
  z-index: 5;
}

.features .list .item .item-img::before {
  content: "";
  position: absolute;
  background: url(/system_panel/uploads/images/20260519003218344155.svg) no-repeat center/contain;
  width: 128px;
  height: 90px;
  z-index: -1;
}

.features .list .item .text {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 56%;
}

.features .list .item .tit-ja {
  font-family: var(--font-notoserif);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.334rem + 0.35vw, 1.75rem);
  color: #db992c;
}

.features .list .item .tit-en {
  font-family: var(--font-notoserif);
  font-weight: 400;
  font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
  color: #db992c;
}

.features .list .item .desc p {
  font-weight: 400;
  font-size: 16px;
  line-height: calc(28 / 16);
  color: #485057;
}

.features .list .item:nth-child(1) .item-img::before,
.features .list .item:nth-child(3) .item-img::before {
  top: -45px;
  left: -43px;
}

.features .list .item:nth-child(2) {
  margin-bottom: 117px;
}

.features .list .item:nth-child(2) .item-img::before {
  bottom: -45px;
  right: -43px;
}

.support {
  margin-bottom: 80px;
}

.support .sec-title {
  margin-bottom: 85px;
}

.support .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(40%, 430px));
  grid-template-rows: repeat(2, 441px);
  gap: 60px;
  justify-content: center;
}

.support .list .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #fff;
  border: 1.5px solid #db992c;
}

.support .list .item .item-img {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.support .list .item .tit-ja {
  font-family: var(--font-notoserif);
  font-weight: 600;
  font-size: clamp(1.125rem, 0.709rem + 0.87vw, 1.75rem);
  color: #db992c;
  margin-bottom: 20px;
}

.support .list .item .desc p {
  font-weight: 400;
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
  line-height: calc(28 / 16);
  text-align: center;
  color: #485057;
}

.banner {
  position: relative;
}

.banner .morebtn {
  max-width: 285px;
  margin-left: auto;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}

.banner .morebtn a {
  padding: 5px 17px 5px 18px;
  background: #db992c;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.banner .morebtn .arrow {
  overflow: hidden;
  position: relative;
  width: 44px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.banner .morebtn .arrow:after {
  content: "";
  width: 1px;
  height: 98%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  background-color: #fff;
}

.banner .morebtn .arrow img {
  transform: rotate(-46deg);
  transition: 0.8s ease;
  width: 23px;
  height: auto;
}

.banner .morebtn a p {
  font-family: var(--font-notosans);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.709rem + 0.35vw, 1.125rem);
  line-height: calc(40 / 18);
  color: #fff;
}

.banner .morebtn .arrow .back {
  position: absolute;
  transform: translateY(102%) rotate(-46deg) translateX(-105%);
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.banner .morebtn:hover .arrow .front {
  transform: translateY(-100%) rotate(-46deg) translateX(100%);
}

.banner .morebtn:hover .arrow .back {
  transform: translateY(2%) rotate(-46deg) translateX(5%);
}

.banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 64px;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background-color: #db992c;
  z-index: 5;
}

.banner .item-img {
  position: relative;
}

.banner .text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 93px;
  height: fit-content;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 43px;
}

.banner .text .item-tit {
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 5;
}

.banner .text .item-tit::before {
  content: "";
  background: url(/system_panel/uploads/images/20260519005725443046.svg) no-repeat center/contain;
  width: 32px;
  height: 30px;
  position: absolute;
  top: -15px;
  left: -16px;
  z-index: -1;
}

.banner .text .item-tit::after {
  content: "";
  background: url(/system_panel/uploads/images/20260519005725404649.svg) no-repeat center/contain;
  width: 53px;
  height: 45px;
  position: absolute;
  bottom: -29px;
  right: -17px;
  z-index: -1;
}

.banner .text .item-tit .tit-ja {
  font-family: var(--font-notosans);
  font-weight: 500;
  font-size: clamp(2rem, 0.836rem + 2.43vw, 3.75rem);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0px 3px 6px rgba(80, 80, 80, 0.16);
}

.banner .text .item-tit .tit-ja.f-40 {
  font-size: clamp(1.25rem, 0.418rem + 1.73vw, 2.5rem);
}

.banner .text .desc p {
  font-family: var(--font-notosans);
  font-weight: 400;
  font-size: clamp(1rem, 0.834rem + 0.35vw, 1.25rem);
  color: #fff;
  text-shadow: 0px 3px 6px rgba(74, 74, 74, 0.16);
}

.banner .text .desc p br {
  display: none;
}

@media (max-width: 1480px) {
  .features .list {
    width: 100%;
  }

  .w1344 {
    width: 80%;
  }
}

@media (max-width: 1200px) {
  .sec-intro {
    gap: 4%;
  }

  .sec-intro .sec-text {
    margin-left: 0;
    margin-right: 13%;
  }

  .features .list .item {
    gap: 50px;
  }

  .support .list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .support .list .item {
    padding: 0 20px;
  }

  .banner .text {
    gap: 30px;
    left: 30px;
  }
}

@media (max-width: 900px) {
  .w1344 {
    width: 86%;
  }

  .sec-intro::before {
    height: 175px;
    background-position: right;
    top: auto;
    bottom: 113px;
  }

  .sec-intro {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 80px;
  }

  .sec-intro .sec-img {
    max-width: none;
    width: 100%;
    height: 324px;
  }

  .sec-intro .sec-text {
    width: 86%;
    margin: 0 auto;
    gap: 0;
  }

  .sec-main {
    width: 86%;
  }

  .main-contents .inner {
    width: 80%;
    padding: 0 0 80px;
  }

  .main-contents .sec-title {
    align-items: center;
    margin-bottom: 40px;
  }

  .features .list .item,
  .features .list .item.reverse {
    flex-direction: column;
    gap: 20px;
  }

  .features .list .item .item-img {
    max-width: none;
    width: 100%;
  }

  .features .list .item .text {
    width: 100%;
  }

  .features .list .item .text .item-tit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .features .list .item .item-img::before {
    width: 73px;
    height: 51px;
  }

  .features .list .item:nth-child(1) .item-img::before,
  .features .list .item:nth-child(3) .item-img::before {
    top: -26px;
    left: -20px;
  }

  .features .list .item:nth-child(2) .item-img::before {
    bottom: -21px;
    right: -20px;
  }

  .features {
    margin-bottom: 80px;
  }

  .support {
    width: 93%;
    margin: 0 auto 80px;
  }

  .support .list {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .support .list .item {
    padding: 38px 36px;
  }

  .support .list .item .item-img {
    width: 96px;
    margin-bottom: 16px;
  }

  .support .list .item .tit-ja {
    margin-bottom: 10px;
  }

  .banner .item-img {
    height: 296px;
  }

  .banner .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .banner .morebtn {
    max-width: 198px;
  }

  .banner .text {
    left: 0;
    right: 0;
    width: 80%;
    margin: auto;
  }

  .banner .text .desc p br {
    display: block;
  }
}

@media (max-width: 390px) {
  .sec-intro .sec-text {
    width: 89%;
  }

  .main-contents .inner {
    width: 88%;
  }

  .banner .text {
    width: 90%;
  }
}