@charset "utf-8";
/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background:#000000;
text-align:center;
color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
position: absolute;
top: 50%;
left: 50%;
    z-index: 999;
width: 100%;
transform: translate(-50%, -50%);
color: #fff;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

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

h2 {
    font-size: 300%;
    }

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

/*全共通*/

.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;
    }
    }
    
    /*右から左*/
    .bgRLextend::before{
    animation-name:bgRLextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(17, 0, 255);/*伸びる背景色の設定*/
    }
    @keyframes bgRLextendAnime{
    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,
    .bgRLextendTrigger{
        opacity: 0;
    }

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

/*全共通*/

.slide-in {
    overflow: hidden;
        display: inline-block;
    }
    
    .slide-in_inner {
    display: inline-block;
    
    }
    
    /* 上下のアニメーション*/
    .upAnime{
        opacity: 0;/* 事前に透過0 にして消しておく*/
    }
    
    .slideAnimeDownUp {
        animation-name:slideTextY100;
        animation-duration:0.8s;
        animation-fill-mode:forwards;
        opacity: 0;
    }
    
    @keyframes slideTextY100 {
        from {
            transform: translateY(100%);/* 要素を上の枠外に移動*/
            opacity: 0;
        }
        to {
            transform: translateY(0);/* 要素を元の位置に移動*/
            opacity: 1;
        }
    }
    .slideAnimeUpDown {
        animation-name:slideTextY-100;
        animation-duration:0.8s;
        animation-fill-mode:forwards;
        opacity: 0;
    }
    
    @keyframes slideTextY-100 {
        from {
        transform: translateY(-100%);/* 要素を下の枠外に移動*/
        opacity: 0;
        }
        to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
        }
    }

    /* 通常（PC）ではタイル表示 */
.slide-wrap {
    background-color: #EBECF0;
    display: flex;
    margin: 0 auto;
    max-width: 1024px;
    width: 80%;
    overflow-x: scroll;
  }
  .slide-box {
    height: auto;
    margin: .5%;
    width: 50%;
    flex: 0 0 70%;
    margin: auto 1% auto auto;
  }
  .slide-box a {
    background-color: #EBECF0;
    color: #222;
    display: block;
    text-decoration: none;
  }
  .slide-box img {
    display: block;
    height: auto;
    width: 100%;
  }
  .slide-box p {
    font-weight: bold;
    padding: 10px;
    margin:.5rem auto;
  }




