@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=Oswald:wght@200..700&display=swap');



/* all
-----------------------------------------------------------------------------------*/
/* title */
.title {
	line-height: 1.2;
	font-size: clamp(1.125rem, 1.068rem + 0.15vw, 1.25rem);/*20~18px*/
	font-weight: 500;
	color: #666;
}
.title span {
	display: block;
	margin-bottom: 10px;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(3.125rem, 2.557rem + 1.52vw, 4.375rem);/*70~60px*/
	color: #004097;
}
/* btn */
.btn {
	text-shadow: 0 0 10px #111;
	font-family: "M PLUS 1 Code", monospace;
	font-optical-sizing: auto;
	font-weight: 700;
	border-radius: 0 20px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}
.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
}
.btn:hover::before {transform: scale(1.1);}
.btn a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	color: #fff;
	position: relative;
	z-index: 0;
}
.btn a::before {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.3s ease;
	z-index: -1;
}
.btn a:hover::before {opacity: 0.5;}
/* list */
ul.list li {
	width: 100%;
	height: 4em;
	border-top: dotted #8eaebc 1px;
	font-size: 1.125em;
}
ul.list li:last-child {border-bottom: dotted #8eaebc 1px;}
ul.list li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 1em;
	height: 100%;
	color: #333;
	position: relative;
}
ul.list li a:hover {
	background-color: #fff;
	color: #01a8a1;
}
ul.list li a::before,
ul.list li a::after {
	content: '';
	position: absolute;
	inset: 0 auto;
	margin: auto;
	transition: all 0.3s ease;
}
ul.list li a::before {
	right: 1em;
	width: 1.5em;
	height: 1.5em;
	border: solid #8eaebc 1px;
	border-radius: 50%;
}
ul.list li a::after {
	right: 1.65em;
	width: 0.4em;
	height: 0.4em;
	border-top: solid #8eaebc 1px;
	border-right: solid #8eaebc 1px;
	transform: rotate(45deg);
}
ul.list li a:hover::before,
ul.list li a:hover::after {border-color: #01a8a1;}
ul.list li a:hover::after {right: 1.5em;}

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






/* mainimage
-----------------------------------------------------------------------------------*/
#top-mainimage {
	overflow: hidden;
	background: url("../img/bg-top-mainimage.png") top center/1920px auto no-repeat;
}
#top-mainimage section {
	height: 100vh;
	position: relative;
}

/*catchphrase-area*/
#catchphrase-area {
	position: absolute;
	inset: 15vh auto auto 0;
	width: 100%;
	max-width: clamp(18.75rem, 14.958rem + 16.18vw, 34.375rem);/*615 550~300px*/
	z-index: 1;
}
#catchphrase-area .catch{
	display: block;
	width: 100%;
	height: 100vh;
	max-height: clamp(6rem, 4.847rem + 4.92vw, 10.75rem);/*193 172~96px*/
	position: relative;
}
#catchphrase-area .catch::before,
#catchphrase-area .catch::after {
	content: '';
	position: absolute;
	width: 0;
	height: 50%;
	background: url("../img/img-catchphrase.svg") no-repeat;
	background-size: clamp(18.75rem, 14.958rem + 16.18vw, 34.375rem) auto;
}
#catchphrase-area .catch::before {
	top: 0;
	left: 0;
	background-position: top left;
	animation: catch01 1.5s ease 0.3s forwards;
}
#catchphrase-area .catch::after {
	bottom: 0;
	left: 0;
	background-position: bottom left;
	animation: catch01 1.5s ease 1.6s forwards;
}
@keyframes catch01 {
	0% {width: 0;}
	100% {width: 100%;}
}
#catchphrase-area .text {
	margin-top: 3em;
	display: block;
	width: 100%;
	height: 100vh;
	max-width: 335px;
	max-height: clamp(2.5rem, 2.257rem + 1.04vw, 3.5rem);/*56~40px*/
	background: url("../img/img-catchphrase-text.svg") top left/contain no-repeat;
	opacity: 0;
	animation: catch02 1s ease 3s forwards;
}
@keyframes catch02 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*text-area*/
#text-area {
	position: absolute;
	inset: auto auto 0 0;
	width: 100%;
	max-width: clamp(22.5rem, 9.643rem + 20.09vw, 33.75rem);/*540~360px*/
	background: url("../img/img-human.svg") bottom right/clamp(18.75rem, 13.036rem + 8.93vw, 23.75rem) no-repeat;/*380~300px*/
	line-height: 1.8;
	text-shadow: 1px 0 1px #fff, -1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff, 1px 0 2px #fff, -1px 0 2px #fff, 0 1px 2px #fff, 0 -1px 2px #fff;
	font-size: 1.0625em;
	font-weight: 600;
	color: #996435;
	z-index: 3;
}
#text-area p {
	margin-bottom: clamp(10rem, 7.857rem + 3.35vw, 11.875rem);/*190~160px*/
}

