@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
初期設定
****************************************************************************************************/

/* IE8以下への対応 */
article, aside, figure, figcaption, footer, header, nav, section {
	display:block;
}
/* IE8以下への対応 */

.pcOnly {
	display:block;
}
span.pcOnly {
	display:inline;
}
.spOnly {
	display:none;
}

html,body{
	text-align:center;
	font-family:"ヒラギノ角ゴシック",Hiragino Kaku Gothic ProN,"ヒラギノ角ゴ ProN W3",Hiragino Sans,Roboto,"Droid Sans",YuGothic,"游ゴシック",Meiryo,"メイリオ",Verdana,"ＭＳ Ｐゴシック",sans-serif;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	width:100%;
	min-width:1200px;
	height:100%;
	color:#000;
}
* {
	box-sizing:border-box;
}
img {
	vertical-align:top;
}
strong {
	font-weight:bold;
}
a {
	color:#C772A9;
	-webkit-transition: all .4s;
	transition: all .4s;
}
a:hover {
	opacity:0.7;
}

/* clear fix */
.clearfix:before,
.clearfix:after {
	content:" ";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}
/* clear fix */

/* fadeup animation ----------------------*/

.f-up0{
	opacity: 0;
	transition:2.0s;
}
.f-up1{
	opacity: 0;
	transition: 1.5s;
}
.f-up{
	opacity: 0;
	transform: translate(0,10px);
	-webkit-transform: translate(0,10px);
	transition: 1.5s;
}
.go-up {
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
/* fadeup animation ----------------------*/



/****************************************************************************************************
header
****************************************************************************************************/
#header {
	position:relative;
	width:100%;
	min-width:1200px;
	padding:25px 34px 12px 32px; 
	background:rgba(0,0,0,.6);
	z-index:2000;
	text-align:left;
}
#logo {
	float:left;
}
#name {
	float:left;
}
#h-right {
	float:right;
}
#tel {
	float:left;
	margin:25px 10px 0 0;
	color:#FFF;
	text-shadow:0px 0px 12px rgba(0,0,0,1.0);
}
#tel div {
	margin:3px 0;
	font-size:28px;
}
#tel span {
	font-size:12px;
}
#masami-garden {
	float:right;
}



/****************************************************************************************************
main-img
****************************************************************************************************/
#main-img {
	position:relative;
	width:100%;
	height:calc(100vw * 818 / 1300);
	min-height:755px;
	max-height:1800px;
	background:URL(../img/main-img.jpg) no-repeat center center;
	background-size:cover;
}
#main-copy {
	position:absolute;
	left:50%;
	top:41.119%;
	-webkit-transform:translate(-49.5%,0);
	transform:translate(-49.5%,0);
}
#main-caption {
	position:absolute;
	left:40px;
	bottom:20px;
}
#scroll {
	position:absolute;
	left:50%;
	bottom:48px;
	-webkit-transform:translate(-49.5%,0);
	transform:translate(-49.5%,0);
}
#sns {
	position:absolute;
	right:50px;
	bottom:31px;
}
#sns li {
	float:left;
}
#sns li + li {
	margin-top:1px;
	margin-left:9px;
}



/****************************************************************************************************
sec1
****************************************************************************************************/
#sec1 {
	height:1144px;
	padding:84px 1em 76px 1em;
	background:url(../img/sec1-bg.jpg) no-repeat center top;
}
#sec1 .ttl {
	margin-bottom:56px;
}
#sec1 .cont p {
	font-size:15px;
	line-height:2.2;
}



/****************************************************************************************************
sec2
****************************************************************************************************/
#sec2 {
	height:calc(100vw * 860 / 1300);
	min-height:793px;
	background:url(../img/sec2-bg.jpg) no-repeat center top;
	background-size:cover;
}
#sec2 .ttl {
	margin:5px 0 20px 0;
}
#sec2-2 {
	padding:30px 0 50px 0;
}
#sec2-2 .cont p {
	font-size:15px;
	line-height:2.2;
}
#sec2-3 {
	padding:0 0 66px 0;
}
#sec2-3-text {
	margin:29px 0 15px 0;
}

.sns {
	position:relative;
	overflow:hidden;
}
.sns ul {
	position:relative;
	left:50%;
	float:left;
}
.sns ul li {
	position:relative;
	left:-50%;
	float:left;
}
.sns ul li + li {
	margin-top:1px;
	margin-left:9px;
}

