@charset "utf-8";
/* ------------------------------------------------------------ fv */
body { font-family: "Lato","游ゴシック体","Noto Sans Japanese","ヒラギノ角ゴ Pro w3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", "Arial", sans-serif}


#fv { position: relative; margin: 0 auto 3px; width: 100%; height: 0; padding-top: calc(56.25% - 200px); }

#fv #ytPlayerWrap {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#fv #ytPlayerWrap #iframe_ytPlayer {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	margin: -100px auto !important;
}

@media only screen and (max-width: 1500px){
	#fv {
		padding-top: calc(56.25% - 150px);
	}

	#fv #ytPlayerWrap #iframe_ytPlayer {
		margin: -75px auto !important;
	}
}

@media only screen and (max-width: 1024px){
	#fv {
		padding-top: calc(56.25% - 120px);
	}

	#fv #ytPlayerWrap #iframe_ytPlayer {
		margin: -60px auto !important;
	}
}

#about { background: #f4f4f4; }
#about .about { width: 1000px; margin: 0 auto; padding: 90px 0 110px; }
#about .about .photo .main li { float: left; }
#about .about .photo .main li .center { padding: 0 5px; }
#about .about .text { text-align: center; }
#about .about .text .hr h2 { font-size: 24px; font-weight: bold; padding: 50px 0 60px; }
#about .about .text .ancher { text-align: center; }
#about .about .text .ancher a { display: block; margin: 0 auto; color: white; text-align: center; font-size: 16px; background: black; width: 295px; padding: 11px 0; }

#inner .inner { width: 1000px; margin: 0 auto; padding: 50px 0 110px; }
#inner .inner .service { float: left; text-align: center; }
#inner .inner .service .hr h3 { font-size: 28px; color: #0f68ba; padding: 10px 0 0; }
#inner .inner .service .hr h3 span { display: block; color: black; font-size: 16px; font-weight: bold; line-height: 20px; }
#inner .inner .service .ancher a { display: block; margin: 0 auto; color: white; background: black; width: 295px; padding: 11px 0; }
#inner .inner .service .comment p { font-size: 15px; padding: 22px 0 24px; }
#inner .inner .shop { float: right; text-align: center; }
#inner .inner .shop .hr h3 { font-size: 28px; color: #0f68ba; padding: 10px 0 0; }
#inner .inner .shop .hr h3 span { display: block; color: black; font-size: 16px; font-weight: bold; line-height: 20px; }
#inner .inner .shop .ancher a { display: block; margin: 0 auto; color: white; background: black; width: 295px; padding: 11px 0; }
#inner .inner .shop .comment p { font-size: 15px; padding: 22px 0 24px; }

/* ------------------------------------------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

.sp { display: none; }

#header .logo a,
#about .about .photo .main li,
#inner .inner .shop,
#about .about .photo,
#about .about .text,
#footer .banner a { float: none; }

.contact_sp { display: block; width: 94%; margin: 0 auto; padding: 10px 0 20px; }
.contact_sp dl { width: 60%; text-align: center; }
.contact_sp dt { padding: 0; font-size: 11px; line-height: 150%; }
.contact_sp dl dd { padding: 0; font-weight: bold; line-height: 150%; }
.contact_sp dl dd a { margin: 0 0 0 5px;}
.contact_sp dl dd span { padding: 0; font-weight: bold; text-align: center; font-size: 18px; }
.contact_sp a.mall_sp { display: block; width: 38%; margin: 0 auto; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; line-height: 100%; }

body #fv { margin-top: 70px; }

#fv {
	padding-top: calc(56.25% - 0px);
}

#fv #ytPlayerWrap #iframe_ytPlayer {
	margin: -0px auto !important;
}

#about .about { width: 94%; padding: 20px 0 45px; }
#about .about .photo .main { text-align: center; }
#about .about .photo .main img { width: 100%; height: auto; }
#about .about .photo .main li .center { width: 49%; height: auto; float: left; padding: 5px 0 0; }
#about .about .photo .main li .right { width: 49%; height: auto; float: right; padding: 5px 0 0; }
#about .about .text { width: 100%; padding: 0; }
#about .about .text .hr h2 { width: 100%; text-align: left; font-size: 18px; padding: 20px 0 30px; }
#about .about .text .comment { padding: 20px 0 0; }
#about .about .text .comment p { margin: 0 auto; font-size: 14px; text-align: left; }
#about .about .text .ancher a { width: 70%; }

#inner .inner { width: 94%; padding: 45px 0; }
#inner .inner .service {width: 100%; padding: 0 0 45px; }
#inner .inner .service .photo img { width: 100%; height: auto; }
#inner .inner .service .hr h3 { font-size: 20px; }
#inner .inner .service .hr h3 span { font-weight: normal; }
#inner .inner .service .comment p { width: 100%; font-size: 14px; text-align: left; }
#inner .inner .service .ancher a { width: 70%; }
#inner .inner .shop {width: 100%; }
#inner .inner .shop .photo img { width: 100%; height: auto; }
#inner .inner .shop .hr h3 { font-size: 20px; }
#inner .inner .shop .hr h3 span { font-weight: normal; }
#inner .inner .shop .comment p { width: 100%; text-align: left; }
#inner .inner .shop .ancher a { width: 70%; }

}