@charset "UTF-8";

/**************************************************************
	トップページ固有・共通
***************************************************************/
:root {
    --color-primary01: #004098;
    --color-primary02: #E60012;
    --color-secondary: #B43131;
    --font-base: "Noto Sans JP", sans-serif;
    --font-serif: "Shippori Mincho", serif;
    --font-en : "Marcellus", serif;
}

/* アイコンフォント */
@font-face {
    font-family: recop-iconfonts;
    src: url("option/font/recop-iconfont.eot?") format("eot"), url("option/font/recop-iconfont.woff") format("woff"), url("option/font/recop-iconfont.ttf") format("truetype");
}

/* Googleフォント */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho&display=swap');

/* 共通の横幅 */
* {
    box-sizing: border-box;
}

.cnt {
    padding: 0 10px;
    max-width: 1020px;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 767px) {
    .cnt {
        padding: 0 15px;
    }
}

body {
    font-size: 14px;
    background-color: #F5F5F5;
    font-family: var(--font-base) !important;
    color: #353333;
}

a {
    color: inherit !important;
    transition: all 0.3s;
}

a:hover {
    text-decoration: none;
}

@media (any-hover: hover){
    button:hover {
        opacity: .7;
    }
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

p {
    text-align: left;
}

button {
    border: none;
    background-color: transparent;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

/* iPhoneフリーワード検索角丸対策 */
input {
    -webkit-appearance: none;
    border-radius: 0;
}

/* 初期設定リセット */
div#container, 
#header .content, 
#main .content {
    width: 100%;
}

#headContent {
    margin-bottom: 0;
    background-color: #F5F5F5;
}

/* ユニバーサルデザイン */
.accordionBtn::after {
    content:"クリック・タップで開きます";
    position: absolute;
    width: 1px;
    height: 1px;
    left: 0;
    top: 0;
    clip: rect(1px, 1px, 1px, 1px);
}

.accordionBtn.active::after {
    content:"クリック・タップで閉じます";
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* 共通項目 */
/* エントリーボタン */
.btn-entry {
    display: block;
    padding: 0 40px;
    background-color: var(--color-secondary);
    color: #fff !important;
    font-family: var(--font-serif);
    border: 1px solid #FFF;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1);
    position: relative;
}

.btn-entry::after {
    content: "";
    display: block;
    position: absolute;
    background: url("/jobfind-pc/original/images/arrow-white.png") no-repeat center / contain;top: 0;
    bottom: 0;
    margin: auto 0;
    transition: all 0.3s;
}

/* ホバーアクション */
.btn-entry:hover {
    background-color: #FFF;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary) !important;
}

.btn-entry:hover::after {
    background: url("/jobfind-pc/original/images/arrow-red.png") no-repeat center / contain;
}

/* 共通見出し */
/* h2 */
.h2-wrapper span.en {
    color: var(--color-primary01);
    font-family: var(--font-en);
    letter-spacing: 0.1em;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    text-align: center;
}

.h2-wrapper h2 {
    font-size: 30px;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
    font-weight: normal;
    text-align: center;
    padding-bottom: 20px;
    position: relative;
    margin-bottom: 60px;
}

.h2-wrapper h2:before, 
.h2-wrapper h2:after {
    content: "";
    display: block;
    position: absolute;
    width: 50%;
    height: 2px;
    bottom: 0;
    transform: translateY(100%);
}

.h2-wrapper h2:before {
    background-color: var(--color-primary01);
    left: 0;
}

.h2-wrapper h2:after {
    background-color: var(--color-primary02);
    right: 0;
}

@media screen and (max-width: 767px) {
    .h2-wrapper h2 {
        margin-bottom: 40px;
        font-size: 24px;
    }
}

/* h3 */
h3 {
    font-size: 24px;
    font-family: var(--font-serif);
    font-weight: normal;
    padding-bottom: 10px;
    position: relative;
    margin-bottom: 40px;
    text-align: left;
    letter-spacing: 0.1em;
}

h3:before, 
h3:after {
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 2px;
    bottom: 0;
    transform: translateY(100%);
}

h3:before {
    background-color: var(--color-primary01);
    left: 0;
}

h3:after {
    background-color: var(--color-primary02);
    left: 50px;
}

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

/* 改行span */
span.pc {
    display: block;
}

@media screen and (max-width: 767px) {
    span.sp {
        display: block;
    }

    span.pc {
        display: inline;
    }
}

/**************************************************************
	header
***************************************************************/
header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 58px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #FFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
    gap: 20px;
}

header #h_wrapper {
    display: inline-block;
    min-height: 0;
    width: auto;
    margin: 0;
    padding: 0;
}

@media (any-hover: hover){
    header #h_wrapper a:hover {
        opacity: 0.7;
    }
}

header .h_wrapper img {
    width: 100%;
}

h1.head-title {
    display: none;
}

.open-button, 
.js-reader-button, 
nav p.screen-reader-text {
    display: none;
}

.nav-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    pointer-events: none;
    font-family: var(--font-base);
    gap: 30px;
}

.nav-list li {
    position: relative;
    pointer-events: auto;
}

.nav-list li a {
    transition: all .3s;
    color: #353333 !important;
    font-size: 14px;
}

.nav-list li a span {
    position: relative;
}

/* ホバーアクション */
.nav-list li a span::before, 
.nav-list li a span::after {
    transition: opacity .3s;
    opacity: 0;
    display: block;
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: -5px;
    content: "";
}

.nav-list li a:hover span::before, 
.nav-list li a:hover span::after {
    opacity: 1;
}

