@charset "utf-8";

/*
Theme Name: hamacho-cc
Author: YES-REFORM CO., LTD.
*/

:root {
	/* ブランドカラー */
	--color-primary: #78bde4;
	--color-secondary: #238ecc;
	--color-accent: #e27b6d;

	/* テキストカラー */
	--text-primary: #17303b;
	/* --text-primary: #323333; */
	--text-secondary: #238ecc;

	/* 境界・背景カラー */
	--border-color: #e5e5e5;
	--bg-grey: #a2a2a2;
	--bg-blue: #d3ebf9;
	--bg-lightblue: #f3f8fb;

	/* フォントファミリー */
	--font-primary: "Noto Sans JP", sans-serif;
	--font-secondary: "Roboto Condensed", sans-serif;
	--font-mincho: "Shippori Mincho", serif;

	/* フォントサイズ */
	--font-size-body: clamp(1.5rem, 1.5vw + 0.5rem, 1.6rem);
	--font-size-accent: clamp(1.7rem, 1.5vw + 0.5rem, 1.8rem);
	/* --font-size-heading: clamp(2.2rem, 3vw + 0.8rem, 3rem); */
	--font-size-main: clamp(2.2rem, 3vw + 0.8rem, 3rem);
	--font-size-heading: clamp(2.5rem, 3vw + 0.8rem, 3.5rem);
	--font-size-subheading: clamp(1.8rem, 2vw + 0.6rem, 2.2rem);
	--font-size-caption: clamp(1.2rem, 1vw + 0.4rem, 1.4rem);

	/* 行間 */
	--line-height-base: 1.8;
	--line-height-heading: 1.3;
	--line-height-caption: 1.4;

	/* 装飾 */
	/*--shadow-primary:14.14px 14.14px 20px rgba(21, 40, 60, 0.1);*/
	--shadow-primary: 0 0 20px rgba(21, 40, 60, 0.1);
	--shadow-light: drop-shadow(1px 1px 2px #fff);
}

/* Body
========================================== */
html, body {
	width: 100%;
	font-size: 62.5%;
	overflow-x: clip;
	/*sticky用*/
}

body {
	line-height: var(--line-height-base);
	font-size: var(--font-size-body);
	font-family: var(--font-primary);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--text-primary);
}

@media screen and (max-width: 599px) {
	body {
		word-wrap: break-word;
	}
}

/*pc*/
@media screen and (min-width: 769px) {
	.sp {
		display: none !important;
	}
}

@media screen and (min-width: 599px) {
	.sp2 {
		display: none !important;
	}
}

/*sp*/
@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
}

/*tablet以下*/
@media screen and (min-width:840px) {
	.mobile {
		display: none !important;
	}
}


/*tablet以外*/
@media (max-width: 768px), (min-width: 840px) {
	.tablet {
		display: none !important;
	}
}

@media (max-width: 599px), (min-width: 900px) {
	.table2 {
		display: none !important;
	}
}


/* header
========================================== */
.headerArea {
	z-index: 1200;
	position: fixed;
	top: 20px;
	left: 20px;
	width: calc(100% - 40px);
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.6);
	box-shadow:
		inset 0 0 20px rgba(255, 255, 255, 0.9),
		inset 0 0 60px rgba(255, 255, 255, 0.6),
		14.14px 14.14px 20px rgba(21, 40, 60, 0.1);
	backdrop-filter: blur(8px);
}

.headerArea .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5px;
	gap: 0 2rem;
}

.headerLogo a {
	line-height: 1.5;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.6rem;
	text-decoration: none;
	color: var(--text-primary);
}

.headerLogo a .br {
	display: none;
}

.headerLogo .logo img {
	max-width: 60px;
	height: auto;
}

.headerLogo a:hover {
	opacity: 0.7;
	transition: 0.3s;
}

.headerInfo {
	display: flex;
	justify-content: space-between;
}

.headerTel {
	display: flex;
	gap: 2rem;
	justify-content: center;
	margin-top: 10px;
}

.headerTel dl {
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 0 0 0 2rem;
	background-color: #fff;
	border-radius: 9999px;
}

.headerTel dl dt {
	font-weight: 500;
	color: var(--text-secondary);
}

.headerTel dl dd {
	padding: 0.6rem 2rem .6rem 1rem;
}

.headerTel dl dd a {
	font-size: 2.4rem;
	font-family: var(--font-secondary);
	color: var(--color-accent);
}

.headerNavi>ul {
	display: flex;
	justify-content: end;
	gap: 1em 2em;
	margin: 1rem auto 0;
	list-style: none;
}

.headerNavi>ul>li>a,
.headerNavi .subMenu .nolink {
	line-height: 1.2;
	display: block;
	width: 100%;
	padding: .6em 0 20px;
	color: var(--text-primary);
	font-weight: 500;
	font-size: var(--font-size-sm);
	text-decoration: none;
	transition: 0.3s;
	cursor: pointer;
}

.headerNavi>ul>li.current a,
.headerNavi>ul>li>a:hover {
	color: var(--color-secondary);
	text-decoration: underline;
}

.headerNavi .subMenu {
	position: relative;
}

.headerNavi .subMenu a,
.headerNavi .subMenu .nolink {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
}