@media screen and (max-width: 765px) {
	.menu-btn {
		position: fixed;
		top: 10px;
		right: 10px;
		display: flex;
		height: 60px;
		width: 60px;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: black;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}
		
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	
	#menu-btn-check:checked ~ .menu-content {
		left: 0;/*メニューを画面内へ*/
	}
	
	#nav {
		height: 100%;
		margin: 100px 50px;
		list-style: none;
		padding: 0px;
	}

	#nav li:nth-child(1),
	#nav li:nth-child(2){
		width:100%;
		border: none;
		outline: none;
		border-radius: 10px;
		text-align: center;
		background-color: none;
		height: 50px;
		margin: 15px 0px;
		line-height: 50px;
		background-color: #EBECF0;
		background-color: #EBECF0;
		box-shadow:
		  2px 2px 5px #BABECC,
		  -5px -5px 10px #FFF;
		transition: all 0.2s ease-in-out;
	}
	
	#nav li{
		width:100%;
		border: none;
		outline: none;
		border-radius: 10px;
		text-align: center;
		background-color: none;
		height: 50px;
		margin: 15px 0px;
		line-height: 50px;
	}

	#nav li:hover{
		background-color: #EBECF0;
		box-shadow:
		  1px 1px 2px  #BABECC,
		  -1px -1px 2px #FFF;
		cursor: pointer;
	}
	
	#nav li a {
		text-decoration: none;
		color: black;
		font-weight: bold;
	}
	
	#nav li a:hover{
		color: rgb(114, 114, 114);	
	}	
	
	.menu-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;/*leftの値を変更してメニューを画面外へ*/
		z-index: 80;
		background-color: #EBECF0;
		transition: all 0.8s;/*アニメーション設定*/
	}	

	#_page_top main section {
		padding:70px 0px!important;
	}
	
	#_page_top header .container .details .name {
		height: 35px;
		line-height: 35px;
	}
	#_page_top header .container .menu .item {
		height: 35px;
	}
	#_page_top main section .heading {
		margin-bottom: 0.5em;
	}
	#_page_top main section .container.row {
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
	#_page_top main section:nth-child(even) .container.row {
		flex-direction: column-reverse;
	}
	#_page_top main section .container.row div p {
		font-size: 20px;
		text-align: center;
	}
	#_page_top main section#register .container .register-form {
		border: 0;
		width: 100%;
		gap: 5px;
		padding: 50px 50px 80px 50px;
		font-size: 15px;
		margin: 20px 0;
		text-align: center;
	}

	#_page_top main section#home-register .container .register-form {
		border: 0;
		width: 100%;
		gap: 5px;
		padding: 50px 40px 80px 40px;
		font-size: 15px;
		margin: 20px 0;
		text-align: center;
	}


	#_page_top main section#sns .container a {
		width: 85%!important;
		/* width: 100%!important; */
	}
	#_page_top main section#sns .container a .details {
		width: calc(100% - 55px);
	}

	#_page_top header .container .menu .item .home-register {
		border: none;
		border-radius : 10px;          /* 角丸       */
		font-size     : 10pt!important;        /* 文字サイズ */
		cursor        : pointer;     /* カーソル   */
		padding       : 15px 20px!important;   /* 余白       */
		background-color: #EBECF0;
		box-shadow:
		  2px 2px 5px #BABECC,
		  -5px -5px 10px #FFF;
		transition: all 0.2s ease-in-out;
	}





	.register-form :first-child{
		text-align: left;
	}	
	
	#_page_top header .container .details .name {
		margin: 0;
		font-size: 25px;
		height: 50px;
		line-height: 50px;
		color: #ACB6E5;
		background: -webkit-linear-gradient(0deg, #e72a89, #00aeff);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}	

	#_page_top header {
		background-color:#EBECF0;
		color: #000000;
		padding: 15px;
	}	
}

@media screen and (min-width: 765px){
	#nav {
		margin: 0;
		list-style: none;
		padding: 0px;
		display: flex;
	}
	
	#nav li {
		width: 120px;
		border: none;
		outline: none;
		border-radius: 10px;
		cursor        : pointer;     /* カーソル   */
		padding       : 0px 10px;   /* 余白       */
		margin: 0px 5px;
		text-align: center;
		background-color: none;
		height: 50px;
		line-height: 50px;
		background-color: #EBECF0;
		box-shadow:
		  2px 2px 5px #BABECC,
		  -5px -5px 10px #FFF;
		  transition: all 0.2s ease-in-out;
	}
	
	#nav li:hover{
		background-color: #EBECF0;
		box-shadow:
		  1px 1px 2px  #BABECC,
		  -1px -1px 2px #FFF;
		cursor: pointer;
	}
	
	#nav li a {
		text-decoration: none;
		color: black;
		font-weight: bold;
	}
	
	#nav li a:hover{
		color: rgb(114, 114, 114);	
	}	
}



#_page_top {
	margin: 0;
	-webkit-text-size-adjust:100%;
}

#_page_top * {
	box-sizing: border-box;
	font-family: Helvetica;
	word-break: break-word;
}

#_page_top header {
	background-color:#EBECF0;
	color: #000000;
	padding: 18px;
}

#_page_top header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#_page_top header .container .details .name {
	margin: 0;
	height: 50px;
	line-height: 50px;
	color: #ACB6E5;
	background: -webkit-linear-gradient(0deg, #e72a89, #00aeff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#_page_top header .container .menu {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 5px;
}


