@charset "utf-8";

/* home default */
.qCircle{
    background: url(../../img/home/bg/qcircle.png) no-repeat bottom right;
    position: absolute;
    z-index: 0;
    bottom: calc(3vh - 1px);
    right: 0;
    height: 810px;
    width: 904px;
    display: block;
}

/* section 1 */
.sec1{
	position:relative;
}

.slideBox{
	position:relative;
}

.slideBox .bLayer{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.3);
}

.slideCtrl{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 95%;
    width: 97%;
}

.slideCtrlBox{
	position:relative;
	width:100%;
	height:100%;
}

.prev{
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    height: 9%;
    margin: auto;
}

.next{
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    height: 9%;
    margin: auto;
}

.bx-prev,
.bx-next{
    display: inline-block;
    color: #333;
    background: rgba(255,255,255,0.5);
    font-size: 40px;
    line-height: 100%;
    padding: 8px 22px;
    border-radius:3px;
}

.bx-wrapper .bx-viewport{
	max-height:100vh;
}

.scroll{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	z-index:2;
}

.scrollInner{
	position:relative;
	text-align:center;
}

.scrollInner:after{
    content: "";
    width: 1px;
    background: #fff;
    display: block;
    padding: 0 0 3em 0;
    margin: 0 auto;
}

.scroll p{
	color:#fff;
	font-size:18px;
}



/* section 2 */
.sec2{
	position:relative;
	padding:155px 0 0 0;
}

.sec2wrap{
	position:relative;
	z-index:1;
}

.sec2Title{
	text-align:center;
}

.sec2D1{
	text-align:center;
	margin:3em 0;
}

.sec2D2{
	background:url("../../img/home/bg/sec2d2.jpg") no-repeat center center;
	background-size:contain;
	height: 0;
	padding-top: calc(600 / 1600 * 100%);
	position:relative;
}

.sec2D2In{
    position: absolute;
    top: 9%;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}

.sec2D2In p{
    color: #fff;
    line-height: 224%;
    letter-spacing:0.1em;
}

.sec2D2In a{
    color: #fff;
    font-size:17px;
    border: 1px solid #fff;
    display: inline-block;
    padding: 0.45em 8em;
    margin: 2.5em 0 0 0;
}

