@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:ital,wght@0,600;1,600&display=swap');
/*学生たちの挑戦（Challenges）*/
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/*
min-width: 1150px;
*/

/*フォント指定*/
section{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

/*お知らせ見出し*/
.info-list h2:before,
.pickup-title h2:before{
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
}



/* Section Separator---------------------------------------------------------

　ヒーロー動画

----------------------------------------------------------------------------*/
.top-visual{
	margin: 5px;
	height: calc( 45vh - 60px );
	height: calc( 45svh - 60px );
	/*background-image: url("../image/top_hero/hero01.jpg");
	background-size: cover;
	background-position: center;*/
	border-radius: 15px;
	position: relative;
	overflow: hidden;
	background: rgba(204,204,204,0.50);
}
.top-visual::before{
	content: "";
	display: block;
	position: absolute;
	background: rgba(0,0,0,0.10);
	width: 100%;
	height: 100%;
}
.top-visual video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width:768px){
	.top-visual{
		margin: 5px;
		height: calc( 100vh - 90px );
		border-radius: 20px;
	}
}
.top_hero-copy{
	font-size: 8vw;
	line-height: 1.6;
	color: #FFF;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.2em;
	position: absolute;
	top: calc( 50% - 60px);
	left: 5%;
	transition-duration: .1s;
}
@media (min-width:768px){
	.top_hero-copy{
		font-size: 6.6rem;
		left: 5.17%;
	}
}

/* Section Separator---------------------------------------------------------

　

----------------------------------------------------------------------------*/
.sec-pickup{
	background: #FFFBC4;
	padding: 30px 0 30px;
	margin: 50px 0 0 ;
	overflow: visible;
}
.pickup-title{
	padding: 0 30px;
	margin: 0 auto 30px;
	max-width: 1160px;
}
/*NEWS BLOG の各見出し*/
.pickup-title h2{
	font-size: 1.9rem;
	margin: 0 0 1em;
}
/*欧文は疑似要素で対応*/
.pickup-title h2:before{
	font-size: 4rem;
	color:#03A1E6;
	margin-right: 0.25em;
}
.pickup-title h2:before{content: 'PICK UP';}

.pickup-slick li{
	margin: 0 5px;
}
.pickup-slick .slick-dots{
	bottom: -35px;
}
@media (min-width:768px){
	.sec-pickup{
		padding: 30px 0 50px;
	}
	.pickup-slick li{
		margin: 0 10px;
	}
}

/* Section Separator---------------------------------------------------------

　お知らせ

----------------------------------------------------------------------------*/
.sec-information{
	padding: 50px 30px;
}

/*ニュース・ブログの各セクション*/
.info-list{
	margin: 0 0 50px;
}
/*NEWS BLOG の各見出し*/
.info-list h2{
	font-size: 1.9rem;
	margin: 0 0 1em;
}
/*欧文は疑似要素で対応*/
.info-list h2:before{
	font-size: 4rem;
	color:#03A1E6;
	margin-right: 0.25em;
}
.info-list_news h2:before{content: 'NEWS';}
.info-list_topics h2:before{content: 'BLOG';}

