@charset "UTF-8";
/*--------------------------------------------------------------
eyeclinic-base 共通部品CSS（spiral世代を正として移植）
編集ルール: このファイルは全サイト共通。サイト個別の上書き・追加は
必ず assets/css/site.css に書くこと（:root の色上書きを含む）。
--------------------------------------------------------------*/

/*--------------------------------------------------------------
##カラー置換用リスト（CSS変数）
サイト個別の値は site.css の :root で上書きする
--------------------------------------------------------------*/
:root {
	/* メインカラー */
	--c-main: #59b4d3;
	--c-main-rgb: 89, 180, 211; /* rgba半透明合成用の三つ組（--c-mainと同じ色をカンマ区切りで） */
	/* サブカラー */
	--c-sub: #1f64aa;
	/* ポイントカラー */
	--c-point: #bcd7e8;
	/* テキストカラー */
	--c-text: #3f3f3f;
	/* 背景色 */
	--c-bg: #f4f4f4;
	/* メインカラー半透明 */
	--c-main-a1: rgba(var(--c-main-rgb), 0.1);
	/* 使用WEBフォント */
	--font-base: "Kosugi Maru", sans-serif;
	/* サイドバー幅（投稿一覧） */
	--width-sidebar: 260px;
	/* 部品アクセント色（既定=spiral値。サイト個別は site.css で上書き） */
	--c-body-bg: #ecf2f8;      /* ページ背景・見出し帯 */
	--c-accent-light: #cde0ef; /* 日付・表マーク等の淡色アクセント */
	--c-accent-btn: #399cc6;   /* お知らせリンクボックス背景 */
	--c-accent-dark: #4981b9;  /* 表ヘッダー等の濃色アクセント */
}

/*--------------------------------------------------------------
##共通
--------------------------------------------------------------*/

body{
	color: var(--c-text);
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	letter-spacing: 0.5px;
	font-size: 0.95rem;
	line-height: 1.65;
	text-align: left;
	background: var(--c-body-bg);
}

img{
	max-width:100%;
	height:auto;
}

a{
	text-decoration:none;
	color: var(--c-text);
}

a:hover {
	opacity: 0.7;
	transition: all 0.3s;
}

.top-container,
.footer-container,
.sub-container{
	width: 980px;
	margin: 0 auto;
}

.blog-container{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}

.clearfix {
	min-height: 1px;
}

.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	font-size: 0.1em;
	line-height: 0;
}

* html .clearfix {
	height: 1px;
}

.clear{
	clear:both;
}

.table-wrap{
	overflow-x: auto;
	display: block;
}

.table-wrap table th,
.table-wrap table td {
    white-space: nowrap;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.sp_none{
		display:none!important;
	}
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.top-container,
	.footer-container,
	.sub-container{
		width: 100%;
		padding: 0 15px;
	}
}
	
/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {
	.tab_none{
		display:none!important;
	}
}
	
/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
	.pc_none{
		display:none!important;
	}
}
	
/* PC（大画面）のみ */
@media screen and (min-width: 1920px) {
	.only_widepc{
		display: none;
	}
}

/*--------------------------------------------------------------
##ヘッダー
--------------------------------------------------------------*/

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.header-pc{
		display: none;
	}

	.header-spInner{
		width: calc(100% - 66px);
		height: 55px;
		display: flex;
		justify-content: space-between;
		margin-top: 7px;
	}

	.header-spLogoArea{
		padding: 15px;
		height: 55px;
		max-width: 205px;
		display: flex;
		align-items:center;
	}

	.header-spLogoArea_txt{
		margin-top: 8px;
		font-size: 14px;
		font-family: var(--font-base);
		font-weight: 700;
	}

	.header-spLogoArea_imgLogoHorizontal{
		height: 25px;
		width: auto;
		margin-top: 8px;
	}

	.header-spLogoArea_imgLogoVertical{
		height: 45px;
		width: auto;
		margin-top: 8px;
	}

	.header-spIconArea{
		display: flex;
		align-items: center;
	}

	.header-spIconArea_icon{
		width: auto;
		height: 55px;
		display: block;
		margin-top: 18px;
		margin-left: 5px;
	}

	.header-spNavbox{
		background: var(--c-main);
		padding: 54px 20px 20px 20px;
		min-height: 100%;
	}

	.header_spNavboxLogoarea_txt{
		font-size: 14px;
		font-family: var(--font-base);
		font-weight: 700;
		color: #fff;
	}

	.header_spNavboxLogoarea_imgLogoHorizontal{
		height: 25px;
		width: auto;
	}

	.header_spNavboxLogoarea_imgLogoVertical{
		height: 45px;
		width: auto;
		display: block;
		margin: 0 auto;
	}

	.header-spNavWrap{
		margin-top:30px;
		width: 100%;
		border-radius: 5px;
		padding: 15px;
		background: #fff;
	}

	.header-spNavItem{
		border-bottom: 1px solid #e5e5e5;
		font-size: 15px;
		padding: 10px 0 10px 15px;	
	}

	.header-spNavItem:last-child{
		border-bottom: none;
	}

	.header-spNavLink{
		padding-left: 10px;
		text-align: center;
	}

	.header-spNavArw{
		display: inline-block;
		vertical-align: middle;
		color: var(--c-point);
		line-height: 1;
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent;
		border-width: 0.375em 0.64952em;
		border-left-color: currentColor;
		border-right: 0;
	}

	.header-spBtnWrap{
		margin-top: 30px;
	}
	
	.header-spBtn{
		font-family: var(--font-base);
		font-weight: 700;
		display: block;
		background: var(--c-sub);
		color: #fff;
		font-size: 20px;
		width: 100%;
		padding:10px 15px;
		border-radius: 5px;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.header-spIcon_reservation{
		background: url("../img/site/icon_reservation_header.svg") no-repeat left center;
		background-size:contain;
		padding-left: 35px;
		letter-spacing: 2px;
	}

	.link_cancel{
		font-size: 13px;
		font-family: var(--font-base);
		background: url("../img/site/icon_cancel.svg") no-repeat left center;
		background-size: 15px 15px;
		padding-left: 20px;
		color: #fff;
		display: block;
		margin-top: 10px;
		display: inline-block;
	}

	.header-spBnrWrapInner{
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
	}
	
	.header-spBnrWrapItem{
		width: calc((100% - 10px) / 2);
		height: auto;
		margin-top: 10px;
	}
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
	
	.header-sp{
		display: none;
	}

	.header-pc{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding: 30px 15px;
		font-family: var(--font-base);
	}
	
	.header-pcLogoArea{
		order: 1;
		margin: 0 15px;
	}
	
	.header-pcinfoArea{
		order: 2;
		margin: 0 15px;
		display: flex;
		align-items: center;
	}
	
	.header-pcNavArea{
		order: 3;
		margin: 0 15px;
	}

	.header-pcLogo_txt{
		font-size: 20px;
	}

	.header-pcLogo_imgLogoHorizontal{
		width: 250px;
		display: inline-block;
	}

	.header-pcLogo_imgLogoVertical{
		width: auto;
		height: 75px;
		display: inline-block;
	}

	.header-pcNav_wrap{
		display: flex;
		flex-wrap: wrap;
	}

	.header-pcNav_item{
		margin-right: 15px;
		margin-top: 30px;
	}

	.header-pcNav_item:last-child{
		margin-right: 0;
	}

	.header-pcNav_link{
		font-weight: 700;
    width: 100%;
    display: block;
    position: relative;
    letter-spacing: 2px;
		text-align: center;
	}

	.header-pcNav_link::after{
		content: '';
		position: absolute;
		width: 40px;
		height: 4px;
		bottom: -10px;
		left: 50%;
		border-radius: 2px;
		margin-left: -20px;
		background: var(--c-point);
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
	}

	.header-pcNav_link:hover::after{
    width: 60px;
    left: 50%;
    margin-left: -30px;
    background: var(--c-point);
	}

	.header-pcinfoArea_txtWrap{
		display: flex;
		align-items: center;
	}

	.header-pcinfoArea_txt{
		font-size: 13px;
	}

	.header-pcinfoArea_txtSmall{
		font-size: 12px;
	}

	.header-pcinfoArea_tel{
		font-weight: 700;
		font-size: 25px;
		margin-left: 30px;
	}

	.header-pcinfoArea_telIcon{
		background: url(../img/site/icon_tel.svg) left no-repeat;
		background-size: contain;
		padding-left: 40px;
	}

	.header-pcinfoArea_btnWrap{
		margin-left: 30px;
	}

	.header-pcinfoArea_btn{
		display: block;
		background: var(--c-main);
		color: #fff;
		font-weight: 700;
		font-size: 16px;
		padding: 10px 30px;
		border-radius: 5px;
		letter-spacing: 0.1em;
		text-align: center;
	}

	.header-pcinfoArea_btn:hover{
		opacity: 0.9;
    transition: all 0.3s;
	}

	.header-pcinfoArea_btn:nth-child(n+2) {
		margin-top: 5px;
	}

	.header-pcinfoArea_reservationIcon{
		background: url(../img/site/icon_reservation_header.svg) left no-repeat;
		background-size: contain;
		padding-left: 30px;
	}

	.header-pcinfoArea_extraIcon{
		background: url(../img/site/icon_extra_header.svg) left no-repeat;
		background-size: contain;
		padding-left: 30px;
	}
}

