@charset "utf-8";
/*
Theme Name: y-t-c
Author: YES-REFORM CO., LTD.
*/

/* Body
========================================== */
html, body{
	width: 100%;
	font-size:62.5%;/*10px*/
}
body {
	color:var(--txt-color);
	line-height:1.8;
	font-size:1.6rem;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.02em;
}
@media screen and (max-width: 840px) {
	body{
		word-wrap:break-word;
		font-size: 1.6rem;}
}
@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{
	z-index: 1000;
	position: fixed;
	top:0;
	left: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	height: 150px;
	background-color: rgba(255,255,255,0.8);
	/* background-color: #fff; */
	/* animation: scrollAnime linear;
	animation-timeline: scroll(); */
}
@keyframes scrollAnime {
	0% {
		background: none;
	}
	30% {
		background: rgba(255, 255, 255, 0.8);
	}
	100% {
		background: rgba(255, 255, 255, 0.8);
	}
}
.headerArea.is-active{
	height: 90px;
}

.headerLogo{
	margin-left: 50px; padding-top: 40px;
}
.headerLogo img{
	max-width: 100%;height: auto;
}

.headerArea .Inner{
	display: flex;
	justify-content:flex-end;
	height: 100%;
}
.headerArea .Inner .gnav{
	display: flex;
	padding: 3em 1em 0 0;
}
.headerInfo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 1em 0 0;
	text-align: center;
}
.headerInfo .address{
	font-size: 1.4rem;
}
.headerArea.is-active .headerInfo .address{
	display: none;
}
.headerInfo .tel .number{
	font-family: "Jost", sans-serif;
	font-size: 3.4rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-navy);
}
.headerInfo .tel .hours{
	line-height: 0.5;
	font-weight: 700;
}
.headerInfo .tel .hours span{
	padding-left: 0.3em;
	font-family: "Jost", sans-serif;
	font-weight: 600;
}
.headerContact a{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	row-gap: 0.8em;
	flex-wrap: wrap;
	width: 180px;
	height: 100%;
	text-decoration: none;
	color: #fff;
	background: var(--main-color);
	transition: .3s;
}
.headerContact a:hover{
	background: var(--point-color);
}
.headerContact p{
	width: 100%;
	font-family: "Jost", sans-serif;
	font-weight: 300;
	text-align: center;
	line-height: 1;
}

.gnav ul{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	list-style: none;}
.gnav ul li{
	margin: 0 2em;
}
.gnav ul li a{
	line-height: 1.2;
	display: block;
	color: var(--txt-color);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.9vw, 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(--point-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:1500px) {
	.headerLogo{
		margin-left: 20px;
		padding-top: 20px;
	}
	.headerArea .Inner{
		position: absolute;
		top: 0;
		right: 0;
	}
	.gnav ul li{
		margin: 0 min(2vw, 2em);
	}
	.headerInfo .tel .number{font-size: 3rem;}
}
@media screen and (max-width:1200px){
	.headerLogo{
		width: 220px;
	}
	.headerArea .Inner .gnav{
		padding: 3em 0em 0;
	}
	.headerInfo {
		display: none;
	}
	.headerInfo .address {
		font-size: 1.2rem;
	}
	/* .gnav ul li{
		margin: 0 min(2.6vw, 2em);
	} */
	/* .gnav ul li a{font-size: 1.4rem;} */
	.gnav {padding-right:1em;}
}
@media screen and (max-width:1000px){
	@keyframes scrollAnime {
		0% {
			background: rgba(255, 255, 255, 1);
		}
		5% {
			background: rgba(255, 255, 255, 0.8);
		}
		100% {
			background: rgba(255, 255, 255, 0.8);
		}
	}
	/* .gnav ul li a {font-size: 1.3rem;} */
}
@media screen and (max-width:840px){
	.headerArea{
		position: fixed;
		border: none;
		height: 50px;
	}
	.headerArea.is-active{
		height: 50px;
	}
	.headerArea .Inner{
		display: none;
	}
	.headerLogo{
		padding-top: 10px;
		width: auto;
		filter: drop-shadow(1px 1px 0 #fff);
	}
	.headerLogo img{
		height: 30px;
		width: auto;
	}
	.headerInfo,
	.gnav{ display: none;}
	.drawerMenu{}
	.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(--txt-color);
		font-optical-sizing: auto;
		font-size: 1.5rem;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
	}
	.gnavSp li a:hover{
		text-decoration: 3px solid var(--point-color) underline;
		text-underline-offset: 5px;
	}
	.spHeaderLogo{margin-bottom: 20px;text-align: center;}
	.spHeaderLogo img{
		width: 140px;height: auto;
	}
	.spAddress{
		margin-bottom: 10px;
		line-height: 1.2;
		font-size: 1.4rem;
		text-align: center;}
	.spTel{text-align: center;}
	.spTel a{
		display: inline-block;
		padding: 0 1rem;
		text-decoration: none;
		background: var(--c-black);
	}
	.spTel a span{
		font-size: 3rem;
		font-family: "Jost", sans-serif;
		font-weight: 500;
		background: linear-gradient(90deg, #b19851, #f7f0ba 45%, #c5aa59);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 1.2;
	}
	.spTel p{
		font-size: 1.4rem;
		font-weight: 700;
	}
	.spTel p span{
		padding-left: 0.3em;
		font-family: "Jost", sans-serif;
		font-weight: 600;
	}
	.spTel .insta{
		width: 32px;
		margin: 1em auto 0;
	}
	.spTel .insta a{
		padding: 0;
		background: transparent;
	}
	.spTel .insta img{
		width: 100%;
	}
	.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);
	}
}