.nav-list li a:hover span::before {
    background-color: var(--color-primary01);
    left: 0;
}

.nav-list li a:hover span::after {
    background-color: var(--color-primary02);
    right: 0;
}

.navigation .btn-entry {
    display: none;
}

@media screen and (max-width: 767px) {
    header #h_wrapper a {
        padding-top: 3px;
        align-items: flex-start;
    }
    header #h_wrapper a span {
        padding-left: 3px;
    }
}

/**************************************************************
	ハンバーガーボタン
***************************************************************/
@media screen and (max-width: 1220px) {
    header {
        width: 100%;
        height: 70px;
        padding: 0 15px;
    }

    .open-button {
        position: fixed;
        top: 0;
        right: 0;
        display: block;
        width: 70px;
        height: 70px;
        background-color: #F5F5F5;
        z-index: 1000;
        transition: all 0.3s;
    }

    .open-button span {
        width: 30px;
        height: 1px;
        display: block;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        transition: all 0.4s;
    }

    .open-button span:nth-last-child(1) {
        background-color: var(--color-primary01);
        top: 30px;
    }
    
    .open-button span:nth-last-child(2) {
        background-color: var(--color-primary02);
        top: 40px;  
    }

    .open-button span {
        width: 36px;
    }
    
    .open-button.active span:nth-child(1) {
        transform: rotate(-45deg);
        top: 35px;
    }

    .open-button.active span:nth-child(2) {
        transform: rotate(45deg);
        top: 35px;
    }

    /* ハンバーガーメニュー内 */
    /* ハンバーガーメニューコンテンツ */
    /* オーバレイ */
    .nav-area.is-open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 990;
        background: rgba(0, 0, 0, .5);
        max-width: none;
    }

    .navigation {
        background-color: #FFF;
        display: block;
        width: 100%;
        max-width: 500px;
        max-height: 100dvh;
        height: 100%;
        transform: translateX(110%);
        padding: 75px 30px;
        z-index: 999;
        position: fixed;
        top: 0;
        right: 0;
        transition: transform 0.4s;
        /* ハンバーガーメニュー内のスクロール制御 */
        overflow-y: auto;
        overscroll-behavior-y: contain; /* スクロールできるコンテンツであれば背面スクロールを無効にする */
        will-change: transform; /* Safariの描画の安定化 */
    }

    .navigation.is-open {
        transform: translateX(0);
    }

    .nav-list {
        position: relative;
        flex-direction: column;
        gap: 0;
        height: auto;
        padding: 0;
    }

    .nav-list li {
        width: 100%;
    }

    .nav-list li:not(:first-child)::before {
        content: none;
    }

    .nav-list li a {
        position: relative;
        width: 100%;
        padding: 15px 0 15px 10px;
        display: inline-block;
        text-align: left;
        font-size: 18px;
    }

    .nav-list li a {
        border-bottom: #B9B9B9 1px solid;
    }

    .nav-list li a::after {
        content: "";
        background: url("/jobfind-pc/original/images/arrow.png") no-repeat center / contain;
        display: block;
        position: absolute;
        width: 25px;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }  

    .navigation .btn-entry {
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 30px auto 0 auto;
        font-size: 20px;
        height: 60px;
        line-height: 58px;
    }
    
    .navigation .btn-entry::after {
        width: 50px;
        height: 6px;
        right: 30px;
    }
    
    /* ホバーアクション */
    .navigation .btn-entry:hover::after {
        right: 20px;
    }

    /* スクリーンリーダー用テキスト・ボタン */
    nav p.screen-reader-text, 
    .js-reader-button {
        display: block;
    }
}

/**************************************************************
	KV
***************************************************************/
/* kv外枠 */
#main {
    margin-top: 58px;
}

#main .content {
    max-width: 100%;
}

@media screen and (max-width: 1220px) {
    #main {
        margin-top: 70px;
    }
}

.kv-inner {
    position: relative;
    margin: 0 auto 50px auto;
}

@media screen and (max-width: 767px) {
    .kv {
        padding-bottom: 160px;
        background-color: #fff;
    }

    .kv-inner {
        position: relative;
        margin: 0;
    }
}

/* ------------Slick slider------------ */
/* Slickボタンの外枠 */
.slick-btn {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/*  一時停止ボタン */ 
.slick-pause {
    width: 18px;
    height: 18px;
    background: var(--color-primary01);
	border-radius: 50%; 
    display: block;
    z-index: 100;
    cursor: pointer;
	position: relative;
}

.slick-pause:hover {
    opacity: 0.7;  
}

.slick-pause::before, 
.slick-pause::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 7px;
	background-color: #fff;
	top: 6px;
}

.slick-pause::before {
	left: 6px;
}

.slick-pause::after {
	right: 6px;
}

.slick-pause.paused::before {
    width: 8px;
	height: 8px;
	top: 5px;
	clip-path: polygon(100% 50%, 0 0, 0 100%);
}

.slick-pause.paused::after {
	content: none;
}

.slick img {
    object-fit: cover;
    width: 100%;
    min-height: 400px;
    object-position: 70% 0%;
    max-height: min(calc(100dvh - 58px), 700px);
}

/* キャッチなど */
.top-title {
    position: absolute;
    z-index: 2;
    left: 30px;
    bottom: 20px;
    width: calc(100% - 360px);
}

.top-title > h1 {
    font-size: 15px;
    color: #FFF;
    font-weight: normal;
}

.top-title > h1 span {
    display: inline-block;
}

