@charset "UTF-8";
/* CSS Document */


/* ==========================================================
   長沢病院 TOPページ専用CSS
   top-test-202608
========================================================== */


/* ==========================================================
   1. TOP FIRST VIEW
========================================================== */

.top-firstview {
	position: relative;

	width: 100%;

	height: 100vh;
	height: 100svh;

	margin: 0;
	padding: 0;

	overflow: hidden;
}


/* ==========================================================
   2. メインビジュアル
========================================================== */

.top-firstview .header_2 {
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	top: auto;
}


.top-firstview .header_2_in {
	width: 100%;
	height: 100%;

	min-height: 0;

	margin: 0;
	padding: 0;
}


.top-firstview .mv-bg {
	position: relative;

	width: 100%;
	max-width: none;

	height: 100%;
	min-height: 0;

	margin: 0;
	padding: 0;

	background: none;
}


.top-firstview .slide {
	position: relative;

	width: 100%;
	max-width: none;

	height: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;
}


.top-firstview .slide-image {
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}



/* ==========================================================
   3. 初診受付ボタン
========================================================== */

.first-visit-btn {
	position: absolute;

	right: 5%;
	bottom: 110px;

	width: 250px;

	z-index: 1200;

	display: block;

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}

/*
.first-visit-btn img {
	display: block;

	width: 100%;
	height: auto;
}*/


.first-visit-btn:hover {
transform: scale(1.05);
	opacity: 1;
	filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.25));
}

.first-visit-btn img {
	display: block;
	width: 100%;
	height: auto;

	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
	transition: filter 0.25s ease;
}

/* ==========================================================
   4. PC TOPページ専用
========================================================== */

@media screen and (min-width: 769px) {


	/* ======================================================
	   TOPヘッダー全体

	   TOPだけ画面全体の高さを持たせる。
	   サブページには .nh-header--top がないので影響しない。
	====================================================== */

	.nh-header--top {
		position: absolute !important;

		top: 0 !important;
		left: 0 !important;

		width: 100% !important;

		height: 100vh !important;
		height: 100svh !important;

		margin: 0 !important;
		padding: 0 !important;

		z-index: 1000 !important;

		background: transparent !important;

		box-shadow: none !important;

		/*
		   巨大な透明headerが
		   メイン画像の操作を邪魔しないようにする
		*/
		pointer-events: none;
	}



	/* ======================================================
	   ヘッダー上部
	====================================================== */

	.nh-header--top .nh-header-top {
		position: absolute !important;

		top: 0 !important;
		left: 0 !important;

		width: 100% !important;

		z-index: 1010 !important;

		background: rgba(255,255,255,0.55);

		box-shadow: none !important;

		pointer-events: auto !important;
	}



	/* ======================================================
	   TOPだけグローバルメニューを画面最下部へ
	====================================================== */

	.nh-header--top .nh-global-nav {
		position: absolute !important;

		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;

		width: 100% !important;

		height: auto !important;

		margin: 0 !important;

		z-index: 1100 !important;

		background: rgba(255,255,255,0.96);

		box-shadow: none !important;

		overflow: visible !important;

		opacity: 1 !important;
		visibility: visible !important;

		transform: none !important;

		pointer-events: auto !important;
	}



	/* ======================================================
	   グローバルメニュー内側
	====================================================== */

	.nh-header--top .nh-global-nav__inner {
		position: relative;

		width: 1200px;
		max-width: 100%;

		margin: 0 auto;

		overflow: visible !important;

		pointer-events: auto !important;
	}



	.nh-header--top .nh-global-menu {
		position: relative;

		overflow: visible !important;

		pointer-events: auto !important;
	}


/*
	.nh-header--top .nh-menu-item {
		position: relative;

		overflow: visible !important;

		pointer-events: auto !important;
	}*/

.nh-header--top .nh-menu-item {
    position: static !important;

    overflow: visible !important;

    pointer-events: auto !important;
}

	.nh-header--top .nh-menu-parent,
	.nh-header--top .nh-menu-parent__link {
		pointer-events: auto !important;
	}



	/* ======================================================
	   メガメニュー
	====================================================== */

	.nh-header--top .nh-mega {
		z-index: 1200 !important;

		pointer-events: none;
	}



	.nh-header--top
	.nh-menu-item--mega:hover
	> .nh-mega {

		opacity: 1 !important;

		visibility: visible !important;

		transform: translateY(0) !important;

		pointer-events: auto !important;
	}



	/* メガメニュー内部も操作可能 */

	.nh-header--top .nh-mega,
	.nh-header--top .nh-mega * {
		pointer-events: auto;
	}


}



