@charset "utf-8";
/* CSS Document */
/* トップページのCSS */


.body-wrapper.is-top {
	background-color: #FAFAFA;
}

/* -------------------------------------------------
  ヒーロー
------------------------------------------------- */
.top-hero {
	position: relative;
}

/* 画像 */
.top-hero__image {
	display: block;
	width: 100%;
}
.top-hero__image img {
	display: block;
	width: 100%;
}

/* タイトルエリア */
.top-hero__title-wrapper {
	background: linear-gradient(to bottom, #FFFFFF 0%, #D8E6F1 100%);
	padding-bottom: 3rem;
}
@media print, screen and (min-width: 768px) {
	.top-hero__title-wrapper {
		background: transparent;
		position: absolute;
		top: 50%;
		right: 5vw;
		transform: translateY(-60%);
		width: 35%;
		padding-bottom: 0;
	}
}

/* タイトル */
.top-hero__title-wrapper h2 {
	width: 75%;
	margin: -80px auto 0;
}
@media print, screen and (min-width: 768px) {
	.top-hero__title-wrapper h2 {
		width: 100%;
		margin: 0;
	}
}

.top-hero__title-wrapper h2 img {
	display: block;	
	width: 100%;
	opacity: 0;
	transform: translateY(16px);
	transition:
    opacity 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) .8s,
    transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.9s;
}
.is-loaded .top-hero__title-wrapper h2 img {
	opacity: 1;
	transform: translateY(0);
}

/* タイトルテキスト */
.top-hero__title-wrapper p {
	font-family: var(--font-family-zenkaku);
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	opacity: 0;
	transform: translateY(16px);
	transition:
    opacity 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s,
    transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.2s;
}
@media print, screen and (min-width: 768px) {
	.top-hero__title-wrapper p {
		font-size: 16px;
	}
}
.is-loaded .top-hero__title-wrapper p {
	opacity: 1;
	transform: translateY(0);
}

.top-hero__title-wrapper p span {
	font-size: 18px;
	letter-spacing: 1px;
}
@media print, screen and (min-width: 768px) {
	.top-hero__title-wrapper p span {
		font-size: 22px;
	}
}

/* -------------------------------------------------
  ヒーロー スライダー追加CSS
------------------------------------------------- */
/* スライダー本体 */
.top-hero-slider {
	width: 100%;
	height: auto;
	/* 画像の比率を維持してスライダーエリアを確保 */
	aspect-ratio: 375 / 225; /* SPの画像比率に合わせて調整推奨 */
}
@media print, screen and (min-width: 768px) {
	.top-hero-slider {
		aspect-ratio: 1440 / 730; /* PCの画像比率に合わせて調整推奨 */
	}
}
/* スライド内の画像設定 */
.top-hero-slider .swiper-slide .top-hero__image,
.top-hero-slider .swiper-slide .top-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 枠いっぱいに広げる */
}
@media print, screen and (min-width: 768px) {
	.top-hero__title-wrapper {
		position: absolute; /* PC時は絶対配置に戻す（既存CSSと同じ） */
		z-index: 1;
		/* z-indexは維持 */
	}
}
@media print, screen and (max-width: 767px) {
	.is-loaded .top-hero__title-wrapper h2 img {
		position: relative;
		z-index: 1;
	}
}

/* -------------------------------------------------
  ヒーロー下 ナビゲーションのラッパー
------------------------------------------------- */
.top-navigation {
	padding: 0 var(--content-side-gutter-medium) 0;
	margin-top: -20px;
}

.top-navigation__box {
	background-color: white;
	border-radius: 10px;
	position: relative;
	z-index: 1;
	padding: 10px 3%;
	box-shadow: 2px 6px 10px #dddddd;
}

/* -------------------------------------------------
  トピックス スライダー
------------------------------------------------- */
.top-topics-slider {
	width: 100%;
	position: relative;
}

