@charset "utf-8";
/* CSS Document */

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background:#FFF;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*========= LoadingのためのCSS END ===============*/

a {
	color:#000;
}

a:hover {
	color:#666;
}

a img:hover {
	opacity: 0.7 ;
	/*-webkit-transition: 5s;
    -moz-transition: 5s;
    -o-transition: 5s;
    -ms-transition: 5s;*/
    transition: 0.5s;
}

#wrapper {
	width:100%;
	position:relative;
	overflow:hidden;
}

#wrapper img {
	max-width: 100%;
	height: auto;
}

.PageTop {
}

.gotop {
	position:fixed;
	right:40px;
	bottom:40px;
	z-index:20000;
}

.gotop a {
	width:12px;
	height:73px;
	display:block;
}

.Center {
	text-align: center !important;
	margin: 0 auto !important;
}

.TextCenter {
	text-align: center;
}

.TextLeft {
	text-align: left;
}

.TextRight {
	text-align: right;
}

.Wht {
	color: #FFF !important;
}

.MgnTop3 {
	margin-top: 3% !important;
}

.MgnTop5 {
	margin-top: 5% !important;
}

.MgnTop8 {
	margin-top: 8% !important;
}

.List3-1,
.List3-2,
.List3-3 {
	text-align: center;
	display: flex;
	flex-wrap :wrap;
	justify-content: space-evenly;
}

.List3-1 li,
.List3-2 li,
.List3-3 li {
	width: 29.3333%;
	margin: 0 1%;
	vertical-align: top;	
}

.ShadowBox {
	box-shadow: 0 0 8px #c0c0c0;
}

/*動画100％*/
.iframe-content {
   position: relative;
 width: 100%;
    /*padding-bottom: 56.25%;デフォルト*/
	padding-bottom: 30%;
}
.iframe-content iframe {
    position: absolute;
	 top: 0;
	 left: 0;
    width: 100%;
    height: 100%;
}

.Max800 {
	max-width: 800px;
	width: 90%;
	margin: 0 auto;
}

.Max1000 {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}

.Max1200 {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}

.Max1500 {
	max-width: 1500px;
	width: 90%;
	margin: 0 auto;
}

.Small {
	font-size: 90%;
}

.MoreSmall {
	font-size: 70%;
}


.Big {
	font-size: 150%;
}

/*下線ライン左から*/
.LineLeft a{
	display: inline-block;
	position: relative;
	color: #555;
 	text-decoration: none;
}
.LineLeft a:before{
	content: "";
	position: absolute;
	 left: 0;
	bottom: -4px;
	width: 100%;
	height: 3px;
	background: #555;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.4s;
}
.LineLeft a:hover:before {
	transform: scale(1);
}
/*下線ライン左からEND*/

/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 0.1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}
/*========= 1文字ずつ出現させるためのCSS END ===============*/

/*==================================================
その場でふわっ
===================================*/
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-200px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(200px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/*跳ねる*/
.card-box .card:hover {
    animation:bounce 0.8s ease-out;
}

@keyframes bounce {
    0%    { transform:translate(0, 0); }
    16.6% { transform:translate(0, -20px); animation-timing-function:ease-in; }
    33.3% { transform:translate(0, 0); }
    49.8% { transform:translate(0, -14px); animation-timing-function:ease-in; }
    66.4% { transform:translate(0, 0); }
    83%   { transform:translate(0, -4px); animation-timing-function:ease-in; }
    100%  { transform:translate(0, 0); }
}
/*跳ねるEND*/

/*動くボタン*/
a .GrnBtn {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: transparent;
  padding: 10px 18px;
  border: 3px solid #7CCF90;
  box-sizing: border-box;
  border-radius: 30px;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
}
a .GrnBtn::before,
a .GrnBtn::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px;
}
a .GrnBtn::before {
  background: #7CCF90;
  z-index: -1;
  transition: transform ease .3s, opacity .3s;
}
a.GrnBtn::after {
  border: 3px solid #7CCF90;
  box-sizing: border-box;
}
a .GrnBtn:hover {
  color: #7CCF90;
}
a .GrnBtn:hover::before {
  transform: scale(0);
  opacity: 0;
}
/*動くボタンEND*/

/*矢印動く横*/
.faderight {
    animation-name: faderight;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
	float: right;
	margin-top: -5px;
}
@keyframes faderight {
from {
    opacity: 0;
    transform: translateX(0);
}
to {
    opacity: 1;
transform: translateX(30px);
}
}
/*矢印動く上*/
.fadeup {
   animation-name: fadeup;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
@keyframes fadeup {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
   opacity: 1;
    transform: translateY(0);
}
}

/*矢印動くEND*/

/*PCのみに適用*/
@media only screen and (min-width:769px){
	
.PC_none {
	display: none !important;
}
}/*PCのみに適用 END*/
@media only screen and (max-width: 768px) {
	
.SP_none {
	display: none !important;
}

.MgnTop5 {
	margin-top: 10% !important;
}
	
.MgnTop3 {
	margin-top: 5% !important;
}
	
.MgnTop8 {
	margin-top: 15% !important;
}

.gotop {
	right:5px;
	bottom:5px;
}

.iframe-content {
   padding-bottom: 56.25%;
}
	
.List3-1,
.List3-2,
.List3-3 {
	display: block;
}
	
.List3-1 li {
	width: 100%;
	margin: 8% auto 0 auto;
}
	
.List3-2 li {
	width: 47%;
	margin: 8% 1% 0 1%;
}
	
.Big {
	font-size: 130%;
}
	
}
.youtube-sec {
  padding: 100px 0 100px;
}
.youtube-wrap {
  max-width: 700px;
  margin: 0 auto;
}
.youtube-wrap-wrap {
 position: relative;
 padding-top: 56.25%;
}
.youtube-wrap-wrap iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-width: 768px) { 
  .youtube-sec {
    padding: 50px 20px ;
  }
}