/*Common */
:root {
    /* Fonts */
    --font-anton: "Anton", sans-serif;
    --font-biz-udpmincho: "BIZ UDPMincho", serif;
    --font-mplus-1p: "M PLUS 1p", sans-serif;
    --font-noto-sans-jp: "Noto Sans JP", sans-serif;

    /* Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-primary: #190790;
	/* Misc */
    --title-font-stroke: 0.7px;
}

/* Needed to cloak hidden elements before JS loads when using Alpine.js */
[x-cloak] {
    display: none !important;
}

body {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

/* h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} */

h1 {
    font-family: var(--font-anton);
    font-size: clamp(0px, calc(100vw * (230 / 750)), 230px);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}

h2 {
    margin: 0;
    font-family: var(--font-biz-udpmincho);
    font-size: clamp(0px, calc(100vw * (48 / 750)), 48px);
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
}

p,
span {
    font-family: var(--font-mplus-1p);
    font-weight: 400;
    line-height: 1;
    color: var(--color-black);
}

@media (min-width: 751px) {
    h1 {
        font-size: calc(100vw * (260 / 1920));
    }

    h2 {
        font-size: calc(100vw * (64 / 1920));
    }
}

a {
    text-decoration: none;
}

#main {
    position: relative;
}

.no-style-btn {
    background-color: transparent;
    padding: 0;
    border: none;
}

.site-logo img {
    width: 100%;
}

.header-contact-btn {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mplus-1p);
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    background-color: var(--color-primary);
}

.link-btn {
    padding-top: calc(100vw * (26 / 750));
    padding-bottom: calc(100vw * (26 / 750));
    padding-left: calc(100vw * (50 / 750));
    padding-right: calc(100vw * (24 / 750));
    border: 1px solid var(--color-black);
    border-radius: 0;
    color: var(--color-black);
    background-color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: calc(100vw * (20 / 750));
}

.link-btn label {
    font-size: calc(100vw * (24 / 750));
    font-family: var(--font-mplus-1p);
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

.link-arrow {
    display: flex;
    align-items: center;
}
.link-arrow::before,
.link-arrow::after {
    content: "";
    border-color: black;
}
.link-arrow::before {
    border-top: solid;
    border-bottom: solid;
    transition: width 0.3s ease-out;
}
.link-arrow::after {
    border-top: solid;
    border-bottom: solid;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right: none !important;
    border-left: solid;
}
.expand-arrow:hover .link-arrow::before {
    width: 100%;
}
/* Large link arrow */
.link-arrow.large {
    width: calc(100vw * (85 / 750));
    height: calc(100vw * (36 / 750));
}
.link-arrow.large::before {
    width: calc(100vw * (30 / 750));
    border-top-width: clamp(1px, calc(100vw * (4 / 750)), 4px);
    border-bottom-width: clamp(1px, calc(100vw * (4 / 750)), 4px);
}
.link-arrow.large::after {
    border-top-width: calc(100vw * (18 / 750));
    border-bottom-width: calc(100vw * (18 / 750));
    border-left-width: calc(100vw * (29 / 750));
}
/* Small link arrow */
.link-arrow.small {
    width: calc(100vw * (59 / 750));
    height: calc(100vw * (20 / 750));
}
.link-arrow.small::before {
    width: calc(100vw * (19 / 750));
    border-top-width: clamp(0.5px, calc(100vw * (1 / 750)), 1px);
    border-bottom-width: clamp(0.5px, calc(100vw * (1 / 750)), 1px);
}
.link-arrow.small::after {
    border-top-width: calc(100vw * (10 / 750));
    border-bottom-width: calc(100vw * (10 / 750));
    border-left-width: calc(100vw * (20 / 750));
}
@media (min-width: 751px) {
    .link-btn {
        padding-top: clamp(0px, calc(100vw * (26 / 1920)), 26px);
        padding-bottom: clamp(0px, calc(100vw * (26 / 1920)), 26px);
        padding-left: clamp(0px, calc(100vw * (50 / 1920)), 50px);
        padding-right: clamp(0px, calc(100vw * (24 / 1920)), 24px);
        gap: clamp(0px, calc(100vw * (20 / 1920)), 20px);
    }
    .link-btn label {
        font-size: clamp(0px, calc(100vw * (24 / 1920)), 24px);
    }
    .link-arrow.large {
        width: calc(100vw * (85 / 1920));
        height: calc(100vw * (36 / 1920));
    }
    .link-arrow.large::before {
        width: calc(100vw * (30 / 1920));
        border-top-width: clamp(1px, calc(100vw * (4 / 1920)), 4px);
        border-bottom-width: clamp(1px, calc(100vw * (4 / 1920)), 4px);
    }
    .link-arrow.large::after {
        border-top-width: calc(100vw * (18 / 1920));
        border-bottom-width: calc(100vw * (18 / 1920));
        border-left-width: calc(100vw * (29 / 1920));
    }
    /* Small link arrow */
    .link-arrow.small {
        width: calc(100vw * (59 / 1920));
        height: calc(100vw * (20 / 1920));
    }
    .link-arrow.small::before {
        width: calc(100vw * (19 / 1920));
        border-top-width: clamp(0.5px, calc(100vw * (1 / 1920)), 1px);
        border-bottom-width: clamp(0.5px, calc(100vw * (1 / 1920)), 1px);
    }
    .link-arrow.small::after {
        border-top-width: calc(100vw * (10 / 1920));
        border-bottom-width: calc(100vw * (10 / 1920));
        border-left-width: calc(100vw * (20 / 1920));
    }
}

.rotate-90 {
    transform: rotate(90deg);
}

.overlay-card {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--color-white);
    z-index: 10;
    visibility: visible !important;
    transform-origin: top;
}

