@charset "UTF-8";

/*
	moon   #002B36
*/

/*------------------------------------
  All setting
-------------------------------------*/
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
html{
    font-size: 62.5%;
}
body{
    font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: 0.2em;
	box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'palt';
	background: #fff;
	background-color: #fff;
	color: #000 !important;
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

img{
	max-width: 100%;
	border: none !important;
}
svg{
	max-width: 100%;
}
a{
	color: #000;
}
.pc-only{
	display: none;
}
.tac{ text-align: center !important;}
.tar{ text-align: right;}
.taj{ text-align: justify;}
.fwb{ font-weight: bold;}

h2{
	font-size: 2rem;
}
.en{
	font-family: 'Muli', sans-serif !important;
}
/*------------------------------------
  layouts
-------------------------------------*/
h3.banner{
	margin: 0 !important;
}
.banner img{
	width: 100% !important;
	max-width: 300px;
	margin: 0 !important;
}

.banner p{
	margin-top: 40vh;
	position: relative;
}
.banner p span{
  position: absolute;
  left: 50%;
  width: 3rem;
  height: 3rem;
  margin-left: -12px;
  border-left: 0.5rem solid #0099FF;
  border-bottom: 0.5rem solid #0099FF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: arrow 2s infinite;
  animation: arrow 2s infinite;
}
.banner p span:nth-of-type(1){
	top: 7rem;
}
.banner p span:nth-of-type(2){
	top: 9rem;
}

.mb h2{
	margin-bottom: 5rem;
}
.mb10{
	margin-bottom: 10rem !important;
}

.mb15{
	margin-bottom: 15vh !important;
}

@keyframes arrow {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-2rem, 2rem);
    opacity: 0;
  }
}
/*------------------------------------
  Details
-------------------------------------*/
.koujiya h2 img{
	box-shadow: none !important;
	background-color: #fff;
	padding: 8rem;
	width: 40% !important;
}

.facebook img{
	width: 8rem;
}
/*------------------------------------
  Media Query
-------------------------------------*/
@media screen and (max-width: 1024px){
	.banner img{
		max-width: 290px;
	}
}

@media screen and (max-width: 768px){
	body{
		background: #002B36;
		background-color: #002B36;
	}
	.banner img{
		max-width: 390px;
	}
	
	.slide_down_p{
		margin-top: 60vh !important;
		padding-right: 1% !important;
		-webkit-animation: pikapika 2s ease 0s infinite;
		animation: pikapika 2s ease 0s infinite;
	}
	
/*
	.banner p span{
		width: 5rem;
		height: 5rem;
		border-left: 0.5rem solid #fff;
  		border-bottom: 0.5rem solid #fff;
	}
	.banner p span:nth-of-type(1){ top: 9rem; }
	.banner p span:nth-of-type(2){ top: 13rem; }
*/
	
	.mb h2{
		margin-bottom: 10vh;
	}
	.facebook img{
		width: 14rem;
	}
	.mb15{
		margin-bottom: 30vh !important;
	}
	
}
@media screen and (max-width: 414px){
	.banner img{
		max-width: 720px;
	}
	.slide_down_p{
		margin-top: 80vh !important;
	}
	.mb15{
		margin-bottom: 60vh !important;
	}
	
}
@media screen and (max-width: 375px){
	.banner img{
		max-width: 800px;
	}
	.slide_down_p{
		margin-top: 80vh !important;
	}
}


@keyframes pikapika {
  0% {
    -webkit-opacity: 1;
    opacity: 1;
  }
  50% {
    -webkit-opacity: 1;
    opacity: 1;
  }

  100% {
    -webkit-opacity: 0;
    opacity: 0;
  }

}