/* PC（大画面）のみ */
@media print, screen and (min-width : 1920px){
	.header-pcLogoArea{
		order: 1;
	}
	
	.header-pcinfoArea{
		order: 3;
		width: auto;
	}
	
	.header-pcNavArea{
		order: 2;
		margin: 30px 15px;
	}

	.header-pcNav_item{
		margin-top: 0;
	}
}

/*--------------------------------------------------------------
##メインビジュアル
--------------------------------------------------------------*/

.top-mv{
	width: 100%;
}

.top-mv_inner{
	width: 100%;
	background: #fff;
}

.top-mv_wrap{
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	border-radius: 15px;
	display: flex;
	z-index: 1;
}

.top-mv_item{
	position: absolute;
	z-index: 2;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}
/* 注意: 静止表示（mv_count=1）にアニメーションを付けないこと。
   クロスフェードは mv_count>=2 のときだけ .top-mv--multi 系（ec-bgAnime）が担う。
   旧spiral由来の slide-animation 系keyframesはコメントアウト放置だと
   「実体のないanimation指定」として残り事故の種になるため v2.3.15 で撤去済み */

.top-mv_copy{
	position: relative;
	z-index: 3;
	font-size: 22px;
	font-family: var(--font-base);
}

.top-mv_copyTxt{
	/* 旧世代CSSは全称リセット（*{font-size:inherit;margin:0}）内蔵で h2 のブラウザ既定拡大(1.5em)が
	   効かない前提の設計。キットのsanitize.css(v13)は見出し既定を残すため、ここで明示的に打ち消して
	   spiral本番と同寸(22px)にする。サイトごとの拡大は子テーマ site.css で行う */
	font-size: inherit;
	margin: 0;
}

.top-mv_copyTxtItem{
	background: #fff;
	display: inline-block;
	padding: 5px 10px;
	margin-top: 10px;
	border-radius: 5px;
}

.top-mv_copyTxtItem:first-child{
	margin-top: 0;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.top-mv_copy{
		font-size: 16px;
	}
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.top-mv{
		height: 475px;
		padding: 0 15px;
		margin-top: 15px;
	}
	
	.top-mv_inner{
		width: 100%;
		height: 475px;
	}
	
	.top-mv_wrap{
		height: 475px;
		padding: 30px 15px;
		align-items:flex-end;
	}
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
	.top-mv{
		height: calc(100vh - 600px);
		min-height: 400px;
		padding: 0 30px;
	}
	
	.top-mv_inner{
		width: 100%;
		height: calc(100vh - 600px);
		min-height: 400px;
	}
	
	.top-mv_wrap{
		height: calc(100vh - 600px);
		min-height: 400px;
		padding: 0 50px;
		align-items: center;
	}	
}

/*--------------------------------------------------------------
##TOP重要なお知らせ
--------------------------------------------------------------*/

.top-notices{
	margin: 30px auto 0;
	padding: 0 30px;
	max-width: 1200px;
}