.headerNavi .subMenu>a::after,
.headerNavi .subMenu .nolink::after {
	display: block;
	top: 48%;
	right: 5px;
	content: "";
	width: 8px;
	border-top: 5px solid var(--text-primary);
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.headerNavi .subMenu li a:hover {
	text-decoration: underline;
}

.subMenuBox {
	position: absolute;
	top: 100%;
	left: 50%;
	width: fit-content;
	max-width: 90vw;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.9);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	border-radius: 5px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 3000;
	padding: 2em 2.5em;
}

.headerNavi>ul .subMenu:hover .subMenuBox {
	opacity: 1;
	visibility: visible;
}

.subMenuList {
	display: grid;
	grid-auto-flow: column;
	align-items: start;
	gap: 1.5em 2em;
}

.subMenuList.row-1 {
	grid-auto-flow: row;
}

.subMenuList.row-2 {
	grid-template-rows: repeat(2, auto);
}

.subMenuList.row-3 {
	grid-template-rows: repeat(3, auto);
}

.subMenuList.row-4 {
	grid-template-rows: repeat(4, auto);
}

.subMenuList li {
	line-height: 1.3;
	position: relative;
	padding-left: 22px;
}

.subMenuList li::before {
	position: absolute;
	top: .7em;
	left: 0;
	content: "";
	width: 10px;
	height: 1px;
	background-color: var(--text-primary);
}

.subMenuList li a {
	white-space: nowrap;
	width: 100%;
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 500;
	font-size: 1.5rem;
	transition: 0.3s;
}

.subMenuList li a:hover {
	color: var(--color-secondary);
	text-decoration: underline;
}

.headerContact {}

.headerContact a {
	line-height: 1.2;
	display: block;
	padding: 1em 2em;
	background-color: var(--color-secondary);
	border-radius: 9999px;
	font-size: 1.4rem;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

.headerContact a:hover {
	background-color: var(--color-primary);
	transition: .3s;
}

.spBtn,
.spContact,
.drawerMenu,
.overlay {
	display: none;
}

.telLink {
	pointer-events: none;
	text-decoration: none !important;
}

@media screen and (max-width:1600px) {
	.headerTel dl dt {
		font-size: 1.4rem;
	}

	.headerTel dl dd a {
		font-size: 1.8rem;
	}

	.headerNavi ul {
		gap: 1em 1.5em;
	}
}


@media screen and (max-width:1420px) {
	.headerTel {
		justify-content: end;
	}

	.headerNavi ul {
		gap: 1em 1.2em;
	}

	.headerNavi ul li a,
	.headerNavi .subMenu .nolink {
		font-size: 1.4rem;
	}

	.headerContact a {
		padding: 1em 2em;
		font-size: 1.2rem;
	}

	.headerLogo a {
		font-size: 1.4rem;
	}

	.headerTel dl dt span {
		display: none;
	}
}

@media screen and (max-width:1300px) {
	.headerLogo a {
		gap: 1rem;
		font-size: 1.2rem;
	}

	.headerLogo .logo img {
		max-width: 40px;
		height: auto;
	}

	.headerLogo a .br {
		display: block;
	}
}

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

	.headerNavi ul li a,
	.headerNavi .subMenu .nolink {
		font-size: 1.2rem;
	}

	.headerContact a {
		padding: 1em 2em;
		font-size: 1rem;
	}
}

