@charset "utf-8";
.mainimgbox h2 {font-size: var(--font-size-60-100);}

/* メッセージ */
.messagebox h3 {font-size: var(--font-size-40-80);}
.messagebox_txt p {font-size: var(--font-size-16-18);}
.messagebox_post {font-size: var(--font-size-16-20);}
.messagebox_name {font-size: var(--font-size-20-48);}

/* 募集 */
.recruit_title h3 span {font-size: var(--font-size-32-72);}
.recruitbox1box h4 {font-size: var(--font-size-20-60);}
.recruitbox1box h4 span {font-size: var(--font-size-18-24);}
.recruitbox1_title2 {font-size: var(--font-size-16-24);}
.recruitbox1_link a {font-size: var(--font-size-13-14);}

.recruitbox2box h4 {font-size: var(--font-size-20-64);}
.recruitbox2_title2 {font-size: var(--font-size-16-24);}
.recruitbox2_link a {font-size: var(--font-size-13-14);}

.recruitbox3_title h4 {font-size: var(--font-size-20-50);}
.recruitbox3_title h4 span{font-size: var(--font-size-20-50);}
.recruitbox3_title2 {font-size: var(--font-size-16-22);}
.recruitbox3_link a {font-size: var(--font-size-13-14);}

.recruitbox4_title {font-size: var(--font-size-20-64);}
.recruitbox4box h4 {font-size: var(--font-size-16-24);}
.recruitbox4_title3 {font-size: var(--font-size-16-22);}
.recruitbox4_link a {font-size: var(--font-size-13-14);}

.recruitbox5box h4 {font-size: var(--font-size-20-48);}
.recruitbox5box h4 span {font-size: var(--font-size-20-40);}
.recruitbox5_title2 {font-size: var(--font-size-16-24);}
.recruitbox5_link a {font-size: var(--font-size-13-14);}

/* 救命救急センター紹介 */
.centerinfobox p {font-size: 1rem;}
.centerinfobox_dmat_txt h4 {font-size: var(--font-size-20-60);}
.centerinfobox_drcar_txt h4 {font-size: var(--font-size-20-48);}
.centerinfobox_active_txt h4 {font-size: var(--font-size-20-50);}
/* Information */
#information h3 {font-size: var(--font-size-24-80);}
#information h3 span {font-size: var(--font-size-18-24);}
.informationbox dl dt {font-size: var(--font-size-15-16);}
.informationbox dl dd {font-size: var(--font-size-15-16);}
.btn_right a {font-size: var(--font-size-16-18);}

@media screen and (max-width: 1440px) {
.recruit_title h3 span {font-size: var(--font-size-20-50);}
.mainimgbox h2 {font-size: var(--font-size-40-80);}
.messagebox h3 {font-size: var(--font-size-20-60);}
.recruitbox3_title h4 {font-size: var(--font-size-20-48);}
.recruitbox3_title h4 span{font-size: var(--font-size-20-48);}
.recruitbox1_title2 {font-size: var(--font-size-16-20);}
.recruitbox2_title2 {font-size: var(--font-size-16-20);}
.recruitbox3_title2 {font-size: var(--font-size-16-20);}
.recruitbox4_title3 {font-size: var(--font-size-16-20);}
.recruitbox5_title2 {font-size: var(--font-size-16-20);}
.recruitbox1box h4 {font-size: var(--font-size-20-50);}
.recruitbox2box h4 {font-size: var(--font-size-20-50);}
.recruitbox3box h4 {font-size: var(--font-size-20-40);}
.recruitbox3box h4 span {font-size: var(--font-size-20-40);}
.recruitbox4box h4 {font-size: var(--font-size-16-22);}
.recruitbox5box h4 {font-size: var(--font-size-20-40);}
.recruitbox5box h4 span {font-size: var(--font-size-24-36);}
.centerinfobox_dmat_txt h4 {font-size: var(--font-size-24-30);}
.centerinfobox_drcar_txt h4 {font-size: var(--font-size-24-30);}
}

@media screen and (max-width: 1180px) {
.recruitbox5box h4 span {font-size: var(--font-size-24-30);}
.recruitbox5_title2 {font-size: var(--font-size-16-18);}
}

