@charset "utf-8";

/*
Theme Name: kobunsha
Author: YES-REFORM CO., LTD.
*/

:root {
/* ブランドカラー */
--color-primary:#224082;
--color-secondary: #8095c3;
--color-accent: #ffd146;

/* テキストカラー */
--text-primary: #222;
--text-secondary: #556c9f;

/* 境界・背景カラー */
--border-color: #d5d4d4;
--bg-blue:#224082;
--bg-grey:#f4f4f4;

/* フォントファミリー */
--font-primary:"Noto Sans JP", sans-serif; /* 400 */
--font-english:"Roboto Condensed", sans-serif; /* 600 */
--font-number:"Jost", sans-serif;/* 600 */

/* フォントサイズ */
--font-size-body: clamp(1.5rem, 1.5vw + 0.5rem, 1.6rem);
--font-size-accent: clamp(1.6rem, 1.5vw + 0.5rem, 1.8rem);
--font-size-heading: clamp(2.4rem, 3vw + 0.8rem, 3.6rem);
--font-size-subheading: clamp(1.8rem, 2vw + 0.6rem, 2.4rem);
--font-size-caption: clamp(1.2rem, 1vw + 0.4rem, 1.4rem);

/* 行間 */
--line-height-base: 1.8;
--line-height-heading: 1.3;
--line-height-caption: 1.4;

/* 装飾 */
--shadow-primary: 5px 5px 20px 5px rgba(30, 38, 30, 0.6);
--shadow-box: 5px 5px 10px rgba(69, 69, 69, 0.2);

}

/* Body
========================================== */
html{}
html, body {
	width: 100%;
	font-size: 62.5%;
	overflow-x: clip; /*sticky用*/
}
body {
	line-height: var(--line-height-base);
	background-color: #fff;
	font-size: var(--font-size-body);
	font-family: var(--font-primary);
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	color: var(--text-primary);
}
body.is-home{
}

@media screen and (max-width: 599px) {
	body {word-wrap: break-word;font-size: 1.5rem;}
}



/* header
========================================== */
.header{
	height: 120px;
}
.headerArea{
	z-index: 1200;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color:#fff;
	display: flex;
	justify-content: space-between;
}

.headerLogo{max-width: 108px;}
.headerLogo a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	line-height: 1.3;
	text-decoration: none;
	padding-left: 20px;
}
.headerLogo img {
	width: 100%;
	height: auto;
}
.headerLogo a:hover{opacity: 0.7;transition: 0.3s;}

.headerArea .inner{
	display: flex;
	justify-content: flex-end;
	gap: 0 40px;
}

.headerArea .naviWrap{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 120px;
	padding-bottom: 10px;
}
.headerArea .infoWrap{
	display: flex;
	justify-content: flex-end;
	gap: 1em;
}

.headerArea .infoWrap .address{
	padding-top: 1em;
	color: var(--text-secondary);
}

.headerArea .infoWrap .telWrap{
	line-height: 1.3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap:0 1em;
	padding: 5px 10px;
	background-color: var(--text-secondary);
	border-radius: 0 0 5px 5px;
	color: #fff;
	font-weight: 600;
}
.headerArea .infoWrap .telWrap .item{
	display: flex;
	justify-content: space-between;
}
.headerArea .infoWrap .telWrap .tel{
	width: 9em;
	font-size: 1.8rem;
	letter-spacing: 1px;
}

.headerNavi ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	list-style: none;
	gap: 0 2.5em;
}
.headerNavi ul li {position: relative;}
.headerNavi ul li a {
	position: relative;
	display: block;
	padding: .5em 0;
	color:var(--text-primary);
	font-weight: 900;
	font-size: var(--font-size-caption);
	text-decoration: none;
	transition: .3s;
}
.headerNavi ul li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: var(--color-primary);
	transition: .3s;
}

.headerNavi ul li a:hover{color: var(--color-primary);}
.headerNavi ul li a:hover::after{
	width: 100%;
}
.headerContact a{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:1em 2em;
	background-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
	text-align: center;
	height: 100%;
	transition: 0.3s;
}
.headerContact a:hover{
	background-color: var(--color-accent);
	color: var(--text-primary);
}


