/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}


/* ---------------------------------------- common */

@media (max-width: 767px) {

	section {
		font-size: clamp(1.4rem, 2vw + 0.75rem, 1.6rem);
		padding: 3em 20px; 
	}

}

@media (min-width: 768px) {

	section {
		font-size: clamp(1.3rem, 2vw - 0.5rem, 1.6rem);
		padding: 5em 24px; 
	}

}

.pagelink a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	border: 3px #fff solid;
	border-radius: 2em;
	font-weight: 500;
	padding: 1.25em;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.pagelink a:hover {
	opacity: .5;
}
.pagelink a img {
	width: auto;
	height: 1.25em;
	margin: 0 .5em 0 0;
}
.pagelink a.jobinfo { background: var( --orange-color ); }
.pagelink a.infosearch { background: var( --peach-color ); }
.pagelink a.newGraduates { background: var( --line-green ); }

/* ---------------------------------------- headnews */

#headnews {
	display: flex;
	justify-content: center;
}
#headnews a { display: block; }
#headnews dl {
	display: table;
	background: #FFF7EA;
	border-radius: 8px;
	padding: .5em 0;
}
#headnews dt {
	display: table-cell;
	color: var( --orange-color );
	border-right: 1px #000 solid;
	font-size: clamp(1.5rem, 2vw + 0.5rem, 1.8rem);
	font-weight: 500;
	vertical-align: middle;
}
#headnews dd {
	display: table-cell;
	vertical-align: middle;
	font-weight: 500;
}
#headnews dd.date{ padding: 0 2em; }

#headnews dd time {
	color: #696969;
	font-size: 1.4rem;
}
#headnews dd.cat span {
	display: inline-block;
	background: #FFE7BA;
	font-size: 1.3rem;
	border-radius: 8px;
	padding: .75em .5em;
}
#headnews dd.tt span {
	display: inline-block;
	width: 16em; 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#headnews dd.cat span.blog { background: #FFE6F0; }
#headnews dd.cat span.openinfo { background: #FFE7BA; }
#headnews dd.cat span.opentime { background: #D5F5FF; }
#headnews dd.cat span.recuritinfo { background: #D1FCB6; }
#headnews dd.cat span.news { background: #E8E8E8; }

@media (max-width: 767px) {

	#headnews { padding: 1em 0; }
	#headnews dt { padding: .25em .75em; }
	#headnews dd.tt {
		font-size: clamp(1.3rem, 2vw + 0.5rem, 1.4rem);
	}
	#headnews dd.date,
	#headnews dd.cat { display: none; }
	#headnews dd.tt { padding: 0 .5em; }
	#headnews dd.tt span { 
		vertical-align: bottom;
	}
}

@media (min-width: 768px) {

	#headnews { padding: 0 0 1.25em; }
	#headnews dt { padding: 0 1.5em; }
	#headnews dd.tt {
		font-size: clamp(1.4rem, 2vw - 0.25rem, 1.5rem);
		padding: 0 1em;
	}
	#headnews dd.tt span { width: 16em; }

}

@media (min-width: 960px) {

	#headnews dd.tt span { width: 20em; }

}

/* ---------------------------------------- addhead */

.addhead { font-size: 16px; }
.addhead h2 {
	font-size: clamp( 1.5rem, 0.868rem + 0.35vw, 1.8rem );
	line-height: 1.2;
	font-weight: 500;
	position: relative;
}
.addhead h2 + p {
	color: var( --orange-color );
	font-family: "Lilita One", sans-serif;
	font-size: clamp( 4rem, 1.398rem + 4.88vw, 8rem );
	font-weight: 400;
	position: relative;
}
.addhead h2 + p::before {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: var( --orange-color );
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
}
.addhead h2 + p span {
	display: inline-block;
	background: #fff;
	padding: 0 .25em 0 0;
}

.addhead.flexed h2 + p {
	display: flex;
	align-items: center;
}
.addhead.flexed h2 + p::before {
	content: none;
}
.addhead.flexed h2 + p span {
	background: none;
}
.addhead.flexed h2 + p em {
	display: block;
	width: 100%;
	height: 2px;
	background: var( --orange-color );
}

/* ---------------------------------------- shopSearch */

/* addhead icon */

#shopSearch .addhead { margin: 0 0 2em; }
#shopSearch .addhead h2::after {
	content: "";
	display: block;
	width: 6vw;
	aspect-ratio: 1 / 0.881;
	background:  url( ../images/home/icon-scissors.svg ) no-repeat center center;
	background-size: contain;
}
#shopSearch .inner {
	position: relative;
}

