@charset "utf-8";

/* ==================================================================
	Site Name:
	Author:高橋 潤
	Version: 1.0

	Page Title:	TOP

=================================================================== */
.main-visual {
	animation: image_anime 30s ease infinite;
	/* 5秒のアニメーションを繰り返す */
	background-image: url(../../images/index/main.jpg);
	background-image: url(../../images/index/main01.jpg);
	background-image: url(../../images/index/main02.jpg);
	background-image: url(../../images/index/main03.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	width: 100%;
	padding: 50px 20px;
	position: relative;
	top: -15px
}

@keyframes image_anime {
	0% {
		background-image: url(../../images/index/main.jpg);
		/* 背景画像1を指定 */
	}

	25% {
		background-image: url(../../images/index/main01.jpg);
		/* 背景画像1を指定 */
	}

	50% {
		background-image: url(../../images/index/main02.jpg);
		/* 背景画像1を指定 */
	}

	75% {
		background-image: url(../../images/index/main03.jpg);
		/* 背景画像1を指定 */
	}

	100% {
		background-image: url(../../images/index/main.jpg);
		/* 背景画像1を指定 */
	}
}



@media (max-width: 640px) {
	.main-visual {
		padding: 100px 0px 50px;
		top: 0px;
		background-size: 200%!important;
		animation: image_anime_s 30s ease infinite;
		/* 5秒のアニメーションを繰り返す */
		background-image: url(../../images/index/main.jpg);
		background-image: url(../../images/index/main01.jpg);
		background-image: url(../../images/index/main02.jpg);
		background-image: url(../../images/index/main03.jpg);
	}
}

@keyframes image_anime_s {
	0% {
		background-image: url(../../images/index/main.jpg);
		/* 背景画像1を指定 */
	}

	25% {
		background-image: url(../../images/index/main01.jpg);
		/* 背景画像1を指定 */
	}

	50% {
		background-image: url(../../images/index/main02.jpg);
		/* 背景画像1を指定 */
	}

	75% {
		background-image: url(../../images/index/main03.jpg);
		/* 背景画像1を指定 */
	}

	100% {
		background-image: url(../../images/index/main.jpg);
		/* 背景画像1を指定 */
	}
}


#contents #message::before{
	content: "";
	display: block;
	height: 55px;
	background: url(../../images/index/wave.png) 0 0 repeat-x;
	position: relative;
	top:-65px
}

#contents #message::after{
	content: "";
	display: block;
	height: 55px;
	background: url(../../images/index/wave.png) 0 0 repeat-x;
	position: relative;
	transform:scaleY(-1);
	top:65px
}

#contents{
	position: relative;
	top:-25px
}

.col2{
	display: flex;
}

.col2 .col-left{
	width:50%;
}

.col2 .col-right{
	width:50%;
}

/*-------------------------------
#message
---------------------------------*/
#message{
	background: url(../../images/index/pink-bg.png) 0 0 repeat;
	color:#FFF;
}



.rinen{
	position: relative;
	margin-top:-100px;
}

@media (max-width: 640px) {
	.col2{
		display: block;
	}
	
	.col2 .col-left{
		width:100%;
	}
	
	.col2 .col-right{
		width:100%;
	}
	.rinen{
		position: relative;
		margin-top:0px;
	}
}

/*-------------------------------
#service
---------------------------------*/
.support-message{
	font-size: 150%;
	font-weight:bold;
	color:#bb0d23;
}

#service p{
	padding:25px;
}

#service .col2{
	margin:15px 0;
}

#service dl{
	background-color: #FFF;
	padding:20px;
	border-radius: 10px;
	box-shadow: 8px 8px #ffdee0;
	width:85%;
	height:85%;
	margin:25px auto ;
}


#service dl dt{
	text-align: center;
	margin-bottom:20px;
}

#service dl dd{
	text-align: left;
	font-size: 88%;
	line-height: 1.8em;
}

.service08{
	background: url(../../images/index/service-bg.png) 0 0 no-repeat;
}

.service08 h3{
	position: relative;
	top:25px;
}

.service-block{
	background-color: #FFF;
	border: 1px solid #40210f;
	padding:80px 20px 20px;
	border-radius:10px;
	margin:50px 15px;
	position: relative;
	height:50%;
}

.service-block h4{
	position: absolute;
	top:-50px;
	left:50%;
	margin-left:-87px;
}

.service-block p{
	margin: 15px 5px!important;
	padding: 0!important;
	font-size: 85%;
}

