@charset "utf-8";

/*---------- for Top Page CSS ----------*/

/********** top_images **********/
#top-images {
	width: 100%;
	height: 500px;
    background-image: url(../../images/index/slider2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
	align-items: center;
}
#top-images h2 {
    font-size: 32px;
    color: #64b3b5;
    padding-bottom: 20px;
}
#top-images h2::after {
    position: absolute;
    content: "";
    width: 290px;
    height: 3px;
    background: rgb(1, 75, 146);
    background: linear-gradient(90deg, rgb(194 206 116) 0%, rgb(170 193 76) 100%);
    bottom: 0;
    left: 0;
    margin: 0;
}
#top-images p{
	font-size: 20px;
}
/***** Introduction *****/
#top-message {
	padding: 50px 0;
}
#top-message .inner{
	display: flex;
	justify-content: space-between;
    align-items: center;
    gap: 5%;
}
#top-message img{
	width: 35%;
}
#noto-message {
}
#noto-message p {
	padding-top: 20px;
}
#noto-message h2 {
	color: rgb(218, 25, 25);
}
#noto-message h2::after {
	content: none;
}
#noto-message div div {
	border: 2px solid #ff9307;
    text-align: center;
    padding: 15px;
    width: 60%;
    background-color: #fff6e9;
    margin: 0 auto;
}

/***** clinic-search *****/
#clinic-search {
	padding: 50px 0;
}
#clinic-search .inner{
	display: flex;
	justify-content: space-between;
    align-items: center;
    gap: 5%;
}
#clinic-search img{
	width: 60%;
}

/***** contents *****/
#contents {
	padding: 50px 0;
	background: #f9f9f9;
}
#contents .inner{
	display: flex;
	gap: 5%;
}
#contents .inner .contents-child {
	flex:1;
}
#contents h2 {
	padding-bottom: 20px;
}
#contents h2.greeting {
	margin: 0 20px 0;
	padding: 4px 25px 2px;
	color: #464;
	/* letter-spacing: .5em; */
	line-height: 1.5;
	text-indent: 0;
	border: 0 none #f00;
	background: #eff9df;
	border: 1px solid #cc9;
}
#contents h2.greeting:first-letter {
	font-size: 100%;
}

#contents .greeting {
	margin: 0 20px;
	padding: 10px 0;
	background: #fbffeb;
	border: 1px solid #cc9;
	border-top: 0 none;
}
#contents .greeting h3 {
	margin: 1em 25px 0;
	text-indent: 1em;
	padding: 0;
}
#contents .greeting p {
	margin: .5em 25px;
	padding: 0;
	text-indent: 1em;
	line-height: 1.5;
}
#link .title {
	padding: 10px 20px;
	border-radius: 10px 10px 0 0;
  background: #a2c32d;
  color: #fff;
}
#link .link-box {
	margin-bottom: 32px;
	font-size: 87.5%;
	color: #453;
	line-height: 1.5;
	border: 1px solid #bdbdbd;
  padding: 15px;
  background: #fff;
}
#link .link-box:last-child {
	margin-bottom: 0;
}
#link .link-box:first-of-type {
	margin-top: 0;
}
#link .title a {
	text-decoration: none;
	color: #fff;
	margin: 0;
	padding: 5px;
	font-weight: bold;
	font-size: 18px;
}
#link .title i {
	font-size: 18px;
	color: #fff;
}
/* イベントタイトルのリンクにはファイル種別アイコン（PDF/Word等）を付けない */
#link .title a::before {
	content: none;
}
#link .link-box h5 {
	font-size: 14px;
	padding-top: 18px;
	font-weight: bold;
}

#link .link-box p {
	padding-top: 0;
}

#link .link-box .event-detail {
	margin-top: 12px;
	padding-top: 0;
	text-align: right;
}
#link .link-box .event-detail .btn-detail {
	display: inline-block;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	background: #a2c32d;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s;
}
#link .link-box .event-detail .btn-detail:hover {
	background: #8aab1f;
}
#link .link-box .event-detail .btn-detail,
#link .link-box .event-detail .btn-detail i {
	color: #fff;
}
#link .link-box .event-detail .btn-detail i {
	margin-left: 4px;
	font-size: 12px;
}
/* 詳細ボタンにファイル種別アイコンが付く場合も白で統一 */
#link .link-box .event-detail .btn-detail::before {
	color: #fff;
}

