@charset "UTF-8";
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,
  "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  	font-size: 14px;
  	line-height: 1.7;
	color: hsla(0,0%,15%,1.00);
} 
body a{
	color: black;
}
#page_top{
	z-index: 3;
	width: 45px;
	height: 45px;
	right: -50px;
	bottom: 20px;
	border-radius: 8%;
	position: fixed;
	background:hsla(0,0%,0%,0.87);
	animation: myAnimationtop 1s ease infinite;
        -moz-animation: myAnimationtop 1s ease infinite;
        -webkit-animation: myAnimationtop 1s ease infinite;
        -o-animation: myAnimationtop 1s ease infinite;
        animation-direction: alternate;
}
@keyframes myAnimationtop{
    from{bottom:65px;}
    to{bottom:80px;}
}
#page_top a{
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  text-decoration: none;
}
#page_top a:hover{
	font-family: 'Font Awesome 5 Free';
	background:hsla(0,0%,0%,1);
	
	border-radius: 8%;
}
#page_top a::before{
  	font-family: 'Font Awesome 5 Free';
  	font-weight: 900;
	content: '\f102';
  	font-size: 25px;
  	color: #fff;
  	position: absolute;
  	width: 25px;
  	height: 25px;
  	top: -14px;
  	bottom: 0;
  	right: 0;
  	left: 0;
  	margin: auto;
  	text-align: center;
}

nav{
	position: fixed;
	bottom:0px;
	z-index: 10;
	width: 100%;
	height: 65px;
	background: hsla(0,0%,0%,0.87);
	transition: 0.7s;
}
nav:hover{
	background: hsla(0,0%,0%,1);
}
nav .logo img{
	width: 35px;
	height: auto;
	margin-left: 15px;
	margin-top: 13px;
}
nav .drawer{
	position: absolute;
	z-index: 10;
	bottom: 8px;
	right: 15px;
	color: white;
	font-size:35px;
	cursor:pointer;
}
nav p.asian{
	z-index: 10;
	color: white;
	text-align: center;
	margin-top: -40px;
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.1em;
	font-family: "Times New Roman", Times, "serif";
}
.nav{
	position: fixed;
	height: 100vh;
	top:0;
	z-index: 10;
	display: flex;
    justify-content: center;
    align-items: center;
	background: hsla(0,0%,1%,1.00);
	width:0;
	overflow: hidden;
	transition: 0.5s;
}
body a{
	text-decoration: none;
}
.nav a{
	color:white;
	
}
.nav .close{
	cursor: pointer;
	bottom: 6px;
	right: 15px;
	position: absolute;
	font-size: 35px;
	z-index: 4;
	color: white;
}
.nav ul li{
	letter-spacing:0.1em;
	font-size: 145%;
	margin-top: 40px;
	transition: 0.5s;
	text-align: center;
}
.nav ul li:hover{
	font-size: 150%;
	opacity: 0.6;
}
nav ul {
	display: none;
}
/*ーーーーーーーーーーーーーーーNAV ここまでーーーーーーーーーーーー*/
/*ーーーーーーーーーーーーーーーfadeinーーーーーーーーーーーー*/
.fadein {
  opacity: 0;
  transform : translate(0, 150px);
  transition : all 1500ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
.fadeinright {
  opacity: 0;
  transform : translateX(100px);
  transition : all 1200ms;
}
.fadeinright.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
.fadeinleft {
  opacity: 0;
  transform : translateX(-100px);
  transition : all 1200ms;
}
.fadeinleft.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
/*ーーーーーーーーーーーーーーーfadeinーーーーーーーーーーーー*/

/*----------------------------------CONTACT　ここからーーーーーーーー*/
#contact .contac-title{
	text-align: center;
	font-size: 150%;
	color:#DD1F26;
	font-weight: 900;
	
}
#contact h2{
	text-align: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 120%;
}
#contact h3{
	width: 100px;
	margin: auto;
	background: hsla(217,100%,25%,1.00);
	height: 3px;
	margin-top: 10px;
	margin-bottom: 30px;
}
#contact {
	padding-top: 40px;
	padding-bottom: 50px;
	background: hsla(0,0%,97%,1.00);
}
#contact p{
	text-align: center;
	margin-top: 10px 10px;;
}
#contact table,#contact th,#contact td ,#contact tr{
	border: none;
}
#contact table{
	margin: auto;
	margin-top: 20px;
	width: 100%;
	padding: 35px;
	overflow: hidden;
	margin-bottom: 30px;
	
}
#contact table tr{
	overflow: hidden;
	width: 100%;
	position:relative;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	box-sizing: border-box;
	
}
#contact table th{
	font-size: 115%;
	margin-bottom: 5px;
	width: 100%;
	font-weight: 600;
	color: hsla(0,0%,20%,1.00);
}
#contact table td{
	box-sizing: border-box;
	width: 100%;
}
#contact table input,textarea{
	box-sizing: border-box;
	width: 100%;
	padding: 5px;

}
#contact table textarea{
	height: 130px;
	padding: 8px;

}
#contact .red{
	color:red;
	font-size: 90%;
}
#contact .submit{
	width: 230px;
	margin: auto;

	overflow: hidden;
	
}
#contact .sub {
	border: solid 2px hsla(217,100%,25%,1.00);
	padding: 10px 30px;
	font-size: 105%;
	font-weight: 600;
  	display: inline-block;
    background: -webkit-linear-gradient(left, hsla(217,100%,25%,1.00) 50%, transparent 50%);
    background: -o-linear-gradient(left, hsla(217,100%,25%,1.00) 50%, transparent 50%);
    background: linear-gradient(to right, hsla(217,100%,25%,1.00) 50%, transparent 50%);
  	background-size: 200% 100.5%;
  	background-position: right bottom;
  	text-align: center;
  	color: #0E0E0E;
  	width: 230px;
  	transition: all .3s; 
	margin: auto;
	
	cursor: pointer;
}

