@charset "utf-8";
/*
Theme Name: kida-s
Author: YES-REFORM CO., LTD.
*/

/* Body
========================================== */
html, body{
	width: 100%;
	font-size:62.5%;/*10px*/
}
body {
	color:var(--txt-color);
	line-height:1.8;
	letter-spacing: 1px;
	font-size:1.6rem;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
	background-color: #f5f9fa;
}
@media screen and (max-width: 599px) {
	body{
		word-wrap:break-word;
		font-size:1.5rem;
	}
}
@media screen and (min-width: 841px) {.tablet {display:none!important;}}
@media screen and (min-width: 600px) {.sp {display:none!important;}}
@media screen and (max-width: 840px) {.pc {display:none!important;}}

/* header
========================================== */
.headerArea{
	position: relative;
	z-index: 1000;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
}
.headerArea::before {
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	padding-top:7.5%;
	display: block;
}

.headerArea::after {
	position: absolute;
	content: '';
	top: 0;
	left:0;
	display: block;
	width: 100%;
	height: 160px;
	background-image: url(images/header_bg.png);
	background-size: contain;
	background-repeat: no-repeat;
	filter: drop-shadow(2px 2px 5px rgba(60, 62, 72, 0.2));
}
.headerArea .inner{
	z-index: 2;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 2%;
	width:100%;
	height: 80px;
}
.headerLogo{line-height: 1;}
.headerLogo a{
	display: flex;
	align-items: center;
	text-decoration: none;
	font-weight: 700;
	color: var(--txt-color);}
.headerLogo img{max-width: 100%;height: auto;margin-right: 10px;}
.gnavWrap{
	display: flex;
	align-items: center;
}
.gnav ul{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-right: 1.5em;
	list-style: none;}

.gnav ul li+li{margin-left: 2em;}
.gnav ul li a{
	position: relative;
	line-height: 1.2;
	display: block;
	padding: 1em .5em;
	color: var(--txt-color);
	font-weight: 700;
	font-size: 1.4rem;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}
.gnav ul li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--main-color);
	transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}
.gnav ul li.current a,
.gnav ul li a:hover{color: var(--main-color);}
.gnav ul li a:hover::after{transform: scale(1, 1);}

.infoWrap{
	display: flex;
	align-items: center;
}
.headerInfo{
	line-height: 1.3;
	margin-right: 10px;
	text-align: center;}
.headerInfo .number{
	display: block;
	font-size: 2.4rem;
}

.headerContact{text-align: center;}
.headerContact a{
	overflow: hidden;
	position: relative;
	line-height: 1.3;
	display: inline-block;
	padding: 1em 2em 1em;
	background-color: var(--main-color);
	box-sizing: border-box;
	border-radius: 9999px;
	color: #fff;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
}
.headerContact a .text {
    z-index: 2;
    position: relative;
}
.headerContact a::before {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--point-color);
	transform: scaleX(0);
	transform-origin: right;
	transition: all 0.5s ease;
	transition-property: transform;
}
.headerContact a:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

.spBtn,
.spContact{display: none}
.drawerMenu{display: none;}

@media screen and (max-width:1600px){
	.headerArea::after {height: 120px;}
	.gnav ul li+li {margin-left: 1.5em;}
	.headerInfo .number{font-size: 2rem;}
}
@media screen and (max-width:1200px){
	.headerArea .inner{
		width:100%;
		padding: 0 10px;
	}
	.headerArea::after {
		background-size: cover;
		height: 80px;}
	.headerLogo a{font-size: 1.2rem;}
	.gnav ul li+li {margin-left: 1em;}
	.gnav ul li a {padding: 1em .3em;}
	.headerInfo .number{font-size: 1.8rem;}
	.headerContact a{
		padding: 1em;
		font-size: 1.4rem;
	}
}
@media screen and (max-width:1000px){
	.headerLogo .name{display: none;}
	.gnav ul li a {font-size: 1.2rem;}

}

