@charset "utf-8";

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


:root {
/* ブランドカラー */
--color-primary:rgb(10,56,99);
--color-secondary: #1ea73f;
--color-accent: #1ea73f;

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

/* 境界・背景カラー */
--border-color: #d5d4d4;
--bg-grey:#eeeeee;
--bg-lightgrey:#f8f9f9;

/* フォントファミリー */
--font-primary:"Zen Kaku Gothic New", sans-serif; /* 400 */
--font-secondary:"Zen Old Mincho", serif; /* 600 */
--font-english:"Cinzel", serif; /* 500 */

/* フォントサイズ */
--font-size-body: clamp(1.5rem, 1.5vw + 0.5rem, 1.6rem);
--font-size-accent: clamp(1.7rem, 1.5vw + 0.5rem, 2rem);
--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 0.4px rgba(30, 38, 30, 0.25);

}

/* 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: 400;
	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
========================================== */
.headerArea{
	z-index: 1200;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent;
	transition: background-color 1s ease;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}
.is-sub .headerArea{background-color: rgba(10,56, 99,0.95);}
.headerArea.scrolled {background-color: rgba(10,56, 99,0.95);}

.headerLogo{max-width: 240px;}
.headerLogo a{
	display: block;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	color: #fff;
}
.headerLogo img {
	width: 100%;
	height: auto;
}
.headerLogo a:hover{opacity: 0.7;transition: 0.3s;}

.headerNaviWrap{
	display: flex;
	gap: 0 40px;
	align-items: center;
}

.headerNavi > ul{
	display: flex;
	justify-content: center;
	list-style: none;
	gap: 0 2.5em;
	margin-right: 20px;
}
.headerNavi > ul > li {position: relative;}
.headerNavi > ul > li > a {
	display: block;
	padding: 1.5em 0;
	color:#fff;
	text-decoration: none;
	transition: .3s;
}
.headerNavi > ul > li > a:hover{text-decoration: underline;}
.headerNavi .subMenu > a{
	display: flex;
	align-items: center;
	gap: 10px;
}
.headerNavi .subMenu > a::after{
	display: block;
	top: 48%;
	right:5px;
	content: "";
	width: 8px;
	border-top: 5px solid #fff;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	transition: .3s;
}
.headerNavi .subMenu > a:hover{text-decoration: none;}
.headerNavi .subMenu > a:hover::after{}

.subMenuBox{
	position: absolute;
	top: 100%;
	left: 50%;
	width: fit-content;
	max-width: 90vw;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	border: 1px solid #fff;
	transition: all 0.3s ease;
	z-index: 3000;
	padding: 1.2em 2.5em 1.2em 1.5em;
	background-color: rgba(0,0,0,0.6);
}
.headerNavi > ul .subMenu:hover .subMenuBox{
	opacity: 1;
	visibility: visible;
}
.is-sub .headerArea .subMenuBox{background-color: rgba(10,56, 99,0.95);}
.headerArea.scrolled .subMenuBox{background-color: rgba(10,56, 99,0.9);}
.subMenuList{
	display: flex;
	flex-direction: column;
	gap:0.4em 0;
}
.subMenuList > li{
	position: relative;
	padding-left: 25px;
}
.subMenuList > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    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;
    background-color:#fff;
    transform: rotate(-90deg);
    width: 15px;
    height: 15px;
    transition: 0.3s;
}
.subMenuList > li a{
	display: inline-block;
	white-space: nowrap;
	width: 100%;
	color: #fff;
	text-decoration: none;
	transition: 0.3s;
}
.subMenuList > li a:hover{
	text-decoration: underline;
}

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

