@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/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap');

html{
	overflow-x: hidden;
}
body{
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-family: YakuHanJP, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: normal;
	line-height: 2;
	color: #000;
	position: relative;
	background: #FFF100;
}
a img {
	border: none;
	transition: all .5s;
}
img{
	max-width: 100%;
	width: 100%;
	height: auto;
	-webkit-backface-visibility: hidden;
}
a,a:hover,
a:active{
	text-decoration:none;
}
a:hover img {
	opacity: 0.7;
}

.pc{
	display:block;
}
.sp{
	display:none;
}
@media screen and (max-width: 640px) {
	body{
		font-family: -apple-system, 'BlinkMacSystemFont', Sans-Serif;
	}
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
}
/***********************************************************
 * asset
************************************************************/
#contents {
 	width: 100%;
 	position:relative;
  	margin:0 auto;
	overflow: hidden;
	/*background: #ffe700;*/
}
._inner{
	width: 90%;
	max-width: 1340px;
	margin: 0 auto;
}
@media all and (-ms-high-contrast: none) {
	#contents {
		background: url("../img/bg.jpg")no-repeat center center;
		background-size: cover;
		background-attachment: fixed;
	}
}
.container{
 	position:relative;
	z-index:1;
}
h2{
	font-size: 40px;
	text-align: center;
	line-height: 1;
	height: 137px;
	width: auto;
	margin-bottom: 100px;
}
h2 img{
	height: 100%;
	width: auto;
}
h3{
	font-size: 20px;
	text-align: left;
	line-height: 1.5;
}
h3 span{
	font-size: 70%;
	/*padding-left: 0.5em;*/
}

@media screen and (max-width: 640px) {
	h2{
		height: 67px;
		margin-bottom: 65px;
	}
}
/***********************************************************
 * header
************************************************************/

/***********************************************************
 * contents
************************************************************/
section{
	position:relative;
	width: 100%;
	margin: 0 auto;
	padding: 75px 0;
}
@media screen and (max-width: 640px) {
	section{
		padding: 30% 0;
	}
}
/***********************************************************
 * footer
************************************************************/
footer{
	background: #000;
	padding: 5px 0;
	position: relative;
	z-index: 1;
}
footer p{
	color: #FCE90C;
	font-size: 11px;
	text-align: center;
	font-weight: 300;
}


/****loading****/
#loading {
	width: 100%;
	height: 100%;
	background: #fce90c;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
}
.loading {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}
.group {
  position: relative;
  display: inline-block;
  line-height: 16px;
}

.bigSqr {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-animation: bigSqrShrink 1s linear infinite;
          animation: bigSqrShrink 1s linear infinite;
}

.square {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FFF;
}

.first {
  left: 0px;
  top: 20px;
}

.second {
  left: 20px;
  top: 20px;
  -webkit-animation: drop2 1s linear infinite;
          animation: drop2 1s linear infinite;
}

.third {
  left: 0px;
  top: 0px;
  -webkit-animation: drop3 1s linear infinite;
          animation: drop3 1s linear infinite;
}

.fourth {
  left: 20px;
  top: 0px;
  -webkit-animation: drop4 1s linear infinite;
          animation: drop4 1s linear infinite;
}


@-webkit-keyframes bigSqrShrink {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  90% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}

@keyframes bigSqrShrink {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  90% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@-webkit-keyframes drop2 {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  25% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes drop2 {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  25% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes drop3 {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes drop3 {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  50% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes drop4 {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  75% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes drop4 {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  75% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

/*******************************************************************
 * 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;
	}
}