h2.kv-catch {
    position: absolute;
    z-index: 2;
    left: calc(25% - 250px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: normal;
}

h2.kv-catch span {
    font-size: 32px;
    letter-spacing: 0.1em;
    color: #fff !important;
    text-align: left;
    font-family: var(--font-serif);
    line-height: 2;
}

.kv .btn-entry {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    width: 300px;
    font-size: 18px;
    height: 60px;
    line-height: 58px;
    opacity: .9;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .5);
}

.kv .btn-entry::after {
    width: 50px;
    height: 6px;
    right: 30px;
}

/* ホバーアクション */
.kv .btn-entry:hover::after {
    right: 20px;
}

@media screen and (max-width: 1220px) {
    .slick img {
        max-height: min(calc(100dvh - 70px), 700px);
    }
}

@media screen and (max-width: 1120px) {
    h2.kv-catch {
        left: 30px;
    }
}

@media screen and (max-width: 767px) {
    .top-title {
        left: 15px;
        bottom: 15px;
        width: calc(100% - 30px);
    }

    .top-title > h1 {
        font-size: 10px;
    }

    h2.kv-catch {
        left: 30px;
        top: 55%;
    }

    h2.kv-catch span {
        font-size: 22px;
    }

    .kv .btn-entry {
        width: calc(100% - 60px);
        max-width: 500px;
        margin: 0 auto;
        right: 0;
        left: 0;
        bottom: -60px;
        transform: translateY(100%);
        opacity: 1;
        padding: 0 50px;
    }

    .kv .btn-entry::after {
        width: 50px;
        right: 40px;
    }

    .kv .btn-entry:hover::after {
        right: 25px;
    }
}

/**************************************************************
	求人検索
***************************************************************/
/* ------------勤務地検索------------ */
.map-area {
    position: relative;
    background-color: #F5F5F5;
    padding: 80px 0 130px 0;
}

.location-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin-top: 60px;
}

.location-list li {
    background-color: #FFF;
    height: 70px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
    position: relative;
}

.location-list li a, 
.location-list li button {
    background-color: #FFF;
    display: block;
    width: 100%;
    font-size: 16px;
    padding-left: 30px;
    text-align: left;
    line-height: 70px;
    position: relative;
    transition: all 0.3s;
}

.location-list li.active::after {
    content: "";
    display: block;
    position: absolute;
    background: #B9B9B9;
    height: 1px;
    width: calc(100% - 40px);
    left: 20px;
    top: 69px;
}

.location-list li a::after, 
.location-list li button:before {
    content: "";
    background: url(/jobfind-pc/original/images/arrow.png) no-repeat center / contain;
    display: block;
    position: absolute;
    width: 20px;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: rotate(-90deg);
    transition: all 0.3s;
}

.location-list li button:before {
    transform: rotate(0deg);
}

.location-list li button.active:before {
    transform: scale(1, -1);
}

.location-sublist {
    display: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px 0px;
    position: relative;
    z-index: 2;
    padding: 0 20px 20px;
    background-color: #FFF;
}

.location-list li:nth-child(1) .location-sublist, 
.location-list li:nth-child(2) .location-sublist, 
.location-list li:nth-child(3) .location-sublist{
    z-index: 3;
}

.location-list li .location-sublist a {
    padding-left: 10px;
}

.location-list li .location-sublist div {
    position: relative;
}

.location-list li .location-sublist div::before {
    content: "";
    display: block;
    position: absolute;
    background: #B9B9B9;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.location-list li .location-sublist .location-sublist-area::before {
    content: none;
}

.location-list li .location-sublist a::after {
    right: -5px;
}

.location-sublist-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
}

/* ホバーアクション */
@media (any-hover: hover){
    .location-list li a:hover, 
    .location-list li button:hover {
        opacity: .7;
    }
}

.location-list li a:hover::after {
    right: 15px;
}

.location-list li button:hover:before {
    top: 5px;
}

.location-list li button.active:hover:before {
    top: 0;
    bottom: 5px;
}

.location-list li .location-sublist a:hover::after {
    right: -5px;
}

@media screen and (max-width: 820px) {
    .location-list {
        gap: 10px;
        display: flex;
        flex-direction: column;
        margin-top: 30px;
    }

    .location-list li {
        height: auto; 
    }
    
    .location-sublist {
        z-index: 1;
        box-shadow: none;
    }
}

@media screen and (max-width: 767px) {
    .map-area {
        padding: 40px 0 100px 0;
    }
}

/* ------------ブランド紹介------------ */
.brand-section {
	margin-top: 80px;
	text-align: center;
}

.brand-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 35px;
}

.brand-list li {
	width: calc((100% - 70px) / 3);
	background: #fff;
	padding: 30px 24px 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.brand-list img {
	margin: 0 auto;
	height: 60px;
	object-fit: contain;
}

.brand-area {
    margin-top: auto;
}

@media screen and (max-width: 767px) {
    .brand-section {
        margin-top: 60px;
        text-align: center;
    }
    
    .brand-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .brand-list li {
        width: 100%;
    }
}

/**************************************************************
	About
***************************************************************/
#bottomContent .freeHead {
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    #bottomContent .freeHead {
        margin-bottom: 30px;
    }
}

.about {
    padding: 0 0 100px 0;
}

