@charset "UTF-8";
:root {
    --padding-x-pc: 112;
    --padding-x-sp: 20;
    --max-width: 1366;
    --base-coefficient: calc(1920 / 1366);
    --base-coefficient: 1;
    --base-coefficient-rem: 0.625;
    --design-width-pc: 1366;
    --design-width-sp: 400;
    --height-header-pc: min(calc(90 / var(--design-width-pc) * 100dvw), 90px);
    --height-header-pc-scroll: min(calc(64 / var(--design-width-pc) * 100dvw), 64px);
    --height-header-pc-current: var(--height-header-pc);
    --height-header-sp: 65px;
    --font-size-pc: 16;
    --font-size-sp: 14;
    --font-en-tracking: 0.02em;
    --font-ja: "ryo-gothic-plusn", sans-serif;
    --font-en: "gotham-condensed", sans-serif;
    --line-height: 1.8;
    --color-black: #262626;
    --color-white: #ffffff;
    --color-logo-red: #a38b78;
    --color-red2: #CB1944;
    --color-gray1: #F8F8F8;
    --color-gray2: #E9E9E9;
    --color-gray3: #A9A9A9;
    --color-yellow: #F8F711;
    --color-error-bg: #FFF5F5;
    --color-error: #EA1413;
    --base-font-color: var(--color-black);
    --gradient-blue: linear-gradient(0deg, #015EEA -6.27%, #00C0FA 105.26%);
    --gradient-blue-horizontal: linear-gradient(270deg, #015EEA -6.27%, #00C0FA 105.26%);
    --z-index-header: 100;
    --color-blue: #1616F7;
}
.p_top_service_list {
    display: flex;
    overflow-x: hidden;
    white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 768px) {
    .p_top_service_list {
        gap: calc(32 / var(--design-width-pc) * 100dvw);
    }
}
@media not all and (min-width: 768px) {
    .p_top_service_list {
        flex-direction: column;
        gap: calc(16 / var(--design-width-sp) * 100dvw);
        margin-top: calc(63 / var(--design-width-sp) * 100dvw);
    }
}
.c_animate.-bounceInUp {
}
.c_animate.-bounceInUp.-move {
    animation: bounceInUp 0.4s forwards;
}
.p_top_service_list_img {
    position: relative;
    color: #fff;
    overflow: hidden;
}
.js-anim-fadeInUp, .js-pin-fadeInUp {
}
.c_animate > * {
    will-change: transform;
}
@media screen and (min-width: 768px) {
    .p_top_service_list_img {
        border-radius: calc(30 / var(--design-width-pc) * 100dvw);
    }
}
.js-anim-fadeInUp.-moved, .js-pin-fadeInUp.-moved {
    animation: fadeInUp 2s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media not all and (min-width: 768px) {
    .p_top_service_list_img {
        border-radius: calc(15 / var(--design-width-sp) * 100dvw);
    }
}
.c_animate .-move {
    opacity: 1;
}
.p_top_service_list_link {
    display: block;
}
.p_top_service_list_body {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 5;
	pointer-events: none;
}
@media screen and (min-width: 768px) {
    .p_top_service_list_body {
        padding: calc(32 / var(--design-width-pc) * 100dvw);
    }
}
@media not all and (min-width: 768px) {
    .p_top_service_list_body {
        padding: calc(32 / var(--design-width-sp) * 100dvw);
    }
}
.p_top_service_list_num {
    position: absolute;
    color: var(--color-logo-red);
    font-family: var(--font-en);
    font-weight: 900;
    letter-spacing: var(--font-en-tracking);
    line-height: 0.8;
}
@media screen and (min-width: 768px) {
    .p_top_service_list_num {
        font-size: calc(220 / var(--design-width-pc) * 80dvw);
        bottom: 0;
        left: calc(-15 / var(--design-width-pc) * 100dvw);
    }
}
@media not all and (min-width: 768px) {
    .p_top_service_list_num {
        font-size: calc(200 / var(--design-width-sp) * 80dvw);
        bottom: 0;
        left: calc(-17 / var(--design-width-sp) * 100dvw);
    }
}
.p_top_service_list_ttl {
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
    .p_top_service_list_ttl {
        font-size: calc(30 / var(--design-width-pc) * 100dvw);
    }
}
@media not all and (min-width: 768px) {
    .p_top_service_list_ttl {
        font-size: calc(26 / var(--design-width-sp) * 100dvw);
    }
}
@media screen and (min-width: 768px) {
    .p_top_service_list_txt {
        font-size: calc(16 / var(--design-width-pc) * 100dvw);
        margin-top: calc(12 / var(--design-width-pc) * 100dvw);
    }
}
@media not all and (min-width: 768px) {
    .p_top_service_list_txt {
        font-size: calc(14 / var(--design-width-sp) * 100dvw);
        margin-top: calc(12 / var(--design-width-sp) * 100dvw);
    }
}
.p_top_service_list_icon {
	color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid currentColor;
    margin: auto 0 0 auto;
    transition: background-color 0.3s ease;
}
@media screen and (min-width: 768px) {
    .p_top_service_list_icon {
        border-width: calc(2 / var(--design-width-pc) * 100dvw);
        width: calc(80 / var(--design-width-pc) * 100dvw);
    }
}
@media not all and (min-width: 768px) {
    .p_top_service_list_icon {
        border-width: calc(2 / var(--design-width-sp) * 100dvw);
        width: calc(80 / var(--design-width-sp) * 100dvw);
    }
}
.c_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
}
@media screen and (min-width: 768px) {
    .p_top_service_list_icon i {
        width: calc(32 / var(--design-width-pc) * 100dvw);
    }
}
@media not all and (min-width: 768px) {
    .p_top_service_list_icon i {
        width: calc(32 / var(--design-width-sp) * 100dvw);
    }
}
.c_icon:after {
    content: "";
    display: block;
    aspect-ratio: 1;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: currentColor;
    transition: background-color 0.3s;
    width: 100%;
}
.c_icon.-arrow-right::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none'%3E%3Cpath d='M32.7376 16.4043L32.7376 25.7376L11.9243 25.7376L11.8543 30.4276L32.7376 30.4276L32.7376 39.7376L44.4043 28.071L32.7376 16.4043Z' fill='%23262626'/%3E%3C/svg%3E");
}
.c_hover-img_wrap {
    overflow: hidden;
}
.js-anim-horizontal-move iframe {
	transition: transform 1.0s;
	object-fit: cover;
}
.js-anim-horizontal-move:hover iframe {
	transform: scale(1.1);
}
.js-anim-horizontal-move:hover .p_top_service_list_icon {
	color: #000;
    background-color: #fff;
	border-color: #fff;
}
.p_top_service_list_img {
    position: relative;
}
.p_top_service_list_img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    display: block;
    background: rgba(0,0,0,0);
	pointer-events: auto;
}
.js-anim-horizontal-move.is-playing .p_top_service_list_img::after {
    z-index: 10;
}

.js-anim-horizontal-move.is-playing .p_top_service_list_num, .js-anim-horizontal-move.is-playing .p_top_service_list_icon {
    display: none;
}