@charset "UTF-8";
/*--------------------------------------------------
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
----------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}



ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*:focus {
    outline: none;
}

/*-------------------
フォント設定
---------------------*/

/*:root {
  --px8: 0.6153rem;
  --px10: 0.769rem;
  --px11: 0.846rem;
  --px12: 0.923rem;
  --px13: 1rem;
  --px14: 1.077rem;
  --px15: 1.154rem;
  --px16: 1.231rem;
  --px17: 1.308rem;
  --px18: 1.385rem;
  --px19: 1.462rem;
  --px20: 1.538rem;
  --px21: 1.615rem;
  --px22: 1.692rem;
  --px23: 1.769rem;
  --px24: 1.846rem;
  --px25: 1.923rem;
  --px26: 2rem;
  --px27: 2.077rem;
  --px28: 2.154rem;
  --px29: 2.231rem;
  --px30: 2.308rem;
  --px31: 2.385rem;
  --px32: 2.462rem;
  --px33: 2.583rem;
  --px34: 2.615rem;
}*/

/*--------------
  セレクタ設定
----------------*/
/* <a> */
/* a {
  display: block;
  text-decoration: none;
  color: black;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transition: 0.4s ;
}

a:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
} */

/*<img>
img {
  display: block;
}*/

/*<label>*/
label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

label:hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

/*
<input>
<textarea>
*/
input,
textarea {
  -webkit-appearance: none;
}

/*---------------
  color設定
-----------------*/
:root {
  /* マイナビメインテーマカラー */
  --mynavi-main: rgb(0,170,238);
  /* マイナビサブテーマカラー */
  --mynavi-sub: rgb(240,88,10);
}

/*---------------
    shadow
----------------*/
/* 外側 */
.shadow {
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.18);
}

/* 内側 */
.shadowInset {
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.18) inset;
}

/*---------------------*/
/*	clearfix 
/*---------------------*/
.clearfix:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
} 
.clearfix {display: inline-block;} 

/* Hides from IE-mac \*/ 
* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */

/*---------------------*/
/*	crossdevice 
/*---------------------*/
.pc_hidden{
		display: none;
	}
.sp_hidden{
		display: block;
	}
@media screen and (max-width:780px) {
	.sp_hidden{
		display: none;
	}
    .pc_hidden{
		display: block;
	}
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    margin: 0;
}

a {
    text-decoration: none;
    color: #333333;
}

.container {
    max-width: 1090px;
    width: 90%;
    margin: auto;
}

/* Display */
.flex {
    display: flex;
}

.flex-between {
    justify-content: space-between;
}

.flex-evenly {
    justify-content: space-evenly;
}

.flex-center {
    justify-content: center;
}