@media screen and (max-width:840px){
	.headerArea{position: absolute;}
	.headerArea .inner{
		padding: 0 20px;
		height: 50px;
	}
	.headerArea::after {height: 60px;background-size: cover;}
	.headerLogo{padding-top:0;width: auto;}
	.headerLogo a{display: block;}
	.headerLogo img{height: 30px;width: auto;}
	.headerInfo,
	.headerContact,
	.gnav{display: none;}
	.drawerMenu{display: none;}
	.drawerMenu{
		z-index: 1001;
		overflow-y: scroll;
		position: fixed;
		top: 0px;
		left: 0px;
		display: none;
		padding:80px 20px 30px;
		width: 100%;
		height: 100%;
		background-color: #f5f9fa;
	}
	.drawerMenu.open{
		display: block;
		animation-name: fadeIn;
		animation-fill-mode:forwards;
		animation-duration:0.5s;}
	.drawerMenu::-webkit-scrollbar{
		width: 10px;
	}
	@keyframes fadeIn{
		from {
		opacity: 0;
		}
		to {
		opacity: 1;
		}
	}

	.drawerMenu::-webkit-scrollbar-track{background: #f5f9fa;}
	.drawerMenu::-webkit-scrollbar-thumb {background:#f5f9fa;}
	.gnavSp{
		margin-bottom: 40px;
		padding:10px 20px;
		background-color: #fff;
		border-radius: 10px;}

	.gnavSp > ul > li:not(:last-child){border-bottom:1px solid var(--border-color);}
	.gnavSp > ul > li a{
		position: relative;
		display: block;
		padding: 0.8em 1em;
		color: var(--txt-color);
		font-optical-sizing: auto;
		font-weight: 600;
		font-size: 1.6rem;
		text-decoration: none;
	}
	.gnavSpLink{
		display: flex;
		justify-content: center;
		margin-bottom: 5em;}

	.gnavSpLink li.requirements{margin-left: 1em;}
	.gnavSpLink li.recruit a,
	.gnavSpLink li.requirements a{
		display: block;
		padding: 1em 4em;
		background-color: var(--point-color);
		box-shadow: 2px 2px 3px rgba(60, 62, 72, 0.3);
		border-radius: 5px;
		color: var(--txt-color);
		font-weight: 500;
		text-decoration: none;
	}
	.gnavSpLink li.requirements a{background-color: var(--sub-color);}
	.gnavSpLink li.recruit a:hover,
	.gnavSpLink li.requirements a:hover{color: #fff;background-color: var(--main-color);}

	.spHeaderLogo{margin-bottom: 20px;text-align: center;}
	.spHeaderLogo img{max-width: 100%;height: auto;}
	.spAddress{
		margin-bottom: 15px;
		line-height: 1.2;
		text-align: center;}
	.spTel{text-align: center;}
	.spTel a{
		line-height: 1.2;
		letter-spacing: 1px;
		display: block;
		font-size: 3rem;
		font-family: "Abel", sans-serif;
		font-weight: 400;
		font-style: normal;
		text-decoration: none;
		}

	.spBtn{
		position:fixed;
		top: 10px;
		right: 10px;
		display: inline-block;
		width: 50px;
		height:50px;
		padding: 20px 13px 15px;
		border-radius: 5px;
		background-color: var(--main-color);
		cursor: pointer;
		z-index: 2000;
	}
	.spBtn::after{
		position: absolute;
		left: 0;
		top: 3px;
		content: "MENU";
		text-align: center;
		width: 50px;
		font-size: 8px;
		color: #fff;
	}
	.spBtn.open::after{content: "CLOSE";}

	.spBtn div {position: relative;}
	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background:#fff;
		left: 0;
		-webkit-transition: .3s ;
		-moz-transition: .3s;
		transition: .3s;
	}
	.spBtn span:nth-child(1) {top: 0;}
	.spBtn span:nth-child(2) {top: 8px;}
	.spBtn span:nth-child(3) {top: 16px;}
	.spBtn.open span:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.spBtn.open span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.spBtn.open span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.spContact{
		position:fixed;
		top: 0;
		right: 50px;
		display: inline-block;
		width: 50px;
		height:50px;
		background-color:var(--main-color);
		cursor: pointer;
		z-index: 2000;
	}
	.spContact a{
		display: block;
		position: relative;
		height: 100%;}
	.spContact img{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40px;height: 40px;}
}
@media screen and (max-width:599px){
	.gnavSpLink li{width: 48%;}
	.gnavSpLink li.recruit a,
	.gnavSpLink li.requirements a{
		display: block;
		width: 100%;
		padding: 1em 2em;
		text-align: center;}
}

/* mv
========================================== */
.mvArea{position: relative;}
.mvArea img{
	width: 100%;
	height: auto;
}
.mvText{
	position: absolute;
	left: 10%;
	top: 20%;
	width: 7.6875%;
}
.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%; /* 16:9比率 */
	overflow: hidden;
}

.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width:840px){
	.mvText{top:80px;}
}
@media screen and (max-width:599px){
	.mvText{top: 100px;width: 12%;}
}