.service-block .left{
	margin: 0 25px 0 0;
}

.service-block ul{
	display: flex;
}

.service-block ul li{
	font-size: 85%;
	margin:0 15px;
	line-height: 1.8em;
}

.col1 .service-block{
	padding:60px 20px 0px;
}

.tel{
	font-size: 150%;
	font-weight: bold;
	color:#bb0d23;
	text-decoration: underline;
}

.h24{
	margin:15px;
	text-align: center;	
}

@media (max-width: 640px) {
	.service-block .left{
		float: none!important;
		margin: 0 auto ;
	}

	.service-block{
		padding:40px 20px 20px;
		border-radius:10px;
		margin:50px 15px 80px;
	}
	.service-block ul{
		display: block;
	}
	.service-block ul li{
		margin-bottom:15px
	}

}


/*-------------------------------
#aboutus
---------------------------------*/
#aboutus{
	background: url(../../images/index/about-bg.jpg) 0 0 repeat;
	color:#FFF;
}

#aboutus::before{
	content: "";
	display: block;
	height: 55px;
	background: url(../../images/index/about-wave.png) 0 0 repeat-x;
	position: relative;
	top:-75px
}

#aboutus::after{
	content: "";
	display: block;
	height: 55px;
	background: url(../../images/index/about-wave.png) 0 0 repeat-x;
	position: relative;
	transform:scaleY(-1);
	top:75px
}

#aboutus .col2{
	
}

#aboutus .col2 div{
	margin:15px;
}

#aboutus .col2 a{
	font-size: 85%;
	color:#FFF!important;
}

@media (max-width: 640px) {
	#aboutus .col2 .col-left{
		width:470px;
	}

	#aboutus .col2 .col-left img{
		width:470px;
	}

	#aboutus .col2 .col-right{
		margin: 15px;
		width:100%;
	}
	#aboutus .col2 .col-right iframe{
		width:90%;
	}
}

/*-------------------------------
#staff-list
---------------------------------*/
.staff-list{

}

.staff-list li{
	background-color: #fff4ed;
	border-radius: 10px;
	padding: 25px;
	background-image: url(../../images/index/staff-icon.png),url(../../images/index/staff-icon.png),url(../../images/index/staff-icon.png),url(../../images/index/staff-icon.png);
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	background-position: 0 0,right 0,0 bottom,right bottom;
	color:#40210f;
	text-align: left;
	font-size:85%;
	line-height: 1.5em;
	margin:25px 15px;
}

.staff-list li .staff-image{
	float:left;
	margin-right:35px;
	margin-bottom:20px;
}

.staff-list li .staff-name{
	margin:15px 0;
}



@media (max-width: 640px) {
	.staff-list li{
		text-align: center;
	}


	.staff-list li .staff-image{
		float:none;
		margin:0 auto!important;
		display: block;
	}
	
	.staff-list li .staff-name{
		margin:15px auto;
	}

	.staff-list li .staff-comment{
		display: inline-block;
		text-align: left;
	}
	
}

/*-------------------------------
#recruit
---------------------------------*/
#recruit table{
	width:75%;
	margin: 15px auto;
	font-size:85%;
}

#recruit table th{
	font-weight:normal;
	white-space: nowrap;
	padding:10px;
	vertical-align:top;
	border-bottom:1px solid #f17182;
}

#recruit table td{
	padding:10px;
	border-bottom:1px solid #f17182;
}


@media (max-width: 640px) {
	#recruit table{
		width:90%;
	}
}

/*-------------------------------
#contact
---------------------------------*/
#contact table{
	width:75%;
	margin: 15px auto;
	font-size:85%;
}

#contact table th{
	font-weight:normal;
	white-space: nowrap;
	padding:15px 10px;
	vertical-align:top;
	width:18%
}

#contact table td{
	padding:10px;
}

#contact table td input{
	border:1px solid #f17182;
	border-radius:5px;
	padding:5px;
}
#contact table td input.text{
	width:80%;
}

#contact table td textarea{
	border:1px solid #f17182;
	border-radius:5px;
	padding:5px;
	width:80%;
}
.disabled {
    opacity: 0.2;
}
textarea

@media (max-width: 640px) {
	#contact table{
		width:100%;
		margin:15px;
	}
	#contact table th{
		display: block;
		width:100%;
		padding:15px 10px 0;
	}
	#contact table td{
		display: block;
		width:100%;
		padding:5px 10px;
	}
	#contact table td input.text{
		width:90%;
	}
	#contact table td textarea{
		width:90%;
	}

}