.flex-end {
    justify-content: end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.grid {
    display: grid;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-x-6 {
    column-gap: 6px;
}

.gap-y-6 {
    row-gap: 6px;
}


.gap-y-75 {
    row-gap: 75px;
}

/* Font Size */
.text-9 {
    font-size: 9px;
}

.text-xs {
    font-size: 12px;
}

.text-13 {
    font-size: 13px;
}

.text-14 {
    font-size: 14px;
}

.text-15 {
    font-size: 15px;
}

.text-17 {
    font-size: 17px;
}

.text-lg {
    font-size: 18px;
}

.text-xl {
    font-size: 20px;
}

.text-2xl {
    font-size: 24px;
}

.text-28 {
    font-size: 28px;
}

.text-42 {
    font-size: 42px;
}

.text-5xl {
    font-size: 3rem;
}

/* Font Color */
.text-black-1000 {
    color: #000000;
}

.text-black-900 {
    color: #333333;
}

.text-black-500 {
    color: #5A5A5A;
}

.text-orange-900 {
    color: #EE7800;
}

.text-orange-500 {
    color: #FF8D54;
}

.text-black-200 {
    color: #8F8F8F;
}

.text-white-900 {
    color: white;
}

/* Font Weight */
.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

/* Line Height */
.leading-relaxed {
    line-height: 1.6;
}

/* Text Align */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Border */
.border-1 {
    border-width: 1px;
}

.border-black-100 {
    border-color: #D3D3D3;
}

.rounded-lg {
    border-radius: 8px;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-xl {
    border-radius: 12px;
}

.rounded-full {
    border-radius: 9999px;
}

.border-solid {
    border-style: solid;
}

/* Background */
.bg-orange-500 {
    background-color: #FF8D54;
}

.bg-orange-300 {
    background-color: #FF9C69;
}

.bg-white-900 {
    background-color: white;
}

.bg-white-500 {
    background-color: #F8F6EE;
}

.bg-black-100 {
    background-color: #D3D3D3;
}

.bg-black-500 {
    background-color: #3F3F3F;
}

.bg-black-900 {
    background-color: #000000;
}

/* Margin */
.ml-5 {
    margin-left: 5px;
}

.mr-7 {
    margin-right: 7px;
}

.mr-30 {
    margin-right: 30px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-5-anti {
    margin-top: -5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-100 {
    margin-top: 100px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-50 {
    margin-bottom: 50px;
}

/* Padding */
.p-20 {
    padding: 20px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.px-56 {
    padding-left: 56px;
    padding-right: 56px;
}

.py-7 {
    padding-top: 7px;
    padding-bottom: 7px;
}

.py-17 {
    padding-top: 17px;
    padding-bottom: 17px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-50 {
    padding-left: 50px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-30 {
    padding-right: 30px;
}

/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

/* Responsive */
.sp {
    display: none;
}

/* Header */
header {
    position: fixed;
    background: #FFFFFF;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 80px;
    z-index: 9999;
}

header .container {
    height: 80px;
}

.logo-wrapper {
    width: 232px;
    height: 30px;
}

.logo-wrapper img {
    object-fit: cover;
    width: 100%;
}

.search-wrapper {
    position: relative;
    width: 180px;
    height: 48px;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.07);
}

.search-wrapper .search-icon {
    width: 20px;
    height: 20px;
    margin-right: 14px;
}

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

.search-wrapper .search-text {
    line-height: 1.2;
}

.area-modal button {
    width: 91px;
    height: 36px;
    background-color: #FF8D54;
}

.area-modal button.is-disabled {
    background-color: #D3D3D3;
    cursor: not-allowed;
}

.area-modal .area-back {
    display: none;
}

.area-modal .prefectures {
    display: none;
}

.area-modal .job-wrapper,
.area-modal .condition-wrapper {
    display: none;
}

.area-modal .area-result,
.area-modal .job-result,
.area-modal .condition-result {
    display: none;
}

/* Home */
#home {
    margin-top: 80px;
}

#home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Worry */
#worry {
    position: relative;
    padding: 123px 0px;
}

#worry .title {
    position: relative;
    font-size: 48px;
    margin-top: -25px;
}

.dot {
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 38px;
}

#worry .title span.dots {
    padding-top: 18px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 20%);
}

#worry .content div {
    position: relative;
    width: 30%;
    height: max-content;
}

#worry .content div::before {
    position: absolute;
    background: #5C79AD;
    display: block;
    font-size: 23px;
    color: white;
    bottom: 90px;
    left: -10px;
    padding: 5px 10px;
}

#worry .content div::after {
    position: absolute;
    background: #5C79AD;
    display: block;
    font-size: 23px;
    color: white;
    bottom: 40px;
    left: -10px;
    padding: 5px 10px;
}

#worry .booker::before {
    content: '経験がなく正社員採用';
}

#worry .booker::after {
    content: 'されるか不安だった';
}

#worry .buyer::before {
    content: '正社員の働き方に';
}

#worry .buyer::after {
    content: '不安があった';
}

#worry .cook::before {
    content: '正社員になるという';
}

#worry .cook::after {
    content: 'イメージができなかった';
}

#worry .content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Customize Carousel */
#worry .splide img {
    width: 100%;
}

#worry .splide__arrow {
    display: none;
}

#worry .splide__pagination {
    bottom: -2rem;
}

#worry .splide__pagination li {
    margin-right: 10px;
}

#worry .splide__pagination__page {
    background: #D9D9D9;
    width: 10px;
    height: 10px;
}

#worry .splide__pagination__page.is-active {
    background: #FF8D54;
    transform: scale(1);
}

#worry .splide__slide::before {
    position: absolute;
    background: #5C79AD;
    display: block;
    font-size: 19px;
    color: white;
    bottom: 58px;
    left: 20px;
    padding: 4px 8px;
}

