@charset "utf-8";
/*.design-bg{ width: 1400px; height: 10618px; background: url('../design_img/sustainable.jpg') 0 0 no-repeat; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: -1; opacity: .5; background-size: 1400px; }*/


@media print, screen and (min-width: 751px) {
#main 					{ margin-top: 60px; }
.mainImage 				{ height: 340px; padding-top: 80px; background: url('../img/sustainable/main-image.jpg') 50% 50% no-repeat; background-size: cover; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.mainImage h2 			{ margin-bottom: 30px; font-size: 1.65rem; color: #7cc156; line-height: 1.5; }
.mainImage .textB 		{ margin-bottom: 30px; }
.mainImage .text 		{ font-size: .9rem; font-weight: normal; line-height: 2.4; }
.mainImage .text.mt 	{ margin-top: 40px; }

#ourMission 			{ max-width: 1400px; margin-top: 175px; position: relative; }
#ourMission .wrp 		{ width: 1400px; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: -5; }
#ourMission .wrp:before { content: ''; width: 750px; height: 750px; position: absolute; top: 665px; left: -380px; background-color: #f0eae0; border-radius: 750px; }
#ourMission .wrp:after { content: ''; width: 1000px; height: 1000px; position: absolute; top: 115px; right: -500px; background-color: #e2f2d9; border-radius: 1000px; }
#ourMission h2 			{ font-size: 1.8rem; text-align: center; line-height: 1.3; }
#ourMission h2 span 	{ margin-bottom: 6px; display: block; font-size: 1.3rem; color: #7cc156; }
#ourMission .box p 		{ font-size: 1.2rem; line-height: 2.2; }

#ourMission .box01 		{ margin-top: 74px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#ourMission .box01>div:nth-of-type(1){ width: 47.858%; position: relative; }
#ourMission .box01>div:nth-of-type(1) .parallax05{ position: absolute; top: -90px; left: 0; z-index: -1; }
#ourMission .box01>div:nth-of-type(2){ width: 48%; margin-top: 80px; margin-left: auto; position: relative; }
#ourMission .box01>div:nth-of-type(2) img{ position: absolute; bottom: -115px; right: 200px; }

#ourMission .box02 		{ margin-top: 160px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#ourMission .box02>div:nth-of-type(1){ width: 16.429%; margin-left: auto; position: relative; }
/*#ourMission .box02>div:nth-of-type(1) .parallax05{ position: absolute; top: -140px; left: 0; z-index: -2; }*/
#ourMission .box02>div:nth-of-type(1) .parallax06{ position: absolute; top: 50px; left: 15px; z-index: -1; }
#ourMission .box02>div:nth-of-type(2){ width: 73%; margin-top: 80px; margin-left: auto; position: relative; }
#ourMission .box02>div:nth-of-type(2) .parallax07{ width: 49.218%; position: absolute; top: -130px; right: 106px; }

#ourMission .box03 		{ margin-top: 240px; position: relative; }
#ourMission .box03 .parallax08{ width: 35.929%; position: absolute; top: -170px; right: 377px; z-index: -2; }
#ourMission .box03 .parallax09{ width: 26.929%; position: absolute; top: 390px; right: 60px; z-index: -1; }
#ourMission .box03 .illust03{ position: absolute; top: -99px; left: 275px; z-index: -3; }
#ourMission .box03 .illust04{ position: absolute; top: -4px; right: 176px; z-index: -3; }

#ourMission .box04 		{ margin-top: 565px; text-align: center; }
#ourMission .box04 div 	{ margin-top: -75px; position: relative; z-index: -3; }

#ourMission .box05 		{ margin-top: 0; position: relative; }
#ourMission .box05 .parallax10{ width: 26.929%; position: absolute; top: -850px; left: 140px; z-index: -2; }
#ourMission .box05 .parallax11{ width: 20.215%; position: absolute; top: -160px; left: 60px; z-index: -1; }

.lineTitle 				{ font-size: 1.6rem; text-align: center }
.lineTitle span 		{ position: relative; display: inline-block; }
.lineTitle span:after 	{ content: ''; width: 100%; height: 4px; background-color: #cb8e71; position: absolute; bottom: -15px; left: 0; }
#movie 					{ margin-top: -5px; padding: 120px 0; background-color: #f9f7f3; }
.movie 					{ max-width: 998px; padding: 56px 55px; background-color: #fff; }
.movie>div 				{ margin-top: 30px; /*position: relative; width: 100%; padding-top: 51%;*/ }
.movie>div video 		{ top:0; width: 100%; height: 100%; background: #000; }
}


@media screen and (max-width: 1400px) and (min-width: 750px) {
}


@media screen and (max-width: 750px) {
#main 					{ margin-top: 30px; }
.mainImage 				{ height: auto; padding: 50px 0; background: url('../img/sustainable/main-image.jpg') 50% 50% no-repeat; background-size: cover; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.mainImage h2 			{ margin-bottom: 20px; font-size: 1.25rem; color: #7cc156; line-height: 1.5; }
.mainImage .textB 		{ font-size: .9rem; margin-bottom: 20px; }
.mainImage .text 		{ font-size: .8rem; font-weight: normal; line-height: 2; }

#ourMission 			{ width: 100%; max-width: 1400px; margin-top: 85px; position: relative; }
#ourMission .wrp 		{ width: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: -5; }
#ourMission .wrp:before { content: ''; width: 375px; height: 375px; position: absolute; top: 660px; left: -280px; background-color: #f0eae0; border-radius: 750px; }
#ourMission .wrp:after { content: ''; width: 500px; height: 500px; position: absolute; top: 350px; right: -300px; background-color: #e2f2d9; border-radius: 1000px; }
#ourMission h2 			{ font-size: 1.1rem; text-align: center; line-height: 1.3; }
#ourMission h2 span 	{ margin-bottom: 6px; display: block; font-size: 1rem; color: #7cc156; }
#ourMission .box p 		{ font-size: .85rem; line-height: 1.7; }

#ourMission .box01 		{ margin-top: 30px; }
#ourMission .box01>div:nth-of-type(1){ width: 90%; position: relative; }
#ourMission .box01>div:nth-of-type(2){ width: 100%; margin-top: -40px; margin-left: auto; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#ourMission .box01>div:nth-of-type(2) img{  }
#ourMission .box01>div:nth-of-type(2) img.sp{  }
#ourMission .box01>div:nth-of-type(2) p{ width: 55%; margin-left: auto; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
#ourMission .box01>div:nth-of-type(2) img{ width: 35%; margin-left: 5%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
#ourMission .box01>div:nth-of-type(2) .illust{ width: 93px; position: absolute; bottom: -120px; right: 20px; }

#ourMission .box02 		{ margin-top: 50px; }
#ourMission .box02>div:nth-of-type(2){  }
#ourMission .box02>div:nth-of-type(2) p{ margin-left: 5%; }
#ourMission .box02>div:nth-of-type(2) .parallax07{ width: 70%; margin: 50px 0 0 auto; display: block; }

#ourMission .box03 		{ margin-top: 70px; position: relative; }
#ourMission .box03 .parallax08{ width: 70%; margin-left: -18px; }
#ourMission .box03 .parallax09{ width: 50%; margin: -40px -20px 0 auto; display: block; }
#ourMission .box03 .illust03{ width: 73px; position: absolute; top: -75px; left: 10px; }
#ourMission .box03 .illust04{ width: 76px; position: absolute; top: 0px; right: 20px; }

#ourMission .box04 		{ margin-top: -30px; padding: 0 3%; text-align: center; }
#ourMission .box04 div 	{  }

#ourMission .box05 		{ margin-top: 0; position: relative; }
#ourMission .box05 .parallax10{ width: 50%; margin-left: 80px; }
#ourMission .box05 .parallax11{ width: 35%; margin: -20px 0 0 40px; }

.lineTitle 				{ font-size: 1.2rem; text-align: center }
.lineTitle span 		{ position: relative; display: inline-block; }
.lineTitle span:after 	{ content: ''; width: 100%; height: 2px; background-color: #cb8e71; position: absolute; bottom: -10px; left: 0; }

#movie 					{ margin-top: -5px; padding: 55px 0; background-color: #f9f7f3; }
.movie 					{ max-width: 998px; padding: 30px 15px; background-color: #fff; }
.movie>div 				{ margin-top: 30px; /*position: relative; width: 100%; padding-top: 51%;*/ }
.movie>div video 		{ top:0; width: 100%; height: 100%; background: #000; }

#reservationContact 	{ margin-top: 0; }
}