/* mv
========================================== */
.mvWrap{
	position: relative;
	overflow: hidden;
	aspect-ratio: 134 / 82;
	margin-top: 150px;
}
.mvWrap .mvImg {
	padding-left: 15%;
}
.mvWrap .mvImg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mvWrap .mvInner{
	z-index: 10;
	position: absolute;
	left: 0;
	bottom: 14%;
	margin: 0 auto;
}
.mvWrap .mvInner .mvText{
	padding: 2.4em 2.2em 2.8em 8em;
	width: fit-content;
	background-color: var(--main-color);
	color: #fff;
	font-weight: 400;
}
.mvWrap .mvInner::after{
	content: '';
	position: absolute;
	top: -10%;
	left: 0;
	width: 98%;
	height: 130%;
	background: url(images/mvtext_bg.png) no-repeat;
	background-size: cover;
}

.mvWrap .mvInner .mvText .txt{
	line-height: 1.6;
	font-size: clamp(2rem, 3vw, 3.6rem);
	font-weight: 700;
}
.pcImg{display: block}
.tabletImg{display: none;}

@media screen and (max-width:1200px){
	.mvWrap .mvInner{
		bottom: 10%;
	}
}
@media screen and (max-width:1200px) {
	.mvWrap .mvInner .mvText{
		padding: 1.2em 0.6em 1.2em 5.4vw;
	}
}
@media screen and (max-width:840px){
	.mvWrap{margin-top: 50px;}
}
@media screen and (max-width:599px){
	.mvWrap{aspect-ratio: 8 / 11;}
	.mvWrap .mvImg{
		height: 100%;
		padding-left: 0;
	}
	.pcImg{display: none;}
	.tabletImg{display: block;}
	.mvWrap .mvInner{bottom: 5%;}
	.mvWrap .mvInner .mvText{padding: 0.6em 0.4em 0.8em 1.4em;}
	.mvWrap .mvInner .mvText .txt{
		font-size: max(2rem, 5.4vw);
	}
}


/* contents
========================================== */
.contents{
	margin:0 auto;
	width:100%;
	/* overflow: hidden; */
}
.contents::before{
	content: '';
	position: absolute;
	left: 0;
	width: 30%;
	height: 100%;
	margin-top: -10%;
	background: url(images/mission_bg01.png) no-repeat;
	background-size: contain;
	z-index: 999;
}
.contents p+p,
.subcontents p+p{
	margin-top: 1.5em;
}
.contents .Inner{
	margin:0 auto;
	padding: 0;
	width:1200px;
}
.subcontents .Inner{
	margin: 0 auto;
	padding: 0;
	width: 1024px;
}
.subcontents .sub{
	margin-bottom: 50px;
	padding: 30px 0 0;
	border-bottom: 1px solid var(--point-color);
}
.pc{display: block;}
.sp{display: none;}
.sp320{display: none;}

@media screen and (max-width:1200px){
	.contents {
		/* overflow: hidden; */
	}
	.contents::before {
		margin-top: 0;
	}
	.contents .Inner,
	.subcontents .Inner{
		width: 100%;
		padding: 0 30px;}
}
@media screen and (max-width:599px){
	.contents .Inner,
	.subcontents .Inner{
		padding: 0 20px;
	}
	.subcontents .sub {
		margin-bottom: 0;
	}
	.pc {display: none;}
	.sp {display: block;}
}
@media screen and (max-width:320px){
	.sp320{display: block;}
}