.top-notices_inner{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.top-notices_headingWrap{
	width: 175px;
	margin-right: 30px;
}

.top-notices_heading02{
	font-size: 24px;
	font-family: var(--font-base);
}

.top-notices_link{
	background-color: #fff;
	border-radius: 5px;
	padding: 30px;
	display: block;
}

.top-notices_listitem{
	margin-top: 10px;
}

.top-notices_listitem:first-child{
	margin-top: 0;
}

.top-notices_list{
	width: calc(100% - 205px);
}

.top-notices_day{
	font-size: 13px;
	color: var(--c-accent-light);
	padding-right: 10px;
}

.top-notices_title{
	font-weight: bold;
	font-family: var(--font-base);
	padding-right: 10px;
	font-size: 16px;
}

.top-notices_txt{
	font-size: 15px;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.top-notices_headingWrap{
		width: 100%;
		margin-right: 0;
	}

	.top-notices_heading02{
		font-size: 20px;
	}	

	.top-notices_list{
		width: 100%;
		margin-top: 15px;
	}

	.top-notices_day{
		font-size: 13px;
		padding-right: 5px;
	}

	.top-notices_title{
		font-size: 15px;
	}

	.top-notices_txt{
		font-size: 13px;
	}
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.top-notices{
		padding: 0 15px;
	}

	.top-notices_link{
		padding: 30px 15px;
	}
}

/*--------------------------------------------------------------
##TOPインフォメーション
--------------------------------------------------------------*/

.top-information{
	margin-top: 30px;
	color: #fff;
}

.top-information_newsArea,
.top-information_scheduleArea{
	display: flex;
	justify-content: center;
	padding: 50px 30px;
}

.top-information_newsArea,
.top-information_scheduleArea{
	width: 100%;
}

.top-information_newsArea{
	background: var(--c-main);
}

.top-information_scheduleArea{
	background: var(--c-sub);
}

.top-information_heading02{
	font-size: 24px;
	font-family: var(--font-base);
}

.top-information_heading02:first-letter{
	color: var(--c-accent-light);
}

.top-information_item{
	list-style: none;
	margin-top: 10px;
}

.top-information_item:first-child{
	margin-top: 15px;
}

.top-information_link{
	background: var(--c-accent-btn);
	border-radius: 3px;
	display: block;
	color: #fff;
	padding: 15px 30px;
	width: 100%;
}

.top-information_day{
	font-size: 11px;
	margin-right: 10px;
	letter-spacing: 0;
	color: var(--c-accent-light);
}

.top-information_title{
	font-size: 15px;
}

.top-information_table{
	border-collapse: collapse;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	background: var(--c-accent-dark);
	margin-top: 15px;
	border-radius: 3px;
}

.top-informastion_tr,
.top-information_td{
	padding: 12px 8px;
}

.top-information_th{
	border-bottom: 4px solid var(--c-sub);
	font-weight: normal;
}

.top-information_th{
	padding:13px 10px 8px 10px;
}

.top-information_td--time{
	font-size: 14px;
}

.top-information_td--mark{
	color:var(--c-point);
	font-size: 20px;
}

.top-information_note{
	font-size: 14px;
	margin-top: 15px;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.top-information_heading02{
		font-size: 20px;
	}
}
	
/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.top-information_newsArea,
	.top-information_scheduleArea{
		padding: 50px 15px;
	}

	.top-information_newsAreaInner,
	.top-information_scheduleAreaInner{
		width: 100%;
	}

	.top-information_th{
		font-size: 12px
	}

	.top-information_td{
		font-size: 12px
	}
}

/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){
	.top-information{
		display: flex;
	}
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
	.top-information_newsAreaInner,
	.top-information_scheduleAreaInner{
		width: 450px;
	}
}

/*--------------------------------------------------------------
##TOPイントロダクション
--------------------------------------------------------------*/

.top-intro{
	margin-top: 50px;
}

.top-intro_heading02{
	color: var(--c-main);
	text-align: center;
	font-size: 30px;
	font-family: var(--font-base);
}

.top-intro_underline{
	border-bottom:solid 3px var(--c-point);
}

.top-intro_inner{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 30px;
}

.top-intro_photoArea{
	width: 450px;
	margin-right: 30px;
}

.top-intro_txtArea{
	width: calc(100% - 480px);
}

.top-intro_txt{
	margin-top: 10px;
}

.top-intro_txt:first-child{
	margin-top: 0;
}

.top-bgcolorArea{
	background: var(--c-main);
	padding: 30px;
	border-radius: 15px;
	margin-top: 30px;
	text-align: center;
}

.top-bgcolorArea-heading03{
	color: #fff;
	font-size: 18px;
	font-weight: normal;
}

.top-bgcolorArea-headingLarge{
	font-size: 24px;
	font-weight: bold;
	font-family: var(--font-base);
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.top-intro_heading02{
		font-size: 24px;
	}

	.top-intro_photoArea{
		width: 100%;
		margin-right: 0;
	}
	
	.top-intro_txtArea{
		width: 100%;
		margin-top: 15px;
	}

	.top-bgcolorArea{
		padding: 30px 15px;
		margin-top: 15px;
	}
	
	.top-bgcolorArea-heading03{
		font-size: 16px;
	}
	
	.top-bgcolorArea-headingLarge{
		font-size: 20px;
	}
}

/*--------------------------------------------------------------
##TOP診療内容
--------------------------------------------------------------*/

.top-service{
	margin-top: 50px;
}

.top-service_heading02{
  position: relative;
  padding: 0 30px;
  text-align: center;
	color: var(--c-main);
	font-size: 30px;
	font-family: var(--font-base);
}

.top-service_heading02:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: var(--c-main);
}

.top-service_heading02Inner {
  position: relative;
  padding: 0 1em;
  background: var(--c-body-bg);
}

.top-service_list{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}

.top-service_listItem{
	background: #fff;
	border-radius: 10px;
	position: relative;
	list-style: none;
}

.top-service_listLink{
	display: block;
	text-align: center;
	padding: 30px;
	width: 100%;
	height: 100%;
}

.top-service_listLink:hover{
	box-shadow: 5px 5px var(--c-point);	
	border-radius: 5px;
}

.top-service_heading03{
	font-size: 24px;
	font-family: var(--font-base);
	color: var(--c-main);
}

.top-service_listImg{
	width: 110px;
	height: 110px;
	margin-top: 5px;
}

.top-service_listTxt{
	text-align: justify;
	font-size: 14px;
	margin-top: 15px;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.top-service_heading02{
		font-size: 24px;
	}

	.top-service_listItem{
		width: 100%;
		margin-top: 15px;
		margin-right: 0;
	}

	.top-service_listItem:first-child{
		margin-top: 0;
	}

	.top-service_heading03{
		font-size: 20px;
	}
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.top-service_listLink{
		padding: 30px 15px;
	}
}

