@charset "UTF-8";
/* CSS Document */
header.index {
}
.wrap-fv {
  position: relative;
	margin-bottom: 160px;
}
.wrap-fv::after {
	content: '';
	background: url(/medical/common/img/img_bg_pattern.png) no-repeat bottom left;
	background-size: contain;
	width: 1550px;
	height: 295px;
	position: absolute;
	left: 52%;
	bottom: -140px;
}
.wrap-fv-text {
	position: absolute;
	top: 40%;
	left: 50px;
	max-width: 800px; 
	z-index: 1;
}
.wrap-fv-text .wrap-bg {
	display: inline-block;
	font-size: 5.6rem;
	font-weight: bold;
	line-height: 1;
	padding: .35em .5em .25em .5em;
	margin-bottom: .3em;
	background: #fff;
		}
.wrap-fv-text .wrap-bg-sub {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}
	.wrap-fv-text .wrap-bg {
		transition: 1.4s cubic-bezier(0.3, 0, 0.1, 1);
  	transition-property: clip-path;
		clip-path: inset(0 100% 0 0);
	}
	.wrap-fv-text.is-active .wrap-bg {
		clip-path: inset(0);
	}

@media print, screen and (min-width: 768px) {
header.index.active {
}
.wrap-fv {
	min-height: 400px;
	max-height: 720px;
}
.wrap-fv::before {
	content: '';
	background: var(--blue);
	position: absolute;
  width: 100%;
	min-width: 2000px;
	height: 100%;
	object-fit: cover;
	clip-path: polygon(100% calc(100% - 120px),0 calc(100% - 20px),0 120px,100% 20px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.wrap-fv-text .wrap-bg-sub .inn {
	transition: 1.4s cubic-bezier(0.3, 0, 0.1, 1);
	transition-property: clip-path;
	clip-path: inset(0 100% 0 0);
}
.wrap-fv-text.is-active .wrap-bg-sub .inn {
	clip-path: inset(0);
}
.wrap-fv-text .wrap-bg-sub .inn {
  color: #fff;
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 1.8rem;
	line-height: 40px;
  font-weight: bold;
  padding: 0  0 0 .75em;
	margin-bottom: .5em;
	background: rgba(var(--blue-rgb), 0.8) ;
	-webkit-box-decoration-break: clone;
    box-decoration-break: clone;
	z-index: -1;
}
}
@media screen and (min-width: 1920px) {
}
@media screen and (max-width: 767px) {
	.wrap-fv {
		margin-bottom: 60px;
	}
.wrap-fv::after {
	content: '';
	background: url(/medical/common/img/img_bg_pattern_sp.png) no-repeat bottom left;
	background-size: contain;
	width: 764px;
	height: 148px;
	left: 25%;
	bottom: -75px;
}
.wrap-fv-text  {
	top: auto;
	bottom: 2em;
	left: 0;
	padding: 0 5vw;
}
.wrap-fv-text .wrap-bg {
	font-size: 3.6rem;
}
.wrap-fv-text .wrap-bg-sub {
		transition: 1.4s cubic-bezier(0.3, 0, 0.1, 1);
  	transition-property: clip-path;
		clip-path: inset(0 100% 0 0);
	position: relative;
}
	.wrap-fv-text.is-active .wrap-bg-sub {
		clip-path: inset(0);
	}
	.wrap-fv-text .wrap-bg-sub .inn {
	font-weight: bold;
	padding: .25em 0 .25em .5em;
	display: inline;
  color: #fff;
		background: linear-gradient(transparent 0%, rgba(var(--blue-rgb), .8) 0%);
		-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 2.5;
}
	.wrap-fv-text .wrap-bg-sub .inn:last-child {
		padding-right: .5em;
	}
	.splide {
		width: 100% !important;
	}
}

/* コンテンツ
-------------------------------------------------*/
.wrap-con.index {
  padding-top: 3em;
}


/*　スライダー　*/
/* ============================================ */
/* スライダーのサイズ
-------------------------------------------------*/
.splide {
	background: #fff;
  min-height: 400px;
	max-height: 720px;
	max-width: 1500px;
	width: calc(100% - 4vw);
	margin: auto;
	z-index: 3;
}
.splide .splide__slide img,
.splide .splide__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
	transition: 2s ease-out;
  transform: scale(1.15);
}
.splide__track {
  min-height: 400px;
	max-height: 720px;
  height: 100vh;
  width: 100%;
}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.splide,
	.splide__track {
		width: 100%;
		max-height: 600px;
	}
}
/*背景スライダー
-------------------------------------------------*/
.splide__slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media print, screen and (min-width: 960px) {
}
@media screen and (max-width: 959px) {
}
/* フェードインテキストのスタイル 
-------------------------------------------------*/
  /* スライドフェードイン */