#menu-btn-check {
	display: none;
}



#_page_top header .container .menu .item:hover{
	background-color: #EBECF0;
	box-shadow:
	  1px 1px 2px  #BABECC,
	  -1px -1px 2px #FFF;
	cursor: pointer;
}


#_page_top header .container .menu .item.home-register {
	border: none;
	border-radius : 10px;          /* 角丸       */
	font-size     : 13pt;        /* 文字サイズ */
	cursor        : pointer;     /* カーソル   */
	padding       : 12px 50px;   /* 余白       */
	background-color: #EBECF0;
	box-shadow:
	  2px 2px 5px #BABECC,
	  -5px -5px 10px #FFF;
	  transition: all 0.2s ease-in-out;
}



#_page_top header .container .menu .item.home-register:hover{
	background-color: #EBECF0;
	box-shadow:
	  1px 1px 2px  #BABECC,
	  -1px -1px 2px #FFF;
	cursor: pointer;
}

#_page_top main section {
	padding:100px 0px;
}

#_page_top main section#about {
	background-color: #EBECF0;
	color: #000000;
}
#_page_top main section#news {
	background-color: #EBECF0;
	color: #000000;
}
#_page_top main section .heading {
	text-align: center;
}
#_page_top main section .container.row {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
#_page_top main section .container.row div p {
	font-size: 20px;
}
#_page_top main section .heading {
	margin-top: 0;
}
#_page_top main section#about .container div:last-child img {
	width: 300px;
	/*height: 450px;*/
	object-fit: cover;
	object-position: top;
}
#_page_top main section#news .container div:first-child img {
	width: 300px;
	/*height: 450px;*/
	object-fit: cover;
	object-position: top;
}

#register {
	align-items: center;
	padding: 25px 0px;
	background-color: #EBECF0;
	color: black;
	height: 100vh;
}

#home-register {
	align-items: center;
	padding: 25px 0px;
	background-color: #EBECF0;;
	color: black;
	text-align: center;
	-webkit-appearance: none;
}



#_page_top main section#register .title{
	text-align: center;
	background-color: #000000;
	color: #ffffff;
	background: -moz-linear-gradient(left, #e72a89,#00aeff);
	background: -webkit-linear-gradient(left, #e72a89,#00aeff);
	background: linear-gradient(to right, #e72a89,#00aeff);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

#_page_top main section#register .container .register-form {
	border: 0;
	width: 100%;
	gap: 5px;
	padding: 50px 50px 80px 50px;
	font-size: 15px;
	margin: 20px 0;
	text-align: center;
	-webkit-appearance: none;

}

#_page_top main section#register .container .register-form .form_input .form-id span{
	width: 160px;
}


#_page_top main section#register .container .register-form .form_input {
	background-color: #EBECF0;
	width:500px;
	margin: auto;
	margin-top: 30px;
}


#_page_top main section#register .container .register-form .form_input .form_input1,
#_page_top main section#register .container .register-form .form_input .form_input2{
	-webkit-appearance: none;
	border: 0;
    outline: 0;
    font-size: 16px;
	margin: 20px 0px 20px 0px;
    border-radius: 10px;
    padding: 16px 0px 16px 16px;
	width: 100%;
    background-color: #EBECF0;
	box-shadow:
	inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
}

#_page_top main section#home-register .container .register-form .form_input .form_input2 {
	-webkit-appearance: none;
	border: 0;
    outline: 0;
    font-size: 16px;
	margin: 20px 10px 10px 5px;
    border-radius: 10px;
    padding: 16px 0px 16px 16px;
	width: 300px;
    background-color: #EBECF0;
	box-shadow:
	inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
}


#_page_top main section#register .container .register-form .form_input .form_input2:focus{
	-webkit-appearance: none;
	outline       : 0;
    background-color: #EBECF0;
	color: black;
	box-shadow:
	inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
}