.about-title {
	position: relative;
	background: url("/jobfind-pc/original/images/about-bg.jpg") center center / cover no-repeat;
	height: 200px;
    padding: 50px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.about .h2-wrapper {
    width: 100%;
}

.about .h2-wrapper h2 {
    margin: 0;
    color: #FFF;
    line-height: 1.25;
}

.about .h2-wrapper span.en {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .about-title {
        padding: 40px 0;
    }
}

/* ------------企業理念------------ */
.philosophy {
	padding: 100px 10px 0 10px;
}

.about h3.label {
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 0;
    text-align: center;
}

.about h3.label::before {
	content: "";
	display: block;
	margin: 0 auto;
    left: 0;
    right: 0;
	width: 60px;
	height: 2px;
	background-color: var(--color-secondary);
}

.about h3.label::after {
    content: none;
}

.about .catch {
	font-size: 22px;
    text-align: center;
	margin: 20px 0 30px 0;
	font-family: var(--font-serif);
    letter-spacing: 0.1em;
}

.about .text {
	max-width: 800px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .philosophy {
        padding: 40px 15px 0 15px;
    }
    
    .about .catch {
        font-size: 20px;
        margin: 30px 0;
    }
}

/* ------------私たちの志------------ */
.mission {
	padding: 100px 10px 0 10px;
}

.mission-list {
    display: flex;
    gap: 25px;
    padding-right: 5px;
}

.mission-list li {
    width: calc((100% - 50px) / 3);
    padding: 40px 20px 40px 30px;
    position: relative;
    background: #ECF1F7;
    display: flex;
    flex-direction: column;
}

.mission-list li::before {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid #B9B9B9;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    pointer-events: none;
}

.mission-list li h4 {
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 20px;
    text-align: center;
}

.mission-list li h4 span {
    display: inline-block;
}

.mission-list li p {
    padding-top: 20px;
    position: relative;
}

.mission-list li p::before {
    content: "";
    position: absolute;
    display: block;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 60px;
    height: 2px;
    background-color: #B9B9B9;
}

@media screen and (max-width: 767px) {
    .mission {
        padding: 60px 15px 0 15px;
    }
    
    .mission-list {
        gap: 20px;
        flex-direction: column;
        padding-right: 5px;
    }
    
    .mission-list li {
        width: 100%;
    }

    .mission-list li h4 span {
        display: block;
    }
}

/* ------------行動指針------------ */
.credo {
    padding: 100px 10px 0 10px;
}

.credo-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding-top: 40px;
}

.credo-list li {
	width: 158px;
	height: 158px;
	border-radius: 50%;
	background-color: #EAEAEA;
	font-size: 20px;
    line-height: 1.3;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

@media screen and (max-width: 767px) {
    .credo {
        padding: 65px 15px 0 15px;
    }
    
    .credo-list {
        padding-top: 30px;
    }
}

/**************************************************************
	求める人物像
***************************************************************/
.ideal {
    position: relative;
    padding: 80px 0 140px 0;
    background: #F5F5F5;
}

.ideal-wrapper {
    position: relative;
    z-index: 2;
}

.ideal-list {
    display: flex;
	flex-direction: column;
    justify-content: center;
	gap: 50px;
    height: 400px;
}

.ideal-list li {
    width: 50%;
    display: flex;
    gap: 53px;
    align-items: center;
    max-width: 450px;
}

.num {
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
    font-size: 30px;
    color: var(--color-primary01);
    position: relative;
    text-align: center;
}

.num::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
    width: 1px;
    height: 55px;
    background-color: #B9B9B9;
    border-radius: 5px;
}

.ideal-list li h3 {
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    padding: 0;
    margin-bottom: 0px;
}

.ideal-list li h3::before, 
.ideal-list li h3::after {
    content: none;
}

.ideal-list li h3 span {
    display: inline-block;
}

.ideal-img {
    position: absolute;
    top: 0;
    right: 10px;
    width: 700px;
    max-width: 70%;
    height: 400px;
    z-index: -1;
}