@media screen and (max-width: 767px) {
	/* 募集 */
	.recruitbox1box h4 {font-size: 2rem;}
	.recruitbox2box h4 {font-size: 2rem;}
	.recruitbox3box h4 {font-size: 2rem;}
	.recruitbox3box h4 span {font-size: 2rem;}
	.recruitbox4box h4 {font-size: 1rem;}
	.recruitbox4_title {font-size: 3rem;}
	.recruitbox5box h4 {font-size: 2rem;}
	a.recruitbox1_link span.bt_more,
	a.recruitbox2_link span.bt_more,
	a.recruitbox3_link span.bt_more,
	a.recruitbox4_link span.bt_more,
	a.recruitbox5_link span.bt_more{
	font-size: 13px;
	}
}

/* ---------------------------------------------

ヘッダー

--------------------------------------------- */
#contents {
width: 100%;
}

#h_logo h1 {
text-shadow: 1px 1px 1px var(--text-color);
}

.scroll {
width: 20%;
max-width: 150px;
height: 80px;
display: inline-block;
aspect-ratio: 1 / 2;
position: absolute;
left:0;
right: 0;
bottom: 5rem;
margin: auto;
z-index: 20;
}

.scroll:hover {
transition: 0.6s;
transform: translateY(5px);
}
 
.scroll img {
width: 100%;
height: auto;
}

.scroll img:hover {
opacity: 0.75;
transition: 0.3s;
}

#message .scroll {
width: 16%;
max-width: 130px;
bottom: 1rem;
}

#recruit .scroll {
width: 16%;
max-width: 130px;
bottom: 1rem;
}

/* スクロール動作 */
.pikopiko {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pikopiko.is-show {
  opacity: 1;
  transform: translateY(0);
  animation: pikopiko 1.2s ease-in-out infinite;
}

@keyframes pikopiko {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}


/* フェードイン */

/*左から右*/
.fadein-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein-left.is-show {
  opacity: 1;
  transform: translateX(0);
}

/*右から左*/
.fadein-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 1s; /* ← ここで遅延 */
}

.fadein-right.is-show {
  opacity: 1;
  transform: translateX(0);
}

/*下から上*/
.fadein-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

/*上から下*/
.fadein-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein-down.is-show {
  opacity: 1;
  transform: translateY(0);
}


@media screen and (max-width: 1360px) {
	#message .scroll {
	max-width: 100px;
	}
}

@media screen and (max-width: 1024px) {
	.scroll {
	width: 16%;
	max-width: 130px;
	bottom: 1rem;
	}
	#message .scroll {
	max-width: 80px;
	bottom: 0;
	}
}


@media screen and (max-width: 850px) {
	.scroll {
	width: 120px;
	max-width: 120px;
	bottom: 2rem;
	}
}

@media screen and (max-width: 767px) {
	/* スクロール */
	.scroll {
	width: 80px;
	max-width: 80px;
	height: auto;
	aspect-ratio: inherit;
	}
}


/* ---------------------------------------------

メインイメージ

--------------------------------------------- */

#mainimg {
width: 100%;
height: 100vh;
margin: 0 auto ;
background: var(--background-color-gradation);
overflow: hidden;
}

.slider {
width: 100%;
overflow: hidden; /* 画像がはみ出ないようにする */
}

.slick-list,
.slick-track {
width: 100%;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

.mainimgbox {
width: calc(100% - 24px);
height: calc(100vh - 24px);
position: absolute;
top:0;
left:0;
margin: 12px;
background: var(--background-color-white);
}

.mainimgbox_img {
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
overflow: hidden;
}

.mainimgbox_img img {
height:100vh;
margin: auto;
object-fit: cover;
object-position: center center;
}

.mainimgbox_img1 {
width: 100%;
height: 100%;
position: relative;
}

.mainimgbox_txt {
position: relative;
top: 52%;
left:0;
right:0;
margin: auto;
z-index: 2;
transform: translateY(-50%)
}

.mainimgbox h2 {
display: inline-block;
font-weight: 700;
color: var(--text-color-white);
line-height: 1.4;
letter-spacing: 0.1em;
text-align: left;
text-shadow: 3px 3px 3px var(--text-color);
}

.mainimgbox h2 span {display: block;}
.mainimgbox h2 span.h2_left {}
.mainimgbox h2 span.h2_right {text-indent: 1em;}


@media screen and (max-width: 1023px) {
#h_logo {
left: 5%;
height:40%;
}

	#mainimg {
	height: 100vh;
	height:100lvh;
	}
	.mainimgbox {
	height: calc(100dvh - 24px);
	}
	.mainimgbox_txt {
	top: 50%;
	}
	.mainimgbox_img .img1 img {
	object-position: 60% center;
	}
	.mainimgbox_img .img2 img {
	object-position: 70% center;
	}
}

