@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');

html{
	overflow-x: hidden;
}
body{
	margin: 0;
	padding: 0;
	font-size: 15px;
	/*font-family: YakuHanMP, "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;*/
	font-family: YakuHanJP, 'Noto Sans Japanese', 游ゴシック, 'Yu Gothic Medium', 'Hiragino Sans', sans-serif;
	font-weight: normal;
	line-height: 2;
	color: #fff;
	position: relative;
	background: #000;
}
a img {
	border: none;
	transition: all .5s;
}
img{
	display: block;
	width: 100%;
	height: auto;
	/*-webkit-backface-visibility: hidden;*/
  pointer-events: none; 
}
a{
  color: #F8C802;
  text-decoration: underline;
}
a:hover,
a:active{
  color: #F8C802;
	text-decoration:none;
}
a:hover img {
	opacity: 0.7;
}

.pc{
	display:block;
}
.pc-inline{
	display:inline;
}
.sp{
	display:none;
}
@media screen and (max-width: 640px) {
  img {
  -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;
  }
	body{
		font-family: -apple-system, 'BlinkMacSystemFont', Sans-Serif;
		font-size: 15px;
	}
	.pc,.pc-inline{
		display:none;
	}
	.sp{
		display:block;
	}
}
@media print{
	img {
		display: none;
	}
	*{
		background: none;
	}
}
/***********************************************************
 * asset
************************************************************/
#contents {
 	width: 100%;
 	position:relative;
  	margin:0 auto;
	overflow: hidden;
	/*background: #ffe700;*/
}
._inner{
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	position: relative;
}
.container{
 	position:relative;
	z-index:1;
}
h2.ttl{
	font-size: 70px;
	text-align: center;
	margin-bottom: 75px;
}
h2.ttl img{
  height: 50px;
  width: auto;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
	.container{
	}
  h2.ttl{
    margin-bottom: 50px;
  }
  h2.ttl img{
    height: 35px;
  }
}

/***********************************************************
 * contents
************************************************************/
section{
	position:relative;
	width: 100%;
	margin: 0 auto;
	padding: 100px 0;
}
@media screen and (max-width: 640px) {
	section{
		padding: 15% 0;
	}
}

/***********************************************************
 * footer
************************************************************/
footer{
	background: #000;
	padding: 20px 0;
}
footer ._credit{
	font-size: 10px;
	text-align: center;
}

@media screen and (max-width: 640px) {
	footer{
	}
}


/****************************************
* loading
****************************************/
.loading {
    height: 100%;
    width: 100%;
    z-index: 100;
    background: #000;
  position: fixed;
  top: 0;
  left: 0;
}

.loading.is-loading {
    animation: gradient 4s ease-in-out 1 forwards
}
.loading_cont {
    color: #C7161D;
    letter-spacing: .07em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.loading_cont img {
  width: 20%;
  margin: 0 auto;
	animation: flash 1.5s infinite;
}
@media screen and (max-width:768px) {
  .loading_cont img {
    width: 40%;
  }
}
@keyframes flash {
	0% {
		opacity: 1;
	}
	50% {
		opacity:.2;
	}
	100% {
		opacity: 1;
	}
}
/*******************************************************************
 * pageTop
 *******************************************************************/
#pageTop {
	width: 75px;
	height: 75px;
	color: #000;
	position: fixed;
	bottom: 20px;
	right: 25px;
	z-index: 1000;
	cursor: pointer;
	transition: opacity 1s;
}
#pageTop:hover {
	opacity: 0.6;
}
@media screen and (max-width: 640px) {
	#pageTop {
		width: 50px;
		height: 50px;
		bottom: 70px;
	}
}