@charset "UTF-8";

/*================================================
 * 看護部サイト　／　福利厚生用
 ================================================*/



section#benefits_area {
	width: 120rem;
	margin: 0 auto;
}
section#benefits_area [class*="benefits_box"] {
	margin-top: 8rem;
	padding: 10rem 8rem 8rem;
	position: relative;
}
section#benefits_area [class*="benefits_box"] + [class*="benefits_box"] {
	margin-top: 10rem;
}



section#benefits_area [class*="benefits_box"] h2 {
	margin-bottom: 7.5rem;
	position: relative;
	z-index: 5;
}


section#benefits_area [class*="benefits_box"] .inner {
	position: relative;
	z-index: 5;
}
@media screen and (min-width: 800.1px) {
	section#benefits_area [class*="benefits_box"] .inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem 4rem;
	}
}
section#benefits_area [class*="benefits_box"] .inner dl {
	background-color: #fff;
	border: 2px solid var(--color-kango-main);
	padding: 4rem 4.5rem;
}
section#benefits_area [class*="benefits_box"] .inner dl dt {
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-align: center;
	margin: 0 -1em 0.8em;
}

section#benefits_area [class*="benefits_box"] [class*="btn_kango_arrow"] {
	width: 44rem;
	margin: 6rem auto 0;
}



section#benefits_area [class*="benefits_box"] .deco_box {
	position: absolute;
	top: -4rem;
	left: 0;
	width: 100%;
}
section#benefits_area [class*="benefits_box"] .deco_box img {
	position: absolute;
	top: 0;
	border-radius: 6rem;
	isolation: isolate;
	width: 35rem;
	height: auto;
}
section#benefits_area [class*="benefits_box"] .deco_box .deco01 {
	left: -10rem;
}
section#benefits_area [class*="benefits_box"] .deco_box .deco02 {
	right: -10rem;
}














/*================================================================================================
 *  スマートフォン向けデザイン
 ================================================================================================*/
@media screen and (max-width: 800px) {



section#benefits_area {
	width: 93vw;
	padding-bottom: 21vw;
}
section#benefits_area [class*="benefits_box"] {
	margin-top: 12vw;
	padding: 12vw 0 0;
}
section#benefits_area [class*="benefits_box"] + [class*="benefits_box"] {
	margin-top: 37vw;
}



section#benefits_area [class*="benefits_box"] h2 {
	margin-bottom: 10vw;
}
section#benefits_area .benefits_box01 h2 > em {
	letter-spacing: 0.02em;
}

section#benefits_area [class*="benefits_box"] .inner dl {
	padding: 7vw 7vw 9vw;
}
section#benefits_area [class*="benefits_box"] .inner dl + dl {
	margin-top: 5vw;
}
section#benefits_area [class*="benefits_box"] .inner dl dt {
	font-size: 5.6vw;
}

section#benefits_area [class*="benefits_box"] [class*="btn_kango_arrow"] {
	width: 80vw;
	margin-top: 11vw;
	padding-left: 5.5vw;
}


section#benefits_area [class*="benefits_box"] .deco_box {
	position: relative;
	top: auto;
	bottom: -21vw;
	left: auto;
	margin-top: -11vw;
	height: 61vw;
}
section#benefits_area [class*="benefits_box"] .deco_box img {
	border-radius: 8vw;
}
section#benefits_area [class*="benefits_box"]:nth-of-type(even) .deco_box .deco01,
section#benefits_area [class*="benefits_box"]:nth-of-type(odd) .deco_box .deco02 {
	width: 51vw;
}
section#benefits_area [class*="benefits_box"]:nth-of-type(odd) .deco_box .deco01,
section#benefits_area [class*="benefits_box"]:nth-of-type(even) .deco_box .deco02 {
	top: auto;
	bottom: 0;
	width: 40vw;
	z-index: 2;
}
section#benefits_area [class*="benefits_box"] .deco_box .deco01 {
	left: 0;
}
section#benefits_area [class*="benefits_box"] .deco_box .deco02 {
	right: 0;
}










	
}