/* mission
========================================== */
.missionArea{
	position: relative;
	padding: 20px 0 50px;
	z-index: 200;
}
.missionArea::after{
	content: '';
	position: absolute;
	/* top: 20%; */
	bottom: 33%;
	right: 0;
	width: 30%;
	height: 38vw;
	background: url(images/mission_bg02.png) no-repeat;
	background-size: contain;
	z-index: -1;
}
.missionImg{
	margin-top: 75px;
}
.missionImg ul li{
	position: relative;
	margin-right: 5em;
}
.missionImg ul li.mt40 {
	top: 40px;
}
.missionImg ul li.mt100{
	top: 100px;
}
.missionImg ul li::after{
	content: '';
	position: absolute;
	top: 20px;
	left: 20px;
	width: 100%;
	height: 100%;
	background-color: var(--point-color);
	z-index: -1;
	border-radius: 3px;
}
@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
.missionArea .classimgScroll .scroll-infinity__wrap {
	display: flex;
	overflow: hidden;
	padding-bottom: 120px;
}
.missionArea .classimgScroll .scroll-infinity__list {
	display: flex;
	list-style: none;
	padding: 0
}
.missionArea .classimgScroll .scroll-infinity__list--left {
	animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.missionArea .classimgScroll .scroll-infinity__list li > img {
	border-radius: 3px;
}
/* .missionArea .classimgScroll .scroll-infinity__list > li {
	width: calc(100vw / 6);
}
.missionArea .classimgScroll .scroll-infinity__list li > img {
	width: 100%;
} */

@media screen and (max-width:599px){
	.missionArea::after{
		content: none;
		top: 52%;
	}
	.missionImg {
		margin-top: 40px;
	}
	.missionImg ul li.mt40 {
		top: 6.6vw;
	}
	.missionImg ul li.mt100{
		top: 16.6vw;
	}
	.missionImg ul li {
		margin-right: 8vw;
	}
	.missionImg ul li::after{
		top: 1.6vw;
		left: 3vw;
	}
	.missionArea .classimgScroll .scroll-infinity__wrap {
		padding-bottom: 20vw;
	}
	.missionArea .classimgScroll .scroll-infinity__list > li {
		width: calc(100vw / 2.5);
	}
	.missionArea .classimgScroll .scroll-infinity__list li > img {
		width: 100%;
	}
}
@media screen and (max-width:390px) {
	.missionArea::after {
		top: 58%;
	}
}

/* strength
========================================== */
.strengthArea{
	position: relative;
	top: -300px;
	margin-bottom: -300px;
	padding: 300px 0 80px;
	background: linear-gradient(90deg, rgb(177, 152, 81) 4%, rgb(249, 244, 203) 50%, rgb(197, 170, 89) 96%);
	z-index: 100;
	counter-reset: number 0;
}
.strengthList .strengthBox{
	position: sticky;
	top: 90px;
	margin-top: 80px;
}
.strengthList .strengthBox:first-of-type{
	margin-top: 0;
}
.strengthList .strengthBox01{
	top: calc(90px);
}
.strengthList .strengthBox02{
	top: calc(90px + 2em);
}
.strengthList .strengthBox03{
	top: calc(90px + 4em);
}
.strengthList .strengthItem{
	position: relative;
}
@media screen and (max-width:840px){
	.strengthList .strengthBox{
		top: 50px;
	}
	.strengthList .strengthBox01{
		top: calc(50px);
	}
	.strengthList .strengthBox02{
		top: calc(50px + 1.5em);
	}
	.strengthList .strengthBox03{
		top: calc(50px + 3em);
	}
}
@media screen and (max-width:599px){
	.strengthList .strengthBox{
		height: 195vw;
	}
}
.strengthList ul{
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* margin-bottom: 80px; */
	padding: 80px 80px 80px 60px;
	background: #fff;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.10);
	z-index: 999;
	border-radius: 6px;
	box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.25);
}
.strengthList ul::before{
	counter-increment: number 1;
	content: "0" counter(number);
	position: absolute;
	top: 0;
	left: 0;
	/* top: -96px;
	left: -8px; */
	font-family: "Jost", sans-serif;
	font-size: clamp(14rem, 16vw, 16rem);
	font-weight: 600;
	color: var(--c-gold);
	line-height: 0.8;
	opacity: 0.5;
	z-index: -1;
}
.strengthList .number{
	position: absolute;
	right: 0;
	bottom: 2em;
	z-index: 9999;
}
.strengthList .number p{
	position: relative;
	padding-right: 0.5em;
	font-family: "Jost", sans-serif;
	font-size: clamp(1.8rem, 3vw, 2.2rem);
	font-weight: 400;
	color: var(--c-gray);
	line-height: 2;
}
.strengthList .number p::after{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 6px;
	background: var(--c-gray);
}
.strengthList .number p.on{
	color: var(--point-color);
}
.strengthList .number p.on::after{
	background: var(--point-color);
}
.strengthList ul li:first-child{
	width: 600px;
}
.strengthList ul li:last-child {
	width: 400px;
}
.strengthList dl dt{
	padding: 0 0 50px 0.7em;
	font-size: clamp(2.6rem, 3vw, 3.2rem);
	font-weight: 700;
	border-bottom: 1px solid var(--point-color);
	line-height: 1.4;
}
.strengthList dl dd{
	padding: 50px 0 0 1.6em;
	font-size: clamp(1.6rem, 3vw, 1.8rem);
	font-weight: 500;
}
.strengthList dl dd span{
	color: var(--c-navy);
	font-weight: 700;
}
@media screen and (max-width:1200px){
	.strengthList ul li:first-child{
		width: 50%;
	}
	.strengthList ul li:last-child{
		width: 50%;
		padding-left: 5%;
	}
	.strengthList ul li:last-child img{
		width: 100%;
	}
	.strengthList dl dt{
		padding: 0 0 30px 0.5em;
		font-size: 2.8vw;
	}
	.strengthList dl dd{
		padding: 30px 0 0 1em;
	}
}
@media screen and (max-width:1000px){
	.strengthList ul{
		padding: 80px 60px 50px 2.5em;
	}
	.strengthList dl dt {
		padding: 0 0 30px 0;
	}

	.strengthList dl dd {
		padding: 30px 0 0 0;
		font-size: 1.7vw;
	}
}
@media screen and (max-width:840px) {
	.strengthList dl dt {
		font-size: 2.6vw;
	}
}
@media screen and (max-width:599px) {
	.strengthArea{
		padding-bottom: 10px;
	}
	.strengthList .strengthItem{
		margin-bottom: 40px;
	}
	.strengthList ul{
		/* margin-bottom: 40px; */
		padding: 60px 1.2em 40px 1.2em;
		flex-direction: column;
		row-gap: 2em;
	}
	.strengthList ul::before{
		font-size: min(26vw, 10rem);
		/* top: -54px;
		left: -5px;
		font-size: 10rem; */
	}
	.strengthList ul li:first-child,
	.strengthList ul li:last-child{
		width: 100%;
	}
	.strengthList ul li:last-child {
		width: 84%;
		max-width: 400px;
		margin: 0 auto;
		padding: 0;
	}
	.strengthList dl dt{
		font-size: 2rem;
	}
	.strengthList .number p{
		padding-bottom: 3px;
		line-height: 1.6;
	}
	.strengthList .number p::after{
		width: 30px;
	}
	.strengthList dl dt{
		font-size: 5vw;
	}
	.strengthList dl dd{
		font-size: 3.6vw;
	}
}
/* @media screen and (max-width:390px){
	.strengthList dl dt{
		font-size: 2.2rem;
	}
} */