/*award-area*/
#award-area {
	position: absolute;
	inset: auto -3em 1em auto;
	width: 100%;
	max-width: 200px;/*clamp(6.25rem, 4.733rem + 6.47vw, 12.5rem);200~100px*/
	z-index: 4;
}

@media screen and (max-width: 1730px) {
	#top-mainimage {background-position: top right;}
	#award-area {right: 0;}
}

@media screen and (max-width: 1600px) {
	#top-mainimage {
		padding-top: 60px;
		background-size: clamp(25.375rem, -2.097rem + 122.1vw, 120rem) auto;/*1920~406px*/
		background-position: top 60px right;
	}
	#top-mainimage section {height: calc(100vh - 60px);}
	#catchphrase-area {inset: 70px auto auto 0;}
}

@media screen and (max-width: 1280px) {
	#text-area {
		background-position: bottom left;
		background-size: clamp(15.625rem, 8.279rem + 13.09vw, 18.75rem);/* 300px~250px */
	}
	#text-area p {margin-bottom: 150px;}
}

@media screen and (max-width: 1024px) {
	#catchphrase-area {inset: 70px auto auto 0;}
	#catchphrase-area .text {
		max-width: 290px;
		background-color: rgba(255,255,255,0.5);
		border-top: solid rgba(255,255,255,0.1) 0.5em;
		border-bottom: solid rgba(255,255,255,0.1) 0.5em;
		border-radius: 1em;
	}
}

@media screen and (max-height: 800px) and (max-width: 1280px) {
	#top-mainimage section {height: calc(130vh - 60px);}
}

@media screen and (min-height: 1024px) and (max-width: 1280px) {
	#top-mainimage section {height: calc(100vh - 60px);}
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
	#catchphrase-area {
		inset: 58% auto auto 0;
		background-color: rgba(255,255,255,0.5);
		border: solid rgba(255,255,255,0.1) 1em;
		border-radius: 2em;
	}
	#award-area {inset: auto 0 1em auto;}
	#text-area {
		max-width: 63vw;
		background-position: bottom right;
	}
	#text-area p {margin: 0 0 1em 0.8em;}
	#top-mainimage section {height: calc(74vh - 60px);}
}

@media screen and (max-height: 834px) and (max-width: 1194px) {
	#top-mainimage section {height: calc(100vh - 60px);}
}

@media screen and (max-width: 897px) {
	#catchphrase-area {
		inset: auto auto 22% 0;
		background-color: rgba(255,255,255,0.5);
		border: solid rgba(255,255,255,0.1) 1em;
		border-radius: 2em;
	}
	#catchphrase-area .text {border: none;}
	#award-area {
		inset: auto 0 20% auto;
		max-width: 150px;
		z-index: 50;
	}
	#text-area {
		max-width: inherit;
		background-position: bottom right;
		background-size: clamp(9.375rem, 2.64rem + 28.74vw, 18.75rem);/*300~150px*/
	}
	#text-area p {margin: 0 0 1em 0.8em;}
	#top-mainimage section {
		height: calc(81svh - 60px);
		min-height: 790px;
	}
}

@media screen and (max-width: 600px) {
	#catchphrase-area {z-index: 2;}
	#award-area {inset: auto 0 22% auto;}
	#top-mainimage section {
		height: calc(70svh - 60px);
		min-height: 680px;
	}
}

@media screen and (min-width: 430px) and (max-width: 932px) and (orientation: landscape) {
	#top-mainimage section {height: 180vh;}
}

@media screen and (max-width: 480px) {
	#top-mainimage {
		background-position: top 220px right;
	}
	#catchphrase-area {
		inset: 1.5em auto auto 0;
		background-color: transparent;
		border: none;
	}
	#catchphrase-area .text {margin-top: 1.7em;}
	#text-area {font-size: 3.333vw;}
	#text-area p {
		margin: 0 0 6em 0;
		font-size: 3.229vw;
	}
	#top-mainimage section {
		height: calc(78svh - 60px);
		min-height: 670px;
	}
}