#_page_top main section#home-register .container .register-form .form_input .form_input2:focus{
	-webkit-appearance: none;
	outline       : 0;
    background-color: #EBECF0;
	color: black;
	box-shadow:
	inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
}


#_page_top main section#register .container .register-form .form_input .form_input2::placeholder{
	color: black;
	font-size: 17px;
}



#_page_top main section#home-register .container .register-form .button_register {
	-webkit-appearance: none;
	border: none;
	margin-top: 40px;
	border-radius : 10px;          /* 角丸       */
	font-size     : 13pt;        /* 文字サイズ */
	cursor        : pointer;     /* カーソル   */
	padding       : 12px 50px;   /* 余白       */
	background-color: #EBECF0;
	box-shadow:
	  2px 2px 5px #BABECC,
	  -5px -5px 10px #FFF;
	  transition: all 0.2s ease-in-out;
}


#_page_top main section#register .container .register-form .button_register:hover{
	background-color: #EBECF0;
	box-shadow:
	  1px 1px 2px  #BABECC,
	  -1px -1px 2px #FFF;
	cursor: pointer;
}

#_page_top main section#home-register .container .register-form .button_register:hover{
	background-color: #EBECF0;
	box-shadow:
	  1px 1px 2px  #BABECC,
	  -1px -1px 2px #FFF;
	cursor: pointer;
}


#_page_top main section#task .container table {
	margin: auto;
	border-collapse: collapse;
}
#_page_top main section#task .container table thead tr th,
#_page_top main section#task .container table tbody tr td {
	padding: 10px;
	border: 1px solid #ffffff;
	text-align: center;
}

#_page_top main section#sns{
	background-color: #EBECF0;
	color:#000000;
}

#_page_top main section#sns .container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#_page_top main section#sns .container a {
    border-radius : 10px;    
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px;
	width: 425px;
	margin: auto;
    color: #444444;
  	box-shadow:
    9px 9px 9px rgba(0,0,0,0.06),
    -9px -9px 9px rgba(255,255,255,0.6),
    inset 5px 5px 5px rgba(0,0,0,0.07),
    inset -5px -5px 5px rgba(255,255,255,0.7);
}
#_page_top main section#sns .container a .icon {
	background-color: #424242;
	border-radius: 100%;
	min-width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#_page_top main section#sns .container a .icon i {
	font-size: 25px;
	color: #ffffff;
}
#_page_top main section#sns .container a .details {
	display: flex;
	flex-direction: column;
	width: 350px;
}
#_page_top main section#sns .container a .details .id {
	font-weight: bold;
}

#_page_top footer {
	width:100%;
  height: 100px;
	background: #EBECF0;
	color: #ffffff;
	padding: 18px;
	bottom: 0;
}
#_page_top footer .container {
	display: flex;
	justify-content: center;
	align-items: center;
}
#_page_top footer .container .copyright {
	font-size: 20px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: -webkit-linear-gradient(0deg, #e72a89, #00aeff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}
#_page_top footer .container .copyright a {
	color: #ffffff;
	text-decoration: underline;
}



#_page_mypage{
	height: 100px;
	background: #EBECF0;
	color: #ffffff;
	padding: 18px;
	bottom: 0;
}
#_page_mypage .container {
	display: flex;
	justify-content: center;
	align-items: center;
}
#_page_mypage .container .copyright {
	font-size: 20px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: -webkit-linear-gradient(0deg, #e72a89, #00aeff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}
#_page_mypage .container .copyright a {
	color: #ffffff;
	text-decoration: underline;
}





.fadein {
    opacity: 0;
    animation: fadein 0.5s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
.txt01 {animation-delay: 1.7s;}
.txt02 {animation-delay: 2.1s;}
.txt03 {animation-delay: 2.5s;}
.txt04 {animation-delay: 3.5s;}