@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	35% {opacity: 1;}
	45% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}

/*mainimg
---------------------------------------------------------------------------*/
#mainimg {
	clear: left;
	width: 100%;
	position: relative;
	animation-name: opa2;
    animation-duration: 0.5S;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}
.slide1,.slide2,.slide3 {
	animation-duration: 15s;	/*アニメーションを実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	animation-delay: 2s;		/*出現するタイミング（秒後）*/
}
.slide0 {
	position: relative;width: 100%;height: auto;z-index: -1;
}
.slide1 {
	animation-name: slide1;
}
.slide2 {
	animation-name: slide2;
}
.slide3 {
	animation-name: slide3;
}

/*スライド　キャッチ他
---------------------------------------------------------------------------*/
.permission{
	position:absolute;
	top:150px;
	text-align: center;
    width: 100%;
	color: #1a3164;
	background-color:rgb(204 204 204 / 60%);
	font-size:90%;
}
.work{
	position:absolute;
	bottom:15vh;
	text-align: center;
    width: 100%;
	font-size: large;
	color: #fff;
	text-shadow: 2px 2px 10px #1b315a,
	 -2px 2px 10px #142238,
	  2px -2px 10px #374767,
	   -2px -2px 10px #10244b;
}

.group{
  position:absolute;
  width:100%;
  bottom:50px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  color:#fff;
}

.group-box{
	padding: 5px 20px;
    border-radius: 5em;
    margin: 5px 10px 0;
	width: 300px;
    text-align: center;
}

.col_green{
	background-color:#16902e;
}
.col_bule{
	background-color: rgb(59 75 114 / 90%);
}

@media screen and (max-width:1024px){
.permission {
    top: 22%;
}
}

@media screen and (max-width:480px){

/*.permission {
    top: 20px;
}*/

.work {
    bottom: 90px;
	font-size: unset;
    color: #fff;
    text-shadow: 1px 1px 3px #2e3e32, -1px 1px 3px #2e3e32, 1px -1px 3px #2e3e32, -1px -1px 3px #2e3e32;
}
.group{
	bottom: 10px;
}