@charset "utf-8";
.inner {width: 100%;max-width: var(--container-width);padding-inline: var(--page-gutter);margin-inline: auto;}
.label {font-size: 1.8rem;font-weight: 500;line-height: 1.7;color: var(--blue);letter-spacing: .02em;}
.label-w {color: #fff;}
.t-sec {font-size: clamp(3.4rem, 4.24vw, 7.2rem);font-weight: 700;line-height: 1.15;letter-spacing: -.01em;}
.t-card {font-size: clamp(2.4rem, 1.9vw, 3.2rem);font-weight: 700;line-height: 1.15;}
.desc {font-size: 1.8rem;color: var(--gray);}
.is-white {color: #fff;}
.link-ar {display: inline-flex;align-items: center;gap: 1rem;font-weight: 500;color: var(--blue);}
.link-ar .ar {display: inline-block;transition: translate .3s var(--ease);}
.ph {position: relative;display: block;overflow: hidden;background: #eef2f8;aspect-ratio: 706 / 564.8;}
.ph img {width: 100%;height: 100%;object-fit: cover;transition: scale .8s var(--ease);}
.ph-r {border-radius: .4rem;}
.p-slide {display: flex;flex-direction: column;gap: 2.4rem;}
.p-slide .t-card {color: #fff;}
.p-slide .desc {color: var(--muted);}
.steps {display: flex;flex-direction: column;gap: 5.6rem;width: 100%;}
.step {position: relative;display: grid;grid-template-columns: 10rem 49rem minmax(0, 1fr);gap: 4.8rem;align-items: start;}
.step::after {content: '';position: absolute;left: 0;bottom: -2.8rem;width: 100%;height: .1rem;background: var(--blue);scale: 0 1;transform-origin: left center;transition: scale .7s var(--ease);}
.step:hover::after {scale: 1 1;}
.step-no {color: var(--blue);transition: translate .4s var(--ease);}
.step-tt {color: var(--navy);transition: translate .4s var(--ease), color .3s;}
.step:hover .step-tt {translate: 1.6rem 0;color: var(--blue);}
.step:hover .step-no {translate: .8rem 0;}
.p-count {font-size: 1.4rem;color: var(--gray);margin-top: -3.2rem;}
.p-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 5.6rem 4.8rem;width: 100%;}
.p-card {display: flex;flex-direction: column;gap: 2.4rem;width: 100%;}
.p-card-wrap {display: flex;}
.p-card-wrap.is-off {display: none;}
.p-card-wrap.is-show {animation: fade .6s var(--ease) both;}
.p-card .t-card {transition: color .3s;}
.p-card:hover .t-card {color: var(--blue);}
.review {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 4.8rem;width: 100%;}
.rv-card {position: relative;display: flex;flex-direction: column;gap: 2.4rem;padding: 4rem;background: #fff;overflow: hidden;transition: translate .4s var(--ease), box-shadow .4s;}
.rv-card::before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: .4rem;background: linear-gradient(90deg, var(--blue), var(--cyan));scale: 0 1;transform-origin: left center;transition: scale .5s var(--ease);}
.rv-card:hover {translate: 0 -.8rem;box-shadow: 0 2.4rem 5rem rgba(11, 23, 53, .1);}
.rv-card:hover::before {scale: 1 1;}
.rv-no {font-size: 1.4rem;font-weight: 700;letter-spacing: .1em;color: var(--blue);}
.sheet {display: flex;flex-direction: column;gap: 5.6rem;width: 100%;}
.sheet dl {display: flex;flex-direction: column;gap: 5.6rem;width: 100%;}
.row {position: relative;display: grid;grid-template-columns: 44rem minmax(0, 1fr);gap: 4.8rem;padding: 3.2rem;background: var(--ice);overflow: hidden;transition: background .3s, translate .4s var(--ease);}
.row::before {content: '';position: absolute;left: 0;top: 0;width: .4rem;height: 100%;background: var(--blue);scale: 1 0;transform-origin: top;transition: scale .4s var(--ease);}
.row:hover {background: #e8efff;translate: .8rem 0;}
.row:hover::before {scale: 1 1;}
.row dt {font-weight: 500;color: var(--navy);}
.row dd {color: var(--gray);}
.rel-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 4.8rem;width: 100%;}
.contact-sub {color: #fff;}
.contact-note {color: #fff;}
.contact-note span {color: var(--muted);}
@media (max-width: 1280px) {
.step {grid-template-columns: 8rem 32rem minmax(0, 1fr);gap: 3.2rem;}
.row {grid-template-columns: 30rem minmax(0, 1fr);}
}
@media (max-width: 1024px) {
.step {grid-template-columns: 6rem minmax(0, 1fr);gap: 1.6rem 2.4rem;}
.step-desc {grid-column: 2;}
.review {grid-template-columns: 1fr;gap: 2.4rem;}
}
@media (max-width: 768px) {
.step {grid-template-columns: 5rem minmax(0, 1fr);gap: 1rem 1.6rem;}
.steps {gap: 4rem;}
.row {grid-template-columns: 1fr;gap: .6rem;padding: 2.4rem;}
.rv-card {padding: 3rem 2.4rem;}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {animation-duration: .01ms !important;animation-iteration-count: 1 !important;transition-duration: .01ms !important;}
}