@media screen and (max-width:1024px) {
	.headerArea {
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		padding: 0 0 0 5px;
		border-radius: 0;
		box-shadow: 0 0 15px rgba(21, 40, 60, 0.1);
		background-color: #fff;
	}

	.headerLogo a {
		font-size: 1.4rem;
	}

	.headerLogo a .br {
		display: none;
	}

	.headerLogo .logo img {
		height: 40px;
		width: auto;
	}

	.headerArea .inner {
		display: none;
	}

	.overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease, visibility 0.4s ease;
	}

	.overlay.active {
		opacity: 1;
		visibility: visible;
	}

	.drawerMenu {
		display: block;
		overflow-y: auto;
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		transition: transform 0.5s ease;
		width: 90%;
		height: 100%;
		background-color: #fff;
		z-index: 1000;
		padding: 90px 3em 30px;
	}

	.drawerMenu.open {
		transform: translateX(0);
	}

	.drawerMenu::-webkit-scrollbar {
		width: 3px;
	}

	.drawerMenu::-webkit-scrollbar-track {
		background: transparent;
	}

	.drawerMenu::-webkit-scrollbar-thumb {
		background: transparent;
	}

	.spBtn {
		position: fixed;
		top: 0;
		right: 0;
		display: inline-block;
		width: 60px;
		height: 60px;
		padding: 20px 15px 15px;
		background-color: var(--color-secondary);
		cursor: pointer;
		z-index: 2000;
	}

	.spBtn::after {
		position: absolute;
		left: 0;
		top: 4px;
		content: "MENU";
		text-align: center;
		width: 60px;
		font-size: 9px;
		color: #fff;
	}

	.spBtn.open::after {
		content: "CLOSE";
	}

	.spBtn div {
		position: relative;
	}

	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background: #fff;
		left: 0;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}

	.spBtn span:nth-child(1) {
		top: 5px;
	}

	.spBtn span:nth-child(2) {
		top: 13px;
	}

	.spBtn span:nth-child(3) {
		top: 21px;
	}

	.spBtn.open span:nth-child(1) {
		top: 13px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.spBtn.open span:nth-child(2) {
		width: 0;
		left: 50%;
	}

	.spBtn.open span:nth-child(3) {
		top: 13px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* メニュー */
	.gnavSp {
		margin-bottom: 40px;
		border-top: 1px solid var(--border-color);
	}

	.gnavSp>ul>li {
		border-bottom: 1px solid var(--border-color);
	}

	.gnavSp>ul>li>a {
		position: relative;
		display: block;
		padding: 1em;
		color: var(--text-primary);
		font-optical-sizing: auto;
		text-decoration: none;
	}

	.gnavSp>ul>li>a:hover {
		text-decoration: underline;
	}

	.spsubMenuHead {
		position: relative;
		padding: 1em 1em;
	}

	a.spsubMenuTrigger {
		/* font-weight: 500; */
		text-decoration: none;
		color: var(--text-primary);
	}

	a.spsubMenuTrigger:hover {
		text-decoration: underline;
	}

	.spsubMenuToggle {
		position: absolute;
		top: 50%;
		right: 1em;
		transform: translateY(-50%);
		width: 2.2rem;
		height: 2.2rem;
		appearance: none;
		-webkit-appearance: none;
		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;
		font: inherit;
		color: inherit;
		cursor: pointer;
	}

	.spsubMenuToggle::after {
		content: "＋";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 2.5rem;
		font-weight: 600;
		color: var(--color-primary);
		transition: transform 0.3s ease-in-out;
	}

	.spsubMenuToggle.active::after {
		content: "ー";
	}

	.spsubMenuToggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.spsubMenuList {
		height: 0;
		overflow: hidden;
		transition: height .6s ease-in-out;
		padding: 0 1em 0 2em;
	}

	.spsubMenuList>ul {
		margin: 0;
	}

	.spsubMenuList ul {
		display: grid;
		grid-auto-flow: column;
		align-items: start;
		gap: 1.5em 1em;
		padding: 1em 0;
	}

	.spsubMenuList ul.departments {
		grid-template-rows: repeat(5, auto);
	}

	.spsubMenuList ul.medical {
		grid-template-rows: repeat(4, auto);
	}

	.spsubMenuList ul.healthcheck {
		grid-template-rows: repeat(2, auto);
	}

	.spsubMenuList ul.about {
		grid-template-rows: repeat(4, auto);
	}

	.spsubMenuList ul li {
		line-height: 1.3;
		position: relative;
		padding-left: 20px;
	}

	.spsubMenuList ul li::before {
		content: "";
		position: absolute;
		top: 0.7em;
		left: 0;
		width: 10px;
		height: 1px;
		background-color: var(--color-secondary);
	}

	.spsubMenuList ul li a {
		text-decoration: none;
		font-weight: 500;
	}

	.spGuide {
		display: flex;
		justify-content: center;
		gap: 2em;
		margin-bottom: 3em;
		padding: 0 2em;
	}

	.spGuide li {
		width: 10em;
	}

	.spGuide li a {
		display: block;
		line-height: 1.2;
		text-decoration: none;
		text-align: center;
	}

	.spGuide li .icon {
		position: relative;
		display: block;
		margin: 0 auto 1em;
		text-align: center;
		background-color: #fff;
		border: 3px solid transparent;
		box-sizing: border-box;
		border-radius: 9999px;
		aspect-ratio: 1 / 1;
		width: 80px;
		box-shadow: var(--shadow-primary);
		backdrop-filter: blur(8px);
	}

	.spGuide li .icon img {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 60%;
		height: auto;
	}

	.spGuide li .icon.visit img {
		width: 50%;
	}

	.spLink {
		display: flex;
		gap: 1em 2em;
		flex-wrap: wrap;
	}

	.spLink li {
		position: relative;
		padding-left: 15px;
	}

	.spLink li::before {
		position: absolute;
		content: "";
		position: absolute;
		top: 12px;
		left: 0;
		width: 6px;
		height: 6px;
		border-top: 1px solid var(--color-secondary);
		border-right: 1px solid var(--color-secondary);
		transform: rotate(45deg);
	}

	.spLink li a {
		text-decoration: none;
	}

	.spTel {
		margin: 30px 0;
	}

	.spTel dl {
		line-height: 1;
		gap: 2rem;
		padding: 1rem 0 1rem 2rem;
		background-color: #fff;
		border-radius: 9999px;
	}

	.spTel dl dt {
		font-weight: 500;
		color: var(--text-secondary);
	}

	.spTel dl dd {
		padding: 0.6rem 2rem .6rem 0;
	}

	.spTel dl dd a {
		font-size: 2.4rem;
		font-family: var(--font-secondary);
		color: var(--color-accent);
	}
}

@media screen and (max-width:840px) {
	.spGuide {
		display: block;
		padding: 0;
		margin-bottom: 2em;
	}

	.spGuide li {
		width: 100%;
		margin-bottom: 1em;
	}

	.spGuide li a {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	.spGuide li .icon {
		width: 60px;
		margin-bottom: 0;
	}

	.spGuide li .text {
		width: calc(100% - 80px);
		text-align: left;
	}
}

@media screen and (max-width:599px) {
	.drawerMenu {
		padding: 90px 1.5em 30px;
	}

	.headerLogo a {
		font-size: 1.2rem;
	}

	.gnavSp li a,
	.spGuide li a,
	.spLink li a {
		font-size: var(--font-size-sm);
	}

	.gnavSp {
		margin-bottom: 2em;
	}

	.spsubMenuList ul {}

	.spsubMenuList ul li a {
		font-size: 1.4rem;
	}

	.spLink {
		flex-direction: column;
		gap: .5em;
	}

	.spLink li {
		display: flex;
		font-size: 1.4rem;
	}

	.telLink {
		pointer-events: auto;
		text-decoration: underline !important;
	}

	.spsubMenuList ul.about {
		grid-auto-flow: row;
		gap: 1.2em;
	}
}

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

	.spsubMenuList ul.medical,
	.spsubMenuList ul.healthcheck {
		grid-auto-flow: row;
		gap: 1.2em;
	}
}

/* contents
========================================== */
.contents {
	margin: 0 auto;
	width: 100%;
}

.contents p+p {
	margin-top: 1.3em;
}

.contentsInner {
	margin: 0 auto;
	padding: 30px 0 60px;
	width: 1200px;
}

@media screen and (max-width:1200px) {
	.contentsInner {
		width: 100%;
		padding: 30px 30px 60px;
	}
}

@media screen and (max-width:599px) {
	.contentsInner {
		padding: 50px 20px;
	}
}

/* mv
========================================== */
.mvArea {
	position: relative;
	margin-bottom: 60px;
	padding-left: calc((100vw - 1200px)/2);
}

#mvSlider img {
	border-radius: 0 0 0 50px;
}