@media screen and (max-width: 850px) {
	#mainimg {
	height: 100dvh;
	}
	.mainimgbox h2 {
	writing-mode: vertical-rl;
	}
}

/* ---------------------------------------------

メッセージ

--------------------------------------------- */

#message {
width: 100%;
max-height: 100vh;
aspect-ratio: 5 / 4;
margin: 0 auto ;
position: relative;
}

#message:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
background-image: url("../images/top_message.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

.messagebox {
width: 740px;
max-width: 50%;
text-align: left;
position: absolute;
top: 10%;
left: 10%;
}

.messagebox_txt {
position: relative;
text-align: left;
}

.messagebox_dr {
position: relative;
text-align: left;
}

.messagebox h3 {
font-weight: 700;
line-height: 1.3;
margin-bottom: 0.5em;
text-shadow: 2px 2px 8px var(--text-color-white);
}

.messagebox h3 span {
display: block;
}

.messagebox p {
text-shadow: 2px 2px 8px var(--text-color-white);
}

.messagebox_post {
font-weight: 600;
text-align: left;
line-height: 1.4;
letter-spacing: 0.2em;
padding-top: 2rem;
margin-right: 1rem;
text-shadow: 2px 2px 8px var(--text-color-white);
}

.messagebox_name {
text-align: left;
margin-right: 1rem;
text-shadow: 2px 2px 8px var(--text-color-white);
}

@media screen and (max-width: 1360px) {
	.messagebox_post {
	padding-top: 3rem;
	}
}

@media screen and (max-width: 1023px) {
	#message {
	height: 100vh;
	}
	#message:before {
	background-position: 70% top;
	}
	.messagebox_post {
	padding-top: 1rem;
	}
}

@media screen and (max-width: 850px) {
	#message {
	height: 100dvh;
	}
	.messagebox {
	width: 56%;
	max-width: 56%;
	left: 6%;
	padding: 1rem;
	background-color: rgb(255,255,255,0.3);
	}
}

/* ---------------------------------------------

募集

--------------------------------------------- */

#recruit {
object-fit: cover;     /* 中の要素（画像など）が歪まないように調整 */
width: 100%;
height: 100vh;
aspect-ratio: 5 / 4;
margin: 0 auto ;
position: relative;
overflow: hidden;
}

.recruit_title {
width: min(20%,200px);
aspect-ratio: 1 / 1;
display: block;
position: absolute;
top:0;
left:0;
z-index: 2;
background-color: var(--background-color-purple);
}

.recruit_title h3 {
position: relative;
width: 100%;
height: 100%;
}

.recruit_title h3 span {
color: var(--text-color-white);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
margin-left: 0.1em;
position: absolute;
top: 50%;
left:0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
}

.recruitbox {
width: 90%;           /* 横幅は常にブラウザいっぱいに */
aspect-ratio: 16 / 9;  /* ここで比率を指定（例：16対9） */
object-fit: cover;     /* 中の要素（画像など）が歪まないように調整 */
position: relative;
height: 88vh;
top: 6%;
left:8%;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
justify-content: center;
}

.recruitcontent {
width: 32%;
height: 48%;
margin-right: 2%;
transform: skewX(-6deg);
overflow: hidden;
}

.recruitcontent:nth-of-type(3n){
margin-right: 0;	
}

.recruitbox1 {}

.recruitbox1box {
width: 100%;
height: 100%;
position: relative;
}

.recruitbox1box:before {
content: "";
position: absolute;
top:0;
left: -5%;
width: 120%;
height: 100%;
transform: skewX(3deg);
background-image: url("../images/recruitbox1.jpg");
background-position: center 20%;
background-repeat: no-repeat;
background-size: cover;
}

.recruitbox1box::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgb(0,0,0, 0.5);
}

.recruitbox1_title {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: skewX(6deg) translateY(-50%);
z-index: 5;
text-shadow: 0 0 2px var(--text-color);
}

.recruitbox1box h4 {
font-weight: 400;
letter-spacing: 0.1em;
color: var(--text-color-white);
}

.recruitbox1box h4 span {
letter-spacing: 0;
}