#worry .splide__slide::after {
    position: absolute;
    background: #5C79AD;
    display: block;
    font-size: 19px;
    color: white;
    bottom: 20px;
    left: 20px;
    padding: 4px 8px;
}
/* Customize Carousel */

#worry .rec-group {
    position: absolute;
    width: 160px;
    top: 35px;
    left: -122px;
    z-index: -1;
}

#worry .rec-group img {
    width: 100%;
}

#worry .rec {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/* Employee */
#employee {
    padding-top: 120px;
}

#employee .title {
    position: relative;
    font-size: 42px;
}

#employee .title::after {
    position: absolute;
    content: '';
    width: 80px;
    height: 2px;
    background-color: white;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
}

#employee .title span.dots {
    padding-top: 18px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #fff 20%, transparent 20%);
}

#employee .subtitle {
    position: relative;
    font-size: 28px;
    line-height: 1.8;
    padding: 0px 34px;
    margin-top: 80px;

}

#employee .subtitle::before {
    position: absolute;
    content: '';
    background: url(../image/left-parentheses-pc.webp);
    width: 25px;
    height: 95px;
    left: calc(50% - 280px);
    top: 50%;
    transform: translateY(-50%);
}

#employee .subtitle::after {
    position: absolute;
    content: '';
    background: url(../image/right-parentheses-pc.webp);
    width: 28px;
    height: 95px;
    right: calc(50% - 280px);
    top: 50%;
    transform: translateY(-50%);
}

#employee .description {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 2;
}

#employee .people {
    max-width: 975px;
}

#employee .people img {
    width: 100%;
    object-fit: cover;
    margin-top: 2px;
}

#employee .people img.pc {
    display: block;
}

/* Style */
#style {
    position: relative;
}

#style .container {
    max-width: 1240px;
}

#style .title {
    position: relative;
    font-size: 42px;
    margin-top: 80px;
}

#style .title::before {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #FFAE85;
    left: 50%;
    bottom: -20px;
}

#style .title::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #A0B7E0;
    right: 50%;
    bottom: -20px;
}

#style .title span.dots {
    padding-top: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 20%);
}

#style .splide__track {
    max-width: 1020px;
    margin: auto;
}

#style .splide__arrow {
    width: 40px;
    height: 40px;
    background: #2d2d2d;
}

#style .splide__arrow--prev {
    left: -40px;
}

#style .splide__arrow--next {
    right: -40px;
}

#style .splide__pagination {
    bottom: 0;
    gap: 10px;
}

#style .splide__pagination__page.is-active {
    background: #FF8D54;
    transform: scale(1);
}

#style .styles {
    row-gap: 75px;
    margin-top: 125px;
    margin-bottom: 30px;
}

#style .style {
    position: relative;
    width: 30%;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.04);
    padding-bottom: 45px;
}

#style .icon-wrapper {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.04);
}

#style .icon-wrapper img {
    width: 50px;
    height: auto;
}

#style .style-header {
    margin-top: 30px;
}

#style .extra-link {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    margin-top: 10px;
}

#style .extra-link a {
    font-size: 12px;
    color: #FFFFFF;
}

.extra-link .style-link {
    height: 35px;
    gap: 5px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #FFFFFF;
}

.extra-link .job-link {
    height: 35px;
    gap: 5px;
    border-bottom-right-radius: 12px;
}

#style button.more,
#style button.less {
    width: 100%;
    height: 50px;
    gap: 10px;
    font-size: 16px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    border: none;
}

#style button.less {
    display: none;
}

#style button.more img {
    width: 8px;
    transform: rotate(90deg);
}

#style button.less img {
    width: 8px;
    transform: rotate(-90deg);
}

/* Life */
#life {
    padding: 10px 0px 100px 0px;
}

#life .container {
    max-width: 1240px;
}

#life .title {
    position: relative;
    font-size: 42px;
    padding: 0px 40px;
    line-height: 1.9;
    margin: 80px 0px;
}

#life .title::before {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #FFAE85;
    left: 50%;
    bottom: -20px;
}

#life .title::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #A0B7E0;
    right: 50%;
    bottom: -20px;
}

#life .title span.dots {
    padding-top: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 20%);
}

#life .splide__track {
    max-width: 1080px;
    margin: auto;
}

#life .splide__arrow {
    width: 40px;
    height: 40px;
    background: #2d2d2d;
}

