@charset "utf-8";

.top-page {
  color: #293382;
}

.top-kv {
  position: relative;
  width: 100%;
  height: 660px;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.top-kv__inner {
  width: min(calc(100% - 80px), 1200px);
  height: 100%;
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 620px;
  align-items: center;
  gap: 0;
}

.top-kv__content {
  position: relative;
  z-index: 10;
  width: auto;
}

.top-kv__title {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.top-kv__text {
  margin: 40px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}

.top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 40px;
  padding: 0 26px 0 30px;
  color: #fff;
  background: #29378c;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.top-button::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 24px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.top-button:hover {
  opacity: 0.7;
}


.top-strength {
  padding: 0 0 40px 0;
}

.top-strength__inner {
  padding: 0 28.5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: start;
}

.top-strength-item{
  position: relative;
}

.top-strength-item:nth-child(2) {
  margin-top: 70px;
}

.top-strength-item:nth-child(3) {
  margin-top: 140px;
}

.top-strength-item__image {
  width: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
}

.top-strength-item__number {
  margin: 18px 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: #baa85d;
}

.top-strength-item__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
}

.top-strength-item__text {
  margin-top: 12px;
  line-height: 1.8;
}

.top-blue-area {
  position: relative;
  margin-top: 170px;
  padding: 0 0 220px;
  background: #293382;
  color: #fff;
  overflow-x: clip;
}
.top-blue-area::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -170px;
  width: 150%;
  height: 840px;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: #293382;
  z-index: 0;
}
.top-blue-area::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -170px;
  width: 150%;
  height: 840px;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  background: #293382;
  z-index: 0;
}
.top-blue-area__inner {
  position: relative;
  z-index: 1;
  padding: 0 28.5px;
}

.top-processing{
  position: relative;
  z-index: 1;
  padding: 0 0 90px;
  color: #fff;
}

.top-processing__inner {
  position: relative;
  z-index: 1;
}

.top-processing__heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.top-processing__title {
  margin: 10px 0 0;
  font-size: 36px;
}

.top-processing__lead {
  margin-top: 20px;
  line-height: 2;
}

.top-processing-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.top-feature-card {
  padding: 18px 18px 24px;
  background: #fff;
  color: #fff;
  border-radius: 6px;
  background-color: #152375;
  border: 1px solid #5260b2;
}

.top-processing-card__image {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.top-processing-card__title {
  margin: 18px 0 0;
  font-size: 32px;
  color:#baa85d
}
.top-feature-card__note{
  font-size: 16px;
  color:#baa85d
}

.top-processing-card__text {
  margin-top: 12px;
  line-height: 1.8;
}

.top-processing-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 36px;
  padding: 28px 36px;
  background: #fff;
  color: #fff;
  background-color: #152375;
  border: 1px solid #5260b2;
  border-radius: 6px;
  text-decoration: none;
}

.top-processing-detail strong {
  display: block;
  font-size: 24px;
}

.top-processing-detail small {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
}

.top-processing-detail img {
  width: 480px;
  height: 220px;
  object-fit: cover;
}


.top-equipment {
  position: relative;
  z-index: 1;
  margin-top: 72px;
}

.top-equipment__heading {
  z-index: 2;
  text-align: center;
  margin-bottom: 40px;
}

.top-equipment__title {
  margin: 0;
  font-size: 32px;
}

.top-equipment__text {
  margin-top: 16px;
  line-height: 1.8;
}

.top-equipment__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.top-equipment-card {
  padding: 18px;
  background: #fff;
  color: #293382;
  background-color: #152375;
  border-radius: 6px;
  border: 1px solid #5260b2;
}

.top-equipment-card__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.top-equipment-card__text {
  margin-top: 8px;
  line-height: 1.7;
}

.top-equipment-card--wide {
  grid-column: span 2;
  display: block;
}

.top-equipment-card--wide .top-equipment-card__image {
  width: 100%;
}


.top-equipment-card__title {
  margin: 14px 0 0;
  font-size: 18px;
  color: #baa85d;
}
.top-equipment-card__type {
  margin: 4px 0 0;
  color: #baa85d;
  font-size: 14px;
  font-weight: 700;
}
.top-equipment-card__text {
  margin-top: 12px;
  color: #fff;
}