#sec3 {
	position:relative;
}
#sec3 .ttl {
	margin:0 0 24px 0;
}
#sec3 .cont p {
	padding:25px 0 20px 0;
	font-size:15px;
	line-height:2.2;
}
#sec3-logo {
	margin:90px 0 40px 0;
}



/****************************************************************************************************
footer
****************************************************************************************************/
#footer {
	height:399px;
	padding:38px 0 0 0;
	background:url(../img/footer-bg07.jpg) repeat-x center top;
}
#footer-inner {
	width:940px;
	margin:0 auto;
	margin-bottom:18px;
	padding-bottom:11px;
	text-align:left;
	border-bottom:1px solid #BBB;
}
.footer-box1 {
	float:left;
	width:420px;
}
.footer-box1 h3 {
	margin:5px;
	color:#386F3D;
	font-weight:bold;
	font-size:22px;
}
.footer-box1 h3 img {
	vertical-align:-11px;
}
.footer-box1 h3 span {
	font-size:16px;
}
.footer-box1 p {
	margin:2px;
	padding-left:29px;
	font-size:14px;
	color:#333;
	line-height:1.4;
}
.footer-box2 {
	float:left;
	width:330px;
}
.footer-box3 {
	float:left;
	width:172px;
	text-align:center;
}
.footer-box3 div {
	margin-top:10px;
}
.footer-box3 div + div {
	margin-top:10px;
}
.img-box {
	float:left;
	text-align:center;
}
.img-box p {
	margin-top:3px;
	font-size:12px;
}
.img-box p a {
	color:#333;
	text-decoration:none;
}
.footer-box1 .img-box {
}
.footer-box1 .txt-box {
	padding-left:138px;
}
.footer-box2 .img-box {
	margin-right:12px;
}
#footer-inner2 {
	display:inline-block;
	width:auto;
	margin:0 auto;
	text-align:left;
	color:#333;
	font-size:12px;
	line-height:1.5;
}
.col1 {
	color:#3A6E3F;
}
.dl1 {
}
.dl1 dt {
	float:left;
}
.dl1 dd {
	padding-left:4em;
}
.dl2 dd {
	padding-left:4em;
}
#copyright {
	margin:13px 0 0 0;
	font-size:10px;
	text-align:center;
}

