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


@media print, screen and (min-width: 751px) {
.mainImage 				{ background: url('../img/service/main-image.jpg') 50% 50% no-repeat; background-size: cover; }

#service 				{ max-width: 1100px; margin-top: 187px; padding-bottom: 122px; }
#service .box 			{ display: -webkit-box; display: -ms-flexbox; display: flex; }
#service .box:nth-of-type(n+2){ margin-top: 205px; }
#service .box>figure 	{ width: 61.91%; }
#service .box>div 		{ width: 35%; margin-left: auto; position: relative; }
#service .box>div>p 	{ font-size: 3.4rem; position: absolute; top: -86px; left: -103px; color: #f2f2f2; letter-spacing: .4rem; line-height: 1.25; }
#service .box>div>div 	{ padding-right: 65px; }
#service .box>div>div h2{ margin-top: 97px; font-size: 1.6rem; font-weight: 400; letter-spacing: .25rem; }
#service .box>div>div h3{ margin: 51px 0 15px; font-size: 1.1rem; font-weight: 400; letter-spacing: .1rem; line-height: 1.8; color: #0068B7; }
#service .box>div>div p { font-size: .9rem; line-height: 1.65; }
#service .box>div>div p.mt{ margin-top: 20px; }

#other 					{ max-width: 654px; margin-top: 93px; padding-bottom: 122px; }
#other h2 				{ padding-left: 15px; font-size: 1.7rem; font-weight: 400; letter-spacing: .177rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#other h2 span 			{ margin-left: 21px; font-size: .75rem; }
#other>div 				{ margin-top: 66px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#other>div .box 		{ width: 40%; }
#other>div .box:nth-of-type(n+2){ margin: 0 0 0 auto; }
#other>div .box h3 		{ margin-bottom: 15px; padding-bottom: 16px; text-align: center; font-size: 1.1rem; font-weight: 400; letter-spacing: .22rem; color: #0068B7; border-bottom: 1px dashed #999; }
#other>div .box p 		{ font-size: .9rem; line-height: 1.6; }
}


@media screen and (max-width: 1099px) and (min-width: 750px) {
#service .box>div>div 	{ padding-right: 0; }
}


@media screen and (max-width: 750px) {
.mainImage 				{ background: url('../img/service/main-image.jpg') 0 50% no-repeat; background-size: cover; }

#service 				{ width: 100%; max-width: 1100px; margin-top: 150px; padding-bottom: 100px; }
#service .box 			{ position: relative; }
#service .box:nth-of-type(n+2){ margin-top: 160px; }
#service .box>figure 	{ width: 90%; }
#service .box>div 		{ padding: 0 5%; }
#service .box>div>p 	{ font-size: 2.6rem; position: absolute; top: -70px; right: 0; color: #f2f2f2; letter-spacing: .4rem; line-height: 1.25; }
#service .box>div>div 	{  }
#service .box>div>div h2{ margin-top: 50px; font-size: 1.4rem; font-weight: 400; letter-spacing: .2rem; }
#service .box>div>div h3{ margin: 40px 0 15px; font-size: 1.1rem; font-weight: 400; letter-spacing: .1rem; line-height: 1.8; color: #0068B7; }
#service .box>div>div p { font-size: .9rem; line-height: 1.65; }
#service .box>div>div p.mt{ margin-top: 20px; }

#other 					{ margin-top: 90px; padding-bottom: 100px; }
#other h2 				{ font-size: 1.4rem; font-weight: 400; letter-spacing: .2rem; }
#other h2 span 			{ margin-top: 10px; display: block; font-size: .75rem; letter-spacing: .1rem; line-height: 1.5; }
#other>div 				{ margin-top: 60px; }
#other>div .box 		{  }
#other>div .box:nth-of-type(n+2){ margin-top: 60px; }
#other>div .box h3 		{ margin-bottom: 15px; padding-bottom: 16px; text-align: center; font-size: 1.1rem; font-weight: 400; letter-spacing: .22rem; color: #0068B7; border-bottom: 1px dashed #999; }
#other>div .box p 		{ font-size: .9rem; line-height: 1.6; }
}