@charset "UTF-8";

/*============================
共通設定
============================== */

:root{
	scroll-behavior: smooth;
}

html {
  font-size: 62.5%;
  width: 100%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.625rem;
  color: #000;
  margin: 0 auto;
  text-align: center;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
	animation: fadeIn 2.5s ease 0s 1 normal;
	-webkit-animation: fadeIn 2.5s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  transition: 0.3s;
}

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

li {
  list-style: none;
}

#bgAll {
	background-image: url(../img/bg_all_d.jpg);
	background-size: cover;
  background-repeat: no-repeat;	
}

.pc {
	display: block;
}

.sp {
	display: none;
}	

/*============================
header
============================== */

#header{
	width: 100%;
	text-align: center;
}

.header-menu {
	width: 100%;
	height: auto;
	padding:
    clamp(10px, 1vw, 15px)
    clamp(15px, 2vw, 38px);
	display: flex;
	justify-content: space-between;
	align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: position 2.5s ease;
	background-color: #000294;
}

.header-logo {
	width: clamp(110px, 12vw, 180px);
}

.header-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.hoverBox {
  position: relative;
	width: clamp(150px, 14vw, 212px); 
}

.hoverBox img {
  position: absolute;
	top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
	height: auto;
  display: block;

}

.hoverBox img:last-of-type {
	opacity: 0;
  transition: opacity .3s;
}

.hoverBox:hover img {
  opacity: 1;
}



/*============================
main
============================== */

#main {
	width: 100%;
	text-align: center;
}

/* Safariで右側の余白を削除 */
.xClip {
	overflow-x: clip;
}


/* mainVisual
================ */

#mainVisual {
  width: 100%;
	position: relative;
}

.formButtonWrap {
	position: absolute;
	bottom: 5%;
	left: 50%;
  transform: translateX(-50%);
	width: clamp(260px, 34vw, 523px); 

}

.formButtonWrap .formButton  {
  position: relative;
	display: block;
}

/* 画像は親幅に追従 */
.formButtonWrap img {
  width: 100%;
  height: auto;
  display: block;

}

.formButton .hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
  /* transition: opacity .3s; */
	transition: none;
}

.formButton:hover .hover {
  opacity: 1;
}

.formButton:hover .normal {
  opacity: 0;
}



/* terms_note
================ */

#terms_note {
	width: 100%;
	text-align: center;
	padding-top: 30px;
	padding-left: 10%;
	padding-right: 10%;
}

.termsNoteWrap {
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}

.termsNoteLabel {
	margin: 0 auto 24px auto;
	width: 138px;
}

#terms_note .textBox  {
	text-align: center;
	font-size: 1.6rem;
}

#terms_note .textBox p {
	text-align: left;
}

#terms_note .notes {
	margin-top: 60px;
}


/* form
================ */

#form {
	width: 100%;
	padding-top: 80px;
	padding-left: 30px;
	padding-right: 30px;
	margin: 0 auto;
}

.formBox {
	width: 100%;
	margin: 0 auto;
}

.responsiveForm {
	max-width: 1200px;	
	width: 100%;
  margin: 0 auto;
  display: block;
  /* 幅1200px→6500px / 幅360px→8600px へ線形に変化 */
  height: clamp(
    6500px,
    calc(8700px - (100vw - 360px) * 3.03),
    8800px
  ) !important;
}
/* <iframe>内に入れていた「height="6500"」はcssで設定 */


/*============================
responsive
============================== */

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

	.pc {
		display: none;
	}

	.sp {
		display: block;
	}



	/* header
	================ */
	
	.header-menu {
		padding:
			clamp(7px, 1vw, 10px)
			clamp(12px, 2vw, 20px);
	}

	.header-logo {
		width: clamp(110px, 30vw, 231px);
	}

	.headerButtonSp {
		width: clamp(150px, 34vw, 260px); 
}


	/* mainVisual
	================ */
	
	.formButtonWrap {
		bottom: 21%;
		left: 57%;
		transform: translateX(-57%);
		width: clamp(260px, 68vw, 523px);
	}



	/* terms_note
	================ */
	
	#terms_note {
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 76px;
	}	

	.termsNoteLabel {
		margin: 0 auto 45px auto;
	}
		
	#terms_note .notes {
		margin-top: 76px;
	}



	/* apply_sp
	================ */

	#apply_sp {
		width: 100%;
	}



	/* form
	================ */

	#form {
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 55px;
		/* padding-bottom: 30px; */
	}

	.responsiveForm {
		width: 100%;
		 /*height: 9200px;  モバイルでは少し高さを増やす（必要に応じて調整） */
	}

}


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

	/* form
	================ */	

	.responsiveForm {
		width: 100%;
     /* height: 9000px;モバイルでは少し高さを増やす（必要に応じて調整） */
	}

}