/* contents
========================================== */
.contents{
	overflow: hidden;
	margin:0 auto 0;
	width:100%;}
.contents p+p{margin-top: 1.5em;}
.contentsInner{
	margin:0 auto;
	padding: 0;
	width:1200px;}
.bgBlue{background-color: var(--c-blue);padding: 6% 0;}
.contentsWrap{
	display: flex;
	justify-content: space-between;
}
.contentsWrap .main{width:78%;padding-right: 30px;}
.contentsWrap .side{width:22%;}

@media screen and (max-width:1200px){
	.contentsInner{
		width: 100%;
		padding: 0 30px;}
}
@media screen and (max-width:840px){
	.contentsWrap{display: block;}
	.contentsWrap .main{width:100%;padding: 0 0 50px;}
	.contentsWrap .side{width:100%;}
}
@media screen and (max-width:599px){
	.contentsInner{padding: 0 20px;}
}

/* 私たちについて
========================================== */
.aboutArea{
	display: flex;
	align-items: center;
	background-size:auto 100%;
	background-repeat: no-repeat;
	background-image: url(images/about_bg.jpg);
	background-position: 50%;
	min-height: 1100px;
	aspect-ratio: 1600/1010;
	width: 100%;
}
.aboutArea .aboutWrap{
	display: flex;
	align-items: center;
	gap:6%;
	margin: 0 auto;
	max-width: 960px;
}
.aboutArea .aboutWrap .textBox .text{font-weight: 700;font-size: clamp(1.5rem,1.786vw,1.8rem);}
.aboutArea .aboutWrap .textBox .title{
	line-height: 1.3;
	margin-bottom: 1em;
	font-size: clamp(1.8rem,3.005vw,2.6rem);
	font-weight: 700;
	color: var(--main-color);}


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

@media screen and (max-width:840px){
	.aboutArea .aboutWrap{
		display: block;
		max-width: 960px;
	}
}
@media screen and (max-width:599px){
	.aboutArea{
		margin-bottom: 30px;
		padding: 50px 5%;
		background-image: url(images/about_bg_sp.jpg);
		background-size: cover;
		min-height: auto;
		aspect-ratio: auto;
	}
}

/* 強み
========================================== */
.strengthArea{
	background-size:auto 100%;
	background-repeat: no-repeat;
	background-image: url(images/strength_bg.jpg);
	background-position: 50%;
	background-size: cover;
	aspect-ratio: 1600/1130;
}
.strengthWrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 10%;
	max-width: 1200px;
	margin: 0 auto;
}

.strengthWrap .titleMain{
	position: relative;
	z-index: 2;
	padding-right: 7%;
}
.strengthWrap .titleMain::after{
	position: absolute;
	z-index: -1;
	content: "";
	right:0;
	top: 50%;
	transform: translateY(-50%);
	background-color: #fff;
	box-shadow: 5px 5px 10px rgba(31, 36, 50, 0.1);
	border-radius: 9999px;
	width: 1000px;
	aspect-ratio: 1/1;
}
.strengtList{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:60px 30px;
	max-width: 900px;
}
.strengtList dl{
	display: flex;
	flex-direction: column;
	width: calc((100% - 60px)/3);
	filter: drop-shadow(3px 3px 5px rgba(31, 36, 50, 0.1));
}
.strengtList dt{
	line-height: 1.5;
	position: relative;
	background: url(images/strengthlist_bg.png) center top /cover no-repeat;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 30px;
	font-size: 1.8rem;
	color: var(--main-color);
}
.strengtList dt::after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 20%;
	height: 1px;
	background-color: var(--border-color);
}