@media screen and (max-width: 430px) {
	#award-area {
		inset: auto -10px 24% auto;
		max-width: 140px;
	}
}






/* modal
-----------------------------------------------------------------------------------*/
.hide-area {display: none;}
#cboxContent {}
#cboxClose {
	top: -25px !important;
	border-radius: 20%;
}
.modal-area {
	padding: clamp(3rem, 2.757rem + 1.04vw, 4rem) clamp(2.5rem, 2.136rem + 1.55vw, 4rem);/*64~48px,64~40px*/
	background: url("../img/bg-modalbase.png") rgba(0,64,151,0.7) center/calc(100% - clamp(3rem, 2.757rem + 1.04vw, 4rem)) calc(100% - clamp(3rem, 2.757rem + 1.04vw, 4rem)) no-repeat;
	border-radius: 20px;
}
.modal-title {
	margin: 0.5em 0 0 2em;
	padding: 0.3em 0 0 1.1em;
	max-width: 665px;
	border-top: solid #004097 1px;
	line-height: 1.2;
	font-size: clamp(1.25rem, 0.917rem + 1.11vw, 2.25rem);/*36~20px*/
	position: relative;
}
.modal-title::before,
.modal-title::after {
	content: '';
	position: absolute;
}
.modal-title::before {
	top: -0.8em;
	left: 1.1em;
	width: 100%;
	height: 0.555em;
	background: url("../img/modal-title.svg") top left/contain no-repeat;
}
#mark-no11 .modal-title::before {
	background: url("../img/modal-title2.svg") top left/contain no-repeat;
}
.modal-title::after {
	top: -0.8em;
	left: -2em;
	width: 2.7em;
	height: 2.7em;
	background: url("../img/icon-mark-r.svg") center/contain no-repeat;
}
.modal-img {
	margin: 1em 0 1em 6.25em;
	max-width: 540px;
}
.modal-text {
	margin-left: 6.25em;
	max-width: 540px;
}

@media screen and (max-width: 480px) {
	.modal-title {font-size: 4.583vw;}
	.modal-img,.modal-text {margin-left: 0;}
}






/* our strengths
-----------------------------------------------------------------------------------*/
#top-ourstrengths {
	padding: 50px 0;
	background: url("../img/bg-top-ourstrengths.jpg") #f2fafa center/cover no-repeat;
}
#top-ourstrengths section {
	display: grid;
	grid-template-columns: auto 65%;
	grid-template-rows: repeat(2, auto);
	grid-row-gap: 2em;
	grid-column-gap: 5em;
}
#top-ourstrengths .title {
	grid-area: 1/1 / 2/2;
}
#top-ourstrengths p {
	font-size: 1.1em;
	grid-area: 2/1 / 3/2;
}
#top-ourstrengths ul {
	padding: 3em clamp(7.5rem, 4.375rem + 8.33vw, 14.375rem) 2em clamp(7.5rem, 4.659rem + 7.58vw, 13.75rem);/* 230~120px, 220~120px */
	width: 100%;
	max-width: 1130px;
	box-sizing: border-box;
	background: url("../img/img-woman03.svg") left 1.5em bottom 2em/clamp(4.063rem, 2.813rem + 6.25vw, 10.313rem) auto no-repeat,
		url("../img/img-man03.svg") #fff right 1.5em bottom 2em/clamp(4.5rem, 2.925rem + 7.88vw, 12.375rem) auto no-repeat;
	border-radius: 0 20px;
	font-size: 1.1em;
	align-self: flex-end;
	position: relative;
	grid-area: 1/2 / 3/3;
}
#top-ourstrengths ul::before {
	content: '';
	position: absolute;
	inset: -0.75em 0 auto;
	margin: auto;
	width: 100%;
	height: 1.5em;
	background: url("../img/title-top-ourstrengths.svg") center/contain no-repeat;
}
#top-ourstrengths ul li {
	padding-left: 1em;
	font-size: 1.1em;
	font-weight: 600;
	position: relative;
}
#top-ourstrengths ul li:not(:last-child) {margin-bottom: 0.3em;}
#top-ourstrengths ul li::before {
	content: '';
	position: absolute;
	top: 0.4em;
	left: 0;
	width: 0.6em;
	height: 0.6em;
	background-color: #00a99d;
	border-radius: 50%;
}