/* service
========================================== */
.serviceArea{
	position: relative;
	padding: 80px 0 400px;
	background: linear-gradient(90deg, var(--c-black) 0%, var(--c-black) 35%, #fff 35%, #fff 100%);
}
.serviceArea .Inner{
	overflow: visible;
}
.serviceArea::before{
	content: '';
	position: absolute;
	top: 12%;
	left: 0;
	width: 40%;
	height: 100%;
	background: url(images/service_bg.png) no-repeat;
	background-size: contain;
}
.serviceArea::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background: var(--point-color);
}
.serviceList{
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 100;		
}
.serviceList div:first-child{
	width: 570px;
}
.serviceList div:first-child img{
	width: 100%;
}
.serviceList div:last-child{
	position: relative;
	width: 630px;
	padding: 40px 0 0 80px;
	counter-reset: number 0;
}
.serviceList dl {
	margin-bottom: 60px;
}
.serviceList dl:first-child{
	margin-bottom: 100px;
}
.serviceList dl::before {
	counter-increment: number 1;
	content: "0" counter(number);
	position: absolute;
	left: 70px;
	font-family: "Jost", sans-serif;
	font-size: min(22vw, 12rem);
	/* font-size: 10rem; */
	font-weight: 600;
	color: var(--c-navy-right);
	/* color: var(--c-gold); */
	line-height: 0;
	opacity: 0.5;
	z-index: -1;
}
.serviceList dl dt{
	margin-bottom: 30px;
	padding-top: 0.6em;
	padding-left: 1em;
	font-size: clamp(2.4rem, 3vw, 3rem);
	font-weight: 700;
	line-height: 1.3;
}
.serviceList dl dd{
	font-size: clamp(1.6rem, 3vw, 1.8rem);
	font-weight: 500;
	line-height: 1.6;
}
.serviceList div.btnMore{
	display: flex;
	justify-content: center;
	position: relative;
	top: 2.8em;
	padding: 0;
}

@media screen and (max-width:1200px) {
	.serviceList div:first-child {
		width: 30%;
	}
	.serviceList div:last-child {
		width: 70%;
	}
	.serviceList div.btnMore {
		width: 100%;
		justify-content: end;
	}
}
@media screen and (max-width:599px) {
	.serviceArea {
		padding: 60px 0 280px;
		background: linear-gradient(90deg, var(--c-black) 20px, var(--c-black) 20px, #fff 20px, #fff 100%);
		/* background: linear-gradient(90deg, var(--c-black) 0%, var(--c-black) 15%, #fff 15%, #fff 100%); */
	}
	.serviceArea::after {
		bottom: 20%;
	}
	.serviceList {
		display: block;
	}
	.serviceList div:first-child{
		width: 60%;
		margin-left: auto;
	}
	.serviceList div:last-child{
		width: 100%;
	}
	.serviceList div:last-child {
		padding: 60px 0 0 0;
	}
	.serviceList dl::before {
		left: 0;
	}
	.serviceList dl:first-child {
		margin-bottom: 60px;
	}
	.serviceList dl dt {
		margin-bottom: 20px;
		padding-left: 1em;
		font-size: 2rem;
	}
	.serviceList dl dd {
		padding-left: 1.3em;
	}
	.serviceList div.btnMore {
		top: -4.5em;
	}
}

/* service 下層ページ
------------------------------------------ */
.serviceArea.sub{
	background: none;
	overflow: hidden;
}
.serviceArea.sub::before,
.serviceArea.sub::after {
	content: none;
}
.serviceTop p{
	text-align: center;
}
.serviceTop p span,
.serviceBox p span{
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--main-color);
}
.serviceTop span.point{
	color: var(--sub-color);
}
.serviceTopFlow{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: calc(100% - 20px);
	margin-top: 10px;
}
.serviceTopFlow li{
	position: relative;
	width: calc(30% - 20px);
	margin: 5px 0;
	padding: 10px;
	font-size: 2rem;
	font-weight: 500;
	background: var(--c-navy);
	color: #fff;
	text-align: center;
}
.serviceTopFlow li::after{
	content: '';
	position: absolute;
	top: 0;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 28px 0 28px 20px;
	border-color: transparent transparent transparent var(--c-navy);
}
.serviceTopFlow li:nth-child(5) {
	left: -10px;
}
.serviceTopFlow li:last-child{
	width: 30%;
	margin-right: -40px;
	left: -20px;
	background: var(--point-color);
}
.serviceTopFlow li:last-child:after{
	content: none;
}
.serviceTopBtn{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 50px auto;
}
.serviceTopBtn a{
	font-size: clamp(1.8rem, 3vw, 2.2rem);
	font-weight: 700;
	letter-spacing: 1px;
}
.serviceSlider{
	counter-reset: number 0;
}
.serviceSlider div{
	position: relative;
	width: 100%;
	margin-bottom: 80px;
	padding: 70px 80px 60px 60px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.10);
	z-index: 999;
}
/* .serviceSlider dl{
	position: relative;
} */
.serviceSlider dl::before{
	counter-increment: number 1;
	content: "0" counter(number);
	position: absolute;
	top: 0;
	left: 0;
	/* top: -12rem;
	left: -6rem; */
	font-family: "Jost", sans-serif;
	font-size: 12rem;
	font-weight: 600;
	color: var(--c-gold);
	line-height: 0.8;
	opacity: 0.5;
	z-index: -1;
}
.serviceSlider01 dl::before{
	color: var(--c-navy-right);
}
.serviceSlider dl dt{
	padding: 0 0 20px 1em;
	font-size: clamp(2.2rem, 3vw, 2.6rem);
	font-weight: 700;
	border-bottom: 1px solid var(--point-color);
	line-height: 1.3;
}
.serviceSlider dl .txt{
	width: fit-content;
	margin: 0 auto;
}
.serviceSlider dl dd.img{
	display: flex;
	justify-content: center;
}
.serviceSlider .type{
	margin: 3.2em auto 0;
	padding: 1.2em 1.6em 1.6em;
	border: 3px solid var(--c-beige);
	position: relative;
	z-index: 0;
	max-width: 700px;
	box-shadow: none;
}
.serviceSlider .type:before{
border-top: 3px solid var(--point-color);
	border-left: 3px solid var(--point-color);
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	left: -3px;
	width: 20px;
	height: 20px;
	z-index: 1;
}
.serviceSlider01 .type:before{
	border-top: 3px solid var(--c-navy);
	border-left: 3px solid var(--c-navy);
}
.serviceSlider01 .type .ttlType04{
	background-color: var(--c-navy);
}
.serviceSlider .number{
	position: absolute;
	right: 0;
	bottom: 2em;
	width: fit-content;
	padding: 0;
	box-shadow: none;
}
.serviceSlider .number p{
	position: relative;
	padding-right: 0.5em;
	font-family: "Jost", sans-serif;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	font-weight: 400;
	color: var(--c-gray);
	line-height: 2;
}
.serviceSlider .number p::after{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1.8em;
	height: 6px;
	background: var(--c-gray);
}
.serviceSlider .number p.on{
	color: var(--point-color);
}
.serviceSlider01 .number p.on {
	color: var(--c-navy);
}
.serviceSlider .number p.on::after{
	background: var(--point-color);
}
.serviceSlider01 .number p.on::after{
	background: var(--c-navy);
}
.serviceBox {
	margin: 100px auto;
}