.strengtList dt .icon{
	position: absolute;
	left: 50%;
	top: -25px;
	transform: translateX(-50%);
}
.strengtList dt .number{
	margin-bottom: 15px;
	color: #a1d3dd;
	font-size: 3rem;
	font-family: "Abel", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.strengtList dd{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1em;
	background-color: #fff;
	border-radius: 0 0 20px 20px;
}

@media screen and (max-width:1200px){
	.strengthWrap{
		margin-right: 0;
		padding: 5%;
	}
}

@media screen and (max-width:840px){
	.strengthArea {aspect-ratio: auto;background-image: none;}
	.strengthWrap{display: block;}
	.strengthWrap .titleMain{padding: 0;}
	.strengthWrap .titleMain::after{display: none;}
	.strengtList{margin-top: 70px;gap: 60px 20px;}
	.strengtList dl{width: calc((100% - 40px)/2);}
}
@media screen and (max-width:599px){
	.strengtList dl{width:100%;}
	.strengtList dd{padding: 1em 1.5em;}
	.strengtList dt {padding-top: 40px;}
	.strengtList dt .number{font-size: 4rem;margin-bottom: 15px;}
}

/* 製品情報
========================================== */
.productArea{}
.productWrap{
	display: flex;
	align-items:center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
}

.productSliderWrap{width: 43%;}
.productSlider{
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
	padding: 10px 10px 50px;
}
/*pagination*/
.productSlider .swiper-pagination{
	position: absolute;
	left: 0;
	bottom:0!important;
}
.productSlider .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	background-color: #ccc;
	opacity: 1;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.productSlider .swiper-pagination-bullet-active {background-color: #64aebd;}
.circle-card {
	width: 90vw;
	max-width: 600px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: white;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	margin: 0 auto;
}
.circle-card img {
	width: 60%;
	height: auto;
	object-fit: contain;
}
.circle-card p {
	margin-top: 10px;
}
.swiper-slide {
	display: flex;
	justify-content: center;
}
.productTextBox{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding:0 8%;
	background-color: var(--main-color);
	border-radius: 50%; 
	text-align: center;
	font-size: 1.5rem;
	color: #333;
	word-break: break-word;
	width: 50%;
	height: auto;
	min-width: 100px;
	min-height: 100px;
	aspect-ratio: 1 / 1;
}
.productTitle{
	display: flex;
	flex-direction: column;
	text-align: center;
	width: fit-content;
	margin-bottom: 2em;
}
.productTitle .en{
	margin: 10px 0;
	color: var(--point-color);
	font-size:clamp(2rem, 3vw, 2.6rem);
}
.productTitle .ja{
	margin: 0 auto;
	font-size:clamp(2rem, 3vw, 2.6rem);
	font-weight: 700;
	color: #fff;
}
.productTextBox p{
	text-align: left;
	color: #fff;}

@media screen and (max-width:840px){
	.productArea{
		padding:50px 5%;
		background-color: var(--main-color);
	}
	.productWrap{
		flex-direction: column;
	}
	.productTextBox{
		background-color: none;
		aspect-ratio: auto;
		margin-bottom: 30px;
		width: 100%;
		order:1;
	}
	.productSliderWrap{width: 100%;order: 2;}

}


/* 事業内容
========================================== */
.businessArea{
	background: url(images/business_bg.jpg) left bottom /cover no-repeat;
	aspect-ratio: 1600/1550;
}
.businessWrap{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 1040px;
	margin: 0 auto;
	padding: 10% 0 10%;
}
.businessBoxWrap{width: 80%;}
.businessBox{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.businessBox + .businessBox{margin-top: 6%;}
.businessBox .imgBox{width: 45.78313253012048%;}
.businessBox .imgBox img{
	width: 100%;
	height: auto;
	border-radius: 20px;}
.businessBox .txtBox{width: 44%;}

.businessBox.reverse .imgBox{order: 2;}
.businessBox.reverse .txtBox{order: 1;}

.businessTitle{
	line-height: 1.2;
	width: fit-content;
	padding:0.3em 0.8em;
	background-color: var(--main-color);
	color: #fff;
	border-radius: 5px;
}
.businessBox dl{
	line-height: 1.2;
	display: flex;
	align-items: center;
}
.businessBox dl dt{
	font-size: 6rem;
	font-family: "Abel", sans-serif;
	font-weight: 400;
	color: var(--sub-color);
}
.businessBox dl dd{
	padding-left: 1em;
	font-size: 2rem;
	font-size: clamp(1.8rem, 3.005vw,2rem);
	font-weight: 700;}
.businessBox dl dd .text-block{
	display: inline-block;
}

@media screen and (max-width:1200px){
	.businessWrap{
		padding: 15% 5% 10%;
	}
}
@media screen and (max-width:840px){
	.businessWrap{display: block;}
	.businessBoxWrap{width:100%;}
	.businessBox .txtBox{width: 50%;}
}


@media screen and (max-width:599px){
	.businessArea{background-image: none;}
	.businessBox{flex-direction: column;}
	.businessBox + .businessBox{margin-top: 30px;}
	.businessBox .imgBox,
	.businessBox .txtBox{width: 100%;}
	.businessBox .imgBox{margin-bottom: 20px;}
	.businessBox.reverse .imgBox{order: 1;}
	.businessBox.reverse .txtBox{order: 2;}

}

/* 修理動画
========================================== */
.repairArea{
	background-color: var(--sub-color);
	padding: 60px 0;
}
.repairWrap{
	max-width: 1200px;
	margin: 0 auto;
}

.repairWrap .nopost{
	margin: 5em 0;
	text-align: center;
}
.repairTitle{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 70px;
	padding: 0 20px;
	width: fit-content;
}
.repairTitle::after{
	content: "";
	position: absolute;
	left: 0;
	bottom:-40px;
	background: url(images/ttl_repair_brackets.png) left bottom/contain no-repeat;
	width: 100%;
	aspect-ratio: 850/71;

}
.repairTitle h2{
	line-height: 1.2;
	margin-bottom: 1em;
	text-align: center;
	color: var(--main-color);
	font-size:clamp(2.2rem, 3.673vw, 4rem);
	font-weight: 700;
}
.repairTitle h2 .en{
	display:block;
	margin-bottom: .5em;
	color: #fff;
	font-size:clamp(2rem, 3vw, 2.6rem);
}
.repairText{
	margin-bottom: 2em;
	text-align: center;
	font-weight: 700;
	font-size: clamp(1.6rem,1.669vw,2rem);
}
.repairText .text-block{display: inline-block;}
.repairList{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 50px;
	font-weight: 700;
}
.repairList li a{text-decoration: none;}

.repairList li .movie{
	position: relative;
	margin-bottom:20px;
	padding-bottom: 56.25%;
}
.repairList li .movie iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 15px;
}

.repairList li .category{
	width: fit-content;
	margin-bottom: 1em;
	padding: 0 1em;
	background-color: #fff;
	border-radius: 9999px;
}
.repairList li .title{font-size: clamp(1.6rem,1.669vw,2rem);}

.repairList.sub li .imgBox{box-sizing: border-box;border:1px solid #eee}
.repairList.sub li .category{background-color: var(--main-color); color: #fff;font-size: 1.4rem;}
.repairList.sub li .title{font-size: 100%;}

.repairLink{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 30px;
}
.repairLink li{
	width: 40%;
	text-align: center;
	font-weight: 700;
}
.repairLink li .btnMore a{display: block;}
.repairLink li .btnMore a:hover{color: var(--txt-color);}
.repairLink li a::before {background:#fff;}

@media screen and (max-width:1200px){
	.repairArea{
		padding: 60px 5% 80px;
	}
}
@media screen and (max-width:840px){
	.icon01{width: 30%;}
	.icon01 img{max-width: 100%;height: auto;}
	.icon02{display: none;}

	.repairList{
		display: flex;
		overflow-x: auto;
		gap: 16px;
		padding-bottom: 2em;
		-webkit-overflow-scrolling: touch; /* iOS用の慣性スクロール */}
	.repairList::-webkit-scrollbar{height: 10px;}
	.repairList::-webkit-scrollbar-track{background: #F1F1F1;}
	.repairList::-webkit-scrollbar-thumb {background: #BCBCBC;}
	.repairList li{
		flex: 0 0 auto; 
		width: 200px;}
	.repairLink li{
		width: 50%;}

	.repairList.sub{flex-wrap: wrap;gap: 20px;}
	.repairList.sub li{
		flex: 0 0 auto; 
		width: calc((100% - 20px)/2);}

	.repairLink{flex-direction: column;gap: 20px;}
	.repairLink li{max-width: 100%;margin: 0 auto;width: auto;}

}
@media screen and (max-width:599px){
	.repairText{text-align: left;}
	.repairText .text-block{display: inline;}


}


/* 課題解決ストーリー
========================================== */
.storyArea{
	position: relative;
	margin: 30px auto 60px;
	padding: 80px 0;
	max-width: 1200px;
}
.storyArea::before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 1600px;
    border-radius: 9999px;
    background-color: #fff;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	aspect-ratio: 1/1
}
.storyArea .titleMain .ja{;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
}
.storyArea .titleMain br{display: none;}
.storyCatch{
	text-align: center;
	font-size: clamp(2.2rem, 2.619vw, 4rem);
	color: var(--point-color);
}
.storyWrap{
	margin:0 auto;
	max-width: 1200px;
}
.storyList{
	display: grid;
	grid-auto-flow: column;             /* 横方向にアイテムを並べる */
	grid-auto-columns: minmax(250px, 1fr); /* 各列の最小幅は250px、最大1fr */
	gap: 50px;
	margin: 50px 0 0;
	overflow-x: auto;
	padding:10px 1rem 30px;
	-webkit-overflow-scrolling: touch; /* ← iOS Safariで慣性スクロールを有効化 */
}
.storyList::-webkit-scrollbar{height: 10px;}
.storyList::-webkit-scrollbar-track{background: #F1F1F1;}
.storyList::-webkit-scrollbar-thumb {background: #BCBCBC;}

.storyList li{
	position: relative;
	display: block;
	padding: 1.5em;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(60, 62, 72, 0.2);
	box-sizing: border-box;
	text-decoration: none;
	color: var(--txt-color);

}
.storyList li p{
	line-height: 1.5;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
}
.storyList li .number{
	line-height: 1.2;
	margin:0.6em 0;
	text-align: center;
	font-size: 2.8rem;
    font-family: "Abel", sans-serif;
    font-weight: 400;
    color: var(--point-color);
}
.storyList li .imgBox{margin-bottom: 20px;}
.storyList li .imgBox img{
	width: 100%;
	height: auto;}
.storyList li .btnMore a{min-width: auto;}

@media screen and (max-width:1200px){
	.storyWrap{
		padding: 0 5%;
		max-width: 100%;
	}
	.storyList{gap: 30px;}

}

@media screen and (max-width:840px){
	.storyArea .titleMain br{display: block;}
	.storyList li .number{font-size: 2rem;}
	.storyList li p{font-size: 1.8rem;}
}

/* 会社案内/工場案内
========================================== */
.linkArea{
	display: flex;
	gap: 60px;
	margin: 0 auto 80px;
	padding: 80px 0;
	width: 1200px;
}

.linkArea .company,
.linkArea .factory{
	position: relative;
	overflow: hidden;
	padding: 5%;
	background-color: #fff;
	box-shadow: 5px 5px 10px rgba(31, 36, 50,0.1);
	border-radius: 20px;
}
.linkArea .company::before,
.linkArea .factory::before{
	content: "";
	position: absolute;
	width: 50%;
	aspect-ratio: 1/1;
	top: 0;
	left: 0;
	transform: translate(-40%,-50%);
	background-color: #64aebd;
	border-radius: 9999px;
}

.linkArea .company .imgBox,
.linkArea .factory .imgBox{margin: 0 auto 1em;}

.linkArea .company .imgBox img,
.linkArea .factory .imgBox img{
	width: 100%;
	height: auto;
	border-radius: 10px;
}

@media screen and (max-width:1200px){
	.linkArea{
		gap: 30px;
		width: 100%;
		padding: 0 5%;
	}

}
@media screen and (max-width:599px){
	.linkArea{flex-direction: column;}
}

/* 採用情報
========================================== */
.recruitArea{
	position: relative;
	margin-bottom: 80px;
	padding: 80px 0;}
.recruitArea::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-image: url('images/recruit_bg.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio:16/10;
	z-index: -1; 
}
.recruitWrap{
	display: flex;
	align-items:self-end;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1200px;
	padding-left: 60px;
}

.recruitWrap .imgBox{width: 45%;}
.recruitWrap .imgBox img{
	max-width: 100%;
	height: auto;
	border-radius: 20px;
}
.recruitWrap .txtBox{width: 50%;}
.recruitWrap .txtBox .inner{
	padding: 8%;
	background-color: #fff;
	border-radius: 20px;
}

.recruitWrap .titleMain{
	position: relative;
}
.recruitWrap .titleMain::after{
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%,-50%);
	background-image: url(images/recruit_curcle.svg);
	background-size: cover;
	background-position: center;
	width: 700px;
	aspect-ratio: 1/1;
}

@media screen and (max-width:1200px){
	.recruitWrap{
		padding: 0 5%
	}
}
@media screen and (max-width:840px){
	.recruitArea{margin-bottom: 0;}
	.recruitArea::before{display: none;}
	.recruitWrap{flex-direction: column;}
	.recruitWrap .imgBox{width: 100%;order: 2;text-align: center;}
	.recruitWrap .txtBox{width: 100%;order: 1;margin-bottom: 30px;}
	.recruitWrap .txtBox .inner{box-shadow: 5px 5px 10px rgba(31, 36, 50, 0.1);}
	.recruitWrap .titleMain::after{width: 500px;}
}
@media screen and (max-width:599px){

}

/* お問い合わせ
========================================== */
.contactArea{
	position: relative;
	display: flex;
	align-items:center;
	justify-content:flex-start;
	max-width: 1200px;
	margin: 0 auto 60px;
	padding:3% 20% 3% 0;
	border-radius: 20px;
	border:5px solid #64aebd;
	box-sizing: border-box;
	background-color: var(--sub-color);
}
.contactArea .titleMain{margin:0 4em;}
.contactArea .titleMain .en{color: #fff;}
.contactArea .catch img{max-width: 100%;height: auto;}
.contactArea .txtBox{
	position: relative;
	z-index: 2;
	padding-left:60px;
	border-left: 1px solid #fff;}
.contactArea .txtBox p{
	text-shadow:
	1px 1px 1px #fff, -1px -1px 1px #fff,
	-1px 1px 1px #fff, 1px -1px 1px #fff,
	1px 0px 1px #fff, -1px -0px 1px #fff,
	0px 1px 1px #fff, 0px -1px 1px #fff;
}
.contactArea .imgBox{
	z-index: 1;
	position: absolute;
	right: 20px;
	bottom: 0;
	width: 50%;
	text-align: right;
}
.contactArea .imgBox img{
	max-width: 100%;
	height: auto;
}

@media screen and (max-width:1200px){
	.contactArea{
		margin: 0 5% 60px;
		width:90%;
	}
	.contactArea .titleMain{margin:0 2em;}
	.contactArea .txtBox{
		padding-left: 0;
		border-left: none;}

	.contactArea .imgBox{
		width: 40%;}
}
@media screen and (max-width:840px){
	.contactArea{
		display: block;
		margin: 0 5% 30px;
		padding:3% 5%;
	}
	.contactArea .imgBox{width: 35%;}
	.contactArea .titleMain{margin: 0 auto 2em;}
}
@media screen and (max-width:599px){
	.contactArea .imgBox{display: none;}
	.contactArea{padding:5% 5% 6%;}
	.contactArea .catch{text-align: center;}
	.contactArea .catch img{max-width: 70%;}
	.contactArea .btnMore a{display: block;}
	.contactArea .txtBox p{text-shadow: none;}
}

/* footer
========================================== */
footer{padding-top: 60px;}
.footerWrap{
	margin: 0 auto 50px;
	width: 1200px;
}
.footerInfo{
	margin-bottom: 60px;
	text-align: center;}
.footerLogo{margin-bottom: 20px;}
.footerLogo a{display: block;}
.footerLogo img{max-width: 100%;height: auto;}

.footerInfo .contact{
	display: flex;
	justify-content: center;
	margin: 40px auto 20px;
	gap: 30px;
}

.footerInfo .tel,
.footerInfo .fax{
	line-height: 1;
	display: block;
	padding: 0.3em 1em;
	letter-spacing: 1px;
	text-decoration: none;
	border-radius: 50px;
	border: 1px solid var(--main-color);
	background-color: #fff;
	color: var(--main-color);
	font-size: 3.4rem;
	font-size: clamp(2.6rem,3.095vw,3.4rem);
	font-family: "Abel", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.footerInfo .tel span,
.footerInfo .fax span{
	font-size: 1.8rem;
}

.footerInfo .hours{
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footerInfo .hours dt{
	padding: 0.3em 1em;
	background-color: var(--main-color);
	border-radius: 9999px;
	color: #fff;
	font-weight: 400;
}
.footerInfo .hours dd{
	padding: 0.3em 0.5em;
	color: var(--main-color);
	font-size: 2rem;
}

.footerNavi{
	display: flex;
	gap:30px 100px;
	justify-content: center;
	margin: 0 auto;
}
.footerNavi .fnav li{margin-bottom: 1.5em;}
.footerNavi .fnav li a{
	display: block;
	line-height: 1.2;
	color: var(--txt-color);
	text-decoration: none;
	font-weight: 600;
}
.footerNavi .fnav li ul{margin-top: 1.5em;margin-left: .6em;}
.footerNavi .fnav li ul li{
	position: relative;
	padding-left: 25px;}
.footerNavi .fnav li ul li::before{
	content: "";
	position: absolute;
	left: 0;top: 50%;
	width: 10px;
	height: 1px;
	background-color: var(--main-color);
}
.footerNavi .fnav li ul li a{color: var(--txt-color);}
.footerNavi .fnav li a:hover{text-decoration: underline;}

.copyright{
	padding: 1em 1em;
	text-align: center;
	color: #454545;
	font-family: "Abel", sans-serif;
	font-weight:500;
	font-style: normal;
	font-size:1.2rem;}

@media screen and (max-width: 1200px) {
	.footerWrap{
		padding: 0 5%;
		width:100%;
	}
	.footerNavi{gap:30px 50px;}
	.fnav li a{font-size: 1.4rem;}
}
@media screen and (max-width: 840px) {
	.footerWrap{display: block;}
	.footerInfo{
		margin: 0 auto 60px;
		width: fit-content;
	}
	.footerNavi{
		flex-wrap: wrap;
		gap:30px;
	}
	.footerNavi > ul{width: calc((100% - 30px)/2);}

}
@media screen and (max-width:599px) {
	.footerWrap{margin-bottom: 10px;}
	.footerNavi .fnav:not(:first-of-type){margin-left: 0;}
	.footerInfo .contact{
		flex-direction: column;
		margin: 20px auto 20px;
		gap: 15px;
	}
}


/* pageTop
========================================== */
#pageTop{
	position:fixed;
	line-height: 1;
	right:20px;
	bottom:20px;
	z-index: 1000;}
#pageTop a{
	display: block;
	position:relative;
	padding:20px;
	background-color:var(--main-color);
	border-radius: 9999px;
	box-sizing: border-box;
	color:#fff;
	font-size: 1.2rem;
	text-decoration: none;
	transition: all .3s;
}
#pageTop a::before{
	position:absolute;
	content: "";
	top:17px;
	left:50%;
	margin-left: -4px;
	width: 8px;
	height: 8px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: all .3s;
	}
#pageTop:hover a{background-color: var(--point-color);}
#pageTop:hover a::before{top:13px;}
@media screen and (max-width: 1200px) {
	#pageTop{
		right:0;}
}

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