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

/* Body
========================================== */
html, body{
	width: 100%;
	font-size:62.5%;/*10px*/
}
body {
	color:var(--txt-color);
	line-height:1.5;
	background: url(../../images/lp02/main_bg.png);
	font-size:1.8rem;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: #fff;
}
.pc {display: block !important;}
.sp {display: none !important;}
@media screen and (max-width: 840px) {
	body{
		word-wrap:break-word;
		font-size: 1.6rem;}
}
@media screen and (max-width: 840px) {
	.pc {display: none !important;}
	.sp {display: block !important;}
}

/* header
========================================== */
.headerArea{
	z-index: 1000;
	position: fixed;
	top:0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 80px;
	animation: scrollAnime linear;
	animation-timeline: scroll();
}
.headerAreaInner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1400px;
}
@keyframes scrollAnime {
	0% {
		background: none;
	}
	30% {
		background: rgba(0, 0, 0, 0.9);
	}
	100% {
		background: rgba(0, 0, 0, 0.9);
	}
}

.headerLogo{margin-left: 20px;}
.headerLogo img{max-width: 100%;height: auto;}

.headerArea .inner{
	display: flex;
	justify-content:flex-end;
	align-items: center;
	padding-right: 1em;
}
.headerInfo .tel{
	line-height: 1.3;
	text-align: center;
}
.headerInfo span{
	display: block;
}
.headerInfo .tel .number{
	font-size: 3rem;
	color: var(--main-color);
	font-weight: 600;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.headerInfo .tel .txt{
	font-size: 1.4rem;
}

.gnav{padding-right: 2em;}
.gnav ul{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
}
.gnav ul li{
	margin: 0 1em;
	font-weight: 700;
}
.gnav ul li a{
	line-height: 1.2;
	display: block;
	color: #fff;
	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:1280px){
	.gnav ul li{margin: 0 0.6em;}
	.gnav ul li a{font-size: 1.4rem;}
}
@media screen and (max-width:1200px){
	.gnav {padding-right:1em;}
}
@media screen and (max-width:1124px){
	.headerInfo .address{display: none;}
	.headerInfo .tel {display: block;width: 7em;}
	.headerInfo .tel .number{
		display: block;
		font-size:1.8rem;}
	.gnav ul li a{font-size: 1.3rem;}
}

@media screen and (max-width:840px){
	.headerArea{position: absolute;background: none;border: none;height: 50px;}
	.headerLogo{padding-top: 10px;margin-left: 10px;width: auto;}
	.headerLogo img{height: 35px;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; */
		background: url(../../images/lp02/main_bg.png);
		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); */
		color: #fff;
		font-optical-sizing: auto;
		font-size: 1.5rem;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
	}
	.gnavSp li a span{
		display: block;
		font-size: clamp(1.8rem, 2vw, 2rem);
		color: var(--main-color);
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
	}
	.gnavSp li a:hover{text-decoration: underline;}
	.spHeaderLogo{margin-bottom: 20px;text-align: center;}
	.spHeaderLogo img{
		width: 160px;
		height: auto;
		background: var(--main-color);
		padding: 0.8em 2em;
	}
	.spAddress{
		margin-bottom: 10px;
		line-height: 1.2;
		font-size: 1.4rem;
		text-align: center;}
	.spTel{text-align: center;color: #fff;font-size: 1.4rem;}
	.spTel a{
		display: block;
		font-weight: bold;
		font-size: 2.4rem;
		text-decoration: none;
		color:var(--main-color);
		font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
	}
	.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
========================================== */
.mvOuter{
	position: relative;
}
.mvWrap{
	position: relative;
	padding-top: calc(80px + 30px);
	padding-bottom: 140px;
	background: url(../../images/lp02/mv.jpg) center no-repeat;
	background-size: cover;
	overflow: hidden;
}
.mvWrap .mvInner{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.mvWrap .mvInner .mvText{
	position: relative;
}
.mvWrap .mvInner .mvText h1{
	/* width: 100%; */
	width: 86%;
	margin-bottom: 2em;
}
.mvWrap .mvInner .mvText h2{
	width: 80%;
	margin-bottom: 2em;
}
.mvWrap .mvInner .mvText h3{
	width: 70%;
}
.mvWrap .mvInner .mvText img{
	width: 100%;
}
.mvWrap .mvInner .mvText .mvImg01{
	display: flex;
	justify-content: space-between;
	width: 48%;
	margin-top: 1.8em;
}
.mvWrap .mvInner .mvText .mvImg01 img {
	width: calc(100% / 3);
}
.mvWrap .mvImg02{
	position: absolute;
	right: 0;
	bottom: 12%;
	width: 25%;
	max-width: 330px;
}
.mvWrap .mvImg02 img{
	width: 100%;
}
.mvWrap .mvBtn{
	position: absolute;
	bottom: -8%;
	margin-bottom: 0;
	z-index: 1;
}
.contactBtn.mvBtn {
	position: absolute;
	bottom: -8%;
	left: 50%;
	margin-bottom: 0;
	z-index: 1;
	transform: translateX(-50%);
}
.contactBtn-flex.mvBtn {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	margin: 0;
}
.contactBtn.mvBtn > a{
	max-width: 800px;
}
.contactBtn.mvBtn > a > img{
	width: 100%;
}
.pcImg{display: block}
.tabletImg{display: none;}

@media screen and (max-width:1400px) {
	.mvWrap .mvInner {
		padding: 0 5%;
	}
}
@media screen and (min-width:1200px) {
	.mvWrap .mvImg02 {
		right: auto;
		left: calc(50% + 285px);
		width: 440px;
		max-width: none;
	}
}
@media screen and (max-width:1200px){
	.mvWrap .mvInner{
		width: 100%;
	}
	.mvWrap .mvBtn{
		width: 80%;
		margin: 0 10%;
	}
	.mvWrap .mvBtn img{
		width: 100%;
	}
	.contactBtn.mvBtn{
		width: 80%;
	}
	.contactBtn.mvBtn img{
		width: 100%;
	}
}
@media screen and (max-width:840px){
	.mvWrap{
		margin-top: 0;
		padding-top: calc(50px + 12%);
		padding-bottom: 16%;
	}
	.mvWrap .mvInner .mvText{
		padding: 1em;
	}
	.mvWrap .mvInner .mvText h1{
		width: 100%;
	}
	.mvWrap .mvInner .mvText h2,
	.mvWrap .mvInner .mvText h3{
		width: 100%;
	}
	.mvWrap .mvInner .mvText .mvImg01{
		width: 70%;
	}
}
@media screen and (max-width:599px){
	.pcImg{
		display: none;
	}
	.tabletImg{
		display: block;
	}
	.mvWrap{
		padding-bottom: 26%;
	}
	.mvWrap .mvInner{
		bottom: 5%;
	}
	.mvWrap .mvInner .mvText{
		padding: 0.6em 0;
	}
	.mvWrap .mvImg02{
		bottom: 18%;
	}
	.mvWrap .mvBtn {
		bottom: -10%;
		width: 100%;
		margin: 0;
	}
	.contactBtn.mvBtn{
		bottom: -10%;
		width: 100%;
		margin: 0;
	}
}


/* contents
========================================== */
.contents{
	overflow: hidden;
	margin:0 auto;
	width:100%;}
.contents p+p{}
.contents p span{
	/* background: #000; */
	background: var(--main-color);
	color: #000;
	font-weight: 700;
	padding: 0px 4px;
}
.Inner{
	margin:0 auto;
	padding: 0;
	max-width:1080px;
	/* width:1200px; */
}
.contactBtn{
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	display: flex;
	justify-content: center;
}
.contactBtn a{
	display: block;
}
.contactBtn a img{
	width: 100%;
}
.contactBtn .btn_pc {
	display: block;
}
.contactBtn .btn_sp{
	display: none;
}
/*btn flex*/
.contactBtn-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1.2em;
	row-gap: 0.6em;
	width: 90%;
	max-width: 920px;
	margin: 0 auto 100px;
}
.contactBtnItem {
	width: calc((100% - 1.2em) / 2);
}
.contactBtnItem a {
	display: inline-block;
}
.contactBtnItem a > img {
	width: 100%;
}

@media screen and (max-width:1200px){
	.Inner{
		width: 100%;
		padding: 0 30px;
	}
	.contactBtn{
		width: 80%;
		margin: 0 auto 100px;
	}
	.contactBtn img{
		width: 100%;
	}
}
@media screen and (max-width:840px){
	.Inner {
			padding: 0 20px;
		}
}
@media screen and (max-width:599px){
	.contactBtn {
		width: 100%;
		margin: 0 auto 20%;
		padding: 0 20px;
	}
	.contactBtn-flex {
		width: 72%;
		margin: 0 auto 18%;
	}
	.contactBtnItem {
		width: 100%;
	}
	.contactBtn .btn_pc {
		display: none;
	}
	.contactBtn .btn_sp {
		display: block;
	}
}


/* problem
========================================== */
.problemArea{
	position: relative;
	padding: 150px 0 100px;
	background: url(../../images/lp02/problem_bg.png) center no-repeat;
	background-size: cover;
}
.problemArea::after{
	content: '';
	position: absolute;
	left: calc(50% - 45px);
	bottom: -12%;
	background: url(../../images/lp02/problem_arrow.png) center no-repeat;
	width: 90px;
	height: 154px;
}
.problemArea h2{
	margin-bottom: 50px;
	text-align: center;
}
.problemList{
	display: flex;
	justify-content: center;
}
.problemList ul li{
	position: relative;
	padding-left: 5rem;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 700;
	line-height: 2.7;
}
.problemList ul li span{
	border-bottom: 5px solid var(--c-grey);
}
.problemList ul li::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	background: url(../../images/lp02/problem_icon.png) center no-repeat;
	width: 32px;
	height: 29px;
	transform: translateY(-50%);
}
@media screen and (max-width:840px){
	.problemArea{
		padding-top: 120px;
	}
}
@media screen and (max-width:599px){
	.problemArea {
		padding: 24% 0 30px;
	}
	.problemArea::after{
		left: calc(50% - 22.5px);
		width: 45px;
		height: 77px;
		background-size: cover;
	}
	.problemArea h2{
		width: 90%;
		margin: 20px auto 50px;
	}
	.problemArea h2 img{
		width: 100%;
	}
	.problemList{
		padding: 0 20px;
	}
	.problemList ul li{
		margin-bottom: 1.5rem;
		padding-left: 3.5rem;
		line-height: 1.4;
	}
	.problemList ul li span{
		border-bottom: 3px solid var(--c-grey);
	}
	.problemList ul li::before{
		top: 0.7em;
		background-size: cover;
		width: 22px;
		height: 20px;
	}
}


/* about
========================================== */
.serviceArea {
	background: url(../../images/lp02/service_bg.png) top no-repeat;
	background-size: 100%;
}
.serviceArea .Inner{
	padding: 18% 0 120px;
}
.serviceArea h2{
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	text-align: center;
}
.serviceArea h2 img{
	width: 100%;
}
.serviceArea h3 {
	margin-bottom: 50px;
	text-align: center;
}
.serviceBtn{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 1em;
}
.serviceBtn li{
	width: calc((100% - 1em * 3) / 4);
}
.serviceBtn li a{
	display: block;
	height: 100%;
}
.serviceBtn li a img{
	width: 100%;
}

@media screen and (max-width:1200px) {
	.serviceArea h2{
		width: 100%;
		padding: 0 5%;
	}
	.serviceArea h2 img{
		width: 100%;
	}
	.serviceBtn{
		width: 100%;
		padding: 0 5%;
	}
	.serviceBtn li img{
		width: 100%;
	}
}
@media screen and (max-width:840px) {
	.serviceArea .Inner {
		padding: 25% 0 60px;
	}

}
@media screen and (max-width:599px){
	.serviceArea .Inner{
		padding-bottom: 30px;
	}
	.serviceArea h2{
		margin-bottom: 50px;
	}
	.serviceArea h3{
		width: 80%;
		margin: 0 auto 50px;
	}
	.serviceArea h3 img{
		width: 100%;
	}
	.serviceBtn li{
		width: calc((100% - 5%) / 2);
		margin-bottom: 10px;
	}
	.serviceBtn{
		column-gap: 5%;
	}
}


/* reason
========================================== */
.reasonArea.mb100 {
	margin-bottom: 80px;
}
@media screen and (max-width:840px) {
	.reasonArea.mb100 {
		margin-bottom: 8%;
	}
}
.reasonArea .Inner{
	position: relative;
}
.reasonLeftArea .Inner{
	padding-bottom: 80px;
}
.reasonArea .number{
	position: absolute;
	top: 0;
	right: 1em;
	width: 22%;
}
.reasonArea .number img{
	width: 100%;
}
.reasonArea h2{
	position: relative;
	margin-bottom: 50px;
	padding: 40px 0 60px;
}
.reasonTtl {
	position: relative;
}
.reasonTtl .number_sp {
	display: none;
}
.reasonTtl .number_sp img{
	width: 100%;
}
.reasonArea h2.ttl_sp {
	font-size: clamp(3rem, 3.8vw, 4.5rem);
	font-weight: bold;
	transform: scale(1, 0.99);
}
.reasonArea h2.ttl_sp span.txt {
	background: #000;
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: -0.8px;
}
.reasonArea h2.ttl_sp span.txt > span.small {
	font-size: 0.7em;
}
.reasonArea .contWrap {
	width: 72%;
}
.reasonLeftArea .number {
	left: 1em;
	right: auto;
}
.reasonLeftArea .contWrap {
	margin-left: auto;
}
.reasonArea h2::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--main-color);
	/* background: var(--c-grey); */
	width: 100%;
	max-width: 880px;
	height: 5px;
}
.reasonArea h3{
	margin-bottom: 0.9em;
	font-size: clamp(2rem, 3.1vw, 3.4rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.5;
}
.reasonArea .reasonTypeTtl {
	margin: 120px auto 50px;
	text-align: center;
}
.reasonArea .Inner p {
	color: #efefef;
	line-height: 1.8;
}
@media screen and (min-width: 1250px) {
	.reasonArea01 .reasonTtl {
		width: 16.4em;
	}
	.reasonArea02 .reasonTtl {
		width: 17.2em;
	}
	.reasonArea03 .reasonTtl {
		width: 15em;
	}
	.reasonArea04 .reasonTtl {
		width: 16.4em;
	}
}
@media screen and (max-width:1200px) {
	.reasonArea h2.ttl_sp{
		display: block;
	}
	.reasonArea h2::after {
		width: 100%;
	}
}
@media screen and (max-width:1000px) {
	.reasonLeftArea .Inner {
		padding-left: 30px;
	}
}
@media screen and (max-width:840px) {
	.reasonArea .Inner{
		padding-bottom: 5%;
	}
	.reasonLeftArea .Inner {
		padding-left: 30px;
	}
	.reasonArea h2{
		padding: 30px 0 40px;
	}
	.reasonArea h2::after{
		height: 3px;
	}
	.reasonArea .reasonTypeTtl {
		margin: 25% auto 12%;
		text-align: center;
	}
}
@media screen and (max-width:599px) {
	.reasonLeftArea .Inner{
		padding-left: 20px;
	}
	.reasonArea .number {
		display: none;
	}
	.reasonArea h2{
		margin-bottom: 30px;
	}
	.reasonArea .ttl{
		width: 100%;
	}
	.reasonArea .ttl img{
		width: 100%;
	}
	.reasonArea h2.ttl_sp{
		width: 78%;
		position: relative;
		font-size: clamp(2.2rem, 5.8vw, 3.4rem);
	}
	.reasonTtl .number_sp {
		display: block;
		position: absolute;
		width: 26%;
		bottom: 0.8em;
		left: calc(100% + 4%);
	}
	.reasonArea .contWrap {
		width: 100%;
	}
}


/* reasonCase
------------------------------------------ */
.reasonCaseArea.pt200 {
	padding-top: 200px;
}
@media screen and (max-width:840px) {
	.reasonCaseArea.pt200 {
		padding-top: 20%;
	}
}
@media screen and (max-width:599px) {
	.reasonCaseArea.pt200 {
		padding-top: 32%;
	}
}
.reasonCaseArea {
	position: relative;
	margin-bottom: 110px;
	padding-top: 130px;
	z-index: 1;
}
.reasonCaseArea .ttl {
	text-align: center;
	margin-bottom: 80px;
}
.reasonCaseArea .ttl > img {
	width: 54%;
	max-width: 368px;
}
.reasonCaseArea .imgBox {
	margin: 0 5px 0.8em;
}
.reasonCaseArea .imgBox > a {
	display: block;
}
.reasonCaseArea .imgBox img {
	width: 100%;
	height: auto;
}
.reasonCaseArea .txtBox {
	padding: 0 0.4em;
}
.reasonCaseArea .txtBox dt {
	margin-bottom: 0.2em;
	font-size: clamp(1.6rem, 2vw, 1.8rem);
	font-weight: 700;
}
.reasonCaseArea .txtBox dd {
	color: var(--main-color);
}
.reasonCaseArea .txtBox dd span {
	margin-left: 0.5rem;
	color: var(--main-color);
	font-size: clamp(1.4rem, 1.8vw, 1.6rem);
	font-weight: 600;
}
.reasonCaseArea .contactBtn {
	margin-top: 50px;
}

@media screen and (max-width:840px) {
	.reasonCaseArea {
		margin-bottom: 10%;
		margin-left: 0;
		padding-top: 20px;
	}
	.reasonCaseArea .ttl {
		margin-bottom: 8%;
	}
	.reasonCaseArea .txtBox{
		margin: 0 5px;
	}
}
@media screen and (max-width:599px) {
	.reasonCaseArea .txtBox {
		text-align: center;
	}
}

/* reasonVoice
------------------------------------------ */
.reasonVoice{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	column-gap: 2em;
}
.reasonVoice img{
	width: 100%;
}
.reasonVoice ul{
	width: calc((100% - 2em * 2) / 3);
	margin-bottom: 60px;
}
.reasonVoice ul li div{
	display: flex;
	align-items: center;
	margin: 20px 0 15px;
}
.reasonVoice ul li .siteImg{
	width: 85%;
	margin: 0 auto 1.2em;
}
.reasonVoice ul li .siteImg > a{
	display: block;
}
.reasonVoice ul li .siteImg img{
	width: 100%;
}
.reasonVoice ul li div img{
	width: auto;
}
.reasonVoice ul li div dl{
	padding-left: 2rem;
}
.reasonVoice ul li div dl dt{
	font-weight: 700;
	line-height: 2;
}
.reasonVoice ul li div dl .clientName{
	line-height: 1.4;
}
.reasonVoice ul li div dl dd{
	font-size: 1.6rem;
	color: var(--main-color);
}
.reasonVoice ul li div dl dd span{
	padding-left: 0.5rem;
	color: var(--main-color);
}
.reasonVoice ul li.txt dt{
	margin-bottom: 1.5em;
	font-size: clamp(1.6rem, 1.7vw, 1.9rem);
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	transform: scale(1, 0.99);
	letter-spacing: -0.6px;
}
.reasonVoice ul li.txt dt span{
	background: linear-gradient(transparent 70%, var(--sub-color) 50%);
	font-weight: 700;
}
.reasonVoice ul li.txt dd{
	color: #e0e0e0;
	font-size: 1.5rem;
	line-height: 1.8;
}
.reasonVoice ul li.txt dd > span.txt_bold{
	margin: 0 2px;
	padding-bottom: 1px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 800;
	border-bottom: 1px solid #fff;
}

@media screen and (max-width:840px) {
	.reasonVoice {
		margin-top: 20px;
	}
	.reasonVoice ul {
		width: calc((100% - 2em) / 2);
	}
}
@media screen and (max-width:599px){
	.reasonVoice ul {
		width: 100%;
		padding-bottom: 30px;
		border-bottom: 1px solid var(--border01-color);
	}
	.reasonVoice ul li.txt dt{
		text-align: center;
	}
	.reasonVoice ul li.txt dd{
		font-size: 1.3rem;
		line-height: 1.7;
	}
	.reasonVoice ul li div{
		margin: 15px 0 10px;
	}
}

/* reasonType
------------------------------------------ */
.reasonType{
	display: flex;
	justify-content: space-between;
	margin-bottom: 100px;
}
.reasonType li{
	width: 18%;
}
.reasonType li img{
	width: 100%;
}

@media screen and (max-width:840px) {
	.reasonType {
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 30px;
	}
	.reasonType li {
		width: calc(100% / 3);
		padding: 0 10px;
	}
}


/* reasonDesign
------------------------------------------ */
.reasonDesign{
	display: flex;
	justify-content:space-between;
	align-items: center;
	flex-wrap: wrap;
	margin: 40px auto 100px;
}
.reasonDesign ul{
	display: flex;
	flex-direction: column;
	row-gap: min(1.2vw, 1em);
	width: 320px;
	height: 320px;
	margin-bottom: 40px;
	padding: 3% 2% 4%;
	background-color: #fff;
	border-radius: 50%;
	border: 3px solid var(--main-color);
	text-align: center;
	color: var(--txt-color);
}
.reasonDesign ul li{
	display: block;
	width: 100%;
	font-size: clamp(1.2rem, 1.4vw, 1.6rem);
}
.reasonDesign ul li.ttl{
	font-size: clamp(1.5rem, 2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.5;
}
.reasonDesign ul li.ttl.line-1{
	margin: 0.7em 0 0.8em;
}
.reasonDesign ul li.ttl span{
	padding: 0 5px;
	background: linear-gradient(transparent 10%, var(--main-color) 0%);
}

@media screen and (max-width:1100px) {
	.reasonDesign ul {
		width: 28vw;
		height: 28vw;
	}
}
@media screen and (max-width:840px) {
	.reasonDesign{
		justify-content: space-around;
		margin: 20px auto 0;
	}
	.reasonDesign ul{
		padding: 1% 1% 3%;
	}
	.reasonDesign ul li .img{
		height: 3.5vw;
	}
	.reasonDesign ul li img{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.reasonDesign ul li.ttl{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: -0.5em;
		line-height: 1.2;
	}
	.reasonDesign ul li.ttl span{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 4.4em;
		padding: 8px 3px 3px;
	}
	.reasonDesign ul li.ttl.line-1{
		margin: -0.5em 0 0;
	}
	.reasonDesign ul li.txt {
		padding: 0 8%;
		line-height: 1.3;
	}
	.reasonDesign ul li.txt br {
		display: none;
	}
}
@media screen and (max-width:599px){
	.reasonDesign ul {
		width: 26vw;
		height: 26vw;
		margin-bottom: 20px;
	}
	.reasonDesign ul li.ttl{
		letter-spacing: -1px;
		font-size: clamp(1.1rem, 2.5vw, 1.5rem);
	}
	.reasonDesign ul li.ttl.line-1{
		margin: -0.5em 0 0;
	}
	.reasonDesign ul li .img{
		height: 7vw;
	}
	.reasonDesign ul li.txt{
		display: none;
	}
}


/* comparison
========================================== */
.comparisonArea{
	padding: 110px 0 100px;
	background: url(../../images/lp02/comparison_bg.png) top no-repeat;
	background-size: cover;
}
.comparisonArea h2{
	margin-bottom: 50px;
	text-align: center;
}
.comparisonTable{
	width: 100%;
}
.comparisonTable {
	margin: 50px auto 0;
}
.comparisonTable table{
	width: 100%;
}
.comparisonTable table tr:first-child>th {
	background-color: transparent;
}
.comparisonTable table th{
	width: 18.5%;
	padding: 1em;
	background-color: #000;
	border-right: 3px solid #85792c;
	border-bottom: 3px solid #85792c;
	color: #fff;
	font-size: clamp(1.8rem, 2vw, 2.2rem);
	font-weight: 600;
	transform: scale(1, 0.99);
}
.comparisonTable table th.type{
	height: 7em;
	border-bottom: none;
}
.comparisonTable table th,
.comparisonTable table td {
	height: 4.4em;
	vertical-align: middle;
	line-height: 1.5;
	text-align: center;
}
.comparisonTable table td{
	width: 24%;
	padding: 1em 1em 0;
	color: #000;
	font-size: 1.6rem;
}
.comparisonTable table td:nth-child(2) {
	position: relative;
	background-color: var(--bg01-color);
	border-right: 6px solid #85792c;
}
.comparisonTable table td:nth-child(3) {
	width: 34%;
	background-color: #fff;
	outline: 3px solid rgb(230 201 3);
	outline-offset: -3px;
}
.comparisonTable table td:nth-child(4) {
	background-color: #d5d4d4;
	border-left: 6px solid #85792c;
}
.comparisonTable table td ul{
	display: flex;
	height: 100%;
	align-items:first baseline;
	flex-wrap: wrap;
}
.comparisonTable table td ul li{
	position: relative;
	width: 100%;
	height: 5vw;
}
.comparisonTable table td ul.main li{
	font-size: clamp(1.6rem, 2vw, 2.4rem);
	font-weight: 700;
	transform: scale(1, 0.99);
}
.comparisonTable table td ul li::after{
	content: '';
	position: absolute;
	left: 0.3em;
	bottom: 0;
	width: calc(100% - 0.6em);
	height: 1px;
	background: #ccc;
}
.comparisonTable table td ul li.case{
	height: 70px;
	color: #fff;
	background-color: var(--txt-subcolor);
	font-size: clamp(1.8rem, 2vw, 2.2rem);
	font-weight: 700;
	transform: scale(1, 0.99);
	line-height: 3;
}
.comparisonTable table td ul.main li.case{
	background-color: var(--main-color);
	line-height: 2.6;
}
.comparisonTable table td ul li.txt{
	text-align: left;
}
.comparisonTable table td ul li.txt p{
	position: relative;
	top: -1rem;
}
.comparisonTable table td ul.main li.txt{
	text-align: center;
	font-size: clamp(1.5rem, 1.8vw, 2rem);
}
.comparisonTable table td ul li.case::after,
.comparisonTable table td ul li.txt::after{
	content: none;
}

/*ver2*/
.comparisonTable-ver2 table td {
	padding: 1em;
}
.comparisonTable-ver2 table .heading{
	padding: 1em 0;
	background-color: var(--txt-subcolor);
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
}
.comparisonTable-ver2 table .headingImg{
	padding: 1em 1.5em;
	width: 100%;
	height: 70px;
	background-color: var(--main-color);
}
.comparisonTable-ver2 table .headingImg img{
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.comparisonTable-ver2 table td p {
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
}
.comparisonTable-ver2 table td .txtLarge {
	font-size: clamp(1.5rem, 2.1vw, 1.8rem);
	font-weight: 700;
}
.comparisonTable-ver2 table td:nth-child(3) {
	outline: none;
}
.comparisonTable-ver2 table td {
	position: relative;
}
.comparisonTable-ver2 table tr:first-child td.mainArea::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: rgb(230 201 3);
}
.comparisonTable-ver2 table tr:last-child td.mainArea::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: rgb(230 201 3);
}
.comparisonTable-ver2 table td.mainArea {
	padding: 0;
}
.comparisonTable-ver2 table td.mainArea .inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 1em;
}
.comparisonTable-ver2 table td.mainArea .inner::before,
.comparisonTable-ver2 table td.mainArea .inner::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	width: 3px;
	height: 100%;
	background-color: rgb(230 201 3);
}
.comparisonTable-ver2 table td .inner::before {
	left: 0;
}
.comparisonTable-ver2 table td .inner::after {
	right: 0;
}
.comparisonTable-ver2 table tr:nth-child(2) td::after,
.comparisonTable-ver2 table tr:nth-child(3) td::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: calc(100% - 2em);
	height: 1px;
	background-color: #ccc;
	transform: translateX(-50%);
}
.comparisonTable-ver2 table sup {
	margin-left: 0.3em;
	color: var(--txt-subcolor);
	font-weight: normal;
}
.comparisonTable-ver2 table .band,
.comparison_note .band {
	margin-top: 0.5em;
	padding-left: 0.3em;
	padding-right: 0.2em;
	background-color: var(--sub-color);
	color: #fff;
	font-weight: 700;
}
.comparison_note {
	margin-top: 0.6em;
	text-align: right;
}
.comparison_note > ul {
	display: inline-block;
	text-align: left;
}
.comparison_noteItem {
	font-size: 0.8em;
}
.comparison_noteItem .num {
	margin-right: 1em;
}
.comparison_noteItem + .comparison_noteItem {
	margin-top: 0.2em;
}
@media screen and (max-width:1200px) {
	.comparisonTable table td ul li.case{
		height: 6vw;
	}
}
@media screen and (max-width:1000px) {
	.comparisonTable table td ul.main li.case img {
		width: 60%;
	}
}
@media screen and (max-width:840px){
	.comparisonArea{
		padding: 12% 0 18%;
	}
	.comparisonTable table th,
	.comparisonTable table td{
		height: 3em;
	}
	.comparisonTable table td{
		padding: 0.5em;
	}
	.comparisonTable table td ul.main li.txt br{
		display: none;
	}
}
@media screen and (max-width:599px) {
	.comparisonArea{
		margin-top: 50px;
	}
	.comparisonArea h2{
		width: 100%;
	}
	.comparisonArea h2 img{
		width: 100%;
	}
	.comparisonTable{
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: normal;
	}
	.comparisonTable table{
		width: 700px;
	}
	.comparisonTable table td ul li p{
		position: relative;
		top: -1.5rem;
	}
	.comparisonTable table td ul li.case{
		height: 45px;
		line-height: 2.5;
	}
	.comparisonTable table td ul.main li.case{
		line-height: 2.1;
	}
	.comparisonTable table td ul li.txt p {
		top: -3.5rem;
	}
}