@media screen and (max-width:1000px){
	.serviceTopBtn a{
		padding: 1.4em 5em;
	}
}
@media screen and (max-width:599px){
	.serviceArea.sub{
		margin-bottom: 0;
		padding: 0;
	}
	.serviceTop p {
		text-align: left;
	}
	.serviceTopFlow{
		display: block;
		width: 100%;
	}
	.serviceTopFlow li{
		width: 100%;
		margin-bottom: 25px;
	}
	.serviceTopFlow li:nth-child(5){
		left: 0;
	}
	.serviceTopFlow li:last-child{
		width: 100%;
		left: 0;
		margin-right: 0;
	}
	.serviceTopFlow li::after{
		left: 0;
		right: 0;
		bottom: -70px;
		transform: rotate(90deg);
	}
	.serviceTopBtn a{
		width: 86%;
		padding: 1.2em 0em;
		margin-bottom: 10px;
	}
	.serviceSlider{
		margin-bottom: 60px;
	}
	.serviceSlider div{
		margin-bottom: 40px;
		padding: 60px 1em 40px 1em;
		/* padding: 60px 20px 40px 20px; */
	}
	.serviceSlider dl::before{
		font-size: min(26vw, 10rem);
		/* font-size: 10rem; */
	}
	.serviceSlider dl dd{
		padding-left: 0;
	}
	.serviceSlider .type{
		width: calc(100% - 1.3em);
		margin: 2em 0 0;
		padding: 0.8em;
		/* padding: 1.5em; */
	}
	.serviceSlider .number{
		bottom: -1em;
	}
	.serviceBox{
		margin: 80px auto;
	}
	.serviceArea.sub .type > ul > li{
		font-size: 1.4rem;
	}
}
@media screen and (max-width:360px){
	.serviceTopBtn a{
		padding: 1.4em 5em;
	}
	.serviceSlider dl dt{
		font-size: 2.2rem;
	}
}


