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

/* Body
========================================== */
html, body{
	width: 100%;
	font-size:62.5%;/*10px*/
}
body {
	color:var(--txt-color);
	line-height:1.8;
	background-color: var(--bg-color);
	font-size:1.6rem;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
@media screen and (max-width: 840px) {
	body{word-wrap:break-word;}
}
@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;}}
@media screen and (max-width:599px) {
	body {font-size: 1.4rem;}
}

/* header
========================================== */
.headerArea{
	z-index: 1000;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: var(--bg-color);
	border-top: 3px solid var(--main-color);
}
.headerAreaInner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1500px;
	height: 100px;
	margin: 0 auto;
}
.headerLogo{
	position: relative;
	margin-left: 20px;
}
.headerLogo a{
	text-decoration: none;
	color: var(--txt-color);
	font-weight: bold;
}
.headerLogo img{max-width: 100%;height: auto;}
.headerLogo span{
	position: absolute;
	top: 30%;
	width: 250px;
	margin-left: 30px;;
	font-size: clamp(1.8rem, 2vw, 2.2rem);
}
.headerArea .inner{
	display: flex;
	justify-content:flex-end;
	align-items: center;
	padding-right: 1em;
}
.headerMail{
	position: relative;
	width: 140px;
	height: 40px;
	border-radius: 20px;
	background-color: var(--main-color);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
	transition: 0.5s;
}
.headerMail:hover{
	opacity: 0.8;	
}
.headerMail a {
	position: absolute;
	left: 0;
	width: 140px;
	height: 40px;
}
.headerMail a::before{
	content: '';
	width: 32px;
	height: 32px;
	background-color: #fff;
	border-radius: 20px;
	position: absolute;
	top: calc(50% - 16px);
	left: calc(0% + 5px);
	bottom: 0;
	transition: 0.5s;
}
.headerMail:hover a::before{
	left: calc(0% + 103px);
}
.headerMail a::after{
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 1px var(--main-color);
	border-right: solid 1px var(--main-color);
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 5px);
	left: calc(0% + 14px);
	bottom: 0;
	transition: 0.5s;
}
.headerMail:hover a::after{
	border-top: solid 1px var(--sub-color);
	border-right: solid 1px var(--sub-color);
	left: calc(0% + 113px);	
}
.headerMail img{
	position: absolute;
	width: 20px;
	top: 12px;
	left: 65px;
}
.headerMail:hover img{
	opacity: 0.8;
}

.gnav{padding-right: 2em;}
.gnav ul{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	list-style: none;}
.gnav ul li{
	margin: 0 2em;}
.gnav ul li a{
	font-family: "Jost", sans-serif;
	font-weight: 500;
	line-height: 1.2;
	display: block;
	color: var(--txt-color);
	font-size: 1.6rem;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}