.ideal-img::after {
    background: linear-gradient(to left, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0) 20%, #F5F5F5 100%);
    content: "";
    width: 400px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.ideal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ideal-text {
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .ideal {
        padding: 60px 0 100px 0;
    }

    .ideal-wrapper {
        padding: 0;
    }

    .ideal-list {
        height: auto;
        gap: 30px;
        padding: 0 25px;
    }
    
    .ideal-list li {
        width: 100%;
        gap: 30px;
    }

    .num::after {
        right: -15px;
    }
    
    .ideal-list li h3 {
        font-size: 18px;
    }

    .ideal-list li h3 span {
        display: block;
    }
    
    .ideal-img {
        width: 100%;
        height: auto;
        position: static;
        max-width: none;
        margin-top: 40px;
    }

    .ideal-img::after {
        content: none;
    }

    .ideal-text {
        width: 100%;
        padding: 0 15px;
    }
}

/**************************************************************
	フロントスタッフの業務紹介
***************************************************************/
.jobdesc {
    position: relative;
    padding: 80px 0px 140px 0px;
}

.jobdesc-catch {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 10px;
}

.jobdesc-list {
    display: flex;
    gap: 35px;
    padding-top: 60px;
}

.jobdesc-list li {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 30px;
}

.jobdesc-list-title {
    display: flex;
    gap: 20px;
    height: 50px;
    padding-left: 10px;
} 

.jobdesc-list .num::after {
    width: 50px;
    height: 2px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    top: auto;
}

.jobdesc-list h3 {
    margin: 0;
    padding: 0;
    line-height: 1;
    padding-top: 15px;
    font-size: 22px;
}

.jobdesc-list h3::before, 
.jobdesc-list h3::after {
    content: none;
}

@media screen and (max-width: 767px) {
    .jobdesc {
        padding: 60px 0 100px 0;
    }

    .jobdesc h2 {
        line-height: 1.3;
    }

    .jobdesc h2 span {
        display: block;
    }

    .jobdesc-catch {
        padding: 0 15px;
    }

    .jobdesc-list {
        flex-direction: column;
        gap: 30px;
        padding-top: 40px;
    }

    .jobdesc-list-title {
        gap: 20px;
    }

    .jobdesc-list h3 {
        font-size: 21px;
    }

    .jobdesc-list li img {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* ------------1日の流れ------------ */
.schedule {
    display: grid;
    gap: 35px;
    grid-template-columns: 1fr 1fr;
}

.schedule-day {
	background-color: #FDE5E6;
	padding: 30px 40px;
}

.schedule-label {
    display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
    position: relative;
    padding-bottom: 15px;
}

.schedule-label::after {
    content: "";
    position: absolute;
    display: block;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #B9B9B9;
}

.schedule-label img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.schedule-label h3 {
	font-weight: bold;
    color: var(--color-secondary);
	margin: 0;
    padding: 0;
    font-family: var(--font-serif);
    letter-spacing: 0.5em;
}

.schedule-label h3::before, 
.schedule-label h3::after {
    content: none;
}

.timeline {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 5px 10px;
	position: relative;
	padding-left: 25px;
	margin: 25px 0 0;
    padding-right: 5px;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 10px;
	bottom: 0;
	width: 2px;
    height: calc(100% - 22px);
	background-color: var(--color-secondary);
}

.timeline dt {
	position: relative;
}

.timeline dt::before {
	content: "";
	width: 8px;
	height: 8px;
	background-color: var(--color-secondary);
	border-radius: 50%;
	position: absolute;
	left: -21px;
	top: 10px;
}

.timeline dd {
    text-align: justify;
}

/* 夜勤色変更 */
.schedule-night {
    background-color: #ECF1F7;
    padding: 30px 40px;
}

.schedule-night h3 {
    color: #004098;
}

.schedule-night .timeline::before, 
.schedule-night .timeline dt::before {
	background-color: #004098;
}

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

    .schedule-day, 
    .schedule-night {
        padding: 30px;
    }

    .timeline {
        padding-right: 0px;
    }
}

/* ------------スタッフインタビュー------------ */
.interview-thum {
	margin: 100px auto 0 auto;
    position: relative;
    z-index: 1;
}

.interview-img {
    position: relative;
    z-index: -1;
    width: 55%;
    max-width: 1000px;
}

.interview-img::after {
    background: linear-gradient(to right, rgb(255 255 255 / 0) 0%, #FFF 100%);
    content: "";
    width: 40%;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    right: -2px;
    z-index: 1;
}

.interview-img img {
	width: 100%;
	height: auto;
    min-height: 500px;
    object-fit: cover;
    object-position: 30% 50%;
	display: block;
}

.interview-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
	max-width: 470px;
    margin: auto calc((100% - 1000px) / 2) auto auto;
}

.interview-catch {
	font-size: 22px;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
	margin-bottom: 40px;
    position: relative;
}

.interview-catch::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    bottom: -45px;
    width: 50px;
    height: 2px;
    background-color: #B9B9B9;
}

.interview-meta {
    margin-top: 30px;
}

.interview-detail {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    max-width: 1200px;
    margin: -30px auto 0 calc((100% - 1000px) / 2);
    z-index: 2;
    position: relative;
}

.interview-detail img {
    max-width: 470px;
}

@media screen and (max-width: 1020px) {
    .interview-img {
        width: 50%;
    }
    
    .interview-img img {
        min-height: 400px;
    }
    
    .interview-text {
        left: 50%;
        right: 0;
        max-width: 60%;
        padding-right: 10px;
        margin: auto 0;
    }
    
    .interview-catch {
        margin-bottom: 20px;
    }
    
    .interview-catch::after {
        bottom: -25px;
    }
    
    .interview-meta {
        margin-top: 30px;
    }
    
    .interview-detail {
        margin: 40px 0 0 10px;
        align-items: center;
    }
    
    .interview-detail img {
        max-width: 45%;
    }
}

@media screen and (max-width: 767px) {
    .interview-thum {
        margin: 60px auto 0 auto;
    }

    .interview-img {
        width: 100%;
        position: absolute;
        height: 200px;
        top: 90px;
    }

    .interview-img::after {
        content: none;
    }

    .interview-img img {
        min-height: auto;
        height: 280px;
        object-position: 50% 10%;
    }

    .interview-text {
        left: 0;
        position: relative;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    .interview-catch {
        margin-top: 300px;
        margin-bottom: 30px;
        font-size: 18px;
    }

    .interview-catch::after {
        bottom: -30px;
        width: 70px;
    }

    .interview-meta {
        margin-top: 20px;
    }

    .interview-detail {
        margin: 0 auto;
        padding: 30px 15px 0 15px;
        flex-direction: column;
    }

    .interview-detail img {
        max-width: 100%;
        width: 100%;
    }
}
/**************************************************************
	キャリアプラン
***************************************************************/
.career {
    padding: 100px 0 140px 0;
    background: #F5F5F5;
}

/* ------------働き方の選択------------ */
.work-style-list {
	display: flex;
	gap: 30px;
	margin: 40px auto 0 auto;
    padding-right: 5px;
}

.work-style-list li {
	background-color: #fff;
	padding: 40px 24px;
	width: 100%;
	text-align: center;
    position: relative;
}

.work-style-list li::before {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid #B9B9B9;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    pointer-events: none;
}

.work-style-list h4 {
	font-size: 18px;
	margin-bottom: 20px;
    position: relative;
    font-weight: normal;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
}

.work-style-list h4::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #B9B9B9;
}

.work-style-list p {
	padding-top: 20px;
}

@media screen and (max-width: 767px) {
    .career {
        padding: 60px 0;
    }
    
    .work-style-list {
        flex-direction: column;
        margin: 30px auto 0 auto;
        gap: 20px;
    }
}

/* ------------多彩なキャリアプラン------------ */
.career-plan {
    padding: 100px 0 0 0;
}

.career-plan-list {
    margin-top: 60px;
}

.career-plan-list li:not(:last-child) {
    margin-bottom: 80px;
}

.career-plan-title {
    display: flex;
    align-items: center;
    gap: 50px;
}

.career-plan-title h4 {
    font-size: 18px;
    font-weight: normal;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.career-plan-img {
    background-color: #FFF;
    padding: 20px;
    margin: 40px auto 0 auto;
}

.career-plan-img img {
    width: 100%;
}

/* モーダルウィンドウ */
.modal-open {
    display: none;
}

.modal {
    display: none;
}

.modal-overlay {
    align-items: center;
    background: rgba(0,0,0,.6);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

.modal-container {
    overflow: auto;
}

.modal-close {
    font-size: 14px;
    width: 110px;
    height: 34px;
    background: #000;
    color: #fff;
    line-height:34px;
    padding: 0 25px 0 10px;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) ;
}

.modal-close::after {
    content: "\2715";
    position: absolute;
    right: 10px;
    font-size: 16px;
}

.modal-content  {
    overflow: auto;
}

.modal-content img {
    width: 1035px;
    max-width: none;
}

/* モーダルアニメーション */
@keyframes mmfadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-10%);
    }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal-overlay {
    animation: mmfadeIn .3s cubic-bezier(.0, .0, .2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal-container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal-overlay {
    animation: mmfadeOut .3s cubic-bezier(.0, .0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal-container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal-container,
.micromodal-slide .modal-overlay {
    will-change: transform;
}


@media screen and (max-width: 767px) {
    .career-plan {
        padding: 65px 0 0 0;
    }
    
    .career-plan-list {
        margin-top: 40px;
    }

    .career-plan-list li:not(:last-child) {
        margin-bottom: 40px;
    }

    .career-plan-list p.num::after {
        height: 80px;
    }

    .career-plan-title h4 {
        letter-spacing: 0;
    }

    .career-plan-img {
        padding: 0px;
        margin: 30px auto 0 auto;
    }

    /* 開くボタン */
    .modal-open {
        display: block;
        background-color: #7C7C7C;
        color: #fff !important;
        font-size: 14px;
        width: 110px;
        height: 34px;
        line-height: 34px;
        margin: 10px auto 0 auto;
        padding: 0 25px 0 10px;
        position: relative;
    }

    .modal-open::after {
        content: "";
        background: url(/jobfind-pc/original/images/icon-zoom.png) no-repeat center / contain;
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
}

/* ------------ 管理部門でのキャリア ------------ */
.career-management {
    padding-top: 80px;
    padding-bottom: 140px;
    background: url("/jobfind-pc/original/images/bg-career.png") no-repeat bottom / contain;
}

.career-management-list {
    display: grid;
	grid-template-columns: repeat(auto-fit, 320px);
	gap: 20px;
	justify-items: center;
    justify-content: center; 
	margin: 40px auto 0 auto;
}

.career-management-list li {
	background-color: #fff;
	border-radius: 50%;
	width: 320px;
	height: 320px;
    aspect-ratio: 1/1;
	text-align: center;
	padding: 30px 40px 60px 40px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 25px;
}

.career-management-list h4 {
    width: 100%;
    font-family: var(--font-serif);
    font-weight: normal;
    letter-spacing: 0.1em;
    font-size: 18px;
    line-height: 1.3;
    height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.career-management-list h4::before {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #B9B9B9;
}

.sp-accordion {
    display: none;
}

.career-management-list p {
    display: block;
}

@media screen and (max-width: 767px) {
    .career-management {
        padding-top: 60px;
        padding-bottom: 100px;
    }
    
    .career-management-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 30px auto 0 auto;
    }
    
    .career-management-list li {
        border-radius: 0;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        text-align: left;
        padding: 0;
        gap: 0;
    }

    .career-management-list-title {
        width: 100%;
        position: relative;
        transition: all .3s;
    }

    @media (any-hover: hover){
        .career-management-list-title:hover {
            opacity: .7;
        }
    }
    
    .career-management-list h4 {
        padding: 20px 60px 20px 25px;
        height: auto;
        display: block;
        cursor: pointer;
    }

    .career-management-list h4::before {
        content: none;
    }

    .sp-accordion {
        display: block;
        width: 28px;
        height: 2px;
        background-color: var(--color-primary01);
        position: absolute;
        right: 20px;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

    .sp-accordion::before {
        content: "";
        display: block;
        width: 28px;
        height: 2px;
        background-color: var(--color-primary02);
        position: absolute;
        rotate: 90deg;
        transition: all .3s;
        z-index: 1;
    }

    .sp-accordion.active::before {
        rotate: 0deg;
        transform: translateY(-1px);
        z-index: -1;
    }

    .career-management-list p {
        display: none;
        padding: 20px 25px;
        position: relative;
    }

    .career-management-list li:first-child p {
        display: block;
    }

    .career-management-list li p::before {
        content: "";
        display: block;
        position: absolute;
        background: var(--color-secondary);
        width: 70px;
        height: 2px;
        top: 0px;
    }
}

/* スタッフインタビュー */
.career .interview-img::after {
    background: linear-gradient(to right, rgb(245 245 245 / 0) 0%, #F5F5F5 100%);
}

/**************************************************************
	人財育成について
***************************************************************/
.education {
    padding-top: 60px;
    padding-bottom: 140px;
    background: url(/jobfind-pc/original/images/bg-education.png) no-repeat bottom / contain;
}

@media screen and (max-width: 767px) {
    .education {
        padding-top: 60px;
        padding-bottom: 100px;
    }
}

/* ------------ 導入研修 ------------ */
.training-content {
    margin-top: 40px;
    padding: 40px 60px;
    background-color: #ECF1F7;
    display: flex;
    gap: 40px;
    align-items: center;
}

.training-list {
    max-width: 490px;
    width: calc(100% - 390px);
}

.training-list li {
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding-left: 30px;
    font-size: 18px;
}

.training-list li:not(:last-child) {
    margin-bottom: 15px;
}

.training-list li::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 2px;
    background-color: var(--color-primary01);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.training-img {
    width: 350px;
}

@media screen and (max-width: 767px) {
    .training-content {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 30px;
        padding: 40px 30px;
    }

    .training-list {
        width: 100%;
    }
    
    .training-list li {
        width: auto;
        line-height: 1.4;
    }

    .training-list li::before {
        top: 13px;
        bottom: auto;
    }

    .training-img {
        width: 100%;
    }

    .training-img img {
        width: 100%;
        height: auto;
    }
}

/* ------------ 階層ごとの研修プログラム ------------ */
.training {
    padding-top: 80px;
}

.training-columns {
    margin-top: 40px;
    display: flex;
    gap: 30px;
}

.training-group {
    flex: 1;
}

.training-group h4 {
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 0 10px;
    height: 65px;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 個別色設定 */
.staff-class h4 {
    background-color: #4AA871;
}

.leader-class h4 {
    background-color: #079A96;
}

.manager-class h4 {
    background-color: #6A79B8;
}

.training-group h4 span {
    display: block;
    font-size: 16px;
    color: #fff;
    font-family: var(--font-base);
    font-weight: normal;
}

.training-group ul {
    padding: 30px 25px 50px 25px;
    height: calc(100% - 60px);
    background-color: #F5F5F5;
}

.training-group li:not(:last-child) {
    margin-bottom: 30px;
}

.training-group h5 {
    display: block;
    position: relative;
    margin-bottom: 5px;
    padding-left: 25px;
    font-size: 17px;
    font-weight: 500;
}

.training-group h5::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 2px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-color: #7C7C7C;
}

@media screen and (max-width: 767px) {
    .training {
        padding-top: 60px;
    }

    .training-columns {
        margin-top: 30px;
        flex-direction: column;
    }
    
    .training-group li:not(:last-child) {
        margin-bottom: 30px;
    }

    .training-group h4 {
        font-size: 18px;
    }

    .training-group h4 span {
        font-size: 14px;
    }

    .training-group h5 {
        font-size: 16px;
    }
}

/* ------------ その他の研修 ------------ */
.other-training {
    padding-top: 100px;
}

.other-training-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 40px auto 0 auto;
    padding-right: 5px;
}

.other-training-list li {
    background-color: #F5F5F5;
    padding: 40px 30px;
    width: 100%;
    text-align: center;
    position: relative;
}

.other-training-list li::before {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid #B9B9B9;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
}

.other-training-list h4 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    font-weight: normal;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
}

.other-training-list h4::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #B9B9B9;
}

.other-training-list p {
    padding-top: 20px;
}

.other-training-list .note {
    font-size: 14px;
    padding-top: 10px;
}

@media screen and (max-width: 767px) {
    .other-training {
        padding-top: 60px;
    }
    
    .other-training-list {
        grid-template-columns: 1fr;
        margin: 30px auto 0 auto;
        gap: 20px;
    }
}

/**************************************************************
	働く魅力
***************************************************************/
.benefit {
    padding-top: 80px;
    padding-bottom: 140px;
}

@media screen and (max-width: 767px) {
    .benefit {
        padding-top: 60px;
        padding-bottom: 100px;
    }
}

/* ------------ 福利厚生 ------------ */
.benefit-list {
	display: flex;
	gap: 30px;
}

.benefit-list li {
	background: #ECF1F7;
	padding: 40px 0;
}

.benefit-list-title {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.benefit-list li img {
	margin: 0 auto;
	display: block;
	height: 100px;
	width: auto;
    max-width: 100px;
    object-fit: contain;
}

.benefit-list li h4 {
	padding-bottom: 40px;
    text-align: center;
    line-height: 1.3;
    font-size: 18px;
    font-weight: normal;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
}

.benefit-list li p {
	position: relative;
    padding: 0 30px;
}

.benefit-list li p::before {
	content: "";
    display: block;
    width: 80px;
    height: 2px;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #B9B9B9;
}

.award .benefit-list-title {
    height: auto;
    gap: 20px;
}

@media screen and (max-width: 767px) {
    .benefit-list {
        flex-direction: column;
        gap: 20px;
    }
    
    .benefit-list-title {
        height: auto;
        gap: 20px;
    }
}

/* ------------ 働き方サポート制度 ------------ */
.support, 
.award {
    padding-top: 100px;
}

.support-innner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 30px;
    border-bottom: 1px solid #BCBCBC;
}

.support-innner:not(:first-of-type) {
    padding-top: 30px;
}

.support-title {
	display: flex;
	align-items: center;
	gap: 15px;
	font-weight: normal;
	font-size: 20px;
    padding-left: 10px;
    padding-top: 5px;
}

.support-title img {
    width: 50px;
}

.support-title h4 {
    font-family: var(--font-serif);
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: normal;
}

.support-accordion {
    width: 70%;
    max-width: calc(100% - 250px);
}

.support-accordion dl {
    background-color: #F5F5F5;
}

.support-accordion dl:not(:last-child) {
	margin-bottom: 10px;
}

.support-accordion dt {
    position: relative;
    transition: all .3s;
}

@media (any-hover: hover){
    .support-accordion dt:hover {
        opacity: .7;
    }
}

.support-accordion dt::before {
    content: "";
    display: block;
    width: 15px;
    height: 2px;
    position: absolute;
    left: 30px;
    top: 32px;
    background-color: #B9B9B9;
}

.support-accordion dt::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--color-primary01);
    position: absolute;
    right: 25px;
    top: 32px;
}

.support-accordion dt button {
    padding: 20px 80px 20px 60px;
	width: 100%;
	text-align: left;
	font-size: 18px;
    color: var(--color-primary01);
    font-weight: normal;
	position: relative;
	border: none;
}

.support-accordion dt button::before {
    content: "";
	display: block;
    width: 28px;
    height: 2px;
    background-color: var(--color-primary02);
    position: absolute;
    right: 25px;
    top: 32px;
    rotate: 90deg;
    transition: all .3s;
}

.support-accordion dt button.active::before {
    rotate: 0deg;
}

.support-accordion dd {
    display: none;
	padding: 0 80px 20px 60px;
}

.support-accordion dl dd.open {
    display: block ;
}

.support-accordion dd ul {
	list-style: disc;
	margin-left: 30px;
}



@media screen and (max-width: 767px) {
    .support, 
    .award {
        padding-top: 80px;
    }

    .support-innner {
        flex-direction: column;
        gap: 20px;
    }

    .support-title {
        gap: 10px;
        padding-top: 0;
    }

    .support-title img {
        width: 30px;
    }

    .support-accordion {
        width: 100%;
        max-width: none;
    }

    .support-accordion dt::before {
        left: 20px;
        top: 32px;
        bottom: auto;
    }

    .support-accordion dt::after {
        right: 15px;
    }

    .support-accordion dt button {
        padding: 20px 50px 20px 50px;
        font-size: 16px;
    }

    .support-accordion dt button::before {
        right: 15px;
    }

    .support-accordion dd {
        padding: 0 15px 20px 55px;
    }

    .support-accordion dd ul {
        margin-left: 15px;
    }
}

/* セパレーター画像 */
.separator-img img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    .separator-img img {
        height: 100px;
    }
}

/* 「働き方サポート制度」・「よくある質問」共通 */
.answer-top {
    margin-bottom: 10px;
}

.answer-bottom {
    margin-top: 10px;
}

.answer-type:nth-of-type(even) {
    margin-top: 10px;
}

.answer-type p.bold {
    font-weight: bold;
    margin-bottom: 5px;
}

/**************************************************************
	よくある質問
***************************************************************/
.faq {
    padding-top: 100px;
    padding-bottom: 140px;
}

.faq_list dl {
    background-color: #F5F5F5;
}

.faq_list dl:not(:last-child) {
	margin-bottom: 10px;
}

.faq_list dt {
    position: relative;
    transition: all .3s;
}

.faq_list dt::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--color-primary01);
    position: absolute;
    right: 25px;
    top: 33px;
}

