@charset "utf-8";

/* レスポンシブ　ベース
----------------------------------------------------*/

@media screen and (min-width: 801px) {
	.only-smp {
		display:none !important;
	}
	body {
		font-size:1.2rem;
		line-height:150%;		
	}
	#main-contents {
		width:1000px;
		margin: 0 auto;
	}	
	section {
		width:100%;
		margin: 0 auto;
		padding-bottom:30px;		
	}
}
@media screen and (max-width: 800px) {
	.only-pc {
		display:none !important;
	}
	body {
		width:100% !important;
		overflow:hidden !important;
		overflow-y:scroll !important;

		font-size:4vw !important;
		line-height:160% !important;		
	}		
	#main-contents {
		width:100% !important;
	}			
	section {
		width:100% !important;
		/*overflow:hidden;*/
	}	
	.smp-w100p {
		width:100% !important;
	}
	.image img,
	.img img,
	.smp-w100p {
		width:100% !important;
	}	

}




/*   header / footer
----------------------------------------------------*/

header{
	padding:5px 0;
	border-bottom:solid 1px #333;
}
header div {
	width:1000px;
	margin: 0 auto;
}
header #header-logo {
	float:left;
	width:27%;
	padding:0.5% 0 0.5% 1%;
	background:#fff;
}
header .header-btn {
	float:right;
	width:8%;
	padding: 8px 1% 0;
	background:#fff;
}

footer {
	padding:15px 0;
	background:#000;
	color:#fff;
	text-align:center;
}
footer copy {
	font-size:0.8rem;
	letter-spacing:2px;
	color:#fff;
}

@media screen and (max-width: 800px) {
	header div {
		width:100%;
	}
	header #header-logo {
		width:50%;
	}
	header .header-btn {
		width:12%;
	}
	header .header-btn:nth-child(2) {
		margin-right:10px;
	}
}







/* レイアウト
----------------------------------------------------*/

h2 {
	width:422px;
	height:82px;
	margin: 0 auto 40px;
	padding-top:28px;
	text-align:center;	
	background:url(../img/bg_title.png) no-repeat;
	font-size:2rem;
	font-weight:bold;
	color:#fff;
	text-shadow: 1px 2px 3px #808080;
}
@media screen and (max-width: 800px) {
	h2 {
		width:98%;
		margin: 0 auto 5vw;
		padding:7vw 0;
		height:20vw;
		background-size:contain;
	}
}



#main-contents {
	padding-top:60px;
}

#top-logo {
}
#top-logo h1 {
	margin-bottom:10px;
	font-size:2rem;
	text-align:center;
	color:#08C;
}
#top-logo .bottom {
	text-align:center;
	color:#08C;
}

#top-logo .image {
	width:300px;
	height:390px;
	margin: 0 auto;
	position:relative;
}
#top-logo .image img {
	display:block;
	position:absolute;
	
	opacity: 0;
}

#top-logo .image img:nth-child(1){
	animation: opc_good 1.5s ease 1s 1 forwards;
}
#top-logo .image img:nth-child(2){
	animation: opc_good 1.5s ease 1.4s 1 forwards;
}
#top-logo .image img:nth-child(3){
	animation: opc_good 1.5s ease 1.8s 1 forwards;
}
@keyframes opc_good {
	100%{
		opacity: 1;
	}
}
@media screen and (max-width: 800px) {
	#top-logo h1 {
		font-size:8vw;
	}
	#top-logo .image {
		width:60%;
		height:calc(79vw);
		padding-top:20px;
	}
	#top-logo .image img {
		width:100%;
	}
	#top-logo .bottom {
		padding-bottom:20px;
		font-size:4vw;
	}
}


#top-address {
	width:50%;
	margin: 0 auto 60px;
	padding:3% 5%;
	border:solid 1px #ccc;
}
#top-address div {
	font-weight:bold;
}
#top-address div:nth-child(1){
	margin-bottom:20px;
}
#top-address div * {
	vertical-align:middle;
}
#top-address img {
	display:inline-block;
	margin-right:10px;
}
@media screen and (max-width: 800px) {
	#top-address {
		width:94% !important;
		font-size:4vw;		
	}
	#top-address img {
		width:30px;
	}
}