.circle{
	background:url("../../img/home/bg/circle.png") no-repeat top center;
	background-size:contain;
	height: 0;
	padding-top: calc(1124 / 1600 * 100%);

	max-width:1600px;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.circle2{
	background:url("../../img/home/bg/circle2.png") no-repeat top center;
	background-size:contain;
	height: 0;
	padding-top: calc(1112 / 1600 * 100%);

	max-width:1600px;

    position: absolute;
    top: -178px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    z-index:1;
}



/* section 3 */
.sec3{
	background:#f2f2f2;
	padding:227px 0 4em 0;
}

.sec3Wrap{
	position:relative;
	z-index:1;
}

.sec3Title{
	text-align:center;
	margin:0 0 3em 0;
}

.sec3Title h3{
	font-size:28px;
	letter-spacing:0.2em;
}

.sec3Box{
	position:relative;
	padding:0 0 3em 0;
}

.sec3BoxDescWrap{
	width:80%;
	max-width:1200px;
	margin:0 auto;
	position:relative;
}

.sec3BoxDesc{
    position: absolute;
    z-index:1;
    top: 80px;
    bottom: 0;
    margin: auto;
    height: 70%;
    left: 4%;
}

.sec3BoxDesc.top{
	top:182px;
}

.sec3BoxDesc.middle{
	top:480px;
}

.sec3BoxTitle{
	margin:0 0 0 1em;
}

.sec3BoxTitleImage{
	position:relative;
	padding:1em 0;
	margin:1em 0;
}

.sec3BoxTitleImage:after{
	display:block;
	content:"";
	width:300%;
	height:1px;
	background:#000;

	position:absolute;
	bottom:0;
	left:-200%;
}

.sec3Box.left .sec3BoxTitleImage:after{
    left: auto;
    right: 20%;
    width: 115%;
}

.sec3Box.short .sec3BoxTitleImage:after{
    width: 224%;
}

.sec3BoxTitle h2{
	font-size:20px;
	letter-spacing:0.05em;
	line-height:152%;
}

.sec3BoxDesc p{
	margin:67px 0 0 0;
	line-height:200%;
}

.num{
	display:inline-block;
	position:absolute;
	top:-72px;
	left:-40px;
}

.sec3BoxDesc.middle .num{
	left:-70px;
}

.num img{
	padding:0 0 1em 0;
}

.numInner{
	position:relative;
}

.numInner:after{
	content:"";
	width:1px;
	height:84px;
	background:#000;

	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:72px;
}

.numMisc{
    position: absolute;
    right: -40px;
    top: -176px;
}

.sec3Box.left .sec3BoxDesc{
	right:2%;
	left:auto;
}

.sec3BoxImage{
	text-align:right;
}

.sec3Box.left .sec3BoxImage{
	text-align:left;
}

.sec3BoxImageInner{
	position:relative;
	height: 0;
	padding-top: calc(462 / 1048 * 100%);
}

.sec3BoxImageInner.bath{
	background:url("../../img/home/image/sec3_box_bath.png") no-repeat center right;
	background-size:66%;
}

.sec3BoxImageInner.consult{
	background:url("../../img/home/image/sec3_box_consult.png") no-repeat center left;
	background-size:65.5%;
}

.sec3BoxImageInner.cafe{
	background:url("../../img/home/image/sec3_box_cafe.png") no-repeat center right;
	background-size:65.5%;
	padding-top: calc(477 / 1064 * 100%);
}

.sec3BoxImage strong{
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: 0;
    height: 5%;
    margin: auto;
    left: 34%;
    text-align: right;
    width: 32%;
}

.sec3Box.left .sec3BoxImage strong{
	left:0;
	right:44%;
	text-align:left;
}

.sec3BoxImageInner.cafe strong{
	text-align:left;
	left:27%;
}

.sec3Box.left .sec3BoxDesc p {
	margin:60px 0 0 0;
}

.innerPos{
	position:relative;
	left:33%;
}

.sec3BoxDesc a{
	margin:2.5em 0 0 0;
}

.sec3BoxDesc.middle a{
	margin:4.8em 0 0 0;
}

.vmore{
    display: inline-block;
    color:#76ab63;
    font-size:15px;
    line-height: 100%;
    position: relative;
    padding: 0 4em 0 0;
}

.vmore:before{
    content: "";
    height: 1px;
    width: 46px;
    background: #76ab63;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg);
}

.vmore:after{
	content:"";
    height: 1px;
    width: 46px;
    background: #76ab63;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg);
}

.toDetailBox{
	margin:3em 0 0 0
}

.toDetailBox:nth-of-type(2){
	margin:0;
}

.detailName{
	display:block;
	font-size:20px;
	font-weight:bold;
	text-align:left;
	
	margin:0 0 0.5em 0;
	min-width:280px;
}

.toDetailBox a{
	text-align:right;
}

.toDetailBox a.vmore:before{
	top:32px;
}

.toDetailBox a.vmore:after{
	bottom:-6px;
}

/* firefox hack */
@-moz-document url-prefix() {
	.sec3BoxDesc{
	    top: 40px;
	}

	.sec3BoxDesc.top{
		top:100px;
	}

	.sec3BoxDesc.middle{
		top:264px;
	}
}



/* section 4 */
.sec4{
	background:#f2f2f2 url("../../img/home/bg/sec4_bg.png") no-repeat left center;
	background-size:cover;
	min-height:1048px;

	margin:-128px 0 0 0;
}

.sec4Wrap{
	width:90%;
	max-width:1200px;
	margin:0 auto;
	
	position:relative;
	z-index:1;
}

.sec4Title{
	text-align:center;
	padding:19em 0 3em 0;
}

.sec4Title h3{
	font-size:28px;
	letter-spacing:0.2em;
}

.sec4List ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:start;
	    -ms-flex-align:start;
	        align-items:flex-start;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
}

.sec4List ul li{
	width:22.5%;
	box-sizing:border-box;
}

.sec4List dt a{
	display:inline-block;
	position:relative;
}

