@charset "utf-8";
/*.design-bg{ width: 1400px; height: 6106px; background: url('../design_img/top.png') 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; }*/


/*ボタン非表示*/
/*#about .linkBtn,#care .linkBtn,#sustainable .linkBtn,#achievement .link{ display: none }*/


#main .mv::after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.1); background-image: radial-gradient(#000 30%, transparent 20%), radial-gradient(#000 30%, transparent 20%); background-size: 3px 3px; background-position: 0 0, 2px 2px; }
#main .mv .textBox { z-index: 100; }
#main .mv .textBox h2 { text-indent: -0.5em; }



@media print, screen and (min-width: 751px) {
#main 					{ margin-top: 20px; }

#main .mv 				{ height: 570px; position: relative; overflow: hidden; }
#main .mv video 		{ position: absolute; width: 100%; height: auto; min-width: 1920px; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: -5; }
#main .mv .textBox{ width: 90%; padding: 0 0; position: absolute; top: 50%; left: 14%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); color: #fff; }
#main .mv .textBox h2 	{ font-size: 2.05rem; line-height: 1.6; text-shadow: -1px -1px 10px rgba(0,0,0,.5),1px 1px 10px rgba(0,0,0,.5); }
#main .mv .textBox p 	{ margin-top: 20px; font-size: .88rem; line-height: 2; text-shadow: -1px -1px 10px rgba(0,0,0,.5),1px 1px 10px rgba(0,0,0,.5); }

#about 					{ margin-top: 200px; max-width: 1000px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative }
#about>div:nth-of-type(1){ width: 44%; }
#about>div:nth-of-type(1) .title{ margin-bottom: 30px; text-align: left; background: url('../img/common/title-icon.svg') 28px 0 no-repeat; }
#about>div:nth-of-type(1) p{ font-size: .92rem; line-height: 2.1; text-align: justify; }
#about>div:nth-of-type(1) .linkBtn{ margin-top: 48px; }
#about>div:nth-of-type(2){ width: 50%; margin-left: auto; position: relative; }
#about>div:nth-of-type(2) .parallax01{ width: 400px; position: absolute; top: -100px; left: 0; z-index: -1; }
#about>div:nth-of-type(2) .parallax02{ width: 270px; position: absolute; top: 420px; right: -90px; z-index: -1; }

#about .block>img 		{ position: absolute; -webkit-transition: .3s; transition: .3s; }
#about .block01 		{ width: 100%; height: 0; position: absolute; top: 0; left: 0; }
#about .block01>img:nth-of-type(1){ top: -90px; right: 0; }
#about .block01>img:nth-of-type(2){ top: -70px; right: -18px; }
#about .block01.show>img:nth-of-type(1){ top: -80px; }
#about .block01.show>img:nth-of-type(2){ top: -80px; }
#about .block02 		{ width: 100%; height: 0; position: absolute; bottom: 0; left: 0; }
#about .block02>img:nth-of-type(1){ bottom: -220px; left: 0; }
#about .block02>img:nth-of-type(2){ bottom: -200px; left: 36px; }
#about .block02.show>img:nth-of-type(1){ bottom: -210px; }
#about .block02.show>img:nth-of-type(2){ bottom: -210px; }

#care 					{ width: 95%; margin-top: 360px; max-width: 1140px; margin-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; }
#care>div:nth-of-type(1){ width: 56.141%; }
#care>div:nth-of-type(2){ width: 38.8%; margin-left: auto; }
#care>div:nth-of-type(2) .title{ margin-bottom: 35px; padding-left: 5px; text-align: left; background: url('../img/common/title-icon.svg') 0 0 no-repeat; }
#care>div:nth-of-type(2) .title span{ padding-left: 8px; }
#care>div:nth-of-type(2) p{ font-size: .94rem; text-align: justify; line-height: 1.9; }
#care>div:nth-of-type(2) ol{ margin: 34px 0 0; padding: 0; list-style: none; }
#care>div:nth-of-type(2) ol li{ border-bottom: 1px solid #ccc; }
#care>div:nth-of-type(2) ol li:first-of-type{ border-top: 1px solid #ccc; }
#care>div:nth-of-type(2) ol li a{ padding: 23px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#care>div:nth-of-type(2) ol li a:hover{ opacity: 1; }
#care>div:nth-of-type(2) ol li a span{ display: block; }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(1){ width: 50px; padding-left: 5px; font-size: 1rem; color: #7cc156; }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2){ width: calc(100% - 50px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: .5s; transition: .5s; }
#care>div:nth-of-type(2) ol li a:hover>div:nth-of-type(2){ -webkit-transform: translateX(20px); transform: translateX(20px); }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(1){ width: 65%; font-size: 1.15rem; font-weight: bold; }

#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(1) span{ display: inline; position: relative; }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(1) span:after{ content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: #7cc156; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: 0.5s; transition: 0.5s; }
#care>div:nth-of-type(2) ol li a:hover>div:nth-of-type(2)>span:nth-of-type(1) span:after{ -webkit-transform: scale(1); transform: scale(1); }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(2){ width: 30%; margin-left: auto; padding-right: 28px; background: url('../img/common/arrow-btn.svg') no-repeat; background-position: top 50% right 17px; background-size: 7px; color: #999; }
#care .linkBtn 			{ margin-top: 50px; }

#care .block>img 		{ position: absolute; -webkit-transition: .3s; transition: .3s; }
#care .block01 			{ width: 14%; height: 0; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#care .block01>img:nth-of-type(1){ bottom: -95px; left: -17px; }
#care .block01>img:nth-of-type(2){ bottom: -115px; left: 0; }
#care .block01.show>img:nth-of-type(1){ bottom: -105px; }
#care .block01.show>img:nth-of-type(2){ bottom: -105px; }

#sustainable 			{ margin-top: 220px; height: 570px; background: url('../img/top/sustainable-bg.jpg') 50% 50% no-repeat; background-size: cover; }
#sustainable .master 	{ height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#sustainable .master .box{ padding-bottom: 27px; text-align: center; color: #fff; }
#sustainable .master .box .title{ margin-bottom: 35px; }
#sustainable .master .box p{ font-size: .97rem; line-height: 1.9; }
#sustainable .master .box .linkBtn{ margin-top: 50px; }
#sustainable .parallax03{ width: 378px; position: absolute; top: -100px; right: -190px; z-index: 2; }
#sustainable .parallax04{ width: 270px; position: absolute; top: 418px; left: -155px; z-index: 2; }

#achievement 			{ margin-top: 198px; position: relative; }
#achievement .master 	{ text-align: center; }
#achievement .master p 	{ margin-top: 33px; font-size: .97rem; line-height: 1.8; }
#achievement .box 		{ margin-top: 54px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#achievement .box>a 	{ width: calc(100% / 3); height: 467px; display: block; position: relative; overflow: hidden; }
#achievement .box>a:nth-of-type(1){ background: url('../img/top/achievement01.jpg') 50% 50% no-repeat; background-size: cover; }
#achievement .box>a:nth-of-type(2){ background: url('../img/top/achievement02.jpg') 50% 50% no-repeat; background-size: cover; }
#achievement .box>a:nth-of-type(3){ background: url('../img/top/achievement03.jpg') 50% 50% no-repeat; background-size: cover; }
#achievement .box>a:hover{ opacity: 1; }

#achievement .box>a .mask { width: 100%; padding: 40px; position: absolute; bottom: -30px; left: 0; opacity: 0; background-color: rgba(0,0,0,0.5);-webkit-transition: .5s; transition: .5s; color: #fff; }
#achievement .box>a:hover .mask { opacity: 1; bottom: 0; }
#achievement .box>a .mask h3{ margin-bottom: 15px; font-size: 1.2rem; line-height: 1.5; }
#achievement .box>a .mask p{ font-size: .93rem; line-height: 1.9; text-align: justify; }
#achievement .box>a .mask div{ margin-top: 33px; padding-left: 20px; background: url('../img/common/arrow-btn.svg') 0 50% no-repeat; }
#achievement .link 		{ margin-top: 40px; text-align: center; }

#achievement .block>img { position: absolute; -webkit-transition: .3s; transition: .3s; }
#achievement .block01 	{ width: 66.5%; height: 0; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#achievement .block01>img:nth-of-type(1){ top: -20px; right: 0; }
#achievement .block01>img:nth-of-type(2){ top: -40px; right: -17px; }
#achievement .block01.show>img:nth-of-type(1){ top: -30px; }
#achievement .block01.show>img:nth-of-type(2){ top: -30px; }
#achievement .block02 	{ width: 55%; height: 0; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#achievement .block02>img:nth-of-type(1){ bottom: -105px; left: 0; }
#achievement .block02>img:nth-of-type(2){ bottom: -125px; left: 35px; }
#achievement .block02.show>img:nth-of-type(1){ bottom: -115px; }
#achievement .block02.show>img:nth-of-type(2){ bottom: -115px; }

#showRoom 				{ margin-top: 220px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#showRoom>div:nth-of-type(1){ width: calc(100% - 700px); padding-bottom: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #f9f7f3; }
#showRoom>div:nth-of-type(1)>div{ width: 90%; padding-right: 8.5%; max-width: 500px; margin-left: auto; }
#showRoom>div:nth-of-type(1)>div .title{ margin-bottom: 35px; text-align: left; background: url('../img/common/title-icon.svg') 28px 0 no-repeat; }
#showRoom>div:nth-of-type(1)>div p{ font-size: .95rem; text-align: justify; line-height: 1.9; }
#showRoom>div:nth-of-type(1)>div .linkBtn{ margin-top: 55px; }
#showRoom>div:nth-of-type(2){ width: 700px; }
}


