/* reset.css */

/* Box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Margin & padding reset */
* {
    margin: 0;
    padding: 0;
}

/* Base settings */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    font-family: sans-serif;
}

/* Media elements */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Form elements */
input,
button,
textarea,
select {
    font: inherit;
}

/* Buttons */
button {
    border: none;
    background: none;
    cursor: pointer;
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
}

/* Lists */
ul,
ol {
    list-style: none;
}

/* Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

:root {
    /* main */
    --color-main: #ECD8A3;

    /* sub */
    --color-sub: #222222;

    /* text */
    --color-text: #222222;

    /* accent */
    --color-accent: #DE0716;
}

html {
    font-size: 62.5%;
}


body{
	color: #222222;
	font-family: "Zen Old Mincho";
}

html, body {
    width: 100%;
    overflow-x: clip; 
}

body {
    position: relative;
}
@media screen and (max-width: 1024px) {
    .pc-only {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    .sp-only {
        display: none !important;
    }
}

p{
	font-size: clamp(1.4rem,0.85vw,1.6rem);
	line-height: 1.8;
	letter-spacing: 0.05em;
}

body {
    position: relative;
	background: #F4E6C3;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image: url(../img/noise.webp);
    background-repeat: repeat;
    background-size: 100px;

    opacity: 0.15;

    pointer-events: none;
    z-index: -1;
}
a{
	transform: translate(0.5s);

}
a:hover{
	opacity: 0.8;
}



.p-recruit-heading01{
	display: flex;
	flex-direction: column;
	gap: 1vh;
	position: relative;
	width: 100%;
	span{
		color: var(--color-text);
		font-family: "Zen Old Mincho";
		font-size: clamp(1.4rem,0.85vw,1.6rem);
		font-style: normal;
		font-weight: 600;
		line-height: 1;
	}
	b{
		color: var(--color-text);
		font-family: "DM Serif Text";
		font-size: clamp(6rem,7.5vw,12rem);
		font-style: normal;
		font-weight: 400;
		line-height: 1;
	}
}

.p-recruit-heading01::before{
	content: "";
	width: 100%;
	height: 0.5px;
	margin-bottom: 10vh;
	background: var(--color-sub);
    @media screen and (max-width: 767px) {
    	margin-bottom: 30px;

    }
}

.p-recruit-heading01--white{
	display: flex;
	flex-direction: column;
	gap: 1vh;
	position: relative;
	width: 100%;
	span{
		color: var(--color-text);
		font-family: "Zen Old Mincho";
		font-size: clamp(1.4rem,0.85vw,1.6rem);
		font-style: normal;
		font-weight: 600;
		line-height: 1;
		color: #fff;
	}
	b{
		color: var(--color-text);
		font-family: "DM Serif Text";
		font-size: clamp(6rem,7.5vw,12rem);
		font-style: normal;
		font-weight: 400;
		line-height: 1;
		color: #fff;

	}
}

.p-recruit-heading01--white::before{
	content: "";
	width: 100%;
	height: 0.5px;
	margin-bottom: 10vh;
	background: #fff;
        @media screen and (max-width: 767px) {
    	margin-bottom: 30px;

    }
}

.p-recruit-btn-01 {
    margin-top: 20px;
    display: block;
}

.p-recruit-btn-01 a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    
    color: #333333; 
    font-size: clamp(1.6rem, 1vw, 1.8rem);
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    
    position: relative;
    padding: 10px 0;
    padding-left: 1em; 
    padding-right: 50px; 
    overflow: hidden;
    
    transition: color 0.3s ease;
}

.p-recruit-btn-01 a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.p-recruit-btn-01 a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
    width: 30px; 
    height: 15px; 
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='15' viewBox='0 0 50 15' fill='none'%3E%3Cpath d='M0 7.5H49M49 7.5L39 1' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    opacity: 1;
}

.p-recruit-btn-01 a:hover::after {
    animation: arrowPass 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes arrowPass {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
    49% {
        transform: translateY(-50%) translateX(100%);
        opacity: 0;
    }

    50% {
        transform: translateY(-50%) translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='15' viewBox='0 0 50 15' fill='none'%3E%3Cpath d='M0 7.5H49M49 7.5L39 1' stroke='%23c11e24' stroke-width='1'/%3E%3C/svg%3E");
    }
}

/* =================================
   もっと見るボタン 共通
================================= */

.p-recruit__more-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: left;
}

.p-recruit__more-btn {
    position: relative;
    width: auto;
    padding: 12px 60px 12px 0;
    border-bottom: 1px solid var(--color-text);

    display: flex;
    align-items: center;
    justify-content: left;

    font-size: 1.4rem;
    line-height: 1.5;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;

    span {
        display: block;
        color: var(--color-text);
    }

    &:hover {
        opacity: 0.8;
    }

    &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 14px;
        height: 1px;
        background: currentColor;
        transition: transform 0.3s ease;
        color: var(--color-text);
    }

    &::before {
        transform: translateY(-50%);
    }

    &::after {
        transform: translateY(-50%) rotate(90deg);
    }

    &.is-active {
        &::after {
            transform: translateY(-50%) rotate(0);
        }
    }
}

/* ヘッダー */
.p-recruit-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    z-index: 40 !important;

    background: transparent;

    @media screen and (max-width: 1024px) {
        height: 60px;
    }
}

.p-recruit-header__logo {
    width: 15vw;

    img {
        width: 100%;
        height: 100%;
    }

    @media screen and (max-width: 1024px) {
        width: 20vw;
    }

    @media screen and (max-width: 767px) {
        width: 35vw;
    }
}

.p-recruit-header__nav {
    display: flex;
    height: 100%;
    align-items: center;
}

.p-recruit-header__list {
    display: flex;
    gap: 1.5vw;
}

.p-recruit-header__link {
    font-size: clamp(1.6rem, 1vw, 1.8rem);
    font-weight: 500;
    position: relative;
}

.p-recruit-header__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 0.5px;
    background: var(--color-text);

    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s ease;
}

.p-recruit-header__link:hover::after {
    transform: scaleX(1);
}

.p-recruit-header__btn {
    background: var(--color-sub);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 3vw;
    margin-left: 1.5vw;
    transition: background-color 0.4s ease-in-out !important;

        display: flex;
        align-items: center;

    p {
        font-size: clamp(1.6rem, 1.25vw, 2.4rem);
        font-weight: 500;
        color: #fff;
    }

    @media screen and (max-width: 1024px) {
        margin-right: 60px;
    }

    /* ==========================================
       ホバーしたときのスタイル
    ========================================== */
    &:hover {
        background-color: var(--color-accent);
        cursor: pointer;
    }

}

.p-recruit-header-entry-menu.is-active ~ * .p-recruit-header__btn,
body:has(.p-recruit-header-entry-menu.is-active) .p-recruit-header__btn {
    background-color: var(--color-accent);
}

