@charset "utf-8";

.mw-1200{max-width : 1200px;}
.mw-1000{max-width : 1000px;}
.mw-900{max-width : 900px;}
.mw-800{max-width : 800px;}
.mw-700{max-width : 700px;}

.w-100{width : 100%;}
.w-70{width : 70%;}
.w-100p{width : 100px;}

hr{
	border-color : white;
	margin: 0px;
}


h1{
	font-size: 1rem;
	text-align: center;
}
h4{
	margin: 0;
	font-size: 1rem;
}
h5{letter-spacing: 10px;}

.height-50-30{height : 50px;}
@media screen and (max-width: 480px) {
	.height-50-30{height : 30px;}
}

body{
	color: seashell;
	background-image : url(image/bg-base.png);
}

header{
	background-color: rgba(51, 0, 102, 0.5);
	padding: 1rem 0;
}

.mobile-top{
	width: 100%;
	height: 480px;
	object-fit: cover;
}

.sticky-bg{
	background-color: rgba(0, 0, 0, 0.5);
}

.navi-button{
	display: inline-block;
	font-size: 0.8rem;
	width: 100%;
	padding: 7px;
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	background-color: rgba(0, 64, 255, 0.7);
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff;
	border-radius: 5px;
	-webkit-transition: .4s;
	transition: .4s;
}
.navi-button:hover{
	text-decoration: none;
	color : #ffffff;
	background-color: rgba(255, 102, 0, 0.7);
}

.concept{
	background-image : url(image/bg-concept.png);
	padding: 300px 0 300px 0;
	background-position : center center;
	overflow: hidden;
}
.concept p{font-size: 1.2rem;}
@media screen and (max-width: 480px) {
.concept{
	background-image : url(image/bg-concept.png);
	padding: 100px 0;
	background-size:cover;
}
.concept p{
	font-size: 1rem;
	text-align: left;
	padding: 10px 20px;
}
}

.bx-wrapper{
	background-color: transparent;
	margin: 0px auto 0px;
	border: none;
	box-shadow: none;
}
.bx-wrapper img{
	display: block;
	margin: 0px auto;
}

.title-h3{
	padding: 50px 0 30px 0;
	text-align: center;
	letter-spacing: 10px;
}
.title-h3-2{
	padding: 50px 0 0px 0;
	text-align: center;
	letter-spacing: 10px;
}

.bg-banner{background-color:#963943;}

.bg-gray{background-color: gray;}

.button {
	display: inline-block;
	font-size: 0.8rem;
	width: 130px;
	padding: 7px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	background-color: rgba(0, 64, 255, 0.7);
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff;
	border-radius: 5px;
	-webkit-transition: .4s;
	transition: .4s;
}
.button:hover{
	text-decoration: none;
	color : #ffffff;
	background-color: rgba(255, 102, 0, 0.7);
}

.column-center{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

footer{
	background-image : url(image/bg-footer.png);
	background-repeat : no-repeat;
	background-position : left bottom;
}

.tel-font{
	font-size : 36px;
	font-family: 'Impact',
	'DIN Condensed',
	'Seravek',sans-serif;
	text-align : center;
}

footer a{color: white;}


.fluffy1{animation: fluffy1 20s ease infinite;}
@keyframes fluffy1 {
	0% { transform:translateX(600px); opacity: 0;}
	10% { transform:translateX(0px); opacity: 1; }	
	100% { transform:translateX(0px); opacity: 1; }
}

.fluffy2{animation: fluffy2 20s ease infinite;}
@keyframes fluffy2 {
	0% { transform:translateX(600px); opacity: 0;}
	15% { transform:translateX(600px); opacity: 0;}		
	25% { transform:translateX(0px); opacity: 1;}
	100% { transform:translateX(0px); opacity: 1; }
}

.fluffy3{animation: fluffy3 20s ease infinite;}
@keyframes fluffy3 {
	0% { transform:translateX(600px); opacity: 0;}
	30% { transform:translateX(600px); opacity: 0;}		
	35% { transform:translateX(0px); opacity: 1;}
	100% { transform:translateX(0px); opacity: 1;}
}	

.fluffy4{animation: fluffy4 20s ease infinite;}
@keyframes fluffy4 {
	0% { transform:translateX(600px); opacity: 0;}
	40% { transform:translateX(600px); opacity: 0;}		
	45% { transform:translateX(0px); opacity: 1;}
	100% { transform:translateX(0px); opacity: 1;}
}	

.fluffy5{animation: fluffy5 20s ease infinite;}
@keyframes fluffy5 {
	0% { transform:translateX(600px); opacity: 0;}
	50% { transform:translateX(600px); opacity: 0;}		
	55% { transform:translateX(0px); opacity: 1;}
	100% { transform:translateX(0); opacity: 1;}
}	





.just{
	text-align: justify;
	text-justify: inter-ideograph;
}

.table{color:white;}

.privacy-p{
	font-size: 1.2rem;
	text-align: center;
}


.video-bottom{margin-top: -45px;}
@media screen and (max-width: 480px) {
	.video-bottom{margin-top: -25px;}
}