/* flow
========================================== */
.flowArea{
	padding: 130px 0 90px;
}
.flowArea h2{
	width: 52%;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	text-align: center;
}
.flowArea h2 img{
	width: 100%;
}
.flowList{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 0.5em;
}
.flowList ul{
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	width: calc((100% - 4em) / 5);
	padding: calc(6em + 1em) 1em 1.4em;
}
.flowList ul:first-child{
	background-image: url(../../images/lp02/flow_list01_upper.png), url(../../images/lp02/flow_list_bottom.png), url(../../images/lp02/flow_list_middle.png) ;
	background-position: top center, bottom center, top center;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: contain, contain, contain;
}
.flowList ul:nth-child(2){
	background-image: url(../../images/lp02/flow_list02_upper.png), url(../../images/lp02/flow_list_bottom.png), url(../../images/lp02/flow_list_middle.png) ;
	background-position: top center, bottom center, top center;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: contain, contain, contain;
}
.flowList ul:nth-child(3){
	background-image: url(../../images/lp02/flow_list03_upper.png), url(../../images/lp02/flow_list_bottom.png), url(../../images/lp02/flow_list_middle.png) ;
	background-position: top center, bottom center, top center;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: contain, contain, contain;
}
.flowList ul:nth-child(4){
	background-image: url(../../images/lp02/flow_list04_upper.png), url(../../images/lp02/flow_list_bottom.png), url(../../images/lp02/flow_list_middle.png) ;
	background-position: top center, bottom center, top center;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: contain, contain, contain;
}
.flowList ul:last-child{
	background-image: url(../../images/lp02/flow_list05_upper.png), url(../../images/lp02/flow_list_bottom.png), url(../../images/lp02/flow_list_middle.png) ;
	background-position: top center, bottom center, top center;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: contain, contain, contain;
}

