@charset 'utf-8';
:root{
	--font-size: 2.564vw;
	--contentsWrapper: calc(100% - 4rem);
	--colorBlack: #000000;
	--colorGray: #3B3C3D;
	--colorLightGray: #ECECEC;
	--colorWhite: #FFFFFF;
	--colorBlue: #1B48AA;
	--colorLightBlue: #E6F1FF;
	--colorOrange: #E94336;
}
html{
	line-height: 1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: var(--font-size);
	color: var(--colorBlack);
}
a{
	display: block;
}
img{
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}
main{
	font-size: 1.6rem;
}
section{
 	padding: 6rem 0;
}
/* ============================== 
	common
 ============================== */
body:has(.gNav.active){
	overflow: hidden;
}
.pcView{
	display: none;
}
.contentsWrapper{
	width: var(--contentsWrapper);
	margin: 0 auto;
}
.bgLightGray{
	background-color: var(--colorLightGray);
}
.bgGray{
	background-color: var(--colorGray);
}
.blueText{
	color: var(--colorBlue);
}
.contentsText{
	line-height: 2;
}
.contentsWrapper > .contentsText{
	margin-bottom: 4rem;
}
.noticeText{
	padding-left: 1em; 
	text-indent: -1em;
}
.boldText{
	font-weight: bold;
}
.pageTitleWrap{
	height: 21.5rem;
	padding: 12.5rem 0 5rem;
	background: url(/seobusiness/img/common/bg_pageTitleWrap.webp) no-repeat center / cover;
}
.pageTitleWrap .pageTitle{
	line-height: 1.25;
	font-size: 3.2rem;
	font-weight: bold;
	color: var(--colorWhite);
}
.pageTitleWrap .pageTitle .small{
	display: block;
	font-size: 1.6rem;
}
.captionHeading{
	margin-bottom: 4rem;
	line-height: 1.3;
}
.captionHeading .boldText{
	font-size: 2rem;
}
.bigTextHeading{
	margin-bottom: 4rem;
	line-height: 1.65;
	font-size: 3.6rem;
	font-weight: bold;
}
.bgGray .captionHeading,
.bgGray .bigTextHeading,
.bgGray .contentsText{
	color: var(--colorWhite);
}
.moreViewBtn{
	padding: 1.5rem 0;
	position: relative;
	border-radius: 100vh;
	background-color: var(--colorBlack);
	line-height: 1.3;
	font-weight: bold;
	color: var(--colorWhite);
	text-align: center;
}
.moreViewBtn.white{
	background-color: var(--colorWhite);
	color: var(--colorBlack);
}
.contentsWrapper .moreViewBtn{
	margin-top: 4rem;
}
.moreViewBtn:after{
	content: '\f061';
	position: absolute;
	right: 2rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--colorWhite);
}
.moreViewBtn.white:after{
	color: var(--colorBlack);
}
.fadeInItem{
	opacity: 0;
	transform: translateY(5rem);
	transition: opacity .5s, transform .5s;
}
.fadeInItem.active{
	opacity: 1;
	transform: translateY(0);
}
/* ============================== 
	header
 ============================== */
header{
	width: 100%;
	position: absolute;
	z-index: 9;
}
header .headerFlex{
	height: 6rem;
	padding: 0 7.5rem 0 1rem;
	display: flex;
	align-items: center;
}
header .logo{
	width: 10rem;
	margin-right: 1rem;
}
header .headerText{
	width: calc(100% - 11rem);
	line-height: 1.3;
	font-size: 1.2rem;
	color: var(--colorWhite);
}
header .menuBtn{
	width: 6rem;
	height: 6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--colorBlack);
}
header .menuBtn i{
	font-size: 3.2rem;
	color: var(--colorWhite);
}
header .menuBtn#menuBtn{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9;
}
header .gNav{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	right: -100vw;
	z-index: 99;
	background-color: var(--colorGray);
	overflow-y: auto;
}
header .gNav.active{
	right: 0;
}
header .gNav .menuBtn#menuBtnClose{
	margin-left: auto;
}
header .navLogo{
	width: 20rem;
	margin: 2rem auto;
}
header .gNavList li{
	border-bottom: .1rem solid var(--colorWhite);
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--colorWhite);
}
header .gNavList li:first-of-type{
	border-bottom: none;
}
header .gNavList li.title{
	padding: 1rem 2rem;
	border-bottom: none;
	background-color: var(--colorBlue);
}
header .gNavList li:has(+ .title){
	border-bottom: none;
}
header .gNavList li a{
	padding: 2rem;
	position: relative;
	line-height: 1.3;
}
header .gNavList li a:after{
	content: '\f054';
	position: absolute;
	right: 2rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}
