@charset "UTF-8";
/* =========================================
    Reset & Base Styles
    ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-ja);
    color: var(--color-text-main);
    background-color: var(--color-bg-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.8;
}

ul, ol {
    list-style: none;
}

input, textarea, button, select {
    font-family: inherit;
    font-size: inherit;
}

/* =========================================
    Design Tokens (CSS Variables)
    ========================================= */
:root {
    /* Colors */
    --color-primary: #223F76;
    --color-secondary: #223F76;
    --color-accent: #F5FC4A;
    --color-text-main: #303030;
    --color-text-sub: #91979C;
    --color-bg-base: #ffffff;
    --color-bg-light: #F2F2F2;
    --color-border: #747474;
    --color-gradient-btn: linear-gradient(90deg, #F06292 0%, #BA68C8 100%);

    /* Job Colors (Custom) */
    --color-job-engineer-bg: #E3F2FD;
    --color-job-engineer-main: #64B5F6;
    --color-job-office-bg: #E0F2F1;
    --color-job-office-main: #4DB6AC;
    --color-job-call-bg: #FCE4EC;
    --color-job-call-main: #F06292;

    /* Fonts */
    --font-family-heading: 'Zen Kaku Gothic New', sans-serif;
    --font-family-ja: 'Noto Sans JP', sans-serif;
    --font-family-en: 'Bebas Neue', sans-serif;
    --font-family-script: 'Damion', cursive;
    --font-family-script-light: 'Birthstone', cursive;

    /* Spacing (SP Default) */
    --space-xxs: 0.4rem;
    --space-xs: 0.4rem;
    --space-sm: 0.8rem;
    --space-md: 1.2rem;
    --space-lg: 1.6rem;
    --space-xl: 2.4rem;
    --space-xxl: 3.2rem;
    --space-3l: 4.8rem;
    --space-4-5l: 6.0rem;
    --space-4l: 6.4rem;
    --space-5l: 9.6rem;
    --space-6l: 12.8rem;
    --space-7l: 16.0rem;

    /* Typography (SP Default) */
    --font-size-xs: 1.0rem;
    --font-size-sm: 1.4rem;
    --font-size-md: 1.6rem;
    --font-size-lg: 1.8rem;
    --font-size-xl: 2.0rem;
    --font-size-1-5xl: 2.0rem;
    --font-size-2xl: 2.6rem;
    --font-size-2-5xl: 2.7rem;
    --font-size-3xl: 2.8rem;
    --font-size-4xl: 3.0rem;
    --font-size-4-5xl: 3.0rem;
    --font-size-5xl: 5.6rem;

    /* Container */
    --container-sm: 800px;
    --container-md: 1000px;
    --container-lg: 1440px;
    --padding-side: 2rem;
}

@media (min-width: 768px) {
    :root {
        /* Spacing (PC) */
        --space-xxs: 0.4rem;
        --space-xs: 0.8rem;
        --space-sm: 1.2rem;
        --space-md: 1.6rem;
        --space-lg: 2.4rem;
        --space-xl: 3.2rem;
        --space-xxl: 4.8rem;
        --space-3l: 6.4rem;
        --space-4-5l: 9.0rem;
        --space-4l: 9.6rem;
        --space-5l: 12.8rem;
        --space-6l: 16.0rem;
        --space-7l: 19.2rem;

        /* Typography (PC) */
        --font-size-xs: 1.2rem;
        --font-size-sm: 1.6rem;
        --font-size-md: 1.8rem;
        --font-size-lg: 2.0rem;
        --font-size-xl: 2.4rem;
        --font-size-1-5xl: 2.6rem;
        --font-size-2xl: 3.2rem;
        --font-size-2-5xl: 3.6rem;
        --font-size-4-5xl: 4.0rem;
        --font-size-3xl: 4.2rem;
        --font-size-4xl: 5.6rem;
        --font-size-5xl: 7.2rem;
    }
}

/* =========================================
    Utility Classes & Components
    ========================================= */
.container {
    width: 100%;
    max-width: var(--container-md);
    margin-inline: auto;
    padding-inline: var(--padding-side);
}

.container--sm {
    max-width: var(--container-sm);
}

.container--lg {
    max-width: var(--container-lg);
}

.section {
    padding-block: var(--space-4l);
    position: relative;
}

/* SP専用の改行を表示 */
.sp-only {
    display: inline;
}

@media (min-width: 768px) {
    .sp-only {
        display: none;
    }
}

/* PC専用の改行を表示 */
.pc-only {
    display: none;
}

@media (min-width: 768px) {
    .pc-only {
        display: inline;
    }
}

/* Typography Utilities */
/* 各セクションのヘッダー設定（募集職種、働く環境、インタビュー、採用の流れ、募集要項） */
/* ===============================================
   基本スタイル（全セクション共通）
   =============================================== */
.heading-primary {
    color: #FF5900;
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4-5xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 4px;
}

.heading-script {
    font-family: var(--font-family-script-light);
    font-size: 4rem;
    text-align: center;
    transform: rotate(-5deg);
    line-height: 1;
    font-weight: 400;
    opacity: 0.4;
    background: linear-gradient(83deg, #FF5900 24.97%, #F09 75.03%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: multiply;
    margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
    .heading-script {
        font-size: 8rem;
    }
}

.heading-secondary {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
    margin-top: var(--space-3l);
    margin-bottom: var(--space-md);
}

/* ===============================================
   共通ヘッダースタイル
   =============================================== */
.job-links__header,
.environment__header,
.interview__header,
.process__header,
.guidelines__header {
    position: relative;
    margin-top: 5rem;
    margin-bottom: var(--space-4-5l);
    text-align: center;
}

@media (min-width: 768px) {
    .job-links__header,
    .environment__header,
    .interview__header,
    .process__header,
    .guidelines__header {
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: 10rem;
    }
}

/* ===============================================
   共通ヘッダースタイル
   =============================================== */
.job-links__header,
.environment__header,
.interview__header,
.process__header,
.guidelines__header {
    position: relative;
    margin-top: 8rem;
    margin-bottom: var(--space-4-5l);
    text-align: center;
}

@media (min-width: 768px) {
    .job-links__header,
    .environment__header,
    .interview__header,
    .process__header,
    .guidelines__header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10rem;
    }
}

/* ===============================================
   ヘッダー共通スタイル
   =============================================== */
.entry {
    position: relative;
}

/* heading-primary 共通 */
.job-links__header .heading-primary,
.environment__header .heading-primary,
.interview__header .heading-primary,
.process__header .heading-primary,
.guidelines__header .heading-primary {
    position: relative;
    margin-bottom: 0;
}

/* heading-primary::before 共通 */
.job-links__header .heading-primary::before,
.environment__header .heading-primary::before,
.interview__header .heading-primary::before,
.process__header .heading-primary::before,
.guidelines__header .heading-primary::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background-image: url('../images/decoration-heading.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px) {
    .job-links__header .heading-primary::before,
    .environment__header .heading-primary::before,
    .interview__header .heading-primary::before,
    .process__header .heading-primary::before,
    .guidelines__header .heading-primary::before {
        top: -80px;
        width: 131.537px;
        height: 54.777px;
    }
}

/* heading-script 共通（SP時） */
.job-links__header .heading-script,
.environment__header .heading-script,
.interview__header .heading-script,
.process__header .heading-script,
.guidelines__header .heading-script {
    margin-top: 3rem;
    margin-bottom: 0;
    transform: rotate(-10.865deg);
    position: relative;
    text-align: center;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

/* heading-script 共通（PC時） */
@media (min-width: 768px) {
    .job-links__header .heading-script,
    .environment__header .heading-script,
    .interview__header .heading-script,
    .process__header .heading-script,
    .guidelines__header .heading-script {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(-10.865deg);
        margin-top: 0;
        text-align: left;
    }
}

/* ===============================================
   個別設定（例外のみ）
   =============================================== */

/* 働く環境のみtopが異なる */
@media (min-width: 768px) {
    .environment__header .heading-script {
        top: -80%;
    }
}

/* エントリーのheading-script（SP時） */
.entry .heading-script {
    margin-top: 2rem;
    margin-bottom: 0;
    transform: rotate(-10.865deg);
    position: relative;
    text-align: center;
    padding-bottom: 1rem;
}

/* エントリーのheading-script（PC時） */
@media (min-width: 1024px) {
    .entry .heading-script {
        position: absolute;
        left: 20%;
        top: 5%;
        transform: translateY(-50%) rotate(-10.865deg);
        margin-top: 0;
        text-align: left;
    }
}

/* STEP3の上部（変更なし） */
.step .heading-script {
    position: absolute;
    margin-bottom: var(--space-xs);
    transform: rotate(-7.505deg);
    font-size: 3.3rem;
    font-weight: 400;
    left: 38px;
    top: -32px;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #000;
    color: #000;
    opacity: 1;
}

@media (min-width: 768px) {
    .step .heading-script {
        font-size: 3.8rem;
        position: absolute;
        left: 26px;
        top: -32px;
        transform: translateY(-50%) rotate(-10.865deg);
        margin-bottom: 0;
    }
}

/* ===============================================
   エントリーヘッダー（その他のスタイル）
   =============================================== */
.entry .heading-primary {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
}

@media (min-width: 768px) {
    .entry .heading-primary {
        font-size: var(--font-size-4-5xl);
    }
}

.entry .heading-primary::before,
.entry .heading-primary::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 60px;
    height: 4px;
    background-color: #FF5900;
}

.entry .heading-primary::before {
    right: 100%;
    margin-right: 0.5rem;
    transform: translateY(-50%) rotate(70deg);
    transform-origin: right center;
}

.entry .heading-primary::after {
    left: 100%;
    margin-left: 0.5rem;
    transform: translateY(-50%) rotate(-70deg);
    transform-origin: left center;
}

@media (min-width: 768px) {
    .entry .heading-primary::before,
    .entry .heading-primary::after {
        width: 100px;
    }

    .entry .heading-primary::before {
        margin-right: 3rem;
    }

    .entry .heading-primary::after {
        margin-left: 3rem;
    }
}

.entry .heading-secondary {
    font-size: 2.2rem;
    margin-top: 3.2rem;
    margin-bottom: 2.4rem;
}

@media (min-width: 768px) {
    .entry .heading-secondary {
        font-size: var(--font-size-2xl);
        margin-top: var(--space-3l);
        margin-bottom: var(--space-md);
    }
}
.text-center { text-align: center; }
.text-bold { font-weight: 700; }

/* Buttons */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm) var(--space-xl);
    border-radius: 9999px;
    font-weight: 700;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn--entry {
    background: var(--color-gradient-btn);
    color: #fff;
    font-family: var(--font-family-heading);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 3.2px;

    padding: 1.3rem 2rem 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .btn--entry {
        font-size: 3.2rem;
        padding: 1.3rem 6.5rem 1.9rem;
    }
}

