@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Petit+Formal+Script&display=swap');

html{
	font-size: calc(0.625rem + ((1vw - 7.68px) * 1.5625));
	min-height: 0vw;
}

body{
	font-family: YakuHanJP, "Jost", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
	font-optical-sizing: auto;
	font-feature-settings: "palt";
	font-style: normal;
 	font-size: 1rem;
 	font-weight: 400;
 	letter-spacing: .1rem;
 	line-height: 1.8rem;
}

h1, h2, h3, h4, p, a, ol, ul, li{
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
	cursor: pointer;
	color: #000;
}

img{
	max-width: 100%;
	max-height: 100%;
}

ol, ul{
	list-style: none;
}

.sp{
	display: none;
}

/* header */
header{
	display: block;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 20px 0;
	border-bottom: 1px solid #a9a9a9;
	background-color: #fff;
	z-index: 1000;
}

.header_nav{
	display: flex;
	max-width: 1024px;
	height: auto;
	margin: 0 auto;
	align-items: center;
}

.header_logo{
	display: block;
	width: 120px;
	height: auto;
}

.header_nav_right{
	display: flex;
	height: 60px;
	width: auto;
	margin-left: auto;
	align-items: center;
}

.gnav{
	display: flex;
	margin-right: 48px;
 	font-size: 1rem;
 	font-weight: 600;
 	letter-spacing: .2rem;
}

.gnav li{
	transition: .3s;
}

.gnav li:hover{
	opacity: .5;
}

.gnav li:not(:last-child){
	margin-right: 24px;
}

.gnav .here{
 	border-bottom: 1px solid #000;	
}

.sns_nav{
	display: flex;
	margin-left: auto;
}

.sns_account{
	height: 24px;
	width: auto;
	transition: .3s;
}

.sns_account:not(:last-child){
	margin-right: 24px;
}

.sns_account:hover{

}

/* main */
main{
	max-width: 1024px;
	margin: 0 auto;
	padding: 100px 0;
	text-align: center;
}

.kv{
 	max-width: 460px;
 	width: 45%;
 	height: auto;
 	margin: 100px auto 0;
}

h2{
 	font-size: 3rem;
 	font-weight: 600;
 	letter-spacing: .2rem;
 	margin-top: 100px;
}

h2.top{
 	max-width: 620px;
 	width: 60%;
 	height: auto;
 	margin: 60px auto 0;
}

h3{
 	font-size: 2rem;
 	font-weight: 600;
 	letter-spacing: .2rem;
 	margin-top: 60px;
}

h3.policy{
	text-align: left;
}

.text{
 	margin-top: 30px;
}

.top.text{
	margin-top: 40px;
	font-weight: 700;
}

.company{
	width: 680px;
 	font-size: 1rem;
 	font-weight: 700;
 	letter-spacing: .1rem;
 	line-height: 1.8rem;
 	margin: 30px auto 0;
}

.company div{
	display: flex;
	padding: 20px 20px;
	text-align: left;
 	border-bottom: 1px solid #d3d3d3;	
}

.company div:first-child{
	border-top: 1px solid #d3d3d3;
}

.company .sd{
	width: 200px;
	margin-right: 40px;
}

.company .st{
	width: 400px;
	font-weight: 400;
}

.company a.st{
 	text-decoration: underline;
}

.mail{
 	font-size: 1rem;
 	font-weight: 700;
 	letter-spacing: .1rem;
 	line-height: 1.8rem;
}

.mail.text{
	margin-top: 30px;
}

.mail.send{
 	margin-top: 20px;
}

.mail a{
 	color: #000;
 	line-height: 2rem;
 	border-bottom: 1px solid #000;
 	transition: .3s;
}

.mail a:hover{
	opacity: .5;
}

main.policy{
	width: 680px;
}

.policy.text p{
	text-align: left;
}

.policy.text p:not(:last-child){
	margin-bottom: 16px;
}

.policy.date.text p{
	text-align: right;
}
}

ul.policy{
	list-style-type: disc;
	margin-top: 16px;
}

.policy li{
	text-align: left;
	margin-left: 1.1em;
}

.policy li:marker{
	font-size: 1.1em;
}

h4{
	margin-top: 16px;
	font-size: 18px;
}

.contactinfo{
	width: 500px;
 	font-size: 1rem;
 	font-weight: 700;
 	letter-spacing: .1rem;
 	line-height: 1.8rem;
 	margin: 16px auto 0;
}

.contactinfo div{
	display: flex;
	padding: 20px 40px;
	text-align: left;
 	border-bottom: 1px solid #d3d3d3;	
}

.contactinfo div:first-child{
	border-top: 1px solid #d3d3d3;
}

.contactinfo .sd{
	width: 160px;
	margin-right: 40px;
}

.contactinfo .st{
	width: 240px;
	font-weight: 400;
}

.mask{
	display: inline-block;
	opacity: 0;
	overflow: hidden;
	position: relative;
}

.mask::after{
	display: block;
	background: #000;
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	transform: translateX(102%);
}

.mask.mask_anime.active{
	animation: in 1.2s cubic-bezier(.8, 0, .17, 1);
	opacity: 1;
}

.mask_anime.active::after{
	animation: mask 1.2s cubic-bezier(.8, 0, .17, 1);	
}