.sec4List dt a:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 18px 18px;
    border-color: transparent transparent #fff transparent;
    bottom: 0;
    right: 0;
}

.sec4List dd{
	margin:1em 0 0 0;
}

.sec4List dd strong{
	font-size:17px;
	letter-spacing:0.2em;
}

.sec4List dd p{
	font-size:15px;
	letter-spacing:0.2em;
	line-height:200%;
	margin:1em 0;
}

.toBe{
	text-align:right;
}

.toCase{
	text-align:center;
	margin:7.5em 0 0 0;
}

.toCase .vmore{
	color:#000;
	border:1px solid #76ab63;
	padding:0.8em 10em;
	letter-spacing:0.2em
}

.toCase .vmore:before{
	top:-34%;
	bottom:0;
	right:-5%;
	margin:auto;
}

.toCase .vmore:after{
	bottom:-34%;
	top:0;
	right:-5%;
	margin:auto;
}



/* section 5 */
.sec5{
	background:#f2f2f2;
	padding:8em 0 9em 0;
}

.sec5Wrap{
	width:1200px;
	margin:0 auto;
	
	position:relative;
	z-index:1;
}

.contactNav ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}

.contactNav ul li{
	width:40%;
	padding:0 1.35em;
	box-sizing:border-box;
}

.contactNav a{
	display:block;
	color:#fff;
	font-size:17px;
	background:#3e8a28;
	text-align:center;
	padding:0.9em 0.5em;

	position:relative;
}

.contactNav a:after{
	content:"";
	position:absolute;
	top:-10px;
	left:-10px;
	right:0;
	bottom:0;
	margin:0;
	width:100%;
	height:100%;
	border:1px solid #fff;
}

.contactNav a span{
	display:block;
}



/* section 6 */
.sec6{
	padding:7em 0 0 0;
}

.sec6Wrap{
	width:1200px;
	margin:0 auto;
	position:relative;
	z-index:1;
}

.newsWrap{
	width:1000px;
	margin:0 auto;
}

.newsTitleWrap{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:end;
	    -ms-flex-align:end;
	        align-items:flex-end;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}

.newsTitle h3{
	font-size:28px;
	letter-spacing:0.2em;
}

.newsList{
	margin:4em 0 7em 0;
}

.newsList li{
	margin:1em 0;
}

.newsList dl{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
}

.newsList dt{
	color:#999;
	font-size:13px;
	
	width:16%;
	box-sizing:border-box;
}

.newsList dd{
	width:84%;
	box-sizing:border-box;
}

.newsList dd a{
	font-size:14px;
}

.hAccess{
	position:relative;
	z-index:1;
}

.hAccessWrap{
	width:1200px;
	margin:0 auto;
}

.hAccess #map_canvas{
	width:95%;
	height:380px;
	margin:0 auto;
}