@media screen and (min-width: 1024px) {
    .hidden-pc-tablet {
        display: none !important;
    }
}

@media screen and (max-width: 1023px) {
    .hidden-sp-tablet {
        display: none !important;
    }
}

@media screen and (min-width: 751px) {
    .hidden-pc {
        display: none !important;
    }
}

@media screen and (max-width: 750px) {
    .hidden-sp {
        display: none !important;
    }
}

/* Animation */
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}
.animate-slideDown {
    animation: slideDown 0.3s ease-in-out forwards;
}
.animate-slideUp {
    animation: slideUp 0.3s ease-in-out forwards;
}
.animate-slideInRight {
    animation: slideInRight 0.3s ease-out forwards;
}
.animate-slideOutRight {
    animation: slideOutRight 0.3s ease-in-out forwards;
}
.animate-slideDown-header {
    animation: slideDown 0.6s ease-out forwards;
    animation-delay: 2s;
}

@keyframes shrinkScaleY {
    0% {
        transform: scaleY(1); /* Full height */
    }
    100% {
        transform: scaleY(0); /* Shrink to 0 height */
    }
}
.animate-shrinkScaleY {
    animation: shrinkScaleY 0.5s forwards;
}
.animate-shrinkScaleY.faster {
    animation: shrinkScaleY 1s forwards;
}
/* @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
.animate-fastFadeIn {
    opacity: 0;
    animation: fadeIn 0.2s forwards;
    animation-delay: 2s;
} */
@keyframes bgMove {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 2076px;
    }
}

