@charset "utf-8";
/* トップ */

/* ------ メインビジュアル（写真に縦書きのキャッチコピー。右下に診療時間の表） ------ */
.main{
	position: relative;
	height: 728px;
}

.main_img,
.main_img img{
	display: block;
	width: 100%;
	height: 100%;
}

.main_img img{
	object-fit: cover;
}

.main_copy{
	position: absolute;
	top: 120px;
	left: max(30px, calc(50% - 440px));
}

/* 縦書き。1行目が右に来る */
.catchcopy{
	writing-mode: vertical-rl;
	font-size: 50px;
	font-weight: 700;
	line-height: 1.85;
	letter-spacing: 0.08em;
	color: var(--teal);
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.9);
}

/* 診療時間の表（右下。下の帯からはみ出さないように、写真の中に置く） */
.main_hours{
	position: absolute;
	right: max(30px, calc(50% - 917px));
	bottom: 43px;
	width: 744px;
	max-width: calc(100% - 60px);
}

.hours_table{
	width: 100%;
	table-layout: fixed;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	background-color: #ffffff;
}

.hours_table th,
.hours_table td{
	height: 62px;
	padding: 4px;
	vertical-align: middle;
	border: 1px solid #d9d9d9;
}

.hours_table thead th{
	font-weight: 700;
	color: #ffffff;
	background-color: var(--teal);
	border-color: rgba(255, 255, 255, 0.35);
}

.hours_table thead th:first-child,
.hours_table tbody th{
	width: 25%;
}

.hours_table tbody th{
	font-weight: 500;
	color: var(--teal);
	white-space: nowrap;
}

.hours_table tbody td{
	font-size: 18px;
	color: var(--teal);
}



/* ------ お知らせ（クリーム色の帯） ------ */
.news{
	padding: 50px 0 60px;
	background-color: var(--cream);
}

.news_list{
	margin-top: 54px;
	border-top: 2px solid #c9c9c9;
}

.news_item{
	border-bottom: 2px solid #c9c9c9;
}

.news_item a{
	display: flex;
	align-items: center;
	gap: 0 34px;
	min-height: 70px;
	padding: 14px 0;
	font-size: 16px;
	line-height: 1.6;
}

.news_item a:hover{
	opacity: 0.7;
}

.news_date{
	flex-shrink: 0;
	letter-spacing: 0;
}

.news_category{
	flex-shrink: 0;
	min-width: 110px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: var(--teal);
	background-color: #ffffff;
}

.news_category:empty{
	visibility: hidden;
}

.news_title{
	flex: 1;
	min-width: 0;
}



/* ------ 当院の特徴（写真が左右交互に、画面の端まで） ------ */
.about{
	padding-top: 116px;
}

.about_list{
	margin-top: 86px;
}

.about_item{
	display: flex;
	align-items: center;
}

.about_item + .about_item{
	margin-top: 100px;
}

/* 文章は中身の幅（1200px）の左半分に置き、写真は画面の端まで */
.about_body{
	flex: 0 0 auto;
	width: calc(50% + 85px);
	padding: 0 85px 0 max(30px, calc((100% - 1200px) / 2));
}

.about_img{
	flex: 1;
	min-width: 0;
}

.about_img img{
	display: block;
	width: 100%;
	aspect-ratio: 880 / 540;
	object-fit: cover;
	border-radius: 30px 0 0 30px;
}

/* 2つ目からは、写真が左（交互） */
.about_item:nth-child(even){
	flex-direction: row-reverse;
}

.about_item:nth-child(even) .about_body{
	padding: 0 max(30px, calc((100% - 1200px) / 2)) 0 85px;
}

.about_item:nth-child(even) .about_img img{
	border-radius: 0 30px 30px 0;
}

.about_title{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: var(--teal);
}

.about_text{
	margin-top: 52px;
	font-size: 15px;
	line-height: 2;
}



/* ------ 診療科目（薄い水色の帯に、アイコンの丸） ------ */
.service{
	margin-top: 128px;
	padding: 66px 0 76px;
	background-color: var(--pale);
}

.service_list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px 50px;
}

.service_item{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 200px;
	height: 200px;
	padding-top: 6px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: center;
	color: #ffffff;
	background-color: var(--sky);
	border-radius: 50%;
}

/* 内側の白い細い輪 */
.service_item::before{
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
}

.service_item img{
	width: 62px;
	height: 62px;
	object-fit: contain;
}

.service_item:hover{
	opacity: 0.8;
}



/* ------ ページへの案内（写真のカード） ------ */
.links{
	padding: 126px 0 130px;
}

.links_list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 44px;
}