@media screen and (max-width: 1366px) {
	#top-ourstrengths section {grid-column-gap: 2em;}
	#top-ourstrengths ul {padding-bottom: 3em;}
}

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

@media screen and (max-width: 897px) {
	#top-ourstrengths section {
		grid-template-columns: auto;
		grid-template-rows: repeat(3, auto);
	}
	#top-ourstrengths .title {grid-area: 1/1 / 2/2;}
	#top-ourstrengths p {grid-area: 2/1 / 3/2;}
	#top-ourstrengths ul {grid-area: 3/1 / 4/2;}
}

@media screen and (max-width: 480px) {
	#top-ourstrengths ul {
		padding: 2em 2em 7em;
		background-size: 19.375vw auto, 22.917vw auto;
		background-position: left 21vw bottom 1.5em, right 21vw bottom 1.5em;
	}
}






/* news
-----------------------------------------------------------------------------------*/
#top-news {
	padding: 50px 0;
	background-color: #f2fafa;
}
#top-news section {
	display: flex;
	justify-content: flex-start;
	align-content: space-between;
	grid-column-gap: clamp(1.875rem, -1.696rem + 5.58vw, 5rem);/*80~30px*/
	padding: 20px 150px 20px 0;
	width: calc(100% - 150px);
	max-width: calc(1730px - 150px);
	background: url("../img/img-woman01.svg") center right/contain no-repeat;
}
/* title */
#top-news .title {
	padding: 0.5em 1em 1em;
	width: calc(100% - 2em);
	max-width: calc(400px - 2em);
	background-color: #fff;
	border-radius: 0 20px;
	position: relative;
}
#top-news .title::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 1em;
	width: 3em;
	height: 3px;
	background-color: #00a99d;
}
#top-news .title a {
	position: absolute;
	inset: auto 1.2em 1.7em auto;
	padding-right: 3em;
	font-weight: normal;
	font-size: 0.8em;
	color: #00a99d;
}
#top-news .title a:hover {color: #004097;}
#top-news .title a::before,
#top-news .title a::after {
	content: '';
	position: absolute;
	inset: 0 0 0 auto;
	margin: auto;
	transition: all 0.3s ease;
}
#top-news .title a::before {
	width: 2em;
	height: 2em;
	border: solid #00a99d 1px;
	border-radius: 50%;
}
#top-news .title a::after {
	right: 0.9em;
	width: 0.5em;
	height: 0.5em;
	border-top: solid #00a99d 1px;
	border-right: solid #00a99d 1px;
	transform: rotate(45deg);
}
#top-news .title a:hover::before,
#top-news .title a:hover::after {border-color: #004097;}
#top-news .title a:hover::after {right: 0.75em}
/* list */
#top-news ul {
	width: 100%;
	max-width: 1050px;
}
#top-news ul li {border-bottom: dashed #00a99d 1px;}
#top-news ul li:first-child {border-top: dashed #00a99d 1px;}
#top-news ul li a {
	display: block;
	padding: 1.3em 1.5em;
	color: #333;
}
#top-news ul li a:hover {
	background-color: #fff;
	color: #01a8a1;
}
#top-news ul li .category::after {
	display: inline-block;
	margin: 0 1.3em;
	width: 100px;
	vertical-align: middle;
	text-align: center;
	line-height: 2;
	color: #fff;
}
#top-news ul li .mark-N::after {
	content: 'お知らせ';
	background-color: #ff1d25;
}
#top-news ul li .mark-P::after {
	content: '製品情報';
	background-color: #004097;
}

@media screen and (max-width: 1730px) {
	#top-news section {
		width: calc(100% - 190px);
	}
}

@media screen and (max-width: 1024px) {
	#top-news ul li .category {
		display: block;
		margin-bottom: 0.5em;
		margin-left: -6.5em;
	}
	#top-news ul li a {padding: 1em 1.5em 1em 8em;}
}

@media screen and (max-width: 897px) {
	#top-news section {
		padding: 0;
		width: calc(100% - 40px);
		flex-wrap: wrap;
		background-size: 13.378vw;
		background-position: bottom right;
	}
	#top-news .title {
		margin-bottom: 40px;
		max-width: inherit;
	}
	#top-news ul {width: calc(100% - 17vw);}
}