/* company
========================================== */
.companyArea{
	margin-top: -260px;
	padding-bottom: 180px;
	background: var(--main-color);
	border-bottom: 1px solid var(--point-color);
}
.companyArea .Inner{
	overflow: visible;
}
.companyBtn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 0.6em;
}
.companyBtn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 0.6em;
}
.companyBtn a{
	display: block;
	position: relative;
	width: 370px;
	padding: 0;
	border: 1px solid var(--border-color);
	line-height: 0;
	text-decoration: none;
}
.companyBtn a::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 30px;
	width: 50px;
	height: 1px;
	background-color: var(--point-color);
	transition: .3s;
}
.companyBtn a::after{
	content: '';
	position: absolute;
	top: calc(50% + 3px);
	right: 32px;
	transform-origin: right bottom;
	width: 20px;
	height: 1px;
	background-color: var(--point-color);
	transform: rotate(45deg);
	transition: .3s;
}
.companyBtn a:hover::before {
	right: 10px;
}
.companyBtn a:hover::after {
	right: 12px;
}
.companyBtn ul{
	display: flex;
	align-items: center;
	background: #fff;
}
.companyBtn ul li{
	padding: 2em;
}
.companyBtn ul li:first-child{
	display: flex;
	justify-content: center;
	width: 100px;
	padding: 2.2em;
	background-image: linear-gradient(120deg, rgb(177 152 81 / 90%), rgb(247 240 186 / 90%) 45%, rgb(197 170 89 / 90%));
}
.companyBtn ul li:last-child{
	padding: 0 2em;
	font-size: clamp(2rem, 2vw, 2.4rem);
	font-weight: 700;
	color: var(--main-color);
}
.companyBtn a:hover ul{
	background: var(--main-color);
	transition: .3s;
}
.companyBtn a:hover ul li{
	color: #fff;
}
.companyBtn a:hover ul li:first-child{
	background-image: linear-gradient(120deg, rgb(177, 152, 81), rgb(247, 240, 186) 45%, rgb(197, 170, 89));
}
.companyBtn a:hover ul li:first-child img{
	opacity: 1;
}
@media screen and (max-width:1200px){
	.companyBtn div{
		width: 32%;
		min-width: 250px;
	}
	.companyBtn a{
		width: 100%;
	}
	.companyBtn a::before{
		top: 80%;
		right: 20px;
		width: 40px;
	}
	.companyBtn a::after{
		top: calc(80% + 3px);
		right: 22px;
	}
}
@media screen and (max-width:1000px){
	.companyBtn ul li:last-child{
		padding: 0 1em;
		font-size: 2rem;
	}
}
@media screen and (max-width:599px){
	.companyArea{
		padding-bottom: 50px;
	}
	.companyBtn div{
		width: 100%;
		margin-bottom: 20px;
	}
	.companyBtn a::before {
		top: 50%;
	}
	.companyBtn a::after {
		top: calc(50% + 3px);
	}
}

/* company 下層ページ
------------------------------------------ */
.companyArea.sub{
	margin-top: 0;
	padding-bottom: 80px;
	background: none;
}
.companyList{
	display: flex;
	justify-content: space-between;
	position: relative;
	margin: 50px auto 80px;
	z-index: 100;
}
.companyList div:first-child{
	width: 570px;
}
.companyList div:first-child img{
	width: 100%;
}
.companyList div:last-child{
	position: relative;
	width: 630px;
	padding-left: 80px;
	counter-reset: number 0;
}
.companyList dl{
	margin-bottom: 30px;
}
.companyList dl:last-child{
	margin-bottom: 0;
}
.companyList dl dt{
	display: flex;
	align-items: center;
	column-gap: 2.2em;
	row-gap: 0.2em;
	margin-bottom: 0.8em;
	font-size: clamp(2.2rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 2;
	color: var(--c-navy);
	border-bottom: 1px solid var(--main-color);
}
.companyList dl dt span{
	display: inline-block;
	position: relative;
	/* margin-right: 40px; */
	font-family: "Jost", sans-serif;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--c-gold);
	/* line-height: 1.4;
	z-index: -1; */
}
.companyList dl dt span:before,
.companyList dl dt span:after {
	content: '';
	position: absolute;
	display: inline-block;
	top: 50%;
	width: 1em;
	height: 2px;
	background-color: var(--c-gold);
}
.companyList dl dt span:before {
	left: -1.3em;
}
.companyList dl dt span:after {
	right: -1.3em;
}
.companyList dl dd {
	font-size: clamp(1.6rem, 3vw, 1.8rem);
	font-weight: 500;
	line-height: 1.6;
}
.companyList dl dd b{
	display: block;
	margin-bottom: 0.5em;
	font-size: 2rem;
	line-height: 1.4;
}
.companyGreeting .ttlType02{
	margin: 0 auto 50px;
}
.companyGreeting p span{
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--main-color);
}
.companyGreeting p.right{
	font-size: 1.8rem;
	font-weight: 700;
	text-align: right;
}
.companyProfile{
	margin: 0 auto 80px;
}
.companyProfile .ttlType02{
	margin: 0 auto 50px;
}
.companyProfile ul li{
	margin-bottom: 1.8rem;
}
.companyProfile ul li:last-child{
	margin-bottom: 0;
}
.companyProfile ul li span{
	font-size: 1.8rem;
	font-family: "Jost", sans-serif;
}
.companyProfile ul li a{
	text-decoration: none;
}
.companyAccess .ttlType02{
	margin: 20px auto 30px;
}
.companyAccess .ttlType04,
.companyAccess .ttlType05{
	margin: 0 auto 1em;
}
.companyAccessList ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
.companyAccessList ul:last-child{
	margin-bottom: 0;
}
.companyAccessList ul li{
	width: 48%;
}