@media screen and (max-width:840px){
	.headerArea{position: absolute;background: none;z-index: 10;padding:0;}
	.headerArea .inner{
		padding:10px;
		height: 60px;
	}
	.headerLogo{margin: 10px 0 0 10px;max-width: 100%;}
	.headerLogo img{width: auto;height: 30px;}
	.headerNavi{display: none;}

	.spMenuWrap{display: block;}
	.spBtn{
		opacity: 1;
		pointer-events: auto;
		position:fixed;
		top: 5px;
		right: 5px;
		display: inline-block;
		width: 50px;
		height:50px;
		padding: 16px 12px 18px;
		background-color: var(--color-primary);
		border: 1px solid #fff;
		cursor: pointer;
		z-index: 2000;
	}
	.spBtn div {position: relative;}
	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background:#fff;
		left: 0;
		transition: .3s 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:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.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);
	}
	.overlay {
		position: fixed;
		top: 0; left: 0;
		width: 100vw;
		height: 100vh;
		background-color:#fff;
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}
	.overlay.active {
		opacity: 1;
		pointer-events: auto;
	}
	.spMenu{
		overflow-y: auto;
		-webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
		position: fixed;
		top: 0; right: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		transition: transform 0.3s ease;
		padding: 80px 2em 60px;
	}
	.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;
		border-top: 1px solid var(--border-color);
	}
	.spNavi > li{
		border-bottom: 1px solid var(--border-color);
	}
	.spNavi > li .subTitle{padding-top: 10px;}
	.spNavi li a{
		position: relative;
		display: block;
		padding:15px 0 15px 25px;
		font-optical-sizing: auto;
		font-size: 1.5rem;
		font-weight: 500;
		color: var(--text-primary);
		text-decoration: none;
	}
	.spNavi li a::before{
		content:"";
		position: absolute;
		left: 0;
		top: 23px;
		background: url("assets/img/icon_arrow_square.svg") right top/contain no-repeat;
		width: 15px;
		height: 15px;
		transition: 0.3s;
	}
	.spNavi li a:hover{text-decoration: underline;}
	.spNavi li ul{
		margin-left: 10px;
		padding: 5px 0 10px;
	}
	.spNavi li ul li a{
		padding:10px 0 10px 25px;
	}
	.spNavi li ul li a::before{top: 18px;}
	.spContact{
		margin: 0 auto 30px;
		max-width: 300px;
	}
	.spContact a{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 20px;
		padding: 1.5em 4em 1.5em 3em;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		border-color: var(--color-tertiary);
		background-color: rgba(30,167,63,0.8);
		font-family: var(--font-secondary);
		font-size: var(--font-size-accent);
		color:#fff;
		transition: 0.3s;
	}
	.spContact a::before{
		display: inline-block;
		content: "";
		width: 21px;
		height: 14px;
		background: url("assets/img/icon_contact.png")center top/contain no-repeat;
	}
	.spContact a:hover{
		background-color: rgba(10, 56, 99, 0.8);
	}
	.spInfo{
		margin-bottom: 30px;
		text-align: center;
		font-size: 1.4rem;
	}
	.spInfo .spLogo{margin-bottom: 20px;}
	.spInfo .spLogo img{max-width: 80%;height: auto;}
	.spInfo .spLogo a{display: block;}
	.spInfo .spTel{
		margin-top: 20px;
		font-family: var(--font-english);}
	.spInfo .spTel a{
		line-height: 1.3;
		display: block;
		width: fit-content;
		margin: 0 auto;
		text-decoration: none;
		font-size:3rem;
		color: var(--color-primary);
	}
}



