@charset "utf-8";

/* section 1 */
.sec1{
	padding:5.5em 0 6.5em 0;
	position:relative;
}

.sec1Desc{
	text-align:center;
	margin:4.5em 0 0 0;
}

.sec1Desc strong{
	color:#3E8A28;
	font-size:28px;
	letter-spacing:0.15em;
}

.sec1Desc p{
	line-height:200%;
	letter-spacing:0.05em;
	margin:2em 0 3em 0;
}

.sec1Desc2Wrap{
	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:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;

	width:1000px;
	margin:0 auto;
}

.sec1d2Box{
	width:48.5%;
	box-sizing:border-box;
	border:2px dashed #3E8A28;
	border-radius:6px;

	padding:2em 0;
}

.sec1d2Box strong{
	display:block;
	color:#3E8A28;
	font-size:21px;
	letter-spacing:0.05em;
	text-align:center;
}

.sec1d2Box p{
	text-align:center;
	margin:1.5em 0;
	
	line-height:168%;
	letter-spacing:0.02em;
}

.sec1d2BoxImage{
	text-align:center;
}

.circleBottom{
    background: url(../../img/bath/bg/circle_bottom.png) no-repeat center center;
    position: absolute;
    z-index: 1;
	bottom:-125px;
	left:0;
    right: 0;
    margin:auto;
    height: 162px;
    width: 733px;
}



/* section 2 */
.sec2{
	padding:5em 0 0 0;
	background:#f2f2f2;
	position:relative;
}

.sec2Desc{
	text-align:center;
	margin:5.5em 0 5em 0;
}

.sec2Desc strong{
	color:#3E8A28;
	font-size:28px;
	letter-spacing:0.1em;
}

.sec2Desc p{
	line-height:200%;
	letter-spacing:0.05em;
	margin:2.5em 0 0 0;
}

.sec2BathTitle{
	width:800px;
	margin:0 auto;

	text-align:center;
	padding:0 0 3em 0;
	position:relative;
}

.sec2BathTitle h3{
	font-size:28px;
	letter-spacing:0.2em;
	line-height:100%;
}

.sec2BathTitle:before{
	content:"";
	width:100%;
	height:1px;
	background:#3E8A28;

	position:absolute;
	bottom:0;
	left:0;
}

.sec2BathTitle:after{
	content:"";
	width:1px;
	height:60px;
	background:#3E8A28;

	position:absolute;
	bottom:-30px;
	left:150px;
}

.sec2BathTitle.right:after{
	left:auto;
	right:150px;
}

.sec2BathList{
	margin:4em 0 5em 0;
}

.sec2BathList.bottom{
	margin:4em 0 0 0;
}

.sec2BathList 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;
}

.sec2BathList ul li{
	width:18%;
	box-sizing:border-box;
}

.sec2BathList dt{
	text-align:center;
	position:relative;
}

.sec2BathList .sec2BathImgWrap{
	display:inline-block;
	position:relative;
	width:100%;
}

.sec2BathList .sec2BathImgWrap img{
	width:100%;
	height:auto;
}

.sec2BathList .sec2BathImgWrap: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;
}

.sec2BathList dd strong{
	display:block;
	font-size:17px;
	font-weight:normal;
	text-align:center;
	margin:1em 0;
	letter-spacing:0.2em;
}

.sec2BathList dd p{
	font-size:15px;
	letter-spacing:0.05em;
	line-height:192%;
	word-break:break-all;
}

.vmore{
    display: inline-block;
    color:#76ab63;
    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);
}

.toCase{
	text-align:center;
	margin:3em 0 0 0;
	padding:0 0 1em 0;
}

.toCase.toWorks{
	margin:8em 0 0 0;
	padding:0;
}

.toCase a br{
	display:none;
}

.toCase .vmore{
	color:#000;
	font-size:17px;
	letter-spacing:0.2em;
	border:1px solid #76ab63;
	padding:12px 55px;
}

.toCase .vmore.long{
	padding:12px 182px;
}

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

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

.circleBottom2{
    background: url(../../img/bath/bg/circle_bottom.png) no-repeat center center;
    position: absolute;
    z-index: 1;
	bottom:-240px;
	left:0;
    right: 0;
    margin:auto;
    height: 162px;
    width: 733px;
}



/* section 3 */
.sec3{
	background:#f2f2f2 url("../../img/bath/bg/sec3_bg.png") no-repeat left center;
	background-size:cover;
	min-height:1040px;
	
	position:relative;
}

.sec3Title{
	text-align:center;
	padding:17em 0 4em 0;
}

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

.sec3List 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;
}

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

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

.sec3List 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;
}

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

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

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

.toBe{
	text-align:right;
}



/* section 4 */
.sec4{
	background:url("../../img/bath/bg/sec4_bg.png") no-repeat left center;
	background-size:cover;
	min-height:768px;
	margin:0 0 6em 0;
}

.sec4Title{
	text-align:center;
	padding:10em 0 4em 0;
}

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

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

.sec4DescInner{
	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:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}

.sec4DescGal{
	width:50%;
	box-sizing:border-box;
}

.galSelect{
	margin:0.5em 0 0 0;

	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:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-around;
}

.galSelect a{
	display:inline-block;
}

.galMain .bx-wrapper{
	margin:0;
}