#life .splide__arrow--prev {
    left: -40px;
}

#life .splide__arrow--next {
    right: -40px;
}

#life .splide__pagination {
    bottom: -30px;
    gap: 10px;
}

#life .splide__pagination__page.is-active {
    background: #FF8D54;
    transform: scale(1);
}

#life .splide__slide {
    text-align: left;
}

#life .splide__slide img {
    width: 100%;
    /* height: 185px; */
    object-fit: cover;
}

#life .splide__slide .subtitle {
    font-size: 19px;
    height: 56px;
    margin-top: 10px;
    overflow: hidden;
}

#life .splide__slide .author {
    font-weight: normal;
}

#life .life {
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: left;
    padding: 20px 0px;
    border-bottom: 1px solid #D3D3D3;
}

#life .life .life-img {
    width: 144px;
}

#life .life-img img {
    width: 100%;
}

#life .life .life-detail {
    width: calc(100% - 154px);
    padding-right: 10px;
}

#life .life .subtitle {
    height: 48px;
    overflow: hidden;
}

#life .life .author {
    font-weight: normal;
    font-size: 13px;
}

#life button.more,
#life button.less {
    width: 100%;
    height: 50px;
    gap: 10px;
    font-size: 16px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    border: none;
}

#life button.less {
    display: none;
}

#life button.more img {
    width: 8px;
    transform: rotate(90deg);
}

#life button.less img {
    width: 8px;
    transform: rotate(-90deg);
}

/* Work */
#work {
    padding: 10px 0px 100px 0px;
    background: #F8F6EE;
}

#work .container {
    max-width: 1240px;
}

#work .title {
    position: relative;
    font-size: 42px;
    padding: 0px 40px;
    line-height: 1.9;
    margin: 80px 0px;
}

#work .title::before {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #FFAE85;
    left: 50%;
    bottom: -20px;
}

#work .title::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    background-color: #A0B7E0;
    right: 50%;
    bottom: -20px;
}

#work .title span.dots {
    padding-top: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 20%);
}

#work .splide__track {
    max-width: 1080px;
    padding: 10px 0px;
    margin: auto;
}

#work .splide__arrow {
    width: 40px;
    height: 40px;
    background: #2d2d2d;
}

#work .splide__arrow--prev {
    left: -40px;
}

#work .splide__arrow--next {
    right: -40px;
}

#work .splide__pagination {
    bottom: -30px;
    gap: 10px;
}

#work .splide__pagination__page.is-active {
    background: #FF8D54;
    transform: scale(1);
}

#work .splide__slide {
    background: #FFFFFF;
    font-weight: normal;
    text-align: left;
    box-shadow: 0px 5px 5px #F4F4F2;
}

#work .splide__slide .subtitle {
    font-weight: bold;
    font-size: 19px;
    height: 56px;
    margin-top: 10px;
    margin-bottom: 17px;
    overflow: hidden;
}

#work .splide__slide .date,
#work .splide__slide .subtitle {
    padding: 0px 10px;
}

#work .splide__slide .img {
    padding-top: calc(390 / 640 * 100%);
}

#work .splide__slide .date {
    font-size: 10px;
    margin-top: 20px;
}

#work .splide__slide .work-type {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 10px;
    border-top: 1px solid #F4F4F2;
    padding: 13px 10px;
}

#work .splide__slide .work-type>div {
    padding: 5px 10px;
    border: 1px solid #8A8A8A;
    border-radius: 9999px;
}

#work .work {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #FFFFFF;
    text-align: left;
    font-size: 11px;
    font-weight: normal;
    padding: 12px 0px;
    margin-bottom: 10px;
}

#work .work .work-img {
    width: 144px;
}

#work .work-img img {
    width: 100%;
}

#work .work .work-detail {
    width: calc(100% - 154px);
    padding-right: 5px;
}

#work .work .subtitle {
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    overflow: hidden;
}

#work .work .work-type {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

#work .work .work-type>div {
    padding: 3px 8px;
    border: 1px solid #8A8A8A;
    border-radius: 9999px;
}

#work button.more,
#work button.less {
    width: 100%;
    height: 50px;
    gap: 10px;
    font-size: 16px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    border: none;
}

#work button.less {
    display: none;
}

#work button.more img {
    width: 8px;
    transform: rotate(90deg);
}