/* サイドバナー
========================================== */
.sideBanner{
	z-index: 100;
	position: fixed;
	top: 100px;
	right: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.sideBanner .text{
	position: relative;
	z-index: 1;
	text-align: center;
}
.sideBanner .text img{
	width: 90%;
	height: auto;
}

.sideBanner a{
	margin-top: -10px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 0 1.2em;
	min-height: 13em;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	border-color: var(--color-tertiary);
	background-color: rgba(30,167,63,0.8);
	font-family: var(--font-secondary);
	font-size: var(--font-size-accent);
	color:#fff;
	transition: 0.3s;
}
.sideBanner a::before {
	display: inline-block;
	content: "";
	width: 21px;
	height: 14px;
	background: url("assets/img/icon_contact.png")center top/contain no-repeat;
}
.sideBanner a:hover{
	background-color: rgba(10, 56, 99, 0.8);
}

@media screen and (max-width:1024px) {
	.sideBanner{display: none;}
}


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

@media screen and (max-width:1200px) {
	.contentsInner {
		width: 100%;
		padding: 30px 30px 60px;
	}
}

@media screen and (max-width:599px) {
	.contentsInner {
		padding: 50px 20px;
	}
}

/* mv
========================================== */
.mvArea {
	z-index: 1;
	position: relative;
	width: 100%;
}
.mvArea img{
	width: 100%;
	height: auto;
}

.mvArea .mvText{
	z-index: 100;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	width: 100%;
	text-align: center;
	font-family: var(--font-secondary);
	font-size:min(3.571vw,4rem);
	font-weight: 600;
	opacity: 0;
	animation: fade-in 1.5s ease-in-out forwards;
}
@keyframes fade-in {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@media screen and (max-width:1024px) {
	.mvArea .mvText{padding-top: 60px;
		font-size:min(3.095vw,2.6rem);
	}
}
@media screen and (max-width:599px) {
	.mvArea .mvText{
		font-size:min(4.333vw,2.6rem);
	}
}

/* 強み
========================================== */
.strengthArea{
	position: relative;
	padding: 100px 0 0;
}
.strengthArea .textBlock p{
	margin-left: 30px;
}
.strengthArea .textBlock p.accent{
	font-size: var(--font-size-accent);
}

.strengthImage{
	z-index: 2;
	position: absolute;
	top: 50px;
	right: 0;
	width: 50%;
}
.strengthImage img{
	max-width: 100%;
	height: auto;
}

.strengthArea .ttlEnglish{
	position: relative;
}
.strengthFlowImage{
	margin-top: 50px;
	text-align: center;
}
.strengthFlowImage .text{
	display: block;
	margin-top: 1em;
	font-size: var(--font-size-subheading);
	font-family: var(--font-secondary);
	font-weight: 600;
	color: var(--text-secondary);
}
.strengthFlowImage img{
	width: 100%;
	height: auto;
}

@media screen and (max-width:599px) {
	.strengthArea {padding:60px 0 0;}
	.strengthArea .contentsInner{padding-top: 0;}
	.strengthImage{display: none;}
	.strengthArea .textBlock p{
		margin-left: 0;
	}
	.strengthFlowImage img{
		max-width: 100%;
		width: auto;
	}
}


/* 事業案内
========================================== */
.businessArea{
	padding: 60px 0 80px;
}

.businessIntro{
	display: flex;
	align-items: first baseline;
	gap: 60px;
	margin: 0 auto 60px;
	width: 1200px;
}
.businessIntro p {
    flex: 1;
}

.businessWrap{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	margin: 0 auto;
	width: 1200px;
}
.businessWrap .businessBox:nth-child(1){
	background: url(assets/img/business_bg01.jpg)top center/cover no-repeat;
}
.businessWrap .businessBox:nth-child(2){
	background: url(assets/img/business_bg02.jpg)top center/cover no-repeat;
}

.businessWrap .businessBox{
	display: flex;
	flex-direction: column;
	padding: 0 30px 60px;
}

.businessWrap .businessBox .businessDetail{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
	padding-bottom: 2em;
	background-color: rgba(255,255,255,0.9);
}
.businessWrap .businessBox .businessDetail .inner{
	padding: 3em 3em 1em;
	flex: 1;
}

.businessWrap .businessBox .businessDetail .title{
	margin-bottom: 30px;
	font-family: var(--font-secondary);
	font-size: var(--font-size-subheading);
	font-weight: 600;
	color: var(--text-secondary);
	text-align: center;
}
.businessWrap .businessBox .businessDetail  .text{
	line-height: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.businessWrap .businessBox .businessDetail  .break{
	flex-basis: 100%;
	height: 0;
}

.businessWrap .businessBox .businessDetail .btnMore{
	margin-top: auto;
}

.businessWrap .businessMenu{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
}
.businessWrap .businessMenu li a{
	position: relative;
	line-height: 1.2;
	display: block;
	padding: .8em 30px .8em 1em;
	background-color: rgba(255,255,255,0.9);
	box-shadow:var(--shadow-primary);
	color: var(--text-secondary);
	text-decoration: none;
	transition: 0.3s;
}
.businessWrap .businessMenu li a::after{
	content:"";
	position: absolute;
	right: 20px;
	top: 50%;
	background: url(assets/img/icon_arrow_square.svg) right top/contain no-repeat;
	transform:translateY(-50%);
	width: 15px;
	height: 15px;
	transition: 0.3s;
}
.businessWrap .businessMenu li a:hover{
	background-color: var(--color-primary);
	color: #fff;
}

@media screen and (max-width:1200px) {
	.businessIntro{
		display: flex;
		align-items: first baseline;
		gap: 60px;
		padding: 0 clamp(20px, 5vw, 30px);
		width: 100%;
	}

	.businessWrap{
		padding: 0 clamp(20px, 5vw, 30px);
		width:100%;
	}
}

@media screen and (max-width:840px) {
	.businessWrap .businessBox{
		padding: 0 clamp(20px, 5vw, 30px) 30px;
	}
	.businessWrap .businessBox .businessDetail{
		margin-bottom: 30px;
		padding-bottom: 1em;
	}
	.businessWrap .businessBox .businessDetail .inner{
		padding: 2em 2em 1em;
	}
	.businessWrap .businessBox .businessDetail  .text{
		display:block;
	}
	.businessWrap .businessMenu{
		grid-template-columns: repeat(1,1fr);
		gap: 15px;
	}
	.businessIntro p{
		flex: 1;
	}

}

@media screen and (max-width:599px) {
	.businessWrap{
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	.businessIntro{
		flex-direction: column;
		gap: 0;
		margin-bottom: 30px;
	}
}

/* プロジェクト領域
========================================== */
.domainInner{
	padding-top: 100px;
	background:url(assets/img/area_bg01.jpg)right top /cover no-repeat;
}
.domainIntro{
	display: flex;
	align-items: first baseline;
	gap: 60px;
	margin: 0 auto 60px;
	width: 1200px;
}
.domainIntro .ttlMain{
}
.domainIntro p{
	flex: 1;
}

.domainWrap{
	z-index: 1;
	position: relative;
	display: flex;
	margin: 0 auto;
	max-width: 1200px;
}

.domainWrap .textBlock{
	position: relative;
	padding-bottom: 3em;
	width:46.25%;
}
.domainWrap .textBlock .inner{
	padding: 5em 5em 2em 0;
}

.domainWrap .textBlock::after{
	z-index: -1;
	position: absolute;
	content: "";
	right:0;
	top: 0;
	background-color: rgba(255,255,255,.8);
	width: 100vw;
	height: 100%;
}

.domainWrap .textBlock .name{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1em;
	font-family: var(--font-secondary);
	font-size: var(--font-size-subheading);
	font-weight: 600;
	color: var(--text-secondary);
}
.domainWrap .textBlock .text{
	line-height: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.domainWrap .textBlock .name .break,
.domainWrap .textBlock .text .break{
	flex-basis: 100%;
	height: 0;
}

.domainWrap .linkBlock{
	width:53.75%;
	padding: 30px;
	display: flex;
	align-items: center;
	flex-direction: column;
    justify-content: center;
}
.domainWrap .linkBlock .energyList{
	display: grid;
	grid-template-columns: repeat(2, 220px);
	justify-content: center;
	gap: 30px;
}
.domainWrap .linkBlock .energyList .item a{
	display:flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	padding: 20px;
	aspect-ratio: 1/1;
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	background-color: rgba(255,255,255,.9);
	box-shadow:var(--shadow-primary);
	transition: 0.3s;
}
.domainWrap .linkBlock .energyList .item a:hover{
	color: var(--color-accent);
}

/*インフラ*/
.domainWrap .linkBlock .infraList{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}
.domainWrap .linkBlock .infraList .row{
	display: grid;
	grid-template-columns: repeat(2, 220px);
	justify-content: center;
	gap: 30px;
}
.domainWrap .linkBlock .infraList .row.row-1{
	grid-template-columns: repeat(1, 220px);
}
.domainWrap .linkBlock .infraList .item a{
	display:flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	padding: 20px;
	aspect-ratio: 1/1;
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	background-color: rgba(255,255,255,.9);
	box-shadow:var(--shadow-primary);
	transition: 0.3s;
}
.domainWrap .linkBlock .infraList .item a:hover{
	color: var(--color-accent);
}
.domainWrap .linkBlock .item .icon img{
	max-width: 100%;
	height: auto;
}

.infraWrap{
	flex-direction: row-reverse;
	background:url(assets/img/area_bg02.jpg)left top/cover no-repeat;
}
.infraWrap .domainWrap{
	flex-direction: row-reverse;
}
.infraWrap .domainWrap .textBlock{
	padding: 0 0 5em 5em;
}
.infraWrap .domainWrap .textBlock::after{
	right:auto;
	left: 0;
	top: 0;
}

@media screen and (max-width:1200px) {
	.domainInner{
		padding-top: 60px;
	}
	.domainIntro{
		gap: 60px;
		padding: 0 clamp(20px, 5vw, 30px);
		width: 100%;
		text-shadow :3px 3px 5px #fff,
		-3px 3px 5px #fff,
		3px -3px 5px #fff,
		-3px -3px 5px #fff,
		0 0 8px #fff,0 0 10px #fff;
	}
	.domainWrap .textBlock .inner{
		padding: 3em 3em 0;
	}
	.infraWrap .domainWrap .textBlock{
		padding: 0 0 3em;
	}
	.domainWrap .linkBlock .energyList{grid-template-columns: repeat(2, 180px);}
	.domainWrap .linkBlock .infraList .row{grid-template-columns: repeat(2, 180px);}
	.domainWrap .linkBlock .infraList .row.row-1{grid-template-columns: repeat(1, 180px);}
}

@media screen and (max-width:840px) {
	.domainWrap .textBlock .text{
		display: block;
	}
	.domainWrap .linkBlock .item .icon img{
		max-width: 60%;
		height: auto;
	}

	.domainWrap .linkBlock .energyList{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.domainWrap .linkBlock .energyList .item{
		width: calc((100% - 20px)/2);
	}
	.domainWrap .linkBlock .energyList .item a{padding: 1em;}
	.domainWrap .linkBlock .infraList{width: 100%;}
	.domainWrap .linkBlock .infraList .row{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		width: 100%;
	}
	.domainWrap .linkBlock .infraList .item{
		width: calc((100% - 20px)/2);
	}
	.domainWrap .linkBlock .infraList .row.row-1{width: 100%;}
	.domainInner{
		padding-top: 100px;
		background-position:center top;
	}
}

@media screen and (max-width:599px) {
	.domainIntro{
		flex-direction: column;
		gap: 0;
		margin-bottom: 30px;
	}
	.domainWrap,
	.infraWrap .domainWrap{
		flex-direction: column;
		gap: 0;
	}

	.domainWrap .textBlock{
		padding-bottom: 2em;
		width:100%;
	}
	.domainWrap .textBlock .inner{
		padding:3em 2em 0;
	}
	.domainWrap .linkBlock{
		width:100%;
		padding: 30px clamp(20px, 5vw, 30px);
	}
    .infraWrap .domainWrap .textBlock {
        padding:0 0 2em;
    }
}



/* 会社案内
========================================== */
.companyArea{
	z-index: 2;
	position: relative;
	padding: 130px 0;
}
.companyArea::before{
	z-index: -1;
	content: "";
	top: 5%;
	left: 0;
	position: absolute;
	width: 60%;
	height:90%;
	background-color: var(--bg-lightgrey);
}
.companyArea .contentsInner{
	display: flex;
	justify-content: space-between;
	gap: 80px;
}


.companyArea .companyMenu{
	display: flex;
	flex-wrap: wrap;
	gap:1em 2.5em;
	margin: 2em 0;
}
.companyArea .companyMenu li {
	position: relative;
	padding-bottom: 5px;
	padding-left: 23px;
}
.companyArea .companyMenu li::before{
	content:"";
	position: absolute;
	left: 0;
	top: 0.4em;
	background: url("assets/img/icon_arrow_square.svg") right top/contain no-repeat;
	width: 15px;
	height: 15px;
	transition: 0.3s;
}
.companyArea .companyMenu li a{
	text-decoration: none;
}
.companyArea .companyMenu li a:hover{
	text-decoration: underline;
}

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

@media screen and (max-width:840px) {
	.companyArea{
		padding: 60px 0;
	}
	.companyArea::before{
		width: 70%;
	}
	.companyArea .contentsInner{
		gap: 30px;
	}
}
@media screen and (max-width:599px) {
	.companyArea{
		padding: 60px 0 30px;
	}
	.companyArea::before{display: none;}
	.companyArea .contentsInner{
		flex-direction: column;
		padding-top: 0;
	}
	.companyArea .imageBlock{
		width:100%;
	}
}

/* 採用情報
========================================== */
.recruitArea{
	background:url(assets/img/recruitment_bg.jpg)left top /cover no-repeat;
	margin: 0 auto;
	padding-top: 100px;
	padding-left: 100px;
	width: 1200px;
	min-height:600px;
}
.recruitArea .ttlEnglish::after{
	position: absolute;
	right: calc((100% - 1200px)/2);
	bottom: 0;
	content: "";
	background-color: var(--border-color);
	width: 120%;
	height: 1px;
}

.recruitArea .recruitInner{
	display: flex;
	justify-content: space-between;
}

.recruitArea .textBlock{
	width: 40%;
	margin-top: 40px;
	margin-left: auto;
}
.recruitArea .textBlock P{
	padding-right: 60px;
}

@media screen and (max-width:1200px) {
	.recruitArea{
		padding: 60px 0 60px 80px;
		width: 100%;
		min-height:auto
	}
	.recruitArea .ttlEnglish{padding-left: 0;}

}
@media screen and (max-width:840px) {
	.recruitArea{
		padding: 60px clamp(20px, 5vw, 30px) 30px;
		background:url(assets/img/recruitment_bg_sp.jpg)left bottom /cover no-repeat;
	}
	.recruitArea .ttlEnglish::after{
		right: 0;
	}
	.recruitArea .recruitInner{
		padding: 30px clamp(20px, 5vw, 30px);
		flex-direction: column;
		background-color: rgba(255,255,255,0.8);
	}

	.recruitArea .textBlock{
		width: 100%;
		margin-top: 0;
		margin-left: auto;
	}
}


/* footer
========================================== */
footer {width: 100%;}
.footerWrap {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding:100px 30px 30px;
	max-width: 1200px;
	gap: 20px;
}
.footerWrap a:hover img{
	opacity: .6;
	transition: .3s;
}
.footerInfo{width: 30%;}
.footerInfo .footerLogo {
	margin: 0 0 20px;
	width: 200px;
}
.footerInfo .footerLogo a{display: block;}
.footerInfo .footerLogo img{
	max-width: 100%;
	height: auto;
}
.footerInfo .footerAddress{margin: 20px 0;}
.footerInfo .footerTel{
	font-family: var(--font-english);
	font-weight: 400;
}
.footerInfo .footerTel a{
	line-height: 1.3;
	display:block;
	letter-spacing: 2px;
	text-decoration: none;
	font-size: clamp(3rem, 4.762vw,4rem);
	color: var(--color-primary);
}
.footerLink{}
.footerNaviWrap{
	display: flex;
	flex-wrap: wrap;
	gap:1.5em 3em;
}
.footerNavi li + li{margin-top: 1.5em;}
.footerNavi > li{
	position: relative;
	line-height: 1.2;
	padding-left: 30px;
	font-weight: 600;
	color: var(--text-secondary);
}
.footerNavi > li::before{
	content:"";
	position: absolute;
	left: 0;
	top: 0.2em;
	background: url("assets/img/icon_arrow_square.svg") right top/contain no-repeat;
	width: 15px;
	height: 15px;
	transition: 0.3s;
}
.footerNavi li a{
	text-decoration: none;
	font-weight: 600;
	color: var(--text-secondary);
}
.footerNavi li a:hover{
	text-decoration: underline;
}
.footerNavi li ul{margin-top: 1.5em;}
.footerNavi li ul li{
	position: relative;
	padding-left:25px;
}
.footerNavi li ul li::before{
	content:"";
	position: absolute;
	left: 0;
	top: 0.2em;
	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;
	background-color: var(--color-primary);
	transform:rotate(-90deg);
	width: 15px;
	height: 15px;
	transition: 0.3s;
}
.footerNavi li ul li a{
	font-weight: 400;
	color: var(--text-primary);
}
.footerContact{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	margin-top: 50px;
}
.footerContact .link a{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 1.3em 2em 1.3em 1em;
	min-width: 260px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	border-color: var(--color-tertiary);
	background-color: rgba(30,167,63,0.8);
	font-family: var(--font-secondary);
	font-size: var(--font-size-accent);
	color:#fff;
	transition: 0.3s;
}
.footerContact .link a::before{
	display: inline-block;
	content: "";
	width: 21px;
	height: 14px;
	background: url("assets/img/icon_contact.png")center top/contain no-repeat;
}
.footerContact a:hover{
	background-color: rgba(10, 56, 99, 0.8);
}
.footerContact .text img{
	max-width: 100%;
	height: auto;
}

.copyright {
	margin: 0 auto;
	padding:2rem 1rem;
	text-align: center;
	font-size: 1.2rem;
	background-color: var(--bg-beige);
}

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

@media screen and (max-width: 840px) {
	.footerWrap {
		flex-direction: column;
		padding:60px 30px;
		gap: 30px;
	}
	.footerInfo{width: 100%;text-align: center;}
	.footerInfo .footerLogo{margin: 0 auto 20px;}
	.footerNaviWrap{width: 100%;flex-wrap: wrap;}
	.footerContact{justify-content: center;}
	.footerContact .text{width: 40%;}
	.footerContact a{
		padding: 1.5em 3em 1.5em 2em;
	}
}

@media screen and (max-width: 599px) {
	.footerContact{
		flex-direction: column;
		gap: 0;
	}
	.footerContact .text{
		width: auto;
	}
	.footerContact a{width:100%;}
}
@media screen and (max-width: 380px) {
.footerNavi li ul{margin-left: -25px;}
}

/* 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: 48px;
	height: 48px;
	background-color: var(--color-primary);
}
#pageTop a::before{
	position: absolute;
	top:50%;
	left:50%;
	content: "";
	width: 20px;
	height: 20px;
	background:url("assets/img/icon_arrow.svg")left top/contain no-repeat;
	transform: translate(-50%,-50%) rotate(180deg);
}

#pageTop:hover a{background-color: var(--color-secondary);}

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