.flowList ul li.txt{
	font-size: clamp(1.3rem, 1.7vw, 1.5rem);
}
.flowList ul li.icon{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5.8em;
}
.flowList ul li.icon .img{
	width: 40%;
	margin: 0 auto;
}
.flowList ul li.icon img{
	width: 100%;
}
@media screen and (max-width:840px) {
	.flowArea{
		padding: 20% 0 10%;
	}
	.flowList {
		max-width: 540px;
		margin: 0 auto;
	}
	.flowList ul{
		width: calc((100% - 2em) / 3);
	}
}
@media screen and (max-width:599px) {
	.flowList ul{
		width: calc((100% - 1em) / 2);
	}
}


/* faq
========================================== */
.faqArea{
	margin-bottom: 100px;
}
.faqArea h2{
	width: 58%;
	max-width: 276px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	text-align: center;
}
.faqArea h2 img{
	width: 100%;
}
.faqList{}
.faqList details::details-content {
	opacity: 0;
	block-size: 0;
	transition: .3s;
	transition-property: display, opacity, block-size, padding;
	transition-behavior: allow-discrete;
	line-height: 1.6em;
}
.faqList details .faq{
	position: relative;
	border: none;
	display: block;
	list-style: none;
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
	cursor: pointer;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 600;
	line-height: 2.4;
	border-bottom: 2px solid var(--main-color);
	transform: scale(1, 0.99);
}
.faqList details .faq::-webkit-details-marker{
	display: none;
}
.faqList details .faq::after{
	content: "+";
	position: absolute;
	top: calc(50% - 0.5rem);
	right: 0;
	line-height: 1;
	padding: 3px;
	width: 38px;
	height: 38px;
	text-align: center;
	pointer-events: none;
	color: var(--main-color);
	border: 2px solid var(--main-color);
}
.faqList details .faq span{
	position: relative;
	top: 1rem;
	margin-right: 2rem;
	font-family: "Oswald", sans-serif;
	font-weight: bold;
	font-size: clamp(3rem, 5vw, 5rem);
	color: var(--main-color);
}
.faqList details .answer{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 0 2em 2.8em;
	background-color: var(--c-beige);
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--txt-color);
	border-radius: 10px;
}
.faqList details .answer a{
	text-decoration: none;
	color: var(--c-yellow);
	font-weight: 600;
}
.faqList details .answer::after{
	content: "";
	position: absolute;
	top: 70%;
	right: 0;
	border-style: solid;
	border-width: 25px 0 0 50px;
	border-color: transparent transparent transparent var(--c-beige);
	translate: 100% calc(-50% + 0.1px);
	transform: skew(0, 10deg);
	transform-origin: left;
}
.faqList details .answer>*:first-of-type {
	margin-top: 0;
}
.faqList details .answer>*:last-of-type {
	margin-bottom: 0;
	padding-left: 6rem;
	line-height: 1.6;
}
.faqList details .answer .ttl{
	font-size: clamp(1.8rem, 2vw, 2.6rem);
	font-weight: 800;
	line-height: 2;
	color: var(--sub-color);
	transform: scale(1, 0.99);
}
.faqList details .answer .ttl span{
	position: relative;
	top: 1rem;
	margin-right: 2rem;
	padding: 0;
	font-family: "Oswald", sans-serif;
	font-weight: bold;
	font-size: clamp(3rem, 5vw, 5rem);
	color: var(--sub-color);
	background: none;
}
.faqList details[open]::details-content {
	opacity: 1;
	block-size: auto;
	block-size: calc-size(auto, size);
}
.faqList details[open] .faq::after {
	content: "-";
}
.faqList details .answer>*:last-of-type.faqAreaBtn{
	width: 100%;
	max-width: 560px;
	margin: 2em auto 0;
	padding-left: 0;
}
.faqList details .answer>*:last-of-type.faqAreaBtn a{
	display: block;
}
.faqList details .faqAreaBtn img{
	width: 100%;
}