@keyframes in{
	0%{
		opacity: 0;
	}
	40%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@keyframes mask{
	0%{
		transform: translateX(-100%);
	}
	40%, 60%{
		transform: translateX(0%);
	}
	100%
	{
		transform: translateX(102%);
	}
}

/* footer */
footer{
	background-color: #000;
	padding: 60px 0;
	text-align: center;
}

.fotter{
	display: flex;
	max-width: 1024px;
	margin: 0 auto;
}

.footer_logo{
	width: 120px;
	height: auto;
}

.fotter_left{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fotter_right{
	display: flex;
 	font-size: 1rem;
 	font-weight: 600;
 	letter-spacing: .2rem;
 	line-height: 1.8rem;
	color: #fff;
	text-align: left;
	margin-left: auto;
}

.fotter_right ul:not(:last-child){
	margin-right: 60px;
}

.fotter_right li:not(:last-child){
	margin-bottom: 20px;
}

.fotter_right a{
	color: #fff;
	transition: .3s;
}

.fotter_right a:hover{
	opacity: .5;
}

.copy{
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .1rem;
	color: #fff;
	margin-top: 10px;
}

/* タブレット対応(990px以下) */
@media screen and ( max-width: 989px ){
	/* header */
	.header_nav{
		height: 50px;
		width: 90%;
	}

	.gnav li:not(:last-child){
		margin-right: 20px;
	}

	.sns_account{
		height: 18px;
		width: auto;
	}

	.sns_account:not(:last-child){
		margin-right: 20px;
	}

	/* main */
	main{
		padding: 90px 0 80px;
	}
	 
	.kv{
	 	width: 50%;
	 	height: auto;
	 	margin: 80px auto 0;
	}

	h2.top{
	 	width: 65%;
	 	height: auto;
	 	margin: 50px auto 0;
	}

	h3{
	 	font-size: 1.8rem;
	 	margin-top: 40px;
	}

	.text{
	 	margin-top: 30px;
	}

	.about.text{
		text-align: center;
	}

	p{
	 	font-size: 1.2rem;
	}

	.mail a{
	 	font-size: 1.2rem;
	}

	ul.policy{
		list-style-type: disc;
	}

	h4{
		font-size: 1.2rem;
	}

	.contactinfo div{
		padding: 16px 40px;
	}

	/* footer */
	.fotter{
		width: 90%;
		height: auto;
	}

	.copy{
		font-size: .8rem;
	}
}

/* モバイル対応(768px以下) */
@media screen and ( max-width: 767px ){
	html{
		font-size: 62.5%;
	}

	.pc{
		display: none;
	}

	.sp{
		display: block;
	}

	/* header */
	header{
		padding: 10px 0;
	}

	.header_logo{
		width: 80px;
		height: auto;
	}

	.sns_account{
		height: 20px;
		width: auto;
	}

	.header_nav_right{
		height: auto;
	}

	.gnav{
		margin-right: 20px;
 		font-size: 1rem;
 		font-weight: 600;
 		letter-spacing: .2rem;
	}

	.gnav li:not(:last-child){
		margin-right: 10px;
	}

		.sns_account{
			height: 16px;
			width: auto;
		}

	.sns_account:not(:last-child){
		margin-right: 10px;
	}

	/* main */
	main{
		width: 90%;
		padding: 70px 0 80px;
	}

	.kv{
	 	width: 70%;
	 	height: auto;
	}

	h2.top{
	 	width: 80%;
	 	height: auto;
	 	margin: 40px auto 0;
	}

	h3{
	 	font-size: 1rem;
	 	margin-top: 20px;
	}

	.text{
	 	margin-top: 20px;
	}

	.top.text{
		margin-top: 20px;
		font-weight: 700;
	 	text-align: left;
	}

	p{
	 	font-size: 1rem;
	 	line-height: 2rem;
	}

	.sp{
		display: block;
	}

	.company{
		width: 100%;
 		margin: 20px auto 0;
	}

	.company div{
		padding: 10px 10px;
		display: flex;
		justify-content: space-between;
	}

	.company .sd{
		width: 35%;
		margin-right: 0;
	}

	.company .st{
		width: 60%;
	}
	 
	.mail{
		margin-top: 30px;
	}

	.mail a{
	 	font-size: 1rem;
	 	line-height: 2rem;
	 	margin-right: 0;
	}

	main.policy{
		width: 90%;
		padding: 70px 0 80px;		
	}

	ul.policy{
		list-style-type: disc;
	}

	h4{
		font-size: 1rem;
	}

	.contactinfo{
		width: 100%;
	}

	.contactinfo div{
		padding: 8px 20px;
	}

	.contactinfo .sd{
		width: 30%;
	}

	.contactinfo .st{
		width: 60%;
	}

	/* footer */
	footer{
		padding: 40px 0;
	}

	.footer_logo{
		width: 80px;
		height: auto;
	}

	.fotter_left{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.fotter_right{
		flex-direction: column;	
		text-align: right;
	}

	.fotter_right ul:not(:last-child){
		margin-right: 0;
		margin-bottom: 10px;
	}

	.fotter_right li:not(:last-child){
		margin-bottom: 10px;
	}

}

/* ワイドスクリーン */
@media (min-width: 1024px) {
  html {
    font-size: 14px;
  }
}