.splide__slide.is-active img {
  transform: scale(1);
	transition-delay: 0s;
}
.splide__slide.is-prev img,
.splide__slide.is-next + .splide__slide img {
  transform: scale(1);
}
.pagination {
  transform: translateX(0%);
  z-index: 2;
  display: block;
  left:0;
  height:4px;
  bottom:0;
  width: 100%;
  position:absolute;
}
  .pagination #progressBarOuter {
    overflow: hidden;
    width: 100%;
    height: 4px;
    display: block;
    background-color: #666;
    position: relative;
}
    .pagination #progressBarOuter #progressBar {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background-color: var(--blue);
      top: 0;
      left: 0;
      animation: linear 5000ms;
      animation-fill-mode: backwards;
      opacity: 0;
      transform-origin: left; 
}
@keyframes progressAnime {
  0% {
    transform: scaleX(0); }
  100% {
    transform: scaleX(1); } 
}

/*　アニメーション　*/
/* ============================================ */
/* 表示されているスライドのテキスト */
/*
.wrap-anime  {
  opacity: 0;
}
*/
/*.wrap-fadein-under,*/
/*
.active.wrap-fadein-under {
  animation-delay: .3s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUnder;
  opacity: 1;
}
*/
/*.wrap-fadein-under,*/
/*
.active.wrap-fadein-under {
  animation-delay: .3s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUnder;
  opacity: 1;
}
*/
/* アニメーション */
/*
@keyframes fadeInUnder {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*/