@media screen and (max-width: 480px) {
	#top-news section {background-size: 18.75vw;}
	#top-news ul {width: calc(100% - 22vw);}
	#top-news ul li .category {margin-left: 0;}
	#top-news ul li .category::after {
		width: 90px;
		line-height: 1.5;
		font-size: 0.9em;
	}
	#top-news ul li a {padding: 1em;}
}






/* products
-----------------------------------------------------------------------------------*/
#top-products {padding: clamp(5rem, 4.432rem + 1.52vw, 6.25rem) 0;/*100~80px*/}
#top-products section {
	display: grid;
	grid-template-columns: calc(100% - 330px - 3em) 330px;
	grid-template-rows: repeat(4, auto);
	align-content: space-between;
	grid-column-gap: 3em;
}
#top-products .title {
	grid-area: 1/2 / 2/3;
	margin-bottom: 45px;
	text-align: right;
}
#top-products p {
	grid-area: 2/2 / 3/3;
	line-height: 1.8;
}
#top-products .img {
	grid-area: 3/2 / 4/3;
	margin: 40px 0;
	width: 100%;
	text-align: right;
}
#top-products .img img {max-width: clamp(8.75rem, 6.761rem + 5.3vw, 13.125rem);}/*210~140px*/
#top-products ul.list {
	grid-area: 4/2 / 5/3;
	width: 100%;
}
#top-products section > ul {
	grid-area: 1/1 / 5/2;
	width: 100%;
	max-width: 1300px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: space-between;
}
#top-products ul:not(.list) {grid-row-gap: 2em;}
#top-products ul li.btn {
	height: 100%;
	max-width: 630px;
	max-height: clamp(21.875rem, 19.018rem + 4.46vw, 24.375rem);/*390~350px*/
}
#top-products ul li.btn:is(.no1,.no5) {width: calc(95% / 2);}
#top-products ul li.btn:is(.no2,.no3,.no4) {width: calc(95% / 3);}
#top-products ul li.btn.no1::before {background: url("../img/btn-top-products01.jpg") center/cover no-repeat;}
#top-products ul li.btn.no2::before {background: url("../img/btn-top-products02.jpg") center/cover no-repeat;}
#top-products ul li.btn.no3::before {background: url("../img/btn-top-products03.jpg") center/cover no-repeat;}
#top-products ul li.btn.no4::before {background: url("../img/btn-top-products04.jpg") center/cover no-repeat;}
#top-products ul li.btn.no5::before {background: url("../img/btn-top-products05.jpg") center/cover no-repeat;}
#top-products ul li.btn a::before {
	background: linear-gradient(140deg,  rgba(224,221,255,1) 0%,rgba(239,246,255,1) 41%,rgba(156,231,255,1) 100%);
}
#top-products ul li.btn a {
	background-size: auto clamp(1.875rem, 1.543rem + 1.47vw, 3.313rem);/*53~33px*/
}
#top-products ul li.btn.no1 a {background-image: url("../img/top-btn-text-products01.svg");}
#top-products ul li.btn.no2 a {background-image: url("../img/top-btn-text-products02.svg");}
#top-products ul li.btn.no3 a {background-image: url("../img/top-btn-text-products03.svg");}
#top-products ul li.btn.no4 a {background-image: url("../img/top-btn-text-products04.svg");}
#top-products ul li.btn.no5 a {background-image: url("../img/top-btn-text-products05.svg");}

@media screen and (max-width: 1280px) {
	#top-products ul li.btn {
		max-height: clamp(15.625rem, 10.662rem + 13.24vw, 21.25rem);/*340~250px*/
	}
}

@media screen and (max-width: 897px) {
	#top-products section {
		grid-template-columns: 50% calc(50% - 3em);
	}
	#top-products ul:not(.list) {grid-row-gap: 0;}
	#top-products ul li.btn:is(.no1,.no2,.no3,.no4,.no5) {
		width: 100%;
		max-height: calc(90% / 5);
	}
}

@media screen and (max-width: 480px) {
	#top-products section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		grid-column-gap: 0;
	}
	#top-products ul:not(.list) {grid-row-gap: 1em;}
	#top-products .title {
		width: 100%;
		order: 0;
	}
	#top-products p {order: 1;}
	#top-products ul.list {
		margin: 3em 0 1em;
		width: 65%;
		order: 2;
	}
	#top-products .img {
		margin: 0 0 1.3em;
		width: 30%;
		order: 3;
	}
	#top-products ul:not(.list) {order: 4;}
	#top-products ul li.btn {
		width: calc(95% / 2);
		height: 120px;
	}
}