@media (any-hover: hover){
    .faq_list dt:hover {
        opacity: .7;
    }
}

.faq_list dt button {
    padding: 20px 80px 20px 70px;
	width: 100%;
	text-align: left;
	font-size: 18px;
    color: var(--color-primary01);
    font-weight: normal;
	position: relative;
	min-height: 70px
}

.faq_list dt button span {
    font-family: var(--font-en);
    font-size: 26px;
    color: var(--color-primary01);
    position: absolute;
    width: 30px;
    left: 30px;
    top: 15px;
    padding-top: 3px;
}

.faq_list dt button::before {
    content: "";
	display: block;
    width: 28px;
    height: 2px;
    background-color: var(--color-primary02);
    position: absolute;
    right: 25px;
    top: 33px;
    rotate: 90deg;
    transition: all .3s;
}

.faq_list dt button.active::before {
    rotate: 0deg;
}

.faq_list dd {
    display: none;
	padding: 0 80px 30px 70px;
}

.faq_list dl:first-child dd {
    display: block ;
}

.faq_list dd img {
    margin-top: 30px;
    width: 100%;
    max-width: 400px;
}

@media screen and (max-width: 767px) {
    .faq {
        padding-top: 60px;
        padding-bottom: 100px;
    }
    
    .faq_list dt {
        position: relative;
    }
    
    .faq_list dt::after {
        right: 15px;
    }

    .faq_list dt button {
        padding: 20px 55px 20px 50px;
        font-size: 16px;
    }
    
    .faq_list dt button::before {
        right: 15px;
    }

    .faq_list dt button span {
        left: 15px;
    }
    
    .faq_list dd {
        padding: 0 20px 20px 50px;
    }
    
    .faq_list dd img {
        margin-top: 20px;
    }
}

/**************************************************************
	地域リンク
***************************************************************/
#areaLink div.area {
    display: none !important;
}