.wrap-news {
	position: relative;
	margin-bottom: 160px;
}
.news-inner {
	background: #fff;
	padding: 0 60px 60px;
	position: relative;
	width: calc(100% - 2em);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	z-index: 2;
}
.news-inner h2 {
	font-size: 3.6rem;
	font-weight: bold;
	margin-bottom: 1em;
}
.news-inner ul li {
	display: flex;
	border-bottom: 1px solid #ccc;
	padding: 1em;
}
.news-inner .news-day {
	color: #999;
	font-size: .9em;
	font-weight: bold;
	margin-right: 2em;
}
@media print, screen and (min-width: 768px) {
.wrap-news::after {
	content: '';
	position: absolute;
	width: 100%;
	min-width: 2000px;
	height: calc(100% + 160px);
	object-fit: cover;
	background: var(--light-blue);
	clip-path: polygon(100% 100%,0 100%,0 40px,100% 140px);
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
}
.wrap-con-main {
	background: var(--blue);
	position: relative;
	padding-bottom: 160px;
}
.wrap-con-main::before {
	content: '';
	position: absolute;
	width: 100%;
	min-width: 2000px;
	height: 180px;
	object-fit: cover;
	background: var(--light-blue);
	clip-path: polygon(100% 80px,0 100%,0 0,100% 0);
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
}
.wrap-con-main > div,
.wrap-con-sub > div {
	max-width: 1500px;
	width: calc(100% - 4vw);
	margin: auto;
	display: flex;
	justify-content: space-between;
	position: relative;
}
.wrap-con-main section {
	background: #fff;
	width: 48%;
	padding-bottom: 2.5em;
	display: flex;
	flex-direction: column;
}
.wrap-con-main section h2,
.wrap-con-main section p,
.wrap-con-main section ul {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}
.wrap-con-main section h2 {
	font-size: 4.2rem;
	font-weight: bold;
	margin-top: .75em;
	margin-bottom: .75em;
}
.wrap-con-main section p {
	font-size: 1.125em;
	margin-bottom: 1.5em;
}
.wrap-con-sub {
	padding: 40px 0;
}
.wrap-con-sub section {
	background: #fff;
	width: calc((100% - 4px) / 3);
	border-left: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	padding: 3%;
}
.wrap-con-sub section:last-child {
	border-right: 1px solid #ccc;
}
.wrap-con-sub section h2 {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 1em;
	line-height: 1.5;
}
.wrap-con-main img {
	clip-path: polygon(100% calc(100% - 50px),0 100%,0 0,100% 0);
}
.wrap-con-main section ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: auto;
}
.wrap-con-main section ul li {
	width: 48%;
	max-width: 290px;
}
.wrap-con-sub section ul {
	max-width: 290px;
	width: 100%;
	margin: auto auto 0;
}
.wrap-con-main section ul li,
.wrap-con-sub section ul li {
	font-size: 1.4rem;
	font-weight: bold;
}
.wrap-daicel-g {
	width: 128px;
	margin: auto;
}
@media (min-width: 960px) and (max-width: 1920px) {
.wrap-con-main section p {
font-size: calc(1.6rem + ((1vw - (960 / 100 * 0.1rem)) * 100 * (18 - 16) / (1920 - 960)));
	}
.wrap-con-main section h2 {
font-size: calc(3.6rem + ((1vw - (960 / 100 * 0.1rem)) * 100 * (42 - 36) / (1920 - 960)));
	}
	.wrap-con-sub section h2 {
font-size: calc(1.6rem + ((1vw - (960 / 100 * 0.1rem)) * 100 * (20 - 16) / (1920 - 960)));
	}
}
@media screen and (max-width: 767px) {
	.wrap-news {
		margin-bottom: 40px;
	}
	.news-inner {
		background: none;
		width: 100%;
		padding: 0;
	}
	.news-inner h2 {
		font-size: 2.4rem;
		padding-left: 1.5rem;
		margin-bottom: .5em;
	}
	.news-inner ul li {
		flex-direction: column;
	}
	.wrap-con-main > div,
	.wrap-con-sub > div {
		display: block;
		width: 100%;
		background: #fff;
	}
	.wrap-con-sub > div {
		padding: 0 1em;
		max-width: 480px;
	}
	.wrap-con-main section,
	.wrap-con-sub section {
		width: 100%;
		border-left: none;
		border-right: none !important;
		padding-bottom: 4em;
	}
	.wrap-con-main section h2,
	.wrap-con-main section p,
	.wrap-con-main section ul {
		width: calc(100% - 3rem);
	}
	.wrap-con-main section h2 {
		font-size: 3rem;
		margin-top: 1.25em;
	}
	.wrap-con-main section p {
		font-size: 1em;
	}
	.wrap-con-main img {
		clip-path: polygon(100% calc(100% - 40px),0 100%,0 0,100% 0);
	}
	.wrap-con-main section ul {
		align-items: center;
		flex-direction: column;
	}
		.wrap-con-main section ul li {
			width: 100%;
	}
	.wrap-con-sub {
		padding: 2em 1em;
		background: var(--light-blue);
	}
	.wrap-con-sub section {
		padding: 2em 0;
	}
	.wrap-con-sub section:not(:last-child) {
		border-bottom: 1px solid #ccc;
	}
	.wrap-con-sub section h2 {
		font-size: 1.8rem;
	}
}

/*print CSS
-------------------------------------------------*/
@media print {
.splide.auto,
  .wrap-fv,
  .splide__list,
  .splide__track{
    height: 60vh !important;
  }
/*
  .wrap-lead {
  display: flex;
  background: rgba(256,256,256,0.1);
  width: 50%;
  padding: 0 3vw;
  margin-left: auto;
  backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  height: 60vh;
  max-height: 60vh;
  min-height: 60vh;
}
*/
  .splide__slide {
    overflow: hidden;
    width: calc(50%) !important;
  }
}