@charset "utf-8";
/* CSS Document */

/* レスポンシブに関する記述は、SPファーストとする。 */

/* Noto Sans JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* 採用情報ページ：インデックス */

/* 初期状態（非表示） */
.hidden-element {
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.hidden-element-x {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.hidden-element-y {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* 表示状態 */
.visible-element {
    opacity: 1;
}
.visible-element-x {
    opacity: 1;
    transform: translateX(0);
}
.visible-element-y {
    opacity: 1;
    transform: translateY(0);
}

/* main：フォント指定 */
main {
    font-family: 'Noto Sans JP', sans-serif;
}
/* section：マージンなし */
section {
    margin: 0;
}

/* 共通スタイル */

/* ページタイトル */
.page-title { /* SP size */
    position: absolute;
    top: 50%;
    left: 6%;
    font-size: 56px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: .5px .5px 10px #262A2C;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .page-title {
        top: 320px;
        left: 12%;
        font-size: 72px;
    }
}
@media (min-width: 960px) { /* PC size */
    .page-title {
        top: 340px; /* 332px */
        left: 16%; /* 20% */
        font-size: 100px;
    }
}
/* SP用：ページサブタイトル */
.page-subtitle-for-sp { /* SP size */
    position: absolute;
    top: 272px;
    left: 6%;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: .5px .5px 10px #262A2C;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .page-subtitle-for-sp {
        top: 412px;
        left: 12.5%;
        font-size: 24px;
    }
}
@media (min-width: 960px) { /* PC size */
    .page-subtitle-for-sp {
        top: 460px; /* 460px */
        left: 16.4%; /* 20% */
        font-size: 32px;
    }
}

/* セクションラベル群 */
.section-label-top { /* SP size */
    position: absolute;
    top: 380px;
    left: 6%;
    z-index: 10;
    display: flex; 
    flex-direction: column;
    gap: 4px;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .section-label-top {
        position: absolute;
        top: 474px;
        left: 12%;
        z-index: 10;
        display: flex; 
        flex-direction: column;
        gap: 8px;
    }
}
@media (min-width: 960px) { /* PC size */
    .section-label-top {
        position: absolute;
        top: 772px; /* 570px */
        left: 20%;
        z-index: 10;
        display: flex; 
        flex-direction: column;
        gap: 16px;
    }
}

/* セクションラベル群 */
.section-label-other { /* SP size */
    position: absolute;
    top: 380px;
    left: 6%;
    z-index: 10;
    display: flex; 
    flex-direction: column;
    gap: 4px;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .section-label-other {
        position: absolute;
        top: 474px;
        left: 12%;
        z-index: 10;
        display: flex; 
        flex-direction: column;
        gap: 8px;
    }
}
@media (min-width: 960px) { /* PC size */
    .section-label-other {
        position: absolute;
        top: 570px;
        left: 20%;
        z-index: 10;
        display: flex; 
        flex-direction: column;
        gap: 16px;
    }
}

.section-title { /* SP size */
    background-color: #262A2C;
    width: fit-content;
    padding: 8px 40px;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 400;
    box-shadow: 2px 2px 4px -2px gray;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .section-title {
        padding: 10px 52px;
        font-size: 16px;
        font-weight: 600;
        box-shadow: 2px 2px 4px -2px gray;
    }
}
@media (min-width: 960px) { /* PC size */
    .section-title {
        padding: 12px 72px;
        font-size: 20px;
        font-weight: 700;
        box-shadow: 2px 2px 4px -2px gray;
    }
}
.section-subtitle { /* SP size */
    background-color: #FFFFFF;
    width: fit-content;
    padding: 8px 12px;
    font-size: 14px;
    color: #262A2C;
    font-weight: 700;
    box-shadow: 2px 2px 4px -2px gray;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .section-subtitle {
        background-color: #FFFFFF;
        width: fit-content;
        padding: 10px 24px;
        font-size: 18px;
        color: #262A2C;
        font-weight: 700;
        box-shadow: 2px 2px 4px -2px gray;
    }
}
@media (min-width: 960px) { /* PC size */
    .section-subtitle {
        background-color: #FFFFFF;
        width: fit-content;
        padding: 12px 32px;
        font-size: 24px;
        color: #262A2C;
        font-weight: 700;
        box-shadow: 2px 2px 4px -2px gray;
    }
}
/* トップ */
.top {
    position: relative;
    width: 100vw;
    height: 400px;
    background-color: grey;
    color: #FFFFFF;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top {
        height: 500px;
    }
}
@media (min-width: 960px) { /* PC size */
    .top {
        height: 800px;
    }
}
/* トップ（ファーストビュー以外） */
.top-other {
    position: relative;
    width: 100vw;
    height: 400px;
    background-color: grey;
    color: #FFFFFF;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top-other {
        height: 500px;
    }
}
@media (min-width: 960px) { /* PC size */
    .top-other {
        height: 600px;
    }
}