@media (max-width: 1299px) {

	#shopSearch .addhead h2::after {
		display: inline-block;
		margin: 0 0 0 1em;
		-webkit-transform: translateY(12%);
		transform: translateY(12%);
	}
}

@media (max-width: 767px) {

	#shopSearch .addhead h2::after { 
		width: 10vw; 
		max-width: 58px;
	}

}

@media (min-width: 1300px) {

	#shopSearch {
		padding: 8em 24px 5em;
	}
	#shopSearch .addhead h2::after {
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: translate(-40%, -80%);
		transform: translate(-40%, -80%);
	}

}

/* parallax-img */

@media (max-width:767px) {

	#shopSearch .parallax-img.largeimg {
		position: absolute;
		top: 0;
		left: 50%;
		width: 50vw;
		max-width: 224px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}
	#shopSearch .parallax-img.smallimg {
		position: absolute;
		bottom: 30%;
		right: 75%;
		width: 30vw;
		max-width: 170px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}
}

@media (min-width: 768px) {

	#shopSearch .parallax-img.largeimg {
		position: absolute;
		top: 0;
		left: 82%;
		width: 25vw;
		max-width: 423px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}
	#shopSearch .parallax-img.smallimg {
		position: absolute;
		top: 45%;
		right: 85%;
		width: 18vw;
		max-width: 267px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}

}

/* ---------------------------------------- recruit */

#recruit {
	background-color: transparent;
}
#recruit .inner { 
	background: #fbe778;
	position: relative; 
}

@media (max-width: 767px) {

	#recruit.marquee::before,
	#recruit.marquee::after { top: 1.75em; }
	#recruit .inner { 
		border-radius: clamp(2rem, 0.355rem + 4.47vw, 4rem); 
		background: url( ../images/home/background-sp.svg ) no-repeat center center;
		background-size: auto 100%;
	}
	#recruit .parallax-img.largeimg,
	#recruit .parallax-img.smallimg { display: none; }

}

@media (min-width: 768px) {

	#recruit.marquee::before,
	#recruit.marquee::after { top: 1.5em; }
	#recruit .inner { 
		border-radius: clamp(6rem, -0.91rem + 9.71vw, 10rem);
		background: url( ../images/home/background-pc.svg ) no-repeat center center;
		background-size: auto 100%;
	}

	#recruit .parallax-img.largeimg {
		position: absolute;
		bottom: 75%;
		left: 82%;
		width: 25vw;
		max-width: 423px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}
	#recruit .parallax-img.smallimg {
		position: absolute;
		top: 45%;
		right: 85%;
		width: 18vw;
		max-width: 267px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}
}

/* headline */

#recruit .headline {
	text-align: center;
	background: url( ../images/home/deco01.svg ) no-repeat center bottom;
	background-size: 84%;
	margin: 0 0 20px;
}
#recruit .headline h2 {
	position: relative;
}
#recruit .headline h2 span {
	color: #f1d540;
	font-family: "Lilita One", sans-serif;
	font-weight: 400;
}
#recruit .headline h2 small {
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media (max-width: 767px) {

	#recruit .headline { 
		font-size: clamp(4.2rem, -0.865rem + 17.45vw, 12rem);
		padding: .4em 24px .75em;
		
	}
	#recruit .headline h2 span { 
		line-height: 1.1;
	}
	#recruit .headline h2 small { 
		font-size: clamp(2rem, 0.355rem + 4.47vw, 4.0rem);
	}

}

@media (min-width: 768px) {

	#recruit .headline { 
		font-size: clamp(12rem, 0.51rem + 14.56vw, 18rem);
		padding: .4em 24px .75em; 
	}
	#recruit .headline h2 span { 
		line-height: 1;
	}
	#recruit .headline h2 small { 
		font-size: clamp(3.2rem, 0.485rem + 3.16vw, 4.5rem);
	}

}

/* cont01 */

#recruit .cont01 {
	font-size: clamp(1.4rem, 2vw + 0.75rem, 1.6rem);
}

#recruit .cont01 > figure {
	position: relative;
}
#recruit .cont01 > figure img {
	position: relative;
	z-index: 2;
}

@media (max-width: 767px) {

	#recruit .cont01 {
		text-align: center;
		padding: 4em 6% 2em;
	}
	#recruit .cont01 > figure {
		margin: 0 0 2em;
	}
	#recruit .cont01 > figure img {
		width: 100%;
		max-width: 500px;
	}
	#recruit .cont01 > div picture img {
		width: 100%;
		max-width: 500px;
	}
	#recruit .cont01 .pagelink { 
		margin: 2em 0 0; 
	}
	#recruit .cont01 .pagelink a {
		width: 100%;
	}

}