/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){
	.top-service_listItem{
		width: calc((100% - 30px) / 3);
		margin-top: 15px;
		margin-right: 15px;
	}

	.top-service_listItem:nth-child(-n+3){
		margin-top: 0;
	}
	
	.top-service_listItem:nth-of-type(3n){
		margin-right: 0;
	}
}
/*--------------------------------------------------------------
## TOP_バナーエリア
--------------------------------------------------------------*/

.top-bnrarea{
	margin-top: 30px;
}

.top-bnrarea_inner{
	display: flex;
	flex-wrap: wrap;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.top-bnrarea_bnr{
		width: calc((100% - 10px) / 2);
		margin-top: 15px;
		margin-right: 10px;
	}
	
	.top-bnrarea_bnr:nth-child(-n+2){
		margin-top: 0;
	}
	
	.top-bnrarea_bnr:nth-of-type(2n){
		margin-right: 0;
	}
}

/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){
	.top-bnrarea_inner{
		justify-content: center;
	}
	
	.top-bnrarea_bnr{
		width: calc((100% - 30px) / 3);
		margin-top: 15px;
		margin-right: 15px;
	}
	
	.top-bnrarea_bnr:nth-child(-n+3){
		margin-top: 0;
	}
	
	.top-bnrarea_bnr:nth-of-type(3n){
		margin-right: 0;
	}
}

/*--------------------------------------------------------------
## footer
--------------------------------------------------------------*/

.footer{
	margin-top: 50px;
}

.footer-clinicInfo{
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 50px 30px;
}

.footer-clinicMap{
	background-color: var(--c-main);
}

.footer-clinicMap_iframeWrapper{
	height: 100%;
}

.footer-clinicMap iframe{
	height: 100%;
}

.footer-logo_txt{
	font-size: 16px;
	font-family: var(--font-base);
}

.footer-logo_imgLogoHorizontal{
	width: 250px;
	display: inline-block;
}

.footer-logo_imgLogoVertical{
	width: auto;
	height: 75px;
	display: inline-block;
}

.footer-clinicTxt{
	font-size: 16px;
	margin-top: 15px;
}

.footer-clinicTel{
	font-size: 30px;
	font-family: var(--font-base);
	font-weight: bold;
	margin-top: 30px;
}

.footer-clinicTel_icon{
	background: url("../img/site/icon_tel.svg") no-repeat;
	background-size: contain;
	padding-left: 45px;
}

.footer-clinicInfoBtnArea{
	margin-top: 15px;
}

.footer-clinicInfoBtnArea_btn{
	display: block;
	background: var(--c-main);
	color: #fff;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 5px;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 5px auto 0;
	font-family: var(--font-base);
	font-size: 18px;
	max-width: 400px;
}

.footer-clinicInfoBtnArea_btn:first-child{
	margin-top: 0;
}

.footer-clinicInfoBtnArea:hover{
	opacity: 0.9;
	transition: all 0.3s;
}

.footer-clinicInfoBtnArea_reservationIcon{
	background: url(../img/site/icon_reservation_header.svg) left no-repeat;
	background-size: contain;
	padding-left: 30px;
}

.footer-clinicInfoBtnArea_extraIcon{
	background: url(../img/site/icon_extra_header.svg) left no-repeat;
	background-size: contain;
	padding-left: 30px;
}

.footer-clinicInfo_table{
	border-collapse: collapse;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	background: var(--c-main);
	margin-top: 30px;
	border-radius: 3px;
	color: #fff;
}

.footer-clinicInfo_tr,
.footer-clinicInfo_td{
	padding: 12px 8px;
}

.footer-clinicInfo_th{
	border-bottom: 2px solid #fff;
	font-weight: normal;
}

.footer-clinicInfo_th{
	padding:13px 10px 8px 10px;
}

.footer-clinicInfo_td--time{
	font-size: 14px;
}

.footer-clinicInfo_td--mark{
	color:var(--c-accent-light);
	font-size: 20px;
}

.footer-clinicInfo_note{
	font-size: 14px;
	margin-top: 15px;
}

.footer-clinicImgListWrap{
	display: flex;
	flex-wrap: wrap;
}

.footer-clinicImgList{
	width: calc(100% / 6);
	list-style: none;
}

.footer-clinicImg{
	width: 100%;
}

.footer-bnrarea{
	margin: 50px 0;
}

.footer-bnrarea_inner{
	display: flex;
	flex-wrap: wrap;
}

.footer-sitemap{
	background: var(--c-main);
	color: #fff;
	text-align: center;
	padding: 40px 0 50px 0;
}

.footer-sitemapList{
	display: flex;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
	padding:0 15px;
}

.footer-sitemapListItem{
	text-align: center;
	border-right:solid 1px var(--c-point);
	padding: 0 10px;
	list-style: none;
	margin-top: 10px;
}

.footer-sitemapListItem:last-child{
	border-right:none;
}

.footer-sitemapListLink{
	color: #fff;
	padding: 0 5px;
}

.footer-copyright{
	margin-top: 30px;
	font-size: 13px;
}

.footer-pagetop{
	position: fixed;
	right: 15px;
	bottom:15px;
	z-index: 1000;
}