.p-recruit-header__menu {
    position: fixed;
    right: 0;
    height: 60px;
    aspect-ratio: 1/1;
    background: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1000!important;

    p {
        position: absolute;
        bottom: 6px;
        left: 0;
        width: 100%;
        margin: 0;
        font-size: 1.0rem;
        font-family: "DM Serif Text";
        text-align: center;
        line-height: 1;
        color: var(--color-text);
    }
}

.p-recruit-header__menu span {
    position: absolute;
    left: 25%;
    width: 50%; 
    height: 1px;
    background-color: #333333; 
    border-radius: 2px;
    transition: 
        top 0.2s ease 0.2s,
        transform 0.2s ease 0s;
}

.p-recruit-header__menu span:nth-child(1) {
    top: calc(50% - 9px); 
}

.p-recruit-header__menu span:nth-child(2) {
    top: calc(50% - 3px); 
}

.p-recruit-header__menu.is-open {
    span {
        transition: 
            top 0.2s ease 0s,
            transform 0.2s ease 0.2s;
    }

    span:nth-child(1) {
        top: calc(50% - 6px);
        transform: rotate(45deg);
    }

    span:nth-child(2) {
        top: calc(50% - 6px);
        transform: rotate(-45deg);
    }
}

.p-recruit-header-entry-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: fixed;
    z-index: 1000 !important;
    right: 0px;
    top: 80px;
    padding: 20px 24px 0 0;
    @media screen and (max-width: 767px) {
        top: 60px;
        padding: 10px 14px 0 0;

    }
}

.p-recruit-header-entry-menu.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.p-recruit-header-entry-menu__list{
    background: var(--color-sub);
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.p-recruit-header-entry-menu__item a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 17px;
    border-bottom: solid #434343 0.5px;
}

.p-recruit-header-entry-menu__text{
    font-size: 1.8rem;
}

