@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}

/*================== body ==================*/
body{
	background-color:#fff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

}
/* コンテンツに関するCSS
------------------------------------------------*/
.box01 {
	width: 100%;
        height:600px;
        margin:100px 0;
        padding-top: 80px;
}



/* ----------------------*
 * gifアニメを浮かせる
 * ----------------------*/

.a-box01{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 35%; 
         left: 28%;
        transform: translate(-50%, -50%);

}
.a-box02{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 30%; 
         left: 40%;
        transform: translate(-50%, -50%);

}
.a-box03{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 31%; 
         left: 62%;
        transform: translate(-50%, -50%);

}
.a-box04{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 40%; 
         left: 75%;
        transform: translate(-50%, -50%);

}
.a-box05{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 85%; 
         left: 30%;
        transform: translate(-50%, -50%);

}
.a-box06{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 90%; 
         left: 40%;
        transform: translate(-50%, -50%);

}
.a-box07{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 85%; 
         left: 60%;
        transform: translate(-50%, -50%);

}
.a-box08{
        width: 100%;
	padding:0px;
	margin-top:;
        text-align: center;
        position: absolute;
        top: 90%; 
         left: 70%;
        transform: translate(-50%, -50%);

}




/* ----------------------*
 * テキストを浮かせる
 * ----------------------*/

.container {
 position: relative;
 width: 100%; /* 例: 親要素の幅 */ 
 height:600px; /* 例: 親要素の高さ */ 
 border: 1px solid #fff; /* 例: 親要素のボーダー */
}

.text { 
 position: absolute;
 top: 35%; 
 left: 40%;
 transform: translate(-50%, -50%);
 font-size: 20px;
 font-weight: bold;
 /* 必要に応じてフォントサイズや色などを調整 */
}

.shadow {
  text-shadow: 1px 1px 2px silver;
  /*影の色影の右下ぼかし具合文字を太字にするとよりそれらしくなります*/
}


/* スライダーCSS
------------------------------------------------*/

.slider {
  width: 900px;
  height: 600px;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
  padding:;
}

.slider > :first-child {
  -webkit-animation-name: scroll;
  animation-name: scroll;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes scroll {
0% {
  margin-left: 0;
}

20% {
  margin-left: -100%;
}

25% {
  margin-left: -100%;
}

45% {
  margin-left: -200%;
}

50% {
  margin-left: -200%;
}

70% {
  margin-left: -300%;
}

75% {
  margin-left: -300%;
}

95% {
  margin-left: -400%;
}

100% {
  margin-left: -400%;
}