/* ==============================
 * イベント情報 ／ お知らせ の高さ揃え（769px以上のみ）
 *  - お知らせ側は既存の 350px スクロールのまま
 *  - イベント側に末尾スペーサーを追加してカラム末尾を揃える
 * ============================== */
@media (min-width: 769px) {
	#contents .inner .contents-child {
		display: flex;
		flex-direction: column;
	}
	#contents .inner .contents-child > #link {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	#link .event-spacer {
		flex: 1;
	}
}

.news-tabs {
  display: flex;
  padding: 0;
  list-style: none;
}

.news-tabs li {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #dae4b7;
  margin-right: 5px;
  font-size: 14px;
  border-bottom: 2px solid #fff;
  border-radius: 10px 10px 0 0;
}
.news-tabs li.login {
	background-color: #ffccc1;
}
.news-tabs li.active {
  background-color: #a2c32d;
  color: #fff;
  border-bottom: 0;
  font-weight: bold;
}
.news-tabs li.login.active {
	background-color: #ff896f;
}

.news-panel {
  display: none;
  height: 350px;
  background: #fff;
}

.news-panel.active {
  display: flex;
  flex-direction: column;
  border: 2px solid #a2c32d;
  padding: 20px;
}
.news-panel.active.login {
  border: 2px solid #ff896f;
}
.news-panel .news-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.news-more {
  flex: 0 0 auto;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}
.news-more a {
  display: inline-block;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #a2c32d;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
}
.news-more a:hover {
  background: #8aab1f;
}
.news-more a i {
  margin-left: 4px;
  font-size: 12px;
}
#news-member .news-more a {
  background: #ff896f;
}
#news-member .news-more a:hover {
  background: #ff6f50;
}
.news-panel ul {
  list-style: none;
  padding: 0;
}

.news-panel li {
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px dotted #333;
}
.news-panel li .news-date-group{
	color: #e90;
	font-weight: bold;
}
.news-panel li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}
.news-panel li span {
	display: block;
}
.news-panel#news-public li i {
	color: #a2c32d;
}
.news-panel#news-member li i {
	color: #ff896f;
}

/* ============================================
 * ニュース内のファイルリンクに拡張子別アイコン付与
 * ============================================ */
.news-panel a[href$=".pdf"]::before,
.news-panel a[href$=".PDF"]::before,
.news-panel a[href$=".doc"]::before,
.news-panel a[href$=".DOC"]::before,
.news-panel a[href$=".docx"]::before,
.news-panel a[href$=".DOCX"]::before,
.news-panel a[href$=".xls"]::before,
.news-panel a[href$=".XLS"]::before,
.news-panel a[href$=".xlsx"]::before,
.news-panel a[href$=".XLSX"]::before,
.news-panel a[href$=".ppt"]::before,
.news-panel a[href$=".PPT"]::before,
.news-panel a[href$=".pptx"]::before,
.news-panel a[href$=".PPTX"]::before,
.news-panel a[href$=".zip"]::before,
.news-panel a[href$=".ZIP"]::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	display: inline-block;
	margin-right: 5px;
	font-size: 0.95em;
}

/* PDF — 赤 */
.news-panel a[href$=".pdf"]::before,
.news-panel a[href$=".PDF"]::before {
	content: "\f1c1"; /* fa-file-pdf */
	color: #c94545;
}

/* Word (doc / docx) — 青 */
.news-panel a[href$=".doc"]::before,
.news-panel a[href$=".DOC"]::before,
.news-panel a[href$=".docx"]::before,
.news-panel a[href$=".DOCX"]::before {
	content: "\f1c2"; /* fa-file-word */
	color: #2b579a;
}

/* Excel (xls / xlsx) — 緑 */
.news-panel a[href$=".xls"]::before,
.news-panel a[href$=".XLS"]::before,
.news-panel a[href$=".xlsx"]::before,
.news-panel a[href$=".XLSX"]::before {
	content: "\f1c3"; /* fa-file-excel */
	color: #217346;
}

/* PowerPoint — オレンジ */
.news-panel a[href$=".ppt"]::before,
.news-panel a[href$=".PPT"]::before,
.news-panel a[href$=".pptx"]::before,
.news-panel a[href$=".PPTX"]::before {
	content: "\f1c4"; /* fa-file-powerpoint */
	color: #d24726;
}

/* ZIP — グレー */
.news-panel a[href$=".zip"]::before,
.news-panel a[href$=".ZIP"]::before {
	content: "\f1c6"; /* fa-file-zipper */
	color: #6b7280;
}