/* ===========================
   Color Tokens (Calm Blue)
   =========================== */
:root{
	/* Brand */
	--color-primary: #FFA799;  /* コーラル（アクセント） */
	--color-point:   #1F6CAB;  /* CTA/リンク（メイン） */
	--color-sub:     #E6F0F4;  /* 面/帯（背景） */

	/* Neutrals */
	--color-text-strong: #0F172A; /* 見出し */
	--color-text:        #475569; /* 本文 */
	--color-surface:     #F1F5F9; /* カード/下地 */
	--color-white:       #ffffff;
	--line-muted:        #E2E8F0; /* 罫線 */

	/* Status */
	--color-success: #2E7D32;
	--color-warn:    #F59E0B;
	--color-error:   #D92D20;

	/* Derivatives */
	--point-hover:  #1A5B92;    /* CTA hover */
	--point-ring:   #93C5FD;    /* focus ring */
	--muted-text:   #64748B;    /* 補助テキスト */
}

/* ===========================
   Reset and Base Styles
   =========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html{
	scroll-padding-top: 110px; /* 固定ヘッダーの高さ分のオフセット */
}

body{
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-white);
}

/* Remove all list bullets */
ul, ol{ list-style: none; }

/* Fade-in Animation */
.fade-in-section{ opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.fade-in-section.visible{ opacity: 1; transform: translateY(0); }

.container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ===========================
   Header Styles
   =========================== */
.header{
	background: url("../img/header_bg.jpg") no-repeat left center #ff9070;
    background-size: auto 100%;
	color: var(--color-white);
	padding: 1rem 0;
	position: sticky; top: 0; z-index: 1000;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
	border-bottom: 3px solid var(--color-primary); /* コーラルは“少量”で */
}

.header-content{
	display: flex; justify-content: space-between; align-items: center; position: relative;
}

.logo-image{ height: 70px; width: auto; max-width: 300px; }

.nav-menu{
	display: flex; gap: 2rem; margin: 0; padding: 0;
}

.nav-item, .nav-menu .menu-item{ position: relative; }

.nav-link, .nav-menu a{
	color: var(--color-white) !important;
	text-decoration: none;
	font-weight: 500;
	padding: .5rem 1rem;
	border-radius: 4px;
	transition: background-color .3s ease, color .3s ease;
	display: block;
}

.nav-link:hover, .nav-menu a:hover{
	background-color: rgba(255,255,255,.12);
}
.nav-menu a:hover{
    color: #FFF;
}
/* dropdown */
.dropdown-menu, .nav-menu .sub-menu{
	position: absolute; top: 100%; left: 0;
	background: var(--color-white);
	min-width: 200px;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	border: 1px solid var(--line-muted);
	border-radius: 6px;
	opacity: 0; visibility: hidden; transform: translateY(-10px);
	transition: all .25s ease; z-index: 1001; margin: 0; padding: 0;
}

.dropdown:hover .dropdown-menu,
.nav-menu .menu-item-has-children:hover .sub-menu{
	opacity: 1; visibility: visible; transform: translateY(0);
}

.dropdown-menu li, .nav-menu .sub-menu .menu-item{
	border-bottom: 1px solid var(--line-muted);
}
.dropdown-menu li:last-child, .nav-menu .sub-menu .menu-item:last-child{
	border-bottom: none;
}

.dropdown-menu a, .nav-menu .sub-menu a{
	color: var(--color-text) !important;
	text-decoration: none;
	padding: .75rem 1rem; display: block;
	transition: background-color .2s ease, color .2s ease;
}
.dropdown-menu a:hover, .nav-menu .sub-menu a:hover{
	background-color: var(--color-surface);
	color: var(--color-point);
}

.header-contact{ font-size: 1rem; font-weight: 500; display: flex; align-items: center; gap: 1rem; }
.header-sns{ display: flex; align-items: center; gap: .5rem; margin-left: 1rem; }

/* header-contactとheader-snsをグループ化 */
.header-contact + .header-sns{ margin-left: 1rem; }

/* モバイル用のheader-contactはデスクトップでは非表示 */
.header-contact-mobile{ display: none; }

/* WordPress Menu Classes */
.nav-menu .menu-item{ position: relative; }
.nav-menu .menu-item-has-children > a{ position: relative; }
.nav-menu .current-menu-item > a{ font-weight: 700; }

.sns-link{ display: flex; align-items: center; transition: opacity .3s ease; }
.sns-link:hover{ opacity: .85; }
.sns-icon{ width: 24px; height: 24px; object-fit: contain; }

.mobile-menu-toggle{ display: none; cursor: pointer; padding: .5rem; }
.hamburger{ width: 30px; height: 30px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hamburger .line{
	width: 25px; height: 3px; background: var(--color-white);
	margin: 2px 0; transition: all .3s ease; border-radius: 2px;
}
.mobile-menu-toggle.active .hamburger .line:nth-child(1){ transform: rotate(45deg) translate(6px, 6px); }
.mobile-menu-toggle.active .hamburger .line:nth-child(2){ opacity: 0; }
.mobile-menu-toggle.active .hamburger .line:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }

/* ===========================
   Footer Section
   =========================== */
.footer{
	background: var(--color-surface);
	color: var(--color-text);
	padding: 3rem 0 1rem;
	border-top: 1px solid var(--line-muted);
}
.footer-content{
	display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem; margin-bottom: 2rem;
}
.footer-section h3{
	margin-bottom: 1rem;
	color: var(--color-point);
	font-size: 1.1rem;
}
.footer-section a{
	color: var(--muted-text);
	text-decoration: none; transition: color .2s ease;
}
.footer-section a:hover{ color: var(--color-point); }

.group-facilities{
	text-align: center; margin-bottom: 2rem; padding-top: 2rem;
	border-top: 1px solid var(--line-muted);
}
.group-facilities h3{ margin-bottom: 1rem; color: var(--color-point); }
.facility-buttons{ display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

.facility-btn{
	background: var(--color-point); color: var(--color-white);
	padding: .5rem 1rem;
	border: 1px solid var(--color-point);
	text-decoration: none; font-size: .9rem; transition: background .2s ease, border-color .2s ease;
	border-radius: 6px;
}
.facility-btn:hover{ background: var(--point-hover); border-color: var(--point-hover); }

.footer-bottom{
	text-align: center; padding-top: 1rem;
	border-top: 1px solid var(--line-muted);
	color: var(--muted-text);
}

/* ===========================
   Common Button Styles
   =========================== */
.btn-normal{
	display: inline-block;
	background: var(--color-point); color: var(--color-white);
	padding: 1rem 2rem; text-decoration: none; font-size: 1rem; font-weight: 600;
	border: 2px solid var(--color-point); border-radius: 6px; text-align: center;
	transition: all .2s ease; cursor: pointer;
}
.btn-normal:hover{ background: var(--point-hover); border-color: var(--point-hover); }

/* Page Header Button */
.page-header-btn{
	display: inline-block; background: var(--color-white);
	color: var(--color-point); padding: .75rem 1.5rem;
	text-decoration: none; font-size: .9rem; font-weight: 600;
	border: 2px solid var(--color-point); border-radius: 6px; text-align: center;
	transition: all .2s ease; cursor: pointer;
}
.page-header-btn:hover{ background: var(--color-point); color: var(--color-white); }

/* ===========================
   Content Area for CMS
   =========================== */
.cms-posts{ max-width: 1200px; margin: 0 auto; padding: 3rem 20px; }
/* Heading Styles */
.h1{
	border-left: 3px solid #FFA799;
	font-size: 163%;
	line-height: 1.3;
	padding: 5px 17px 1px;
	margin-top: 1.5em;
	margin-bottom: 17px;
	letter-spacing: 0;
	clear: both;
    font-weight: bold;
}
.h2{
    color: #FFA799;
    font-size: 133%;
    margin: 60px 0 20px;
    font-weight: bold;
}
.h2:first-child {
    margin-top: 5px;
}
.h1 + .h2 {
    margin-top: 25px;
}
.h2{
	position: relative;
	padding-left: 50px;
}
.h2:before{
	position: absolute;
	content: "";
	width: 30px;
	height: 1px;
	top: 50%;
	left: 0;
    transform: translateY(-50%);
	background-color: #FFA799;
}
.h3{
    color: #F59E0B;
    font-size: 120%;
    font-weight: bold;
    margin: 60px 0 20px;
}
.h4{
    color: #475569;
    font-size: 110%;
    font-weight: bold;
    margin: 60px 0 20px;
}

/* ===========================
   Responsive Design
   =========================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px){
	.nav-menu{ gap: 1rem; }
	.h1{ font-size: 1.75rem; }
	.h2{ font-size: 1.5rem; }
	.h3{ font-size: 1.25rem; }
	.h4{ font-size: 1.1rem; }
	
	/* ハンバーガーメニューに切り替え */
	.header-content{ flex-wrap: wrap; }

	.nav{ display: none; width: 100%; order: 3; }
	.nav.active{ display: block; }

	.nav-menu{
		flex-direction: column; gap: 0;
		background: linear-gradient(135deg, var(--color-point), var(--point-hover));
		position: absolute; top: 100%; left: 0; right: 0;
		padding: 1rem;
		box-shadow: 0 4px 12px rgba(0,0,0,.12);
	}

	.nav-item, .nav-menu .menu-item{ border-bottom: 1px solid rgba(255,255,255,.25); }
	.nav-menu .menu-item:last-child{ border-bottom: none; }

	.nav-link, .nav-menu a{ display: block; padding: 1rem; }

	.dropdown-menu, .nav-menu .sub-menu{
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; background: rgba(255,255,255,.1);
		margin-left: 1rem; margin-top: .5rem; border-radius: 4px;
		border: 1px solid rgba(255,255,255,.25);
	}
	.dropdown-menu a, .nav-menu .sub-menu a{
		color: var(--color-white); text-decoration: none; padding: .75rem 1rem; display: block; transition: all .2s ease;
	}
	.dropdown-menu a:hover, .nav-menu .sub-menu a:hover{
		background-color: rgba(255,255,255,.18); color: var(--color-white);
	}

	.mobile-menu-toggle{ display: flex; }

	/* 1024px以下でheader-contactとheader-snsを非表示 */
	.header-contact{ display: none; }
	.header-sns{ display: none; }

	/* ハンバーガーメニュー用のheader-contactを表示 */
	.header-contact-mobile{ 
		display: block; 
		padding: 1rem; 
		border-top: 1px solid rgba(255,255,255,.25);
		margin-top: 1rem;
	}
	.header-contact-mobile p{ 
		font-size: .9rem; 
		font-weight: 500; 
		margin-bottom: .75rem;
		color: var(--color-white);
	}
	.header-sns-mobile{ 
		display: flex; 
		align-items: center; 
		gap: .75rem; 
	}
	.header-sns-mobile .sns-icon{ width: 24px; height: 24px; }
}

/* Mobile (768px and below) */
@media (max-width: 768px){

	.facility-buttons{ flex-direction: column; align-items: center; }
	.facility-btn{ width: 200px; text-align: center; }

	.cms-posts{ padding: 2rem 15px; }

	.h1{ font-size: 1.5rem; }
	.h2{ font-size: 1.25rem; }
	.h3{ font-size: 1.1rem; }
	.h4{ font-size: 1rem; }

	.btn-normal{ padding: .875rem 1.5rem; font-size: .9rem; }
	.page-header-btn{ padding: .625rem 1.25rem; font-size: .85rem; }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px){
	.container{ padding: 0 15px; }
	.footer-content{ grid-template-columns: 1fr; text-align: center; }
}

/* ===========================
   Page Navigation Styles
   =========================== */
.page-nav-wrapper{
	border: 1px solid var(--line-muted) !important;
	padding: 2rem !important; margin: 2rem 0 4rem;
	background: var(--color-surface);
	border-radius: 8px;
}
.page-nav-title{
	font-size: 1.25rem; font-weight: 600; color: var(--color-point);
	margin-bottom: 1.5rem; text-align: center;
	padding-bottom: 1rem !important;
	border-bottom: 1px solid var(--color-point);
}
.page-nav-list{
	display: flex; flex-wrap: wrap; gap: 1rem;
	list-style: none; padding: 0; margin: 0; justify-content: center;
}
.page-nav-list li{ display: inline-block; }
.page-nav-list a{
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .75rem 2.5rem;
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	border: 2px solid var(--line-muted);
	border-radius: 6px;
	font-weight: 500; transition: all .2s ease;
	font-size: .95rem;
}
.page-nav-list a::after{
	content: "→"; font-weight: bold; font-size: 1.1em;
	color: var(--color-point);
	transition: transform .2s ease, color .2s ease;
}
.page-nav-list a:hover{
	background: var(--color-point); color: var(--color-white);
	border-color: var(--color-point);
}
.page-nav-list a:hover::after{
	transform: translateX(4px); color: var(--color-white);
}

/* Mobile Responsive */
@media (max-width: 768px){
	.page-nav-list{ flex-direction: column; gap: .75rem; }
	.page-nav-list a{ width: 100%; text-align: center; }
}

/* ===========================
   Ordered List (number)
   =========================== */
ol.number{
	margin: 15px 0; padding: 0;
	counter-reset: number; list-style: none;
}
ol.number > li{
	margin: 0 0 1em 2.5em; background: none; list-style-type: none;
}
ol.number > li:last-child{ margin: 0 0 0 2.5em; }
ol.number > li:before{
	counter-increment: number;
	content: counter(number);
	margin: 0 7px 0 -2.5em;
	width: 2em; height: 2em;
	background: var(--color-warn); /* 目印は暖色（注意色）を流用 */
	color: #fff; border-radius: 50%;
	text-align: center; line-height: 1.9; float: left;
}
ol.number > li p{ margin: 0; padding: 0; zoom: 1; overflow: auto; text-indent: 0; }

/* ===== Link system (Calm Blue) ===== */
a{
	color: var(--color-point);              /* #1F6CAB */
	text-decoration: underline;             /* デフォは下線ONで識別性UP */
	text-underline-offset: 2px;
}
a:hover{
	color: var(--point-hover);              /* #1A5B92 */
	text-decoration-thickness: 2px;
}
a:active{ opacity: .9; }
a:visited{
	color: #174E82;                         /* 少し落ち着いた訪問済み色（AA適合） */
}
a:focus-visible{
	outline: 3px solid var(--point-ring);   /* #93C5FD */
	outline-offset: 2px;
}

/* 逆色（濃い背景上のリンク） */
.link-inverse{
	color: #E6F0F4;                         /* sub薄青、濃背景上の可読性◎ */
	text-decoration: underline;
}
.link-inverse:hover{ color: #FFFFFF; }

/* 補助的リンク（目立たせたくない） */
.link-muted{
	color: var(--muted-text);               /* #64748B */
	text-decoration: underline dotted;
}
.link-muted:hover{ color: var(--color-point); }

/* 「本日の診察」の科名リンクも統一（任意） */
.info-section .time-label a{
	color: var(--color-point);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.info-section .time-label a:hover{ color: var(--point-hover); }

/* ===============================
   OVERRIDE: Header to original colors
   =============================== */

/* ヘッダー本体のグラデ＆下線を元に */
.header{
	border-bottom: none !important;
}

/* ドロップダウン（白地のサブメニュー）はオレンジ系に */
.dropdown-menu a:hover,
.nav-menu .sub-menu a:hover{
	background-color: #f8f9fa !important;
	color: #ff845a !important;
}

/* ハンバーガーメニューの背景もグラデを戻す */
@media (max-width: 1024px){
	.nav-menu{
		background: linear-gradient(135deg, #ff845a, #ffa799) !important;
	}
	/* サブメニュー（半透明エリア）も白系→オレンジ系で違和感がないよう少しだけ色味寄せ */
	.dropdown-menu,
	.nav-menu .sub-menu{
		border-color: rgba(255,255,255,0.2) !important;
	}
}

/* ===============================
   OVERRIDE: Footer to original colors
   =============================== */

.footer{
	background: #f1f1f1 !important;
	color: #333 !important;
	border-top: 1px solid #ccc !important;
}

.footer-section h3,
.group-facilities h3{
	color: #ff845a !important;
}

.footer-section a{
	color: #666 !important;
}
.footer-section a:hover{
	color: #ff845a !important;
}

/* グループ施設ボタン（オレンジ基調） */
.facility-btn{
	background: #ff845a !important;
	border-color: #ff845a !important;
	color: #fff !important;
}
.facility-btn:hover{
	background: #ffa799 !important;
	border-color: #ffa799 !important;
}

/* フッター下部のボーダー/文字色 */
.footer-bottom{
	border-top: 1px solid #ccc !important;
	color: #666 !important;
}

/* ===============================
   OVERRIDE: ページ内ナビ見出しも元配色に寄せる場合（任意）
   ※ Calm Blueのままで良ければ、以下は削除OK
   =============================== */
.page-nav-title{
	color: #ff845a !important;
	border-bottom-color: #ff845a !important;
}
.page-nav-list a::after{
	color: #ff845a !important;
}
.page-nav-list a:hover{
	background: #ff845a !important;
	border-color: #ff845a !important;
}
.page-nav-list a:hover::after{
	color: #ffffff !important;
}

/* ===============================
   OVERRIDE: .btn-normal を元配色に戻す
   =============================== */
.btn-normal{
	background: #ff845a !important;
	border-color: #ff845a !important;
	color: #ffffff !important;
}
.btn-normal:hover{
	background: #ffa799 !important;
	border-color: #ffa799 !important;
	color: #ffffff !important;
}