.footer-pagetop_img{
	width: 55px;
	height: 55px;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.footer-bnrarea_bnr{
		width: calc((100% - 10px) / 2);
		margin-top: 15px;
		margin-right: 10px;
	}
	
	.footer-bnrarea_bnr:nth-child(-n+2){
		margin-top: 0;
	}
	
	.footer-bnrarea_bnr:nth-of-type(2n){
		margin-right: 0;
	}
	
	.footer-sitemapListLink{
		font-size: 13px;
	}

	.footer-pagetop_img{
		width: 45px;
		height: 45px;
	}
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.footer-clinicInfo_th{
		font-size: 12px
	}

	.footer-clinicInfo_td{
		font-size: 12px
	}

	.footer-clinicImgList{
		width: calc(100% / 3);
	}

	.footer-clinicMap_iframeWrapper{
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
	}
	
	.footer-clinicMap_iframeWrapper iframe,
	.footer-clinicMap_iframeWrapper object,
	.footer-clinicMap_iframeWrapper embed{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){
	.footer-bnrarea_inner{
		justify-content: center;
	}

	.footer-bnrarea_bnr{
		width: calc((100% - 30px) / 3);
		margin-top: 15px;
		margin-right: 15px;
	}
	
	.footer-bnrarea_bnr:nth-child(-n+3){
		margin-top: 0;
	}
	
	.footer-bnrarea_bnr:nth-of-type(3n){
		margin-right: 0;
	}
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
	.footer-info{
		display: flex;
		min-height: 200px;
	}

	.footer-clinicInfo{
		width: 50%;
		padding: 50px 30px;
	}
	
	.footer-clinicMap{
		width: 50%;
	}
}

/*--------------------------------------------------------------
##サブページパンくず
--------------------------------------------------------------*/

.sub-breadcrumb{
	width: 100%;
	font-size:13px;
	margin-top: 15px;
}

.sub-breadcrumb_link:hover{
	text-decoration:underline;
}

.sub-breadcrumb_arw{
	color: var(--c-point);
	padding: 0 3px;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.sub-breadcrumb{
		font-size:13px;
	}
}

/*--------------------------------------------------------------
##サブページ:共通
--------------------------------------------------------------*/

.sub-contents{
	margin-top: 15px;
}

.sub-contents--blog{
	width: 680px;
}

.sub-contents_inner{
	background: #fff;
	padding: 0 30px 50px;
}

.sub-contents_iframe{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-top: 30px;
}

.sub-contents_iframe iframe,
.sub-contents_iframe object,
.sub-contents_iframe embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.sub-contents_inner{
		padding: 0 15px 50px;
	}	

	.sub-contents--blog{
		width: 100%;
	}
}

/*--------------------------------------------------------------
##サブページ:メインビジュアル
--------------------------------------------------------------*/

.sub-mv{
	width: 100%;
	margin-top: 30px;
}

.sub-mv > div{
	width: 100%;
  height: 100%;
}

/* スマホのみ */
@media screen and (max-width: 767px){
.sub-mv{
	height: 140px;
  padding: 0 12px;	
}

.sub-mv > div{
	border-radius: 8px;
}
}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {
.sub-mv{
	height: 230px;
    padding: 0 15px;	
}

.sub-mv > div{
	border-radius: 10px;
}
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
.sub-mv{
	height: 300px;
  padding: 0 30px;	
}

.sub-mv > div{
	border-radius: 10px;
}
}

/*--------------------------------------------------------------
##サブページ:文字装飾・リンク
--------------------------------------------------------------*/

.sub-contents_heading01{
	padding: 30px;
	font-size: 36px;
	background: var(--c-main);
	border-radius: 5px 5px 0 0;
	color: #fff;
	font-family: var(--font-base);
	line-height: 1.5;
}

.sub-contents_heading02,
.sub-contents_heading03,
.sub-contents_heading04,
.sub-contents_heading05{
	margin-top: 15px;
	font-family: var(--font-base);
	line-height: 1.5;
}

.sub-contents_paragraph{
	padding-top: 35px;
	overflow-wrap: break-word;
}

.sub-contents_txt{
	margin-top: 15px;
	padding: 0 5px;
}

.sub-contents_heading02{
	position: relative;
	border-bottom: 5px solid var(--c-bg);
	font-size: 28px;
	padding-bottom: 6px;
	transform: rotate(0.028deg);
	-o-transform: rotate(0.028deg);
	-ms-transform: rotate(0.028deg);
	-moz-transform: rotate(0.028deg);
	-webkit-transform: rotate(0.028deg);
	color: var(--c-main);
	font-family: var(--font-base);
}

.sub-contents_heading02::after{
	position: absolute;
	bottom: -5px;
	left: 0;
	z-index: 2;
	content: '';
	width: 15%;
	height: 5px;
	background: var(--c-point);
}

.sub-contents_heading03{
	font-size: 22px;
	border-top: 2px solid var(--c-main);
	border-bottom: 2px solid var(--c-main);
	padding: 10px 15px 10px 15px;
	color: var(--c-main);
}

.sub-contents_heading04{
	font-size: 20px;
	position: relative;
	padding-left: 15px;
	color: var(--c-main);
}

.sub-contents_heading04:before{
	width: 4px;
	height: 100%;
	border-radius: 2px;
	background: var(--c-main);
	left: 0;
	bottom:1px;
	content: '';
	position: absolute;
}

.sub-contents_heading05{
	font-size: 18px;
	font-weight: bold;
	color: var(--c-main);
	padding-left: 5px;
}

.sub-contents_txt--marker{
	border-bottom: solid 3px var(--c-point);
}
.sub-contents_txt--bold{
	font-weight: bold;
}
.sub-contents_txt--siteColor{
	color: var(--c-main);
}
.sub-contents_txt--siteSubcolor{
	color: var(--c-sub);
}
.sub-contents_txt--red{
	color: #F0493C;
}
.sub-contents_txt--blue{
	color: #4797c9;
}
.sub-contents_txt--color01{
	color: #ebad41;
}
.sub-contents_txt--color02{
	color: #62bb2d;
}
.sub-contents_txt--small{
	font-size: 13px;
}
.sub-contents_txt--large{
	font-size: 24px;
}

.sub-contents_txt--wf{
	font-family: var(--font-base);
}

.sub-contents_link{
	font-weight: bold;
	text-align: left;
	text-decoration: underline;
	color: var(--c-main);
}

.sub-contents_link:hover{
	text-decoration: none;
}

.sub-contents_link--arw{
	background: url("../img/site/icon_arw.svg") no-repeat left center;
	background-size:11px 11px;
	padding: 3px 0 0 16px;
	font-weight: bold;
	font-size: 16px;
	display: inline-block;
	text-align: left;
	color: var(--c-main);
}

.sub-contents_link--arw:hover{
	text-decoration: underline;
}

.sub-contents_link--btn{
	display:inline-block;
	background: #fff;
  border: 3px solid var(--c-main);
	border-radius:5px;
	padding:17px 15px 13px 15px;
	font-weight: bold;
	margin-top: 15px;
}

.sub-contents_link--btnArw{
	background: url("../img/site/icon_arw.svg") no-repeat left center;
	background-size:11px 11px;
	padding-right:15px;
	padding-left: 22px;
	display: inline-block;
	line-height: 1.4;
}