.p-recruit-header-entry-menu__icon{
    background-color: #fff;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.p-recruit-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: var(--color-sub);
    z-index: 50 !important; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.p-recruit-nav.is-open {
    opacity: 1;
    pointer-events: auto;
}

.p-recruit-nav__list {
    width: 100%;
    margin-top: 150px;
    margin-bottom: 150px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 30px;
}

.p-recruit-nav__item {
    width: 100%;
    border-top: solid #fff 0.5px;
    padding-top: 20px;

    a {
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }

    i {
        color: #fff;
        font-size: 1.4rem;
        line-height: 1;
        font-family: "Zen Old Mincho";
        font-style: normal;
    }

    b {
        color: #fff;
        font-size: 4rem;
        line-height: 1;
        font-family: "DM Serif Text";
        font-weight: 400;
    }
}

.p-recruit-header__logo,
.p-recruit-header__list * {
    transition: opacity 0.3s ease !important;
}

body:has(.p-recruit-header__menu.is-open) {
    .p-recruit-header {
        background-color: none !important;
        background: none !important;
    }

    .p-recruit-header__logo,
    .p-recruit-header__list,
    .p-recruit-header__btn {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
.p-recruit{
	position: relative;
}
.p-recruit-kv{
	position: relative;
	top: 0;
}

.p-recruit-kv__slider {
	top: 0;
	position: sticky;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* スライダー */
.p-recruit-kv__slider {
    top: 0;
    position: sticky;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slide {
    z-index: 5;
    position: absolute;
    top: 50%;
    width: 25vw;
    height: 55vh;
    border-radius: 2rem;
    overflow: hidden;
    transform: translateY(-50%);
    opacity: 0;
    transition:
        left 1.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.5s ease;
    will-change: transform, left, opacity;
    backface-visibility: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide.far-left {
    left: -25%;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    z-index: 5;
}

.slide.left {
    left: 2%;
    transform: translateY(-50%) scale(0.8) skewX(-5deg);
    opacity: 0.9;
}

.slide.center {
    left: 38%;
    transform: translateY(-50%) scale(1.4) skewX(-6deg);
    opacity: 1;
}

.slide.right {
    left: 73%;
    transform: translateY(-50%) scale(0.8) skewX(-5deg);
    opacity: 0.9;
}

.slide.far-right {
    left: 105%;
    transform: translateY(-50%) scale(0.7);
    opacity: 0;
    z-index: 0;
}

@media screen and (max-width: 1024px) {
    .slide {
        width: 65vw;
        height: 45vh;
        border-radius: 1.5rem;
    }

    .slide.far-left {
        left: -70%;
        transform: translateY(-50%) scale(0.6);
        opacity: 0;
    }

    .slide.left {
        left: -45%;
        transform: translateY(-50%) scale(0.85) skewX(-4deg);
        opacity: 0.6;
    }

    .slide.center {
        left: 17.5%;
        transform: translateY(-50%) scale(1.15) skewX(-5deg);
        opacity: 1;
        z-index: 10;
    }

    .slide.right {
        left: 80%;
        transform: translateY(-50%) scale(0.85) skewX(-4deg);
        opacity: 0.6;
    }

    .slide.far-right {
        left: 105%;
        transform: translateY(-50%) scale(0.6);
        opacity: 0;
    }
} 

/* ========================================
   背景スライダー
======================================== */
.fv-slider-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.back-slide {
    position: absolute;
    top: 50%;
    width: 21vw;
    height: 53vh;
    border-radius: 3rem;
    overflow: hidden;
    opacity: 0;
    transition:
        left 1.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.5s ease;
    will-change: left, transform, opacity;
}

.back-slide.far-left {
    left: -25%;
    transform: translateY(-35%) scale(0.8) skewX(-5deg);
    opacity: 0;
    z-index: 1;
}

.back-slide.left {
    left: 0%;
    transform: translateY(-45%) scale(0.95) skewX(-5deg);
    opacity: 1;
    z-index: 2;
}

.back-slide.center-left {
    left: 25%;
    transform: translateY(-50%) scale(1) skewX(-5deg);
    opacity: 1;
    z-index: 3;
}

.back-slide.center-right {
    left: 50%;
    transform: translateY(-50%) scale(1) skewX(-5deg);
    opacity: 1;
    z-index: 3;
}

.back-slide.right {
    left: 75%;
    transform: translateY(-45%) scale(0.95) skewX(-5deg);
    opacity: 1;
    z-index: 2;
}

.back-slide.far-right {
    left: 105%;
    transform: translateY(-35%) scale(0.8) skewX(-5deg);
    opacity: 0;
    z-index: 1;
}

.back-slide.hide {
    left: -25%; 
    transform: translateY(-35%) scale(0.8) skewX(-5deg);
    opacity: 0;
    z-index: 0;
    transition: none; 
}



/* ========================================
   ぼかしフィルター
======================================== */
.p-recruit-kv__blur-filter {
    position: absolute;
    inset: 0; 
    z-index: 3; 
    
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    pointer-events: none;
}

.p-recruit-kv__staff-notation{
	position: absolute;
	
	bottom:10vh;
	img{
		width: 100%;
	}
	z-index: 4;
}

/* ========================================
   白フィルター
======================================== */
.p-recruit-kv__white-filter {
    position: absolute;
    inset: 0;
    z-index: 6;

    background: rgba(255, 255, 255, 0);

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    pointer-events: none;

    transition:
        background 0.2s linear,
        backdrop-filter 0.2s linear;
}


/* ========================================
	キービジュアル見出し
======================================== */
.p-recruit-kv__heading {
	width: 100%;
	height: 100%;
    position: absolute;
    inset: 0;
    z-index: 6;
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
    @media screen and (max-width: 767px) {
        flex-direction: column;
	padding: 0 20px;
    }
    

}


.p-recruit-kv__en-heading{
	margin-top: 11vh;
	height: fit-content;
	p{
		color: #000;
		font-family: "DM Serif Text";
		font-style: normal;
		font-weight: 400;
		line-height: 1;
	}
}

.p-recruit-kv__en-heading--small{
		font-size:clamp(3.5rem,3vw,7rem) ;
}

.p-recruit-kv__en-heading--large{
		font-size:clamp(6rem,6.26vw,12rem) ;

}

.p-recruit-kv__ja-heading{
    margin-top: auto;
    margin-bottom: 10vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: fit-content;
    p{
		font-size:clamp(3.5rem,4.2vw,8rem) ;
        line-height: 1;
        width: fit-content;
    }
    @media screen and (max-width: 767px) {
        margin-left: auto;
    }
    
}


/* ========================================
	コンセプト
======================================== */

.p-recruit-kv-concept{
	margin-top: 100vh;
	position: relative;
z-index: 6;
display: flex;
padding: 0 80px;
@media screen and (max-width: 767px) {
    flex-direction: column;
    margin-top: 80vh;
    padding: 0 20px;
}

}


.p-recruit-kv-concept__left{
	flex: 1;
	height: fit-content;
	h2{
		color: #222;
	font-family: "Zen Old Mincho";
	font-size:clamp(2.8rem,5vw,10rem);
	font-style: normal;
	line-height: 1.5; /* 120% */
	}
    @media screen and (max-width: 767px) {
   width: 100%;
}
}

.p-recruit-kv-concept__right{
	width: 50%;
	margin-top: 27vh;
	display: flex;
	flex-direction: column;
	gap: 4.8vh;
	padding-bottom: 28vh;
	p{
		font-size: clamp(1.6rem,0.9vw,1.8rem);
		line-height: 2;
	}
    @media screen and (max-width: 767px) {
            margin-top: 3vh;
            width: 100%;
            gap: 2vh;
            padding-bottom: 40px;
    }
}

/* ========================================
	職種紹介
======================================== */

.p-recruit-job{
	position: relative;
	padding: 28vh 80px 14vh 80px;
    @media screen and (max-width: 1024px) {
	padding: 150px 20px 20px 20px;

    }
}

.p-recruit-job::before{
content: "";
    position: absolute;
    
    top: 0; 
    left: 0;
    width: 100%;
    
    height: 20vh; 
    
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    
    pointer-events: none;
}


.p-recruit-job__inner{
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-top: 7.5vh;
    @media screen and (max-width: 767px) {
        flex-direction: column;
	margin-top: 3vh;

    }
}

.p-recruit-job__left{
	top: 15vh;
	width: 240px;
	position: sticky;
	height: fit-content;
        @media screen and (max-width: 767px) {
        position: relative;
        width: 100%;
        top: 0;
    }
}



.p-recruit-job-nav {
    display: flex;
    flex-direction: column;
    gap: 2.8vh;

            @media screen and (max-width: 767px) {
                gap: 2vh;
    }

    a {
        text-decoration: none;
        color: var(--color-text);
        font-size: clamp(1.6rem, 0.9vw, 1.8rem);
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        
        transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        transform: translateZ(0);

        &.is-active {
            color: var(--color-accent) !important; 
        }
    }
}


.p-recruit-job__right{
	width: calc(90% - 240px);

        @media screen and (max-width: 767px) {
        width: calc(95% - 240px);
        margin-top: 5vh;
    }

    @media screen and (max-width: 767px) {
        width: 100%;
        margin-top: 5vh;
    }
}
.p-recruit-job__list{
	display: flex;
	flex-direction: column;
	gap: 10vh;
        @media screen and (max-width: 767px) {
            gap: 40px;
    }
}

.p-recruit-job__item {
    opacity: 0;
    transform: translateY(40px); 
    transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* 画面内に入った時に付与するクラス */
.p-recruit-job__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.p-recruit-job__indicator span:first-child {
    background: var(--color-accent, #666);
}
.p-recruit-job__img {
    position: relative;
    overflow: hidden;
}



.p-recruit-job__slide {
    position: relative;
    width: 100%;
    height: 60vh;
	overflow: hidden;
	border-radius: 10px;
        @media screen and (max-width: 1024px) {
            height: 30vh;
    }
}

.p-recruit-job__slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    transition: opacity 2s ease-in-out;
}

.p-recruit-job__slide img.is-active {
    opacity: 1;
    z-index: 2;
}

.p-recruit-job__indicator {
    width: fit-content;
    margin-top: 1vh;
    margin-left: auto;
    display: flex;
    gap: 0.5vw;
}


.p-recruit-job__indicator span {
    border-radius: 50%;
    width: 0.5vw;
    aspect-ratio: 1/1;
    background: #666 !important; 
    transition: background-color 0.3s ease;
    @media screen and (max-width: 767px) {
                width: 1vw;

    }
}

.p-recruit-job__indicator span.is-active {
    background: var(--color-accent) !important; /* アクティブ時だけ赤にする */
}

.p-recruit-job__body{
	margin-top: 3.4vh;
        @media screen and (max-width: 767px) {
            	margin-top: 2vh;


    }
}
.p-recruit-job__heading-01{
	color: var(--color-text);
	font-size: clamp(2.4rem,2vw,4.2rem);
    
	line-height: 1;
	position: relative;
}

.p-recruit-job__heading-01::after{
	display: block;
	content: "";
	width: 100%;
	height: 0.5px;
	margin-top: 2vh;
	background: var(--color-sub);
}

.p-recruit-job__box{
	margin-top: 3vh;
	display: flex;
	gap: 5vw;
    @media screen and (max-width: 767px) {
        flex-direction: column;
        gap: 2vh;
    }
}

.p-recruit-job__heading-02{
	font-size: clamp(2rem,1.3vw,2.6rem);
	flex: 1;
	line-height: 1.8;
}

.p-recruit-job__text{
	width: calc(55% - 4vw);
	display: flex;
	flex-direction: column;
	gap: 2vh;
    @media screen and (max-width: 767px) {
        width: 100%;
        gap: 1vh;
    }
}

.p-recruit-job__other-list {

    list-style: none;
    padding: 0;
    margin: 0;
		margin-top: 3.5vh; 
        display: flex;
        flex-direction: column;
    gap: 40px;

            @media screen and (max-width: 1024px) {
            grid-template-columns: repeat(2, 1fr); 


    } 
        @media screen and (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr); 
            gap: 26px;

    } 
}


.p-recruit-job__other-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;

    @media screen and (max-width: 767px) {
        gap: 7px;
    }
}

.p-recruit-job__other-heading {
    font-size: clamp(2rem, 1.25vw, 2.4rem);
}

/* --------------------------------
   もっと見る
-------------------------------- */

.p-recruit-job__other-list {
    .p-recruit-job__other-item:nth-child(n + 3) {
        display: none;
        opacity: 0;
    }

    &.is-open {
        .p-recruit-job__other-item:nth-child(n + 3) {
            display: flex;
            animation: jobOtherFadeIn 0.4s ease forwards;
        }
    }
}

@keyframes jobOtherFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------
   ボタン
-------------------------------- */

.p-recruit-job__other-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: left;
}

.p-recruit-job__other-more-btn {
    position: relative;
    width: auto;
    margin-top: 40px;
    padding: 12px 60px 12px 0px;
    border-bottom: 1px solid var(--color-text);
    display: flex;
    align-items: center;
    justify-content: left;

    font-size: 1.4rem;
    line-height: 1.5;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;

    span {
        display: block;
    }

    &:hover {
        opacity: 0.8;
    }
  &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 14px;
        height: 1px;
        background: currentColor;
        transition: transform 0.3s ease;
    }

    &::before {
        transform: translateY(-50%);
    }

    &::after {
        transform: translateY(-50%) rotate(90deg);
    }

    &.is-active {
        &::after {
            transform: translateY(-50%) rotate(0);
        }
    }
}




.p-recruit-about{
	position: relative;
	padding: 14vh 0;

        @media screen and (max-width: 1024px) {
        padding: 60px 0 20px 0;
    }
}
.p-recruit-about__heading{
	padding: 0 80px;
            @media screen and (max-width: 1024px) {
        padding: 0 20px;
    }
}
.p-recruit-about__head{
	display: flex;
	padding: 0 80px;
	margin-top: 6vh;
	gap: 2vw;
    align-items: center;
    @media screen and (max-width: 1024px) {
        padding: 0 20px;
        margin-top: 3vh;
    }
    @media screen and (max-width: 767px) {
        flex-direction: column;
        align-items:flex-start;
    }
}

.p-recruit-heading02{
	display: flex;
	flex-direction: column;
	span{
		font-size: clamp(2rem,2.2vw,4.2vw);
	}
}

.p-recruit-people__heading{
    width: 50%;
    @media screen and (max-width: 767px) {
            width: 100%;
    }
}

.p-recruit-about__read{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2vh;
	line-height: 1.7;

	p{
	line-height: 1.7;
	}
}

.p-recruit-about__img{
	margin-top: 5.5vh;
	padding: 0 80px;
	width: 100%;
	height: 70vh;
	border-radius: 10px;
	overflow: hidden;

    @media screen and (max-width: 1024px) {
        padding: 0 20px;
        height: 40vh;

    }

    @media screen and (max-width: 767px) {
        padding: 0 20px;
        height: 30vh;

    }
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 20px;
	}
}
.p-recruit-foot{
	margin-top: 5.5vh;
	padding-left: 80px;
	display: flex;
		gap: 5vw;

    @media screen and (max-width: 1024px) {
padding-left: 20px;
	margin-top: 3vh;

    }
    @media screen and (max-width: 767px) {
        flex-direction: column;
        padding: 0 ;
	margin-top: 3vh;

    }
}
.p-recruit-foot__text{
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 2vh;
    @media screen and (max-width: 767px) {
            width: 100%;
            padding: 0 20px;
    }
}
.p-recruit-heading03{
	display: flex;
	flex-direction: column;
	span{
		font-size: clamp(2.2rem,2.2vw,4.2vw);
	}
}

.p-recruit-foot__slider {
    flex: 1;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    pointer-events: none;
    
    @media screen and (max-width: 767px) {
        width: 100%;
    height: 300px;

    }
}

.p-recruit-foot__slider__inner {
    height: 100%;
    display: flex;
    width: max-content;
    position: relative;
    left: 0;
    top: 0;
    
    /* Swiperの等速移動設定 */
    transition-timing-function: linear !important;
}

.p-recruit-foot__slider-item {
    width: 250px!important;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    
    @media (max-width: 767px) {
        width: 200px!important;
    }
}

.p-recruit-foot__slider-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.p-recruit-people{
	padding: 14vh 80px;
	position: relative;

        @media screen and (max-width: 1024px) {
	    padding: 3vh 20px;
    }
    @media screen and (max-width: 767px) {
	   padding: 60px 20px 20px 20px;
    }
}


.p-recruit-about-logo-slider {
        height: fit-content;
    margin-top: 3vh;
    width: 100vw;
    overflow: hidden;
    position: relative;

    background-image: repeating-linear-gradient(
        to bottom,
        #e2d7c5 0px,
        #e2d7c5 1px,
        transparent 1px,
        transparent 16px
    );

    background-size: 100% 65px;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
}

.p-recruit-about-logo-slider__list {
    display: flex;
    align-items: center;
    width: max-content;
    height: fit-content;
    padding: 3.7vh 0;
    margin: 0;
    list-style: none;

    /* Swiperの等速移動 */
    transition-timing-function: linear !important;

    @media screen and (max-width: 767px) {
        padding: 2vh 0;
    }
}

.p-recruit-about-logo-slider__item {
    width: 10vw;
    max-width: 150px!important;
    flex-shrink: 0;

    @media screen and (max-width: 767px) {
        width: 150px;
    }
}

.p-recruit-about-logo-slider__item img {
    width: 100%;
    height: auto;
    display: block;
}

.p-recruit-people__heading{
	margin-top: 3vh;
}

.p-recruit-people__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4.6vh 2.6vw;
    list-style: none;
    padding: 0;
    margin: 7.5vh auto 0 auto;
    width: 100%;
        @media screen and (max-width: 767px) {
            margin-top: 30px;
            gap: 10px;
    }
}

.p-recruit-people__item {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.p-recruit-people__card {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.p-recruit-people__card{

}

.p-recruit-people__img {
    width: 100%;
    height: 45vh;
    max-height: 480px;
    overflow: hidden;
    position: relative;
    @media screen and (max-width: 767px) {
        height: 280px;
    }
    
}

.p-recruit-people__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 0.8s ease;
    
}

.p-recruit-people__card:hover .p-recruit-people__img img {
    transform: scale(1.1); /* 1.1倍に拡大 */
}

.p-recruit-people__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    position: relative;
}

.p-recruit-people__body-heding {
    border-top-right-radius: 5px;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(-100%);
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
    width: fit-content;

}

.p-recruit-people__body-heding span {
    font-size: clamp(1.4rem, 1.25vw, 2.4rem);
    background: var(--color-sub);
    color: #fff;
    padding: 5px 7px;
    border-radius: 0 3px 3px 0;
    width: fit-content;
}

.p-recruit-people__body-heding--official span{
    background: #fff;
    color: var(--color-text);

}


.p-recruit-people__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-recruit-people__job {
    margin: 0;
    color: var(--color-text);
    width: fit-content;
    margin-top: 1.5vh;
        font-size: clamp(1.2rem, 0.85vw, 1.6rem);
}

.p-recruit-people__name {
    margin: 0;
    font-size: clamp(2.4rem, 2.5vw, 4.8rem);
    font-family: "DM Serif Text";
    font-weight: 400;
    color: var(--color-text);
    line-height: 1;
}

.p-recruit-people__workplace {
    margin: 0;
}

.p-recruit-people__button {
    position: relative;
    width: 35px;
    height: 35px;
    background-color: var(--color-sub);
    border-radius: 50%;
    flex-shrink: 0;
}

.p-recruit-people__button span {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
    transition: transform 0.4s ease;
}

.p-recruit-people__button span:nth-child(1) {
    width: 13px;
    height: 1px;
}

.p-recruit-people__button span:nth-child(2) {
    width: 1px;
    height: 13px;
}


@media screen and (max-width: 1024px) {
    .p-recruit-people__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.p-recruit-people__item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-recruit-people__item.is-animated {
    opacity: 1;
    transform: translateY(0);
}

.p-recruit-work__section {
    position: relative;
    width: 100%;
}

.p-recruit-work__main-img {
    position: sticky;
    top: 0;
    left: 0;
    width: 60%;
    height: 100vh;
    margin: 0 auto;
    will-change: width;
    backface-visibility: hidden;
    z-index: 1;
    overflow: hidden;
}

.p-recruit-work__main-img-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.p-recruit-work__main-img-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(0, 0, 0, 1);
    opacity: var(--overlay-opacity, 0);
    will-change: opacity;
}

.p-recruit-work__main-img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-recruit-work__content {
    margin-top: 250vh;
    z-index: 4;
    position: relative;
    display: flex;
	flex-direction: column;
    width: 100%;
	padding: 0 80px;
    @media screen and (max-width: 1024px) {
       	padding: 0 20px;
        margin-top: 150vh;
    }
}

.p-recruit-work__heading{
	i{
		color: #fff;
	}
	b{
		color: #fff;
	}
}

.p-recruit-work__head{
	display: flex;
	margin-top: 6vh;
	gap: 2vw;
    @media screen and (max-width: 767px) {
       	flex-direction: column;
        	gap: 2vh;
            margin-top: 3vh;
    }
}

.p-recruit-heading02--white{
	width: 50%;
	display: flex;
	flex-direction: column;
	span{
		font-size: clamp(2.4rem,2.2vw,4.2vw);
		color: #ffffff;
	}
    @media screen and (max-width: 767px) {
        width: 100%;
    }
}

.p-recruit-work__read{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2vh;
	line-height: 1.7;

	p{
	line-height: 1.7;
	color: #fff;
	}
}

.p-recruit-work-list {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15vh;
    margin-top: 23vh;
    margin-bottom: 30vh;
    @media screen and (max-width: 1024px) {
    margin-top: 5vh;
    }
    @media screen and (max-width: 767px) {
    margin-top: 60px;
    gap: 40px;
    height: auto;
    margin-bottom: 60px;
    }
}

.p-recruit-work-item {
    position: sticky;
    top: 12.5vh;

    width: 100%;
    height:75vh;
    display: flex;
    gap: 5.2vw;
    padding: 9.26vh 5.2vw;
	background: #fff;
    border-radius: 10px;


    background-image: url("../img/work-staff-notation.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;

will-change: transform, opacity;
    transform-origin: center top;
    @media screen and (max-width: 1080px) {
        height: auto;

    }
    @media screen and (max-width: 767px) {
       	flex-direction: column-reverse;
        padding: 20px;
        position: relative;
        height: auto;
        top: 0;

    }
}


.p-recruit-work-item--1 {
    z-index: 1;
}

.p-recruit-work-item--2 {
    z-index: 2;
}

.p-recruit-work-item--3 {
    z-index: 3; 
}

.p-recruit-work-item__img{
    height: 100%;
    max-height: 500px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
    @media screen and (max-width: 1080px) {
        width: 50%;

    }
    @media screen and (max-width: 767px) {
        width: 100%;
        height: 250px;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.p-recruit-work-item__content{
    flex: 1;
}
.p-recruit-work-item__text{
    margin-top: 7.4vh;
    @media screen and (max-width: 1024px) {
    margin-top: 3vh;
    }
}

.p-recruit-work-item__no{
    line-height: 1.8;
    padding-right: 30px;
    width: fit-content;
    font-size: clamp(1.3rem,0.73vw,1.4rem);
    font-family: "DM Serif Text";
    border-bottom: 0.5px solid var(--color-sub);
}
.p-recruit-work-item__read{
    margin-top: 3.7vh;
    line-height: 1.8;
    @media screen and (max-width: 1024px) {
    margin-top: 1vh;
    }
}



.p-recruit-welfare{
    position: relative;
    padding: 14vh 80px 14vh 80px;
    @media screen and (max-width: 1024px) {
          padding: 80px 20px 20px 20px;

    }
}

.p-recruit-welfare__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px;
    width: 100%;
    padding: 60px 0;
    list-style: none;

    @media screen and (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 3.7vh 0;
                padding-bottom: 0;
    }

    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;

    }
}



.p-recruit-welfare__item {
    display: flex;
    flex-direction: column;
    gap: 1vh 1.56vw;
    background-color: #ffffff;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    @media screen and (max-width: 1024px) {
              padding: 10px 10px;
gap: 1vh 1.56vw;
    }
}

.p-recruit-welfare__heading-wrapper{
    display: flex;
    align-items: center;
    gap: 25px;
        @media screen and (max-width: 767px) {
            gap: 15px;
    }
}

.p-recruit-welfare__heading-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
    width: 55px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    img{
        width: 30px;
        aspect-ratio: 1/1;
    }
    @media screen and (max-width: 767px) {
        width: 35px;
        img{
            width: 20px;
        }
    }
}