.mvText {
	position: absolute;
	/* left: clamp(16px, calc(40px + 8vw), 55%);
	top: clamp(16px, 22vw, 40%);
	z-index: 500; */
	z-index: 10;
	position: absolute;
	top: 56%;
	left: 10%;
	transform: translate(0, -50%);
	width: 100%;
	color: #fff;
	animation-name: mvfade;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
}

.mvText p {
	font-size: clamp(3.5rem, 3vw + 0.8rem, 4.5rem);
	font-family: var(--font-mincho);
	letter-spacing: 1rem;
	color: #fff;
	/* text-shadow: 2px 1px 1px rgba(34, 34, 34, 1); */
	text-shadow: 2.12px 2.12px 10px rgba(35, 42, 51, 0.4);
	font-weight: 800;
}


.mvGuideWrap {
	position: absolute;
	right: 0;
	bottom: 20px;
	padding: 2.5em;
	border-radius: 20px 0 0 20px;
	background-color: rgba(255, 255, 255, 0.6);
	box-shadow:
		inset 0 0 15px rgba(255, 255, 255, 0.9),
		inset 0 0 20px rgba(255, 255, 255, 0.6),
		14.14px 14.14px 20px rgba(21, 40, 60, 0.1);
	backdrop-filter: blur(8px);
	width: 450px;
}

.guideList01 {}

.guideList01 li {
	margin-bottom: 1.5rem;
}

.guideList01 li a {
	position: relative;
	display: block;
	padding: 2rem 6rem 2rem 7rem;
	background-color: #fff;
	color: var(--text-primary) border: none;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	border: 3px solid transparent;
	box-sizing: border-box;
	box-shadow: var(--shadow-primary);
	backdrop-filter: blur(8px);
}

.guideList01 li .icon {
	position: absolute;
	left: 3rem;
	/* アイコンは左固定配置 */
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	width: 3.5rem;
}

.guideList01 li .icon img {
	width: 100%;
	height: auto;
}

.guideList01 li a:hover {
	border-color: var(--color-primary);
	transition: 0.3s;
}

.guideList02 {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.guideList02 li {}

.guideList02 li a {
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 1em;
}

.guideList02 li .icon {
	position: relative;
	display: block;
	width: 60px;
	background-color: #fff;
	border: 3px solid transparent;
	box-sizing: border-box;
	border-radius: 9999px;
	aspect-ratio: 1/1;
	box-shadow: var(--shadow-primary);
	backdrop-filter: blur(8px);
}

.guideList02 li .icon img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: auto;
}

.guideList02 li .icon.visit img {
	width: 40%;
}

.guideList02 li a {
	color: var(--text-primary);
	font-size: 1.5rem;
	text-decoration: none;
}

.guideList02 li a:hover .icon {
	border-color: var(--color-primary);
	transition: 0.3s;
}

@media screen and (max-width:840px) {
	.mvArea {
		padding-top: 60px;
		width: 100%;
	}

	.mvArea img {
		width: 100%;
		height: auto;
	}

	.mvGuideWrap {
		position: static;
		padding: 30px;
		border-radius: 0;
		box-shadow: none;
		width: 100%;
	}
}

@media screen and (max-width:320px) {
	.guideList01 li a {
		padding: 2rem 1rem 2rem 4rem;
	}

	.guideList01 li .icon {
		left: 2rem;
	}
}

/* 私たちについて600px
========================================== */
.introArea {
	position: relative;
}

.introArea::before {
	z-index: -1;
	position: absolute;
	top: -50%;
	content: "";
	background: url(images/intro_bg.jpg) left bottom/cover no-repeat;
	width: 100%;
	aspect-ratio: 16 / 11;
}

.introArea .textBox {
	width: 60%;
	padding-right: 5%;
}

.introArea .imageBox {
	width: 40%;
}

.introArea .imageBox img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.introTitle {
	line-height: 1.5;
	margin-bottom: 2.5rem;
	font-weight: 600;
	font-size: clamp(2.4rem, 2.857vw, 3.4rem);
	font-family: var(--font-mincho);
}

.introText {
	margin-bottom: 4rem;
}