.sub-contents_link--btnWide{
	display:block;
	background: #fff;
  border: 3px solid var(--c-main);
	border-radius:5px;
	padding:17px 15px 15px 15px;
	font-weight: bold;
	margin-top: 15px;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.sub-contents_heading01{
		padding: 30px 15px;
		font-size: 28px;
	}

	.sub-contents_heading02{
		font-size: 24px;
	}

	.sub-contents_heading03{
		font-size: 22px;
	}

	.sub-contents_heading04{
		font-size: 20px;
	}

	.sub-contents_heading05{
		font-size: 18px;
	}
}

/*--------------------------------------------------------------
##サブページ:文字装飾・リスト
--------------------------------------------------------------*/

.sub-contents_list{
	margin-top: 20px;
}

.sub-contents_listItem{
	margin-top: 10px;
	padding-left: 24px;
	list-style: none;
	text-indent: -22px;
	font-size: 14px;
}

.sub-contents_list--arw{
	margin-top: 20px;
}

.sub-contents_list--arw .sub-contents_listItem{
	background: url("../img/site/icon_arw.svg") no-repeat 4px 6px;
	background-size: 8px 8px;
	padding: 0 0 2px 20px;
	line-height: 25px;
	margin-top: 10px;
	text-indent: 0;
}

.sub-contents_list--check{
	margin-top: 20px;
}

.sub-contents_list--check .sub-contents_listItem{
	background: url(../img/site/icon_check.svg) no-repeat 0 4px;
	background-size: 16px 16px;
	padding: 0 0 2px 22px;
	line-height: 25px;
	margin-bottom: 10px;
	text-indent: 0;
}

.sub-contents_list--number {
	margin-top: 20px;
	counter-reset: li_count;
}

.sub-contents_list--number .sub-contents_listItem:before {
	counter-increment: li_count;
	content: counter(li_count) ".";
	color: var(--c-main);
	font-weight: bold;
	letter-spacing: 0;
	width: 11px;
	display: inline-block;
	margin-left: 10px;
	padding-left: 10px;
}


/*--------------------------------------------------------------
##サブページ:テーブル
--------------------------------------------------------------*/

.sub-contents_table{
	border-collapse: collapse;
	width: 100%;
	background: #fff;
	font-size: 14px;
	letter-spacing: 0;
	margin-top: 30px;
}

.sub-contents_tr,
.sub-contents_td{
	padding:15px;
	border: 2px solid var(--c-bg);
	text-align:left;
}

.sub-contents_th{
	border: 2px solid var(--c-main);
	background-color: var(--c-main);
	font-size: 17px;
	padding:15px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.sub-contents_td--title,
.sub-contents_td--titleCenter,
.sub-contents_td--titleRight{
	background: var(--c-main-a1);
	font-weight: bold;
	color: var(--c-main);
}

.sub-contents_td--titleCenter{
	text-align: center;
}

.sub-contents_td--titleRight{
	text-align: right;
}

.sub-contents_td--right{
	text-align:right;
}

.sub-contents_td--center{
	text-align:center;
}

#contents table td.center{
	text-align:center;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.sub-contents_table{
		font-size: 13px;
	}
	
	.sub-contents_tr,
	.sub-contents_td{
		padding:13px;
	}
	
	.sub-contents_th{
		font-size: 13px;
	}
}

/*--------------------------------------------------------------
##サブページ:ボックス
--------------------------------------------------------------*/

.sub-contents_box{
	border-radius: 5px;
	background: #fff;
	margin-top: 15px;
}

.sub-contents_box--border{
	border: 4px solid var(--c-bg);
	padding: 15px 30px 30px 30px;
}

.sub-contents_box--color{
	background: var(--c-main-a1);
	padding: 15px 30px 30px 30px;
}

/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){
	.sub-contents_boxWrap{
		display: flex;
		flex-wrap: wrap;
	}
	
	.sub-contents_boxWrap--half .sub-contents_box{
		width: calc((100% - 15px) / 2);
		margin-right: 15px;
	}
	
	.sub-contents_boxWrap--half .sub-contents_box:nth-of-type(2n){ 
		margin-right: 0;
	}
	
	.sub-contents_boxWrap--three .sub-contents_box{
		width: calc((100% - 30px) / 3);
		margin-right: 15px;
	}
	
	.sub-contents_boxWrap--three .sub-contents_box:nth-of-type(3n){ 
		margin-right: 0;
	}
}


/*--------------------------------------------------------------
##サブページ:画像・コンテンツ配置
--------------------------------------------------------------*/

.sub-contents_img{
	margin-top: 15px;
	max-width: 100%;
	height: auto;
}

.sub-contents_img--full{
	width: 100%;
	height: auto;
}

.sub-contents_img--center{
	display: block;
	margin: 15px auto 0;
}

.sub-contents_img--right,
.sub-contents_img--left{
	width: 385px;
	float: right;
	margin-bottom: 15px;
}

.sub-contents_img--right{
	margin-left: 15px;
	float: right;
}

.sub-contents_img--left{
	margin-right: 15px;
	float: left;
}

.sub-contents_boxWrap .sub-contents_img{
	margin-top: 0;
}

.sub-contents_img--noResize{
	width:auto;
	height:auto;
}

/*--------------------------------------------------------------
##サブページ:；ページネーション
--------------------------------------------------------------*/

.pagination{
	margin-top: 30px;
}

.pagination span,
.pagination a {
  margin: 0 5px;
  padding: 10px 15px;
  text-decoration: none;
  color: var(--c-main);
  border: 1px solid var(--c-main);
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
	font-size: 13px;
}

.pagination a:hover {
  background-color: var(--c-main);
  color: #fff;
}

.pagination .inactive {
  color: #ccc;
  border-color: #ccc;
}

.pagination .current {
  background-color: var(--c-main);
  color: #fff;
  cursor: default;
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.pagination span,
	.pagination a {
		margin: 0 3px;
		padding: 5px 10px;
		font-size: 12px;
	}
}

/*--------------------------------------------------------------
##サブページ:サイドバー
--------------------------------------------------------------*/

.sub-sidebar{
	width: var(--width-sidebar);
}

.sub-sidebar_heading02{
	font-size: 20px;
	position: relative;
	padding-left: 15px;
	color: var(--c-main);
	margin-top: 30px;
	font-family: var(--font-base);
}