.top-img-members { /* SP size */
    background-image: url(../images/recruit/members.jpg);  /* TODO: 画像変更予定 */
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top-img-members {
        background-image: url(../images/recruit/members.jpg);  /* TODO: 画像変更予定 */
    }
}
@media (min-width: 960px) { /* PC size */
    .top-img-members {
        background-image: url(../images/recruit/members.jpg);  /* TODO: 画像変更予定 */
    }
}
.top-img-ceo {
    background-image: url(../images/recruit/ceo.jpg);  /* TODO: 画像変更予定 */
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top-img-ceo {
        background-image: url(../images/recruit/ceo.jpg);  /* TODO: 画像変更予定 */
    }
}
@media (min-width: 960px) { /* PC size */
    .top-img-ceo {
        background-image: url(../images/recruit/ceo.jpg);  /* TODO: 画像変更予定 */
    }
}
.top-img-culture {
    background-image: url(../images/recruit/culture.jpg);  /* TODO: 画像変更予定 */
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top-img-culture {
        background-image: url(../images/recruit/culture.jpg);  /* TODO: 画像変更予定 */
    }
}
@media (min-width: 960px) { /* PC size */
    .top-img-culture {
        background-image: url(../images/recruit/culture.jpg);  /* TODO: 画像変更予定 */
    }
}
.top-img-person {
    background-image: url(../images/recruit/person.jpg);  /* TODO: 画像変更予定 */
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top-img-person {
        background-image: url(../images/recruit/person.jpg);  /* TODO: 画像変更予定 */
    }
}
@media (min-width: 960px) { /* PC size */
    .top-img-person {
        background-image: url(../images/recruit/person.jpg);  /* TODO: 画像変更予定 */
    }
}
.top-img-requirement {
    background-image: url(../images/recruit/requirement.jpg);  /* TODO: 画像変更予定 */
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top-img-requirement {
        background-image: url(../images/recruit/requirement.jpg);  /* TODO: 画像変更予定 */
    }
}
@media (min-width: 960px) { /* PC size */
    .top-img-requirement {
        background-image: url(../images/recruit/requirement.jpg);  /* TODO: 画像変更予定 */
    }
}
.top-img-flow {
    background-image: url(../images/recruit/flow.jpg);  /* TODO: 画像変更予定 */
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .top-img-flow {
        background-image: url(../images/recruit/flow.jpg);  /* TODO: 画像変更予定 */
    }
}
@media (min-width: 960px) { /* PC size */
    .top-img-flow {
        background-image: url(../images/recruit/flow.jpg);  /* TODO: 画像変更予定 */
    }
}

.main-road { /* SP size */
    padding: 0;
    background-color: #FFFFFF;
    width: 100%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .main-road {
        padding: 0 8%;
        background-color: #FFFFFF;
        width: 100%;
    }
}
@media (min-width: 960px) { /* PC size */
    .main-road {
        padding: 0 16%;
    }
}



/* 社員紹介で使用 */
.main-carpet-members { /* SP size */
    background-color: #FAFAFA;
    padding: 112px 4% 160px 4%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
    box-shadow: 2px 2px 12px -2px #f0f0f0;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .main-carpet-members {
        background-color: #FAFAFA;
        padding: 160px 4% 180px 4%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 60px;
        box-shadow: 2px 2px 12px -2px #f0f0f0;
    }
}
@media (min-width: 960px) { /* PC size */
    .main-carpet-members {
        background-color: #FAFAFA;
        padding: 220px 4% 200px 4%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 80px;
        box-shadow: 2px 2px 12px -2px #f0f0f0;
    }
}
/* 代表メッセージで使用 */
.main-carpet-ceo { /* SP size */
    background-color: #FAFAFA;
    padding: 112px 4% 160px 4%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 2px 2px 12px -2px #f0f0f0;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .main-carpet-ceo {
        padding: 160px 4% 180px 4%;
        gap: 40px;
    }
}
@media (min-width: 960px) { /* PC size */
    .main-carpet-ceo {
        background-color: #FAFAFA;
        padding: 220px 4% 200px 4%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 80px;
        box-shadow: 2px 2px 12px -2px #f0f0f0;
    }
}



/* カルチャー・パーソン・選考フローで使用 */
.main-carpet-simple {
    padding: 40px 4% 160px 4%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .main-carpet-simple {
        padding: 60px 4% 180px 4%;
        gap: 40px;
    }
}
@media (min-width: 960px) { /* PC size */
    .main-carpet-simple {
        padding: 80px 4% 200px 4%;
        gap: 54px;
    }
}

/* 募集要項で使用 */
.main-carpet-requirement { /* SP size */
	background-color: #FAFAFA;
	padding: 36px 4% 180px 4%;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .main-carpet-requirement {
        padding: 60px 4% 180px 4%;
        gap: 40px;
    }
}
@media (min-width: 960px) { /* PC size */
    .main-carpet-requirement {
        padding: 80px 4% 200px 4%;
        gap: 54px;
    }
}

/* 各セクション：ステートメントボックス */
.statement-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 3%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .statement-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0;
    }
}
@media (min-width: 960px) { /* PC size */
    .statement-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 0;
    }
}


/* 「だから、私は、ここにいる。」のみに適用 */
.statement-text-large-top { /* SP size */
    font-size: 36px;
    color: #262A2C;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .statement-text-large-top {
        font-size: 44px;
    }
}
@media (min-width: 960px) { /* PC size */
    .statement-text-large-top {
        font-size: 60px;
    }
}
/* 「だから、私は、～」以外に適用 */
.statement-text-large { /* SP size */
    font-size: 22px;
    color: #262A2C;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .statement-text-large {
        font-size: 44px;
    }
}
@media (min-width: 960px) { /* PC size */
    .statement-text-large {
        font-size: 60px;
    }
}