#top-line {
	width:30%;
	margin: 0 auto 30px;
}
#top-line img {
	width:100%;
	display:block;
	margin: 0 auto;
}
@media screen and (max-width: 800px) {
	#top-line {
		width:60% !important;
	}
}






#top-service {
}
#top-service ul {
	padding:0;
}
#top-service ul li {
	display:block;
	list-style:none;
	float:left;
	width:29%;
	margin: 0 2% 10px;
	padding:1%;
	text-align:center;
	color:#fff;
	font-weight:bold;

	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
}
#top-service ul li:nth-child(1) {background:#8781fa;}
#top-service ul li:nth-child(2) {background:#518c15;}
#top-service ul li:nth-child(3) {background:#86bd20;}
#top-service ul li:nth-child(4) {background:#65726d;}
#top-service ul li:nth-child(5) {background:#7c2169;}
#top-service ul li:nth-child(6) {background:#d40a0a;}
#top-service ul li:nth-child(7) {background:#ed9b1f;}
#top-service ul li:nth-child(8) {background:#a7a410;}
#top-service ul li:nth-child(9) {background:#cb6db4;}
#top-service ul li:nth-child(10) {background:#fb8781;}
#top-service ul li:nth-child(11) {background:#960000;}
#top-service ul li:nth-child(12) {background:#2d3ba9;}

#top-service p {
	margin: 30px 0;
	text-align:center;
}
#top-service div {
	margin-bottom:50px;
}

@media screen and (max-width: 800px) {
	#top-service ul li {
		display:block;
		list-style:none;
		float:left;
		width:46%;
		font-size:4vw;
	}
	#top-service ul li.small {
		font-size:3vw;
	}
}


#top-flow {
	width:80%;
	margin: 0 auto;
}
#top-flow ul {
	padding:0 6%;
}
#top-flow ul li {
	display:block;
	list-style:none;
	height:100px;
	margin-bottom:20px;
	padding-left:100px;
}
#top-flow ul li:nth-child(1) { background:url(../img/ico_number_1.png) no-repeat;}
#top-flow ul li:nth-child(2) { background:url(../img/ico_number_2.png) no-repeat;}
#top-flow ul li:nth-child(3) { background:url(../img/ico_number_3.png) no-repeat;}
#top-flow ul li:nth-child(4) { background:url(../img/ico_number_4.png) no-repeat;}

#top-flow ul li h3 {
}
@media screen and (max-width: 800px) {
	#top-flow ul li {
		height:20vw;
		padding-left:calc(5vw + 80px);	
	}
}



#top-price {
	width:80%;
	margin: 0 auto 50px;
}
@media screen and (max-width: 800px) {
	#top-price p {
		padding:0 4%;
	}
}

#top-greeting {
	width:80%;
	margin: 0 auto 50px;
}
#top-greeting p img {
	display:block;
	width:40%;
	margin: 30px auto;
}
@media screen and (max-width: 800px) {
	#top-greeting p {
		padding:0 4%;
	}
}




#top-sample {
	width:80%;
	margin: 0 auto 50px;
}
#top-sample p {
	padding-bottom:30px;
}
#top-sample div img {
	display:block;
	width:100%;
	margin: 0 auto 30px;
}
#top-sample div span {
	display:block;
	background:#ed9b1f;
	padding: 10px 20px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	letter-spacing:1px;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;	
}
#top-sample p.bottom {
	padding: 30px 0 0 120px;
}
#top-sample p.bottom span {
	display:block;
	margin-bottom:10px;
	font-weight:bold;
	color:#08C;
}
#top-sample p.bottom img {
	display:block;
	float:left;
	margin: 0 20px 20px 0;
}
@media screen and (max-width: 800px) {
	#top-sample p {
		padding:0 4% 20px;
	}
	#top-sample p.bottom {
		padding: 5vw 0 0 5vw;
		font-size:3.5vw;
		line-height:140%;
	}
	#top-sample p.bottom span {
		font-size:5vw;
		line-height:140%;
	}
}





#top-contact {
	width:70%;
	margin: 0 auto 50px;
}
#top-contact table {
	width:100%;
	border-top:dashed 2px #eee;
}
#top-contact table th {
	width:30%;
	padding:10px 5% 10px 0;
	text-align:right;
	border-bottom:dashed 2px #eee;
}
#top-contact table td {
	padding:10px 0;
	border-bottom:dashed 2px #eee;
}


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

}