.p-recruit-welfare__heading {
    font-size: clamp(1.6rem,0.8vw,1.8rem);
    font-weight: bold;
    color: var(--color-text);
    line-height: 1.4;
}

.p-recruit-welfare__read {
    font-size: clamp(1.4rem,0.7vw,1.6rem);
    color: var(--color-text);
    line-height: 1.7;
}
@media screen and (max-width: 1024px) {
    .p-recruit-welfare__list .p-recruit-welfare__item:nth-child(n+5) {
        display: none;
        opacity: 0;
    }

    .p-recruit-welfare__list.is-open .p-recruit-welfare__item:nth-child(n+5) {
        display: flex;
        animation: welfareFadeIn 0.4s ease forwards;
    }
}

@keyframes welfareFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.p-recruit-welfare__btn-wrap {
    width: 100%;
    display: flex;
    justify-content: left;
}

.p-recruit-welfare__more-btn {
    position: relative;
    width: auto;
    margin-top: 20px;
    padding: 12px 60px 12px 0px;
    border-bottom: 1px solid var(--color-text);
    display: flex;
    align-items: center;
    justify-content: left;

    font-size: 1.4rem;
    line-height: 1.5;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;

    span {
        display: block;
    }

    &:hover {
        opacity: 0.8;
    }
  &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 14px;
        height: 1px;
        background: currentColor;
        transition: transform 0.3s ease;
    }

    &::before {
        transform: translateY(-50%);
    }

    &::after {
        transform: translateY(-50%) rotate(90deg);
    }

    &.is-active {
        &::after {
            transform: translateY(-50%) rotate(0);
        }
    }
}