.spMenuWrap{display: none;}
.spBtn,
.spMenu,
.overlay {
	opacity: 0;
	pointer-events: none;
}


@media screen and (max-width:1200px){
	.headerArea .inner{gap: 0 20px;}
	.headerArea .infoWrap{font-size: var(--font-size-caption);}
	.headerArea .infoWrap .telWrap .tel{font-size: 1.6rem;}
	.headerNavi ul{gap: 0 1.5em;}
	.headerNavi ul li a{padding: 0;}
	.headerContact a{font-size: var(--font-size-caption);white-space: nowrap;}
}

@media screen and (max-width:840px){
	.header,
	.headerArea{height: 50px;}
	.headerArea .inner{display: none;}
	.headerLogo{max-width: 100%;}
	.headerLogo a{padding-left: 10px;}
	.headerLogo img{width: auto;height: 30px;}


	.spMenuWrap{display: block;}
	.spBtn{
		opacity: 1;
		pointer-events: auto;
		position:fixed;
		top: 0;
		right: 0;
		display: inline-block;
		width: 50px;
		height:50px;
		padding: 16px 12px 18px;
		cursor: pointer;
		z-index: 2000;
		transition: .2s ease;
	}
	.spBtn div {position: relative;}
	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background:var(--color-primary);
		left: 0;
		transition: .2s ease;
	}
	.spBtn span:nth-child(1) {top: 0;}
	.spBtn span:nth-child(2) {top: 8px;}
	.spBtn span:nth-child(3) {top: 16px;}
	.spBtn.active span{background-color: #fff;}
	.spBtn.active span:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.spBtn.active{
		background-color: var(--color-primary);
	}
	.spBtn.active span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.spBtn.active span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.spMenu{
		overflow-y: auto;
		-webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
		position: fixed;
		top: 0; right: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: var(--color-primary);
		transition: transform 0.3s ease;
		padding: 60px clamp(20px, 5vw, 30px);
	}
	.spMenu.active{
		opacity: 1;
		pointer-events: auto;
	}
	.spMenu::-webkit-scrollbar{width: 10px;}
	.spMenu::-webkit-scrollbar-track{background: transparent;}
	.spMenu::-webkit-scrollbar-thumb {background: transparent;}

	.spNavi{
		margin-bottom:30px;
	}
	.spNavi li{
		border-bottom: 1px solid var(--color-secondary);
	}
	.spNavi li a{
		position: relative;
		display: block;
		padding:15px 35px 15px 15px;
		font-optical-sizing: auto;
		font-size: 1.5rem;
		font-weight: 500;
		color:#fff;
		text-decoration: none;
	}
	.spNavi li a::after{
		content:"";
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		mask-image: url("assets/img/icon_arrow.svg");
		-webkit-mask-image: url("assets/img/icon_arrow.svg");
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: contain;
		-webkit-mask-size: contain;
		background-color: currentColor;
		transition: 0.3s;
	}

	.spNavi li a:hover{text-decoration: underline;}

	.spContact{
		margin: 0 auto 30px;
		max-width: 300px;
	}
	.spContact a{
		display: block;
		padding: 1em 2em;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		border-radius: 5px;
		background-color:var(--color-accent);
		font-family: var(--font-secondary);
		font-size: var(--font-size-accent);
		font-weight: 800;
		color:var(--text-primary);
		transition: 0.3s;
	}
	.spContact a:hover{
		background-color:#fff;
	}
	.spInfo{
		margin-bottom: 20px;
		text-align: center;
		color: #fff;
	}
	.spInfo .spCompany{margin-bottom:10px;}
	.spInfo .spCompany a{
		display: block;
		color: #fff;
		text-decoration: none;
		font-weight: 800;
	}
	.spInfo .spTel{margin-top: 1em;}
	.spInfo .spTel a{
		line-height: 1.3;
		display: block;
		width: fit-content;
		margin: 0 auto;
		text-decoration: none;
		font-size:var(--font-size-heading);
		font-family: var(--font-number);
		color: #fff;
	}
}