.recruitbox1_title2 {
color: var(--text-color-white);
content: "";
position: absolute;
top: 76%;
left: 10%;
margin: auto;
text-align: left;
letter-spacing: 0.05em;
line-height: 1.0;
transform: skewX(6deg);
z-index: 5;
}

a.recruitbox1_link {
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 50;
}

a.recruitbox1_link span.bt_more {
position: absolute;
top: 86%;
left: 10%;
width: 100px;
display: inline-block;
text-decoration: none;
text-align: center;
color: var(--text-color-white);
background-color: var(--background-color-purple);
border-radius: 50vh;
transition: 0.6s;
}

a.recruitbox1_link::before {
content: "";
position: absolute;
top:-1px;
left: -1px;
right: -1px;
bottom: -1px;
}

.recruitbox2 {
transform: skewX(-6deg);
overflow: hidden;
}

.recruitbox2box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.recruitbox2box:before {
content: "";
position: absolute;
top:0;
left: -20%;
width: 140%;
height: 100%;
transform: skewX(6deg);
background:url("../images/recruitbox2.jpg");
background-position: 62% center;
background-repeat: no-repeat;
background-size: cover;
}

.recruitbox2box::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgb(0,191,184, 0.6);
}

.recruitbox2_title {
content: "";
position: absolute;
top: 50%;
left:0;
right: 0;
margin: auto;
transform: skewX(6deg) translateY(-50%);
z-index: 5;
text-shadow: 1px 1px 2px var(--text-color);
}

.recruitbox2box h4 {
font-weight: 400;
letter-spacing: 0.1em;
color: var(--text-color-white);
}

.recruitbox2_title2 {
content: "";
position: absolute;
color: var(--text-color-white);
top: 76%;
left: 8%;
width: 100%;
text-align: left;
line-height: 1.0;
letter-spacing: 0.05em;
transform: skewX(6deg);
z-index: 5;
}

a.recruitbox2_link {
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 50;
}

a.recruitbox2_link span.bt_more {
position: absolute;
top: 86%;
left: 8%;
width: 100px;
display: inline-block;
text-decoration: none;
text-align: center;
color: var(--text-color-white);
background-color: var(--background-color-purple);
border-radius: 50vh;
transition: 0.6s;
}

a.recruitbox2_link::before {
content: "";
position: absolute;
top:-1px;
left: -1px;
right: -1px;
bottom: -1px;
}

.recruitbox3 {
transform: skewX(-6deg);
}

.recruitbox3box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.recruitbox3box:before {
content: "";
position: absolute;
top:0;
left: -20%;
width: 140%;
height: 100%;
transform: skewX(6deg);
background-image: url("../images/recruitbox3.jpg");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
}

.recruitbox3box::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgb(242,185,80, 0.8);
}

.recruitbox3_title {
display: inline-block;
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
line-height: 1.0;
margin: auto;
transform: skewX(6deg) translateY(-50%);
z-index: 5;
text-shadow: 1px 1px 2px var(--text-color);
}

.recruitbox3_title h4 {
font-weight: 400;
letter-spacing: 0.1em;
color: var(--text-color-white);
}

.recruitbox3_title h4 span {
letter-spacing: -.1em;
}

.recruitbox3_title2 {
content: "";
position: absolute;
top: 70%;
left:10%;
width: 100%;
font-weight: 700;
line-height: 1.3;
color: var(--text-color-white);
text-align: left;
letter-spacing: 0;
transform: skewX(6deg);
z-index: 5;
}

a.recruitbox3_link {
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 50;
}

a.recruitbox3_link span.bt_more {
position: absolute;
top: 86%;
left: 8%;
width: 100px;
display: inline-block;
text-decoration: none;
text-align: center;
color: var(--text-color-white);
background-color: var(--background-color-purple);
border-radius: 50vh;
transition: 0.6s;
}

a.recruitbox3_link::before {
content: "";
position: absolute;
top:-1px;
left: -1px;
right: -1px;
bottom: -1px;
}

.recruitbox4 {
transform: skewX(-6deg);
overflow: hidden;
}

.recruitbox4box {
position: relative;
width: 100%;
height: 100%;
}

.recruitbox4box:before {
content: "";
position: absolute;
top:0;
left: -20%;
width: 140%;
height: 100%;
transform: skewX(6deg);
background-image: url("../images/recruitbox4.jpg");
background-position: 66% top;
background-repeat: no-repeat;
background-size: cover;
}