.p-recruit-numbers{
    position: relative;
    margin-top: 15vh;
    padding: 14vh 80px 14vh 80px;
    background: #FBF5E6;
    margin-bottom: 25vh;
    @media screen and (max-width: 1024px) {
          padding: 60px 20px 20px 20px;
          margin-top: 80px;
          margin-bottom: 150px;

    }
}

.p-recruit-numbers::before{
content: "";
    position: absolute;
    left: 0;
    bottom: 100%; 
    width: 100%;
    height: 50vh; 
    background-image: url("../img/numbers_bg_top.webp");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    pointer-events: none;
    
}

.p-recruit-numbers::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%; 
    width: 100%;
    height: 50vh; 
    background-image: url("../img/numbers_bg_bottom.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    pointer-events: none;
}

.p-recruit-contribution{
    padding: 14vh 80px;
        @media screen and (max-width: 1024px) {
          padding: 0 20px 14vh 20px;

    }
}

.p-recruit-entry{
    background: #4A2E18;
}

.p-recruit-entry__heading01{
    padding: 0 80px;
    margin-bottom: 10vh;
}



.p-recruit-entry-slider-section {
    position: relative;
    width: 100vw;
    height: 100vh; 
    background-color: var(--color-sub); 
    overflow: hidden;
    @media screen and (max-width: 767px) {
        height: fit-content;
        }
}