.statement-text-medium {
    font-size: 16px;
    color: #262A2C;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .statement-text-medium {
        font-size: 24px;
    }
}
@media (min-width: 960px) { /* PC size */
    .statement-text-medium {
        font-size: 32px;
    }
}


.statement-text-small { /* SP size */
    font-size: 12px;
    color: #262A2C;
    font-weight: 500;
    text-align: none;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .statement-text-small {
        font-size: 15.5px;
        font-weight: 600;
        text-align: center;
    }
}
@media (min-width: 960px) { /* PC size */
    .statement-text-small {
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }
}



/* 社員紹介セクション */
.members-container {
    display: flex;
    flex-direction: column;
}


.members-subcontainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .members-subcontainer {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 32px;
        padding-bottom: 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .members-subcontainer {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 32px;
        padding-bottom: 20px;
    }
}



.members-pic-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 98%;
    order: 1;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .members-pic-section {
        display: flex;
        flex-direction: column;
        gap: 64px;
        width: 98%;
        order: 1;
    }
}
@media (min-width: 960px) { /* PC size */
    .members-pic-section {
        display: flex;
        flex-direction: column;
        gap: 60px;
        width: 50%;
        order: unset;
    }
}



.members-img {
    position: relative;
}


.members-img-back {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0; 
    transition: all;
    width: 94%;
    filter: blur(4px);
}


.members-img-front {
    position: absolute;
    z-index: 20;
    top: 20px;
    left: 20px;
    width: 95%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .members-img-front {
        position: absolute;
        z-index: 20;
        top: 20px;
        left: 20px;
        width: 100%;
    }
}
@media (min-width: 960px) { /* PC size */
    .members-img-front {
        position: absolute;
        z-index: 20;
        top: 40px;
        left: 40px;
        width: 90%;
    }
}




.members-info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    padding-left: 3%;
}
.members-info.requirement { /* 募集要項メッセージではこのスタイルを追加 */
    padding: 0;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .members-info {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        padding-left: 3%;
    }
    .members-info.requirement { /* 募集要項メッセージではこのスタイルを追加 */
        padding: 0;
    }
}
@media (min-width: 960px) { /* PC size */
    .members-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 16px;
        padding: 0;
    }
}


.members-info-reverse {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: 3%;
    font-size: 12px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .members-info-reverse {
        font-size: 14px;
    }
}
@media (min-width: 960px) { /* PC size */
    .members-info-reverse {
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 2px;
        font-size: 16px;
        padding: 0;
    }
}



.members-text-section { /* SP size */
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 0 3%;
    order: 2;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .members-text-section {
        gap: 16px;
    }
}
@media (min-width: 960px) { /* PC size */
    .members-text-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 50%;
        height: 100%;
        padding: 10% 0 0 0;
        order: unset;
    }
}



.interview-title { /* SP size */
    width: 100%;
    font-size: 22px;
    color: #262A2C;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .interview-title {
        font-size: 24px;
    }
}
@media (min-width: 960px) { /* PC size */
    .interview-title {
        width: 100%;
        font-size: 32px;
        color: #262A2C;
        font-weight: 700;
    }
}

.interview-text { /* SP size */
    font-size: 14px;
    color: #262A2C;
    font-weight: 400;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .interview-text {
        font-size: 16px;
    }
}
@media (min-width: 960px) { /* PC size */
    .interview-text {
        font-size: 18px;
        color: #262A2C;
        font-weight: 400;
    }
}



/* 代表メッセージセクション */
.ceo-container {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    gap: 20px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .ceo-container {
        gap: 24px;
    }
}
@media (min-width: 960px) { /* PC size */
    .ceo-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 32px;
    }
}


.ceo-text-section { /* SP size */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    height: 100%;
    padding: 0 3%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .ceo-text-section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        height: 100%;
        padding: 0 3%;
    }
}
@media (min-width: 960px) { /* PC size */
    .ceo-text-section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        width: 50%;
        height: 100%;
        padding: 0;
    }
}


.ceo-img-section { /* SP size */
    width: 100%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .ceo-img-section {
        width: 100%;
    }
}
@media (min-width: 960px) { /* PC size */
    .ceo-img-section {
        width: 50%;
    }
}

.ceo-img {
    width: 100%;
}

.ceo-name { /* SP size */
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding : 0 12px;
    color: #262A2C;
    font-weight: 700;
    box-sizing: border-box;
    border-left: #262A2C solid 4px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .ceo-name {
        gap: 20px;
        padding : 0 16px;
    }
}
@media (min-width: 960px) { /* PC size */
    .ceo-name {
        gap: 20px;
        padding : 0 16px;
    }
}

.ceo-name-large { /* SP size */
    font-size: 24px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .ceo-name-large {
        font-size: 32px;
    }
}
@media (min-width: 960px) { /* PC size */
    .ceo-name-large {
        font-size: 32px;
    }
}