.gnav ul li a span {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
.gnav ul li a span::after {
	position: absolute;
	bottom: -8px;
	left: 0;
	content: '';
	width: 100%;
	height: 3px;
	background: var(--sub-color);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
.gnav ul li a:hover span::after,
.gnav ul li.current a span::after{
	transform: scale(1, 1);
}
.spBtn{display: none}
.drawerMenu{display: none;}

@media screen and (max-width:1200px){
	.headerArea .inner {padding-right: 0;}
	.gnav {padding-right:1em;}
	.gnav ul li {
		margin: 0 1em;
	}
}

@media screen and (max-width:840px){
	.headerArea{position: absolute;background: none;height: 50px;}
	.headerAreaInner{height: 50px;}
	.headerLogo{padding-top: 20px;margin-left: 10px;width: auto;}
	.headerLogo img{height: 50px;width: auto;}
	.headerLogo span{
		padding-top: 10px;
	}
	.gnav{display: none;}
	.headerMail{display: none;}
	.drawerMenu{
		display: block;
		overflow-y: scroll;
		position: fixed;
		top: 0;
		right: -80%;
		padding:70px 20px 60px;
		width: 80%;
		height: 100%;
		background-color:#fff;
		border-left: 1px solid var(--border-color);
		transition: 0.5s;
	}
	.drawerMenu.open{right: 0;}

	.drawerMenu::-webkit-scrollbar{width: 10px;}
	.drawerMenu::-webkit-scrollbar-track{background: #fff;}
	.drawerMenu::-webkit-scrollbar-thumb {background: #fff;}
	.gnavSp{
		margin-bottom: 40px;
		padding:1em 10px;
		border-top: 1px solid var(--main-color);
		border-bottom: 1px solid var(--main-color);
	}
	.gnavSp li{}
	.gnavSp li a{
		display: block;
		position: relative;
		padding: 0.8em 1em;
		color: var(--main-color);
		font-optical-sizing: auto;
		font-family: "Jost", sans-serif;
		font-size: 2rem;
		font-weight: 600;
		line-height: 1.4;
		display: block;
		text-decoration: none;
		text-align: center;
	}
	.gnavSp li a:hover{color: var(--sub-color);}
	.gnavSp li span{
		display: block;
		color: var(--txt-color);
		font-size: 1.2rem;
		font-weight: 500;
	}
	.spHeaderLogo{
		margin-bottom: 10px;
		text-align: center;
	}
	.spHeaderInfo .company{
		margin-bottom: 10px;
		color: var(--txt-color);
		font-weight: 600;
		text-align: center;
		font-size: 1.4rem;
	}
	.spHeaderInfo .tel {
		font-family: "Jost", sans-serif;
		font-size: 2.5rem;
		font-weight: 500;
		text-align: center;
		color: var(--main-color);
		line-height: 1.2;
	}
	.spHeaderInfo .tel a{
		display: inline-block;
		margin-bottom: 0.4em;
		text-decoration: none;
		color: var(--main-color);
	}
	.spHeaderInfo .tel span{
		display: block;
		font-size: 1.6rem;
		font-weight: 400;
		color: var(--txt-color);
	}
	.spHeaderLogo img{
		width: 140px;height: auto;
	}
	.spBtn{
		position:fixed;
		top: 0;
		right: 0;
		display: inline-block;
		width: 50px;
		height:50px;
		padding: 20px 13px 15px;
		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 ease-in-out;
		-moz-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}
	.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);
	}
}
@media screen and (max-width:599px) {
	.headerLogo{padding-top: 10px;margin-left: 10px;width: auto;}
	.headerLogo img {
		height: 40px;
	}
	.headerLogo span{
		display: inline-block;
		width: 11.5em;
		top: 15%;
		margin-left: 8px;
		padding-top: 5px;
		font-size: clamp(1.4rem, 4.5vw, 18px);
	}
	.drawerMenu {
		padding: 55px 20px 60px;
	}
	.spHeaderInfo .tel span {
		font-size: 1.4rem;
	}
}


/* mv
========================================== */
.mvArea{
	margin-top: 100px;
	background: url(images/mv_bg.png) center 50px / contain no-repeat;
}
.mvWrap{
	position: relative;
	overflow: hidden;
	aspect-ratio: 160 / 100;
	max-width: 1500px;
	margin: 0 auto;
	}
.mvWrap .mvInner{
	z-index: 10;
	position: absolute;
	left: 13%;
	bottom: 18%;
	margin: 0 auto;
}
.mvText{
	display: flex;
	flex-wrap: wrap;
	max-width: 1500px;
	width: 100%;
}
.mvWrap .mvInner .mvText img{
	margin-bottom: 70px;
}

.mvWrap .mvInner .mvText h1{
	font-size: clamp(1.6rem, 2vw, 2.2rem);
	font-weight: bold;
	line-height: 1.7;
}

.pcImg{display: block}
.tabletImg{display: none;}

@media screen and (max-width:1200px){
	.mvWrap .mvInner{
		left: 5%;
		bottom: 10%;
	}
	.mvWrap .mvInner .mvText .mv_img01{
		width: 80%;
		height: auto;
	}
	.mvWrap .mvInner .mvText .mv_img02 {
		width: 70%;
		height: auto;
	}
}

@media screen and (max-width:840px){
	.mvWrap {aspect-ratio: 180 / 100;}
	.mvWrap .mvInner {bottom:0}
	.mvWrap .mvInner .mvText{padding: 1em 1em 3em;}
}
@media screen and (max-width:599px){
	.mvArea {margin: 50px auto 20px;}
	.mvWrap{aspect-ratio: 1;}
	.pcImg{display: none;}
	.tabletImg{display: block;}
	.mvWrap .mvInner{bottom: 5%; left: 0;}
	.mvWrap .mvInner .mvText{padding: 2em 1.8em;}
	.mvWrap .mvInner .mvText .mv_img01,
	.mvWrap .mvInner .mvText .mv_img02{
		width: 100%;
		margin-bottom: 30px;
	}
}

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

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

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


/* business
========================================== */
.businessAreaInner{
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding: 10% 10% 8%;
	background-color: #fff;
	background-image: url(images/businessArea_bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}
.businessArea h2.ttlMain{
	position: absolute;
	top: calc(80px + 7rem);
	right: 16%;
	height: 440px;
	margin: 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	line-height: 1;
}
.businessArea h2.ttlMain span{
	position: absolute;
	top: -0.8em;
	left: -0.06em;
	font-size: 10rem;
}
.businessArea h2.ttlMain p{
	position: absolute;
	top: 4px;
	right: -2em;
	font-weight: 700;
}
.businessArea p{
	font-weight: 400;
	margin-bottom: 30px;
}
.businessArea .btnMore{
	margin-top: 120px;
}
@media screen and (max-width:1200px) {
	.businessAreaInner {
		width:100%
	}
	.businessArea h2 {
		right: 10%;
	}
	.businessArea h2.ttlMain span {
		left: calc(65% - 5rem);
	}
}
@media screen and (max-width:840px) {
	.businessAreaInner{
		padding: 50px 3.5em 80px;
	}
	.businessArea h2.ttlMain{
		writing-mode: horizontal-tb;
		position: relative;
		top: 0;
		right: 0;
		left: -25px;
		height: auto;
		margin: 20px auto 60px;
	}
	.businessArea h2.ttlMain span {
		position: relative;
		left: auto;
		top: 0;
		font-size: 7rem;
	}
	.businessArea h2.ttlMain p {
		position: relative;
		top: 10px;
		right: 0;
		padding-left: 3.5em;
		font-weight: bold;
	}
	.businessArea .btnMore {
		margin-top: 60px;
	}
}
@media screen and (max-width:599px) {
	.businessAreaInner {
		padding: 30px 10% 60px;
	}
	.businessArea h2.ttlMain {
		left: 0;
		text-align: center;
	}
	.businessArea h2.ttlMain p{
		padding-left: 0;
	}
	.businessArea h2.ttlMain span{
		font-size: 6rem;
	}
	.businessArea p br{
		display: none;
	}
}


/* case
========================================== */
.caseArea{
	position: relative;
	padding: 60px 0;
	z-index: 1;
}
.caseList{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 100px;
}
.caseList div{
	position: relative;
	width: 400px;
	margin: 0 30px;
}
.caseList div img{
	width: 100%;
	height: auto;
}
.caseList .before{
	max-height: 265px;
}
.caseList .after{
	width: 440px;
	max-height: 295px;
}
.caseList .before > img,
.caseList .after > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.caseList .before:before,
.caseList .after:before{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 7px 10px 5px;
	color: #fff;
	text-align: center;
	font-family: "Jost", sans-serif;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1px;
}
.caseList .before:before{
	content: 'BEFORE';
	background: var(--bg-subcolor);
}
.caseList .after:before {
	content: 'AFTER';
	background: var(--main-color);
	font-size: 130%;
}
.caseList .before::after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 18px;
	border-color: transparent transparent transparent var(--main-color);
	position: absolute;
	top: 0;
	right: -40px;
	bottom: 0;
	margin: auto;
}

@media screen and (max-width:840px) {
	.caseArea{
		padding: 40px 0 20px;
	}
	.caseList {
		display: block;
	}
	.caseList div {
		width: 70%;
		margin: 0 auto 50px;
	}
	.caseList .before{
		max-height: none;
	}
	.caseList .after{
		max-height: none;
	}
	.caseList .before::after {
		top: calc(100% + 25px);
		right: calc(50% - 9px);
		transform: rotate(90deg);
	}
	.caseList .after {
		width: 80%;
	}
}
@media screen and (max-width:599px) {
	.caseArea{
		padding: 0;
	}
	.caseList{
		margin: 0 auto 60px;
	}
	.caseList div {
		width: 80%;
	}
	.caseList .after {
		width: 90%;
	}
	.caseList .before:before,
	.caseList .after:before{
		padding: 4px 10px 2px;
	}
}


/* company
========================================== */
.companyArea{
	position: relative;
	margin: 70px auto 0;
	padding: 100px 0;
	
}
.companyArea::before{
	content: '';
	position: absolute;
	top: -25%;
	width: 100%;
	height: calc(100% + 25%);
	background-image: url(images/companyArea_bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: right;
	z-index: 1;
}
.companyArea::after {
	content: '';
	position: absolute;
	top:0;
	background-color: rgb(255 255 255 / 60%);
	width: 100%;
	height: calc(100% - 150px);
	z-index: 2;
}
.companyAreaInner{
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 100px;
	z-index: 3;
}
.companyArea .ttlMain{
	margin: 0 auto 60px;
}
.companyAreaBox{
	padding: 0 3.5em;
}
.companyAreaList{
	display: flex;
	justify-content: center;
	margin-top: 80px;
}
.companyAreaList ul{
	width: 50%;
}
.companyAreaList ul li dl{
	display: flex;
	align-items: baseline;
	margin-bottom: 25px;
}
.companyAreaList ul li dl dt{
	position: relative;
	width: 25%;
	padding-left: 20px;
	color: var(--txt-subcolor);
}
.companyAreaList ul li dl dt::before{
	content: '';
	position: absolute;
	left: 0;
	border-left: 4px solid var(--main-color);
	height: 26px;
}
.companyAreaList ul li dl dd{
	width: 75%;
	line-height: 1.6;
	font-weight: bold;
}
.companyAreaList ul li dl dd span{
	display: block;
	padding-left: 1em;
	font-weight: normal;
}
.companyAreaList ul li dl dd span.tel{
	font-family: "Jost", sans-serif;
	padding-left: 0;
}
@media screen and (max-width:1200px) {
	.companyArea {
		padding: 50px 0 100px;
	}
	.companyAreaInner {
		width: 100%;
	}
	.companyArea .ttlMain{
		margin-left: 30px;
	}
	.companyAreaList ul{
		padding-right: 10px;
	}
}
@media screen and (max-width: 840px) {
	.companyArea {
		padding: 50px 0;
	}
	.companyAreaInner {
		padding-bottom: 80px;
	}
	.companyArea::after {
		height: calc(100% - 80px);
	}
	.companyAreaList{
		display: block;
	}
	.companyAreaList ul{
		width: 100%;
		padding-right: 0;
	}
	.companyAreaList ul li dl dt{
		width: 30%;
	}
	.companyAreaList ul li dl dd{
		width: 70%;
	}
}
@media screen and (max-width:599px) {
	.companyArea{
		margin: 60px auto 0;
		padding: 40px 0 30px;
	}
	.companyArea::after {
		height: calc(100% - 4%);
	}
	.companyArea .ttlMain {
		margin-left: 0;
		text-align: center;
	}
	.companyArea .ttlMain.left p{
		padding-left: 0;
	}
	.companyAreaInner {
		padding-bottom: 60px;
	}
	.companyAreaBox{
		padding: 0 10%;
	}
	.companyAreaList{
		margin-top: 50px;
	}
	.companyAreaList ul li dl {
		display: block;
	}
	.companyAreaList ul li dl dt,
	.companyAreaList ul li dl dd{
		width: 100%;
	}
	.companyAreaList ul li dl dt{
		margin-bottom: 10px;
	}
}


/*sitemap
==========================================*/
.sitemapBtn{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
.sitemapBtn li{
	width: 48%;
	margin-bottom: 30px;
	background: #fff;
}
.sitemapBtn li a {
	display: flex;
	align-items: center;
	position: relative;
	height: 100%;
	width: 100%;
	padding: 1em 1.4em;
	text-decoration: none;
	color: var(--txt-color);
	gap: 1.2em;
}
.circle{
	position: relative;
	background: #eee;
	color: #fff;
	padding: 0.7rem;
	border-radius: 100vh;
	width: 4.2rem;
	height: 4.2rem;
	text-align: center;
	transition: 0.3s;
}
.circle:after {
	content: '';
	width: 1.3rem;
	height: 1.3rem;
	border-top: 1px solid var(--txt-color);
	border-right: 1px solid var(--txt-color);
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: calc(50% - 2px);
	right: 50%;
	border-radius: 1px;
	transition: 0.3s ease-in-out;
}
.sitemapBtn li a:hover .circle {
	transform: scale(1.20);
	background: var(--main-color);
}
.sitemapBtn li a:hover .circle:after {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.sitemapBtn li a:hover p{
	color:var(--sub-color);
}
.sitemapBtn li a span{
	display: block;
	font-family: "Jost", sans-serif;
	font-size: 1.4rem;
}
@media screen and (max-width:599px) {
	.sitemapBtn {
		display: block;
	}
	.sitemapBtn li {
		width: 100%;
		margin: 0 auto 20px;
	}
	.sitemapBtn li a{
		line-height: 1.6;
	}
	.sitemapBtn li a span{
		font-size: 1.2rem;
	}
}


/* footer
========================================== */
footer{
	padding-bottom: 20px;
	background-color: var(--main-color);
}
.footerWrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	padding: 80px 0;
	width: 1200px;
}
.footerInfo{
	margin-top: 50px;
	width: 320px;
	color: #fff;
	text-align: center;
}
.footerInfo .logo{width: 110px; margin: 0 auto 15px;}
.footerInfo .logo img{width: 100%;height: auto;}
.footerInfo .company{ font-weight: 500;}
.footerInfo .address{
	line-height: 1.5;
	margin: 8px auto;
}
.footerInfo .tel {
	font-family: "Jost", sans-serif;
	line-height: 1.5;
}
.footerInfo .tel a{
	color: #fff;
	font-size: 3.2rem;
	font-weight: 450;
	letter-spacing: 1px;
	text-decoration: none;
}
.footerMail {
	position: relative;
	width: 140px;
	height: 40px;
	margin: 30px auto;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
	transition: 0.5s;
}
.footerMail:hover {
	opacity: 0.8;
}
.footerMail a {
	position: absolute;
	left: 0;
	width: 140px;
	height: 40px;
}
.footerMail a::before {
	content: '';
	width: 32px;
	height: 32px;
	background-color: var(--main-color);
	border-radius: 20px;
	position: absolute;
	top: calc(50% - 16px);
	left: calc(0% + 5px);
	bottom: 0;
	transition: 0.5s;
}
.footerMail:hover a::before {
	left: calc(0% + 103px);
}
.footerMail a::after {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 5px);
	left: calc(0% + 14px);
	bottom: 0;
	transition: 0.5s;
}
.footerMail:hover a::after {
	left: calc(0% + 113px);
}
.footerMail img {
	position: absolute;
	width: 20px;
	top: 12px;
	left: 65px;
}
.footerMail:hover img {
	opacity: 0.8;
}
.footerMap p{
	margin: 15px 20px;
	font-weight: 500;
	color: #fff;
}
.footerMap img{
	margin-right: 10px;
}
.footerNavi{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-family: "Jost", sans-serif;
}
.footerNavi{margin-bottom: 60px;}
.footerNavi li {
	position: relative;
	margin: 0 20px;
	&::before {
		content: attr(data);
		display: block;
	}
	&::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 2px;
		right: 0;
		left: 0;
		margin: auto;
		justify-content: center;
		height: 1px;
		background-color: #fff;
		transition: width 300ms;
		width: 100%;
	}
	&:hover {
		&::after {
			width: 0;
		}
	}
}
.footerNavi li a{
	display: block;
	text-decoration: none;
	color: #fff;
	font-weight: 450;
}
.copyright{
	display: flex;
	justify-content: center;
	width: 17em;
	margin: 0 auto;
	padding: 0.1em 0;
	font-family: "Jost", sans-serif;
	background: #fff;
	border-radius: 20px;
	color: var(--main-color);
	font-size: 1.2rem;
	line-height: 2;}

@media screen and (max-width: 1200px) {
	.footerWrap{
		padding: 50px 30px 60px;
		width: 100%;
	}
	.footerInfo{
		width: 40%;
		padding-right: 20px;
	}
	.footerMap {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 35%;
	}
	.footerMap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
@media screen and (max-width: 840px) {
	.footerWrap{flex-direction: column;padding-bottom: 30px;}
	.footerNaviWrap{order: 1;}
	.footerInfo{
		order: 2;
		text-align: center;
		width: 100%;
		padding: 30px 0 0;
	}
	.footerInfo .logo{width: 160px;margin: 0 auto 20px;}
	.footerInfo .tel a {
		font-size: 3rem;
	}
}
@media screen and (max-width: 599px) {
	.footerMap {
		padding-top: 65%;
	}
}
@media screen and (max-width: 320px) {
}


/* pageTop
========================================== */
#pageTop{
	position:fixed;
	line-height: 1;
	right:20px;
	bottom:20px;
	z-index: 100;}
#pageTop a{
	display: block;
	position:relative;
	padding:20px;
	background-color:var(--main-color);
	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(--sub-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}
}

/* breadcrumb
========================================== */
.breadcrumb{
	margin: 0 auto 60px;
	max-width: 1050px;
}
.breadcrumb li{
	display: inline;
	list-style-type: none;
	color: var(--txt-color);
	font-size: 1.4rem;}

.breadcrumb li:before {
	content: "/";
	padding: 0 10px;}
.breadcrumb li:first-child:before {content: none;}
.breadcrumb li a{
	text-decoration: none;
	color: #333;}
.breadcrumb li a:hover{text-decoration: underline;}

@media screen and (max-width: 1080px) {
	.breadcrumb{
		max-width: 100%;
		padding: 0 30px;}
}
@media screen and (max-width: 840px) {
	.breadcrumb {
		margin: 0 auto 50px;
	}
}
@media screen and (max-width: 599px) {
	.breadcrumb{padding: 0 20px;}
	.breadcrumb li{font-size: 1.2rem;}
}

/* subBox
========================================== */
.sectionBox{
	width: 1050px;
	margin:0 auto 130px;}
.subTxt{
	width: 94%;
	margin: 0 auto 50px;
}
.subBox{
	margin-bottom: 95px;
	padding: 3em 2em 0.5em;
	background: #fff;
}
.subBox.contactPage{
	margin-bottom: 50px;
}
.subBox.thanks{
	padding: 3em 4em 4em;
}
@media screen and (max-width: 1080px) {
	.sectionBox{
		width: 100%;
		padding: 0 30px;
	}
}
@media screen and (max-width: 599px) {
	.sectionBox{
		margin: 0 auto 50px;
		padding: 0 15px;
	}
	.subBox{
		margin-bottom: 30px;
		padding: 2em 1.2em 0.5em;
	}
	.subBox.thanks{
		padding: 2em 1.5em 2em;
	}
}