@charset "utf-8";

/* ------------------------------
 TOP
------------------------------ */
/* ------------------------------
 ヘッダー (PC)
------------------------------ */
@media print, screen and (min-width: 768px) {
	.header.is-before-scrolled {
		background-color: transparent;
	}
}
/* ------------------------------
 メインイメージ (PC)
------------------------------ */
.topmainImg {
	position: relative;
	width: 100%;
	height: auto;
	top: 0;
	z-index: 0;
	text-align: center;
}
.topmainImg .inBlock {
	position: relative;
	z-index: 10;
}
.topmainImg h1.mainLead {
	position: absolute;
	width: 546px;
	height: 203px;
	top: 120px;
	left: -40px;
}
.topmainImg h1.mainLead::before {
	content: none;
}
.topmainImg .cloud01, .topmainImg .cloud02 {
	position: absolute;
	top: 0;
}
.topmainImg .cloud01, .topmainImg .cloud02,
.topmainImg .cloud01 img, .topmainImg .cloud02 img {
	width: 105%;
	height: auto;
}
.topmainImg .cloud01 {
	left: 0;
	animation-name: cloud01;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: alternate;
	z-index: 2;
}
@keyframes cloud01 {
	0% {
		left: -70px;
	}
	100% {
		left: -20px;
	}
}
.topmainImg .cloud02 {
	right: 0;
	animation-name: cloud02;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: alternate;
	z-index: 1;
}
@keyframes cloud02 {
	0% {
		right: -70px;
	}
	100% {
		right: -20px;
	}
}
@media print, screen and (min-width: 768px) {
	.topmainImg {
		height: 1471px;
		background: url(/img/mainImg.jpg) no-repeat center top / cover;
	}
}
/* ------------------------------
 メインイメージ (SP)
------------------------------ */
@media  screen and (max-width: 767px) {
	.topmainImg {
		height: 500px;
		background: url(/img/mainImg_sp.jpg) no-repeat center top / cover;
		margin-top: 55px;
	}
	.topmainImg h1.mainLead {
		width: 87%;
		height: auto;
		top: 25px;
		left: -2%;
		padding-top: 0;
	}

	@keyframes cloud01 {
		0% {
			left: -5%;
		}
		100% {
			left: 0%;
		}
	}
	@keyframes cloud02 {
		0% {
			right: -5%;
		}
		100% {
			right: 0%;
		}
	}
}
@media  screen and (max-width: 560px) {
	.topmainImg .cloud01, .topmainImg .cloud02,
	.topmainImg .cloud01 img, .topmainImg .cloud02 img {
		width: 607px;
		height: 500px;
	}
}
@media  screen and (max-width: 435px) {
	@keyframes cloud01 {
		0% {
			left: -30%;
		}
		100% {
			left: -25%;
		}
	}
	@keyframes cloud02 {
		0% {
			right: -30%;
		}
		100% {
			right: -25%;
		}
	}
}

/* ------------------------------
 講座紹介（PC）
------------------------------ */
.about {
	position: relative;
	margin-top: -420px;
	margin-bottom: 160px;
	z-index: 10;
}
.about .inBox {
	position: relative;
}
.about .inBox::before {
	content: "";
	position: absolute;
	width: 724px;
	height: 562px;
	top: -70px;
	left: -70px;
	background: url(/img/about_shizuoka.svg) no-repeat center top / cover;
	z-index: -1;
}
.contentsHome .about .lead {
	font-size: 3.8rem;
	line-height: 1.6;
	color: #fff;
	margin-bottom: 30px;
}
.about p {
	color: #fff;
}
figure img {
	border-radius: 15px;
}
@media print, screen and (min-width: 768px) {
	.about figure,
	.about figure img {
		width: 546px;
		height: auto;
	}
	.contentsHome .about .btn a:hover {
		color: #fff;
		border-color: #fff;
	}
	.contentsHome .about .btn a:hover:after {
		background: url(../img/icon_arrow_w.svg) no-repeat;
	}
}
/* ------------------------------
 講座紹介 (SP)
------------------------------ */
@media  screen and (max-width: 767px) {
	.about {
		margin-top: -110px;
		margin-bottom: 200px;
	}
	.about::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 606px;
		background-color: #33996c;
		top: 110px;
		left: 0;
		z-index: -1;
	}
	.about .inBox::before {
		width: 347px;
		height: 269px;
		top: 135px;
		left: 50%;
		transform: translateX(-50%);
	}
	.contentsHome .about .lead {
		font-size: 2.4rem;
		padding-top: 0;
		margin-bottom: 15px;
	}
	.about figure {
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	.about figure img {
		border-radius: 7px;
	}
	figure img {
		border-radius: 5px;
	}
}