.top-topics-slider .swiper {
	overflow: initial !important;
}

.top-topics-slider .swiper-slide {
	height: auto !important;
}

.top-topics-slider .thumb-card-wide {
	height: 100%;
}

/* ページネーション */
.top-topics-slider__pagination {
	text-align: center;
	padding: 15px 0;
}

.top-topics-slider__pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0 6px !important;
}

.top-topics-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--color-dark);
}

/* ボタンエリア */
.top-topics-slider__btn-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 6px;
}
@media print, screen and (min-width: 768px){
	.top-topics-slider__btn-wrapper {
		justify-content: flex-end;
		column-gap: 10px;
		width: fit-content;
		position: absolute;
		bottom: calc(100% + 30px);
		right: 0;
	}
}

/* -------------------------------------------------
  お知らせ (タブ)
------------------------------------------------- */
.top-news-tab {
	height: 420px;
}
@media print, screen and (min-width: 768px) {
	.top-news-tab {
		height: 510px;
	}
}

/* タブボタン */
.top-news-tab__head {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 1%;
	height: 30px;
}
@media print, screen and (min-width: 768px) {
	.top-news-tab__head {
		column-gap: 3%;
		height: 40px;
	}
}

.top-news-tab__head li {
	cursor: pointer;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	border-radius: 8px 8px 0 0;
	font-size: 11px;
}
@media print, screen and (min-width: 768px) {
	.top-news-tab__head li {
		font-size: 14px;
	}
}

.top-news-tab__head li.is-active {
	color: white;
}

.top-news-tab__head li#tab-btn-all {
	border-top: 1px solid var(--color-cate-all);
	border-left: 1px solid var(--color-cate-all);
	border-right: 1px solid var(--color-cate-all);
}
.top-news-tab__head li#tab-btn-candicates {
	border-top: 1px solid var(--color-cate-candidates);
	border-left: 1px solid var(--color-cate-candidates);
	border-right: 1px solid var(--color-cate-candidates);
}
.top-news-tab__head li#tab-btn-event {
	border-top: 1px solid var(--color-cate-event);
	border-left: 1px solid var(--color-cate-event);
	border-right: 1px solid var(--color-cate-event);
}
.top-news-tab__head li#tab-btn-news {
	border-top: 1px solid var(--color-cate-news);
	border-left: 1px solid var(--color-cate-news);
	border-right: 1px solid var(--color-cate-news);
}
.top-news-tab__head li#tab-btn-report {
	border-top: 1px solid var(--color-cate-report);
	border-left: 1px solid var(--color-cate-report);
	border-right: 1px solid var(--color-cate-report);
}

.top-news-tab__head li#tab-btn-all.is-active {
	background-color: var(--color-cate-all);
}
.top-news-tab__head li#tab-btn-candicates.is-active {
	background-color: var(--color-cate-candidates);
}
.top-news-tab__head li#tab-btn-event.is-active {
	background-color: var(--color-cate-event);
}
.top-news-tab__head li#tab-btn-news.is-active {
	background-color: var(--color-cate-news);
}
.top-news-tab__head li#tab-btn-report.is-active {
	background-color: var(--color-cate-report);
}

/* ニュース表示エリア */
.top-news-tab__body {
	background-color: white;
	border-top: 2px solid var(--color-dark);
	padding: 10px 5%;
	border-radius: 0 0 8px 8px;
	height: calc(420px - 30px);
	box-shadow: 0px 0px 15px -5px var(--color-gray-light);
}
@media print, screen and (min-width: 768px) {
	.top-news-tab__body {
		padding: 20px 4%;
		height: calc(510px - 40px);
	}
}

.top-news-tab__body div {
	height: 100%;
}

/* -------------------------------------------------
  学校生活
------------------------------------------------- */
.top-school-news {
	background-color: white;
	border-radius: 0 8px 0 8px;
	box-shadow: 0px 0px 15px -5px var(--color-gray-light);
	padding: 10px 4%;
	height: 420px;
}
@media print, screen and (min-width: 768px) {
	.top-school-news {
		padding: 20px 4%;
		height: 510px;
	}
}