.recruitbox4box::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgb(74,31,75, 0.6);
}

.recruitbox4_title {
position: absolute;
top: 36%;
right: 69%;
font-weight: 400;
letter-spacing: 0;
line-height: 1.0;
color: var(--text-color-white);
transform: skewX(6deg);
z-index: 5;
text-shadow: 0 0 2px var(--text-color);
}

.recruitbox4_title2 {
content: "";
position: absolute;
top: 39%;
left: 34%;
right: 0;
margin: auto;
transform: skewX(6deg);
z-index: 5;
}

.recruitbox4box h4 {
font-weight: 400;
letter-spacing: 0;
line-height: 1.2;
text-align: left;
color: var(--text-color-white);
}

.recruitbox4_title3 {
content: "";
position: absolute;
font-weight: 600;
color: var(--text-color-white);
top: 76%;
left:10%;
text-align: left;
letter-spacing: 0;
line-height: 1.0;
transform: skewX(6deg);
z-index: 5;
}

a.recruitbox4_link {
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 50;
}

a.recruitbox4_link span.bt_more {
position: absolute;
top: 86%;
left: 10%;
width: 100px;
display: inline-block;
text-decoration: none;
text-align: center;
color: var(--text-color-white);
background-color: var(--background-color-purple);
border-radius: 50vh;
transition: 0.6s;
}

a.recruitbox4_link::before {
content: "";
position: absolute;
top:-1px;
left: -1px;
right: -1px;
bottom: -1px;
}

.recruitbox5 {
transform: skewX(-6deg);
}

.recruitbox5box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.recruitbox5box:before {
content: "";
position: absolute;
top:0;
left: -20%;
width: 140%;
height: 100%;
transform: skewX(6deg);
background-image: url("../images/recruitbox5.jpg");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
}

.recruitbox5box::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(68, 187, 247, 0.8);
}

.recruitbox5_title {
display: inline-block;
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
line-height: 1.0;
margin: auto;
transform: skewX(6deg) translateY(-50%);
z-index: 5;
text-shadow: 1px 1px 2px var(--text-color);
}

.recruitbox5_title h4 {
font-weight: 400;
letter-spacing: 0;
line-height: 1.2;
color: var(--text-color-white);
}

.recruitbox5_title h4 span {
display: block;
margin-top: 0.5rem;
}

.recruitbox5_title2 {
content: "";
position: absolute;
top: 76%;
left:10%;
font-weight: 700;
line-height: 1.0;
color: var(--text-color-white);
text-align: left;
letter-spacing: 0;
transform: skewX(6deg);
z-index: 5;
}

a.recruitbox5_link {
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 50;
}

a.recruitbox5_link span.bt_more {
position: absolute;
top: 86%;
left: 8%;
width: 100px;
display: inline-block;
text-decoration: none;
text-align: center;
color: var(--text-color-white);
background-color: var(--background-color-purple);
border-radius: 50vh;
transition: 0.6s;
}

a.recruitbox5_link::before {
content: "";
position: absolute;
top:-1px;
left: -1px;
right: -1px;
bottom: -1px;
}

@media (hover: hover) {
.recruitbox1_link a:hover,
.recruitbox2_link a:hover,
.recruitbox3_link a:hover,
.recruitbox4_link a:hover,
.recruitbox5_link a:hover {
background-color: var(--background-color-light-purple);
}
}

@media screen and (max-width: 1440px) {
	#recruit {
	padding: 0 0 8rem 0;
	}
	.recruit_title {
	width: min(20%,150px);
	}
	.recruitbox {
	width: 94%;
	left: 4%;
	}
}