/* company & policy
-----------------------------------------------------------------------------------*/
#top-company {
	background: url("../img/img-top-company.jpg") #f6f5f4 center left 50vw/contain no-repeat;
	display: flex;
	justify-content: center;
}
#top-company section {
	padding: clamp(5.625rem, 5.057rem + 1.52vw, 6.875rem) 55% 0 clamp(1.25rem, -41.431rem + 39.47vw, 5.938rem);/*110~90px, 95~20px*/
	width: calc(45% - clamp(1.25rem, -41.431rem + 39.47vw, 5.938rem));
	max-width: 670px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
#top-company .title {
	margin-bottom: 45px;
	width: 100%;
	color: #3fa9ff;
}
#top-company p {
	width: 65%;
	line-height: 1.9;
}
#top-company ul {
	margin: 0 0 60px 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#top-company ul.list {
	margin-top: 40px;
}
#top-company ul.list li {width: calc(95% / 2);}
#top-company ul.list li:nth-last-child(2) {border-bottom: dotted #8eaebc 1px;}
#top-company ul li.btn {
	width: calc(95% / 2);
	height: 100vh;
	max-width: 320px;
	max-height: clamp(8.125rem, 3.125rem + 7.81vw, 12.5rem);/*200~130px*/
}
#top-company ul li.btn.no1::before {background: url("../img/btn-top-company01.jpg") center/cover no-repeat;}
#top-company ul li.btn.no2::before {background: url("../img/btn-top-company02.jpg") center/cover no-repeat;}
#top-company ul li.btn a::before {
	background: linear-gradient(-60deg,  rgba(0,91,151,1) 0%,rgba(0,117,190,1) 14%,rgba(30,156,215,1) 44%,rgba(204,224,244,1) 100%);
}
#top-company ul li.btn a {
	background-size: auto clamp(2.188rem, 2.042rem + 0.49vw, 2.625rem);/*42~35px*/
}
#top-company ul li.btn.no1 a {background-image: url("../img/top-btn-text-company01.svg");}
#top-company ul li.btn.no2 a {background-image: url("../img/top-btn-text-company02.svg");}
#top-company .img {
	margin-top: -4em;
	width: 30%;
	text-align: right;
}
#top-company .img img {max-width: 180px;}

@media screen and (max-width: 1366px) {
	#top-company .img {margin-top: -2em;}
}

@media screen and (max-width: 897px) {
	#top-company {
		background-position: top right -7vw;
		background-size: auto 45vw;
	}
	#top-company section {
		padding: 70px 0 0;
		width: 100%;
		max-width: inherit;
	}
	#top-company p {width: 42%;}
	#top-company .img {
		margin-top: 0;
		width: 55%;
		text-align: left;
	}
	#top-company .img img {max-width: 120px;}
	#top-company ul li.btn {max-width: inherit;}
}

@media screen and (max-width: 600px) {
	#top-company {
		background-position: bottom center;
		background-size: contain;
	}
	#top-company section {padding: 70px 0 calc(100vw + 10px);}
	#top-company p {
		margin-bottom: 20px;
		width: 100%;
	}
	#top-company .img {
		margin-top: 0;
		width: 100%;
		text-align: center;
	}
	#top-company ul.list {margin-top: 25px;}
}

@media screen and (max-width: 320px) {
	#top-company ul li.btn a {background-size: auto 33px;}
}