/* ------------------------------
 お知らせ（PC）
------------------------------ */
.newsBlock {
	position: relative;
	margin-bottom: 60px;
}
.newsBlock .inBlock {
	position: relative;
}
.newsBlock .inBlock::after {
	content: "";
	position: absolute;
	width: 280px;
	height: 91px;
	top: -30px;
	right: -110px;
	background: url(/img/cloud01.png) no-repeat top left / cover;
}
.newsBlock .inBlock::before {
	content: "";
	position: absolute;
	width: 217px;
	height: 80px;
	bottom: -30px;
	left: -50px;
	background: url(/img/cloud02.png) no-repeat top left / cover;
}
.newsBlock::before {
	content: "";
	position: absolute;
	width: 280px;
	height: 150px;
	top: -160px;
	left: -70px;
	background: url(/img/cloud03.png) no-repeat top left / cover;
}

.newsBlock h2, .blog h2 {
	margin-bottom: 45px;
}
.newsList {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 40px;
}
.newsList li {
	width: 258px;
	height: auto;
}
.newsList figure {
	width: 100%;
	height: 258px;
	margin-bottom: 25px;
}
.newsList .date {
	font-size: 1.4rem;
}

.cate {
	width: 106px;
	margin-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
	.np {
		position: relative;
		z-index: 1;
	}
	.np::before {
		content: "";
		position: absolute;
		width: 535px;
		height: 100%;
		background-color: #f4efe6;
		top: -210px;
		left: 0;
		z-index: -1;
	}
	.newsBlock::after {
		content: "";
		position: absolute;
		width: 285px;
		height: 221px;
		bottom: -80px;
		right: 0;
		background: url(/img/cloud04.png) no-repeat top left / cover;
		z-index: -1;
	}
	.newsList {
		height: auto;
		gap: 0 36px;
	}
	.newsList li {
		min-height: 400px;
	}
	.newsList .text {
		-webkit-line-clamp: 2;
	}
	.tag {
		width: 125px;
	}
}
/* ------------------------------
 お知らせ (SP)
------------------------------ */
@media  screen and (max-width: 767px) {
	.newsBlock .inBlock::after {
		width: 140px;
		height: 45px;
		top: 80px;
		right: calc(-5% - 40px);
	}
	.newsBlock .inBlock::before {
		width: 183px;
		height: 68px;
		bottom: -100px;
		left: calc(-5% - 30px);
	}
	.newsBlock::before {
		width: 145px;
		height: 77px;
		top: -85px;
		left: -40px;
	}
	.newsList {
		justify-content: space-between;
	}
	.newsList li {
		width: 47.25%;
	}
	.newsList li:nth-child(1),
	.newsList li:nth-child(2) {
		margin-bottom: 40px;
	}
	.newsList figure {
		height: auto;
		margin-bottom: 15px;
	}
	.text {
		font-size: 1.4rem;
	}
	
	.cate {
		font-size: 1.3rem;
		margin-right: 5px;
		margin-bottom: 3px;
	}
}