@media screen and (max-width:1200px) {
	.faqList details .faq{
		width: 100%;
	}
	.faqList details .answer{
		width: 100%;
		margin-left: 0;
	}
	.faqList details .answer::after {
		border: none;
	}
}
@media screen and (max-width:840px) {
	.faqList details .faq::after {
		line-height: 1.4;
	}
	.faqArea{
		margin-bottom: 15%;
	}
}
@media screen and (max-width:599px) {
	.faqArea h2{
		width: 52%;
		margin: 0 20% 50px;
	}
	.faqArea h2 img{
		width: 100%;
	}
	.faqList details .faq span{
		position: absolute;
		top: -1rem;
		left: 0;
	}
	.faqList details .faq{
		padding: 0 3.5rem 1rem;
		line-height: 1.5;
	}
	.faqList details .faq::after{
		top: calc(50% - 2.5rem);
		width: 30px;
		height: 30px;
		line-height: 1;
	}
	.faqList details .answer{
		margin-bottom: 30px;
		padding: 1em;
	}
	.faqList details .answer .ttl{
		margin-bottom: 1.2rem;
		padding-left: 3rem;
		line-height: 1.5;
	}
	.faqList details .answer .ttl span{
		position: absolute;
		left: 0;
		top: -1rem;
	}
	.faqList details .answer>*:last-of-type{
		padding-left: 3rem;
		padding-right: 1rem;
		padding-bottom: 1rem;
	}
}