@media screen and (max-width: 767px) {
	#recruit {
	height: inherit;
    aspect-ratio: inherit;
	padding-bottom: 4rem;
	}
	.recruitbox {
    aspect-ratio: inherit;
    position: relative;
    height: inherit;
    top: 2rem;
    left: 8%;
    display: block;
    display: block;
    -webkit-flex-wrap:normal;
    word-wrap:normal;
	}
	.recruitcontent {
	width: 90%;
	height: 240px;
	min-height: 240px;
	margin-bottom: 0.5rem;;
	}
	.recruitcontent.recruitcontent:nth-of-type(3n){
	margin-right: 0;
	}
	.recruitbox1_title2 {
	top: 70%;
	}
	a.recruitbox1_link span.bt_more {
	top:80%;
	}
	.recruitbox2 {
	transform: skewX(6deg);
	}
	.recruitbox2box::before {
	transform: skewX(-6deg);
	}
	.recruitbox2_title {
	transform: skewX(-6deg) translateY(-50%);
	}
	.recruitbox2_title2 {
	top: 70%;
	transform: skewX(-6deg);
	}
	.recruitbox2_link a {
	transform: skewX(-6deg);
	}
	a.recruitbox2_link span.bt_more {
	top:80%;
	}
	.recruitbox3 {
	transform: skewX(-6deg);
	}
	.recruitbox3box::before {
	transform: skewX(6deg);
	}
	.recruitbox3_title {
	transform: skewX(6deg) translateY(-50%);
	}
	.recruitbox3_title2 {
	top: 66%;
	transform: skewX(6deg);
	}
	.recruitbox3_link a {
	transform: skewX(6deg);
	}
	.recruitbox4 {
	transform: skewX(-6deg);
	}
	.recruitbox4box::before {
	transform: skewX(6deg);
	}
	.recruitbox4_title {
	transform: skewX(6deg);
	}
	.recruitbox4_title2 {
	transform: skewX(6deg);
	}
	.recruitbox4_title3 {
	transform: skewX(6deg);
	}
	.recruitbox4_link a {
	transform: skewX(6deg);
	}
	.recruitbox5 {
	transform: skewX(6deg);
	}
	.recruitbox5box::before {
	transform: skewX(-6deg);
	}
	.recruitbox5_title {
	transform: skewX(-6deg) translateY(-50%);
	}
	.recruitbox5_title2 {
	transform: skewX(-6deg);
	}
	.recruitbox5_link a {
	transform: skewX(-6deg);
	}
	#recruit .scroll {
	display: none;
	}
}


/* ---------------------------------------------

救命救急センター紹介

--------------------------------------------- */
#centerinfo {
width: 100%;           /* 横幅は常にブラウザいっぱいに */
aspect-ratio: 16 / 9;  /* ここで比率を指定（例：16対9） */
object-fit: cover;     /* 中の要素（画像など）が歪まないように調整 */
height: 100vh;
margin: 0 auto ;
background-color: var(--background-color);
}

.centerinfo_area {
position: relative;
width: 100%;
height: 100%;
}

.centerinfobox {
width: 76%;
max-width: 1200px;
position: relative;
top: 20%;
left:0;
right: 0;
margin: auto;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
}

.centerinfobox_dmat {
/*width: 32%;*/
width: 42%;
margin-right: 0;
position: relative;
aspect-ratio: 3 / 4 ;
}

.centerinfobox_dmatbox {
position: relative;
width: 100%;
height: 100%;
}

.centerinfobox_dmat_photo {
width: 90%;
height: auto;
position: absolute;
right: 0;
}

.centerinfobox_dmat_photo img {
width: 100%;
box-shadow: -5rem -5rem 0 var(--background-color-purple);
}

.centerinfobox_dmat_txt {
position: absolute;
width: 80%;
left: -32%;
bottom: 10%;
padding: 1rem 2rem 2rem 0;
background-color: rgba(0,0,0,0.8);
color: var(--text-color-white);
text-align: left;
}

.centerinfobox_dmat_txt h4 {
font-weight: 400;
line-height: 1.0;
letter-spacing: 0.1em;
position: relative;
padding: 2rem;
margin-bottom: 1rem;
}

.centerinfobox_dmat_txt h4:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 90%;
height: 1px;
background: var(--background-color-white);
}

.centerinfobox_dmat_txt p,
.centerinfobox_dmat_txt div{
padding: 1rem 2rem 0 3rem;
}

.centerinfobox_drcar {
/*width: 32%;
margin-right: 2%;*/
width: 42%;
margin-left: 14%;
position: relative;
aspect-ratio: 3 / 4 ;
}

.centerinfobox_drcarbox {
width: 100%;
height: 100%;
}

.centerinfobox_drcar_photo {
width: 100%;
height: auto;
position: absolute;
left:0;
}

.centerinfobox_drcar_photo img {
width: 100%;
position: relative;
z-index: 2;
}

.centerinfobox_drcar_photo:before {
content: "";
position: absolute;
top: -3rem;
right: -3rem;
width: 90%;
height: 130%;
background: var(--background-color-purple);
}