/* design & development
-----------------------------------------------------------------------------------*/
#top-design {
	background: url("../img/bg-top-design.jpg") center/cover no-repeat;
}
#top-design section {
	padding: clamp(5rem, 4.432rem + 1.52vw, 6.25rem) 0;/*100~80px*/
	max-width: clamp(31.25rem, 20.455rem + 28.79vw, 55rem);/*880~500px*/
}
#top-design .title {
	margin-bottom: 80px;
	text-align: center;
}
#top-design ul {
	margin: 0 auto;
	width: 100%;
	max-width: 710px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-row-gap: 4em;
}
#top-design ul li.btn {
	width: calc(90% / 2);
	height: 100vh;
	max-width: 320px;
	max-height: 320px;
}
#top-design ul li.btn.no1::before {background: url("../img/btn-top-design01.jpg") center/cover no-repeat;}
#top-design ul li.btn.no2::before {background: url("../img/btn-top-design02.jpg") center/cover no-repeat;}
#top-design ul li.btn.no3::before {background: url("../img/btn-top-design03.jpg") center/cover no-repeat;}
#top-design ul li.btn.no4::before {background: url("../img/btn-top-design04.jpg") center/cover no-repeat;}
#top-design ul li.btn.no5::before {background: url("../img/btn-top-design05.jpg") center/cover no-repeat;}
#top-design ul li.btn a::before {
	background: linear-gradient(45deg,  rgba(255,255,230,1) 0%,rgba(255,189,205,1) 64%,rgba(255,123,172,1) 100%);
}
#top-design ul li.btn a {
	background-size: auto clamp(1.75rem, 1.462rem + 1.23vw, 2.938rem);/*47~28px*/
}
#top-design ul li.btn.no1 a {background-image: url("../img/top-btn-text-design01.svg");}
#top-design ul li.btn.no2 a {background-image: url("../img/top-btn-text-design02.svg");}
#top-design ul li.btn.no3 a {background-image: url("../img/top-btn-text-design03.svg");}
#top-design ul li.btn.no4 a {background-image: url("../img/top-btn-text-design04.svg");}
#top-design ul li.btn.no5 a {
	background-image: url("../img/top-btn-text-design05.svg");
	background-size: auto clamp(2.875rem, 2.283rem + 2.52vw, 5.313rem);/*85~46px*/
}

@media screen and (max-width: 1730px) {
	#top-design section {
		margin: 0 auto;
	}
}

@media screen and (max-width: 897px) {
	#top-design ul li.btn {max-height: clamp(12.5rem, -2.652rem + 40.4vw, 20rem);}/*320~200px*/
}

@media screen and (max-width: 600px) {
	#top-design ul {grid-row-gap: 2em;}
	#top-design ul li.btn {width: calc(95% / 2);}
}

@media screen and (max-width: 320px) {
	#top-design ul li.btn {
		width: 100%;
		height: 120px;
	}
	#top-design ul li.btn a {background-size: auto 33px;}
	#top-design ul li.btn.no5 a {background-size: auto 54px;}
}






/* automation & craftsmanship
-----------------------------------------------------------------------------------*/
#top-automation {
	padding: clamp(5.625rem, 5.057rem + 1.52vw, 6.875rem) 0;/*110~90px*/
	background: url("../img/bg-top-automation.jpg") top center/cover no-repeat;
}
#top-automation section {
	background: url("../img/img-man02.png") left bottom/clamp(12.5rem, 6.989rem + 14.7vw, 24.625rem) no-repeat;/* 394~200px*/
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#top-automation .title {
	margin-bottom: 80px;
	width: 55%;
}
#top-automation ul {
	width: 45%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#top-automation ul li.btn {
	width: calc(95% / 2);
	height: clamp(23.125rem, 14.318rem + 23.48vw, 42.5rem);/*680~350px*/
	max-width: 395px;
	position: relative;
}
#top-automation ul li.btn.no1::before {background: url("../img/btn-top-automation01.jpg") center/cover no-repeat;}
#top-automation ul li.btn.no2::before {background: url("../img/btn-top-automation02.jpg") center/cover no-repeat;}
#top-automation ul li.btn a::before {
	background: linear-gradient(45deg,  rgba(0,91,151,1) 0%,rgba(0,117,190,1) 14%,rgba(30,156,215,1) 44%,rgba(194,224,148,1) 100%);
}
#top-automation ul li.btn a {
	background-size: clamp(2.188rem, 1.563rem + 2.08vw, 4.063rem) auto;/*65~35px*/
}
#top-automation ul li.btn.no1 a {
	background-image: url("../img/top-btn-text-automation01.svg");
	background-size: clamp(2.031rem, 1.354rem + 2.26vw, 4.063rem) auto;/*65~32.5px*/
}
#top-automation ul li.btn.no2 a {background-image: url("../img/top-btn-text-automation02.svg");}
#top-automation ul li.btn br {display: none;}

@media screen and (max-width: 1024px) {
	#top-automation ul li.btn br {display: block;}
}

@media screen and (max-width: 600px) {
	#top-automation ul {grid-row-gap: 2em;}
	#top-automation ul li.btn {width: calc(95% / 2);}
}

