/*============ 共通項目 ==============*/

@media only screen and (min-width:1000px){*.sp{display:none !important;}}
@media only screen and (max-width:1000px){*.pc{display:none !important;}}

/*============ header 調整用　==============*/
header {
	width: 85rem;
	padding: 0;
	margin: 2rem;
	display: flex;
	justify-content: space-between;
	z-index: 12;
	position: absolute;
	border-radius: 100px;
}

header h1 {
	margin: 1rem 0 1rem 2rem;
	width: 20rem;
}

header h1 a{}
header h1 a img {
	align-items: center;
	display: flex;
}

header nav {
	position: absolute;
	left: 30rem;
	top: 2.5rem;
	margin: auto;
	display: flex;
	align-items: center;
}

header nav > ul.fe {
	width: 100%;
	justify-content: space-between;
	display: flex;
	padding: 0;
}
header nav > ul > li {
	font-size: 2rem;
	position: relative;
}
header nav > ul > li > a {
	font-size: 3rem;
	position: relative;
	padding: 0 2rem;
	text-decoration-line: none;
	font-weight: bold;
	letter-spacing: -0.2rem;
}
header nav > ul > li > a::before {
	content: "";
	background: #854c90;
	height: 2px;
	width: 0;
	position: absolute;
	right: 0;
	bottom: -2px;
	transition: .3s ease-in;
}


header nav > ul > li > a:hover:before {width:100%; left:0; right:auto;}



@media only screen and (max-width:1000px){


}




/*============ footer 調整用　==============*/
footer {
	padding: 2rem 0;
	background: #333333;
}

footer > h2 {
	text-align: center;
	font-size: 3rem;
	color: #fff;
	margin: 5rem auto;
}

footer > ul {
	align-items: center;
	margin: auto;
	padding: 0;
	width: min(96% , 130rem);
}
footer > ul li {
	width: 50%;
	display: flex;
	align-items: center;
}

footer > ul li:nth-of-type(1) {position: relative;}
footer > ul li:nth-of-type(2) {position: relative;}

footer > ul li:nth-of-type(1) a, footer > ul li:nth-of-type(2) a span {
	color: #000;
	display: block;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 60rem;
	height: 10rem;
	margin: 4rem auto;
	line-height: 7rem;
	border-radius: 15px;
	background: #fff;
	border: none;
	font-weight: bold;
	align-items: center;
	display: inline-flex;
	justify-content: center;
	text-decoration-line: none;
}
footer > ul li:nth-of-type(1) a {
	font-size: 4rem;
	display: flex;
	padding-left: 3rem;
}
footer > ul li:nth-of-type(2) a {
	width: 100%;
	display: flex;
}
footer > ul li:nth-of-type(2) a span {
	font-size: 3rem;
	padding-left: 4rem;
}

footer > ul li:nth-of-type(1)::before {
	content: "";
	background: url(https://www.4think.co.jp/wp/wp-content/themes/twentytwentyone-4think/assets/images/common/f-icon_tell.png) no-repeat center / cover;
	width: 4.1rem;
	height: 5.3rem;
	position: absolute;
	left: -35rem;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}

footer > ul li:nth-of-type(2)::before {
	content: "";
	background: url(https://www.4think.co.jp/wp/wp-content/themes/twentytwentyone-4think/assets/images/common/f-icon_mail.png) no-repeat center / cover;
	width: 6rem;
	height: 4rem;
	position: absolute;
	left: -40rem;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;

}
footer > .fWrap {
	width: min(94% , 1600px);
	margin: 8rem auto auto;
	display: flex;
}
footer > .fWrap .contentWrap {
	width: 40%;
	display: flex;
}
footer > .fWrap .contentWrap p, footer > .fWrap .contentWrap address {
	color: #fff;
	font-size: 2rem;
	margin-left: 3rem;
}

footer > .fWrap nav {
	display: flex;
	width: 70rem;
}
footer > .fWrap nav ul.fe {
	width: 100%;
	justify-content: space-between;
	display: flex;
	padding: 0;
	align-items: end;
	margin: 2rem auto;
}
footer > .fWrap nav ul.fe > li:not(:last-of-type) > a {
	font-size: 2.3rem;
	position: relative;
	padding: 0 2rem;
	color: #fff;
	text-decoration-line: none;
	font-weight: bold;
}

footer > .fWrap nav ul.fe > li > a img {width:6rem;}
footer > .fWrap nav ul.fe > li:not(:last-of-type) > a::before {
	content: "";
	background: #fff;
	height: 2px;
	width: 0;
	position: absolute;
	right: 0;
	bottom: -2px;
	transition: .3s ease-in;
}
footer > .fWrap nav ul.fe > li:not(:last-of-type) > a:hover:before {width:100%; left:0; right:auto;}

footer > .fWrap nav > a {width: 20%;}



footer > small {
	color: #fff;
	font-weight:bold;
	text-align: end;
	display: block;
	margin: auto 4rem;
}

footer > small a{
	color: #fff;
	font-size: 2rem;
	font-weight:bold;
}

p.toLink {
	width: 15rem;
	height: 15rem;
	position: fixed;
	bottom: 5rem;
	right: 5rem;
	z-index: 20;
}






/*============ スマホページ 調整用　==============*/

@media only screen and (max-width:1000px){

/*============ header 調整用　==============*/




/*============ footer 調整用　==============*/

footer {height: 120rem;}
	
footer > .fWrap {
	display: block;
}

footer > ul {
	padding: unset;
}
footer > ul li {
	width: 100%;
}
footer > .fWrap .contentWrap {width: 100%;}
footer > .fWrap .contentWrap h1 {width: 30%;}
footer > .fWrap .contentWrap ul {width: 70%;}

footer > .fWrap .contentWrap p, footer > .fWrap .contentWrap address {font-size: 3.5rem;}

footer > .fWrap nav {width: 100%;}
footer > .fWrap nav ul.fe > li > a {font-size: 3.5rem;}
	
	
	
}