/* contents
========================================== */
.contents {
	margin: 0 auto;
	width: 100%;
}
.contents p+p {margin-top: 1.5em;}
.contentsInner {
	margin: 0 auto;
	width: 1200px;
}

@media screen and (max-width:1200px) {
	.contentsInner {
		width: 100%;
		padding: 80px clamp(20px, 5vw, 30px);
	}
}

@media screen and (max-width:840px) {
	.contentsInner {
		width: 100%;
		padding: 60px clamp(20px, 5vw, 30px);
	}
}

/* mv
========================================== */
.mvArea {
	z-index: 1;
	position: relative;
	width: 100%;
	margin-bottom: 100px;
}
.mvArea .mvSlider img{
	width: 100%;
	height: auto;
}
.mvArea .swiper-rtl {
	direction: rtl;
}
.mvNews{
	display: flex;
	align-items: center;
	gap: 20px;
	z-index: 10;
	position: absolute;
	top: 20px;
	left: 0;
	width:62.5%;
	padding: 1em;
	padding-left:11.875%;
	background-color: #fff;
	border-radius: 0 5px 5px 0;
}
.mvNews .label{
	padding-right: 20px;
	font-weight: 800;
	font-family: var(--font-english);
	font-size: var(--font-size-accent);
	color: var(--color-primary);
	border-right:1px solid var(--border-color);
}
.mvNews .news{
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1em;
	min-width: 0;
}
.mvNews .news .date{
	width: 6em;
	color: #8c8c8c;
	font-family: var(--font-number);
}
.mvNews .news .category{
	line-height: 1;
	width: 7em;

}
.mvNews .news .category a{
	line-height: 1.2;
	display: block;
	padding: 0.3em .5em;
	font-size: 1.4rem;
	text-align: center;
	text-decoration: none;
	background-color: var(--bg-blue);
	color: #fff;
	transition: 0.3s;
}
.mvNews .news .category a:hover{
	background-color: var(--color-accent);
	color: var(--text-primary);
}
.mvNews .news .title{
	flex: 1;
	min-width: 0;}
.mvNews .news .title a{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	position: relative;
	padding-right:40px;
	font-weight: 600;
	text-decoration: none;
}

.mvNews .news .title a::after{
	content:"";
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	mask-image: url("assets/img/icon_arrow.svg");
	-webkit-mask-image: url("assets/img/icon_arrow.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color: var(--color-primary);
	transition: 0.3s;
}
.mvNews .news .title a:hover{text-decoration: underline;color: var(--color-primary);}
.mvNews .news .title a:hover::after{right: 0;}

@media screen and (max-width:1200px) {
	.mvArea {
		margin-bottom: 0;
	}
}
@media screen and (max-width:1024px) {
	.mvNews{display: none;}
}

/* 理由
========================================== */
.reasonWrap{
	z-index: 10;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 50%);
	bottom: 0;
	width: 100%;
	max-width: 1200px;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:3%;
}
.reasonWrap .item{
	padding: 2em;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
}

.reasonWrap .item .icon{
	margin-bottom: 20px;
	text-align: center;
}
.reasonWrap .item .icon img{
	max-width: 100%;
	height: auto;
}
.reasonWrap .item .title{
	line-height: var(--line-height-heading);
	margin-bottom: 1em;
	padding-bottom: 1em;
	font-size: var(--font-size-subheading);
	font-weight: 800;
	color: var(--color-primary);
	text-align: center;
	line-break: strict;
	overflow-wrap: break-word;
	border-bottom: 1px solid var(--border-color);
}
.reasonWrap .item .title span{
	margin: 0 .2em;
	padding: 0 .2em;
	background-color: var(--color-accent);
}
.reasonWrap .item .catch{
	font-size: var(--font-size-accent);
	font-weight: 800;
	color:#556c9f;
	text-align: center;
	line-break: strict;
	overflow-wrap: break-word;
}
.reasonWrap .item .catch span{display: inline-block}
.reasonWrap .item .text{
	margin-top: 10px;
	font-weight: 600;
	text-align: center;
	line-break: strict;
	overflow-wrap: break-word;
}
.reasonWrap .item .text span{display: inline-block}