@media (min-width: 768px) {

	#recruit .cont01 {
		display: flex;
		justify-content: space-between;
		padding: 5em 8% 3em;
	}
	#recruit .cont01 > figure {
		width: 46%;
	}
	#recruit .cont01 > figure::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 1 / 0.691;
		background: #faaf1f;
		border-radius: 1.5em;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		transform: rotate(-18deg) translate(-8%, 3%);
	}
	#recruit .cont01 > div {
		width: 49%;
		margin: 3em 0 0;
	}
	#recruit .cont01 .pagelink { 
		margin: 3em 0 0; 
	}
	#recruit .cont01 .pagelink a { width: 90%; }
}

/* cont02 */

#recruit .cont02 {
	font-size: clamp(1.4rem, 2vw + 0.75rem, 1.6rem);
	background: url( ../images/home/deco02.svg ) no-repeat center top;
	background-size: 84%;
}
#recruit .cont02 ul {
	display: flex;
	justify-content: space-between;
}
#recruit .cont02 ul li a { 
	display: block;
	aspect-ratio: 0.839 / 1; 
	border-radius: .5em;
	padding: .25em;
	position: relative;
	z-index: 1;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#recruit .cont02 li a:hover {
	opacity: .5;
}
#recruit .cont02 ul li a::after { 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #000000;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 65%);
	border-radius: 1em;
}
#recruit .cont02 ul li a h3 {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #fff;
	border: 1px #fff solid;
	font-weight: 600;
	border-radius: .5em;
	padding: .5em;
	position: relative;
	z-index: 3;
}
#recruit .cont02 ul li a h3 span {
	display: block;
	width: 100%;
	border-bottom: 1px #fff solid;
	text-align: center;
	padding: 0 0 .25em;
	margin: 0 0 .3em;
}

#recruit .cont02 li.experienced a {
	background: url( ../images/home/recruit02.jpg ) no-repeat center center;
	background-size: cover;
}
#recruit .cont02 li.highSchool a {
	background: url( ../images/home/recruit03.jpg ) no-repeat center center;
	background-size: cover;
}
#recruit .cont02 li.newGraduates a {
	background: url( ../images/home/recruit04.jpg ) no-repeat center center;
	background-size: cover;
}

@media (max-width: 480px) {

	#recruit .cont02 ul li a { 
		border-radius: .5em;
	}
	#recruit .cont02 ul li a h3 { 
		padding: .25em .25em .5em; 
		border-radius: .5em;
	}

}

@media (max-width: 767px) {

	#recruit .cont02 {
		padding: 8em 4% 0;
		margin: 0 0 3em;
	}
	#recruit .cont02 ul li {
		width: 32%;
	}
	#recruit .cont02 ul li a {
		font-size: clamp(1.4rem, 5vw - 0.25rem, 3rem);
	}
	#recruit .cont02 ul li a h3 small {
		font-size: clamp(0.9rem, 3vw - 0.25rem, 1.8rem);
	}

}

@media (min-width: 768px) {

	#recruit .cont02 {
		padding: 20em 8% 0;
		margin: 0 0 5em;
	}
	#recruit .cont02 ul {
		max-width: 950px;
		margin: 0 auto;
	}
	#recruit .cont02 ul li {
		width: 30%;
	}
	#recruit .cont02 ul li a {
		font-size: clamp(1.4rem, 5vw - 0.25rem, 3rem);
	}
	#recruit .cont02 ul li a h3 small {
		font-size: clamp(1.4rem, 0.176rem + 1.46vw, 2rem);
	}
}

/* cont03 */

@media (max-width: 767px) {

	#recruit .cont03 {
		font-size: clamp(1.5rem, 0.177rem + 3.8vw, 3.2rem);
		padding: 0 6% 3em;
	}
	#recruit .cont03 ul li:not(:last-child){ margin: 0 0 1em; }
}

@media (min-width: 768px) {

	#recruit .cont03 {
		font-size: clamp(2.2rem, 0.676rem + 1.46vw, 2.8rem);
		padding: 0 8% 4em;
	}
	#recruit .cont03 ul {
		display: flex;
		justify-content: space-between;
	}
	#recruit .cont03 ul li { width: 48%; }
}

/* ---------------------------------------- news */

/* addhead icon */
#news .addhead h2::after {
	content: "";
	display: block;
	width: 6vw;
	aspect-ratio: 1 / 1.117;
	background:  url( ../images/home/icon-dryer.svg ) no-repeat center center;
	background-size: contain;
}