.sub-sidebar_heading02:before{
	width: 4px;
	height: 100%;
	border-radius: 2px;
	background: var(--c-main);
	bottom:1px;
	left: 0;
	content: '';
	position: absolute;
}

.sub-sidebar_heading03{
	font-size: 16px;
	margin-top: 15px;
	font-family: var(--font-base);
}

.sub-sidebar_list{
	margin-top: 15px;
	list-style: none;
}

.sub-sidebar_listItem{
	background: url("../img/site/icon_arw.svg") no-repeat 4px 6px;
	background-size: 8px 8px;
	padding: 0 0 2px 20px;
	line-height: 25px;
	margin-top: 10px;
	text-indent: 0;
}

.sub-sidebar_listItem:first-child{
	margin-top: 0;
}

.sub-sidebar_listItem a{
	/* 記事タイトルは常に1行・入り切らない分はCSS省略記号（v2.3.18。
	   PHP側の文字数トリムは撤廃済み=幅が広いほど多く表示される） */
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sub-sidebar_txt{
	margin-top: 15px;
}

.sub-sidebar_link{
	font-weight: bold;
	color: var(--c-main);
	font-size: 14px;
}

.sub-sidebar_bnrArea{
	margin-top: 30px;
}

.sub-sidebar_bnr{
	margin-top: 10px;
}

.sub-sidebar_bnr:first-child{
	margin-top: 0;
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
	.sub-sidebar{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.sub-sidebar_inner{
		width: calc((100% - 30px) / 2);
		margin-right: 30px;
	}
	
	.sub-sidebar_inner:nth-of-type(2n){ 
		margin-right: 0;
	}

	.sub-sidebar_heading02{
		font-size: 18px;
	}

	.sub-sidebar_heading03{
		font-size: 16px;
	}

	.sub-sidebar_listItem{
		line-height: 1.5;
		margin-top: 5px;
		font-size: 13px;
	}

	.sub-sidebar_inner--spFull{
		width: 100%;
		margin-right: 0;
	}
}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {
	.sub-sidebar_inner{
		width: calc((100% - 30px) / 3);
		margin-right: 15px;
	}
	
	.sub-sidebar_inner:nth-of-type(3n){ 
		margin-right: 0;
	}
}


/*--------------------------------------------------------------
##
--------------------------------------------------------------*/
/* スマホのみ */
@media screen and (max-width: 767px){
}


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


/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {
}


/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){
}


/* スマホとタブレットとPC（小画面） */
@media screen and (max-width: 1199px) {
}


/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
}


/* PC（大画面）のみ */
@media print, screen and (min-width : 1920px){
}


/*IE調整*/

/*--------------------------------------------------------------
##KIT拡張: 複数枚MVクロスフェード
mv_count>=2 のとき template-parts/front/mv.php が .top-mv--multi と
.top-mv--n{枚数} を出力する（akiganka世代 bgAnime の移植）。
各画像は site.css で .top-mv_item--0N に background を指定すること。
--------------------------------------------------------------*/
.top-mv--multi .top-mv_item{
	opacity: 0;
	animation-name: ec-bgAnime;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
.top-mv--n2 .top-mv_item{ animation-duration: 10s; }
.top-mv--n3 .top-mv_item{ animation-duration: 15s; }
.top-mv--n4 .top-mv_item{ animation-duration: 20s; }
.top-mv--n5 .top-mv_item{ animation-duration: 25s; }
.top-mv--n6 .top-mv_item{ animation-duration: 30s; }
.top-mv--multi .top-mv_item--02{ animation-delay: 5s; }
.top-mv--multi .top-mv_item--03{ animation-delay: 10s; }
.top-mv--multi .top-mv_item--04{ animation-delay: 15s; }
.top-mv--multi .top-mv_item--05{ animation-delay: 20s; }
.top-mv--multi .top-mv_item--06{ animation-delay: 25s; }
@keyframes ec-bgAnime {
	0% { opacity: 0; }
	10% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 0; }
	100% { opacity: 0; }
}

/*--------------------------------------------------------------
##KIT拡張: SP表示の整備（spiral未検証領域の修正）
--------------------------------------------------------------*/
/* 非nav系コンポーネントULのブラウザ標準パディング(左40px)を除去
   （カード・一覧・写真グリッドが右へズレる原因。sanitize.cssはnav配下しかリセットしない） */
.top-service_list,
.top-information_list,
.footer-clinicImgListWrap,
.footer-sitemapList,
.sub-sidebar_list,
.sub-breadcrumb ul {
	padding-left: 0;
	list-style: none;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	/* サイドバーのブロックが1つだけのサイト（バナー無し）は全幅表示
	   （既定は記事一覧とバナーが半分幅ずつ並ぶ設計のため、片方だけだと左に寄る） */
	.sub-sidebar_inner:only-child{
		width: 100%;
		margin-right: 0;
	}
}

/*--------------------------------------------------------------
##KIT拡張: MV円形バッジ（横浜わかば眼科由来の標準パーツ）
config 'mv_badges' に1件以上設定すると front/mv.php が出力する。
複数指定で横並び（例:「土日祝も診療」「予約不要」）。色はメインカラー連動。
--------------------------------------------------------------*/
.top-mv_extra{
	position: absolute;
	z-index: 100;
	display: flex;
	align-items: flex-end;
}

.top-mv_extraBox{
	background: var(--c-main);
	color: #fff;
	border-radius: 50%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.top-mv_extraBox:last-child{
	margin-right: 0;
}

.top-mv_extraIcon{
	width: 35px;
	height: auto;
	margin-bottom: 10px;
}

.top-mv_extraTitle{
	font-size: 13px;
	line-height: 140%;
}

/* スマホのみ */
@media screen and (max-width: 767px){
	.top-mv_extra{
		right: 15px;
		top: 20px;
	}

	.top-mv_extraBox{
		width: 80px;
		height: 80px;
		padding: 10px 5px;
	}

	.top-mv_extraIcon{
		width: 20px;
		margin-bottom: 5px;
	}

	.top-mv_extraTitle{
		font-size: 9px;
		line-height: 130%;
	}
}

/* タブレットとPC */
@media print, screen and (min-width:768px){
	.top-mv_extra{
		right: 30px;
		bottom: 30px;
	}
}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px){
	.top-mv_extraBox{
		width: 120px;
		height: 120px;
		padding: 10px;
	}

	.top-mv_extraIcon{
		width: 30px;
		margin-bottom: 8px;
	}
}