/*---------------------------------------------------------
 All SP 
---------------------------------------------------------*/
@media screen and (max-width: 639px) {

	/* default */
	.bx-prev,
	.bx-next{
		font-size:32px;
		padding:8px 19px;
	}

	/* sec1 */
	.slideCtrl{
		width:96vw;
	}



	/* sec2 */
	.sec2{
		padding:80px 0 0 0;
	}
	
	.sec2D2{
		padding:25%;
		background-size:cover;
	}

	.sec2D2In p{
		font-size:75%;
	}

	.sec2D2In a{
		font-size:90%;
		margin:0.5em 0 0 0;
	}



	/* sec3 */
	.sec3{
		padding:5em 0 3em 0;
	}

	.sec3Box{
		padding:0 0 8em 0;
	}

	.sec3Box.left{
		padding:3em 0 8em 0;
	}

	.sec3BoxDesc.top{
		transform-origin:top left;
		transform:scale(0.7);
		top:0;
	}

	.sec3BoxDesc p{
		margin:1em 0 0 0;
		padding:0.5em;
		background:rgba(255,255,255,0.5);

		max-width:90%;
	}

	.sec3BoxDesc a,
	.sec3BoxDesc.middle a{
		margin:1em 0 0 0;
	}

	.sec3BoxDesc{
		transform-origin: top right;
	    transform: scale(0.7);
	    top: 0;
	}

	.sec3BoxDesc p br{
		display:none;
	}

	.innerPos{
		left:10%;
	}

	.sec3Box.left .sec3BoxDesc p{
		margin:1em 0 0 0;
	}

	.toDetailBox{
		margin:1em 0 0 0;
	}

	.sec3BoxDesc.middle{
		transform-origin: top left;
	    transform: scale(0.7);
	    top: 120px;
	}

	.sec3BoxDescWrap{
		width:90%;
	}

	.sec3BoxImageInner.bath,
	.sec3BoxImageInner.consult,
	.sec3BoxImageInner.cafe{
		background-size:50%;
	}

	.numMisc{
		right:0;
		top:-120px;
	}

	.sec3BoxImage strong{
		left:60%;
	}

	.sec3Box.left .sec3BoxImage strong{
		right:60%;
	}

	.sec3BoxImageInner.cafe strong{
		left:40%;
	}



	.circle2{
		display:none;
	}



	/* sec4 */
	.sec4{
		background-image:url("../../img/home/bg/sec4_bg_sp.png");
		background-size:initial
	}

	.sec4Title{
		padding:5em 0 3em 0;
	}

	.sec4Wrap{
		width:auto;
	}

	.sec4List ul li{
		width:43%;
		margin:1em;
	}

	.sec4List dd strong{
		font-size:120%;
	}

	.sec4List dd p{
		font-size:100%;
	}

	.toCase{
		margin:3em 0 0 0;
	}

	.toCase .vmore{
		font-size:100%;
		padding:0.8em 25%;
	}



	/* sec5 */
	.sec5{
		padding:4em 0;
	}

	.sec5Wrap{
		width:auto;
	}

	.contactNav{
		padding:1em;
	}

	.contactNav ul li{
		width:100%;
		margin:1em;
	}



	/* sec6 */
	.sec6{
		padding:3em 0 0 0;
	}

	.sec6Wrap{
		width:auto;
		padding:1em;
	}

	.newsWrap{
		width:auto;
	}

	.newsList{
		margin:3em 0;
	}

	.newsList dt,
	.newsList dd{
		width:90%;
		margin:0 auto;
	}

	.hAccess{
		padding:0 1em;
	}

	.hAccessWrap{
		width:auto;
	}



}

/*---------------------------------------------------------
 Portrait 
---------------------------------------------------------*/
@media screen and (max-width:479px) {
	/* default */
	.bx-prev, .bx-next{
		font-size:24px;
		padding:8px 16px;
	}



	/* sec1 */
	.scrollInner:after{
		padding:0 0 5% 0;
	}



	/* sec2 */
	.sec2{
		padding:0;
	}

	.sec2D2{
		padding:25%;
	}

	.sec2D2In p{
		font-size:70%;
		text-align:left;
		padding:1em;
	}

	.sec2D2In p br{
		display:none;
	}

	.sec2D2In a{
		padding:0.5em 20%;
	}

	.sec2Wrap{
		padding:1em;
	}



	/* sec3 */
	.sec3BoxDesc p{
		width:115vw;
	}

	.sec3Box{
		max-height:25vh;
	}

	.sec3Box.left{
		padding:6em 0 12em 0;
	}

	.sec3Box.left .sec3BoxDesc p{
		margin:3em 0 0 0;
	}

	.sec3Box.left .sec3BoxTitle h2{
		text-align:right;
	}

	.innerPos{
		left:5%;
	}

	.sec3BoxDesc.middle .num{
		left:-50px;
	}

	.numMisc{
		left:15%;
	}



	/* sec4 */
	.sec4Title{
		padding:8em 0 4em 0;
	}

	.sec4List ul li{
		width:100%;
	}
	
	.sec4List dt{
		text-align:center;
	}

	.toCase .vmore{
		font-size:90%;
		line-height:128%;
		padding:0.8em 18%;
	}



	/* sec5 */
	.contactNav ul li{
		padding:0;
	}



}



/*---------------------------------------------------------
 small sp
---------------------------------------------------------*/
@media screen and (max-width:450px) {

	/* sec2 */
	.sec2D2{
		padding:45%;
	}

}