.top-school-news ul {
	height: 100%;
}

.top-school-news ul li {
	padding: 10px 0;
}

.top-school-news ul li + li {
	border-top: 1px solid var(--color-gray);
}

.top-school-news ul li a {
	display: flex;
	align-items: center;
	column-gap: 4%;
	color: var(--color-dark);
}

.top-school-news ul li img {
	display: block;
	width: 30%;
}

.top-school-news ul li p {
	font-weight: 400;
}

/* タイトル */
.top-school-news ul li p + p {
	vertical-align: middle;
}
.top-school-news ul li p + p::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--color-green);
	border-right: 2px solid var(--color-green);
	transform: rotate(45deg) translateY(-2px);
	margin-right: 6px;
}

/* -------------------------------------------------
  ニュースブロック + もっと見るボタン
------------------------------------------------- */
.top-news-gridBox {
	position: relative;
}

.top-news-gridBox:nth-child(1) {
	margin-bottom: 30px;
}
@media print, screen and (min-width: 768px) {
	.top-news-gridBox:nth-child(1) {
		margin-bottom: 0;
	}
}

.top-archive-btn {
	margin-top: 28px;
}
@media print, screen and (min-width: 768px) {
	.top-archive-btn {
		margin-top: 0;
		position: absolute;
		top: 0;
		right: 0;
		width: 170px;
	}
}

/* -------------------------------------------------
  特色 アイキャッチ
------------------------------------------------- */
.top-eyecatch {
	width: 100%;
	position: relative;
	z-index: 1;
}

/* 背景 */
.top-eyecatch__bg {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 105%;
	object-fit: cover;
	object-position: left bottom;
}

/* メイン画像 */
@media print, screen and (min-width: 768px){
	.top-eyecatch__thumb {
		width: 68%;
		overflow: hidden;
		border-radius: 15px 0 0 15px;
		margin-left: auto;
	}
}

.top-eyecatch__thumb img {
	display: block;
	width: 100%;
}

/* タイトルエリア */
.top-eyecatch__content {
	position: relative;
	padding: 24px var(--content-side-gutter-medium) 10px;
}
@media print, screen and (min-width: 768px) {
	.top-eyecatch__content {
		padding: 0 var(--content-side-gutter-medium);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
	}
}

/* タイトル */
.top-eyecatch h1 {
	font-weight: bold;
	font-size: 24px;
	line-height: 1.5;
	position: relative;
	padding-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
  .top-eyecatch h1 {
    font-size: 32px;
		letter-spacing: 2px;
  }
}

.top-eyecatch h1::before {
	content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 50%;
  max-width: 200px;
  height: 3px;
  background-color: var(--color-yellow);
}

/* -------------------------------------------------
  特色 リスト
------------------------------------------------- */
.top-feature-list {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 24px;
	margin-bottom: 24px;
}
@media print, screen and (min-width: 768px) {
	.top-feature-list {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 5%;
		margin-bottom: 32px;
	}
}

.top-feature-list li img {
	width: 165px;
	margin: 0 auto 8px;
	display: block;
}

.top-feature-list li p {
	font-weight: 500;
	text-align: center;
	font-size: 20px;
	margin-bottom: 8px;
}

.top-feature-list li p + p {
	font-weight: 400;
	text-align: justify;
	font-size: 14px;
	line-height: 1.58;
}
@media print, screen and (min-width: 768px) {
	.top-feature-list li p + p {
		font-size: 16px;
	}
}

/* -------------------------------------------------
  受験生の方向けNAVI 背景
------------------------------------------------- */
.top-forCandidate-bg {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

.top-forCandidate-bg::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(255,235,7,0.4) 0%, rgba(145,176,211,0.4) 100%);
}
@media print, screen and (min-width: 768px) {
	.top-forCandidate-bg::before {
		background: linear-gradient(to right, rgba(255,235,7,0.4) 0%, rgba(145,176,211,0.4) 100%);
	}
}