.p-recruit-entry-slider {
    position: absolute;
    top: -30vh;
    left: -35vw;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 3vw; 
    width: 170vw; 
    height: 160vh;
    transform: rotate(-12deg); 
    transform-origin: center center;
    pointer-events: none; 
}

.p-recruit-entry-slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 0 80px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); 
    pointer-events: none;
}

.p-recruit-entry-slider__col {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    width: 35vw; 
    height: max-content;
}

.p-recruit-entry-slider__list {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    height: max-content;
    list-style: none;
    padding: 0;
    margin: 0;
    will-change: transform;
}

.p-recruit-entry-slider__col--up .p-recruit-entry-slider__list {
    animation: entryScrollUp 35s linear infinite;
}

.p-recruit-entry-slider__col--down .p-recruit-entry-slider__list {
    animation: entryScrollDown 35s linear infinite;
}

.p-recruit-entry-slider__item {
    width: 100%;
    aspect-ratio: 3 / 4; 
    overflow: hidden;
    border-radius: 6px;
}

.p-recruit-entry-slider__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-recruit-entry-container {
    position: relative;
    z-index: 3; 
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes entryScrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-50% - 1.5vh)); 
    }
}

@keyframes entryScrollDown {
    0% {
        transform: translateY(calc(-50% - 1.5vh));
    }
    100% {
        transform: translateY(0);
    }
}


.p-recruit-entry-container__inner{
    padding: 0 80px;
    width: 100%;
    @media screen and (max-width: 1024px) {
        padding: 10vh 20px;

    }
}

.p-recruit-entry__button {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    background: linear-gradient(91deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%);
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(30px);
    
    transition: background 0.3s ease, border-color 0.3s ease;

    a {
        padding: 8vh 40px;
        width: 100%;
        font-size: clamp(2.8rem,3.5vw,6.8vw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        
        transition: color 0.3s ease;

        @media screen and (max-width: 767px) {
            padding: 3.7vh 20px;
        }
    }

    /* ==========================================
       ホバーしたときのスタイル
    ========================================== */
    &:hover {
        background: #ffffff; 
        border-color: #ffffff;

        a {
            color: #111111;
        }

        .p-recruit-entry__button-arrow img {
            background: #fff;
        }
    }
}

.p-recruit-entry__button-arrow {
    width: 5vw;
    min-width: 40px;
    aspect-ratio: 1/1;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    img {
        width: 1vw; 
    min-width: 10px;
        height: auto;
        transition: filter 0.3s ease;
    }
}

.p-recruit-entry__button-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25vw;
    width: 100%;
    margin-top: 24px;
    @media screen and (max-width: 767px) {
     margin-top: 0.625vh;

    }
}

.p-recruit-entry__button02 {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    background: linear-gradient(91deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;


        &:hover {
        background: #ffffff;
        border-color: #ffffff;

        a {
            color: #111111; 
        }
        .p-recruit-entry__button-arrow img {
            background: #fff;
        }
    }
}

.p-recruit-entry__button02 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 3.7vh 20px;
    font-size: 2.8rem;
    color: #fff;
    text-decoration: none;
    box-sizing: border-box;
}

.p-recruit-entry__button02-arrow {
    width: 3vw;
    min-width: 40px;
    aspect-ratio: 1/1;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    @media screen and (max-width: 767px) {
        width: 5vw;

    }
}

.p-recruit-entry__button02-arrow img {
    object-fit: contain;
        @media screen and (max-width: 767px) {
          width: 10px;

    }
}

.p-recruit-footer{
    padding: 9.25vh 80px 7.5vh 80px;
    @media screen and (max-width: 767px) {
           padding: 9.25vh 20px 7.5vh 20px;

    }
}

.p-recruit-footer__head{
    display: flex;
    justify-content: space-between;
    @media screen and (max-width: 767px) {
        flex-direction: column;
    }
}

.p-recruit-footer__nav{
    display: flex;
    align-items: center;
    gap: 2vw;
    
    a{
        font-size:clamp(1.4rem,1.15vw,2.4rem) ;
        @media screen and (max-width: 767px) {
        }
    }
    @media screen and (max-width: 767px) {
        margin-top: 4vh;
        flex-wrap: wrap;
    }
}

.p-recruit-footer__foot{
    padding-top: 7.5vh;
    border-top: solid var(--color-sub) 0.5px;
    display: flex;
    justify-content: space-between;
    margin-top: 7.5vh;
        @media screen and (max-width: 767px) {
        flex-direction: column;
    }
}