#contact .sub2 {
	border: solid 2px hsla(217,100%,25%,1.00);
	padding: 10px 30px;
	font-size: 105%;
	font-weight: 600;
  	display: inline-block;
    background: -webkit-linear-gradient(left, hsla(217,100%,25%,1.00) 100%, transparent 100%);
    background: -o-linear-gradient(left, hsla(217,100%,25%,1.00) 100%, transparent 100%);
    background: linear-gradient(to right, hsla(217,100%,25%,1.00) 100%, transparent 100%);
  	background-size: 200% 100.5%;
  	background-position: right bottom;
  	text-align: center;
  	color: white;
  	width: 230px;
  	transition: all .3s; 
	margin: auto;
	cursor: pointer;

}
#contact .sub2:hover {
	opacity: .7;
	border: solid 2px hsla(217,100%,25%,1.00);
}
#contact .sub:hover {
    background-position: left bottom;
    color: white;
}
#contact h5{
	text-align: center;
	margin-bottom: 15px;

}
#contact h5 input{
	cursor: pointer;
	margin: 10px;
}
#contact .box{
	border: solid 1px hsla(0,0%,34%,1.00);
	padding: 10px;
	background: white;
	font-size: 90%;
	height: 200px;
	width: 90%;
	margin: auto;
	max-width: 960px;
	overflow: scroll;
	margin-bottom: 10px;
}
#contact .box p{
	text-align: left;
}
#contact .bold{
	font-weight: 600;
	margin-top: 5px;
}
#contact ::-webkit-scrollbar {
  	width: 9px;
	height: 0;
}

#contact ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 5px;
}
#contact ::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
}
#contact ::-webkit-scrollbar-thumb:hover {
  background:blue;
}
#contact .form-check tr th{
	
}
#contact .form-check tr td{
	border: solid 1px hsla(0,0%,34%,1.00);
	background: white;
	padding: 10px;
	box-sizing: border-box;
}
/*------------------------------FOOTER----------------*/
footer{
	background: hsla(0,0%,5%,1.00);
	color: white;
	padding-top: 40px;
	padding-bottom: 100px;
	text-align: center;
}
footer a{
	color:white;
}
footer ul{
	max-width: 800px;
	margin: auto;
	
}
footer ul li{
	font-size: 100%;
	text-align: center;
	margin-bottom: 10px;
}
footer ul li i{
	margin-right: 5px;
}
footer ul li:hover{
	text-decoration: underline;
}
footer img{
	margin-top: 30px;
	margin-bottom: 30px;
}
footer .footer-title{
	font-size: 125%;
	
}
footer small{
	font-size: 85%;
}
@media Screen and (min-width:768px){
	@keyframes myAnimationtop{
    	from{bottom:75px;}
    	to{bottom:90px;}
	}

	nav .drawer,nav p.asian{
		display: none;
	}
	nav ul.ul-item{	
		position: absolute;
		z-index: 3;
		color: white;
		margin-left: 100px;
		display: flex;
		justify-content:space-around;
		top:0px;
		width: 88%;
		height: 100%;
	}
	nav ul li {
		width: 20%;
		box-sizing: border-box;
		text-align: center;
		
		
	}
	nav ul a{
		color: white;
		display: block;
		padding-top: 13px;
	}
	nav {
		height: 75px;
	}
	nav .logo img{
		width: 48px;
		margin-left: 30px;
	}
	nav .ul-item .li-drow ul{
		color: white;
		position: absolute;
		z-index: 3;
		display: flex;
		justify-content:space-between;
		left: -100px;
		bottom:75px;
		background: hsla(0,0%,18%,1);
		width: 115%;
	}
	.none{
		display: none;
		
	}
	nav .li-item:hover{
		background: hsla(217,100%,29%,1.00);
	}
	nav .li-drow ul li{
		padding: 7px 3px;
		border-left: 1px solid hsla(0,0%,5%,0.87);
		width: 100%;
		padding-top: 0;
	}
	nav .li-drow ul li:hover{

		background: hsla(217,100%,25%,1.00);
	}
	.ul-item .li-drow:hover .none{
		display: block;
	}
	/*-----------------------------NAV ここまでーーーーーーーーー*/
	
	#contact table{
		max-width: 1000px;
	}
	#contact table tr{
		flex-wrap: nowrap;
		margin-top: 15px;
	}
	#contact table th{
		width: 30%;
		
	}
	#contact table td{
		width: 100%;
	}
	
	#contact .form-check tr th{
		padding-top: 10px;
		box-sizing: border-box;
	}
	footer{
		padding-bottom: 130px;
	}
	footer ul{
		max-width: 800px;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}
	footer ul li{
		font-size: 100%;
	}
	footer img{
		margin: 40px;
	}
	footer .footer-title{
		font-size: 150%;
	}
	
}