header .gNavBox .moreViewBtn{
	width: calc(100% - 2rem);
	margin: 2rem auto;
	font-size: 1.6rem;
}
/* ============================== 
	footer
 ============================== */
footer{
	padding: 6rem 0 3rem;
	border-top: .1rem solid var(--colorWhite);
	background-color: var(--colorGray);
	color: var(--colorWhite);
}
footer .logo{
	width: 20rem;
	margin-bottom: 3rem;
}
footer .company{
	margin-bottom: 3rem;
	line-height: 2;
	font-size: 1.2rem;
}
footer .footerListBox{
	margin-bottom: 4rem;
}
footer .footerListBox .footerListTitle{
	margin-bottom: 2rem;
	font-size: 1.4rem;
}
footer .footerListBox .footerList li{
	margin-bottom: 1.5rem;
}
footer .footerListBox .footerList li:last-of-type{
	margin-bottom: 0;
}
footer .footerListBox .footerList li a{
	font-size: 1.4rem;
}
footer .contentsWrapper .moreViewBtn{
	margin: 6rem auto;
	font-size: 1.6rem;
}
footer .copy{
	font-size: 1.2rem;
	text-align: center;
}
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= 
			PC
 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
@media screen and (min-width: 1001px) {
	:root{
		--font-size: 10px;
		--contentsWrapper:  1000px;
	}
	a{
		transition: opacity .7s;
	}
	a:hover{
		opacity: .7;
	}
	body:has(.gNav.active){
		overflow: auto;
	}	
	.pcView{
		display: block;
	}	
	.spView{
		display: none;
	}
	.pageTitleWrap{
		padding: 8rem 0 2rem;
		background: url(/seobusiness/img/common/bg_pageTitleWrap_pc.webp) no-repeat center / cover;
	}
	.pageTitleWrap .pageTitle{
		line-height: 1.65;
		font-size: 4.2rem;
	}
	.pageTitleWrap .pageTitle .small{
		font-size: 2.4rem;
	}
	.captionHeading .boldText{
		font-size: 2.4rem;
	}
	.bigTextHeading{
		font-size: 4.2rem;
	}
	.pageDetailSection{
		position: relative;
	}
	.pageDetailSection .captionHeading,
	.pageDetailSection .bigTextHeading,
	.pageDetailSection .contentsText{
		width: 55rem;
	}
	.pageDetailSection .pageDetailImg{
		width: 56rem;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
	}
	.moreViewBtn{
		width: 30rem;
		border: .1rem solid var(--colorBlack);
		transition: background-color .7s, color .7s;
	}
	.moreViewBtn:hover{
		background-color: var(--colorWhite);
		color: var(--colorBlack);
		opacity: 1;
	}
	.moreViewBtn.white{
		border: .1rem solid var(--colorWhite);
	}
	.moreViewBtn.white:hover{
		background-color: var(--colorBlack);
		color: var(--colorWhite);
	}
	.moreViewBtn:hover:after{
		color: var(--colorBlack);
	}
	.moreViewBtn.white:hover:after{
		color: var(--colorWhite);
	}
	/* ============================== 
		header
	 ============================== */
	header{
		margin: auto;
		left: 0;
		right: 0;
	}
	header .headerFlex{
		width: 100rem;
		margin: 0 auto;
	}
	header .logo{
		width: 20rem;
	}
	header .headerText{
		width: calc(100% - 21rem);
	}
	header .gNav{
		width: 39rem;
	}
	/* ============================== 
		footer
	============================== */
	footer{
		padding: 4rem 0 2rem;
	}
	footer .contentsWrapper{
		position: relative;
	}
	footer .footerListBoxWrap{
		width: var(--contentsWrapper);
		display: flex;
		justify-content: flex-end;
		position: absolute;
		top: 0;
		right: 0;
	}
	footer .footerListBoxWrap .footerListBox{
		margin-right: 6rem;
	}
	footer .footerListBoxWrap .footerListBox:last-of-type{
		margin-right: 0;
	}
	footer .contentsWrapper .moreViewBtn{
		width: 25rem;
		margin: 4rem 0 7.5rem;
	}
}
@media screen and (min-width: 1441px) {
	.pageDetailSection .pageDetailImg{
		left: 0;
		transform: translateX(44rem);
	}
	header .headerFlex{
		width: 144rem;
	}
	header .menuBtn#menuBtn{
		margin: auto;
		left: 0;
		transform: translateX(69rem);
	}
}