@media screen and (max-width: 1400px) and (min-width: 750px) {
#showRoom>div:nth-of-type(1){ width: 50%; }
#showRoom>div:nth-of-type(2){ width: 50%; }
}


@media screen and (max-width: 750px) {
#main 					{ margin-top: 0; }

#main .mv 				{ height: 570px; position: relative; overflow: hidden; }
#main .mv video 		{ position: absolute; width: 100%; height: auto; min-width: 1300px; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: -5; }
#main .mv .textBox{ width: 90%; padding: 0 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: #fff; }
#main .mv .textBox h2 	{ font-size: 1.4rem; line-height: 1.6; text-shadow: -1px -1px 10px rgba(0,0,0,.5),1px 1px 10px rgba(0,0,0,.5); }
#main .mv .textBox p 	{ margin-top: 20px; font-size: .8rem; line-height: 2; text-shadow: -1px -1px 10px rgba(0,0,0,.5),1px 1px 10px rgba(0,0,0,.5); }

#about 					{ margin-top: 100px; max-width: 1000px; position: relative; }
#about>div:nth-of-type(1){  }
#about>div:nth-of-type(1) .title{ margin-bottom: 30px; }
#about>div:nth-of-type(1) p{ font-size: .85rem; line-height: 1.8; text-align: justify; }
#about .link 			{ text-align: center; }
#about .linkBtn 		{ margin-top: 90px; }
#about>div:nth-of-type(2){ margin-top: 50px; position: relative; }
#about>div:nth-of-type(2) .parallax01{ width: 70%; position: static; }
#about>div:nth-of-type(2) .parallax02{ width: 50%; position: absolute; bottom: -50px; right: 0; z-index: 2; }

#about .block>img 		{ position: absolute; -webkit-transition: .3s; transition: .3s; }
#about .block01 		{ width: 100%; height: 0; position: absolute; top: 280px; left: 0; }
#about .block01>img:nth-of-type(1){ width: 18px; top: -30px; right: 30px; }
#about .block01>img:nth-of-type(2){ width: 9px; top: -20px; right: 21px; }
#about .block01.show>img:nth-of-type(1){ top: -25px; }
#about .block01.show>img:nth-of-type(2){ top: -25px; }
#about .block02 		{ width: 100%; height: 0; position: absolute; bottom: -50px; left: 0; }
#about .block02>img:nth-of-type(1){ width: 18px; bottom: -30px; left: 30px; }
#about .block02>img:nth-of-type(2){ width: 9px; bottom: -20px; left: 48px; }
#about .block02.show>img:nth-of-type(1){ bottom: -25px; }
#about .block02.show>img:nth-of-type(2){ bottom: -25px; }

#care 					{ width: 90%; margin: 100px auto 0; max-width: 1140px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; }
#care>div:nth-of-type(1){ margin-top: 40px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
#care>div:nth-of-type(2){ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
#care>div:nth-of-type(2) .title{ margin-bottom: 30px; }
#care>div:nth-of-type(2) .title span{ padding-left: 8px; }
#care>div:nth-of-type(2) p{ font-size: .85rem; text-align: justify; line-height: 1.8; }
#care>div:nth-of-type(2) ol{ margin: 30px 0 0; padding: 0; list-style: none; }
#care>div:nth-of-type(2) ol li{ border-bottom: 1px solid #ccc; }
#care>div:nth-of-type(2) ol li:first-of-type{ border-top: 1px solid #ccc; }
#care>div:nth-of-type(2) ol li a{ padding: 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
/*#care>div:nth-of-type(2) ol li a:hover{ opacity: 1; }*/
#care>div:nth-of-type(2) ol li a span{ display: block; }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(1){ width: 35px; padding-left: 5px; font-size: .95rem; color: #7cc156; }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2){ width: calc(100% - 35px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: .5s; transition: .5s; }
/*#care>div:nth-of-type(2) ol li a:hover>div:nth-of-type(2){ -webkit-transform: translateX(20px); transform: translateX(20px); }*/
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(1){ width: 60%; font-size: .95rem; font-weight: bold; }

#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(1) span{ display: inline; position: relative; }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(1) span:after{ content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: #7cc156; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: 0.5s; transition: 0.5s; }
#care>div:nth-of-type(2) ol li a:hover>div:nth-of-type(2)>span:nth-of-type(1) span:after{ -webkit-transform: scale(1); transform: scale(1); }
#care>div:nth-of-type(2) ol li a>div:nth-of-type(2)>span:nth-of-type(2){ width: 35%; margin-left: auto; padding-right: 28px; background: url('../img/common/arrow-btn.svg') no-repeat; background-position: top 50% right 10px; background-size: 7px; font-size: .85rem; color: #999; }
#care .link 			{ text-align: center; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
#care .linkBtn 			{ margin-top: 40px; }

#care .block>img 		{ position: absolute; -webkit-transition: .3s; transition: .3s; }
#care .block01 			{ width: 100%; height: 0; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#care .block01>img:nth-of-type(1){ width: 9px; bottom: -50px; left: 30px; }
#care .block01>img:nth-of-type(2){ width: 9px; bottom: -60px; left: 38px; }
#care .block01.show>img:nth-of-type(1){ bottom: -55px; }
#care .block01.show>img:nth-of-type(2){ bottom: -55px; }

#sustainable 			{ margin-top: 150px; height: 570px; background: url('../img/top/sustainable-bg.jpg') 50% 50% no-repeat; background-size: cover; }
#sustainable .master 	{ height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#sustainable .master .box{ padding-top: 20px; text-align: center; color: #fff; }
#sustainable .master .box .title{ margin-bottom: 35px; }
#sustainable .master .box p{ font-size: .85rem; line-height: 1.8; text-align: justify;}
#sustainable .master .box .linkBtn{ margin-top: 40px; }
#sustainable .parallax03{ width: 189px; position: absolute; top: -50px; right: -5px; z-index: 2; }
#sustainable .parallax04{ width: 135px; position: absolute; bottom: -50px; left: -5px; z-index: 2; }

#achievement 			{ margin-top: 100px; position: relative; }
#achievement .master 	{ text-align: center; }
#achievement .master p 	{ margin-top: 30px; font-size: .85rem; line-height: 1.8; text-align: justify; }
#achievement .box 		{ margin-top: 30px; }
#achievement .box>a 	{ height: 350px; display: block; position: relative; overflow: hidden; }
#achievement .box>a:nth-of-type(1){ background: url('../img/top/achievement01.jpg') 50% 50% no-repeat; background-size: cover; }
#achievement .box>a:nth-of-type(2){ background: url('../img/top/achievement02.jpg') 50% 50% no-repeat; background-size: cover; }
#achievement .box>a:nth-of-type(3){ background: url('../img/top/achievement03.jpg') 50% 50% no-repeat; background-size: cover; }
#achievement .box>a:hover{ opacity: 1; }

#achievement .box>a .mask { width: 100%; padding: 25px; position: absolute; bottom: 0; left: 0; opacity: 1; background-color: rgba(0,0,0,0.5);-webkit-transition: .5s; transition: .5s; color: #fff; }
/*#achievement .box>a:hover .mask { opacity: 1; bottom: 0; }*/
#achievement .box>a .mask h3{ margin-bottom: 15px; font-size: 1.1rem; line-height: 1.5; }
#achievement .box>a .mask p{ font-size: .85rem; line-height: 1.8; text-align: justify; }
#achievement .box>a .mask div{ margin-top: 25px; padding-left: 20px; background: url('../img/common/arrow-btn.svg') 0 50% no-repeat; }
#achievement .link 		{ text-align: center; }
#achievement .linkBtn 	{ margin-top: 40px; }

#achievement .block>img { position: absolute; -webkit-transition: .3s; transition: .3s; }
#achievement .block01 	{ width: 100%; height: 0; position: absolute; top: -30px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#achievement .block01>img:nth-of-type(1){ width: 18px; top: 0; right: 38px; }
#achievement .block01>img:nth-of-type(2){ width: 9px; top: -10px; right: 30px; }
#achievement .block01.show>img:nth-of-type(1){ top: -5px; }
#achievement .block01.show>img:nth-of-type(2){ top: -5px; }
#achievement .block02 	{ width: 100%; height: 0; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#achievement .block02>img:nth-of-type(1){ width: 18px; bottom: -50px; left: 40px; }
#achievement .block02>img:nth-of-type(2){ width: 9px; bottom: -60px; left: 58px; }
#achievement .block02.show>img:nth-of-type(1){ bottom: -55px; }
#achievement .block02.show>img:nth-of-type(2){ bottom: -55px; }

#showRoom 				{ margin-top: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#showRoom>div:nth-of-type(1){ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #f9f7f3; }
#showRoom>div:nth-of-type(1)>div{ padding: 50px 5%; }
#showRoom>div:nth-of-type(1)>div .title{ margin-bottom: 30px; }
#showRoom>div:nth-of-type(1)>div p{ font-size: .85rem; text-align: justify; line-height: 1.8; }
#showRoom>div:nth-of-type(2){  }
#showRoom .linkBtn 		{ margin-top: 40px; }
#showRoom .link 		{ text-align: center; }
}