/* ==========================================================
   5. TOP メインコンテンツ
========================================================== */

/*.top-main {
	width: 1200px;
	max-width: 100%;

	margin: 0 auto;

	padding-top: 50px;
	padding-bottom: 50px;

	box-sizing: border-box;
}*/
/* TOPページだけ共通 .main の1070px制限を解除 */
.content .main {
	width: 1200px !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.content .main_in {
	width: 100% !important;
	max-width: none !important;
}

/* TOPコンテンツ */
.top-main {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 50px;
	box-sizing: border-box;
}


/* ==========================================================
   6. NEWS / PICKUP
========================================================== */

.top-info-grid {
	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 70px;

	width: 100%;

	margin-bottom: 55px;
}


.top-news,
.top-pickup {
	width: 100%;
}


.top-info-title {
	display: flex;

	align-items: center;
	justify-content: space-between;

	min-height: 55px;

	border-bottom: 1px solid #58ae65;
}


.top-info-title-left {
	display: flex;

	align-items: center;
}


.top-info-title h2 {
	position: relative;

	margin: 0;

	padding-left: 50px;

	color: #333;

	font-size: 20px;
	font-weight: normal;
}


.top-info-title h2::before {
	content: "";

	position: absolute;

	top: 50%;
	left: -8px;

	width: 48px;
	height: 40px;

	background-image: url("../images/icon_23.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;

	transform: translateY(-50%);
}


.top-info-title h2 small {
	margin-left: 15px;

	color: #58ae65;

	font-size: 10px;
	font-weight: normal;
}


.top-info-more {
	position: relative;

	padding-left: 20px;

	color: #333;

	font-size: 12px;
	font-weight: bold;

	text-decoration: underline;
}


.top-info-more::before {
	content: "›";

	position: absolute;

	top: 50%;
	left: 0;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 14px;
	height: 14px;

	background: #58ae65;

	color: #fff;

	font-size: 13px;

	border-radius: 50%;

	transform: translateY(-50%);
}


.top-info-more:hover {
	color: #58ae65;
}



/* ==========================================================
   7. NEWS LIST
========================================================== */

.top-news-list {
	width: 100%;
}


.top-news-list ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


.top-news-list li {
	margin: 0;
	padding: 0;

	border-bottom: 1px dotted #aaa;
}


.top-news-list li a {
	display: flex;

	align-items: center;

	width: 100%;

	padding: 13px 5px;

	color: #555;

	text-decoration: none;

	box-sizing: border-box;
}


.top-news-list li a:hover {
	color: #58ae65;
}


.top-news-list time {
	flex: 0 0 105px;

	color: #58ae65;

	font-size: 13px;
	font-weight: bold;
}


.top-news-text {
	flex: 1;

	font-size: 13px;
}


.top-new {
	margin-left: 10px;

	padding: 2px 7px;

	background: #58ae65;

	color: #fff;

	font-size: 9px;

	border-radius: 10px;
}



/* ==========================================================
   8. バナー共通
========================================================== */

/* ==========================================================
   BANNER GRID
========================================================== */

.top-banner-grid {
	margin-bottom: 40px;
}


.top-banner-grid {

}


/* バナー本体 */
.top-banner {
  width: 100%;
}


/* リンクも全面 */
.top-banner a {
/*  display: block;*/

  width: 100%;
  height: 100%;

  transition: opacity 0.25s;
}


.top-banner a:hover {
  opacity: 0.82;
}


/* 画像 */
.top-banner img {

}


/* 下段 */
.top-banner-grid--bottom {
  margin-bottom: 0;
}


.top-banner_l {
width: 36%;
	float: left;
	margin-bottom: 50px;
}


.top-banner_r{
width: 56%;
	float: right;
	margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
.top-banner_l {
width: 96%;
	float: none;
margin-left:auto;
margin-right:auto;
	
}


.top-banner_r{
width: 96%;
	float: none;
margin-left:auto;
margin-right:auto;
}	
	
}


/* ==========================================================
   9. スマートフォン
========================================================== */

@media screen and (max-width: 768px) {


	/* ======================================================
	   PCの100vhを解除
	====================================================== */

.top-firstview {
		position: relative !important;

		width: 100% !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: visible !important;
	}

/*	.top-main {
		width: 100%;
		max-width: none;

		margin: 0;

		padding: 20px 15px 40px;

		box-sizing: border-box;
	}

}*/


	/* ======================================================
	   メインビジュアル
	====================================================== */

	.top-firstview .header_2 {
		position: relative !important;

		inset: auto !important;

		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;

		width: 100% !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	.top-firstview .header_2_in {
		width: 100% !important;
		max-width: none !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	.top-firstview .mv-bg {
		position: relative !important;

		width: 100% !important;
		max-width: none !important;

		height: 760px !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	.top-firstview .slide {
		position: relative !important;

		width: 100% !important;
		max-width: none !important;

		height: 760px !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden !important;
	}


	.top-firstview .slide-image {
		position: absolute;

		inset: 0;

		width: 100% !important;
		height: 100% !important;

		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
	}



	/* ======================================================
	   スマホTOPヘッダー

	   header-new.css のハンバーガーメニューを使用
	====================================================== */

	.nh-header--top {
		position: relative !important;

		top: auto !important;
		left: auto !important;

		width: 100% !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;

		background: #fff;

		pointer-events: auto !important;
	}



	/* ======================================================
	   スマホグローバルメニュー

	   PCのbottom:0を完全解除
	====================================================== */

	.nh-header--top .nh-global-nav {
		position: fixed !important;

		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;

		width: 100% !important;
		height: 100dvh !important;

		z-index: 9999 !important;

		pointer-events: auto !important;
	}



	/* ======================================================
	   初診受付
	====================================================== */

	.first-visit-btn {
		position: absolute !important;

		left: 50% !important;
		right: auto !important;

		bottom: -45px !important;

		width: 210px !important;

		transform: translateX(-50%) !important;

		z-index: 50;
	}


	.first-visit-btn:hover {
		transform:
			translateX(-50%)
			scale(1.05) !important;
		opacity: 1 !important;
	}



	/* ======================================================
	   メインコンテンツ
	====================================================== */

	.top-main {
		width: 100%;

		max-width: none;

		margin: 0;

		padding:
			20px
			15px
			40px;

		box-sizing: border-box;
	}



	/* ======================================================
	   NEWS / PICKUP
	====================================================== */

	.top-info-grid {
		display: block;

		width: 100%;

		margin: 0;
	}


	.top-news,
	.top-pickup {
		width: 100%;

		margin-bottom: 45px;
	}


	.top-info-title {
		min-height: 50px;
	}


	.top-info-title h2 {
		padding-left: 40px;

		font-size: 18px;
	}


	.top-info-title h2::before {
		width: 22px;
		height: 27px;
	}


	.top-info-title h2 small {
		margin-left: 10px;

		font-size: 9px;
	}


	.top-info-more {
		padding-left: 18px;

		font-size: 11px;

		white-space: nowrap;
	}


	.top-news-list li a {
		display: block;

		padding:
			12px
			0;
	}


	.top-news-list time {
		display: block;

		margin-bottom: 5px;

		font-size: 13px;
	}


	.top-news-text {
		display: block;

		font-size: 13px;
	}



	/* ======================================================
	   バナー
	====================================================== */

	.top-banner-grid {
		display: block;

		width: 100%;

		margin: 0;
	}


	.top-banner_l,
	.top-banner_r {
		width: 100%;

		margin-bottom: 20px;
	}


}