.p-recruit-footer__foot-list{
    display: flex;
    gap: 2vw;
    @media screen and (max-width: 767px) {
        flex-direction: column;
    }
}

.p-recruit-footer__foot-item{
    a{
        	font-size: clamp(1.4rem,0.85vw,1.6rem);
	line-height: 1.5;
	letter-spacing: 0.03em;
    }
}

.p-recruit-footer__copyright{
    font-size: clamp(1.2rem,0.8vw,1.4rem);
    @media screen and (max-width: 767px) {
        margin-top: 4vh;
    }
}



.p-recruit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.p-recruit-modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.p-recruit-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.p-recruit-modal__overlay__inner {
    background-color: #FBF5E6;
    width: 90%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}
.p-recruit-modal__overlay__inner {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
}

.p-recruit-modal__container {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(20px);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.p-recruit-modal[aria-hidden="false"] .p-recruit-modal__container {
    transform: translateY(0);
}

.p-recruit-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: #fff;
    border: none;
    cursor: pointer;
    z-index: 1002;
    padding: 0;

    p {
        position: absolute;
        bottom: 6px;
        left: 0;
        width: 100%;
        margin: 0;
        font-size: 1.0rem;
        font-family: "DM Serif Text";
        text-align: center;
        line-height: 1;
        color: #333333;
    }
}

.p-recruit-modal__close span {
    position: absolute;
    left: 25%;
    width: 50%; 
    height: 1px;
    background-color: #333333; 
    border-radius: 2px;
}

.p-recruit-modal__close span:nth-child(1) {
    top: calc(50% - 6px);
    transform: rotate(45deg);
}

.p-recruit-modal__close span:nth-child(2) {
    top: calc(50% - 6px);
    transform: rotate(-45deg);
}

.p-recruit-modal__content {
    width: 100%;
    padding: 6vh 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.p-recruit-modal__content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.p-recruit-modal__header {
    margin-bottom: 3vh;
    border-bottom: 1px solid #eee;
    padding: 0 40px;
    padding-bottom: 20px;
    @media screen and (max-width: 767px) {
        padding: 0 20px 20px 20px;

    }
}
.p-recruit-modal__name{
    font-family: "DM Serif Text";
    font-size: clamp(5rem,3.6vw,6.8rem);
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 94.118% */
}

.p-recruit-modal__workplace {
    font-size: 1.4rem;
    color: #666;
    margin: 0;
}

.p-recruit-modal__copy{
    font-size: clamp(1.8rem,1.3vw,3.6rem);
}


.p-recruit-modal__body {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #444;
    margin-top: 24px;
    @media screen and (max-width: 767px) {
     margin-top: 3vh;

    }
}

.p-recruit-modal__img{
    width: 100%;
    height: 60vh;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    @media screen and (max-width: 767px) {
        height: 30vh;

    }
}

.p-recruit-modal__meta{
    display: flex;
    gap: 1vw;
    @media screen and (max-width: 767px) {
        flex-direction: column;

    }
}

.p-recruit-modal__job{
    width: fit-content;
    font-size: 2.0rem;
}

.p-recruit-modal__heading{
    margin-top: 2vh;
    font-size: clamp(2.4rem,2vw,4.2rem);
}

.p-recruit-modal__body{
    display: flex;
    position: relative;
    padding: 0 40px;
    gap: 2vw;
    @media screen and (max-width: 767px) {
        padding: 0 20px;
        flex-direction: column;
        gap: 2vh;

    }
}
.p-recruit-modal__nav {
    border-radius: 10px;
    position: sticky;
    top: 0;
    width: 20%;
    height: fit-content;
    padding: 40px;
    background: var(--color-main);
    
    overflow: hidden; 

    @media screen and (max-width: 767px) {
        width: 100%;

        position: relative; 
        top: auto;
        padding: 20px;
    }
}

.p-recruit-modal__nav::before {
    content: "";
    position: absolute; 
    inset: 0;

    background-image: url(../img/noise.webp);
    background-repeat: repeat;
    background-size: 100px;

    opacity: 0.15;

    pointer-events: none;
    z-index: 1; 
}

.p-recruit-modal__nav-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2vh;
    z-index: 3; 
    
    h5 {
        font-size: clamp(1.8rem,1.1vw,2.2rem);
        font-family: "DM Serif Text";
    }
    @media screen and (max-width: 767px) {
        gap: 0.5vh;
    }
}



.p-recruit-modal__interview-item{
    margin-top: 3vh;
    margin-bottom: 5vh;


}


.p-recruit-modal__interview-foot{
    background: #FBF5E6;
    border-radius: 8px;
    padding: 16px;
}
.p-recruit-modal__interview-img{
        margin-top: 3vh;
    margin-bottom: 5vh;
    width: 100%;
    height: 37vh;
    max-height: 400px;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    @media screen and (max-width: 767px) {
        height: 200px;
    }
}
.p-recruit-modal__interview{
    flex: 1;
    padding: 8vh 5.2vw;
    background: #fff;
    border-radius: 10px;
    @media screen and (max-width: 767px) {
    padding: 3vh 20px;

    }
}

.p-recruit-modal__interview-question{
    font-size: clamp(2.0rem,1.35vw,2.6rem);
    font-weight: bold;
}

.p-recruit-modal__interview-heading{
    margin-top: 2vh;
    font-size: clamp(1.6rem,1.1vw,2.2rem);
        @media screen and (max-width: 767px) {
     margin-top: 1vh;

    }

}

.p-recruit-modal__interview-answer{
    margin-top: 1vh;
}

.p-recruit-modal__schedule {
    
    width: 100%;
    box-sizing: border-box;
    background: #FBF5E6;
    padding: 3vh 24px;
    margin-top: 3vh;
    border-radius: 10px;

    @media screen and (max-width: 767px) {
        padding: 24px 16px;
        margin-top: 1vh;
    }
}

.p-recruit-modal__schedule-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.p-recruit-modal__schedule-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-bottom: 5vh; 

    @media screen and (max-width: 767px) {
        padding-bottom: 32px;
    }
}

.p-recruit-modal__schedule-item:last-child {
    padding-bottom: 0;
}

.p-recruit-modal__schedule-item::before {
    content: "";
    position: absolute;
    top: 1.2vh; 
    left: 5.4vw; 
    width: 1px;
    height: 100%;
    border-left: 1px dashed #666666;
    z-index: 1;

    @media screen and (max-width: 1024px) {
        left: 54px; 
    }
}

.p-recruit-modal__schedule-item:last-child::before {
    display: none;
}

.p-recruit-modal__schedule-time {
    width: 4.5vw; 
    font-size: 1.4rem;
    color: #333333;
    font-family: serif; 
    line-height: 1;
    text-align: left;
    flex-shrink: 0;
    padding-top: 0.2vh;

    @media screen and (max-width: 1024px) {
        width: 48px;
        font-size: 1.3rem;
    }
}

