/*
 1600px　↑ min-width
 1200px　↓ max-width
  990px　↓ max-width（nav消す）
  767px　↓ max-width

------------
header  高さ:76px 990px↓ で62px
枠       max-with:1180px width:90%（もしくは88%）
*/

/*---------------------- 
   fv 
-----------------------*/
.fv-grid-container{
	position: relative;
	overflow: hidden;
}
.bg-video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
.fv-grid-container:before{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, .5);
	/*backdrop-filter: blur(1px);*/
	content: "";
	z-index: 0;
}
.cnt{
	display: grid;
	gap: 1.25em;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows:6fr 3fr 1fr;
	min-height: 800px;
	height: auto;
	padding: calc(4.75em + 2.5em) 5% 2em;
	margin: 0 auto;
	max-width: calc(1180px + 10%);
	z-index: 1;
	position: relative;
	grid-template-areas: 
	"hero hero hero"
	"today-visit reserve guide"
	"med first guide";
}
	@media screen and (max-width: 990px){
		.cnt{
			gap: .75em;
			padding-left: 2.5%;
			padding-right: 2.5%;
		}
	}
	@media screen and (max-width: 767px){
		.cnt{
			padding-left: 1.5em;
			padding-right: 1.5em;
			grid-template-columns: 1fr 1fr;
			grid-template-rows:auto;
			grid-template-areas: 
			"hero hero"
			"today-visit today-visit"
			"reserve reserve"
			"med first"
			"guide guide";
		}
	}

.hero	{
	grid-area: hero;
}
.today-visit {
	grid-area: today-visit;
}
.reserve {
	grid-area: reserve;
}
.med {
	grid-area: med;
}
.first {
	grid-area: first;
}
.guide {
	grid-area: guide;
}


/* 配置位置 */
.g-row-end{
	align-content: end;
}
.g-row-start{
	align-content: start;
}
.g-row-center{
	align-content: center;
}


/* ボックス装飾
-----------------------------*/
.cnt-item{
	display: grid;
	border-radius: 1.5em;
	padding: 1em  1.5em;
	background-color: var(--white);
}

	@media screen and (max-width: 767px){
		.cnt-item{
			border-radius: 1.25em;
			padding: 1em 1.125em;
		}
	}

/* fv フォント
-----------------------------*/
.hero-copy{
	font-size: clamp(26px, 2.62626262626vw, 40px);
	line-height: 1.5;
}
.hero-txt{
	margin-top: 1em;
	font-size: clamp(15px, 1.51515151vw, 16px);
	/*clamp  (15 / 990 *100)vw */
}
.fv-large-tit{
	font-size: clamp(18px, 1.81818181vw, 24px);
	/*clamp  (18 / 990 *100)vw */
	line-height: 1.25;
	margin-bottom: .25em;
}
.fv-tit{
	font-size: clamp(14px, 1.41414141414vw, 16px);
	/*clamp  (14 / 990 *100)vw */
	line-height: 1.25;
}


/* 各装飾 
-----------------------------*/
/* ヒーロー */
.hero	{
	text-align: center;
	background-color: inherit!important;
	box-shadow: none;
}
	@media screen and (max-width: 767px){
		.hero	{
			width: 100%;
		}
	}