/* contact
========================================== */
.contactArea {
	position: relative;
	padding: 150px 0 90px;
	background: url(../../images/lp02/contact_bg.png) top no-repeat;
	background-size: cover;
}
.contactArea h2{
	position: relative;
	left: 39%;
	margin-bottom: 80px;
}
.contactArea.complete h2{
	position: static;
	left: auto;
	text-align: center;
}
.contactImg{
	position: absolute;
	top: -3%;
	width: 40%;
	max-width: 380px;
}
.contactImg img{
	width: 100%;
}
.contactFlow{
	margin-bottom: 80px;
	text-align: center;
}
.contactForm {
	margin-top: 40px;
}
.contactForm dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
}
.contactForm dl.message{
	align-items: flex-start;
}
.contactForm dl dt{
	position: relative;
	width: 460px;
	padding-left: 8rem;
	color: #fff;
	font-size: clamp(1.6rem, 1.8vw, 2rem);
	font-weight: 700;
	line-height: 2.4;
	transform: scale(1, 0.99);
}
.contactForm dl dt::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 56px;
	height: 31px;
	transform: translateY(-50%);
}
.contactForm dl dt.must::before{
	background: url(../../images/lp02/contact_must.png) center center no-repeat;
	background-size: contain;
}
.contactForm dl dt.optional::before {
	background: url(../../images/lp02/contact_optional.png) center center no-repeat;
	background-size: contain;
}
.contactForm dl dd{
	width: 740px;
}
.contactForm dl dd ul{
	display: flex;
}
.contactForm dl dd .error{
	color: var(--sub-color)!important;
}
.contactForm dl dd ul li{
	display: flex;
	flex-wrap: wrap;
	column-gap: 2em;
	row-gap: 0.8em;
}
.contactForm dl dd ul li .horizontal-item + .horizontal-item{
	margin-left: 0;
}
.contactForm input[type="text"],
.contactForm input[type="tel"],
.contactForm input[type="email"],
.contactForm textarea,
.contactForm select {
	padding: 2rem;
	line-height: 1.5em;
	vertical-align: middle;
	border: 1px solid #d4d4d7;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	color: var(--txt-subcolor);
	background: #fcfcfc;
	box-sizing: border-box;
	font-family: inherit;
	-webkit-appearance: none;
}
.contactForm input[type="text"] {
	width: 100%;
	padding: 2rem;
	line-height: 1.5em;
	vertical-align: middle;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid var(--main-color);
	/* background-color: var(--c-beige); */
	color: var(--txt-color);
	font-size: clamp(1.6rem, 2.1vw, 1.8rem);
	font-weight: 400;
}
.contactForm input[type="email"] {
	width: 100%;
	border: 1px solid var(--main-color);
	/* background-color: var(--c-beige); */
}
.contactForm input::placeholder {
	color: var(--txt-subcolor);
}
.contactForm input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin-top: -0.6rem;
	margin-right: 0.8rem;
	border-radius: 5px;
	border: solid 1px var(--main-color);
	/* background-color: var(--c-beige); */
}
/* .contactForm input[type='checkbox']::before {
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	border: solid 1px var(--main-color);
	background-color: var(--c-beige);
	border-radius: 5px;
} */
.contactForm textarea {
	overflow: auto;
	width: 100%;
	height: 200px;
	border: 1px solid var(--main-color);
	/* background-color: var(--c-beige); */
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: var(--txt-color);
}
p.contactTxt{
	text-align: center;
}
p.contactTxt span{
	padding: 0 0 0 1rem;
	background: none;
	line-height: 1.8;
}
.contactBtnList{
	margin-top: 65px;
	text-align: center;
}
.contactBtnList > li + li{
	margin-top: 2em;
}
.contactBtnList input[type="submit"] {
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 90%;
	max-width: 380px;
	padding: 2.2rem 0;
	border: none;
	box-sizing: border-box;
	background-color: var(--main-color);
	font-family: inherit;
	color: var(--txt-color);
	font-size: clamp(1.6rem, 2.3vw, 2rem);
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	transition: .2s;
	cursor: pointer;
	-webkit-appearance: none;
}
.contactBtnList input[type="submit"][name="submitBack"] {
	color: #fff;
	background: #7a7a7a;
}
.contactBtnList input[type="submit"]:hover,
.contactBtnList input[type="submit"][name="submitBack"]:hover {
	color: #fff;
	background-color: var(--sub-color);
}