@media screen and (max-width: 480px) {
	#top-automation section {
		background-position: right top 150px;
	}
	#top-automation .title {margin-bottom: 150px;}
	#top-automation .title,
	#top-automation ul {width: 100%;}
}






/* recruit
-----------------------------------------------------------------------------------*/
#top-recruit {
	padding: clamp(5.625rem, 4.75rem + 4.38vw, 10rem) 0 95px;/*160~90px*/
	background: url("../img/bg-top-recruit.jpg") top center/auto clamp(21.875rem, 17.85rem + 15.33vw, 36.25rem) no-repeat;
}
#top-recruit .title {
	margin-bottom: clamp(11.25rem, 6.989rem + 11.36vw, 20.625rem);/*330~180px*/
	text-align: center;
	color: #ccc;
}
#top-recruit .title span {color: #fff;}
#top-recruit ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-row-gap: 40px;
}
#top-recruit ul li {
	width: calc(95% / 3);
	max-width: 540px;
	height: clamp(5rem, 4.432rem + 1.52vw, 6.25rem);/*100~80px*/
	font-size: clamp(1.25rem, 0.536rem + 1.12vw, 1.875rem);/*30~20px*/
	border-radius: 0 20px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
#top-recruit ul li::before {
  position: absolute;
  inset: 0;
  content: '';
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
	z-index: -1;
}
#top-recruit ul li:nth-child(odd)::before {background-color: #004097;}
#top-recruit ul li:nth-child(even)::before {background-color: #ff1d25;}
#top-recruit ul li:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
#top-recruit ul li a {
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	display: block;
	background-position: center;
	background-size: auto clamp(1.688rem, 0.591rem + 1.96vw, 2.938rem);/*47~27px*/
	background-repeat: no-repeat;
	border: solid 3px;
	border-radius: 0 20px;
	border-color: #004097;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}
#top-recruit ul li.no1 a {background-image: url("../img/top-btn-text-recruit01.svg");}
#top-recruit ul li.no2 a {background-image: url("../img/top-btn-text-recruit02.svg");}
#top-recruit ul li.no3 a {background-image: url("../img/top-btn-text-recruit03.svg");}
#top-recruit ul li.no4 a {background-image: url("../img/top-btn-text-recruit04.svg");}
#top-recruit ul li.no5 a {background-image: url("../img/top-btn-text-recruit05.svg");}
#top-recruit ul li.no6 a {background-image: url("../img/top-btn-text-recruit06.svg");}
#top-recruit ul li.no1 a:hover {background-image: url("../img/top-btn-text-recruit01-w.svg");}
#top-recruit ul li.no2 a:hover {background-image: url("../img/top-btn-text-recruit02-w.svg");}
#top-recruit ul li.no3 a:hover {background-image: url("../img/top-btn-text-recruit03-w.svg");}
#top-recruit ul li.no4 a:hover {background-image: url("../img/top-btn-text-recruit04-w.svg");}
#top-recruit ul li.no5 a:hover {background-image: url("../img/top-btn-text-recruit05-w.svg");}
#top-recruit ul li.no6 a:hover {background-image: url("../img/top-btn-text-recruit06-w.svg");}
#top-recruit ul li:nth-child(even) a {border-color: #ff1d25;}
#top-recruit ul li a::before,
#top-recruit ul li a::after {
	content: '';
	position: absolute;
	inset: 0 0.7em 0 auto;
	margin: auto;
}
#top-recruit ul li a::before {
	width: 0.8em;
	height: 0.2em;
	background-color: #fff;
}
#top-recruit ul li a::after {
	width: 0.5em;
	height: 0.5em;
	border-top: solid #fff 0.2em;
	border-right: solid #fff 0.2em;
	transform: rotate(45deg);
}

@media screen and (max-width: 897px) {
	#top-recruit ul {grid-row-gap: 2em;}
	#top-recruit ul li {width: calc(95% / 2);}
	#top-recruit ul li.no1 {order: 0;}
	#top-recruit ul li.no2 {order: 1;}
	#top-recruit ul li.no3 {order: 3;}
	#top-recruit ul li.no4 {order: 2;}
	#top-recruit ul li.no5 {order: 4;}
	#top-recruit ul li.no6 {order: 5;}
}

@media screen and (max-width: 600px) {
	#top-recruit ul li {width: 100%;}
	#top-recruit ul li a {background-size: auto 30px;}
	#top-recruit ul li.no3 {order: 2;}
	#top-recruit ul li.no4 {order: 3;}
}