@charset "UTF-8";

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
.mainvisual-wrap {
	background: url("../img/bg_mv.jpg") no-repeat top center;
}
.mainvisual {
  height: 360px;
  margin-bottom: 60px;
  position: relative;
}
.mainvisual .catchphrase {
 	position: absolute;
 	top: 72px;
 	left: 10%;/*6%*/
}
.mainvisual .catchphrase p {
	font-size: 2.3rem;
	line-height: 1.6;
	font-weight: 500;
	margin-bottom: 32px;
}

.mainvisual-illust {
	position: absolute;
 	top: 20px;
 	right: 0;
	max-width: 55%;
}

/*mv-photoスライド*/
.mv-photo {
	padding-bottom: 20px;
}

.mv-photo .mv-list-area {
 	display: flex;
 	margin-bottom: 40px;
 	overflow-x: hidden;
}
.mv-photo .mv-list-area .mv-list {
	display: flex;
 	animation: slide-left 60s infinite linear both;
}
.mv-photo .mv-list-area .mv-list li {
 	width: calc(100vw / 3);
	margin-right: 20px;
}
.mv-photo .mv-list-area .mv-list li img {
	width: 100%;
}
@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


@media screen and (max-width: 900px) {/*調整*/
	.mainvisual {
	  height: 340px;
	  margin-bottom: 40px;
	}
  	.mainvisual .catchphrase {
    	top: 30px;
    	left: 4%;
  	}
}

@media screen and (max-width: 767px) {
	.mainvisual {
    	height: 300px;
    	margin-bottom: 40px;
  	}
  	.mainvisual .catchphrase {
    	top: 40px;
    	left: 6%;
  	}
  	.mainvisual .catchphrase p {
    	font-size: 1.4rem;
  	}
	.mainvisual-illust {
		top: 180px;
	}
	.mv-photo .mv-list-area .mv-list li {
		width: calc(100vw / 2);
		margin-right: 12px;
	}
  	.mv-photo .mv-list-area {
    	margin-bottom: 20px;
  	}
}
@media screen and (max-width: 600px) {
	.mainvisual-wrap {
		background: url("../img/bg_mv_sp.jpg") no-repeat top center;
		background-size: cover;
	}
	.mainvisual {
    	height: 280px;
    	margin-bottom: 40px;
  	}
  	.mainvisual .catchphrase {
    	top: 30px;
  	}
  	.mainvisual .catchphrase p {
		margin-bottom: 40px;
  	}
	.mainvisual-illust {
		display: none;
	}
	.mv-photo {
		padding-bottom: 0;
	}
}