#pagetop {
	position:absolute;
	right:0;
	bottom:35px;
}
@media only screen and (max-width: 767px) {
	html,body{
		min-width:initial;
		min-width:auto;
	}
	img {
		width:100%;
		height:auto;
	}
	a {
		-webkit-transition:none;
		transition:none;
	}
	a:hover {
		opacity:1;
	}
	.pcOnly,
	span.pcOnly {
		display:none;
	}
	.spOnly {
		display:block;
	}

	/* fadeup animation ----------------------*/
	/* fadeup animation ----------------------*/



	/****************************************************************************************************
	header
	****************************************************************************************************/
	#header {
		min-width:initial;
		min-width:auto;
		padding:1vw; 
	}
	#logo {
		width:12vw;
	}
	#name {
		width:63vw;
	}
	#h-right {
		float:right;
	}
	#tel {
		display:none;
	}
	#masami-garden {
		width:10vw;
	}
	
	
	
	/****************************************************************************************************
	main-img
	****************************************************************************************************/
	#main-img {
		height:120vw;
		min-height:initial;
		min-height:auto;
	}
	#main-copy {
		width:80vw;
		left:50%;
		top:40%;
		-webkit-transform:translate(-49.5%,0);
		transform:translate(-49.5%,0);
	}
	#main-caption {
		width:60vw;
		left:1vw;
		bottom:0vw;
	}
	#scroll {
		width:10vw;
		left:50%;
		bottom:8vw;
		-webkit-transform:translate(-49.5%,0);
		transform:translate(-49.5%,0);
	}
	#sns {
		display:none;
	}
	
	
	
	/****************************************************************************************************
	sec1
	****************************************************************************************************/
	#sec1 {
		height:180vw;
		padding:8vw 4vw 10vw 4vw;
		background:url(../img/sec1-bg-sp.jpg) no-repeat center top;
		background-size:130vw auto;
	}
	#sec1 .ttl {
		width:80vw;
		margin:0 auto;
		margin-bottom:5vw;
	}
	#sec1 .cont p {
		font-size:2.66vw;
		line-height:1.6;
	}



	/****************************************************************************************************
	sec2
	****************************************************************************************************/
	#sec2 {
		height:calc((100vw * 860 / 1300) + 17vw);
		min-height:initial;
		min-height:auto;
		background:url(../img/sec2-bg.jpg) no-repeat center bottom;
		background-size:cover;
	}
	#sec2 .ttl {
		width:15vw;
		margin:2vw auto;
	}
	#sec2 .cont div {
		padding: 0 5vw;
	}
	#sec2-2 {
		padding:5vw 4vw;
	}
	#sec2-2 .cont p {
		font-size:2.66vw;
		line-height:1.6;
	}
	#sec2-3 {
		padding:0 4vw 10vw 4vw;
	}
	#sec2-3-text {
		width:70vw;
		margin:6vw auto 0 auto;
	}
	
	.sns {
		display:none;
	}
	
	#sec3 {
		position:relative;
	}
	iframe {
		height:100vw;
	}
	#sec3 .ttl {
		width:65vw;
		margin:0 auto 5vw auto;
	}
	#sec3 .cont p {
		padding:3vw;
		font-size:2.66vw;
		line-height:1.6;
	}
	#sec3-logo {
		width:35vw;
		margin:8vw auto;
	}



	/****************************************************************************************************
	footer
	****************************************************************************************************/
	#footer {
		height:auto;
		padding:8vw 0 10vw 0;
		background:url(../img/footer-bg07.jpg) repeat-x center top;
		background-size:contain;
	}
	#footer-inner {
		width:100%;
		margin:0 auto;
		padding:0 4%;
		margin-bottom:18px;
		padding-bottom:11px;
		text-align:left;
		border-bottom:1px solid #BBB;
	}
	.footer-box1 {
		float:none;
		width:100%;
	}
	.footer-box1 h3 {
		margin:1vw;
		color:#386F3D;
		font-weight:bold;
		font-size:4.266vw;
	}
	.footer-box1 h3 img {
		width:6vw;
		vertical-align:-2vw;
	}
	.footer-box1 h3 span {
		font-size:2.66vw;
	}
	.footer-box1 p {
		margin:1vw;
		padding-left:6vw;
		font-size:2.933vw;
		color:#333;
		line-height:1.4;
	}
	.footer-box2 {
		position:relative;
		z-index:2;
		margin-top:4vw;
		float:left;
		width:100%;
	}
	.footer-box3 {
		margin-top:-10vw;
		float:left;
		width:100%;
		text-align:center;
	}
	.footer-box3 div {
		float:right;
	}
	.footer-box3 div + div {
		width:50vw;
		margin-top:14vw;
		float:left;
	}
	.img-box {
		float:left;
		text-align:center;
	}
	.img-box p {
		margin-top:3px;
		font-size:12px;
	}
	.img-box p a {
		color:#333;
		text-decoration:none;
	}
	.footer-box1 .img-box {
		width:36vw
	}
	.footer-box1 .txt-box {
		padding-left:38vw;
	}
	.footer-box2 .img-box {
		width:50vw;
		margin-right:12px;
	}
	.footer-box2 .text-box {
		width:36vw;
		float:left;
	}
	#footer-inner2 {
		display:inline-block;
		width:auto;
		margin:0 auto;
		padding:0 4% 8vw 0;
		text-align:left;
		color:#333;
		font-size:2.13vw;
		line-height:1.5;
	}
	.col1 {
		color:#3A6E3F;
	}
	.dl1 {
	}
	.dl1 dt {
		float:left;
	}
	.dl1 dd {
		padding-left:4em;
	}
	.dl2 dd {
		padding-left:4em;
	}
	#copyright {
		margin:13px 0 0 0;
		font-size:2.13vw;
		text-align:center;
	}
	
	#pagetop {
		width:12vw;
		position:absolute;
		right:0;
		bottom:7vw;
	}
	
	#fTab {
		display:block;
		position:fixed;
		width:100%;
		left:0;
		right:0;
		bottom:0;
		z-index:3000;
		background:rgba(0,0,0,.9);
		border-top:1px solid #666;
		font-size:2.933vw;
		line-height:1.8;
		text-align:center;
	}
	#fTab ul {
	}
	#fTab ul li {
		float:left;
		width:33.333%;
	}
	#fTab ul li + li {
		border-left:1px solid #666;
	}
	#fTab ul li a {
		display:block;
		padding:0.5em 0 0.4em 0;
		color:#FFF;
		text-decoration:none;
	}
	#fTab ul li i {
		display:block;
		color:#FFF;
		font-size:7.466vw;
	}
	
}
@media screen and (max-width: 767px) and (orientation: landscape) {
	
	#fTab {
		font-size:1.6vw;
	}
	#fTab ul li a {
		color:#FFF;
	}
	#fTab ul li i {
		font-size:4.000vw;
	}
}