@media screen and (max-width:1200px) {
	.companyList div:first-child {
		width: 35%;
	}
	.companyList div:last-child {
		width: 65%;
		padding-left: 40px;

	}
}
@media screen and (max-width:1000px){
	.companyAccess .ttlType02{
		margin: 0px auto 30px;
	}
}
@media screen and (max-width:840px){
	.companyList{
		margin-bottom: 60px;
	}
	.companyProfile {
		margin: 60px auto;
	}
}
@media screen and (max-width:599px){
	.companyList{
		display: block;
		margin: 20px auto 50px;
	}
	.companyList div:first-child,
	.companyList div:last-child {
		width: 100%;
	}
	.companyList div:last-child{
		padding: 40px 0 0 0px;
	}
	.companyList dl dt{
		padding-bottom: 0.6em;
		flex-direction: column-reverse;
		line-height: 1.4;
		/* justify-content: center;
		flex-wrap: wrap;
		font-size: clamp(2.8rem, 3vw, 3rem); */
	}
	.companyList dl dt span{
		font-size: 0.6em;
		/* width: 100%;
		margin-left: 40px;
		text-align: center; */
	}
	/* .companyList dl dt span:before{
		left: auto;
		margin-left: -40px;
	}
	.companyList dl dt span:after{
		right: auto;
		margin-left: 10px;
	} */
	.serviceList dl dd{
		padding-left: 1.4em;
	}
	.companyList dl dd b {
		font-size: 1.8rem;
	}
	.companyGreeting .ttlType02{
		margin: 0 auto 30px;
	}
	.companyProfile{
		margin: 50px auto;
	}
	.companyProfile .ttlType02{
		margin: 0 auto 30px;
	}
	.companyAccess .ttlType04,
	.companyAccess .ttlType05 {
		margin: 0 auto 0.5em;
	}
	.companyAccessList ul{
		margin-bottom: 30px;
	}
	.companyAccessList ul li{
		width: 100%;
	}
	.companyAccessList ul li:last-child{
		margin-top: 10px;
	}
}
@media screen and (max-width:360px) {
	.companyGreeting p.right{
		text-align: left;
	}
}
.companyTableAddress{
	margin-bottom: 1.8rem;
}
.companyTableNumber{
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 0.5em;
	line-height: 1.2;
}
.companyProfile .companyTableList{
	margin-top: 0.8rem;
}
.companyProfile .companyTableList > li{
	position: relative;
	margin-bottom: 0.3em;
	margin-left: 1.3em;
	line-height: 1.5;
}
.companyProfile .companyTableList > li::before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0.4em;
	right: calc(100% + 0.4em);
	width: 0.8em;
	height: 0.8em;
	background-color: var(--point-color);
}