#work button.less img {
    width: 8px;
    transform: rotate(-90deg);
}

/* Modal */
.area-modal .hystmodal__window {
    width: 625px;
}

.style-modal .hystmodal__window {
    width: 368px;
    padding: 20px;
}

.areas div,
.prefectures div,
.jobs div,
.conditions div {
    height: 40px;
}

.jobs div.active,
.conditions div.active {
    background: #FF8D54;
    color: white;
}

.job,
.condition {
    display: flex;
    justify-content: end;
    width: calc(100% - 80px);
}

.confirm-job,
.confirm-condition {
    display: flex;
    justify-content: end;
}

.area-modal .modal__content img,
.style-modal .modal__content img {
    width: 16px;
    height: 16px;
}

.area-modal .area-back img,
.area-modal .job-back img,
.area-modal .condition-back img,
.style-modal .back img {
    width: 5px;
    height: 9px;
}

.area-modal button,
.style-modal button {
    width: 100%;
    height: 44px;
    background-color: #FF8D54;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.style-modal button.is-disabled {
    background-color: #D3D3D3;
    cursor: not-allowed;
}

.area-modal button img,
.style-modal button img {
    width: 16px;
    height: 16px;
    margin-right: 7px;
}

.style-modal {
    z-index: 9999;
}

.style-modal .back {
    display: none;
}

.style-modal .prefectures {
    display: none;
}

.area-modal.hystmodal {
    position: static;
}

.area-modal .hystmodal__window {
    position: absolute;
    max-width: none;
    top: 5px;
    right: -15px;
    overflow: hidden;
}

.area-modal .hystmodal__window .modal-content {
    max-height: 600px;
    overflow-y: auto;
}

.area-modal .job-placeholder,
.area-modal .condition-placeholder {
    margin-top: 60px;
}

.area-modal .modal-close,
.style-modal .modal-close {
    position: relative;
    display: block;
    background-color: white;
    width: 38px;
    min-height: 38px;
    border: 1px solid #D9D9D9;
    border-radius: 50%;
    margin-bottom: 20px;
}

.area-modal .modal-close::before,
.style-modal .modal-close::before {
    display: block;
    position: absolute;
    content: '';
    width: 15px;
    height: 1px;
    background-color: black;
    rotate: 45deg;
    top: 18px;
    left: 11px;
}

.area-modal .modal-close::after,
.style-modal .modal-close::after {
    display: block;
    position: absolute;
    content: '';
    width: 15px;
    height: 1px;
    background-color: black;
    rotate: -45deg;
    top: 18px;
    right: 10px;
}

@media screen and (max-width: 1024px) {
    #work .splide__slide .subtitle {
        font-size: 16px;
        height: 50px;
    }
}

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

    .pc {
        display: none;
    }

    /* Header */
    header .search-wrapper .sp {
        display: inline;
    }

    /* .area-modal .hystmodal__window {
        margin: 50px 0px;
    } */

    /* Employee */
    #employee .subtitle::before {
        background: url(../image/left-parentheses-sp.webp);
        background-size: contain;
        width: 20px;
        height: 84px;
        left: 17px;
    }

    #employee .subtitle::after {
        background: url(../image/right-parentheses-sp.webp);
        background-size: contain;
        width: 20px;
        height: 84px;
        right: 17px;
    }

    /* Modal */
    .style-modal .hystmodal__window,
    .area-modal .hystmodal__window {
        width: 100%;
        height: 100svh;
        border-radius: 0px;
        background: #F8F6EE;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
    }

    .style-modal .modal-main,
    .area-modal .modal-main,
    .area-modal .modal__footer,
    .style-modal .modal__footer {
        background: white;
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.07);
    }

    .area-modal .modal-main,
    .style-modal .modal-main {
        padding: 20px 15px;
        border-radius: 8px;
        margin-top: 10px;
    }

    .area-modal .modal__footer,
    .style-modal .modal__footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 62px;
    }

    .area-modal .modal__footer button,
    .style-modal .modal__footer button {
        margin-right: 28px;
    }
    
    .area-modal .modal-close,
    .style-modal .modal-close {
        margin-bottom: 0px;
    }

    .area-modal .hystmodal__window {
        position: fixed;
        top: 0px;
        right: 0px;
        margin: 0px;
        overflow-y: auto;
    }

    .area-modal .hystmodal__window .modal-content {
        max-height: max-content;
    }

    .area-modal .area-result,
    .area-modal .job-result,
    .area-modal .condition-result {
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.07);
    }

    .area-modal .job-wrapper,
    .area-modal .condition-wrapper {
        padding: 10px 15px;
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.07);
    }

    .area-modal .job-placeholder,
    .area-modal .condition-placeholder {
        margin-top: 10px;
        background-color: white;
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.07);
    }

    /* Worry */
    #worry .container {
        width: 100%;
    }

    #worry .rec-group {
        width: 84px;
        height: 100px;
        left: -1px;
        top: -31px;
    }

    #worry .rec {
        left: 0px;
        bottom: 5px;
    }

    #worry .subtitle {
        text-align: center;
        margin-top: 5px;
    }

    /* Employee */
    #employee .container {
        width: 100%;
    }

    #employee .people img.pc {
        display: none;
    }

    /* Style */
    #style .style {
        width: 48%;
    }

    #style .sp .styles {
        margin-top: 75px;
    }
}