.ceo-name-small { /* SP size */
    font-size: 14px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .ceo-name-small {
        font-size: 14px;
    }
}
@media (min-width: 960px) { /* PC size */
    .ceo-name-small {
        font-size: 20px;
    }
}

/* カルチャーセクション */
.culture-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    font-size: 14px;
    color: #262A2C;
    padding: 0 3%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .culture-container {
        gap: 18px;
        font-size: 16px;
        padding: 0;
    }
}
@media (min-width: 960px) { /* PC size */
    .culture-container {
        gap: 20px;
        font-size: 18px;
    }
}

/* パーソンセクション */
.person-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .person-container {
        gap: 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .person-container {
        gap: 24px;
    }
}

.person-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 280px;
    height: fit-content;
    box-shadow: 2px 2px 4px -2px gray;
    box-sizing: border-box;
    border: #F8F8F8 .5px solid;
    padding: 28px 18px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .person-box {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        width: 260px;
        height: 240px;
        box-shadow: 2px 2px 4px -2px gray;
        box-sizing: border-box;
        border: #F8F8F8 .5px solid;
        padding: 28px 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .person-box {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        width: 280px;
        height: 280px;
        box-shadow: 2px 2px 4px -2px gray;
        box-sizing: border-box;
        border: #F8F8F8 .5px solid;
        padding: 36px 20px;
    }
}