@keyframes fillBackground {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
@keyframes flipEntrance {
    from {
        opacity: 0;
        transform: scale(1.7);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}
.animate-flipEntrance {
    animation: flipEntrance 0.2s ease-in-out forwards;
}
.fillBackground {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}
.fillBackground::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    transform-origin: left;
    transform: scaleX(0);
    z-index: -1;
}
.fillBackground.animate-on::before {
    animation: fillBackground 0.2s ease-in-out forwards;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.animate-fadeInUp {
    animation: fadeInUp 0.5s forwards;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fadeInRight {
    animation: fadeInRight 0.5s forwards;
}

.link-btn.small-padding {
    padding-top: clamp(10px, calc(100vw * (20 / 750)), 20px);
    padding-bottom: clamp(10px, calc(100vw * (20 / 750)), 20px);
}

@media (min-width: 751px) {
    .link-btn.small-padding {
        padding-top: clamp(10px, calc(100vw * (20 / 1920)), 20px);
        padding-bottom: clamp(10px, calc(100vw * (20 / 1920)), 20px);
    }
}

.link-btn.border-btn {
    background-color: transparent;
    outline: solid clamp(1px, calc(100vw * (4 / 750)), 4px) var(--color-white);
    outline-offset: clamp(-4px, calc(-100vw * (4 / 750)), -1px);
    border: none;
    color: var(--color-white);
}
.link-btn.border-btn .link-arrow::before,
.link-btn.border-btn .link-arrow::after {
    border-color: white;
}
@media (min-width: 751px) {
    .link-btn.border-btn {
        outline: solid clamp(1px, calc(100vw * (4 / 1920)), 4px)
            var(--color-white);
        outline-offset: clamp(-4px, calc(-100vw * (4 / 1920)), -1px);
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.animate-fadeIn.fast {
    animation: fadeIn 0.3s forwards;
}
.animate-fadeInRightBig.fast {
    animation: fadeInRightBig 0.3s forwards;
}
.font-title {
    font-size: calc(100vw * (230 / 750));
    font-family: var(--font-anton);
    word-break: normal;
}
@media (min-width: 751px) {
    .font-title {
        font-size: calc(100vw * (300 / 1920));
    }
}
@keyframes translateFadeIn {
    0% {
        transform: translate(0px, 40%);
        opacity: 0;
    }
    100% {
        transform: translate(0px, 0%);
        opacity: 1;
    }
}
.translateFadeIn {
    animation: translateFadeIn 0.3s forwards;
}

/* Link button small */

.top-recruit-link-btn {
    padding-top: calc(100vw * (10 / 750));
    padding-bottom: calc(100vw * (10 / 750));
    padding-left: calc(100vw * (20 / 750));
    padding-right: calc(100vw * (12 / 750));
    border-radius: 0;
    color: var(--color-black);
    background-color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: calc(100vw * (10 / 750));
}

.top-recruit-link-btn label {
    font-size: calc(100vw * (32 / 750));
    font-family: var(--font-mplus-1p);
    font-weight: 500;
    line-height: 1.5;
    pointer-events: none;
}

.top-recruit-link-btn .arrow {
    width: calc(100vw * (65 / 750));
    height: calc(100vw * (20 / 750));
    overflow: visible;
    display: flex;
    justify-content: start;
    align-items: center;
}
.top-recruit-link-btn .arrow__tail {
    background-color: var(--color-black);
    height: 2px;
    width: 30%;
    transition: width 0.5s ease;
}

.top-recruit-link-btn:hover .arrow__tail {
    width: 50%;
}

@media (min-width: 751px) {
    .top-recruit-link-btn {
        padding-top: calc(100vw * (10 / 1920));
        padding-bottom: calc(100vw * (10 / 1920));
        padding-left: calc(100vw * (20 / 1920));
        padding-right: calc(100vw * (12 / 1920));
        gap: calc(100vw * (10 / 1920));
    }

    .top-recruit-link-btn label {
        font-size: calc(100vw * (36 / 1920));
        font-weight: 800;
    }

    .top-recruit-link-btn .arrow {
        width: calc(100vw * (65 / 1920));
        height: calc(100vw * (20 / 1920));
    }
}

/* Youtube link button */
.youtube-link-btn {
    display: flex;
    align-items: center;
    padding: calc(100vw * (20 / 750)) calc(100vw * (40 / 750)) calc(100vw * (20 / 750)) calc(100vw * (50 / 750));
    border-radius: 0;
    background-color: #a91019;
    gap: calc(100vw * (30 / 750));
    color: var(--color-white);
    font-family: var(--font-mplus-1p);
    font-weight: 800;
    font-size: calc(100vw * (21 / 750));
    letter-spacing: 0.05em;
    text-decoration: none;
    text-align: center;
}

.youtube-link-btn img {
    width: calc(100vw * (180 / 750));
    height: calc(100vw * (40.3 / 750));
}

.youtube-link-btn .right-arrow {
    width: calc(100vw * (50 / 750));
    height: calc(100vw * (50 / 750));
    display: flex;
    justify-content: center;
    align-items: center;
}

.youtube-link-btn .right-arrow svg {
    width: calc(100vw * (35 / 750));
    height: auto;
}

.youtube-link-btn:hover {
    opacity: 0.8 !important;
}

@media (min-width: 751px) {
    .youtube-link-btn {
        padding: calc(100vw * (20 / 1920)) calc(100vw * (40 / 1920)) calc(100vw * (20 / 1920)) calc(100vw * (50 / 1920));
        gap: calc(100vw * (30 / 1920));
        font-size: calc(100vw * (21 / 1920));
    }
    .youtube-link-btn img {
        width: calc(100vw * (180 / 1920));
        height: calc(100vw * (40.3 / 1920));
    }
    .youtube-link-btn .right-arrow {
        width: calc(100vw * (50 / 1920));
        height: calc(100vw * (50 / 1920));
    }
    .youtube-link-btn .right-arrow svg {
        width: calc(100vw * (35 / 1920));
    }
}
/* Keyframe animation for stroke */
@keyframes numberBorderAnimation {
    0% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dasharray: 2000; /* Adjust based on the length of the path */
        stroke-dashoffset: 1000;
    }
}
.numberBorderAnimation {
    animation: numberBorderAnimation 1s ease-in-out forwards;
}
.animated-numberBorder {
    fill: none; /* Make sure the path is not filled */
    stroke: black; /* Set the stroke color */
    stroke-width: 1; /* Adjust the width of the border */
    stroke-dasharray: 1000; /* Long dash to cover the full path length */
    stroke-dashoffset: 1000; /* Start by offsetting the stroke */
}

.reveal-text,
.reveal-text::after {
    animation-delay: var(--animation-delay, 2s);
    animation-iteration-count: var(--iterations, 1);
    animation-duration: var(--duration, 400ms);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.reveal-text {
    --animation-delay: var(--delay, 0);
    --animation-duration: var(--duration, 400ms);
    --animation-iterations: var(--iterations, 1);
    position: relative;
    cursor: default;
    visibility: hidden;
    opacity: 0;
}

.reveal-text.on {
    visibility: visible;
    opacity: 1;
    animation-name: clip-text;
}

.reveal-text.on::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: inherit;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
    animation-duration: var(--duration, 400ms);
    animation-delay: var(--animation-delay, 1s);
    animation-iteration-count: var(--iterations, 1);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@keyframes clip-text {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes text-revealer {
    0%,
    50% {
        transform-origin: 0 50%;
    }
    60%,
    100% {
        transform-origin: 100% 50%;
    }
    60% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

.animate-TextBorder text {
    animation: animate-TextBorder 1s linear forwards;
}
@keyframes animate-TextBorder {
    to {
        stroke-dashoffset: 0;
    }
}

.alignleft {
	margin-left: 0;
	margin-right: auto;
}
.alignright {
	margin-left: auto;
	margin-right: 0;
}
.aligncenter {
	margin-left: auto;
	margin-right: auto;
}