@charset "UTF-8";
/* CSS Document */
p{
	color:#fff;
}

a{
	text-decoration: none;
}

a:link{
	color:#fff;
}
	
a:visited{
	color:#737373;
}

@media screen and (max-width: 480px) {/* スクリーンサイズが480px以下の場合に適用 */}
@media screen and (max-width: 768px) {/* スクリーンサイズが768px以下の場合に適用 */ }
@media screen and (max-width: 796px) and (max-width: 1024px) {/* スクリーンサイズが769px〜1024pxの場合に適用 */ }
@media screen and (max-width: 1025px) {/* スクリーンサイズが1025px以上の場合に適用 */ }

/*========= レイアウトのためのCSS ===============*/

h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#fff;
  text-shadow: 0 0 15px #666;
  text-align: center;
}


/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/

#header{
    /*headerを全画面で見せる*/
  width:100%;
  height: 100vh;
  position: relative;
} 

#header:before{
    /*header の疑似要素に背景画像を指定*/
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  /*背景画像設定*/
  background-image:url("../pic/haikei.PNG");
  background-size:cover;
}

/*下の被さるエリアの指定*/
#container{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background:#cc4d54;
  padding:50px 0 20px 0;
  text-align: center;
  border: solid 2px #000;
}

#container2{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background:#477086;
  padding:20px 0;
  text-align: center;
  margin-top: 50px;
  border: solid 2px #000;
}

#container4{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background-image: url(../pic/heya3.PNG);
  padding:120px 0;
  text-align: center;
  margin-top: 50px;
  border: solid 2px #000;
}

#container5{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background-image: url(../pic/gohan.PNG);
  padding: 120px 0;
  text-align: center;
  margin-top: 50px;
  border: solid 2px #000;
}

#container6{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background-image: url(../pic/okane2.PNG);
  padding: 120px 0;
  text-align: center;
  margin-top: 50px;
  border: solid 2px #000;
}

#container7{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background-image: url(../pic/time2.PNG);
  padding: 120px 0;
  text-align: center;
  margin-top: 50px;
  border: solid 2px #000;
}

#container8{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background-image: url(../pic/icon1.png);
  padding: 20px 0;
  text-align: center;
  margin-top: 50px;
  border: solid 2px #000;
}


/*========= レイアウトのためのCSS ===============*/

#container p{
  margin:20px 10px;
  text-align: center;
  font-size:1.2rem;
}

#container h2 p{
	font-size: 2rem;
	margin-bottom: 35px;
} 

/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*流れるテキスト*/	
/*========= レイアウトのためのCSS ===============*/

p{
  margin: 20px;
  font-size: 20px;
  overflow: hidden;/*左右アニメーションで画面からはみ出る際に出る横スクロールバーを隠す*/
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.box{
  width: 220px;
  padding: 20px;
  margin:0 20px 20px 0;
  border: solid 2px;
  background-image:url("../pic/icon12.png");
  color: #fff;
  box-sizing:border-box;
}



/*==================================================
ふわっ
===================================*/


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


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/*フッター内容*/
	
#footer_p{
	margin-top:20px;
	text-align: center;
	background-color:#cc4d54;
	border: solid #000;
}