/* 本日予約 */
.flex-today-reseve{
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.to-re-link{
	font-size: clamp(12px, 1.21212121vw, 14px);
	/*clamp  (12 / 990 *100)vw */
	font-weight: 500;
	margin-top: .35em;
}
.to-re-link:hover{
	opacity: .8;
}
.iconlist{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: 1em;
	line-height: 1.0;
}
.iconlist .icon-item{
	width: calc(100% / 3);
	text-align: center;
	border-left: 1px solid #dedede;
	font-size: clamp(10px, 1.01010101vw, 12px);
	/*clamp  (10px / 990 *100)vw */
}
.iconlist .icon-item:first-child{
	border-left: none;
}
.iconlist img{
	display: block;
	width: 40px;
	margin: 0 auto .5em;
}
.iconlist .icon-item:hover img{
	transform: scale(1.1);
}

/* 診療・テーブル・カレンダー・アクセス */
.g-guide{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto 1fr;
	gap: .5em .75em;
	grid-template-areas: 
	"time time"
	"fv-table fv-table"
	"fv-calendar fv-access";
}
.fv-time{
	grid-area: time;
}
.fv-table{
	grid-area: fv-table;
}
.fv-calendar{
	grid-area: fv-calendar;
}
.fv-access{
	grid-area: fv-access;
}
.shinryo-time{
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-size: clamp(16px, 1.61616161616vw, 18px);
	/*clamp  (14 / 990px*100)vw */
	display: inline-block;
	margin-right: .5em;
}
.shinryo-time span{
	position: relative;
	top: -2px;
	display: inline-block;
	width: 2.75em;
	line-height: 1.0;
	border-radius: 1em;
	background: var(--vividgreen);
	font-size: clamp(12px, 1.21212121212vw, 13px);
	/*clamp  (11px / 990 *100)vw */
	font-weight: bold;
	color: #fff;
	text-align: center;
	padding: .25em 0;
	margin-right: .5em;
}
.fv-table table{
	width: 100%;
	font-size: clamp(12px, 1.21212121212vw, 13px);
	/*clamp  (12px / 990 *100)vw */
	line-height: 1.0;
	margin: .25em 0;
}
.fv-table th,
.fv-table td{
	width: calc(100% / 8);
	border-bottom: 1px solid;
	font-weight: normal;
	vertical-align: middle;
	padding: .5em 0;
}
.fv-table td{
	text-align: center;
}
.fv-table tr:first-child th,
.fv-table tr:first-child td{
	padding-top: 0;
}
.fv-calendar a,
.fv-access a{
	position: relative;
	display: block;
	width: 100%;
	font-size: clamp(12px, 1.21212121vw, 14px);
	/*clamp  (12 / 990 *100)vw */
	border-radius: .75em;
	text-align: center;
	padding:.5em 0 .25em;
	background: var(--vividgreen);
	color: var(--white);
}
.fv-calendar div,
.fv-access div{
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
}
.fv-calendar div{
	background: url(../images/common/icon-calendar-white.png) no-repeat center;
	background-size: 1.5em auto;
}
.fv-access div{
	background: url(../images/common/icon-location-white.png) no-repeat center;
	background-size: 1.5em auto;
}

	@media screen and (max-width: 767px){
		.fv-calendar a,
		.fv-access a{
			margin-top: .5em;
		}
	}

/* 薬・初めての方へ */
.med,
.firs{
	transition: .3s box-shadow;
}
.med:hover,
.first:hover{
	opacity: 1.0;
	box-shadow: 0 .25em .75em rgba(50,50,50,.5);
}
.med .fv-tit div{
	background-image: url(../images/common/icon-medicine-green.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 1.25em;
	padding-left: 1.75em;
	padding-top: 2px;
	padding-bottom: 2px;
}
.first .fv-tit div{
	background-image: url(../images/common/icon-visit-first-green.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 1.25em;
	padding-left: 1.75em;
	padding-top: 2px;
	padding-bottom: 2px;
}
/*---------------------- 
   index section 
-----------------------*/
.idx-sect-normal{
	max-width: 1180px;
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.idx-sect-small{
	max-width: 1000px;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}
/*---------------------- 
   index font
-----------------------*/
.idx-tit-large{
	font-size: clamp(26px, 2.62626262626vw, 40px);
	/*clamp  (26 / 990px*100)vw */
}
.idx-tit-normal{
	font-size: clamp(24px, 2.42424242424vw, 34px);
	/*clamp  (24 / 990px*100)vw */
}
.idx-large{
	font-size: clamp(22px, 2.22222222222vw, 24px);
	/*clamp  (20 / 990px*100)vw */
}
.ls-1{
	letter-spacing: 1em;
}
/*---------------------- 
   link
-----------------------*/
.btn,
.btn-long,
a.about-card{
	box-shadow: 0 .25em .75em rgba(50,50,50,.2);
	transition: .3s box-shadow;
}
.btn:hover,
.btn-long:hover,
a.about-card:hover{
	opacity: 1.0;
	box-shadow: 0 .25em .75em rgba(50,50,50,.5);
}

/*---------------------- 
   各装飾
-----------------------*/
/*ニュースSNS
------------------------*/
.news-sns {
	margin-top: 2em;
	margin-bottom: 2.75em;
}
.news-sns .news{
	width: 80%;
}
.news-sns .sns{
	width: 15%;
	font-family: "Roboto", sans-serif;
}
	@media screen and (max-width: 990px){
		.news-sns .news{
			width: 77.5%;
		}
		.news-sns .sns{
			width: 17.5%;
		}
	}
	@media screen and (max-width: 767px){
		.news-sns {
			margin-top: 1.25em;
			margin-bottom: 2em;
		}
		.news-sns .news{
			width: 100%;
		}
		.news-sns .sns{
			width: 100%;
			margin-top: 1em;
		}
		.news-sns .sns .tit{
			display: none;
		}
	}

.news-sns .news .rss-link{
	width: calc(100% - 9em);
}
	@media screen and (max-width: 767px){
		.news-sns .news .rss-link{
			width: 100%;
		}
	}

.rss-link {
	border-top: 1px solid var(--lightgray);
	margin-top: .5em;
}
.rss-link li{
	padding: 1.25em 0;
	border-bottom: 1px solid var(--lightgray);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.rss-link span{
	font-size: .875em;
	width: 8em;
	text-align: center;
}
.rss-link a{
	width: calc(100% - 8em);
}
	@media screen and (max-width: 767px){
		.rss-link span{
			text-align: left;
			width: 6em;
		}
		.rss-link a{
			width: calc(100% - 6em);
		}
	}

.sns-list li {
	margin-top: 1em;
}
.sns-list a {
	display: flex;
	align-items: center;
}
.sns-icon {
	width: 3em;
	height: 3em;
	display: inline-block;
	margin-right: 1.25em;
}
	@media screen and (max-width: 767px){
		.sns-list{
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.sns-list li{
			margin-top: .5em;
		}
		.sns-icon {
			margin-right: .75em;
		}
	}
/* 診療予防ケア
------------------------*/
.shinryo-yobo-care{
	margin-left: auto;
	margin-right: auto;
	max-width: 1360px;
	width: calc(100% - 1em);
	position: relative;
	padding-bottom: 4em;
}
.shinryo-yobo-care-bg{
	max-width: 1180px;
	width: calc(100% - 1em);
	margin: 0 auto;
	padding: 2.5em .5em 2.5em .5em;
	position: relative;
}
.edge-img{
	position: absolute;
	width: 8em;
	height: 8em;
}
	@media screen and (max-width: 767px){
		.shinryo-yobo-care{
			padding-bottom: 4em;
		}
		.shinryo-yobo-care-bg{
			padding: 2em 1em;
		}
		.edge-img{
			width: 5em;
			height: 5em;
		}
	}
.edge-tl{
	top: 0; left: 0;
}
.edge-tr{
	top: 0; right: 0;
	transform: scaleX(-1);
}
.edge-bl{
	bottom: 0; left: 0;
	transform: scaleY(-1);
}
.edge-br{
	bottom: 0; right: 0;
	transform: scale(-1, -1);
}
.people-img{
	position: absolute;
	height: auto;
	pointer-events: none;
}
.people-bl{
	bottom: 0; left: 0;
	max-width: 270px;
}
.people-br{
	bottom: 0; right: 0;
	max-width: 202px;
}
	@media screen and (max-width: 767px){
		.people-bl{
			max-width: 200px;
		}
		.people-br{
			max-width: 150px;
		}
	}

.shinryo-yobo-care-ul{
	justify-content: center;}

.shinryo-yobo-care-ul li{
	margin: 0 1em;
	line-height: 1.25;
	width: clamp(150px, 15.1515151515vw, 175px);
	height: clamp(150px, 15.1515151515vw, 175px);
	/*clamp  (150 / 990 *100)vw */;
	position: relative;
}

	@media screen and (max-width: 990px){
		.shinryo-yobo-care-ul li{
			width: 130px;
			height: 130px;
		}
	}
	@media screen and (max-width: 767px){
		.shinryo-yobo-care-ul li{
			margin: 0 .5em;
		}
	}

.shinryo-yobo-care-ul li a{
	display: block;
	width: 100%;
	height: 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: .2s all;
	border-radius: 50%;
	box-shadow: 0 .25em .75em rgba(180,180,180,.25);
}
.shinryo-yobo-care-ul li a:hover{
	transform: scale(1.05);
	box-shadow: 0 .25em .75em rgba(180,180,180,.5);
}

.bg-shinryo{
	background-image: url(../images/index/bg-shinryo.png);
}
.bg-yobou{
	background-image: url(../images/index/bg-yobou.png);
}
.bg-care{
	background-image: url(../images/index/bg-orange.png);
}
.shinryo-yobo-care-ul div.em{
	font-size: 1.75em;
	font-weight: 500;
}
	@media screen and (max-width: 767px){
		.shinryo-yobo-care-ul div.em{
			font-size: 1.5em;
		}
	}

.shinryo-yobo-care-ul div.arw{
	width: 2em;
	height: 2em;
	position: absolute;
	bottom:.75em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1em auto;
}
.bg-shinryo div.arw,
.bg-care div.arw{
	background-image: url(../images/common/icon-arw-white.png);
}
.bg-yobou div.arw{
	background-image: url(../images/common/icon-arw-gray.png);
}

/* ウェルネス
------------------------*/
.wellness{
	line-height: 1.0;
}
.wellness .idx-sect-normal{
	margin-bottom: 0;
	line-height: 1.75;
	position: relative;
	z-index: 1;
}
.wellness img{
	margin-top: -2.75em;
	position: relative;
	z-index: -1;
	object-fit: cover;
	aspect-ratio: 2 / 1;
}
	@media screen and (max-width: 767px){
		.wellness{
			margin-top: 3em;
		}
		.wellness img{
			margin-top: 0;
			aspect-ratio: 4 / 3;
		}
	}
.wellness .btn-long:hover{
	opacity: 1.0;
}

/* ギャラリーカミングスーン
------------------------*/
.gallery-commingsoon .idx-sect-small{
	border: 1em solid var(--lightgray);
	position: relative;
	margin-top: 2em;
}
.gallery-commingsoon .clm2-block{
	padding: 1em 2em;
}
	@media screen and (max-width: 767px){
		.gallery-commingsoon .clm2-block{
			text-align: center;
		}
		.gallery-commingsoon .clm2-block:nth-child(1){
			padding-bottom: 0;
		}
		.gallery-commingsoon .clm2-block:nth-child(2){
			padding-top: 0;
		}
		.gallery-commingsoon .clm2-block img{
			display: block;
			width: 50%;
			margin: 0 auto;
		}
	}
/* 100年
------------------------*/
.year100-about {
	background: url(../images/index/bg-100year.jpg) no-repeat center top;
	background-size: 100% auto;
	margin-top: 1.5em;
	padding: 2.5em 0;
}
.year100-about-flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:2.75em;
}
.year100 {
	flex: 1;
}
.year100 .idx-tit-normal div{
	display: inline-block;
	background: var(--white);
	padding: 0 .25em;
}
.year100 .idx-tit-normal .vividgreen{
	padding-right: .25em;
}
.about {
	flex: 0 0 320px;
}
a.about-card {
	display: block;
	padding: 2em 1em;
	text-align: center;
}
.about-card img{
	max-width: 140px;
}


@media screen and (max-width: 990px){
	.year100-about {
		background-size: 125% auto;
	}
	.year100-about-flex {
		gap:2.75em;
	}
	.about {
		flex: 0 0 220px;
	}
	a.about-card {
		padding: 1em;
	}
}
@media screen and (max-width: 767px){
	.year100-about {
		padding: 1em 0 2em;
		background-position: center bottom;
		background-size: auto 75%;
	}
	.year100-about-flex {
		flex-direction: column;
		text-align: center;
	}
	.year100 {
		width: 88%;
	}
	.year100 .idx-tit-normal div{
		padding: 0;
	}
	.year100 .idx-tit-normal .vividgreen{
		padding-right: 0;
	}
	.about {
		width: 88%;
		flex: none;
		margin-top: 1em;
	}
	a.about-card {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
	.about-card img{
		max-width: 110px;
	}
}
/* リクルート
------------------------*/
.recruit{
	background: var(--palegray) ;
	padding-top: 2.75em;
	padding-bottom: 2em;
}
.recruit .idx-sect-normal{
	margin-top: 0;
	margin-bottom: 0;
}
.recruit-flex{
	padding: 2.5em;
	width: 100%;
	background:
	url("../images/common/bg-noise.png") center/78px auto repeat,
	url("../images/index/bg-recruit.png") center/400px auto no-repeat,
	linear-gradient(45deg, #fff 0%, #b2d7dd 100%);
}
.recruit-flex .clm2-block .btn{
	margin-left: auto;
}
@media screen and (max-width: 767px){
	.recruit-flex{
		width: calc(100% - 2em);
		padding: 1.25em 1em 1.25em 1.5em;
		background:
		url("../images/common/bg-noise.png") center/78px auto repeat,
		url("../images/index/bg-recruit.png") center/contain no-repeat,
		linear-gradient(45deg, #eee 0%, #b2d7dd 100%);
	}
	.recruit-flex .btn-recruit{
		width: 100%;
		text-align: right;
		margin-top: 1em;
	}
}