/* PC */
@media print, screen and (min-width : 1024px){
	.top-mv_extraBox{
		width: 150px;
		height: 150px;
		padding: 10px;
	}
}

/* PC（大画面）のみ */
@media print, screen and (min-width : 1920px){
	.top-mv_extra{
		right: 60px;
		bottom: 60px;
	}

	.top-mv_extraTitle{
		font-size: 22px;
	}
}

/*--------------------------------------------------------------
##KIT拡張: PCヘッダーのWEB予約ボタン（横浜わかば眼科の実装を移植）
config 'reserve_url' 設定時に header-pc.php が出力（null=非表示）。
色はメインカラー、ホバーでサブカラーに連動。
--------------------------------------------------------------*/
/* 既定レイアウト（spiral型）の予約ボタンは「電話番号の直下」（ユーザー指定・
   ローカルレプリカで1130/1920px検証済み）。txtWrapを2列グリッド化:
   列1=住所（縦中央スパン）・列2=電話(上段)＋ボタン(下段・電話と左端揃え)。
   ボタン無しサイトは下段が潰れて従来の「住所｜電話」と同一表示になる */
.header-pcinfoArea{
	min-width: 0;
}

.header-pcinfoArea_txtWrap{
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 0; /* 住所↔電話のガターは_tel/_reserveのmargin-left:30pxが担う。column-gapを併用すると二重取りで本番(30px)より広がりナビ折返し閾値も悪化する（v2.3.14） */
	align-items: center;
}

.header-pcinfoArea_txt{
	grid-column: 1;
	grid-row: 1 / 3;
}

.header-pcinfoArea_tel{
	grid-column: 2;
	grid-row: 1;
}

.header-pcinfoArea_reserve{
	grid-column: 2;
	grid-row: 2;
	margin: 6px 0 0 30px; /* 左30=電話のmargin-leftと揃え */
	justify-self: start;
}

.header-pcinfoArea_reserveBtn{
	font-family: var(--font-base);
	font-weight: 700;
	display: block;
	background: var(--c-main);
	color: #fff;
	font-size: 20px;
	min-width: 220px; /* 文言長に自動追従（reserve_label config対応）。固定幅が必要なサイトは子で上書き */
	padding: 0 25px;
	height: 50px;
	border-radius: 5px;
	text-align: center;
	margin-top: 10px;
	margin-left: auto;
}

.header-pcinfoArea_reserveBtn:hover{
	background: var(--c-sub);
}

.header-pcinfoArea_reserveTxt{
	background: url("../img/site/icon_reservation_header.svg") no-repeat left center;
	background-size: contain;
	padding-left: 35px;
	line-height: 50px;
	letter-spacing: 2px;
	/* display:inline-block禁止: インラインのままにすることで背景描画領域が文字高（約23px）になり、
	   contain指定のアイコンが文字サイズ相当に収まる（inline-blockだと50px箱いっぱいに拡大される。
	   わかば本番実測で発覚 v2.3.3） */
}

/*--------------------------------------------------------------
##KIT拡張: 旧世代本文 互換シム（v2.3.0・wakaba/aki載せ替え用）
旧世代サイトの入稿HTML本文に残る軽量ユーティリティクラスを最小限サポートする。
（本文のDB一括置換対象を sub-contents_* 系部品だけに絞り、汎用ユーティリティは
　置換せずそのまま生かすための受け皿。新規入稿ではstyleguideの標準部品を使うこと）
--------------------------------------------------------------*/
.right{
	text-align: right;
}

.txt_bold{
	font-weight: 700;
}

.red{
	color: #f0493c;
}

.site_color{
	color: var(--c-main);
}

.site_sub_color{
	/* v2.3.4: 旧サイト実値はポイント色（わかば=クリーム#F1D0A7。表の●マーク等）。
	   当初は可読性からサブ色に振ったが、忠実再現方針により実値へ戻した */
	color: var(--c-point);
}

/* 表内の見出しセル（旧世代は td.td_title。行内th相当の装飾） */
.sub-contents_table .td_title{
	background-color: var(--c-bg);
	font-weight: 700;
	color: var(--c-main);
}

/* v2.3.7: 晶眼科載せ替えで追加の旧世代ユーティリティ（固定色クラスは旧テンプレ実値のまま） */
.blue{
	color: #4797c9;
}

.site_option_color01{
	color: #ebad41;
}

.site_option_color02{
	color: #62bb2d;
}

/* 旧世代の「Webフォント適用」クラス（実体はアクセント用フォント＝キットの --font-base） */
.txt_wf{
	font-family: var(--font-base);
	font-weight: 700;
}

/*--------------------------------------------------------------
##KIT拡張: 既定余白の正規化（v2.3.2）
旧世代CSSは全称リセット（*{margin:0}）内蔵の前提で部品が組まれているが、
キットのsanitize v13はブラウザ既定マージン（p・h1・ul等）を温存するため、
ヘッダー等で想定外の縦余白が積み上がる（1920px環境のわかばpreで実測169px膨張）。
spiral本番の描画（既定マージン0）に一致させるため部品側で明示的にゼロにする。
--------------------------------------------------------------*/
.header-pcLogoArea h1,
.header-spLogoArea h1{
	margin: 0;
}

.header-pcinfoArea_txt,
.header-pcinfoArea_tel,
.header-pcinfoArea_reserve{
	margin-top: 0;
	margin-bottom: 0;
}

.header-pcNav_wrap{
	margin: 0;
	padding-left: 0;
}

.top-notices_listtxt{
	margin: 0;
}

/*--------------------------------------------------------------
##（撤去済み）旧KIT拡張: 大画面デザイン調整（v2.1）
稲見構築時に入れたヘッダーのフルワイド2段化・MV max-height 540px・
キャッチ段階拡大は、「全サイトをspiral標準で統一」の決定（docs/09 運用ルール4）
により v2.2.1〜v2.2.2 で全て撤去した。ヘッダー・MVとも上部の移植原設計
（中央寄せ1行クラスタ・min-1920で並び順スワップ・MVはcalc(100vh - 600px)）が
spiral本番と1:1で効いている。復活させる場合の値は git 履歴（base-v2.1.0）参照。
--------------------------------------------------------------*/