.introLink {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.introLink li {
	width: 260px
}

.introLink li a {
	display: block;
	width: 100%;
	padding: 1.5rem 3rem;
	background-color: var(--color-primary);
	border-radius: 9999px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}

.introLink li a:hover {
	background-color: var(--color-secondary);
	transition: 0.3s;
}


@media screen and (max-width:840px) {
	.introArea::before {
		top: -10%;
		width: auto;
		height: 100%;
	}

}

@media screen and (max-width:599px) {
	.introArea .textBox {
		width: 100%;
		padding-right: 0;
		margin-bottom: 40px;
	}

	.introArea .imageBox {
		width: 100%;
	}

	.introLink {
		justify-content: center;
	}
}


/* お知らせ
========================================== */
.newsArea {
	padding: 80px 0;
}

.newsMenu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 50px;
}

.newsMenu .ttlMain {
	margin-bottom: 0;
}

/* タブ */
.newsArea .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.newsArea .tabs li a {
	line-height: 1.2;
	display: block;
	padding: .5rem 2rem;
	background-color: var(--bg-grey);
	border-radius: 9999px;
	text-decoration: none;
	color: #fff;
}

.newsArea .tabs li a:hover,
.newsArea .tabs li a.active {
	background-color: var(--color-primary);
	transition: 0.3s;
}

.newsArea .panels .panel {
	display: none;
}

.newsArea .panels .panel.active {
	display: block;
}

.newsList {
	margin-bottom: 5rem;
	border-top: 1px solid var(--border-color);
}

.newsList dl {
	display: flex;
	align-items: center;
	padding: 1.2em 2em;
	border-bottom: 1px solid var(--border-color);
}

.newsList dt {
	width:17em;
	display: flex;
	align-items: center;
}

.newsList dt .date {
	width: 7em;
	color: var(--bg-grey);
	font-family: var(--font-secondary);
	font-weight: 400;
}

.newsList dt .category {
	width: 8em;
}

.newsList dt .category span {
	display: inline-block;
	padding: 0 1em;
	width: 100%;
	text-align: center;
	background-color: #fff;
	border-radius: 9999px;
	font-size: 1.4rem;
	border: 1px solid var(--color-primary);
}

.newsList dd {
	position: relative;
	width: calc(100% - 17em);
}

.newsList dd a {
	text-decoration: none;
}

.newsList dd a:hover {
	text-decoration: underline;
}

.newsList .new dd::before {
	content: 'NEW';
	margin-right: 1em;
	padding: 0 1em;
	font-size: 1.4rem;
	font-family: var(--font-secondary);
	background-color: var(--color-accent);
	border-radius: 9999px;
	color: #fff;
}

@media screen and (max-width:840px) {
	.newsArea {
		padding: 50px 0;
	}

	.newsMenu {
		flex-direction: column;
		gap: 3em;
		margin-bottom: 30px;
	}

	.newsList dl {
		flex-direction: column;
		gap: 1em;
		padding: 1em;
	}

	.newsList dt,
	.newsList dd {
		width: 100%;
	}

	.newsList dt {
		gap: 1em;
	}

	.newsList dt .category span {
		padding: .2em .6em;
	}

	.newsList dt .date {
		width: auto;
		font-size: 1.4rem;
	}
}

@media screen and (max-width:599px) {
	.newsArea {
		padding: 30px 0;
	}

	.newsArea .tabs li a {
		font-size: 1.4rem;
	}

	.newsList dt .category span {
		font-size: 1.2rem;
		line-height: 1.2;
	}
}


/* 診療時間
========================================== */
.scheduleArea {
	padding: 80px 0;
	background-color: var(--bg-lightblue);
}

.scheduleWrap {
	padding: 5% 5% 10px;
	background-color: #fff;
	border-radius: 20px;
}

.scheduleWrap .scheduleBox {
	margin-bottom: 100px;
}

.scheduleTitle {
	padding: .3em 2em;
	border-radius: 9999px;
	background-color: var(--color-primary);
	text-align: center;
	color: #fff;
	font-size: 2rem;
	font-weight: 600;
}

.scheduleTable {
	width: 100%;
	margin-bottom: 1em;
	border-collapse: separate;
	border-spacing: 9px;
}

.scheduleTable th,
.scheduleTable td {
	position: relative;
}

.scheduleTable th::after,
.scheduleTable td::after {
	position: absolute;
	left: 0;
	bottom: -4px;
	content: '';
	width: calc(100% - 6px);
	height: 1px;
	background-color: var(--border-color);
}

.scheduleTable thead th,
.scheduleTable tbody td {
	line-height: 1.2;
	position: relative;
	vertical-align: middle;
	text-align: center;
	font-size: 1.8rem;
	padding: .6em .8em;
}

.scheduleTable tbody td {
	font-weight: 600;
}

.scheduleTable thead th::before,
.scheduleTable tbody td::before {
	content: '';
	position: absolute;
	right: -4px;
	top: 4px;
	width: 1px;
	height: calc(100% - 8px);
	background-color: var(--border-color);
}

.scheduleTable tbody td.timeLabel::before {
	display: none;
}

.scheduleTable tbody td.timeLabel {
	padding: 0;
}

.scheduleTable tbody td.timeLabel div {
	padding: .5em .1em;
	border: 1px solid var(--text-primary);
	border-radius: 9999px;
}

.scheduleTable tbody td.timeLabel .afternoon {
	background-color: var(--text-primary);
	color: #fff;
}

.scheduleTable tbody td .hours {
	margin-bottom: .3em;
	font-size: 2.4rem;
	font-weight: 400;
	font-family: var(--font-secondary);
}