.completeArea {
	text-align: center;
}
.completeInner p {
	font-size: clamp(1.4rem, 1.9vw, 1.6rem);
	color: #efefef;
	line-height: 1.8;
}
.completeInner p + p {
	margin-top: 1.8em;
}
.completeInner .btn_download {
	display: inline-block;
	margin-bottom: 1.5em;
	padding: 1em 1.2em;
	background-color: var(--sub-color);
	border: 1px solid var(--sub-color);
	color: #fff;
	font-size: 1.2em;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4em;
	transition: all ease 0.2s;
}
.completeInner .btn_download:hover {
	background-color: #fff;
	color: var(--sub-color);
}
a.completeTel {
	margin-right: 0.2em;
	font-size: 3rem;
	color: var(--main-color);
	font-weight: 600;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	text-decoration: none;
}
.completeBtn {
	text-align: center;
}
.completeBtn a {
	display: inline-block;
	width: 90%;
	max-width: 280px;
	margin: 3.8em auto 0;
	padding: 1.8rem 0;
	background-color: var(--main-color);
	font-family: inherit;
	color: var(--txt-color);
	font-size: clamp(1.6rem, 2.1vw, 1.8rem);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: .2s;
	cursor: pointer;
}
.completeBtn a:hover {
	color: #fff;
	background-color: var(--sub-color);
}
.contactArea .tptn_counter {
	display: none!important;
}
@media screen and (max-width: 840px) {
	.contactArea {
		padding: 15% 0 12%;
	}
	.contactImg{
		width: 38%;
	}
	.contactImg img{
		width: 100%;
	}
	.contactArea h2{
		left: 30%;
	}
	.contactForm dl{
		display: block;
	}
	.contactForm dl dt,
	.contactForm dl dd{
		width: 100%;
	}
	.contactForm dl dt{
		margin-bottom: 20px;
		padding-left: 6rem;
		line-height: 1.8;
	}
	.contactForm dl dt::before {
		width: 2.5em;
		height: 1.5em;
	}
	.contactForm dl dd ul{
		display: block;
	}
	.contactForm dl dd ul li {
		margin: 0 0 10px;
	}
}
@media screen and (max-width: 599px) {
	.contactArea h2{
		width: 65%;
		left: 26%;
		margin-bottom: 50px;
	}
	.contactArea.complete h2{
		width: 65%;
		max-width: 320px;
		margin-bottom: 50px;
		margin-left: auto;
		margin-right: auto;
	}
	.contactArea h2 img{
		width: 100%;
	}
	.contactImg{
		top: -1.3em;
		width: 38%;
	}
	.contactFlow{
		margin-bottom: 50px;
	}
	.contactFlow img{
		width: 100%;
	}
	.contactForm dl{
		margin-bottom: 20px;
	}
	.contactForm input[type="text"]{
		padding: 1rem;
	}
}


