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

ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
	
li{
	margin-bottom: 20px;
}

a{
	text-decoration: none;
}
	
p{
	color:#fff;
}

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

#flex_box{
	display: flex;
	justify-content: space-around;
	align-items:center;
}

#tate{
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	margin-top: 65px;
	border: solid 2px #00dede;
}

#tate p{
	font-size: 1rem;
}

#tate_text{
	text-shadow:
    0 1px #000,
    1px 2px #000,
    2px 3px #002b2b,
    3px 4px #005353,
    4px 5px #00dede,
    5px 10px 8px #009696;
    font-size: 70px;
}

#container2 p{
	text-align: left;
	color:#fff;
	font-size: 1.5rem;
}
@media screen and (max-width: 480px) {/* スクリーンサイズが480px以下の場合に適用 */	
	
/*スクロールダウン*/
/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置*/
  position:absolute;
  bottom:10px;
  left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color:#FFCC55;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  ms-writing-mode: tb-rl;
    webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#00DEDE;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#00DEDE;
}	


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

h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#fff;
  text-shadow: 0 0 15px #666;
  text-align: center;
  font-size: 2.5rem;
}
	
/*========= スクロールをすると下のエリアが上にかぶさる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/icon_15.png");
  background-size:cover;
}

/*下の被さるエリアの指定*/
#container{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background:#ffcc55;
  padding:70px 0;
  margin-bottom: 30px;
  text-align: center;
}

#container2{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background:#ffcc55;
  padding:20px 0;
  text-align: center;
  margin-top: 50px;
  width: 60%;
  border: solid 2px #00DEDE;
  border-left: none;
  /*背景画像設定*/
  background-image: url(　);
  background-size:cover;
}
	
#container3{
　position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  padding:70px 0 0 0;
  margin: 30px 0;
  text-align: center;
}
	
	
/*========= レイアウトのためのCSS ===============*/

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

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

@media screen and (max-width:768px){
#container p{
        font-size:1.5rem;
    }  
}

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

/*全共通*/

.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;
  }
}
	
/*フッター内容*/
	
#footer{
	
	}
	
#footer_p{
	margin-top:20px;
	text-align: left;
}
#footer_p p{
	color:#ffcc55;
}
	
#p_address{
	font-size: 0.8rem;
	margin: 0 0;
}

#nid{
	margin: 0;
	}
	

}
/*PCサイズのコード*/


@media screen and (max-width: 2600px) {/* スクリーンサイズが2600px以下の場合に適用 */

  /*スクロールダウン*/
  /*========= スクロールダウンのためのCSS ===============*/
  
  /*=== 9-1-2 丸が動いてスクロールを促す ====*/
  
  /*スクロールダウン全体の場所*/
  .scrolldown2{
      /*描画位置※位置は適宜調整してください*/
    position:absolute;
    bottom:10px;
    left:50%;
  }
  
  /*Scrollテキストの描写*/
  .scrolldown2 span{
      /*描画位置*/
    position: absolute;
    left:10px;
    bottom:10px;
      /*テキストの形状*/
    color:#FFCC55;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    ms-writing-mode: tb-rl;
      webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
  }
  
  /* 丸の描写 */
  .scrolldown2:before {
      content: "";
      /*描画位置*/
      position: absolute;
      bottom:0;
      left:-4px;
      /*丸の形状*/
    width:10px;
    height:10px;
    border-radius: 50%;
    background:#00DEDE;
      /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
      circlemove 1.6s ease-in-out infinite,
      cirlemovehide 1.6s ease-out infinite;
  }
  
  /*下からの距離が変化して丸の全体が上から下に動く*/
  @keyframes circlemove{
        0%{bottom:45px;}
       100%{bottom:-5px;}
   }
  
  /*上から下にかけて丸が透過→不透明→透過する*/
  @keyframes cirlemovehide{
        0%{opacity:0}
       50%{opacity:1;}
      80%{opacity:0.9;}
    100%{opacity:0;}
   }
  
  /* 線の描写 */
  .scrolldown2:after{
    content:"";
      /*描画位置*/
    position: absolute;
    bottom:0;
    left:0;
      /*線の形状*/
    width:2px;
    height: 50px;
    background:#00DEDE;
  }	
  
  
    /*========= レイアウトのためのCSS ===============*/
  
  h1{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color:#fff;
    text-shadow: 0 0 15px #666;
    text-align: center;
    font-size: 2.5rem;
  }
  
  /*========= スクロールをすると下のエリアが上にかぶさる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/icon21.png");
    background-size:cover;
  }
  
  /*下の被さるエリアの指定*/
  #container{
    position: relative;
    z-index:1;
      /*以下はレイアウトのための記述*/
    background:#ffcc55;
    padding:70px 0;
    margin:0 auto 30px;
    text-align: center;
    width:90%;
  }
  
  #container2{
    position: relative;
    z-index:1;
      /*以下はレイアウトのための記述*/
    background:#ffcc55;
    padding:20px 0;
    text-align: center;
    margin-top: 50px;
    width: 20%;
    border: solid 2px #00DEDE;
    border-left: none;
    /*背景画像設定*/
    background-image: url(　);
    background-size:cover;
  }
    
  #container3{
  　position: relative;
    z-index:1;
      /*以下はレイアウトのための記述*/
    padding:70px 0 0 0;
    margin: 30px 0;
    text-align: center;
  }
    
    
  /*========= レイアウトのためのCSS ===============*/
  
  #container p{
    margin:20px 10px;
    text-align: center;
    font-size:1.5rem;
  }
  
  #container h2 p{
    font-size: 1.75rem;
    margin-bottom: 35px;
  }
  
  @media screen and (max-width:768px){
  #container p{
          font-size:1.5rem;
      }  
  }
  
  /*==================================================
  背景色が伸びて出現
  ===================================*/
  
  /*全共通*/
  
  .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;
    }
    
  /*フッター内容*/
    
  #footer p{
    font-size: 1rem;
  }
    
  #footer_p{
    margin-top:20px;
    text-align: left;
  }
  #footer_p p{
    color:#ffcc55;
  }
    
  #p_address{
    margin: 0 0;
  }
  
  #nid{
    margin: 0;
    }
  }
  }