@charset "UTF-8";
* { margin: 0px auto; padding:0px;  outline: none;}

html, body{
	height: 100%;
	overflow-y: auto;
}

html{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400; font-style: normal;
	letter-spacing:0.3em; line-height: 1.8;
	font-size: 62.5%;	color:#686868; background: #fff;
	height:100%;
	overflow-y: auto;
}

.main {
	text-align: center;
	height: 100%;
  }
  
  .video_outer {
	position: relative;
  }
  
  video {
	width: 100%;
	height:100vh;
	object-fit: cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
  }
  
  .video_outer::after {
	content: '';
	display: block;
	width: 100%;
	height: 100vh;
	mix-blend-mode: screen;
	opacity: 0.1;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0, 0, 0, 1) 5px, rgba(0, 0, 0, 1) 10px);
  }

  h1{
	display: block; 
	width:100%;
	font-size: 1.7rem;
	text-shadow:0 0 10px #000;
	position: relative;
	top:10%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}

h2{
	font-size: 1.7rem;
	color: #fff;
	text-shadow:0 0 10px #000;
}

big{ font-size: 4.4rem; letter-spacing:0.4em; }
  
  .center {
	margin: 0 auto;
	text-align: center;
  }
  
  .white {
	color: white;
  }
  
  .link__area {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	position: relative;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
  }
  
  .link_outer {
	display: flex;
	align-items: center;
	margin: 10px 0;
  }

.link_outer a{
	display: inline-block;
	background-color: #fff;
	color:#333;
	text-align: center;
	text-decoration: none;
	font-size: 1.7rem;
	margin:10px auto;
	padding:15px 0;
}

.link_outer a:hover,.link_outer a:active{opacity:0.8;}
  
  .link_inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 10px 0;
  }
  
  .link_title {
	font-size: 2em;
	margin-bottom: 10px;
  }
  
  .link_contents {
	display: flex;
	justify-content: center;
  }
  
  .link_contents a {
	display: block;
	margin: 10px 0;
}
  
  /* PC版スタイル */
  @media (min-width: 561px) {
	.sp_area,.sp_br{ display: none; }
	.pc_area{ display: block; }
	.link_outer a{ margin:10px; top:70%;}
	.link_outer{
		width:100%;
		max-width: 1200px;
	}
	.link_outer a{width: 210px;}
	h1{	font-size: 2.5rem; top:15%;}
	big{ font-size: 5rem; }

	.link__area {
	  flex-direction: column;
	}
  
	.link_inner {
	  justify-content: space-around;
	  width: 100%;
	}
  
	.link_contents {
	  flex-direction: row;
	}
  }

  /* タブレット版スタイル */
  @media screen and (min-width: 561px) and (max-width: 750px) {
}
  
  /* SP版スタイル */
  @media (max-width: 560px) {
	.pc_area,.pc_br{ display: none; }
	.sp_area{ display: block; }
	.header_bg{ display: none; }
	.link_outer a{width: 90vw;}

	.link__area {
		flex-direction: column;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
	}


	.link_outer {
	  flex-direction: column;
	}
  
	.link_inner {
	  flex-direction: column;
	}
  
	.link_contents {
	  flex-direction: column;
	}
  }
  