@charset "utf-8";

a{
	text-decoration: none;
	transition: .5s all;
}

ul li{
	list-style: none;
}

body{
	font-family:"游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	color: #292929;
	text-align: left;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	background-color:#efefef;
}

h1,h2,h3,h4,h5,h6{
	margin-top: 0;
	margin-bottom: 0;
	font-family: 'Noto Serif JP', serif;
}

p,a{
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 500;
	font-size: clamp(16px,2.08vw,18px);
	font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

/* --------------------------------------------------------------------------------------- SPレイアウト */

/* --------------------------------------------------------------- 共通*/

.sp-only{
	display: block;
}

.pc-only{
	display: none;
}

img{
	width: 100%;
}

/* ------------------------------------
アニメーション
--------------------------------------- */
.fadeIn{
	animation-name: fadeInAnime;
	animation-duration:1.6s;
	animation-fill-mode:forwards;
	opacity:0;
}
	
@keyframes fadeInAnime{
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
}
	
.fadeInTrigger{
	opacity: 0;
}


/* --------------------------------------------------------------- header*/

header{
	background-color: #292929;
}

.logo{
	height: clamp(80px,10.4vw,100px);
	display: flex;
	align-items: center;
	padding-left: 30px;
}

header img{
	width: clamp(200px,26vw,270px);
}

/* --------------------------------------------------------------- fv*/

.fv{
	position: relative;
	height: calc(100vh - 80px);
}

.fv-main{
	position: absolute;
	bottom: 0;
	right: 0;
}

h1{
	font-size: clamp(32px,4.16vw,52px);
	line-height: 85%;
	padding-left: 6%;
}

h1 span{
	font-size: clamp(14px,1.82vw,16px);
}

.fv-img{
	padding-left: 6%;
	height: 360px;
	object-fit: cover;
	margin-top: 16%;
	vertical-align: middle;
	width: 100vw;
}

/* --------------------------------------------------------------- abroad*/

.abroad{
	padding: 100px 6% 50px;
}

h2{
	font-size: clamp(22px,2.86vw,28px);
	line-height: 1.3;
	border-left: solid 8px #c2af6f;
	padding-left: 20px;
	height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h2 span{
	font-size: clamp(18px,2.34vw,24px);
}

.box-wrapper{
	display: flex;
	flex-direction: column;
	padding: 30px 0 60px;
}

.box2{
	display: flex;
	flex-direction: column;
	row-gap: 30px;
	padding-top: 30px;
}

.box-title{
	font-size: clamp(22px,2.86vw, 28px);
	line-height: 1.4;
	font-family: 'Noto Serif JP', serif;
}

.text{
	font-size: clamp(16px,2.08vw,18px);
}

.link{
	color: #292929;
	font-weight: bold;
	padding-left: 30px;
	display: flex;
	align-items: center;
	position: relative;
	font-size: clamp(16px,2.08vw,18px);
}

.link::before { /* くの字の表示設定 */
	content: "";
    position: absolute;
    left: -5px;
    width: 20px;
    height: 20px;
    border-top: 4px solid #c2af6f;
    border-right: 4px solid #c2af6f;
    transform: rotate(45deg);
}

.caption{
	font-size: clamp(14px,1.82vw,16px);
}

.caption li{
	padding-left: 1em;
	text-indent: -1em;
}

h3{
	font-size: clamp(18px,2.34vw,24px);
	text-align: center;
	border-top: 1px solid #707070;
	border-bottom: 1px solid #707070;
	padding: 10px 0;
	margin-bottom: 30px;
}

.img-box{
	display: flex;
	flex-direction: row;
	column-gap: 20px;
}

.icon{
	width: 70px;
}

.flow-box1{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 20px;
	padding-bottom: 20px;
}

.member-id{
	width: 200px;
	vertical-align: middle;
}

.flow-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.explanation p{
	padding-bottom: 30px;
}


/* --------------------------------------------------------------- domestic*/

.domestic{
	padding: 50px 6% 50px;
}

.second{
	padding-bottom: 50px;
}


/* --------------------------------------------------------------- entry*/

.entry{
	background-color: #c2af6f;
	padding: 40px 6%;
	color: #fff;
	margin-top: 50px;
}

h4{
	font-size: clamp(22px,2.86vw,28px);
	padding-bottom: 40px;
}

.btn{
	display: block;
	width: clamp(240px,31.2vw,380px);
	background-color: #fff;
	color: #c2af6f;
	text-align: center;
	padding: 12px 0;
	border-radius: 40px;
	font-size: clamp(20px,2.6vw,24px);
	font-weight: bold;
	margin: 0 auto;
}



/* --------------------------------------------------------------- footer*/

footer{
    background-color: #292929;
    padding: 50px 6% 10px;
	color: #fff;
}

.footer-logo{
    max-width: 280px;
}

.copyright{
    font-size: 0.75rem;
    font-weight: 300;
    margin-top: 50px;
	text-align: center;
}

.contact{
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(16px,2.08vw,18px);
	padding-bottom: 4px;
}

.footer-box2{
	padding: 28px 0;
}

.footer-box2 p{
	font-family: 'Noto Serif JP', serif;
}

.time{
	font-size: clamp(14px,1.82vw,16px);
}

.num{
	font-size: clamp(32px,4.16vw,40px);
}

.footer-wrapper{
	display: flex;
	flex-direction: column;
}

.footer-list li{
	border-top: 0.4px solid #e2e2e2;
}

.footer-list li:last-child{
	border-bottom: 0.4px solid #e2e2e2;
}

footer li{
	padding: 12px 0;
}

.footer-list li a{
    font-size: 14px;
    font-weight: 300;
    color: #fff;
	padding-bottom: 20px;
}



/* --------------------------------------------------------------------------------------- PCレイアウト */

@media screen and (min-width:768px) {
 
	.sp-only{
		display: none;
	}
	
	.pc-only{
		display: block;
	}

	.container{
		max-width: 1000px;
		margin: 0 auto;	
	}
	
	/* --------------------------------------------------------------- fv*/

	.fv{
		height: calc(100vh - 100px);
	}

	h1{
		padding-left: 13.8%;
	}

	.fv-img{
		padding-left: 13.8%;
		height: 46vh;
		object-fit: cover;
		margin-top: 5%;
		vertical-align: middle;
		width: 100vw;
	}

	/* --------------------------------------------------------------- abroad*/

	.abroad{
		padding: 200px 13.8% 100px;
	}

	h2{
		padding-left: 36px;
		height: 50px;
		flex-direction: row;
		justify-content: flex-start;
   		align-items: center;
	}

	.box1 img{
		width: calc(200px + 5.2vw);
	}

	.box-wrapper{
		flex-direction: row;
		padding: 80px 0 100px;
		column-gap: 50px;
		align-items: center;
	}

	/* .box1{
		width: 50%;
	} */

	.box2{
		padding-top: 0;
	}

	.flow-wrapper{
		max-width: 760px;
		margin: 0 auto;
		flex-direction: row;
		justify-content: space-between;
		column-gap: 36px;
	}

	.flow-box1{
		align-items: flex-end;
		padding: 0;
	}

	h3{
		padding: 16px 0;
	}

	.explanation{
		max-width: 760px;
		margin: 0 auto;
	}

	/* --------------------------------------------------------------- domestic*/

	.domestic{
		padding: 100px 13.8% 100px;
	}


	/* --------------------------------------------------------------- entry*/

	.entry{
		background-color: #c2af6f;
		padding: 40px 13.8%;	
		color: #fff;
		margin-top: 100px;
	}
	
	h4{
		padding-bottom: 0px;
	}
	
	.btn{
		padding: 16px 28px;
	}
	
	.btn:hover {
		box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
		transform: translateY(-2px);
	}

	.entry-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		column-gap: 30px;
    	align-items: center;
	}

	.entry-box2 {
		width: 40%;
	}

	/* --------------------------------------------------------------- footer*/

	.footer-list{
		display: flex;
		justify-content: space-between;
	}

	.footer-list li a{
		margin-right: 8px;
	}

	.footer-list li a:last-child{
		margin-right: 0;
	}

	.footer-list li:last-child{
		margin-right: 0;
	}

	.footer-wrapper{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 50px;
	}

	.footer-box2{
		padding: 0;
	}

	.footer-list li{
		border-top: none;
	}
	
	.footer-list li:last-child{
		border-bottom: none;
	}

	.copyright{
		margin-top: 20px;
	}
}