/*----- workstyle -----*/
.workstyle {
	padding-top: 60px;
	padding-bottom: 60px;
    background: linear-gradient(180deg, #E7FAFF 0%, #C4EEFA 100%);
}
.workstyle-inner {
	position: relative;
}
.typo-workstyle {
	position: absolute;
	right: -4%;
	top: -32px;
	max-width: 170px;
}
.workstyle-inner h2 {
	border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #EA6D80 0%, #FF9A9E 50%, #FCE3E5 100%);
	color: var(--white-color);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	padding-top: 12px;
	padding-bottom: 12px;
}
.workstyle-inner-content {
	background: var(--white-color);
	padding: 20px 20px 40px;
	border-radius: 0 0 12px 12px;
}

.workstyle-inner-content {
	margin-bottom: 40px;
}

.workstyle-item {
	display: flex;
 	flex-direction: column; /* モバイルでは縦並び */
 	gap: 2rem;
	border-bottom: var(--base3-color) 1px dashed;
	padding-bottom: 32px;
	padding-top: 32px;
}
.workstyle-item:last-child {
	border-bottom: none;	
} 

.workstyle-text {
 	display: flex;
 	flex-direction: column;
 	gap: 20px;
}
.workstyle-text h3.heading  {
 	position: relative;
 	font-size: 1.3rem;
 	line-height: 1.5;
 	margin: 0;
 	padding-left: 1.2rem;
}
.workstyle-text h3.heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 12px;
  background: linear-gradient(90deg, #EA6D80 0%, #FF9A9E 50%, #FCE3E5 100%);
  border-radius: 50%;
}

.workstyle-image {
	width: 100%;
	margin: 0;
 	border-radius: 12px;
  	background-color: var(--base4-color);
 	overflow: hidden;
 	aspect-ratio: 3 / 2;
}
.image-style {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	display: block;
}

@media (min-width: 768px) {
	.typo-workstyle {
		right: -3%;
		top: -15px;
		max-width: 250px;
	}
	.workstyle-inner h2 {
		font-size: 1.8rem;
	}
	.workstyle-inner-content {
		padding: 20px 60px 40px;
	}
	.workstyle-item {
		flex-direction: row;
    	align-items: center;
    	gap: 40px;
	}
	.workstyle-text h3.heading  {
		font-size: 1.5rem;
		line-height: 1.5;
	 	padding-left: 1.8rem;
	}
	.workstyle-text h3.heading::before {
	  top: 0.4em;
	  width: 20px;
	  height: 20px;
	}
	.workstyle-text {
		width: calc(60% - 20px);
		flex-shrink: 0;
	 }
	.workstyle-image {
		width: calc(40% - 20px);
		flex-shrink: 0;
	 }
}


.workstyle-link {
	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 20px;
}


/*page-list*/
.page-list {
	background: url("../img/bg_page1.jpg") no-repeat bottom center;
	padding-top: 60px;
	padding-bottom: 60px;
}



/*----- page-listバナー ------*/
/*info-banners*/
.info-banners {
 	display: flex;
	flex-direction: column;
 	gap: 2rem;
	margin-bottom: 40px;
}

.info-card {
	display: flex;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	overflow: hidden;
	background-color: #fff;
	transition: transform 0.3s ease;
}

.info-card:hover {
	opacity: 0.8;
}

/* キーボードフォーカス時のスタイル */
.info-card:focus-visible {
  outline: 3px solid #66b2ff;
  outline-offset: 2px;
}

/* テーマ別の背景色適用 */
.info-card--pink .info-card__body {
  background-color: #fcebeb;
}
.info-card--blue .info-card__body {
  background-color: #def6ff;
}

/* テキストエリア */
.info-card__body {
  position: relative;
  flex: 1 1 50%; /* PC時は幅50% */
  display: flex;
  align-items: center;
  padding: 3rem 2rem;
  overflow: hidden; /* 背景マークがはみ出さないようにする */
}

.info-card__bg-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 80%; 
  width: auto;
  object-fit: contain;
  pointer-events: none; /* クリックイベント無効化 */
  z-index: 0;
}

.info-card__content {
  position: relative;
  z-index: 1;
  padding-left: 2rem;
}

.info-card__title {
  margin: 0 0 1rem 0;
  color: var(--base1-color);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: bold;
  letter-spacing: 0.03em;
}

.info-card__text {
  margin: 0;
  color: var(--base1-color);
  font-size: 1.1rem;/*1rem*/
  line-height: 1.6;
}

.info-card__figure {
  flex: 1 1 50%; /* PC時は幅50% */
  background-color: var(--base4-color);
  position: relative;
}

.info-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .info-card {
    flex-direction: column;
  }
  .info-card__body {
    padding: 2.5rem 1.5rem;
  }
  .info-card__content {
    padding-left: 0;
  }

  .info-card__figure {
    min-height: 160px;
  }
  .info-card__bg-mark {
    /* スマホ表示時はマークの位置を調整 */
    left: -16px;
    height: 100%;
  }
}

/*看護部・介護部*/
.banner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.banner-list__item {
  /* PCでは横並び、スマホでは100%になるよう */
  flex: 1 1 calc(50% - (1.5rem / 2));
  min-width: 280px;
}

.banner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 24px 40px;
  background-color: var(--white-color);
  border: 1.5px solid var(--sub-color);
  border-radius: 8px;
  color: inherit;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-card:hover {
	opacity: 0.7;
}

.banner-card__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.banner-card__title {
  color: var(--sub-color);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.banner-card__text {
  color: var(--color-banner-text);
  font-size: 1.1rem;/*1rem*/
  line-height: 1.6;
}

/* アイコンのスタイル */
.banner-card__icon {
  flex-shrink: 0;
    content: '';
	transform: rotate(45deg) translateY(-50%);
	width: 16px;
	height: 16px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: var(--sub-color);
}

@media screen and (max-width: 767px) {
	.banner-card {
	  gap: 1rem;
	  padding: 24px 30px;
	}
	.banner-card__text {
	  font-size: 1rem;
	}
}