@charset "utf-8";

/*---------------------------------------
common
---------------------------------------*/

html {
  width: 100%;
	overflow-x:hidden;
}

html {
  font-size: 1px;
}

body {
  width: 100%;
  background:#000;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "palt" 1;
  font-family: "YakuHanMP", "Noto Serif JP", serif;
  font-optical-sizing: auto;
  letter-spacing: 0.02em;
}

.noto{
	font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}

img{
	width:100%;
	-webkit-backface-visibility: hidden;
}

a{
	transition: 0.4s ;
	text-decoration:none;
}

a:hover{
  opacity: 0.6;
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw / 750);
  }

  .container {
    max-width: 100%;
    margin: 0 auto;
  }

	.pc{
		display:none;
	}

	.sp{
		display: block;
	}
}

/* --------------------------------------------------
loader
 -------------------------------------------------- */
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	z-index:9999;
	transition: 1.0s ;
}

.is_loaded .loader {
  opacity: 0;
}

#wrapper{
	width:100%;
  max-width: 860rem;
	position: relative;
	margin:0 auto;
}

#wrapper h1{
	width:540rem;
	position: relative;
	margin:0 auto;
}

#wrapper h2{
	font-size:44rem;
	font-weight:900;
	text-align:center;
	color:#fff;
	letter-spacing:2rem;
	margin-top:20rem;
}

#wrapper h3{
	font-size:48rem;
	font-weight:900;
	text-align:center;
	color:#f0291e;
	letter-spacing:1rem;
	margin-top:10rem;
	line-height:1.4;
}

#field{
	width:100%;
	border:4px solid;
	border-image: linear-gradient(to right, #8e1309, #e1503d, #8e1309) 1;
	box-sizing:border-box;
	padding:40rem 0 50rem;
	margin-top:50rem;
	text-align:center;
}

#field p{
	font-size:24rem;
	font-weight:500;
	text-align:center;
	color:#fff;
	padding-bottom:20rem;
	letter-spacing:1rem;
}

#field .textbox {
  width: 520rem;
	height:60rem;
  border-radius: 30rem;
  border: 0;
	font-size:40rem;
	text-align:center;
}

#field .textbox:focus {
  outline: 0;
  border: 0;
}

.btn_submit{
  display: block;
	width:270rem;
	height:60rem;
	margin:40rem auto 0;
	background-color:#f0291e;
	box-sizing:border-box;
	border:3px solid #f0291e;
  font-size: 24rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  appearance: none;
	font-family : inherit;
	letter-spacing: inherit;
	transition: 0.4s ;
}

.btn_submit:hover {
  color: #f0291e;
	background-color:#000;
}

a.official_btn{
  display: block;
	width:270rem;
	height:60rem;
	margin:100rem auto 0;
	background-color:#000;
	box-sizing:border-box;
	border:2px solid #fff;
  font-size: 20rem;
  font-weight: 600;
  color: #fff;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	transition: 0.4s ;
}

a.official_btn:hover {
  color: #000;
	background-color:#fff;
	opacity:1.0;
}

.copyright{
	font-size:12rem;
	color:#fff;
	font-weight:500;
	text-align:center;
	padding:50rem 0 20rem;
}

.caution {
    margin: 30rem auto 0;
    width: 100%;
    color: #fff;
    font-size: 18rem;
    line-height: 1.8;
    display: flex;
    justify-content: center;
}

.caution ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

.caution li {
    position: relative;
    padding-left: 1.2em;
    text-indent: -1.2em;
}


.caution li::before {
    content: "※";
    display: inline-block;
    width: 1.2em;
    text-align: center;
}

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


	#wrapper h2{
		font-size:40rem;
		font-weight:900;
		text-align:center;
		color:#fff;
		letter-spacing:2rem;
		margin-top:20rem;
	}

	#wrapper h3{
		font-size:44rem;
		font-weight:900;
		text-align:center;
		color:#f0291e;
		letter-spacing:1rem;
		margin-top:10rem;
		line-height:1.4;
	}

	#field{
		width:100%;
		padding:50rem 0 60rem;
		margin-top:50rem;
		text-align:center;
	}

	#field p{
		font-size:30rem;
		font-weight:500;
		text-align:center;
		color:#fff;
		padding-bottom:30rem;
	}

	#field .textbox {
	  width: 640rem;
		height:80rem;
	  border-radius: 40rem;
	  border: 0;
		font-size:46rem;
	}

	#field .textbox:focus {
	  outline: 0;
	  border: 0;
	}

	.btn_submit{
	  display: block;
		width:340rem;
		height:80rem;
		margin:50rem auto 0;
		background-color:#f0291e;
		box-sizing:border-box;
		border:3px solid #f0291e;
	  font-size: 30rem;
	  font-weight: 600;
	  color: #fff;
	  cursor: pointer;
	  appearance: none;
		font-family : inherit;
		letter-spacing: inherit;
	}

	a.official_btn{
	  display: block;
		width:340rem;
		height:80rem;
		margin:100rem auto 0;
	background-color:#000;
	box-sizing:border-box;
	border:2px solid #fff;
  font-size: 24rem;
  font-weight: 600;
  color: #fff;
	display: flex;
  justify-content: center;
  align-items: center;
	}

	.copyright{
		font-size:14rem;
		color:#fff;
		font-weight:500;
		text-align:center;
		padding:60rem 0 20rem;
	}
}