.centerinfobox_drcar_txt {
position: absolute;
width: 80%;
right: -36%;
bottom: 10%;
padding: 1rem 2rem 2rem 0;
background-color: rgba(0,0,0,0.8);
color: var(--text-color-white);
text-align: left;
z-index: 3;
}

.centerinfobox_drcar_txt h4 {
font-weight: 300;
line-height: 1.0;
letter-spacing: -0.1em;
position: relative;
padding: 2rem;
margin-bottom: 1rem;
text-align: left;
}

.centerinfobox_drcar_txt h4:after {
content: "";
position: absolute;
bottom: 0;
left:0;
width: 90%;
height: 1px;
background: var(--background-color-white);
}

.centerinfobox_drcar_txt p,
.centerinfobox_drcar_txt div {
padding: 1rem 2rem 0 3rem;
}

.centerinfobox_active {
width: 32%;
position: relative;
aspect-ratio: 3 / 4 ;
}

.centerinfobox_activebox {
position: relative;
width: 100%;
height: 100%;
top: -10%;
}

.centerinfobox_active_photo {
width: 90%;
height: auto;
}

.centerinfobox_active_photo img {
width: 100%;
box-shadow: 3rem 3rem 0 var(--background-color-purple);
}

.centerinfobox_active_txt {
position: absolute;
width: 66%;
right: -4%;
bottom: 10%;
padding: 1rem 2rem 2rem 0;
background-color: rgba(0,0,0,0.8);
color: var(--text-color-white);
text-align: left;
}

.centerinfobox_active_txt h4 {
font-weight: 400;
line-height: 1.0;
position: relative;
padding: 2rem;
margin-bottom: 1rem;
letter-spacing: 0.1em;
}

.centerinfobox_active_txt h4:after {
content: "";
position: absolute;
bottom: 0;
left:0;
width: 90%;
height: 1px;
background: var(--background-color-white);
}

.centerinfobox_active_txt p,
.centerinfobox_active_txt div {
padding: 1rem 2rem 0 3rem;
}

@media screen and (max-width: 1600px) {
	.centerinfobox {
	max-width: 1100px;
	}
}
@media screen and (max-width: 1440px) {
	.centerinfobox {
	}
	#centerinfo {
	height: auto;
	aspect-ratio: auto;
	}
	.centerinfo_area {
	padding: 10% 0;
	}
	.centerinfobox_dmat_txt {
	bottom:5%;
	padding: 1rem;
	}
	.centerinfobox_dmat_txt h4 {
	padding: 0 0 1rem 0 ;
	}
	.centerinfobox_dmat_txt p,
	.centerinfobox_dmat_txt div {
	padding: 0;
	}
	.centerinfobox_drcar_txt {
	bottom:10%;
	padding: 1rem;
	}
	.centerinfobox_drcar_txt h4 {
	padding: 0 0 1rem 0 ;
	}
	.centerinfobox_drcar_txt p,
	.centerinfobox_drcar_txt div {
	padding: 0;
	}
}
@media screen and (max-width: 1023px) {
	#centerinfo .scroll {
	bottom: 1rem;
	}
	#centerinfo {
	aspect-ratio: auto;
	}
	.centerinfo_area {
	padding: 0;
	}
	.centerinfobox {
	width: 100%;
	top: 0;
	left: 0;
	display: block;
	-webkit-flex-wrap: normal;
	word-wrap:normal;
	overflow: hidden;
	}
	.centerinfobox_dmat {
	width: 80%;
	height: 100%;
	padding-top:100px;
	margin-bottom: 100px;
	left: 10%;
	aspect-ratio: 3 / 4 ;
	}

	.centerinfobox_drcar {
	width: 80%;
	height: 100%;
	margin-left: 0;
	margin-bottom: 0;
	left: 4%;
	aspect-ratio: 4 / 5;
	}
	
	.centerinfobox_active {
	width: 80%;
	height: 100%;
	margin-bottom: 100px;
	top: 0;
	left: 8%;
	aspect-ratio: 3 / 4 ;
	}
	.centerinfobox_dmat_photo {
	width: 80%;
	}
	.centerinfobox_active_photo {
	width: 80%;
	}
	.centerinfobox_dmat_txt {
	}
	.centerinfobox_drcar_txt {
	bottom:20%;
	}
	.centerinfobox_active_txt {
	bottom:0;
	}
}