.btn--entry:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* Common Decorations */
.marker {
    background: linear-gradient(transparent 60%, var(--color-accent) 60%);
    display: inline;
}

/* =========================================
    Layout & Sections
    ========================================= */

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    /* background-color: rgba(255, 255, 255, 0.95); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-lg);
    padding-top: 1rem;
    z-index: 1000;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
}

@media (min-width: 768px) {
    .header {
        padding-top: 1.6rem;
    }
}

.header__logo {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.header__logo-img {
    height: auto;
    width: 100%;
    max-width: 170px;
}

@media (min-width: 768px) {
    .header__logo-img {
        max-width: 227px;
    }
}

/* Hero */
.hero {
    margin-top: 0;
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #f0f0f0;
    z-index: 1;
}

.hero__bg {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
}

.hero__content {
    position: absolute;
    top: 42%;
    left: 0;
    transform: translateY(-50%);
    z-index: 10;
}

@media (min-width: 768px) {
    .hero__content {
        top: 37%;
        left: 1%;
    }
}

@media (min-width: 1024px) {
    .hero__content {
        left: 7%;
    }
}

@media (min-width: 1300px) {
    .hero__content {
        left: 23%;
    }
}

.hero__copy-img {
    max-width: 58%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

@media (min-width: 1300px) {
    .hero__copy-img {
        max-width: 100%;
    }
}

.hero__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.8);
    padding: var(--space-md);
    line-height: 1.4;
    letter-spacing: 0.1em;
}