/* footer
========================================== */
footer{
	overflow: hidden;
}
.footerWrap{
	margin: 0 auto;
	padding: 120px 0 20px;
	width: 100%;
	max-width: 1100px;
}
.footerInfo{
	position: relative;
	margin-bottom: 20px;
	color: #fff;
	font-size: 1.4rem;
}
.footerInfo::after{
	content: '';
	position: absolute;
	left: -50%;
	width: 200%;
	height: 3px;
	background-color: var(--border02-color);
}
.footerInfo .logo{width: 179px;margin-bottom: 20px;}
.footerInfo .logo img{width: 100%;height: auto;}
.footerNaviWrap{
	margin-top: 95px;
}
.footerNavi{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 1.8em;
	margin-bottom: 90px;
}
.footerLink{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 90px;
}
.footerNavi{margin-bottom: 60px;}
.footerNavi li a{
	display: block;
	text-decoration: none;
	color: var(--main-color);
	font-size: clamp(1.4rem, 2vw, 2.2rem);
	font-weight: 800;
	transform: scale(1, 0.99);
	transition: all .3s;
}
.footerNavi li a span {
	display: block;
	color: #fff;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: 600;
	font-style: normal;
	transition: all .3s;
}
.footerNavi li a:hover{
	color: #fff;
}
.footerNavi li a:hover span{
	color: var(--main-color);
}
.footerLink li:first-child{margin-right: 20px;}
.footerLink li a{
	display: block;
}
.footerLink li a:hover{
}
.footerLink li.f_btn01 div{
	margin-bottom: 20px;
}
.footerLink li.f_btn02{
	margin-top: 30px;
}
.copyright{
	color: var(--main-color);
	font-size:1.2rem;
	text-align: center;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
}