/* case
========================================== */
.caseArea .Inner{
	margin-bottom: 80px;
}
.caseBtn{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-bottom: 50px;
}
.caseBtn div{
	width: 30%;
	margin: 0 5% 20px 0;
}
.caseBtn div:nth-child(3n) {
	margin-right: 0;
}
.caseBtn div a{
	display: flex;
	align-items: center;
	position: relative;
	color: var(--txt-color);
	letter-spacing: .075em;
	text-decoration: none;
	padding: 1em 1em 1em 1.8em;
	border: 1px solid var(--border-color);
	transition: .3s;
}
.caseBtn div a:hover{
	color: #fff;
	border: 1px solid var(--main-color);
	background: var(--main-color);
}
.caseBtn a::before{
	content: '';
	position: absolute;
	bottom: 15px;
	right: 20px;
	width: 50px;
	height: 1px;
	background-color: var(--main-color);
	transition: .3s;
}
.caseBtn a::after{
	content: '';
	position: absolute;
	bottom: 13px;
	right: 22px;
	transform-origin: right bottom;
	width: 18px;
	height: 1px;
	background-color: var(--main-color);
	transform: rotate(45deg);
	transition: .3s;
}
.caseBtn a:hover::before {
	right: 10px;
	background-color: #fff;
}
.caseBtn a:hover::after {
	right: 12px;
	background-color: #fff;
}
.caseBtn a.current {
	color: #fff;
	background-color: var(--main-color);
	border: 1px solid var(--main-color);
	pointer-events: none;
	cursor: default;
}
.caseList{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 50px;
}
.caseList div{
	position: relative;
	width: 350px;
	margin: 0 30px;
}
.caseList .after{
	width: 350px;
}
.caseList .before:before,
.caseList .after:before{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 6px 10px;
	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 .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;
}
.caseList .before:before{
	content: 'BEFORE';
	background: var(--c-gray);
}
.caseList .after:before{
	content: 'AFTER';
	background: var(--main-color);
	/* font-size: 130%; */
}
.caseList div img{
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

@media screen and (max-width:840px) {
	.caseBtn{
		justify-content: space-between;
	}
	.caseBtn div,
	.caseBtn div:nth-child(3n) {
		width: 46%;
		margin: 0 0 20px;
	}
	.caseList {
		display: block;
	}
	.caseList div {
		width: 80%;
		margin: 0 auto 50px;
	}
	.caseList .before::after {
		top: calc(100% + 25px);
		right: calc(50% - 9px);
		transform: rotate(90deg);
	}
	.caseList .after {
		width: 80%;
	}
}
@media screen and (max-width:599px) {
	.caseBtn{
		display: block;
	}
	.caseBtn div,
	.caseBtn div:nth-child(3n) {
		width: 90%;
		margin: 0 auto 10px;
	}
	/* .caseList div {
		width: 80%;
	}
	.caseList .after {
		width: 80%;
	} */
}


/* contact
========================================== */
.contactArea{
	position: relative;
	padding: 65px 0 8%;
	background-image: url(images/contact_bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.contactArea.sub{
	background: none;
}
.contactArea.sub .Inner{
	margin-bottom: 100px;
}
.contactArea a.tel{
	font-family: "Jost", sans-serif;
	font-size: 2.4rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--c-navy);
}
.contactArea .number{
	font-family: "Jost", sans-serif;
	font-size: 2rem;
	font-weight: 400;
}
.contactList {
	display: flex;
	justify-content: space-between;
}
.contactList div {
	text-align: center;
}
.contactList div.txt {
	padding-top: 50px;
}
.contactList div.txt p {
	font-weight: 500;
}
.contactList .link .tel {
	font-family: "Jost", sans-serif;
	font-size: clamp(4rem, 6vw, 5rem);
	font-weight: 500;
	color: #fff;
}
.contactList .tel p {
	line-height: 0.5;
	font-size: 1.6rem;
	font-weight: 700;
}
.contactList .tel p span {
	padding-left: 0.2em;
	font-family: "Jost", sans-serif;
	font-weight: 600;
}
.contactComplete{
	margin-bottom: 50px;
}
.contactComplete .time{
	font-size: 1.5rem;
}
.contactArea .contactComplete a.tel{
	color: var(--sub-color);
	line-height: 1.4;
}
.grecaptcha-badge {
	bottom: 110px!important;
}

@media screen and (max-width: 1200px) {
	.contactList {
		justify-content: space-around;
	}
}
@media screen and (max-width: 599px) {
	.contactArea {
		background-size: 100% 35%;
	}
	.contactList {
		display: block;
	}
	.contactList div.txt p {
		text-align: left;
	}
	.contactArea .contactBtn {
		margin-top: 50px;
	}
	.contactList .link .tel {
		display: none;
		margin-top: 0.5em;
		font-size: 3.2rem;
		color: var(--txt-color);
	}
	.contactArea.sub .Inner {
		margin-bottom: 80px;
	}
}


/* privacy
========================================== */
.privacyArea .Inner{
	margin-bottom: 120px;
}
.privacyBox{
	position: relative;
	padding-bottom: 150px;
}
.privacyBox ul{
	margin: 5px auto;
}
.privacyBox ul li{
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.privacyBox .company{
	position: absolute;
	right: 0;
	margin-top: 50px;
}
.privacyBox .company p{
	margin-top: 0;
	line-height: 1.6;
}
.privacyBox .company p.name{
	margin-bottom: 5px;
	font-size: 2rem;
	font-weight: 600;
}
.privacyBox .company span.tel{
	font-size: 2rem;
	font-family: "Jost", sans-serif;
	font-weight: 500;
}

@media screen and (max-width:599px) {
	.privacyArea .Inner {
		margin-bottom: 100px;
	}
	.privacyBox .company{
		left: 0;
	}
}


/* footer
========================================== */
.footerWrap{
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 0 30px;
	width: 1200px;
}
.footerInfo{
	width: 45%;
	font-size: 1.4rem;
}
.footerInfo .logo{margin-bottom: 25px;}
.footerInfo .company{
	margin-bottom: 5px;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 1px;}
.footerInfo .access{
	margin-bottom: 20px;
	font-weight: 500;
	line-height: 1.4;
}
.footerInfo .tel{
	width: 238px;
	text-align: center;
}
.footerInfo .tel a{
	display: block;
	text-decoration: none;
	background: var(--c-black);
}
.footerInfo .tel a span{
	font-size: 3.4rem;
	font-family: "Jost", sans-serif;
	font-weight: 500;
	background: linear-gradient(90deg, #b19851, #f7f0ba 45%, #c5aa59);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
}
.footerInfo .tel p{
	display: inline-block;
	margin-top: 4px;
	padding: 0 0.5em;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	background: var(--c-black);
}
.footerInfo .tel p span{
	padding-left: 0.2em;
	font-family: "Jost", sans-serif;
	font-weight: 600;
}
.footerInfo .tel .insta{
	width: 32px;
	margin: 1em auto 0;
}
.footerInfo .tel .insta a{
	background: transparent;
}
.footerInfo .tel .insta img{
	width: 100%;
}
.footerNavi{
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5em;
	justify-content: space-between;
	width: 35%;
	/* padding-top: 30px; */
}
.footerNavi ul li{
	margin-bottom: 2em;
}
.footerNavi ul li a{
	display: block;
	text-decoration: none;
	font-size: clamp(1.4rem, 2.6vw, 1.6rem);
	font-weight: 500;
	color: var(--txt-color);
}
.footerNavi ul li a:hover{
	text-decoration: 3px solid var(--point-color) underline;
	text-underline-offset: 5px;
}

.copyright{
	padding: 1em 0;
	font-family: "Jost", sans-serif;
	font-size:1.2rem;
	font-weight: 500;
	text-align: center;
	color: var(--main-color);
}

@media screen and (max-width: 1200px) {
	.footerWrap{
		justify-content: space-around;
		padding: 50px 30px 10px;
		width: 100%;
	}
}
@media screen and (max-width: 599px) {
	.footerWrap{
		display: block;
	}
	.footerInfo,
	.footerNavi{
		width: 100%;
	}
	.footerInfo{
		text-align: left;
	}
	.footerInfo .tel{
		margin: 0 auto 0 0;
		text-align: left;
	}
	.footerInfo .tel .num{
		text-align: center;
	}
	.footerInfo .tel .insta{
		margin: 1em auto 0 0;
	}
	.footerNavi{
		flex-direction: column;
		justify-content: center;
		column-gap: 2em;
		padding-top: 20px;
	}
	.footerNavi ul li{
		margin-bottom: 0.8em;
		width: fit-content;
	}
}
@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{
	padding-top: 180px;
	margin: 0 auto 30px;
	max-width: 1080px;
}
.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:140px 30px 0;}
}
@media screen and (max-width: 840px) {
	.breadcrumb{padding: 60px 30px 0;}
}
@media screen and (max-width: 599px) {
	.breadcrumb{padding: 60px 20px 0;}
	.breadcrumb li{font-size: 1.2rem;}
}

/* subBox
========================================== */
.sectionBox{
	width: 1080px;
	margin:0 auto 130px;}
.subBox{margin-bottom: 80px;}
.subBox:last-of-type{margin-bottom:0;}

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

@media screen and (max-width: 599px) {
	.sectionBox{padding: 0 20px;}
	.subBox{margin-bottom: 30px;}
}