@media screen and (max-width:840px) {
	.scheduleTable tbody td .hours {
		font-size: 2rem;
	}

	.scheduleTable thead th,
	.scheduleTable tbody td {
		font-size: 1.6rem;
		padding: .6em .6em;
	}

	.scheduleTitle {
		font-size: 1.8rem;
	}

	.tableScroll {
		overflow: auto;
		padding-bottom: 20px;
	}

	.tableScroll .scheduleTable {
		width: 850px;
	}

	.tableScroll::-webkit-scrollbar {
		height: 10px;
	}

	.tableScroll::-webkit-scrollbar-track {
		background: #F1F1F1;
	}

	.tableScroll::-webkit-scrollbar-thumb {
		background: var(--color-secondary);
	}
}

@media screen and (max-width:599px) {
	.scheduleArea {
		padding: 30px 0;
	}
}



/* リンク
========================================== */
.linkArea {
	padding: 80px 0;
}

.linkListWrap {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
}

.linkListWrap .linkBox {
	position: relative;
	padding: 2em 3em calc(2em + 40px);
	width: calc((100% - 60px)/2);
	background-color: #cee4ef;
	border-radius: 10px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
}

.linkListWrap .linkBox .arrow {
	position: absolute;
	right: 2em;
	bottom: 1.5em;
}

.linkListWrap .linkBox .arrow:hover {
	right: 1.5em;
	transition: .3s;
}

.linkListWrap .linkBox.service {
	background-image: url(images/bnr_medicalServices_bg.jpg);
}

.linkListWrap .linkBox.departments {
	background-image: url(images/bnr_departments_bg.jpg);
}

.linkListWrap .linkBox.health {
	background-image: url(images/bnr_healthCheck_bg.jpg);
}

.linkListWrap .linkBox.about {
	background-image: url(images/bnr_aboutUs_bg.jpg);
}

.linkTitle {
	margin-bottom: 1.2em;
	font-weight: 600;
	font-size: var(--font-size-heading);
	font-family: var(--font-mincho);
}

.linkList {
	display: grid;
	grid-auto-flow: column;
	align-items: start;
	gap: 2em 1em;
	margin-left: 1em;
}

.linkList.row-1 {
	grid-auto-flow: row;
}

.linkList.row-2 {
	grid-template-rows: repeat(2, auto);
}

.linkList.row-3 {
	grid-template-rows: repeat(3, auto);
}

.linkList.row-4 {
	grid-template-rows: repeat(4, auto);
}

.linkList li {
	line-height: 1.3;
	position: relative;
	padding-left: 22px;
}

.linkList li::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	width: 12px;
	height: 0;
	border-top: 1px solid var(--text-primary);
}

.linkList li a {
	text-decoration: none;
	font-weight: 600;
}

.linkList li a:hover {
	text-decoration: underline;
	color: var(--color-secondary);
	transition: 0.3s;
}

@media screen and (max-width:1024px) {
	.linkList.row-2 {
		grid-template-rows: repeat(5, auto);
	}

	.linkList.row-3 {
		grid-template-rows: repeat(5, auto);
	}

	.linkList.row-4 {
		grid-template-rows: repeat(5, auto);
	}

	.linkListWrap {
		gap: 30px;
	}

	.linkListWrap .linkBox {
		padding: 1.5em 2em calc(1.5em + 40px);
		width: calc((100% - 30px)/2);
	}
}

@media screen and (max-width:840px) {
	.linkArea {
		padding: 30px 0;
	}
}

@media screen and (max-width:599px) {
	.linkListWrap {
		flex-direction: column;
		gap: 20px;
	}

	.linkListWrap .linkBox {
		width: 100%;
	}

	.linkList {
		margin-left: 0;
	}
}

@media screen and (max-width:380px) {
	.linkList {
		gap: 1.5em;
	}

	.linkList.row-2,
	.linkList.row-3,
	.linkList.row-4 {
		grid-auto-flow: row;
	}
}


/* 当院の特徴
========================================== */
.featuresArea {
	overflow: hidden;
	padding: 60px 0;
}

.featuresWrap {
	position: relative;
}

.featuresWrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/strength_bg.jpg) left top/contain no-repeat;
	width: 100%;
	height: auto;
	aspect-ratio: 160 / 115;
	z-index: -1;
	pointer-events: none;
}

.featuresList {
	display: flex;
	flex-wrap: wrap;
	gap: 3em;
	margin-bottom: 80px;
}

.featuresList .box {
	position: relative;
	width: calc((100% - 3em * 2)/3);
	background-color: #fff;
	border-radius: 20px;
	padding: 2em;
	box-shadow: var(--shadow-primary);
	backdrop-filter: blur(8px);
}

.featuresList .box .number {
	position: absolute;
	top: 1rem;
	left: 2rem;
	font-family: var(--font-secondary);
	font-size: 3rem;
	color: var(--color-primary);
}

.featuresList .box .icon {
	margin: 2em 0 2em;
	text-align: center;
}

.featuresList .box h3 {
	line-height: 1.5;
	margin-bottom: 1em;
	font-size: var(--font-size-subheading);
	font-weight: 600;
	font-family: var(--font-mincho);
	text-align: center;
}

.featuresList .box p {
	text-align: center;
}

.featuresList .box h3 .textBlock,
.featuresList .box p .textBlock {
	display: inline-block;
	margin: 0 0;
}

.featuresList .btnMore a {
	padding: 0.8em 2em;
}