@media screen and (max-width: 820px) {
	#centerinfo .scroll {
	display: none;
	}
	#centerinfo {
	aspect-ratio: auto;
	}
	.centerinfo_area {
	padding: 0;
	}
	.centerinfobox {
	width: 100%;
	top: 0;
	left: 0;
	display: block;
	-webkit-flex-wrap: normal;
	word-wrap:normal;
	overflow: hidden;
	}
	.centerinfobox_dmat {
	width: 90%;
	height: 100%;
	padding-top:100px;
	margin-bottom: 280px;
	left: 4%;
	aspect-ratio: 3 / 4 ;
	}
	.centerinfobox_dmat_photo img {
    width: 100%;
    box-shadow: -3rem -3rem 0 var(--background-color-purple);
	}
	.centerinfobox_drcar {
	width: 90%;
	height: 100%;
	margin-bottom: 60px;
	left: 4%;
	aspect-ratio: 3 / 4 ;
	}
	.centerinfobox_dmat_txt {
	top: 80%;
	left: -4%;
	bottom: inherit;
	min-height: 250px;
	padding: 1rem 1rem 1rem 0;
	}
	.centerinfobox_drcar_txt {
	padding: 1rem 1rem 1rem 0;
	top: 50%;
	right: -10%;
	bottom: inherit;
	height: 250px;
	}
	.centerinfobox_dmat_txt h4 {padding: 1rem;}
	.centerinfobox_dmat_txt p,
	.centerinfobox_dmat_txt div {
	padding: 0.5rem 1rem 0 1rem;
	}
	.centerinfobox_drcar_txt h4 {padding: 1rem;}
	.centerinfobox_drcar_txt p,
	.centerinfobox_drcar_txt div {
	padding: 0.5rem 1rem 0 1rem;
	}
}


/* ----------------------------------------------------

INFORMATION

----------------------------------------------------- */
#information {
width: 100%;
padding: 6rem 0 5rem 0;
overflow: hidden;
}

#information h3 {
font-weight: 700;
color:var(--text-color-purple);
line-height: 1.5;
letter-spacing: 0;
}

#information h3 span {
display: block;
color: var(--text-color-gray);
letter-spacing: 1rem;
}

.informationbox {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding: 5rem 0 5rem 0;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
}

.informationbox dl {
width: 100%;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
margin-bottom: 0.6rem;
padding: 1.5rem 7%;
position: relative;
background-color: var(--background-color);
}

.informationbox dl::after{
position: absolute;
content: "";
top:0;
right: 1rem;
bottom: 0;
margin: auto;
background-image: url("../images/arrow.svg");
background-size: 1rem;
background-repeat: no-repeat;
}

.informationbox dl dt {
width: 220px;
font-weight: 600;
text-align: left;
}

.informationbox dl dt span.new {
font-size: var(--font-size-13-14);
display: inline-block;
padding: 0.3em 1rem;
margin-left: 2rem;
line-height: 13px;
color: var(--text-color-white);
background-color: var(--background-color-purple);
}

.informationbox dl dd {
flex:1;
min-width:0;
margin-left: 7%;
padding-right: 50px;
text-align: left;
}

@media screen and (max-width: 1360px) {
	#information {
	padding: 5rem 0 3rem 0;
	}
	.informationbox {
	width: 90%;
	max-width: 90%;
	padding: 5rem 0 2rem 0;
	}
}

@media screen and (max-width: 1023px) {
	#information {
	padding: 8rem 0 2rem 0;
	}
	.informationbox dl {
	padding: 1rem 2rem;
	text-align: left;
	}
	.informationbox dl dt {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	}
	.informationbox dl dd {
	flex: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	}
}

@media screen and (max-width: 767px) {
	#information {
	padding: 5rem 0 0 0;
	}
}

.informationbox dl dd a {
color: var(--text-color);
text-decoration: none;
}

.informationbox dl:hover {
transition: 0.6s;
transform: translateX(5%);
}

.informationbox dl dd a::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}

.informationbox dl dd a:hover {
color: var(--text-color-purple);
transform: rotateX(-3rem);
}

.btn_right {
width: 100%;
margin: 2rem 0;
text-align: right;
}
.btn_right a {
font-weight: 400;
display: inline-block;
text-decoration: none;
color: var(--text-color);
}