.sec4DescData{
	width:50%;
	box-sizing:border-box;
	padding:0 0 0 36px;
}

.sec4DescData h3{
	color:#3E8A28;
	font-size:19px;
	font-weight:normal;
	letter-spacing:0.15em;
}

.sec4DescData strong{
	display:block;
	font-size:19px;
	letter-spacing:0.1em;
	margin:1em 0;
}

.sec4DescData p{
	font-size:15px;
	line-height:192%;
}

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

.sec4DataList li{
	margin:0 0 0.5em 0;
}

.sec4DataList li:last-child{
	margin:0;
}

.sec4DataList 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:start;
	    -ms-flex-align:start;
	        align-items:flex-start;
}

.sec4DataList dt{
	color:#3E8A28;
	font-size:15px;
	letter-spacing:0.2em;
	
	width:20%;
	box-sizing:border-box;
}

.sec4DataList dd{
	width:80%;
	box-sizing:border-box;
}

.sec4DataList dd p{
	font-size:15px;
	letter-spacing:0.06em;
	line-height:176%;
}



/*---------------------------------------------------------
 1200 minimum
---------------------------------------------------------*/
@media screen and (max-width: 1200px) {

	/* sec2 */
	.sec2 .wrap{
		max-width:1200px;
		width:96%;
	}

	/* sec3 */
	.sec3 .wrap{
		max-width:1200px;
		width:96%;
	}



}



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

	/* sec1 */
	.sec1Desc p{
		text-align:left;
		width:90%;
		margin:2em auto 0 auto;
	}

	.sec1Desc p br{
		display:none;
	}

	.sec1Desc2Wrap{
		width:auto;
	}

	.sec1d2Box{
		width:80%;
		padding:1em;
		margin:1em auto;
	}

	.circleBottom{
		width:90%;
		bottom:-10vh;
	}



	/* sec2 */
	.sec2Desc{
		padding:0 1em;
		box-sizing:border-box;
	}

	.sec2Desc p{
		text-align:left;
	}

	.sec2Desc p br{
		display:none;
	}

	.sec1d2Box strong{
		font-size:112%;
	}

	.sec2BathTitle{
		width:auto;
	}

	.sec2BathList ul li{
		width:50%;
		padding:1em;
	}

	.toCase .vmore{
		padding:0.8em 8%;
	}

	.toCase .vmore:after{
		bottom:-24%;
	}

	.toCase .vmore:before{
		top:-24%;
	}

	.toCase a br{
		display:block;
	}

	.circleBottom2{
		width:100%;
	}



	/* sec3 */
	.sec3List ul li{
		width:42%;
		margin:1em;
	}

	.toCase.toWorks{
		margin:1em 0;
		padding:0 0 5em 0;
	}

	.toCase.toWorks .vmore:before{
		top:-33%;
	}

	.toCase.toWorks .vmore:after{
		bottom:-33%;
	}

	.toCase .vmore.long{
		padding:0.8em 25%;
	}



	/* sec4 */
	.sec4Desc{
		width:auto;
		padding:0 1em 2em 1em;
	}

	.sec4DescData strong{
		font-size:110%;
	}

	.sec4DescGal{
		width:100%;
	}

	.galSelect a{
		width:24%;
		max-width:24%;
		box-sizing:border-box;
	}

	.sec4DescData{
		width:100%;
		padding:0;
		margin:1em 0 0 0;
	}



}

/*---------------------------------------------------------
 Portrait 
---------------------------------------------------------*/
@media screen and (max-width:479px) {

	/* sec1 */
	.sec1{
		padding:2em 0;
	}

	.sec1Desc{
		padding:0 1em;
	}

	.sec1Desc strong{
		font-size:128%;
	}

	.sec1Desc p{
		width:auto;
		text-align:left;
	}

	.sec1Desc p br{
		display:none;
	}

	.sec1d2Box{
		width:90%;
	}

	.sec1d2Box strong{
		font-size:100%;
	}

	.sec1d2Box p{
		text-align:left;
	}

	.sec1d2Box p br{
		display:none;
	}



	/* sec2 */
	.sec2Desc strong{
		font-size:120%;
	}

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

	.toCase.spirit a br{
		display:block;
	}

	.toCase.spirit .vmore:after{
		bottom:-24%;
	}

	.toCase.spirit .vmore:before{
		top:-24%;
	}

	.sec2BathTitle h3{
		font-size:120%;
	}

	.sec2BathTitle:after{
		left:10%;
	}

	.sec2BathTitle.right:after{
		right:10%;
	}

	.sec2BathList ul li{
		width:100%;
	}

	.sec2BathList dd strong{
		font-size:110%;
	}

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



	/* sec3 */
	.sec3List ul li{
		width:100%;
	}

	.sec3List dt{
		text-align:center;
	}

	.sec3List dd strong{
		font-size:120%;
	}
	
	.sec3List dd p{
		font-size:100%;
	}

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

	.toCase .vmore:before{
		top:-33%;
	}

	.toCase .vmore:after{
		bottom:-33%;
	}


	/* sec4 */
	.sec4DescData h3{
		font-size:136%;
	}

	.sec4DescData strong br{
		display:none;
	}

	.sec4DataList dt,
	.sec4DataList dd{
		width:100%;
	}



}