.top-flow {
  padding: 210px 0 80px;
  background: #fff;
  color: #293382;
}

.top-flow__inner {
  padding: 0 28.5px;
  display: grid;
  grid-template-columns: 32% minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.top-flow__title {
  margin: 0;
  font-size: 32px;
}

.top-flow__text {
  margin-top: 16px;
  line-height: 1.8;
}

.top-flow__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 10px 36px;
  border: 1px solid #293382;
  background-color: #293382;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}
.top-flow__button::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 24px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
} 
.top-flow__button:hover {
  opacity: 0.7;
}

.top-flow__list {
  position: relative;
  display: grid;
  gap: 14px;
}

.top-flow-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 310px;
  gap: 24px;
  align-items: center;
  min-height: 210px;
  padding-bottom: 12px;
}


.top-flow-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 104px;
  height: 1px;
  background-color: #e1e3ec;
}

.top-flow-item__number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background-color: #baa85d;
  font-size: 24px;
  font-weight: 700;
}


.top-flow-item:not(:last-child) .top-flow-item__number::after {
  content: "";
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 1px;
  height: 120px;
  background-color: #baa85d;
  transform: translateX(-50%);
}

.top-flow-item__body {
  min-width: 0;
}

.top-flow-item__title {
  margin: 0;
  font-size: 28px;
}


.top-flow-item__text {
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.7;
}

.top-flow-item__image {
  display: block;
  width: 310px;
  height: 210px;
  object-fit: cover;
  border-radius: 8px;
}

.top-faq {
  padding: 70px 0 100px;
  background: #f2f2f2;
  color: #293382;
}

.top-faq__inner {
  padding: 0 28.5px;
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 72px;
  align-items: start;
}

.top-faq__title {
  margin: 0;
  font-size: 32px;
}

.top-faq__text {
  margin-top: 16px;
  line-height: 1.8;
}

.top-faq__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 10px 36px;
  border: 1px solid #293382;
  background-color: #293382;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}
.top-faq__button::after{
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 24px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.top-faq__button:hover{
  opacity: 0.7;
}

.top-faq__list {
  display: grid;
  gap: 18px;
}

.top-faq-item {
  display: grid;
  grid-template-columns: 40px 1fr 36px;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  color: #293382;
  text-decoration: none;
  border-radius: 4px;
}

.top-faq-item__question {
  font-size: 24px;
  font-weight: 700;
  color: #baa85d;
}

.top-faq-item__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #f4e9be;
  background-color: #f4e9be;
  border-radius: 50%;
  color:#baa85d;
}

.top-flow-item > picture {
  display: block;
  min-width: 0;
}

.top-kv__visual {
    --visual-width: 620px;
    --visual-height: 660px;
    --image-width: 300px;
    --image-height: 200px;
    --image-gap: 20px;
    --image-count: 8;
    --oval-cx: 320px;
    --oval-cy: 440px;
    --oval-rx: 470px;
    --oval-ry: 155px;
    --shape-width: 620px;
    --shape-height: 660px;
    --clip-width: 620px;
    --clip-height: 460px;
    --viewport-width: 620px;
    --viewport-height: 660px;
    --loop-distance: calc(
        (var(--image-height) + var(--image-gap)) * var(--image-count)
    );
    --animation-duration: 45s;
    position: relative;
    width: var(--visual-width);
    height: var(--visual-height);
    isolation: isolate;
}

.top-kv__shape {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: var(--shape-width);
    height: var(--shape-height);
    overflow: visible;
    pointer-events: none;
}

.top-kv__oval {
    fill: #d8c476;
}

.top-kv__oval,
#top-kv-film-clip ellipse {
    cx: var(--oval-cx);
    cy: var(--oval-cy);
    rx: var(--oval-rx);
    ry: var(--oval-ry);
    transform: rotate(-15deg);
    transform-origin: var(--oval-cx) var(--oval-cy);
}

#top-kv-film-clip rect {
    x: 0;
    y: 0;
    width: var(--clip-width);
    height: var(--clip-height);
}

.top-kv__film-viewport {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: var(--viewport-width);
    height: var(--viewport-height);
    overflow: hidden;
    -webkit-clip-path: url("#top-kv-film-clip");
    clip-path: url("#top-kv-film-clip");
    pointer-events: none;
}