@media screen and (max-width:1200px) {
	.featuresWrap::after {
		width: auto;
		height: 100%;
	}
}

@media screen and (max-width:1024px) {
	.featuresList {
		gap: 2em;
		margin-bottom: 80px;
	}

	.featuresList .box {
		width: calc((100% - 2em * 2)/3);
	}

	.featuresList .box p {
		text-align: left;
	}

	.featuresList .box p br {
		display: none;
	}
}

@media screen and (max-width:840px) {
	.featuresList {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding: 0 10px 30px;
	}

	.featuresList .box {
		flex-direction: column;
		flex: 0 0 300px;
	}

	.featuresList::-webkit-scrollbar {
		height: 10px;
	}

	.featuresList::-webkit-scrollbar-track {
		background: #fff;
	}

	.featuresList::-webkit-scrollbar-thumb {
		background: var(--color-primary);
	}

}

@media screen and (max-width:599px) {
	.featuresArea {
		padding: 0 0 30px;
	}
}

/* 採用情報
========================================== */
.recruitArea {
	background-color: #f8f8f8;
}

.recruitWrap {
	display: flex;
	margin: 0 auto;
	padding-right: calc((100% - 1200px)/2);
}

.recruitWrap .imageBox {
	position: relative;
	overflow: hidden;
	width: 50%;
}

.recruitWrap .imageBox::before {
	content: "";
	display: block;
}

.recruitWrap .imageBox img {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
}

.recruitWrap .textBox {
	width: 50%;
	padding: 60px 2em;
}

.recruitWrap .textBox .catchText.top {
	margin: 0 5em;
	text-align: left;
}

@media screen and (max-width:1200px) {
	.recruitWrap .textBox .catchText.top {
		margin: 0 1em;
	}

}

@media screen and (max-width:1065px) {
	.recruitWrap .textBox .catchText.top {
		margin: 0 1em;
	}

}

@media screen and (max-width:840px) {
	.recruitArea {
		padding: 30px 20px 30px;
	}

	.recruitWrap {
		display: block;
		padding: 0;
	}

	.recruitWrap .textBox {
		padding: 30px 0;
		width: 100%;
	}

}

/* footer
========================================== */
footer {
	width: 100%;
	padding-bottom: 30px;
}

.footerWrap {
	margin: 0 auto;
	padding: 80px 30px 30px;
	max-width: 1200px;
}

.footerInfoWrap {
	margin-bottom: 50px;
	text-align: center;
}

.footerLogo {
	margin-bottom: 2rem;
}

.footerLogo a {
	display: block;
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
}

.footerLogo img {
	display: block;
	margin: 0 auto 10px;
	width: 60px;
	height: auto;
}

.footerLogo a:hover {
	opacity: 0.7;
	transition: 0.3s;
}

.footerTel {
	line-height: 1.2;
	display: flex;
	gap: 2rem 5rem;
	margin-bottom: 60px;
}

.footerTel .box {
	width: calc((100% - 5rem)/2);
}

.footerTel dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
	padding: 0 0 0 3rem;
	background-color: var(--color-secondary);
	border: 1px solid var(--color-secondary);
	box-sizing: border-box;
	border-radius: 9999px;
	color: #fff;
}

.footerTel dl dt span {
	display: inline-block;
}

.footerTel dl dd {
	display: flex;
	width: 16em;
	min-height: 3em;
	padding: .5em 2.5em;
	text-align: center;
	background-color: #fff;
	border-radius: 9999px;
}

.footerTel dl dd a {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	font-family: var(--font-secondary);
	font-size: 3rem;
	color: var(--color-accent);
}


.footerTel table {
	width: fit-content;
	margin: 0 auto;
}

.footerTel table th,
.footerTel table td {
	padding: .5rem 1rem;
	vertical-align: middle;
	font-weight: 400;
	line-height: 1.5;
}

.footerTel table th span {
	display: block;
	width: 10em;
	padding: .3rem 2rem;
	text-align: center;
	border: 1px solid var(--color-secondary);
	border-radius: 9999px;
	font-weight: 500;
	color: var(--text-secondary);
}

.footerSpLink {
	display: none;
}


@media screen and (max-width: 1200px) {
	.footerTel {
		line-height: 1.2;
		display: flex;
		gap: 2rem 2rem;
		margin-bottom: 60px;
	}

	.footerTel .box {
		width: calc((100% - 2rem)/2);
	}

	.footerTel dl dd {
		padding: .3em 1.5em;
	}

	.footerTel dl dd a {
		font-size: 2.4rem;
	}
}