@media screen and (max-width: 425px) {
    /* Header */
    header {
        height: 70px;
    }

    header .container {
        height: 70px;
    }

    .logo-wrapper {
        width: 128px;
        height: 17px;
    }

    .search-wrapper {
        width: 104px;
        height: 40px;
    }

    .search-wrapper .search-text {
        line-height: 0.7;
    }

    .search-wrapper::before {
        font-size: 20px;
        left: 12px;
    }

    .search-wrapper .search-icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    /* Home */
    #home {
        margin-top: 70px;
    }

    /* Worry */
    #worry {
        padding: 55px 0px;
    }

    #worry .title {
        font-size: 22px;
        text-align: center;
        margin-top: 10px;
    }

    #worry .title span.dots {
        padding-top: 10px;
        background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 30%);
    }

    .dot {
        width: 5px;
        height: 5px;
        margin-right: 18px;
    }

    /* Employee */
    #employee {
        padding-top: 60px;
    }

    #employee .title {
        font-size: 22px;
    }

    #employee .title span.dots {
        padding-top: 10px;
        background-image: radial-gradient(circle at center, #fff 20%, transparent 30%);
    }

    #employee .subtitle {
        font-size: 19px;
        margin-top: 60px;
    }

    

    #employee .subtitle::after {
        right: 17px;
    }

    #employee .description {
        font-size: 15px;
    }

    /* Style */
    #style .title {
        font-size: 22px;
        margin-top: 45px;
    }

    #style .title span.dots {
        padding-top: 10px;
        background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 30%);
    }

    #style .icon-wrapper {
        width: 50px;
        height: 50px;
        top: -25px;
    }

    #style .icon-wrapper img {
        width: 36px;
    }

    #style .styles {
        row-gap: 45px;
        margin-top: 80px;
        margin-bottom: 50px;
    }

    #style .style {
        padding-bottom: 95px;
    }

    #style .style-header {
        margin-top: 53px;
    }

    #style .extra-link {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 5px;
        padding: 0px 10px;
        bottom: 10px;
    }

    #style .style-link,
    #style .job-link {
        border-radius: 18px;
    }

    #style .style-link {
        border: none;
    }

    /* Life */
    #life .title {
        font-size: 22px;
        margin-top: 45px;
    }

    #life .title span.dots {
        padding-top: 5px;
        background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 30%);
    }

    /* Work */
    #work .title {
        font-size: 22px;
        margin-top: 45px;
    }

    #work .title span.dots {
        padding-top: 5px;
        background-image: radial-gradient(circle at center, #FF8D54 20%, transparent 30%);
    }
}

/*-----------------------------
    footerのクラス
--------------------------------*/

footer {
    line-height: 1.3;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: normal;
}
/* パンくず */
.pagePathParent {
    width: 100%;
    display: inline-block;
    /* font-size: var(--px11); */
    background-color: rgb(0,170,238);
    overflow: hidden;
}

/* パンくずリスト */
.pagePathParent > ul {
  margin-left: 20px;
  float: left;
}

/* パンくずリスト項目 */
.pagePathParent > ul > li {
  float: left;
}

/* パンくずリスト内ホームアイコン */
.pagePathParent > ul > li > img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  margin-top: 11px;
}