#news .inner {
	position: relative; 
}
#news .inside ul li {
	border-bottom: 1px var( --orange-color ) solid;
	font-weight: 500;
	padding: 2em 0 0;
}
#news .inside a {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#news .inside ul a:hover { opacity: .5; }

#news .inside ul li p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#news .inside ul li p span {
	display: inline-block;
	padding: .6em;
	border-radius: .5em;
}

/* category color */
#news .inside ul li p span.blog { background: #FFE6F0; }
#news .inside ul li p span.openinfo { background: #FFE7BA; }
#news .inside ul li p span.opentime { background: #D5F5FF; }
#news .inside ul li p span.recuritinfo { background: #D1FCB6; }
#news .inside ul li p span.news { background: #E8E8E8; }

#news .inside ul + div {
	text-align: right;
	font-weight: 500;
	margin: 2em 0 0;
}
#news .inside ul + div a:hover { color: var( --orange-color ); }

@media (max-width: 767px) {

	#news .addhead h2::after { 
		width: 10vw; 
		max-width: 50px;
	}

	#news .parallax-img.largeimg {
		position: absolute;
		top: 0;
		left: 50%;
		width: 50vw;
		max-width: 224px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}
	#news .parallax-img.smallimg { display: none; }

	#news .inside ul li a {
		display: block;
		padding: 0 0 .5em;
	}

	#news .inside ul li time {
		display: block;
		font-size: clamp(1.2rem, 3vw + 0.25rem, 1.4rem);
		margin: 0 0 .5em;
	}

	#news .inside ul li p span {
		font-size: clamp(1.2rem, 3vw + 0.25rem, 1.4rem);
		white-space: nowrap;
		margin: 0 .5em 0 0;
	}
	#news .inside ul li p,
	#news .inside ul + div { 
		font-size: clamp(1.4rem, 2vw + 0.75rem, 1.6rem);
	}

}

@media (min-width: 768px) {

	#news .largeimg {
		position: absolute;
		top: 0;
		left: 75%;
		width: 50vw;
		max-width: 423px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}
	#news .smallimg {
		position: absolute;
		bottom: 5%;
		right: 80%;
		width: 30vw;
		max-width: 267px;
		height: auto;
		will-change: transform;
		z-index: -1;
	}

	#news .inside {
		max-width: 720px;
		margin: 0 auto;
	}

	#news .inside ul li a {
		display: flex;
		align-items: center;
		max-width: 540px;
		padding: .5em 0;
		margin: 0 auto;
	}

	#news .inside ul li time {
		width: 22%;
		font-size: 1.4rem;
	}
	#news .inside ul li p span {
		font-size: 1.4rem;
		margin: 0 1em 0 0;
	}
	#news .inside ul li p { 
		width: 78%;
		font-size: 1.6rem;
	}

}

@media (max-width: 1299px) {

	#news .addhead h2::after {
		display: inline-block;
		margin: 0 0 0 1em;
		-webkit-transform: translateY(15%);
		transform: translateY(15%);
	}

}

@media (min-width: 1300px) {

	#news .addhead h2::after {
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: translate(-50%, -60%);
		transform: translate(-50%, -60%);
	}

}

/* ---------------------------------------- about */

#about .addhead h2::after {
	content: "";
	display: inline-block;
	width: 7vw;
	aspect-ratio: 1 / 0.343;
	background:  url( ../images/home/icon-comb.svg ) no-repeat center center;
	background-size: contain;
	margin: 0 0 0 1em;
	-webkit-transform: translateY(15%);
	transform: translateY(15%);
}

#about .inside ul {
	display: flex;
	justify-content: space-between;
}
#about .inside ul a {
	display: block;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#about .inside ul a:hover { opacity: .5; }

@media (max-width: 767px) {

	#about .addhead h2::after { 
		width: 15vw; 
		max-width: 75px;
	}

	#about .inside { margin: 40px 0 0; }
	#about .inside ul li {
		width: 23.8%;
	}

}

@media (min-width: 481px) and (max-width:767px) {

	#about .inside ul li a { 
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 20px; 
		text-align: center;
		padding: 1em 0;
	}
	#about .inside ul li a img {
		width: 80%;
	}
	#about .inside ul li.elevencut a { background: #51B6DA; }
	#about .inside ul li.menu a { background: #9ACA68; }
	#about .inside ul li.fqa a { background: #FAC714; }
	#about .inside ul li.fc a { background: #EB7273; }

}

@media (min-width: 768px) {

	#about .inside { margin: 80px 0 0; }
	#about .inside ul li {
		width: 22.45%;
	}

}