/* ------------------------------
 総合診療研修プログラム(PC)
------------------------------ */
.programBlock  {
	position: relative;
	padding-top: 135px;
}
.programBlock::after {
	content: "";
	position: absolute;
	right: 0;
	z-index: -1;
}
.programBlock figure img {
	border-radius: 0 15px 15px 0;
}
@media print, screen and (min-width: 768px) {
	.programBlock {
		z-index: 1;
	}
	.programBlock::after {
		bottom: 0;
		background: url(/img/illust_program.png) no-repeat top right / cover;
	}
	.programBlock .inBox {
		position: absolute;
		width: 546px;
		height: auto;
		max-height: 580px;
		background: #fff;
		padding: 85px 70px 100px;
		border-radius: 15px;
		left: 50%;
		bottom: -70px;
	}
	.programBlock h2::before {
		left: -70px;
	}
	.programBlock figure img {
		width: 60%;
		height: 681px;
		object-fit: cover;
		object-position: 60% top;
	}
	.programBlock::after {
		width: 40%;
		height: 809px;
	}
}
@media screen and (max-width: 1350px) {
	.programBlock figure img {
		width: 70%;
		object-position: 70% top;
	}
}
/* ------------------------------
 総合診療研修プログラム (SP)
------------------------------ */
@media  screen and (max-width: 767px) {
	.programBlock::after {
		width: 100%;
		height: 285px;
		top: 0;
		background: url(/img/illust_program_sp.png) no-repeat top center / cover;
	}
	.programBlock figure {
		margin-right: 5%;
	}
	.programBlock .inBox {
		padding: 40px 5% 70px;
	}
	.programBlock figure img {
		width: 100%;
		height: auto;
	}
}

/* ------------------------------
 ブログ（PC）
------------------------------ */
.blog {
	position: relative;
	background: #f4efe6;
	padding: 180px 0 140px;
	margin-bottom: 180px;
}
.blog .inBlock {
	position: relative;
}
.blog::before {
	content: "";
	position: absolute;
	width: 663px;
	height: 275px;
	bottom: 0;
	left: 0;
	background: url(/img/illust_blog02.png) no-repeat top left / cover;
}
.blog .inBlock::after {
	content: "";
	position: absolute;
	width: 70px;
	height: 70px;
	top: 20px;
	right: -40px;
	background: url(/img/illust_blog01.png) no-repeat top left / cover;
}
@media print, screen and (min-width: 768px) {
	.blogList {
		margin-bottom: 40px;
	}
	.blogList .swiper-wrapper {
		display: flex;
		justify-content: space-between;
	}
	.blogList .swiper-slide {
		width: 350px;
	}
	.blogList .swiper-slide figure {
		width: 350px;
		height: 350px;
		margin-bottom: 25px;
	}
}
/* ------------------------------
 ブログ（SP）
------------------------------ */
@media  screen and (max-width: 767px) {
	.blog {
		padding: 60px 0 95px;
		margin-bottom: 80px;
	}
	.blog .inBlock {
		margin-left: 0;
		margin-right: 0;
	}
	.blog::before {
		width: 272px;
		height: 116px;
		bottom: 0;
		left: -83px;
		background: url(/img/illust_blog02.png) no-repeat top left / cover;
	}
	.blog .inBlock::after {
		width: 54px;
		height: 55px;
		top: -70px;
		right: 5px;
		background: url(/img/illust_blog01.png) no-repeat top left / cover;
	}
	/* -- swiper -- */
	.blogList {
		overflow: visible;
		padding: 0 20%;
		margin-bottom: 30px;
	}
	.blogList .swiper-slide a {
	 	overflow: hidden;
	}
	.blogList .swiper-slide figure,
	.blogList .swiper-slide figure img {
		width: 100%;
		height: auto;
	}
	.blogList .swiper-slide figure {
		margin-bottom: 20px;
	}
}

/* ------------------------------
 教育・研究（PC）
------------------------------ */
.action h2 {
	padding-top: 18px;
	margin-bottom: 25px;
}
.action h2::before {
	top: 0;
}
@media print, screen and (min-width: 768px) {
	.action h2 {
		font-size: 2.8rem;
	}
	.action h2::before {
		left: 0;
	}
}
/* ------------------------------
 教育・研究（SP）
------------------------------ */
@media  screen and (max-width: 767px) {
	.action h2 {
		padding-top: 15px;
		margin-bottom: 15px;
	}
	.action .inBox.fl {
		margin-bottom: 80px;
	}
}