@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}
body {
  color: #333; /* RGB */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 2.5rem;
}
h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 3.0rem;
  padding: 90px 0 60px;
  text-align: center;
}
h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
}
a {
  text-decoration: none;
  color: #222;
}

.hover_btn:hover {
  opacity: 0.5 ;
}
.sp_br {
  display: none;
}
.sp_br321 {
    display: none;
  }
@media screen and (max-width: 426px) {
  .sp_br {
    display: block; /* 426px未満で改行有効*/
  }
}
@media screen and (max-width: 321px) {
  .sp_br321 {
    display: block;
  }
}
/*sp_ナビゲーションメニューはここから*/
.sp-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  transform: translateX(100%);
  transition: .3s;
}
.sp-menu_logo {
  width: 20%;
  display: block;
  margin: 0 auto;
  padding-bottom: 50px;
}
.sp-menu.active {
  transform: translateX(0);
  transition: .3s;
}
.sp_header-right {
  text-align: center;
  padding: 110px 0 30px;
  font-size: 1.6rem;
  font-family: 'Poppins', sans-serif;
}
.sp_header-right ul li {
  padding-bottom: 30px;
}
@media screen and (max-width: 1000px) {
  .sp-menu_logo {
    width: 10%;
  }
}
@media screen and (max-width: 426px) {
  .sp-menu_logo {
    width: 20%;
  }
}
/*sp_ナビゲーションメニューはここまで*/

/* Opening Animation SVG Logo TEST のためのCSS*/
#base {
    width: 25%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#oplogo path {
fill-opacity: 0; 
    transition: fill-opacity .5s;
    fill: none; 
    stroke: #000; 
}
#oplogo.done path{
    fill: #000; 
    fill-opacity: 1; 
    stroke: none; 
}
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #fff;
	text-align:center;
	color:#fff;
	border:10px solid #fff;
}
/*画面遷移の後現れるコンテンツ設定*/
#container{
  position: relative;
	opacity: 0; /*はじめは透過0に*/
	z-index: 1;
}
/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.3s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
/* 以上、Loading TEST のためのCSS */