@media screen and (max-width: 1200px) {
	.footerWrap{
		padding: 50px 30px 20px;
		width: 100%;
	}
}
@media screen and (max-width: 1024px) {
	.footerLink{display: block; text-align: center;}
	.footerLink li:first-child{margin-right: 0; margin-bottom: 20px;}
}
@media screen and (max-width: 840px) {
	.footerWrap{flex-direction: column;}
	.footerNaviWrap{margin-top: 80px;}
	.footerInfo{text-align: center; width: 100%;}
	.footerNavi{
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 1.5em;
		row-gap: 0.5em;
	}
	/* .footerNavi li a span{
		font-size: clamp(2.4rem, 2vw, 4rem)
	} */
}
@media screen and (max-width: 599px) {
	.footerNavi li {
		margin-bottom: 10px;
		padding: 0 1%;
		width: 7.5em;
		text-align: center;
	}
	.footerLink li.f_btn02,
	.footerLink li.f_btn02 img{
		width: 100%;
	}
	.footerNavi{
		column-gap: 2vw;
	}
}
@media screen and (max-width: 380px) {
	.footerLink li.f_btn01 div{
		width: 90%;
		margin: 0 auto 20px;
	}
	.footerLink li.f_btn01 div:first-child{
		width: 60%;
	}
	.footerLink li.f_btn01 div img{
		width: 100%;
	}
}

/* pageTop
========================================== */
#pageTop{
	position:fixed;
	line-height: 1;
	right:20px;
	bottom:88px;
	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;}
}

/* breadcrumb
========================================== */
.breadcrumb{
	padding-top: 100px;
	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;}
}

/* fixedBtn
========================================== */
.fixedBtn {
	position: fixed;
	z-index: 5000;
}
.fixedBtn a {
	display: inline-block;
}
.fixedBtn-pamphlet {
	top: 20%;
	right: 0;
}
.fixedBtn-pamphlet a {
	padding: 1.4em 0.8em 2.5em;
	background-color: var(--sub-color);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 800;
	color: #fff;
	writing-mode: vertical-rl;
	text-decoration: none;
	border-radius: 10px 0 0 10px;
	box-shadow: 2px 6px 0 #000;
}
.fixedBtn-pamphlet a span {
	display: inline-block;
	position: relative;
}
.fixedBtn-pamphlet a span::after {
	content: "≫";
	display: inline-block;
	position: absolute;
	top: calc(100% + 0.6em);
	left: 55%;
	transform: translateX(-50%);
}
.fixedBtn-investigation {
	width: 38%;
	max-width: 200px;
	top: 58%;
	right: 28px;
}
.fixedBtn-investigation a img {
	width: 100%;
}
@media screen and (max-width: 599px) {
	.fixedBtn-pamphlet {
		top: 25vh;
	}
	.fixedBtn-investigation {
		top: 68vh;
		right: 3px;
	}
}