.top-kv__film {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    width: var(--image-width);
    will-change: transform;
    backface-visibility: hidden;
    animation-duration: var(--animation-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.top-kv__film--left {
    left: 0;
    animation-name: top-kv-film-down;
}

.top-kv__film--right {
    right: 0;
    animation-name: top-kv-film-up;
    animation-delay: -15s;
}

.top-kv__film-set {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: var(--image-width);
    gap: var(--image-gap);
    padding-bottom: var(--image-gap);
}

.top-kv__image {
    width: var(--image-width);
    height: var(--image-height);
    flex: 0 0 var(--image-height);
    object-fit: cover;
    border-radius: 16px;
    background-color: #ddd;
}

.link,
.link:visited {
  color: inherit; 
  text-decoration: none; 

}
.link:hover {
  opacity: 0.7;
}

@keyframes top-kv-film-down {
    from {
        transform: translate3d(0, calc(var(--loop-distance) * -1), 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes top-kv-film-up {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, calc(var(--loop-distance) * -1), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-kv__film {
        animation-play-state: paused;
    }
}



@media screen and (max-width: 1440px) {
  .top-kv__inner {
    width: min(calc(100% - 160px), 1200px);
  }
}

@media screen and (max-width: 1300px) {
    .top-kv__content {
        width: 300px;
    }
}

@media screen and (max-width: 1100px) {
    .top-kv__inner {
        grid-template-columns: minmax(0, 1fr) 580px;
    }
}

@media screen and (max-width: 1025px) {

  .top-strength {
    padding: 40px 0 80px;
  }
  .top-strength__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .top-strength-item:nth-child(2),
  .top-strength-item:nth-child(3) {
    margin-top: 0;
  }
  .top-strength-item__image {
    height: 200px;
  }

  .top-processing{
    padding: 0 0 64px;
  }

  .top-blue-area {
    margin-top: 95px;
    padding: 0 0 130px;
    overflow-x: clip;
  }
  .top-blue-area::before {
    top: -95px;
    width: 200%;
    height: 600px;
  }
  .top-blue-area::after {
    bottom: -90px;
    width: 200%;
    height: 600px;
  }

  .top-processing__title {
    font-size: 28px;
  }

  .top-processing-card {
    grid-template-columns: 1fr;
  }

  .top-processing-detail {
    display: block;
    padding: 24px;
  }

  .top-processing-detail img {
    width: 100%;
    height: 150px;
    margin-top: 20px;
  }

  .top-equipment__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .top-equipment-card--wide {
    grid-column: 1 / -1;
    display: block;
  }

  .top-equipment-card--wide .top-equipment-card__image {
    width: 100%;
    margin-top: 0;
  }


  .top-flow {
    padding: 130px 0 60px;
  }

  .top-flow__inner,
  .top-faq__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .top-flow__inner {
    padding: 0 28.5px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .top-flow__heading {
    padding-bottom: 36px;
    border-bottom: 1px solid #baa85d;
  }

  .top-flow__list {
    gap: 0;
    padding-top: 12px;
  }

  .top-flow-item {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      clamp(120px, 30vw, 260px);
    grid-template-rows: auto 1fr;
    column-gap: 30px;
    row-gap: 10px;
    min-height: 0;
    padding: 20px 0;
    align-items: start;
  }

  .top-flow-item::after {
    right: 0;
    left: 0;
  }

  .top-flow-item__body {
    display: contents;
  }

  .top-flow-item__number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 50px;
    height: 50px;
    font-size: 25px;
  }

  .top-flow-item__number::after {
    display: none;
  }

  .top-flow-item__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 25px;
    margin-left: 10px;
  }

  .top-flow-item__text {
    grid-column: 1 / 3;
    grid-row: 2;
    margin: 0;
    line-height: 1.7;
  }

  .top-flow-item > picture {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .top-flow-item__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  
  .top-faq {
    padding: 60px 0 80px;
  }

  .top-faq-item {
    grid-template-columns: 32px 1fr 32px;
    padding: 16px;
  }

}

@media screen and (max-width: 1024px) {
    .top-kv__inner {
        width: calc(100% - 8vw);
        grid-template-columns: minmax(0, 1fr) 52vw;
        height: unset;
    }

    .top-kv__visual {
        --visual-width: 60vw;
        --visual-height: 72vw;

        --image-width: 30vw;
        --image-height: 20vw;
        --image-gap: 2vw;

        --oval-cx: 40vw;
        --oval-cy: 44vw;
        --oval-rx: 47vw;
        --oval-ry: 15vw;

        --shape-width: 62vw;
        --shape-height: 66vw;
        --clip-width: 62vw;
        --clip-height: 46vw;
        --viewport-width: 62vw;
        --viewport-height: 66vw;
    }
}

@media screen and (max-width: 768px) {
    .top-kv {
        height: auto;
    }

    .top-kv__inner {
        width: calc(100% - 16vw);
        display: flex;
        flex-direction: column-reverse;
    }

    .top-kv__content {
        width: 100%;
    }

    .top-kv__title {
        font-size: 40px;
    }

    .top-kv__text {
        margin-top: 20px;
        font-size: 14px;
    }

    .top-button {
        margin-top: 20px;
        font-size: 14px;
    }

    .top-kv__visual {
        margin-inline: auto;

        --visual-width: 92vw;
        --visual-height: 60vw;

        --image-width: 45vw;
        --image-height: 30vw;
        --image-gap: 2vw;

        --oval-cx: 46vw;
        --oval-cy: 34vw;
        --oval-rx: 60vw;
        --oval-ry: 20vw;

        --shape-width: 92vw;
        --shape-height: 66vw;
        --clip-width: 92vw;
        --clip-height: 32vw;
        --viewport-width: 100%;
        --viewport-height: 66vw;
    }
}


@media screen and (min-width: 576px) and (max-width: 1025px) {
  .top-strength-item {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .top-strength-item__image {
    grid-column: 1;
    grid-row: 1 / 4;
    display: block;
    width: 100%;
    height: auto;
  }
  .top-strength-item__number {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 6px;
  }
  .top-strength-item__title {
    grid-column: 2;
    grid-row: 2;
  }
  .top-strength-item__text {
    grid-column: 2;
    grid-row: 3;
    margin: 12px 0 0;
    overflow-wrap: anywhere;
  }
  .top-processing-card > .top-feature-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
    padding: 24px;
  }
  .top-processing-card > .top-feature-card > picture {
    grid-column: 1;
    grid-row: 1 / 3;
    display: block;
    min-width: 0;
  }
  .top-processing-card__image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .top-processing-card > .top-feature-card > .top-processing-card__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .top-processing-card__text {
    grid-column: 2;
    grid-row: 2;
    margin: 12px 0 0;
    overflow-wrap: anywhere;
  }
  .top-processing-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px;
    align-items: start;
    margin-top: 32px;
    padding: 24px;
  }
  .top-processing-detail > img {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 100%;
    height: 200px;
    margin-top: 0;
    object-fit: cover;
  }
  .top-processing-detail > span {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .top-processing-detail .top-processing-card__title {
    margin: 0;
  }
}


@media screen and (max-width: 576px) {
  .top-kv__title {
    font-size: 30px;
  }

  .top-kv__visual {
    --visual-width: 99vw;
    --visual-height: 80vw;

    --image-width: 48vw;
    --image-height: 32vw;
    --image-gap: 3vw;

    --oval-cx: 60vw;
    --oval-cy: 42vw;
    --oval-rx: 72vw;
    --oval-ry: 24vw;

    --shape-width: 99vw;
    --shape-height: 66vw;
    --clip-width: 96vw;
    --clip-height: 45vw;
    --viewport-width: 100%;
    --viewport-height: 72vw;
  }

  .top-flow-item {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      clamp(120px, 30vw, 260px);
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    row-gap: 10px;
    min-height: 0;
    padding: 20px 0;
    align-items: start;
  }

  .top-flow-item__number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .top-flow-item__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 18px;
    margin-left: 0;
  }

  .top-flow-item__text {
    grid-column: 1 / 3;
    grid-row: 2;
    margin: 0;
    font-size: 12px;
    margin-top: 10px;
    line-height: 1.7;
  }

  .top-strength-item__number {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #baa85d;
  }
  
  .top-processing__lead,
  .top-equipment__text {
    font-size: 14px;
  } 
  .top-equipment__list {
    gap: 10px;
  }
  .top-equipment-card__text {
    font-size: 12px;
  }
  .top-equipment-card {
    padding: 15px;
  }
}