/* １パンくずのあとに＞表示 */
.pagePath::after {
  content: ">";
  margin: 0 3px;
  color: #fff;
}

/* 最後の子の場合は＞非表示 */
.pagePath:last-child::after {
  display: none
}

/* パンくずリンク */
.pagePathLink {
  display: inline-block;
  text-decoration: underline;
  color: #fff;
  line-height: 40px;
}

/* 現在地表示場所 */
.pagePathChild01 {
    width: auto;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 20px 0 25px;
    float: left;
    position: relative;
    z-index: 1;
}

/* リボンデザイン */
.pagePathChild01::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 6px;
    left: -16px;
    border-width: 15px 15px 15px 15px;
    border-color: transparent rgb(0,170,238) rgb(0,170,238) transparent;
    border-style: solid;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.18);
}

.pagePathChild01::after {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    z-index: 1;
    top: -15px;
    right: -15px;
    border-width: 15px 15px 15px 15px;
    border-color: transparent transparent rgb(0,170,238) transparent;
    border-style: solid;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    /* box-shadow: 0 2px 2px -2px var(--shadow); */
}

.pagePathChild02 {
  float: left;
  position: relative;
}

.pagePathChild02::after {
position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    z-index: 1;
    bottom: -15px;
    right: -35px;
    border-width: 15px 15px 15px 15px;
    border-color: transparent transparent transparent rgb(0,170,238);
    border-style: solid;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}


/* 現在地 */
.nowHere {
  color: var(--mynavi-main);
}

/*--------------------
  パンくず下関連サイト
----------------------*/

/*パンくず下囲み*/
.simpleRelationFooter{
  width: 100%;
  background-color: rgb(238, 238, 238);
  margin-top: -2px;
  padding: 32px 20px;
  box-sizing: border-box;
}

@media screen and (max-width:780px) {
  .simpleRelationFooter {
    padding: 28px 0;
  }
/* パンくず */
.pagePathWrap{
overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
	width: 100%;
	}
.pagePathParent {
  display: inline-block;
  font-size: var(--px11);
  background-color: var(--mynavi-main);
	width: 800px;
}
/* パンくずリスト */
.pagePathParent > ul {
  margin-left: 20px;
  float: left;

}

/* パンくずリスト項目 */
.pagePathParent > ul > li {
  float: left;
}
}

/*コンテンツ幅囲み*/
.contentWidthWrap {
  width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .contentWidthWrap {
    max-width: 1034px;
    padding: 0 17px;
    box-sizing: border-box;
    margin: 0 auto;
  }
}

/*マイナビロゴ*/
.simpleRelationFooterMynaviLogo {
  width: 62px;
  height: auto;
  float: left;
  margin-right: 20px
}

@media (min-width: 768px) {
  .simpleRelationFooterMynaviLogo {
    width: 82px;
    height: auto;
    margin-right: 0;
  }
}

/*関連サイト囲み*/
.simpleRelationSiteWrap{
  float: left;
  width: calc(100% - 82px);
}

@media (min-width: 768px) {
  .simpleRelationSiteWrap {
    max-width: calc(100% - 154px);
    text-align: center;
  }
}

/*関連サイト*/
.simpleRelationSite{
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .simpleRelationSite {
    margin-bottom: 8px;
  }
}

/*関連サイト項目*/
.simpleRelationSiteItem {
  display: inline;
  font-size: var(--px10);
  line-height: var(--px16);
}

@media (min-width: 768px) {
  .simpleRelationSiteItem {
    font-size: var(--px11);
  }
}

/* 項目区切り線 */
.simpleRelationSiteItem::after {
  content: "|";
  display: inline;
  margin: 0 5px;
}

/* 最後の項目時項目区切り線非表示 */
.simpleRelationSiteItem:last-child::after {
  display: none;
}

/* コピーライター */
.copyright {
  font-size: var(--px10);
}

@media (min-width: 768px) {
  .copyright {
    float: none;
    font-size: var(--px11);
  }
}

/*プライバシーマーク*/
.privacyLink,
.privacyMark {
  display: none;
}

@media (min-width: 768px) {
  .privacyLink,
  .privacyMark {
    display: block;
    float: right;
    width: 72px;
    height: 72px;
  }
  .privacyLink img{
    width: 72px;
  }
}