/*（ニュース）リスト表示の設定*/
.info-list ul{
	font-size: 1.3rem;
}
/*上下のボーダーカラー*/
.info-list li{border-top: 1px solid #D6D6D6;}
.info-list li:last-child{border-bottom: 1px solid #D6D6D6;}

/*リスト内はa要素で囲んでブロック化*/
.info-list li a{
	padding: 1em 0.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 10px;
	transition-duration: 0.3s;
}
.info-list li a:hover{
	background: rgba(3,161,230,0.05);
}

/*日付*/
/*タグ*/
.info-tag{
	font-size: 1rem;
	border: 1px solid #D6D6D6;
	width: fit-content;
	line-height: 1;
	padding: 0.25em 0.5em;
	font-weight: bold;
	margin: 0 0 2px 0;
}
/*タイトル*/
.title{
	width: 100%;
	line-height: 1.6;
	letter-spacing: 0.1em;
	font-feature-settings: "palt" 1;
}
/*一覧を見る*/
.more-info a{
	font-size: 1.2rem;
	display: block;
	border-bottom: 1px dotted #666666;
	padding: 15px 5px 5px;
	width: fit-content;
	margin: 0 0 0 auto;
	transition-duration: .2s;
}
.more-info a:hover{
	opacity: 0.6;
}

@media (min-width:768px){
	.sec-information{
		padding: 100px 20px;
		min-width: 1150px;
	}
	.sec-information .inner{
		display: flex;
		justify-content: space-between;
		width: 1100px;
		margin: 0 auto;
		/*column-gap: 80px;*/
	}
	.info-list{
		margin: 0;
		flex-basis: 47%;
	}
	.info-list ul{
		font-size: 1.4rem;
	}
	/*タイトル*/
	.title{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
}

/* Section Separator---------------------------------------------------------

　５つの特徴

----------------------------------------------------------------------------*/
.sec-characteristics{
	background: #93E0EE;
	color: #000;
	border-radius: 10px;
	margin: 0 5px;
	padding: 50px 20px;
	transition-duration: .3s;
}
@media (min-width:768px){
	.sec-characteristics{
		padding: 100px 5%;
		margin: 0 20px;
		border-radius: 20px;
		min-width: 1150px;
		box-sizing: border-box;
	}
}

/*タイトル（八戸看護の５つの特徴）*/
.title-characteristics{
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: 0.3em;
}
.title-characteristics .title-small{
	font-size: 1.6rem;
	letter-spacing: 0.25em;
	display: block;
}
@media (min-width:768px){
	.title-characteristics{
		font-size: 5.8rem;
		line-height: 1.8;
		margin-bottom: 80px;
	}
	.title-characteristics .title-small{font-size: 3.8rem;}
}
/*========================================
	特徴ブロック
========================================*/
.chara-block{
	margin: 40px 0;
	position: relative;
}

.chara-image{
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	transition-duration: .3s;
}
.chara-image img{
	width: 100%;
}
.chara-image:hover{
	opacity: 0.5;
}
.chara-image a{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;
}
.chara-image::after{
	content: '';
	display: block;
	width: 42px;
	aspect-ratio: 1 / 1;
	position: absolute;
	right: 4%;
	bottom: 7%;
	background-image: url("../image/top/chara_arrow.svg");
	background-size: cover;
	z-index: 0;
}
@media (min-width:768px){
	.chara-image::after{
		width: 64px;
	}
}
/*通し番号（数字だけ）*/
.sp-num{
	color: #FFF;
	background: #93E0EE;
	font-size: 7rem;
	line-height: 1;
	width: 1em;
	text-align: center;
	
	padding: 0 5px 0px;
	border-radius: 0 0 10px 0;
	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	
	font-family: "Sofia Sans Extra Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
@media (min-width:768px){
	.sp-num{
		display: none;
	}
}
.corner1 {
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    transform: translateY(100%);
	}
	.corner2 {
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -10px;
    top: -10px;
    transform: translateY(100%);
}

.corner1::before,
.corner2::before{
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 100%;
    left: 100%;
    content: '';
    background: transparent;
    border-radius: 50%;
    box-shadow: -10px -10px 0 0 #93E0EE;
    transform: translate(-50%, -50%);
}


.chara-txt h4{
	margin: 1em 0 0.4em;
	font-weight: 600;
	font-size: 1.4rem;
}
.chara-txt h3{
	font-size: 2rem;
	font-weight: 600;
	margin:  0 0 0.3em;
}
.chara-txt p{
	font-size: 1.4rem;
	margin: 0;
	line-height: 1.6;
}

@media (min-width:768px){
	/*特徴 各ブロック*/
	.chara-block + .chara-block{
		margin: 140px 0 0;
	}
	.chara-txt{
		position: absolute;
		top: 0;
		left: 0;
		background: #93E0EE;
		padding: 0 40px 45px 80px;
		width: 500px;
		border-radius: 0 0 20px 0;
	}
	.chara-txt::before{
		content: '1';
		color: #FFF;
		position: absolute;
		top: -20px;
		left: 0;
		font-size: 16.5rem;
		line-height: 1;
		 font-family: "Sofia Sans Extra Condensed", sans-serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
	}
	
	.charas01::before{content:'1';}
	.charas02::before{content:'2';}
	.charas03::before{content:'3';}
	.charas04::before{content:'4';}
	.charas05::before{content:'5';}
	
	.corner1 {
	    display: block;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    left: 0px;
	    bottom: 0px;
	    transform: translateY(100%);
	}
	.corner2 {
	    display: block;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    right: -20px;
	    top: -20px;
	    transform: translateY(100%);
	}
	.corner1::before,
	.corner2::before{
	    display: block;
	    width: 200%;
	    height: 200%;
	    position: absolute;
	    top: 100%;
	    left: 100%;
	    content: '';
	    background: transparent;
	    border-radius: 50%;
	    box-shadow: -20px -20px 0 0 #93E0EE;
	    transform: translate(-50%, -50%);
	}
	.chara-txt h4{
		margin: 0 0 0.4em;
		font-weight: 500;
		font-size: 1.9rem;
	}
	.chara-txt h3{
		font-size: 3rem;
		font-weight: 500;
		margin:  0 0 0.3em;
		font-feature-settings: "palt" 1;
		letter-spacing: 0.05em;
	}
	.chara-txt p{
		font-size: 1.6rem;
		margin: 0;
		line-height: 1.76;
	}
}

/* Section Separator---------------------------------------------------------

　学生たちの挑戦

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

.sec-challenges{
	background: #FEEBE5;
	border-radius: 10px;
	margin: 5px;
	padding: 50px 20px;
}
@media (min-width:768px){
	.sec-challenges{
		border-radius: 20px;
		min-width: 1150px;
		margin: 20px;
		padding: 100px 5%;
	}
}

.challenges .title{
	font-size: 1.6rem;
	font-weight: 600;
	margin-bottom: 30px;
}
.challenges .title:before{
	content: 'Challenges';
	font-size: 5.6rem;
	font-family: "Pacifico", cursive;
	font-weight: 400;
	font-style: normal;
	color: #E29696;
	display: block;
	margin: 0 0 10px;
}
@media (min-width:768px){
	.challenges .title{
		font-size: 2rem;
		font-weight: 400;
	}
	.challenges .title:before{
		font-size: 8.6rem;
		display: inline-block;
		margin-right: 30px;
	}
}


.challenges ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.challenges ul li{
	font-size: 1.4rem;
	text-align: center;
	position: relative;
	
}
.challenges ul li a{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

@media (min-width:768px){
	.challenges ul {
		flex-direction: row;
		gap: 0 5%;
	}
	.challenges ul li{
		font-size: 1.6rem;
		font-weight: 400;
	}
}


.challenges ul li figure{
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 10px;
	position: relative;
	transition-duration: .3s;
}
.challenges ul li figure:hover{
	opacity: 0.6;
}
.challenges ul li figure img{
	width: 100%;
}
.challenges ul li figure .img-arrow{
	width: 44px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.challenges ul li figure .arrow{
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 10px 0 0 10px;
	background: #FEEBE5;
	border-radius: 20px 0 0 0;
	width: 44px;
	height: 44px;
	box-sizing: content-box;
	cursor: pointer;
}
.challenges ul li figure .img-arrow{
	cursor: pointer;
}
.corner3,
.corner4{
	display: block;
   width: 20px;
   height: 20px;
   position: absolute;
}
.corner3 {
   right: 0px;
	top: 0px;
   transform: translateY(-100%);
}
.corner4 {
	left: 0px;
	bottom: 0px;
	transform: translate( -100% );
	
}
.corner3::before,
.corner4::before{
	z-index: -10;
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background: transparent;/*transparent*/
    border-radius: 50%;
    box-shadow: 20px 20px 0 0 #FEEBE5;
    transform: translate(-50%, -50%);
}

/* Section Separator---------------------------------------------------------

　オープンキャンパス

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

.sec-opencampus{
	background: #FFF55E;
	border-radius: 10px;
	margin: 5px;
	padding: 50px 20px;
	background-image: url("../image/top/opencampus-bg.svg");
	background-repeat: no-repeat;
	background-position: top right 20px;
}
.sec-opencampus h2{
	font-size: 2.4rem;
	font-feature-settings: "palt" 1;
	line-height: 1;
	font-weight: 700;
	margin-bottom: 30px;
}
/*写真*/
.oc-image{
	border-radius: 10px;
	overflow: hidden;
}
/*4行見出し*/
.oc-p{
	font-size: 2.4rem;
	line-height: 1.6;
	font-weight: 700;
	padding-left: 0.5em;
	font-feature-settings: "palt" 1;
	margin: 20px 0 ;
}
/*3つのポイント*/
.oc-point3{
	background: #FFF;
	padding: 30px 20px;
	border-radius: 20px;
	color: #1FC0DB;
}
.oc-point3 h4{
	margin-bottom: 20px;
}
.oc-point3 li{
	font-weight: 400;
	font-size: 1.4rem;
	font-feature-settings: "palt" 1;
	margin: 0.5em 0;
}
.oc-point3 li:nth-child(1):before{content: '①';}
.oc-point3 li:nth-child(2):before{content: '②';}
.oc-point3 li:nth-child(3):before{content: '③';}

.btn_op-more a{
	display: block;
	background: #1FC0DB;
	color: #000;
	font-weight: 600;
	width: fit-content;
	padding: 0 60px;
	border-radius: 60px;
	line-height: 4;
	font-size: 1.5rem;
	margin: 20px auto 0;
	transition-duration: 0.3s;
}
.btn_op-more a:hover{
	opacity: 0.6;
}

@media (min-width:768px){
	.sec-opencampus{
		border-radius: 20px;
		min-width: 1150px;
		margin: 20px;
		padding: 100px 5%;
	}
	.sec-opencampus h2{
		font-size: 5.8rem;
		margin-bottom: -40px; 
	}
	/*4行見出し*/
	.oc-p{
		font-size: 3.3rem;
	}
	/*3つのポイント*/
	.oc-point3 h4{
		margin-bottom: 25px;
	}
	.oc-point3 li{
		font-size: 1.8rem;
		
	}
	/*グリッド表示*/
	.oc-grid{
		max-width: 1080px;
		margin: 0 auto;
		display: flex;
		column-gap: 25px;
		align-items: flex-end;
	}
	.oc-grid > div{
		flex: 1;
	}
}

/* Section Separator---------------------------------------------------------

　6パネル インデックス

----------------------------------------------------------------------------*/
.sec-top-index{
	padding: 20px;
	margin: 50px 0 50px;
}
.top-index ul{
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.top-index li{
	border: 2px solid #000;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
	transition-duration: .3s;
}
.top-index li a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.top-index li:hover{
	opacity: 0.6;
}
.top-index li .top-index-thumb{
	width: 30%;
}
.top-index li .top-index-link{
	width: 70%;
	padding: 1em 35px 1em 1em;
}
.top-index li .top-index-link h4{
	font-weight: 600;
	font-size: 1.4rem;
	border-bottom: 1px solid #000;
	width: fit-content;
	padding: 0 0 0.25em;
	margin: 0 0 0.25em;
}
.top-index li .top-index-link p{
	font-size: 1.2rem;
}
.top-index li .top-index-link{
	background-image: url("../image/top/index-arrow.svg");
	background-repeat: no-repeat;
	background-position: center right 10px;
	background-size: 20px;
}
@media (min-width:768px){
	.top-index{
		min-width: 1150px;
		margin: 75px 20px 75px;
	}
	.top-index ul{
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px 2%;
		min-width: 1000px;
		max-width: 1280px;
		margin: 0 auto;
	}
	.top-index ul li{
		border: 3px solid #000;
		width: 49%;
	}
	.top-index li .top-index-thumb{
		width: 157px;
	}
	.top-index li .top-index-link h4{
		font-size: 2rem;
	}
	.top-index li .top-index-link p{
		font-size: 1.5rem;
		line-height: 1.6;
	}
	.top-index li .top-index-link{
		padding: 0 55px 0 1em;
		width: calc( 100% - 157px );
		background-position: center right 10px;
		background-size: 30px;
	}
}

/* Section Separator---------------------------------------------------------

　SGグループについて

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

.sec-about{
	margin: 0 20px 50px;
	border-radius: 20px;
	padding: 20px 20px 0;
	background: rgb(116,223,235);
	background: linear-gradient(165deg, rgba(116,223,235,1) 29%, rgba(232,245,239,1) 57%);
}
.sec-about h2{
	font-size: 1.4rem;
	font-weight: 500;
	background: #FFF;
	width: fit-content;
	line-height: 1;
	padding: 0.8em 1em;
	border-radius: 30px;
}

.sec-about h3{
	font-size: 6.5vw;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.2em;
	margin: 1em 0;
}
.sec-about p{
	font-size: 1.4rem;
	line-height: 2;
}
@media (min-width:768px){
	.sec-about{
		min-width: 1150px;
		padding: 50px 50px 0;
		background: rgb(116,223,235);
		background: linear-gradient(45deg, rgba(116,223,235,1) 16%, rgba(232,245,239,1) 72%);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.about-txt{
		flex-basis: 50%;
		padding-bottom: 50px;
	}
	.about-img{
		flex-basis: 50%;
	}
	.sec-about h2{
		font-size: 1.6rem;
		padding: 0.8em 2em;
	}
	.sec-about h3{
		font-size: 3.3rem;
		letter-spacing: 0.5em;
	}
	.sec-about p{
		font-size: 1.6rem;
	}
}