.hero__script {
    font-family: var(--font-family-script);
    font-size: 5rem;
    color: #F06292;
    position: absolute;
    top: -4rem;
    left: 0;
    transform: rotate(-5deg);
}

/* Message Section */
/* 背景画像 */
.message-points-wrapper {
    background-color: #fff;
    background-image: url('../images/diagonal-lines.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 2100px;
}

.message {
    background-color: transparent;
    position: relative;
    margin-top: -170px;
    z-index: 2;
}

.message__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3l);
}

@media (min-width: 1300px) {
    .message-points-wrapper {
        background-position: center 600px;
    }

    .message {
    margin-top: -340px;
}

    .message__container {
        flex-direction: row;
        justify-content: space-between;
    }
}

.message__content {
    flex: 1;
}

.message__heading {
    font-family: var(--font-family-script-light);
    font-size: 5rem;
    font-weight: 400;
    line-height: 1.2;
    transform: rotate(-0.446deg);
    margin-bottom: var(--space-lg);

    opacity: 0.6;
    background: linear-gradient(83deg, #FF5900 24.97%, #F09 75.03%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: multiply;
}

@media (min-width: 768px) {
    .message__heading {
        font-size: 8rem;
    }
}

.message__text {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    color: #000;
    font-weight: 500;
    line-height: 2.3;

    margin-bottom: var(--space-md);
}

.message__images {
    height: auto;
}

/* @media (min-width: 768px) {
    .message__images {
        height: 400px;
    }
} */

/* Point Section */
.points {
    background-color: transparent;
    background-image: none;
    padding-top: 0;
}

.point {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-xl);
    margin-bottom: 2rem;
    position: relative;
}