@media screen and (max-width:1200px) {
	.reasonWrap{
		position: static;
		transform: translate(0);
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap:3%;
		margin-top: 30px;
		padding: 0 clamp(20px, 5vw, 30px);
	}
}
@media screen and (max-width:840px) {
	.reasonWrap{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap:20px;
	}
	.reasonWrap .item{width: calc((100% - 20px)/2);}
	.reasonWrap .item{padding: 1.5em;}
}
@media screen and (max-width:599px) {
	.reasonWrap .item{width:100%;}
	.reasonWrap .icon{display: none;}

}

/* お悩み 下層共通
========================================== */
.worryArea{
	padding: 100px 0;
}
.worryTitle{
	line-height: var(--line-height-heading);
	margin-bottom: 2em;
	font-size:var(--font-size-heading);
	font-weight: 800;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.worryTitle em{font-size:140%;}
.worryText{
	line-height: var(--line-height-heading);
	margin-bottom: 2em;
	font-size:clamp(2.2rem, 3vw + 0.8rem, 3rem);
	font-weight: 800;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.worryTitle em,
.worryText em{font-size:140%;}


.worryWrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px 8%;
	margin-bottom: 80px;
}
.worryWrap .item {
	width: calc((100% - 8%*2)/3);
}
.worryWrap .item .icon{
	margin-bottom: 20px;
	text-align: center;}
.worryWrap .item .icon img{
	max-width: 100%;
	height: auto;
}
.worryWrap .item .text {
	line-height: var(--line-height-heading);
	font-size:var(--font-size-subheading);
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.worryWrap .item .text .accent {
	color: var(--color-primary);
	font-weight: 900;
}

@media screen and (max-width:1200px) {
	.worryArea{padding: 0;}
}

@media screen and (max-width:599px) {
	.worryWrap{
		flex-direction: column;
		gap: 0;
		margin-bottom: 30px;
	}
	.worryWrap .item{
		width: 100%;
	}
	.worryWrap .item:not(:first-of-type) .icon{
		display: none;}
	.worryWrap .item .icon img{
		max-width: 40%;
		height: auto;
	}
	.worryWrap .item .text{
		position: relative;
		margin-bottom: 1em;
		padding-left: 20px;
		text-align: left;
	}
	.worryWrap .item .text::before{
		content: "";
		position: absolute;
		top: 0.5em;
		left:0;
		background-color: var(--color-secondary);
		width: 10px;
		height: 10px;
		border-radius: 9999px;
	}
	.worryWrap .item .text br{
		display: none;
	}
}


/* サービス
========================================== */
.serviceArea{
	padding: 100px 0;
	background-color: var(--bg-grey);
}

.serviceWrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	margin-bottom: 60px;
}

.serviceWrap .item{
	width: calc((100% - 30px*3)/4);
	filter: drop-shadow(var(--shadow-box));
}
.serviceWrap .item a{
	display: block;
	text-decoration: none;
	text-align: center;
}
.serviceWrap .item a .serviceName{
	line-height: 1.5;
	color: var(--text-primary);
	font-size: var(--font-size-accent);
	font-weight: 800;
}
.serviceWrap .item .icon{
	text-align: center;
}
.serviceWrap .item .icon img {
	max-width: 100%;
	height: auto;
}
.serviceWrap .item .image{
	margin-bottom: 20px;
}
.serviceWrap .item .image img{
	max-width: 100%;
	height: auto;
}
.serviceWrap .item .itemBody{
	position: relative;
	padding:1em 2em 3em;
	background-color: #fff;
	border-radius: 5px;
	text-align: center;
}
.serviceWrap .item .itemBody::after{
	content: "";
	position: absolute;
	right:8px;
	bottom: 8px;
	width: 20px;
	height: 20px;
	mask-image: url("assets/img/icon_arrow.svg");
	-webkit-mask-image: url("assets/img/icon_arrow.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color:var(--color-primary);
	transition: .3s;
}

.serviceWrap .item a:hover .itemBody::after{right: 3px;}
.serviceWrap .item a:hover .serviceName{
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
	transition: .3s;
}

@media screen and (max-width:1200px) {
	.serviceArea{padding: 0;}
	.serviceWrap .item{
		width: calc((100% - 30px*2)/3);
	}
}

@media screen and (max-width:840px) {


}

@media screen and (max-width:599px) {
	.serviceWrap{
		flex-wrap:nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 0 calc(50% - 125px) 30px;
		gap: 20px;
	}
	.serviceWrap .item{
		width: auto;
		flex: 0 0 250px;
		scroll-snap-align: center;
		filter:none;
	}
	.serviceWrap::-webkit-scrollbar{height: 10px;}
	.serviceWrap::-webkit-scrollbar-track{background: #fff;}
	.serviceWrap::-webkit-scrollbar-thumb {background: var(--color-accent);}
}

/* 事例
========================================== */
.worksArea{
	padding: 100px 0;
}
.worksArea .catch{
	display: block;
	margin: 1em 0;
	text-align: center;
	font-size: var(--font-size-accent);
	font-weight: 800;
	color: #8c8c8c;
}

.worksWrap{
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	gap: 40px 4%;
	padding-top: 30px;
	margin-bottom: 60px;
}

.worksWrap .item{
	width: calc((100% - 4%*2)/3);
}
.worksWrap .item a{
	position: relative;
	display: block;
	padding: 2em 2em 40px;
	outline:1px solid var(--color-primary);
	border-radius: 5px;
	background-color: #fff;
	box-sizing: border-box;
	text-decoration: none;
	transition: .3s;
}
.worksWrap .item a::after{
	content: "";
	position: absolute;
	right:8px;
	bottom: 8px;
	width: 20px;
	height: 20px;
	mask-image: url("assets/img/icon_arrow.svg");
	-webkit-mask-image: url("assets/img/icon_arrow.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color:var(--color-primary);
	transition: .3s;
}

.worksWrap .item .title{
	line-height: var(--line-height-heading);
	margin: 0 auto 1em;
	padding:0 .5em .8em;
	border-bottom: 1px solid var(--color-primary);
	text-align: center;
	font-size: var(--font-size-accent);
	font-weight: 800;
	color: var(--color-primary);
}
.worksWrap .item .title span{display: inline-block;}
.worksWrap .itemBody{
	display: flex;
	justify-content: space-between;
	gap: 1em;
}
.worksWrap .itemBody .icon{width: 40%;text-align: center;}
.worksWrap .itemBody .text{width: 60%;}
.worksWrap .itemBody .icon img{max-width: 100%;height: auto;}

.worksWrap .item a:hover{
	outline:3px solid var(--color-accent);
}
.worksWrap .item a:hover::after{right: 3px;}

@media screen and (max-width:1200px) {
	.worksArea{padding: 0;}
	.worksWrap .itemBody{
		flex-direction: column;
		gap: 1em;
	}
	.worksWrap .itemBody .icon{width: 100%;}
	.worksWrap .itemBody .text{width: 100%;}
}

@media screen and (max-width:840px) {
	.worksWrap{gap: 30px 4%;}
	.worksWrap .item{
		width: calc((100% - 4%)/2);
	}
}

@media screen and (max-width:599px) {
	.worksArea .catch{text-align: left;}
	.worksWrap{
		flex-wrap:nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 30px calc(50% - 125px);
		gap: 20px;
	}
	.worksWrap .item{
		width: auto;
		flex: 0 0 250px;
		scroll-snap-align: center;
		filter:none;
	}
	.worksWrap .item a{
		outline:none;
		border: 1px solid var(--color-primary);
	}
	.worksWrap .item a:hover{outline:none;border-color: var(--color-accent);}
	.worksWrap::-webkit-scrollbar{height: 10px;}
	.worksWrap::-webkit-scrollbar-track{background: var(--bg-grey);}
	.worksWrap::-webkit-scrollbar-thumb {background: var(--color-accent);}
}


/* 会社案内
========================================== */
.companyArea{
	padding: 100px 0;
	background-color: var(--bg-grey);
}
.companyArea .contentsInner{
	display: flex;
	align-items: center;
	gap:30px 60px;
}

.companyArea .contentsInner .textBlock{width: 50%;}
.companyArea .contentsInner .imageBlock{width: 50%;text-align: center;}
.companyArea .contentsInner .imageBlock img{max-width: 100%;height: auto;}

@media screen and (max-width:1200px) {
	.companyArea{padding: 0;}
}

@media screen and (max-width:599px) {
	.companyArea .contentsInner{
		flex-direction: column;
	}
	.companyArea .contentsInner .textBlock{width: 100%;}
	.companyArea .contentsInner .imageBlock{width: 100%;}
	.companyArea .btnLink{text-align: center;}
}

/* 品質管理
========================================== */
.factoryArea{
	padding: 100px 0;
}
.factoryArea .contentsInner{
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	gap:30px 60px;
}

.factoryArea .contentsInner .textBlock{width: 50%;}
.factoryArea .contentsInner .imageBlock{width: 50%;text-align: center;}
.factoryArea .contentsInner .imageBlock img{max-width: 100%;height: auto;}

@media screen and (max-width:1200px) {
	.factoryArea{padding:0;}
}

@media screen and (max-width:599px) {
	.factoryArea .contentsInner{
		flex-direction: column;
	}
	.factoryArea .contentsInner .textBlock{width: 100%;}
	.factoryArea .contentsInner .imageBlock{width: 100%;}
	.factoryArea .btnLink{text-align: center;}
}

/* お知らせ
========================================== */
.newsArea{
	padding: 100px 0;
	background-color: var(--bg-grey);
}
.newsArea .contentsInner{
	display: grid;
	grid-template-columns: fit-content(100%) 1fr;
	gap:3em 4em;
}
.newsArea .contentsInner .titleBox{width: fit-content;padding: 0 2em;}
.newsArea .contentsInner .textBox{}
.newsList li{
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap:0 2em;
	padding:1.5em 1em;
	border-bottom: 1px solid var(--border-color);
}
.newsList li .date{
	width: 6em;
	color: #8c8c8c;
	font-family: var(--font-number);
}
.newsList li .category{
	line-height: 1;
	width: 8em;

}
.newsList li .category a{
	line-height: 1.2;
	display: block;
	padding: 0.3em .5em;
	font-size: 1.4rem;
	text-align: center;
	text-decoration: none;
	background-color: var(--bg-blue);
	color: #fff;
	transition: 0.3s;
}
.newsList li .category a:hover{
	background-color: var(--color-accent);
	color: var(--text-primary);
}
.newsList li .title{width: calc(100% - 15em);}
.newsList li .title a{
	display: block;
	position: relative;
	padding-right:40px;
	text-decoration: none;}

.newsList li .title a::after{
	content:"";
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	mask-image: url("assets/img/icon_arrow.svg");
	-webkit-mask-image: url("assets/img/icon_arrow.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color: var(--color-primary);
	transition: 0.3s;
}
.newsList li .title a:hover{text-decoration: underline;color: var(--color-primary);}
.newsList li .title a:hover::after{right: 0;}

@media screen and (max-width:1200px) {
	.newsArea{padding: 0;}
}

@media screen and (max-width:1024px) {
	.newsList li{
		flex-wrap: wrap;
	}
	.newsList li .title{width: 100%;margin-top: 1.5em;}
}

@media screen and (max-width:840px) {
	.newsArea .contentsInner{
		display: flex;
		flex-direction: column;
		gap:1em;
	}
	.newsArea .contentsInner .titleBlock{
		display: contents;
	}
	.newsArea .contentsInner .ttlMain{order: 1;}
	.newsArea .contentsInner .btnLink{order: 3;margin-top: 2em;}
	.newsArea .contentsInner .newsBlock{order: 2;}

}


/* お問い合わせ
========================================== */
.topContactArea{
	padding: 100px 0;
	background-color: var(--bg-blue);
}
.contactTitle{
	letter-spacing: 1px;
	margin-bottom: 2em;
	text-align: center;
	font-weight: 800;
	font-size: var(--font-size-heading);
	color: #fff;
}
.contactTitle .line{
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness:10px;
	text-underline-offset: 7px;
}
.topContacWrap{
	margin: 60px 0;
	display: grid;
	grid-template-columns: repeat(4,1fr);
}
.topContacWrap .item{
	padding: 2em 1em;
	border-right: 1px solid #556c9f;
}
.topContacWrap .item:last-child{
	border: none;
}
.topContacWrap .item .icon{
	margin-bottom: 20px;
	text-align: center;
}
.topContacWrap .item .icon img{
	max-width: 100%;
	height: auto;
}
.topContacWrap .item h3{
	line-height: var(--line-height-heading);
	text-align: center;
	color: #fff;
	font-size: var(--font-size-subheading);
	font-weight: 800;
}

.topContactLink{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 60px;
	padding: 0 6%;
}
.topContactLink .mailLink a,
.topContactLink .telLink a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 80px;
	background-color: var(--color-accent);
	border-radius: 5px;
	font-weight: 800;
	text-decoration: none;
	text-align: center;
}
.topContactLink .mailLink a{
	position: relative;
	padding: 1em 30px;
	font-size: var(--font-size-accent);
	transition: .3s;
}
.topContactLink .mailLink a::after{
	content:"";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	mask-image: url("assets/img/icon_arrow.svg");
	-webkit-mask-image: url("assets/img/icon_arrow.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color: currentColor;
	transition: 0.3s;
}
.topContactLink .mailLink a:hover{
	background-color:#fff;
}
.topContactLink .mailLink a:hover::after{
	right: 15px;
}

.topContactLink .telLink a{
	letter-spacing: 1px;
	word-wrap: nowrap;
	padding: 1em 0;
	font-family: var(--font-number);
	font-size: var(--font-size-heading);
}

@media screen and (max-width:1200px) {
	.topContactArea{padding: 0;}
}

@media screen and (max-width:1024px) {
	.topContactLink{
		gap: 30px;
		padding: 0;
	}
}
@media screen and (max-width:599px) {
	.topContacWrap{
		gap: 15px;
		grid-template-columns: repeat(1,1fr);
		margin: 0 auto 30px;
		width: fit-content;
	}
	.topContacWrap .item{
		display: flex;
		align-items: center;
		gap: 1em;
		padding: 0;
		border-right: none;
	}

	.topContacWrap .item .icon{
		margin-bottom: 0;
		width: 50px;
		text-align: center;
	}
	.topContacWrap .item .icon img{
		max-width: 100%;
		height: auto;
	}
	.topContacWrap .item h3 br{
		display: none;
		text-align: left;
	}

	.topContactLink{
		grid-template-columns: repeat(1,1fr);
		gap: 20px;
	}
}


/* 採用情報
========================================== */
.recruitArea{
	position: relative;
	padding: 80px 0;
	background:url(assets/img/recruit_bg.jpg)center bottom /cover no-repeat;
}
.recruitArea .recruitImage{display: none;}
.recruitArea .recruitInner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}
.recruitArea .recruitInner .boxSide {
	text-align: center;
}
.recruitArea .recruitInner .boxSide img{
	max-width: 100%;
	height: auto;
}

.recruitArea .recruitInner .boxMain {
}
.recruitArea .recruitInner .boxMain .catch{
	line-height: var(--line-height-heading);
	padding: .3em .5em;
	margin: 0 auto 2em;
	width: fit-content;
	background-color: #fff;
	text-align: center;
	color: var(--color-primary);
	font-weight: 800;
	font-size: var(--font-size-accent);
}
.recruitArea .recruitInner .boxMain .text{
	line-height:1.8;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
	font-weight: 800;
}
.recruitArea .recruitInner .btnLink a:hover{
	background-color: #fff;
}

@media screen and (max-width:1024px) {
	.recruitArea .recruitImage{
		position: absolute;
		top: 20px;
		right: 10px;
		display: block;
		width: 24%;
	}
	.recruitArea .recruitImage img{
		width: 100%;
		height: auto;
	}
	.recruitArea .recruitInner {
		display: block;
		padding: 0 clamp(20px, 5vw, 30px);
	}
	.recruitArea .recruitInner .boxSide {display: none;}
	.recruitArea .recruitInner .boxMain .text{
	}
}
@media screen and (max-width:599px) {
	.recruitArea .ttlMain.center{margin-left: auto;}
}



/* footer
========================================== */
footer {width: 100%;}
.footerWrap {
	margin: 0 auto;
	padding:100px 30px 30px;
	max-width: 1200px;
}
.footerLogo {
	margin: 0 auto 50px;
	width: 200px;
}
.footerLogo{
	text-align: center;
}
.footerLogo a{display: block;}
.footerLogo img{
	max-width: 100%;
	height: auto;
}
.footerLogo a:hover img{
	opacity: .6;
	transition: .3s;
}

.footerNaviWrap{
	display: flex;
	justify-content:space-between;
	gap:2em 3em;
	margin-bottom: 60px;
}
.footerNavi li + li{margin-top: 1.5em;}
.footerNavi > li{
	position: relative;
	min-height: 20px;
	line-height: 1.2;
	padding-left: 30px;
	font-weight: 800;
	color: var(--text-secondary);
}
.footerNavi > li::before{
	content:"";
	position: absolute;
	left: 0;
	top: 0;
	background: url("assets/img/icon_arrow.svg") right top/contain no-repeat;
	width: 20px;
	height: 20px;
	transition: 0.3s;
}
.footerNavi > li > a{
	position: relative;
	text-decoration: none;
	font-weight: 800;
	color: var(--color-primary);
}
.footerNavi li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: var(--color-primary);
	transition: .3s;
}
.footerNavi li a:hover::after{
	width: 100%;
}

.footerNavi li ul{margin-top: 1.5em;}
.footerNavi li ul li a{
	position: relative;
	text-decoration: none;
	color: #8c8c8c;
}

.footerInfo{
	text-align: center;
}
.footerInfo .footerCompany{
	font-weight: 800;
}
.footerInfo .footerTel a{
	font-weight: 800;
	font-family: var(--font-number);
	font-size: var(--font-size-subheading);
}
.footerInfo .footerAward{
	margin: 15px 0;
	font-size:1.2rem;
}
.footerInfo .footerAward img{
	margin-bottom: 10px;
	border: 1px solid var(--border-color);
}

.copyright {
	margin: 0 auto;
	padding:2rem 1rem;
	text-align: center;
	font-size: 1.2rem;
	font-family: var(--font-number);
}

.footerSpContact{display: none;}

@media screen and (max-width: 1200px) {
	.footerWrap {
		padding:60px clamp(20px, 5vw, 30px) 30px;
	}
	.footerNaviWrap{
		display: block;
		flex-wrap: wrap;
		column-count: 3;
	}
	.footerNaviWrap .footerNavi{break-inside: avoid;margin-bottom: 20px;}

}
@media screen and (max-width: 840px) {

}

@media screen and (max-width: 599px) {
	footer{padding-bottom:60px;}
	.footerNaviWrap{column-count: 2;}
	.footerSpContact{
		display: block;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		height: 55px;
		display: flex;
		align-items: center;
	}
	.footerSpContact .mailLink,
	.footerSpContact .telLink{
		width: 50%;
	}
	.footerSpContact a{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 55px;
		padding:.6em .6em;
		line-height: 1.2;
		background-color: var(--color-primary);
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-family: var(--font-secondary);
	}
	.footerSpContact .telLink a{
		font-family: var(--font-number);
		font-size: 2rem;
		background-color: var(--color-secondary);
	}
	.footerSpContact .mailLink br{display: none;}
}
@media screen and (max-width: 380px) {
	.footerSpContact .mailLink br{display:block;}

	.footerSpContact a{font-size: 1.4rem;}
	.footerSpContact .telLink a{font-size: 1.6rem;}
}

/* pageTop
========================================== */
#pageTop{
	position:fixed;
	line-height: 1;
	right:10px;
	bottom:20px;
	z-index: 100;}
#pageTop a{
	display: block;
	position:relative;
	box-sizing: border-box;
	font-size: 1.2rem;
	text-decoration: none;
	transition: all .3s;
	width: 45px;
	height: 45px;
	background: url("assets/img/pagetop.svg")left top/contain no-repeat;
	transform: rotate(-90deg);
}


#pageTop:hover a{opacity: 0.7;}

@media screen and (max-width: 599px) {
	#pageTop{display: none!important}
}