.person-box-title {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(to right, #B8292E, #FF0009, #9C0005);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .person-box-title {
        font-size: 22px;
        font-weight: 700;
        background: linear-gradient(to right, #B8292E, #FF0009, #9C0005);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}
@media (min-width: 960px) { /* PC size */
    .person-box-title {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(to right, #B8292E, #FF0009, #9C0005);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}


.person-box-subtitle {
    font-size: 12px;
    color:#262A2C;
    text-shadow: 0 0 2px rgba(110, 110, 110, 0.5);
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .person-box-subtitle {
        font-size: 14px;
    }
}
@media (min-width: 960px) { /* PC size */
    .person-box-subtitle {
        font-size: 16px;
    }
}


.person-box-description {
    font-size: 14px;
    color:#262A2C;
    font-weight: 600;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .person-box-description {
        font-size: 16px;
        font-weight: 700;
    }
}
@media (min-width: 960px) { /* PC size */
    .person-box-description {
        font-size: 18px;
    }
}

/* 募集要項セクション */
.requirement-intro {
	font-size: 14px;
	color: #262A2C;
	font-weight: 600;
    padding: 0 3%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-intro {
        font-size: 16px;
        font-weight: 700;
        padding: 0 1%;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-intro {
        font-size: 18px;
        padding: 0;
    }
}


.requirement-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
    padding: 0 2%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-tabs {
        gap: 14px;
        padding: 0 1%;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-tabs {
        gap: 24px;
        padding: 0;
    }
}


.requirement-tab {
    position: relative; /* 疑似要素を配置するために相対位置を指定 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    padding: 8px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: #B8292E 2px solid;
    font-size: 16px;
    color: #B8292E;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden; /* 背景色のアニメーションがはみ出さないようにする */
    z-index: 1;
    transition: color 0.4s ease-in-out;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-tab {
        width: 260px;
        padding: 10px;
        font-size: 18px;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-tab {
        width: 280px;
        padding: 12px;
        font-size: 20px;
    }
}




.requirement-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* 初期状態では左に隠れている */
    width: 100%;
    height: 100%;
    background-color: #B8292E;
    transition: left 0.3s ease-in-out; /* 左から右へのスライドイン */
    z-index: -1; /* テキストの下に表示 */
}
.requirement-tab.active {
    background-color: #B8292E;
    color: #FFFFFF;
}
.requirement-tab:hover {
    color: #FFFFFF;
}
.requirement-tab:hover::before {
    left: 0; /* マウスオーバー時に左から右にスライド */
}

.requirement-content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.requirement-content-section {
    display: none; /* デフォルトで非表示にしておく */
	width: 100%;
}
.requirement-content-section.active {
    display: block; /* アクティブな職種詳細だけを表示させる */
	width: 100%;
}

.requirement-table-box {
	padding: 12px;
	background-color: #FFFFFF;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-table-box {
        padding: 16px;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-table-box {
        padding: 20px;
    }
}



.requirement-table {
	width: 100%;
	color: #262A2C;
	text-align: left;
}

.requirement-table-tr {
    display: flex;
    flex-direction: column;
	width: 100%;
	border-bottom: #7e7e7e 1px solid;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-table-tr {
    flex-direction: row;
	width: 100%;
	border-bottom: #7e7e7e 1px solid;
}
}
@media (min-width: 960px) { /* PC size */
    .requirement-table-tr {
        flex-direction: row;
        width: 100%;
        border-bottom: #7e7e7e 1px solid;
    }
}

.requirement-table-tr.last { /* lastには表示しない */
	border-bottom: none;
}

/* 募集要項の各項目名記述要素 */
.requirement-table-th {
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	padding: 16px 12px 0 12px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-table-th {
        width: 24%;
        font-size: 16px;
        font-weight: 700;
        padding: 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-table-th {
        width: 24%;
        font-size: 18px;
        font-weight: 700;
        padding: 28px;
    }
}
/* 募集要項の各項目内容記述要素 */
.requirement-table-td {
	width: 100%;
	font-size: 12px;
	padding: 12px 12px 18px 12px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-table-td {
        width: 76%;
        font-size: 14px;
        padding: 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-table-td {
        width: 76%;
        font-size: 16px;
        padding: 28px;
    }
}



.requirement-message-section { /* SP size */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	padding: 20px;
	margin-top: 12px;
	gap: 40px;
	background-color: #FFFFFF;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-message-section {
        width: 100%;
        padding: 20px;
        margin-top: 20px;
        gap: 40px;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-message-section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 20px;
        margin-top: 28px;
        gap: 40px;
        background-color: #FFFFFF;
    }
}



.requirement-message-img { /* SP size */
	display: none;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-message-img {
        display: none;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-message-img {
        width: 44%;
        display: block;
    }
}


.requirement-img-size { /* SP size */
	display: none;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-img-size {
        display: none;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-img-size {
        width: 100%;
        display: block;
    }
}


.requirement-message-img-sp { /* SP size */
	width: 100%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-message-img-sp {
        width: 100%;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-message-img-sp {
        display: none;
    }
}



.requirement-img-size-sp { /* SP size */
	width: 100%;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-img-size-sp {
        width: 100%;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-img-size-sp {
        display: none;
    }
}




.requirement-message-text {
	width: 100%;
	color: #262A2C;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-message-text {
        gap: 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-message-text {
        width: 56%;
        gap: 36px;
    }
}




.requirement-message-label {
	background-color: #FFFFFF;
	border: #262A2C solid 1px;
	width: fit-content;
	padding: 8px 14px;
	font-size: 14px;
	color: #262A2C;
	font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-message-label {
        padding: 10px 24px;
        font-size: 16px;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-message-label {
        background-color: #FFFFFF;
        border: #262A2C solid 1px;
        width: fit-content;
        padding: 12px 32px;
        font-size: 18px;
        color: #262A2C;
        font-weight: 700;
    }
}


.requirement-message-description {
	font-size: 14px;
	font-weight: 500;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .requirement-message-description {
        font-size: 16px;
        font-weight: 500;
    }
}
@media (min-width: 960px) { /* PC size */
    .requirement-message-description {
        font-size: 16px;
        font-weight: 500;
    }
}

/* 選考フローセクション */
.flow-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .flow-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 36px;
    }
}
@media (min-width: 960px) { /* PC size */
    .flow-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 36px;
    }
}


.flow-menu-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 28px 20px;
    width: 100%;
    gap: 16px;
    background-color: #F2F2F2;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .flow-menu-box {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 14px 20px 14px 32px;
        gap: 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .flow-menu-box {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px 40px 16px 60px;
    }
}



.flow-menu-box:not(.last)::after { /* lastには逆三角表示しない */
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ分下にズラす */
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 40px solid #F2F2F2;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .flow-menu-box:not(.last)::after { /* lastには逆三角表示しない */
        content: "";
        position: absolute;
        bottom: -40px; /* 三角形の高さ分下にズラす */
        left: 36px; /* ボックスの左端からの位置 */
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-top: 60px solid #F2F2F2;
    }
}
@media (min-width: 960px) { /* PC size */
    .flow-menu-box:not(.last)::after { /* lastには逆三角表示しない */
        content: "";
        position: absolute;
        bottom: -40px; /* 三角形の高さ分下にズラす */
        left: 36px; /* ボックスの左端からの位置 */
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-top: 60px solid #F2F2F2;
    }
}



.flow-menu-box-left { /* SP size */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
    font-size: 14px;
    color: #262A2C;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .flow-menu-box-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 30%;
        gap: 20px;
        font-size: 16px;
    }
}
@media (min-width: 960px) { /* PC size */
    .flow-menu-box-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 30%;
        gap: 40px;
    }
}


.flow-menu-box-number {
    font-size: 40px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .flow-menu-box-number {
        font-size: 40px;
    }
}
@media (min-width: 960px) { /* PC size */
    .flow-menu-box-number {
        font-size: 60px;
    }
}

.flow-menu-box-title {
    font-size: 20px;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .flow-menu-box-title {
        font-size: 20px;
    }
}
@media (min-width: 960px) { /* PC size */
    .flow-menu-box-title {
        font-size: 24px;
    }
}

.flow-menu-box-right {
    width: 100%;
    font-size: 12px;
    color: #262A2C;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .flow-menu-box-right {
        width: 70%;
        font-size: 14px;
    }
}
@media (min-width: 960px) { /* PC size */
    .flow-menu-box-right {
        width: 70%;
        font-size: 16px;
    }
}

/* エントリーセクション */
.entry-section {
    width: 100%;
    height: 480px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background: linear-gradient(to right, #B8292E, #e00007, #9C0005);
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entry-section {
        width: 100%;
        height: 540px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        background: linear-gradient(to right, #B8292E, #e00007, #9C0005);
    }
}
@media (min-width: 960px) { /* PC size */
    .entry-section {
        width: 100%;
        height: 540px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        background: linear-gradient(to right, #B8292E, #e00007, #9C0005);
    }
}


.entry-title {
    font-size: 32px;
    color: #FFFFFF;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entry-title {
        font-size: 44px;
        color: #FFFFFF;
        font-weight: 700;
    }
}
@media (min-width: 960px) { /* PC size */
    .entry-title {
        font-size: 44px;
        color: #FFFFFF;
        font-weight: 700;
    }
}



.entry-subtitle {
    font-size: 14px;
    color: #262A2C;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entry-subtitle {
        font-size: 16px;
        color: #262A2C;
        font-weight: 700;
    }
}
@media (min-width: 960px) { /* PC size */
    .entry-subtitle {
        font-size: 16px;
        color: #262A2C;
        font-weight: 700;
    }
}


.entry-description {
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 700;
    text-align: center;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entry-description {
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 700;
        text-align: center;
    }
}
@media (min-width: 960px) { /* PC size */
    .entry-description {
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 700;
        text-align: center;
    }
}



.entry-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    padding: 12px;
    margin: 12px;
    box-shadow: 2px 2px 4px -2px gray;
    text-decoration: none; /* デフォルトの下線を消す */
    background: linear-gradient(to right, #17191a, #262A2C, #101213);
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.4s ease-in-out;
    position: relative;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entry-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 480px;
        padding: 16px;
        margin: 12px;
        box-shadow: 2px 2px 4px -2px gray;
        text-decoration: none; /* デフォルトの下線を消す */
        background: linear-gradient(to right, #17191a, #262A2C, #101213);
        border: none;
        cursor: pointer;
        overflow: hidden;
        transition: color 0.4s ease-in-out;
        position: relative;
    }
}
@media (min-width: 960px) { /* PC size */
    .entry-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 480px;
        padding: 16px;
        margin: 12px;
        box-shadow: 2px 2px 4px -2px gray;
        text-decoration: none; /* デフォルトの下線を消す */
        background: linear-gradient(to right, #17191a, #262A2C, #101213);
        border: none;
        cursor: pointer;
        overflow: hidden;
        transition: color 0.4s ease-in-out;
        position: relative;
    }
}



.entry-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    z-index: 0;
}
.entry-button:hover::before {
    transform: translateX(100%);
}
.entry-button:hover {
    color: #ffffff;
}



.entry-button-text {
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 700;
    z-index: 10;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entry-button-text {
        font-size: 28px;
        color: #FFFFFF;
        font-weight: 700;
        z-index: 10;
    }
}
@media (min-width: 960px) { /* PC size */
    .entry-button-text {
        font-size: 32px;
        color: #FFFFFF;
        font-weight: 700;
        z-index: 10;
    }
}

.entry-arrow {
    position: absolute;
    content: '';
    width: 28px;
    height: 4px;
    box-sizing: border-box;
    border-bottom: solid 1px #F2F2F2;
    border-right: solid 2px #F2F2F2;
    transform: skew(45deg);
    right: 16px;
    z-index: 10;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entry-arrow {
        position: absolute;
        content: '';
        width: 36px;
        height: 4px;
        box-sizing: border-box;
        border-bottom: solid 1px #F2F2F2;
        border-right: solid 2px #F2F2F2;
        transform: skew(45deg);
        right: 20px;
        z-index: 10;
    }
}
@media (min-width: 960px) { /* PC size */
    .entry-arrow {
        position: absolute;
        content: '';
        width: 36px;
        height: 4px;
        box-sizing: border-box;
        border-bottom: solid 1px #F2F2F2;
        border-right: solid 2px #F2F2F2;
        transform: skew(45deg);
        right: 20px;
        z-index: 10;
    }
}


.shadow-text {
    position: relative;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-color: #FFFFFF;
}
.shadow-text::before {
    content: "ENTRY";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #262A2C;
    filter: blur(10px);
    opacity: 0.3;
}

/*  */
/*  */
/*  */
/* 採用情報ページ：エントリーページ */
.entrypage { /* SP size */
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px 40px;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage {
        gap: 30px;
        padding: 50px 50px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage {
        gap: 40px;
        padding: 60px 60px;
    }
}

.entrypage-heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-heading {
        gap: 24px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-heading {
        gap: 28px;
    }
}

.entrypage-subheading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-subheading {
        gap: 10px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-subheading {
        gap: 12px;
    }
}

.entrypage-subheading-large {
    font-size: 14px;
    color: #262A2C;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-subheading-large {
        font-size: 18px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-subheading-large {
        font-size: 20px;
    }
}

.entrypage-subheading-small {
    font-size: 12px;
    color: #262A2C;
}
@media (min-width: 768px) and (max-width: 959px)  { /* TB size */
    .entrypage-subheading-small {
        font-size: 14px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-subheading-small {
        font-size: 16px;
    }
}


.entrypage-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    padding: 0;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-form {
        padding: 0 8%;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-form {
        padding: 0 16%;
    }
}




.entrypage-table {
	width: 100%;
	color: #262A2C;
	text-align: left;
}
.entrypage-table-box {
    width: 100%;
	background-color: #FFFFFF;
}
/* フォーム行箇所：項目タイトルと入力フォームの要素 */
.entrypage-row { /* SP size */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	width: 100%;
	border-bottom: #7e7e7e 1px solid;
    padding: 20px 0;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-row {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        gap: 36px;
        width: 100%;
        border-bottom: #7e7e7e 1px solid;
        padding: 0;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-row {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        gap: 60px;
        width: 100%;
        border-bottom: #7e7e7e 1px solid;
        padding: 20px 0;
    }
}
.entrypage-row.last { /* lastには表示しない */
	border-bottom: none;
}
/* フォーム左側：項目タイトル側の空間 */
.entrypage-row-left { /* SP size */
	font-size: 14px;
	font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding-bottom: 4px;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-row-left {
        width: 30%;
        font-size: 14px;
        font-weight: 700;
        padding: 28px 0 28px 28px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-row-left {
        width: 30%;
        font-size: 16px;
        font-weight: 700;
        padding: 28px 0 28px 28px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
    }
}
/* フォーム右側：入力フォーム側の空間 */
.entrypage-row-right { /* SP size */
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: 12px;
	font-size: 14px;
	padding: 8px 0;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-row-right {
        width: 70%;
        gap: 8px;
        padding: 28px 28px 28px 0;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-row-right {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 70%;
        gap: 12px;
        font-size: 16px;
        padding: 28px 28px 28px 0;
    }
}
/* セレクトボックスの基本スタイル */
.entrypage-select { /* SP size */
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: #262A2C 1px solid;
    background-color: #FFFFFF; /* セレクトボックスの背景色を黒に */
    color: #262A2C; /* 文字色を白に */
    -webkit-appearance: none; /* デフォルトのスタイルを無効化 */
    -moz-appearance: none;
    appearance: none;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-select {
        width: 70%;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-select {
        width: 50%;
    }
}
/* ドロップダウンのリスト項目のスタイル */
.entrypage-select option { 
    background-color: #262A2C; /* オプションの背景色を黒に */
    color: #FFFFFF; /* オプションの文字色を白に */
}
/* チェックボックス */
.entrypage-checkboxes { /* SP size */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-checkboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-checkboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
}
.entrypage-checkbox {
    /* display: block; */
    font-size: 16px;    font-size: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.entrypage-checkbox input[type="checkbox"] {  /* SP size */
    transform: scale(1.2);  /* チェックボックス全体を拡大 */
    -webkit-transform: scale(1.2);  /* Safari対応 */
    -moz-transform: scale(1.2);     /* Firefox対応 */
    -ms-transform: scale(1.2);      /* IE対応 */
    -o-transform: scale(1.2);       /* Opera対応 */
    margin-right: 4px;
    width: 12px;
    height: 12px;
    -webkit-appearance: none; /* Safari対応 */
    -moz-appearance: none;    /* Firefox対応 */
    appearance: none;
    background-color: white;  /* 背景色を白に */
    border: 1px solid #262A2C;   /* 黒い枠線 */
    position: relative;
    border-radius: 0; /* これで角を四角に保つ */
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-checkbox input[type="checkbox"] {
        margin-right: 8px;
        width: 14px;
        height: 14px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-checkbox input[type="checkbox"] {
        transform: scale(1.2);  /* チェックボックス全体を拡大 */
        -webkit-transform: scale(1.2);  /* Safari対応 */
        -moz-transform: scale(1.2);     /* Firefox対応 */
        -ms-transform: scale(1.2);      /* IE対応 */
        -o-transform: scale(1.2);       /* Opera対応 */
        margin-right: 8px;
        width: 14px;
        height: 14px;
        -webkit-appearance: none; /* Safari対応 */
        -moz-appearance: none;    /* Firefox対応 */
        appearance: none;
        background-color: white;  /* 背景色を白に */
        border: 1px solid #262A2C;   /* 黒い枠線 */
        position: relative;
    }
}


.entrypage-checkbox input[type="checkbox"]:checked {
    background-color: #262A2C; /* チェック後の背景色を黒に */
    border: 1px solid #262A2C;
}
.entrypage-checkbox input[type="checkbox"]:checked::after {
    content: '✔';           /* チェックマーク */
    color: white;           /* チェックマークの色 */
    font-size: 14px;        /* チェックマークのサイズ */
    position: absolute;
    top: -4px;
    left: 1px;
}


/* 入力フォーム：テキスト */
.entrypage-input-text {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: #262A2C 1px solid;
}
/* 入力フォーム：長文（テキストエリア） */
.entrypage-textarea {
    width: 100%;
    height: 300px;
    padding: 12px;
    border: #262A2C 1px solid;
    resize: vertical;
    min-height: 200px;
    max-height: 1000px;
    box-sizing: border-box;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-textarea {
        width: 100%;
        height: 200px;
        padding: 12px;
        border: #262A2C 1px solid;
        resize: vertical;
        min-height: 200px;
        max-height: 1000px;
        box-sizing: border-box;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-textarea {
        width: 100%;
        height: 200px;
        padding: 12px;
        border: #262A2C 1px solid;
        resize: vertical;
        min-height: 200px;
        max-height: 1000px;
        box-sizing: border-box;
    }
}
/* 添付ファイルフォーム */
.entrypage-input-file {
    font-size: 12px;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-input-file {
        font-size: 16px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-input-file {
        font-size: 16px;
    }
}
/* 必須の印 */
.required-red { /* SP size */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 6px;
    background-color: #B8292E;
    width: fit-content;
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    white-space: pre;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .required-red {
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 400;
        white-space: pre;
    }
}
@media (min-width: 960px) { /* PC size */
    .required-red {
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 500;
        white-space: pre;
    }
}
/* 入力不備のアラート箇所 */
.entrypage-input-alert { /* SP size */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-input-alert {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-input-alert {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }
}
/* 入力不備のアラート「！」マーク */
.entrypage-input-alert-icon { /* SP size */
    background-color: #B8292E;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-input-alert-icon {
        background-color: #B8292E;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-input-alert-icon {
        background-color: #B8292E;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
    }
}
/* 入力不備のアラート「選択してください」など警告テキスト */
.entrypage-input-alert-text { /* SP size */
    font-size: 12px;
    color: #B8292E;
    font-weight: 500;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-input-alert-text {
        font-size: 14px;
        color: #B8292E;
        font-weight: 500;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-input-alert-text {
        font-size: 14px;
        color: #B8292E;
        font-weight: 500;
    }
}
/* 同意フォーム・送信ボタン */
.entrypage-agreement {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.entrypage-agreement-up { /* SP size */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #262A2C;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-agreement-up {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 400;
        color: #262A2C;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-agreement-up {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 400;
        color: #262A2C;
    }
}
.entrypage-privacy {
    border-bottom: #262A2C 1px solid;
    color: #262A2C;
    font-weight: 500;
}
.complete-button-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 60px;
}
.complete-button { /* SP size */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    padding: 12px;
    box-shadow: 2px 2px 4px -2px gray;
    text-decoration: none; /* デフォルトの下線を消す */
    background: linear-gradient(to right, #17191a, #262A2C, #101213);
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.4s ease-in-out;
    position: relative;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .complete-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 360px;
        padding: 14px;
        box-shadow: 2px 2px 4px -2px gray;
        text-decoration: none; /* デフォルトの下線を消す */
        background: linear-gradient(to right, #17191a, #262A2C, #101213);
        border: none;
        cursor: pointer;
        overflow: hidden;
        transition: color 0.4s ease-in-out;
        position: relative;
    }
}
@media (min-width: 960px) { /* PC size */
    .complete-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        padding: 16px;
        box-shadow: 2px 2px 4px -2px gray;
        text-decoration: none; /* デフォルトの下線を消す */
        background: linear-gradient(to right, #17191a, #262A2C, #101213);
        border: none;
        cursor: pointer;
        overflow: hidden;
        transition: color 0.4s ease-in-out;
        position: relative;
    }
}
.complete-button-text { /* SP size */
    font-size: 18px;
    color: #FFFFFF;
    font-weight: 700;
    z-index: 10;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .complete-button-text {
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 700;
        z-index: 10;
    }
}
@media (min-width: 960px) { /* PC size */
    .complete-button-text {
        font-size: 24px;
        color: #FFFFFF;
        font-weight: 700;
        z-index: 10;
    }
}
.complete-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
    z-index: 0;
}
.complete-button:hover::before {
    transform: translateX(100%);
}
.complete-button:hover {
    color: #ffffff;
}


/* Contact Form 7のスタイリング編集 */

/* フィールドごとのエラーメッセージ */
.wpcf7-not-valid-tip {
    color: #B8292E;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
}
/* フォーム全体のエラーメッセージ */
.wpcf7-response-output {
    color: #B8292E; /* テキストカラーを赤に */
    font-weight: bold; /* 太字に */
    background-color: #FFFFFF; /* 背景色を薄い赤に */
    padding: 10px; /* パディングを追加 */
    border: 1px solid #B8292E; /* 枠線を追加 */
    border-radius: 4px; /* 角を少し丸める */
}
/* フィールドごとのエラーメッセージにアイコンを追加 */
.wpcf7-not-valid-tip:before {
    content: "⚠️"; /* アイコンを追加 */
    margin-right: 5px; /* アイコンとテキストの間に余白 */
}
/* フォーム全体のエラーメッセージにアイコンを追加 */
.wpcf7-response-output:before {
    content: "❌"; /* アイコンを追加 */
    margin-right: 10px; /* アイコンとテキストの間に余白 */
}

.wpcf7-select {
    /* width: 100%; */
    width: fit-content;
}
.wpcf7-list-item {
    display: inline-block;
    margin: 0;
}

.entrypage-row-left p {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}
.entrypage-row-left br {
    display: none;
}
.entrypage-row-right p {
    width: 100%;
    margin-left: 0;
}
.entrypage-row-right span {
    margin-left: 0;
}
.entrypage-row-right label {
    margin-right: 20px;
}
.entrypage-row-right input { /* SP size */
    width: 100%;
}
@media (min-width: 768px) and (max-width: 959px) { /* TB size */
    .entrypage-row-right input {
        width: 70%;
    }
}
@media (min-width: 960px) { /* PC size */
    .entrypage-row-right input {
        width: 70%;
    }
}

.entrypage-row-right textarea {
    width: 100%;
    height: 200px;
    padding: 12px;
    border: #262A2C 1px solid;
    resize: vertical;
    min-height: 200px;
    max-height: 1000px;
    box-sizing: border-box;
}

/* 同意フォーム・送信ボタン */
.entrypage-agreement {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.entrypage-agreement-up label {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #262A2C;
}