@media (min-width: 768px) {
    .points {
        padding-top: 5rem;
    }

    .point {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4l);
    }
/* 奇数番目（1, 3, 5...）を反転 */
    .point:nth-child(odd) {
        flex-direction: row-reverse;
    }
}

.point__visual {
    flex: 1;
    position: relative;
    padding: var(--space-md);
}

.point__img {
    position: relative;
    z-index: 1;
    width: 100%;
}

.point__content {
    flex: 1;
}

.point__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    position: relative;
}

.point__header::after {
    content: '';
    width: 87.861px;
    height: 77.999px;
    background-image: url('../images/decoration-stars.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: var(--space-xs);
    transform: translateY(20px);
}

.point__label {
    font-family: var(--font-family-script);
    font-size: 4rem;
    line-height: 1;
    font-weight: 400;
    opacity: 0.6;
    background: linear-gradient(83deg, #FF5900 24.97%, #F09 75.03%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: multiply;
}

@media (min-width: 768px) {
    .point__header::after {
        width: 107px;
        height: 95px;
    }

    .point__label {
        font-size: 8rem;
    }
}

.point__number {
    font-family: var(--font-family-script);
    font-size: 6rem;
    line-height: 1;
    font-weight: 400;
    opacity: 0.6;
    background: linear-gradient(83deg, #FF5900 24.97%, #F09 75.03%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: multiply;

    margin-right: var(--space-xs);
    padding-right: 10px;

}

@media (min-width: 768px) {
    .point__number {
        font-size: 12rem;
    }
}

.point__script {
    font-family: var(--font-family-script);
    font-size: 2.4rem;
    color: var(--color-text-sub);
    position: absolute;
    top: -2rem;
    right: 0;
    transform: rotate(-5deg);
}

@media (min-width: 768px) {
    .point__script {
        right: auto;
        left: 0;
    }
    .point:nth-child(even) .point__script {
        left: auto;
        right: 0;
    }
}

.point__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.point__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}

/* About Section */
.about {
    background: linear-gradient(180deg, #FFF6DB 0%, #FFE3D4 100%);
    position: relative;
    padding-bottom: 0;
}

/* SP専用の改行を表示 */
.about-only {
    display: inline;
}

@media (min-width: 1024px) {
    .about-only {
        display: none;
    }
}


.about__script {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-8.81deg);
    font-family: var(--font-family-script-light);
    font-size: 4rem;
    line-height: 1;
    opacity: 0.4;
    background: linear-gradient(83deg, #FF5900 24.97%, #F09 75.03%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: multiply;
    text-align: left;
    white-space: nowrap;
    z-index: 10;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .about {
        padding-top: var(--space-5l);
        padding-bottom: var(--space-4l);
    }

    .about__script {
        font-size: 6rem;
        left: auto;
        right: 34%;
        transform: translateX(50%) translateY(-37%) rotate(-8.81deg);
    }
}

.about__content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

@media (min-width: 768px) {
    .about__content {
        flex-direction: row;
        gap: 4.4rem;
    }
}

.about__logo {
    width: 100%;
    max-width: 300px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .about__logo {
        max-width: 400px;
    }
}

.about__logo img {
    width: 100%;
    height: auto;
}

.about__text-content {
    flex: 1;
    position: relative;
}

.about__title {
    font-size: 2.6rem;
    font-weight: 700;
    font-family: var(--font-family-heading);
    letter-spacing: 3.2px;
    text-align: left;
    background: linear-gradient(90deg, #FF33AE 0%, #FF5900 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-md);
}

.about__title::after {
    content: '';
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%) rotate(-9.304deg);
    width: 60px;
    height: 48px;
    background-image: url('../images/shooting-star.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.about__title-sub {
    font-size: 1.8rem;
}

@media (min-width: 768px) {
    .about__title {
        font-size: 3.2rem;
    }

    .about__title-sub {
        font-size: 2rem;
    }

    .about__title::after {
        width: 60px;
        height: 48px;
        right: -56px;
    }
}

@media (min-width: 1024px) {
    .about__title::after {
        width: 94.085px;
        height: 48.071px;
        right: -88px;
    }
}

.about__text {
    font-family: var(--font-family-heading);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 2;
}

/* Job Openings Link Section */
.job-links {
    padding-top: 0;
}

.job-links__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .job-links {
        padding-top: 13rem;
    }

    .job-links__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

.job-card {
    display: block;
    text-align: center;
    padding: 1.6rem 1.6rem 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
}

.job-card--engineer {
    background: linear-gradient(90deg, #F4FBFF 0%, #DBF1FF 100%);
}

.job-card--engineer .job-card__title {
    background: linear-gradient(90deg, #2A3BFF 0%, #AF52B8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job-card--call {
    background: linear-gradient(90deg, #FFFAFD 0%, #EEE6FF 100%);
}

.job-card--call .job-card__title {
    background: linear-gradient(90deg, #FF33AE 0%, #B638FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job-card--office {
    background: linear-gradient(90deg, #F9FFF4 0%, #E2FFE5 100%);
}

.job-card--office .job-card__title {
    background: linear-gradient(90deg, #5DB850 0%, #00A6B8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job-card:hover {
    transform: translateY(-5px);
}

.job-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.job-card__title {
    padding: var(--space-lg);
    font-weight: 700;
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 1.2px;
}

@media (min-width: 768px) {
    .job-card__title {
        font-size: 2.3rem;
    }
}

.job-card__title--engineer {
    background: linear-gradient(90deg, #2A3BFF 0%, #AF52B8 100%);
}

.job-card__title--call {
    background: linear-gradient(90deg, #FF33AE 0%, #B638FF 100%);
}

.job-card__title--office {
    background: linear-gradient(90deg, #5DB850 0%, #00A6B8 100%);
}

/* Job Details Section */
/* 共通スタイル */
.job-detail .container {
    padding: 4.3rem 2.4rem;
}

@media (min-width: 768px) {
    .job-detail .container {
        padding: 6.2rem 6rem;
    }
}

/* 各職種セクションの背景色 */
.job-detail--engineer .container {
    background: linear-gradient(90deg, #F4FBFF 0%, #E6F5FF 100%);
}

.job-detail--call .container {
    background: linear-gradient(90deg, #FFFAFD 0%, #F6F2FF 100%);
}

.job-detail--office .container {
    background: linear-gradient(90deg, #F9FFF4 0%, #EEFFF0 100%);
}


.job-detail {
    padding-block: 4rem;
}

.job-detail__header {
    margin-bottom: var(--space-xxl);
    position: relative;
}

.job-detail__title {
    font-weight: 700;
    font-family: var(--font-family-heading);
    font-size: 2.2rem;
    letter-spacing: 3.6px;
    text-align: left;

    display: inline-block;
    margin-bottom: var(--space-xs);
    position: relative;
}

.job-detail__title::after {
    content: '';
    position: absolute;
    right: -63px;
    top: 50%;
    transform: translateY(-50%) rotate(-9.304deg);
    width: 64.085px;
    height: 35.071px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.job-detail__title--engineer {
    background: linear-gradient(90deg, #3849FF 0%, #AF52B8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job-detail__title--engineer::after {
    background-image: url('../images/shooting-star-engineer.svg');
}

.job-detail__title--call {
    background: linear-gradient(90deg, #FF33AE 0%, #AF52B8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job-detail__title--call::after {
    background-image: url('../images/shooting-star-call.svg');
}

.job-detail__title--office {
    background: linear-gradient(90deg, #5DB850 0%, #00A6B8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job-detail__title--office::after {
    background-image: url('../images/shooting-star-office.svg');
}

@media (min-width: 768px) {
    .job-detail__title {
        font-size: 3.6rem;
    }
    .job-detail__title::after {
        width: 94.085px;
        height: 48.071px;
        right: -105px;
    }
}

.job-detail__script {
    font-family: var(--font-family-script);
    font-size: 3rem;
    color: #7C7D7D;
    font-weight: 400;

    position: absolute;
    top: -67px;
    right: 36%;
    transform: rotate(-17.242deg);
}

@media (min-width: 768px) {
    .job-detail__script {
        font-size: 4.1rem;
        top: -20px;
        right: 10%;
    }
}

.job-detail__script--office {
    font-family: var(--font-family-script);
    font-size: 3rem;
    color: #7C7D7D;
    font-weight: 400;
    line-height: 1.2;

    position: absolute;
    top: -85px;
    right: 26%;
    transform: rotate(-17.242deg);
}

@media (min-width: 768px) {
    .job-detail__script--office {
        top: -20px;
        right: 10%;
    }
}

.job-detail__desc {
    text-align: left;
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
    font-weight: 500;
    line-height: 2;
    max-width: 910px;
    margin-bottom: 4rem;
    border-top: 2px dashed;
    padding-top: 2.8rem;
}

@media (min-width: 768px) {
    .job-detail__desc {
        font-size: 1.8rem;
        margin-bottom: var(--space-xl);
    }
}

/* 各職種の破線色 */
.job-detail--engineer .job-detail__desc {
    border-top-color: #7682FE;
}

.job-detail--call .job-detail__desc {
    border-top-color: #FF33AE;
}

.job-detail--office .job-detail__desc {
    border-top-color: #5DB850;
}

.job-detail__points-title {
    font-family: var(--font-family-heading);
    text-align: left;
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: 2.4px;
    position: relative;
    padding-top: 3rem;
    margin-bottom: var(--space-lg);
}

.job-detail__points-title::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -31px;
    width: 46.023px;
    height: 63.153px;
    transform: rotate(5.667deg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 各職種の装飾画像 */
.job-detail--engineer .job-detail__points-title::before {
    background-image: url('../images/decoration-title-engineer.svg');
}

.job-detail--call .job-detail__points-title::before {
    background-image: url('../images/decoration-title-call.svg');
}

.job-detail--office .job-detail__points-title::before {
    background-image: url('../images/decoration-title-office.svg');
}

.job-detail__points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.2rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .job-detail__points {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
        margin-bottom: var(--space-xl);
    }
}

.job-point__highlight {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-1-5xl);
    font-weight: 700;
    line-height: 1.8;
}

.job-detail--engineer .job-point__highlight {
    color: #AF52B8;
}

.job-detail--call .job-point__highlight {
    color: #FF33AE;
}

.job-detail--office .job-point__highlight {
    color: #5DB850;
}

.job-point__label {
    font-family: var(--font-family-script);
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.1;
    background: linear-gradient(83deg, #FF5900 24.97%, #F09 75.03%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: multiply;

    margin-bottom: var(--space-xxs);
}

.job-point__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: var(--space-xs);
}

.job-point__text {
    font-family: var(--font-family-heading);
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2;
    text-align: center;
}

.job-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

@media (min-width: 768px) {
    .job-tags {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.4rem;
    }
}

.job-tag {
    color: #fff;
    text-align: center;
    font-weight: 700;
    color: #FFF;
    font-family: var(--font-family-heading);
    font-size: 1.6rem;
    line-height: 1.2;

    padding: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

@media (min-width: 768px) {
    .job-tag {
        font-size: 2rem;
        padding: 1rem;
    }
}

.job-tag--engineer {
    opacity: 0.7;
    background: linear-gradient(90deg, #7682FE 0%, #AF52B8 100%);
}
.job-tag--call {
    opacity: 0.7;
    background: linear-gradient(90deg, #FF9D00 0%, #FF33AE 100%);
}
.job-tag--office {
    opacity: 0.7;
    background: linear-gradient(90deg, #5DB850 0%, #00A6B8 100%);
}

/* Work Environment */
.environment {
    background: linear-gradient(180deg, rgba(255, 246, 219, 0.5) 0%, rgba(255, 227, 212, 0.5) 100%);
    padding-top: 1rem;
}

.environment__desc {
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: 2;
    margin-top: 3.7rem;
    max-width: 568px;
    margin-inline: auto;
}

.environment__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem 2rem;
    margin-top: var(--space-4-5l);
    max-width: 320px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .environment {
        padding-top: 10rem;
    }

    .environment__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
        max-width: 900px;
    }
}

.env-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 4rem;
}

/* 十字の破線 */
.env-item::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: -30px;
    width: 60px;
    height: 60px;

    background:
    repeating-linear-gradient(
        to right,
        #888 0 2px,
        transparent 2px 6px
    ),
    repeating-linear-gradient(
        to bottom,
        #888 0 2px,
        transparent 2px 6px
    );

    background-position: center;
    background-size: 100% 2px, 2px 100%;
    background-repeat: no-repeat;

    opacity: 0.5;
}

.env-item:nth-child(4n)::after {
  display: none; /* 右端 */
}

.env-item:nth-last-child(-n+4)::after {
  display: none; /* 最下段 */
}

@media (max-width: 767px) {

/* SP */
  /* 右端（2列）を消す */
    .env-item:nth-child(2n)::after {
        display: none;
    }

  /* 下段（最後の2つ）を消す */
    .env-item:nth-last-child(-n+2)::after {
        display: none;
    }
}

.env-item__icon {
    width: 120px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}

.env-item__icon img {
    width: 100%;
}

.env-item__title {
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;

}

.env-item__value {
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 3.7rem;
    font-weight: 900;
    line-height: 1;
}

.env-item__value span {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 768px) {
    .env-item__title {
        font-size: 2rem;
    }

    .env-item__value {
        font-size: 5.7rem;
    }

    .env-item__value span {
        font-size: 3.2rem;
    }
}


/* Staff Interview */
.interview {
    background-color: transparent;
    padding-top: 0;
}

.interview__desc {
    text-align: center;
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
    font-weight: 500;
    line-height: 2;
    max-width: 440px;
    margin-inline: auto;
}

.interview__list {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin-top: var(--space-4-5l);
}

.interview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .interview {
        padding-top: 15rem;
    }

    .interview__list {
        gap: 11rem;
    }

    .interview-item {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}

.interview-item__face {
    width: 120px;
    height: auto;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .interview-item__face {
        width: 200px;
    }

    .interview-item__content {
        max-width: 568px;
    }
}

.interview-item__info {
    font-weight: 700;
    font-size: var(--font-size-xl);
    font-family: var(--font-family-heading);
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}

/* 奇数番目（1人目、3人目）- 紫グラデーション */
.interview-item:nth-child(odd) .interview-item__info {
    background: linear-gradient(90deg, #AF52B8 0%, #7682FE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 偶数番目（2人目、4人目）- 緑グラデーション */
.interview-item:nth-child(even) .interview-item__info {
    background: linear-gradient(90deg, #5DB850 0%, #00AABD 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.interview-item__text {
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
    font-weight: 500;
    line-height: 2;
    padding-top: var(--space-md);
}

/* 奇数番目（1人目、3人目）- 紫の破線 */
.interview-item:nth-child(odd) .interview-item__text {
    border-top: 2px dashed #7682FE;
}

/* 偶数番目（2人目、4人目）- 青緑の破線 */
.interview-item:nth-child(even) .interview-item__text {
    border-top: 2px dashed #00A6B8;
}

/* Recruitment Process */
/* 背景画像 */
.interview-process-guidelines-wrapper {
    background-color: #fff;
    background-image: url('../images/diagonal-lines2.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 2380px;
}

@media (min-width: 768px) {
    .interview-process-guidelines-wrapper {
        background-position: center 80%;
    }
}

.process {
    background-color: transparent;
    text-align: center;
    padding-top: 0;
}

.process__steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
    .process {
        padding-top: 15rem;
    }

    .process__steps {
        flex-direction: row;
        gap: var(--space-lg);
    }
}

.step {
    flex: 1;
    padding: var(--space-lg) var(--space-md);
    position: relative;
}

/* SP時のStep.3の上余白 */
.step:nth-child(3) {
    margin-top: 5.2rem;
}

@media (min-width: 768px) {
    .step:nth-child(3) {
        margin-top: 0;
    }
}

.step__header {
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 3.2rem;
    line-height: 1;
    padding: 2.6rem 3rem 4.6rem;
    margin-bottom: var(--space-xl);
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Step 1と2の背景画像 */
.step:nth-child(1) .step__header,
.step:nth-child(2) .step__header {
    background-image: url('../images/Recruitment1-2_sp.png');
}

@media (min-width: 768px) {
    .step__header {
        font-size: 3.6rem;
        padding: 2.6rem 3rem;
    }

    .step:nth-child(1) .step__header,
    .step:nth-child(2) .step__header {
        background-image: url('../images/Recruitment1-2_pc.png');
    }
}

/* Step 3の背景画像 */
.step:nth-child(3) .step__header {
    background-image: url('../images/Recruitment3_sp.png');
}

@media (min-width: 768px) {
    .step:nth-child(3) .step__header {
        background-image: url('../images/Recruitment3_pc.png');
    }
}

/* Step 3の右上に星の装飾 */
.step:nth-child(3) .step__header::after {
    content: '';
    position: absolute;
    top: -51px;
    right: -15px;
    width: 87.861px;
    height: 77.999px;
    background-image: url('../images/decoration-stars.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px) {
    .step:nth-child(3) .step__header::after {
        width: 107px;
        height: 95px;
        top: -68px;
        right: -13px;
    }
}

/* ::before疑似要素を削除 */
.step__header::before {
    display: none;
}

.step__num {
    font-family: var(--font-family-script);
    color: #FFF;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.1;
    display: block;
    margin-bottom: var(--space-xxs);
}

@media (min-width: 768px) {
    .step__num {
        font-size: 4.1rem;
    }
}


.step__desc {
    text-align: left;
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
    font-weight: 500;
    line-height: 2;
}

/* Guidelines */
.guidelines {
    background-color: transparent;
    padding-top: 0;
}

@media (min-width: 768px) {
    .guidelines {
        padding-top: 15rem;
    }
}


.guidelines-details {
    margin-bottom: var(--space-xl);
}

.guidelines-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
}

.guidelines-summary::-webkit-details-marker {
    display: none;
}

.guidelines-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2-5xl);
    font-weight: 700;
    line-height: 5.0rem;
    letter-spacing: 3.6px;
    margin: 0;
}

/* エンジニア職 */
.guidelines-engineer .guidelines-title {
    background: linear-gradient(90deg, #3849FF 0%, #AF52B8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.guidelines-engineer .guidelines-summary {
    border-bottom: 2px dashed #7682FE;
}

/* オペレーター職 */
.guidelines-call .guidelines-title {
    background: linear-gradient(90deg, #FF33AE 0%, #AF52B8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.guidelines-call .guidelines-summary {
    border-bottom: 2px dashed #FF33AE;
}

/* 事務職 */
.guidelines-office .guidelines-title {
    background: linear-gradient(90deg, #5DB850 0%, #00A6B8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.guidelines-office .guidelines-summary {
    border-bottom: 2px dashed #5DB850;
}

.guidelines-toggle {
    width: 40px;
    height: 40px;
    background: linear-gradient(90deg, #FB0 0%, #FF5900 100%);
    border: none;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.guidelines-toggle::before,
.guidelines-toggle::after {
    content: '';
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.guidelines-toggle::before {
    width: 20px;
    height: 2px;
}

.guidelines-toggle::after {
    width: 2px;
    height: 20px;
    transition: opacity 0.3s ease;
}

.guidelines-details[open] .guidelines-toggle::after {
    opacity: 0;
}

.guidelines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.guidelines-table th,
.guidelines-table td {
    padding: var(--space-md);
    border-bottom: 1px dashed #c5c5c5;
    text-align: left;
}

.guidelines-table th {
    width: 30%;
    font-weight: 700;
}

/* Entry Form */
.entry {
    background-color: #fff;
    padding-top: 0;
    text-align: center;
}

.entry__desc {
    text-align: center;
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
    font-weight: 500;
    line-height: 2;
}

.entry__footer-msg {
    text-align: center;
    margin-top: 3.2rem;
}

.entry__footer-msg img {
    width: 263px;
    height: auto;
}

@media (min-width: 768px) {
    .entry {
        padding-top: 15rem;
    }

    .entry__desc {
        max-width: 568px;
        display: block;
        margin-inline: auto;
    }

    .entry__footer-msg {
        margin-top: 17rem;
    }

    .entry__footer-msg img {
        width: 671px;
    }
}

/* Footer */
.footer {
    background: linear-gradient(90deg, #FB0 0%, #FF5900 100%);
    color: #fff;
    padding-block: var(--space-xl);
    font-size: var(--font-size-xs);
}

.footer__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.footer__logo {
    width: 170px;
    height: auto;
}

.footer__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.footer__links {
    display: flex;
    gap: var(--space-md);
}

.footer__links a:first-child::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    background-color: #fff;
    margin-left: var(--space-md);
    vertical-align: middle;
}

.p-mark {
    width: 61px;
    height: auto;
}

@media (min-width: 768px) {
    .footer__container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer__logo {
        width: 304px;
    }
    .footer__right {
        align-items: flex-end;
        text-align: right;
    }

    .p-mark {
        width: 71px;
    }
}