.top-forCandidate-bg video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top-forCandidate-bg + .container {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------
  受験生の方向けNAVI リスト
------------------------------------------------- */
.top-forCandidate-list {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 24px;
	margin-bottom: 24px;
}
@media print, screen and (min-width: 768px) {
	.top-forCandidate-list {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 3.2%;
		margin-bottom: 32px;
	}
}

/* カード */
.top-forCandidate-list li {
	border-radius: 0 10px 0 10px;
	background-color: white;
	padding: 10px 6%;
}

/* カード タイトルエリア */
.top-forCandidate-list__li-head {
	display: flex;
	align-items: center;
	column-gap: 5.5%;
	border-bottom: 1px solid var(--color-green);
	padding: 0 2% 10px;
}
@media print, screen and (min-width: 768px) {
	.top-forCandidate-list__li-head {
		flex-direction: column;
		justify-content: start;
		padding: 4% 0 0;
		height: 130px;
	}
}

.top-forCandidate-list__li-head img {
	display: block;
	height: 40px;
	width: auto;
}

.top-forCandidate-list__li-head p {
	font-weight: 500;
	font-size: 19px;
	line-height: 1.4;
}
@media print, screen and (min-width: 768px) {
	.top-forCandidate-list__li-head p {
		text-align: center;
		margin-top: 6px;
	}
}

.top-forCandidate-list__li-head p span {
	font-size: 12px;
	display: block;
}

/* カード リンクエリア */
/* .top-forCandidate-list__li-body {
} */

.top-forCandidate-list__li-body a {
	display: block;
	color: var(--color-dark);
	padding: 7px 0 7px 14px;
	font-weight: 400;
	text-indent: -14px;
	font-size: 14px;
}

.top-forCandidate-list__li-body a + a {
	border-top: 1px dashed var(--color-gray-light);
}

.top-forCandidate-list__li-body a::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--color-green);
	border-right: 2px solid var(--color-green);
	margin-right: 6px;
	transform: translateY(-2px) rotate(45deg);
}

/* -------------------------------------------------
  一歩先の看護教育へ (インフォメーション)
------------------------------------------------- */
.top-information-bg {
	display: block;
	width: 100%;
	margin-top: 25px;
}
@media print, screen and (min-width: 768px) {
	.top-information-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		top: 0;
		left: 0;
		margin-top: 0;
	}
}

.top-information-container {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------
  アクセス
------------------------------------------------- */
.top-access-box {
	background: rgba(255, 255, 255, .7);
	margin-bottom: 30px;
}
@media print, screen and (min-width: 768px) {
	.top-access-box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 40px;
		border-radius: 10px;
	}
}

/* 情報エリア */
@media print, screen and (min-width: 768px){
	.top-access-box__info {
		padding: 40px 4vw 20px;
	}
}

.top-access-box__info p,
.top-access-box__info address {
	margin-bottom: 20px;
	font-weight: 400;
}

/* 地図エリア */
.top-access-box__map {
	position: relative;
}

.top-access-box__map .mascot-image {
	margin-left: auto;
}
@media print, screen and (min-width: 768px) {
	.top-access-box__map .mascot-image {
		position: absolute;
		bottom: 100%;
		right: 0;
	}
}

.top-access-box__iframe-wrapper {
	display: block;
	width: 100%;
	aspect-ratio: 572/350;
	overflow: hidden;
	border-radius: 10px;
}
@media print, screen and (min-width: 768px) {
	.top-access-box__iframe-wrapper {
		aspect-ratio: initial;
		height: 100%;
	}
}

.top-access-box__iframe-wrapper iframe {
	display: block;
	width: 100%;
	height: 100%;
}