@media screen and (max-width:840px) {
	footer {
		padding: 0 0 60px;
	}

	.footerWrap {
		padding: 60px 30px 30px;
	}

	.footerTel {
		margin-bottom: 30px;
		padding-bottom: 30px;
		flex-direction: column;
		border-bottom: 1px solid var(--border-color);
	}

	.footerTel .box {
		width: 100%;
	}

	.footerSpLink {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		display: flex;
		width: 100%;
		height: 60px;
		border-top: 1px solid #fff;
	}

	.spLinkItem {
		width: 50%;
		background-color: var(--color-secondary);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.spLinkItem.gray {
		background-color: var(--bg-grey);
	}

	.spLinkItem a {
		display: block;
		color: #fff;
		position: relative;
		line-height: 1.2;
		padding: 5px 0 5px 2em;
		text-align: center;
	}

	.footerSpLink .spLinkItem:not(:last-of-type) {
		border-right: 1px solid #fff;
	}

	.footerSpLink .spLinkItem a::before {
		position: absolute;
		content: "";
		background: url(./images/icon_phone_white.svg) left top / contain no-repeat;
		width: 35px;
		height: 35px;
		top: 8px;
		left: -15px;
	}

	.spLinkItem a span {
		letter-spacing: 2px;
	}

}

@media screen and (max-width:599px) {
	.footerTel table {
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 380px) {
	.footerTel dl dt {
		font-size: 1.4rem;
	}

	.footerTel dl dd a {
		font-size: 2rem;
	}

	.footerTel dl dd {
		padding: .5em 1em;
	}
}


/* フッターリンク */
.footerNaviWrap {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 60px;
}

.footerNaviTitle {
	margin-bottom: 1em;
	text-decoration: none;
	font-weight: 600;
	color: var(--text-secondary);
}

.footerNaviTitle a {
	text-decoration: none;
	font-weight: 600;
	color: var(--text-secondary);
}

.footerNavi li+li {
	margin-top: 1em;
}

.footerNavi li a {
	text-decoration: none;
}

.footerNaviTitle a:hover,
.footerNavi li a:hover {
	text-decoration: underline;
}

.footerNavi .grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(5, 1fr);
	gap: 1em 2em;
}

.footerNavi .grid li+li {
	margin-top: 0;
}

.footerNaviSub01 {
	display: flex;
	justify-content: center;
	margin: 4em 0;
}

.footerNaviSub01 li {
	border-left: 1px solid var(--text-primary);
}

.footerNaviSub01 li:last-child {
	border-right: 1px solid var(--text-primary);
}

.footerNaviSub01 li a {
	display: block;
	line-height: 1.2;
	text-decoration: none;
	padding: 0 1em;
}

.footerNaviSub01 li a:hover {
	text-decoration: underline;
}

.footerNaviSub02 {
	display: flex;
	gap: 30px;
	margin-bottom: 30px;
}

.footerNaviSub02 li {
	width: calc((100% - 30px)/3);
}

.footerNaviSub02 li a {
	line-height: 1.3;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 2rem 6rem 2rem 7rem;
	background-color: var(--color-primary);
	color: #fff;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	border: 3px solid transparent;
	box-sizing: border-box;
}

.footerNaviSub02 .icon {
	position: absolute;
	left: 3rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	background-color: #fff;
	border-radius: 9999px;
}

.footerNaviSub02 li a:hover {
	background-color: var(--color-secondary);
	transition: .3s;
}

.footerNaviSub02 li span.medicalCheckBtn::after {
	display: inline-block;
	content: "";
	padding-left: 25px;
	background: url(./images/icon_arrow_out_white.svg) right top / contain no-repeat;
	width: 14px;
	height: 14px;
}

.copyright {
	margin: 0 auto;
	max-width: 1200px;
	text-align: center;
	font-size: 1.2rem;
}


@media screen and (max-width: 1200px) {
	.footerNaviSub02 {
		gap: 1em;
	}

	.footerNaviSub02 li {
		width: calc((100% - 2em)/3);
	}

	.footerNaviSub02 li a {
		padding: 2rem 2rem 2rem 5rem;
	}

	.footerNaviSub02 .icon {
		left: 1rem;
	}
}

@media screen and (max-width: 840px) {
	.footerNaviWrap {
		flex-wrap: wrap;
		gap: 2em;
		margin-bottom: 2em;
	}

	.footerNavi {
		padding-bottom: 2em;
		width: calc((100% - 2em)/2);
		border-bottom: 1px solid var(--border-color);
	}

	.footerNavi li a,
	.footerNaviSearch li a,
	.footerNaviSub01 li a,
	.footerNaviSub02 li a {
		font-size: var(--font-size-sm);
	}

	.footerNaviSub01 {
		gap: 1em 1.5em;
		justify-content: left;
		flex-wrap: wrap;
		margin: 2em 0
	}

	.footerNaviSub01 li {
		position: relative;
	}

	.footerNaviSub01 li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 5px;
		width: 6px;
		height: 6px;
		border-top: 1px solid var(--color-secondary);
		border-right: 1px solid var(--color-secondary);
		transform: rotate(45deg);
	}

	.footerNaviSub01 li a {
		padding: 0 0 0 15px;
	}

	.footerNaviSub01 li,
	.footerNaviSub01 li:last-child {
		border: none;
	}

	.footerNaviSub02 {
		flex-wrap: wrap;
	}

	.footerNaviSub02 li {
		width: calc((100% - 1em)/2);
	}

}

@media screen and (max-width: 599px) {
	.footerWrap {
		padding: 60px 20px 30px;
	}

	.footerNaviSub02 {
		gap: 1em;
		align-items: flex-start;
	}

	.footerNaviSub02 li {
		width: 100%;
	}

	.footerNaviSub02 li a {
		display: block;
		padding-left: 80px;
		text-align: left;
	}

	.footerNavi .grid {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
}

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


/* pageTop
========================================== */
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 10px;
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	background: var(--color-primary) url(images/icn_pagetop.svg) no-repeat center;
	background-size: 30%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 10;
}

.pagetop:hover {
	background-color: var(--color-secondary);
	transition: 0.3s;
}

.pagetop.show {
	opacity: 1;
	pointer-events: auto;
}

@media screen and (max-width: 840px) {
	.pagetop {
		display: none !important
	}
}