.links_item{
	display: block;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.links_item:hover{
	opacity: 0.85;
}

.links_img img{
	display: block;
	width: 100%;
	aspect-ratio: 580 / 358;
	object-fit: cover;
}

.links_name{
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 96px;
	padding: 12px 32px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
}

.links_name::before{
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 2px;
	background-color: var(--teal);
}



/* ------ アクセス（左に医院の情報、右に地図） ------ */
.access{
	display: flex;
}

.access_info{
	display: flex;
	justify-content: flex-end;
	width: 50%;
	padding: 36px 0 90px;
	background-color: var(--cream);
}

.access_info_inner{
	width: 100%;
	max-width: 630px;
	padding: 0 30px;
}

.access_name{
	font-size: 36px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.12em;
}

.access_address{
	margin-top: 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
}

.access_list{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
}

.access_list div{
	display: flex;
	gap: 1.2em;
}

.access_list dt{
	white-space: nowrap;
}

.access_btns{
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 480px;
	margin-top: 44px;
}

.btn_reserve_large{
	width: 100%;
	height: 88px;
	font-size: 24px;
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 1px #f3e6d2;
}

.btn_reserve_large .icon_pc{
	width: 38px;
	height: 30px;
}

.access_btns .btn_tel{
	height: 88px;
	font-size: 30px;
}

.access .map{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	min-height: 535px;
	font-size: 17px;
	letter-spacing: 0.12em;
	background-color: #f0f0f0;
}

.access .map iframe{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 535px;
	border: 0;
}





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

	.about_body{
		padding-right: 50px;
	}

	.about_item:nth-child(even) .about_body{
		padding-left: 50px;
	}

	.about_title{
		font-size: 24px;
	}

	.about_text{
		margin-top: 30px;
	}

	.service_list{
		gap: 24px;
	}

	.service_item{
		width: 170px;
		height: 170px;
		font-size: 19px;
	}

	.service_item img{
		width: 50px;
		height: 50px;
	}
}





/* ------ スマホ・タブレット ------ */
@media screen and (max-width: 900px){

	/* 表は写真の下に置く */
	.main{
		height: auto;
	}

	.main_img{
		height: 254px;
	}

	.main_copy{
		top: 36px;
		left: 72px;
	}

	.catchcopy{
		font-size: 19px;
		line-height: 1.6;
	}

	.main_hours{
		position: static;
		width: auto;
		max-width: none;
		padding: 0 16px 34px;
		background-color: #ffffff;
	}

	.hours_table{
		font-size: 9px;
	}

	.hours_table th,
	.hours_table td{
		height: 30px;
		padding: 2px;
	}

	.hours_table tbody td{
		font-size: 10px;
	}

	.news{
		padding: 30px 0 30px;
	}

	.news .title{
		text-align: center;
	}

	.news_list{
		margin-top: 20px;
		border-top: 0;
	}

	.news_item{
		border-bottom-width: 1px;
	}

	.news_item:last-child{
		border-bottom: 0;
	}

	.news_item a{
		flex-wrap: wrap;
		gap: 2px 18px;
		min-height: 0;
		padding: 14px 0;
		font-size: 11px;
	}

	.news_category{
		min-width: 62px;
		font-size: 9px;
	}

	.news_title{
		flex-basis: 100%;
		letter-spacing: 0.12em;
	}

	.about{
		padding-top: 40px;
	}

	.about_list{
		margin-top: 24px;
	}

	.about_item,
	.about_item:nth-child(even){
		flex-direction: column-reverse;
		align-items: stretch;
		padding: 0 16px;
	}

	.about_item + .about_item{
		margin-top: 40px;
	}

	.about_body,
	.about_item:nth-child(even) .about_body{
		width: auto;
		padding: 0;
	}

	.about_img img,
	.about_item:nth-child(even) .about_img img{
		aspect-ratio: 716 / 412;
		border-radius: 10px;
	}

	.about_title{
		margin-top: 12px;
		font-size: 15px;
	}

	.about_text{
		margin-top: 10px;
		font-size: 11px;
		line-height: 1.7;
	}

	.service{
		margin-top: 40px;
		padding: 18px 0;
	}

	.service_list{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
		gap: 16px 12px;
	}

	.service_item{
		width: min(166px, 42vw);
		height: min(166px, 42vw);
		gap: 6px;
		font-size: 17px;
	}

	.service_item::before{
		inset: 8px;
	}

	.service_item img{
		width: 42px;
		height: 42px;
	}

	.links{
		padding: 24px 0 40px;
	}

	.links_list{
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.links_item{
		border-radius: 8px 8px 0 0;
	}

	.links_name{
		gap: 10px;
		min-height: 60px;
		padding: 10px 20px;
		font-size: 17px;
	}

	.links_name::before{
		width: 14px;
	}

	.access{
		flex-direction: column;
	}

	.access_info{
		width: 100%;
		padding: 24px 0 26px;
	}

	.access_info_inner{
		max-width: none;
		padding: 0 16px;
		text-align: center;
	}

	.access_name{
		font-size: 19px;
	}

	.access_address,
	.access_list{
		display: inline-block;
		font-size: 11px;
		text-align: left;
	}

	.access_address{
		display: block;
		width: fit-content;
		margin: 8px auto 0;
	}

	.access_btns{
		gap: 14px;
		max-width: 300px;
		margin: 14px auto 0;
	}

	.btn_reserve_large{
		height: 54px;
		font-size: 16px;
	}

	.btn_reserve_large .icon_pc{
		width: 24px;
		height: 18px;
	}

	.access_btns .btn_tel{
		height: 56px;
		font-size: 21px;
	}

	.access .map{
		width: 100%;
		min-height: 240px;
		font-size: 11px;
	}

	.access .map iframe{
		min-height: 240px;
	}
}