.p-recruit-modal__schedule-content {
    position: relative;
    padding-left: 3.5vw; 
    flex-grow: 1;

    @media screen and (max-width: 1024px) {
        padding-left: 24px;
    }
}

.p-recruit-modal__schedule-content::before {
    content: "";
    position: absolute;
    top: 0.6vh; 
    left: 0.6vw; 
    width: 0.6vw;
    aspect-ratio: 1/1;
    background-color: var(--color-accent); 
    border-radius: 50%;
    z-index: 2;

    @media screen and (max-width: 1024px) {
        top: 5px;
        left: 2px;
        width: 6px;
    }
}

.p-recruit-modal__schedule-title {
    font-size: 1.6rem;
    color: #333333;
    margin: 0;
    line-height: 1.4;
    font-weight: 900;

    @media screen and (max-width: 767px) {
        font-size: 1.4rem;
    }
}

.p-recruit-modal__schedule-read{
        @media screen and (max-width: 767px) {
        font-size: 1.2rem;
    }
}
.p-recruit-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    pointer-events: none;
    overflow: hidden;
    background-color: #ffffff;
    opacity: 1;
    visibility: visible;

    &.is-start {
        animation: recruitLoadingWrapOut 1.6s cubic-bezier(0.22, 1, 0.36, 1) 3.5s forwards;

        .p-recruit-loading__layer--second {
            animation: recruitSecondLayerIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
        }

        .p-recruit-loading__logo-v2-img,
        .p-recruit-loading__logo-v2-text {
            animation: recruitFadeInSoft 2.0s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
        }
    }
}

.p-recruit-loading__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.p-recruit-loading__layer--second {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(circle at center, rgba(248, 246, 241, 1) 0%, rgba(255, 255, 255, 1) 62%),
        #ffffff;
    opacity: 0;
}

.p-recruit-loading__logo-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 520px;
    padding: 0 20px;
    box-sizing: border-box;
}

.p-recruit-loading__logo-v2-img {
    width: 300px;
    height: auto;
    margin-bottom: 26px;

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    @media screen and (max-width: 767px) {
        width: 230px;
        margin-bottom: 18px;
    }
}

.p-recruit-loading__logo-v2-text {
    margin: 0;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0.26em;
    color: #2f2f2f;
    text-align: center;
    white-space: nowrap;

    @media screen and (max-width: 767px) {
        font-size: 1.8rem;
        letter-spacing: 0.14em;
    }
}

/* ロゴ・テキスト共通初期状態 */
.p-recruit-loading__logo-v2-img,
.p-recruit-loading__logo-v2-text {
    opacity: 0;
    transform: scale(0.985);
    filter: blur(8px);
}

body.is-loading {
    overflow: hidden !important;
}

/* 背景を表示 */
@keyframes recruitSecondLayerIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ロゴ・テキストを同時にじんわり表示 */
@keyframes recruitFadeInSoft {
    0% {
        opacity: 0;
        transform: scale(0.985);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* ローディング全体を背景ごと消す */
@keyframes recruitLoadingWrapOut {
    0% {
        opacity: 1;
        filter: blur(0);
        visibility: visible;
    }
    100% {
        opacity: 0;
        filter: blur(8px);
        visibility: hidden;
    }
}
/* 各カードの枠組み */
.p-recruit-numbers__item {
    position: relative;
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:flex-start;
    gap: 2vh;

    width: 100%;
    box-sizing: border-box;
    background: #F4E6C3;
    padding: 20px;
    border-radius: 15px;

@media screen and (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 10px;
    }

    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(1, 1fr) !important; 
        gap: 12px !important;
    }
}

.p-recruit-numbers__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 7.5vh;
    padding: 0 80px;
            @media screen and (max-width: 767px) {
            padding: 0;
    }
}

@media screen and (max-width: 767px) {
    .p-recruit-numbers__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .p-recruit-numbers--certification {
        grid-column: span 2;
    }
}
.p-recruit-numbers__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../img/noise.webp);
    background-repeat: repeat;
    background-size: 100px;
    opacity: 0.15; 
    pointer-events: none;
    z-index: 2;
}

.p-recruit-numbers__title {
    width: 100%;
    margin: 0;
    z-index: 3;
    text-align: center;
    font-size: clamp(1.4rem,1.45vw,2.8rem);
}

.p-recruit-numbers__img {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;


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

.p-recruit-numbers__number {
    width: 100%;
    margin: 0;
    z-index: 3;

}

.p-recruit-numbers__people-img{
    margin: 0 auto;
    width: 10vw;
    max-width: 200px;
    img{
        width: 100%;
    }
        @media screen and (max-width: 767px) {
            width: 100px;
    }
}
.p-recruit-numbers__over-time-img{
        width: 13vw;
    max-width: 200px;

    img{
        width: 100%;

    }
    @media screen and (max-width: 767px) {
       width: 100px;
    }
}
.p-recruit-numbers__holiday-img{
    width: 8vw;
    max-width: 200px;

    img{
        width: 100%;

    }
    @media screen and (max-width: 767px) {
        width: 100px;
    }
}
.p-recruit-numbers__return-img{
        width: 13vw;
    max-width: 200px;

    img{
        width: 100%;

    }
    @media screen and (max-width: 767px) {
        width: 100px;
    }
}
.p-recruit-numbers__short-time-img{
        width: 13vw;
    max-width: 200px;

    img{
        width: 100%;

    }
    @media screen and (max-width: 767px) {
        width: 100px;
    }
}
.p-recruit-numbers___certification-img
    {
    width: 100%;

}
.p-recruit-numbers__new-graduate-img,
.p-recruit-numbers__mid-career-img
{
    width: 80%;

}

.p-recruit-numbers__people-number{
    font-size: clamp(2.8rem,5vw,9rem);
    font-family: "DM Serif Text";
    text-align: center;
    line-height: 1;
    span{
        font-size: clamp(1.6rem,2vw,3.8rem);
        font-family: "Zen Old Mincho";
    }
}


.p-recruit-contribution__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 2vw;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 7.5vh;

    @media screen and (max-width: 767px) {
        grid-template-columns: 2fr;
        gap: 20px;
    }
}

.p-recruit-contribution__item {
    position: relative;
    gap: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: #fff;

    padding: 20px;
    border-radius: 15px;
    overflow: hidden;
}

.p-recruit-contribution__img{
    width: 100%;
    height: 30vh;
    border-radius: 8px;
    overflow: hidden;
        @media screen and (max-width: 767px) {
            height: 200px;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.p-recruit-contribution__heading02{
    font-size: clamp(1.6rem,0.8vw,1.8rem);
    font-weight: 700;
    text-align: left;
    width: 100%;
    line-height: 1;
}

.p-recruit-contribution__text{
    margin-top: 1vh;
}




.js-fadein {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}