@charset "UTF-8";
/*
Theme Name: center 
Author: 株式会社メックコミュニケーションズ
Author URI: https://www.mec-com.co.jp
Date: 2025-09
*/

/*parts
-----------------------------------------------------------------------------------------*/
body{
/*特色*/
	--color_mido:#00994D;
	--color_mido2:#00704a;
	--color_mido3:#e0f3e9;
	--color_ao:#0071B3;
	--color_ao2:#0b5ca3;
	--color_ki:#F6D36A;
	--color_aka:#c60048;
	--color_hai:#F0F0ED;
	--color_ccc:#cccccc;/*未使用*/
/*リンクの色*/
	--color_link:#006DEB;
/*em*/
	--color_notice:var(--color_aka);
/*-------------------------base*/
/*text*/
	--tx_sen:var(--color_mido);
	--tx_waku:var(--color_mido);
	--tx_kiji:var(--color_mido);
	--tx_belt:var(--color_mido);
	--tx_line:var(--color_mido);
	--tx_bar:var(--color_mido);
	--tx_maru:var(--color_mido);
/*ya*/
	--ya_tri:var(--color_mido);
	--ya_sen:var(--color_mido);
	--ya_maru:var(--color_mido);
/*btn*/
	--btn:var(--color_mido);
	--btn_line:var(--color_mido);
	--btn_line_bg:var(--color_mido);
/*list*/
	--list_line:#000;
	--list_box:#FFF;
	--list_mark:var(--color_mido);
/*sitemap*/
	--sitemap:var(--color_mido);
	--sitemap_ya:var(--color_mido);
/*parts*/
	--flow_no:#CCCCCC;
	--dtbox:#CCCCCC;
	--tab_btn:var(--color_mido);
/*etc*/
	--sya:var(--color_mido);
}

/*-------------------------------------------------------------------------------------------------parts*/
.btn.tx_w:hover{
	background:#000;
	filter:brightness(100%);
}
.btn.sen_waku.sen_mido:hover{
	background-color: var(--color_mido);
	color:#fff;
	filter: none;
}
/*-------------------------tags*/
.tags{
	display:flex;
	gap:0.6em 0.3em;
	flex-wrap:wrap;
}
.tags a{
	display:block;
	line-height:1.25;
	padding:0.4em 0.8em;
	border-radius:10em;
	background:var(--color_hai);
	font-weight:bold;
}
.tags a:hover{
	filter:brightness(80%);
}

/*-------------------------------------------------------------------------------------------------特色border_color*/
body .sen_mido{border-color:var(--color_mido);}
body .sen_mido2{border-color:var(--color_mido2);}
body .sen_mido3{border-color:var(--color_mido3);}
body .sen_ao{border-color:var(--color_ao);}
body .sen_ao2{border-color:var(--color_ao2);}
body .sen_ki{border-color:var(--color_ki);}
body .sen_aka{border-color:var(--color_aka);}
body .sen_hai{border-color:var(--color_hai);}
body .sen_link{border-color:var(--color_link);}
body .sen_ccc{border-color:var(--color_ccc);}
/*-------------------------------------------------------------------------------------------------特色bg*/
body .bg_mido{background-color:var(--color_mido);}
body .bg_mido2{background-color:var(--color_mido2);}
body .bg_mido3{background-color:var(--color_mido3);}
body .bg_ao{background-color:var(--color_ao);}
body .bg_ao2{background-color:var(--color_ao2);}
body .bg_ki{background-color:var(--color_ki);}
body .bg_aka{background-color:var(--color_aka);}
body .bg_hai{background-color:var(--color_hai);}
body .bg_link{background-color:var(--color_link);}
body .bg_mizu{background-color:var(--color_mizu);}
/*-------------------------------------------------------------------------------------------------特色text_color*/
body .tx_mido{color:var(--color_mido);}
body .tx_mido2{color:var(--color_mido2);}
body .tx_mido3{color:var(--color_mido3);}
body .tx_ao{color:var(--color_ao);}
body .tx_ao2{color:var(--color_ao2);}
body .tx_ki{color:var(--color_ki);}
body .tx_aka{color:var(--color_aka);}
body .tx_hai{color:var(--color_hai);}
body .tx_link{color:var(--color_link);}
body .tx_XXXXX{color:var(--color_XXXXX);}
/*-------------------------------------------------------------------------------------------------特色ya*/
body .ya_mido::before{border-color:var(--color_mido);background-color:var(--color_mido);}
body .ya_mido2::before{border-color:var(--color_mido2);background-color:var(--color_mido2);}
body .ya_mido3::before{border-color:var(--color_mido3);background-color:var(--color_mido3);}
body .ya_ao::before{border-color:var(--color_ao);background-color:var(--color_ao);}
body .ya_ao2::before{border-color:var(--color_ao2);background-color:var(--color_ao2);}
body .ya_ki::before{border-color:var(--color_ki);background-color:var(--color_ki);}
body .ya_aka::before{border-color:var(--color_aka);background-color:var(--color_aka);}
body .ya_hai::before{border-color:var(--color_hai);background-color:var(--color_hai);}
body .ya_link::before{border-color:var(--color_link);background-color:var(--color_link);}
body .ya_XXXXX::before{border-color:var(--color_XXXXX);background-color:var(--color_XXXXX);}
/*-------------------------------------------------------------------------------------------------utility*/
body .tx_zen{font-family: "Zen Kaku Gothic New", sans-serif;}
body .tx_zen_maru{font-family: "Zen Maru Gothic", sans-serif;font-weight:400;}
body .tx_zen_maru_bold{font-family: "Zen Maru Gothic", sans-serif;font-weight:500;}
body .mb3{margin-bottom:3px;}
body .mt3{margin-top:3px;}
body .fsp175{font-size:175%;}
body .deg180{transform: rotate(180deg);}
.dot_maru li:before{transform: scale(0.8) translateY(0.15em);}
.dot_aka li:before{background:var(--color_aka);}
.w370{width:370px;}
.mw1000{max-width:1000px;margin-left:auto;margin-right:auto;}
.mw900{max-width:900px;margin-left:auto;margin-right:auto;}
.btn.hv_k:hover{background:#000;filter:brightness(100%);}
body .rad30{border-radius:30px;overflow:hidden}
@media print, screen and (min-width: 768px) {body .pc_rad30{border-radius:30px;overflow:hidden}}
@media screen and (max-width: 767px) {body .sp_rad30{border-radius:30px;overflow:hidden}}
.fw500 {font-weight: 500;}
.fw700 {font-weight: 700;}

/*-------------------------base*/
/*tx_sen*/
.tx_sen{
	color:var(--color_mido);
	font-size:4rem;
	line-height:1.25;
}
@media screen and (max-width: 767px) {
	.tx_sen{font-size:3rem;}
}

.tx_sen::after{display:none;}
.tx_sen::before{
	content:"";
	display:block;
	width:10rem;
	margin:0 auto;
	height:0.3em;
	border-top:3px solid var(--color_mido);
}
.tx_sen .eng{
	font-size:40%;
	color:#000;
	display:block;
}
/*tx_waku*/
.tx_waku{
	border:1px solid var(--color_mido);
}
/*tx_kiji*/
.tx_kiji{
	color:var(--color_mido);
	font-size:3rem;
	border-top:1px dashed var(--color_mido);
	border-bottom:1px solid var(--color_mido);
	font-weight: 500;
	margin-bottom:30px;
}
@media screen and (max-width: 767px) {
	.tx_kiji{font-size:2.4rem;margin-bottom:20px;}
}
/*tx_belt*/
.tx_belt{
	background:var(--color_mido);
	font-size:2.4rem;
	margin-bottom:30px;
}
@media screen and (max-width: 767px) {
	.tx_belt{font-size:2rem;margin-bottom:20px;}
}
/*tx_line*/
.tx_line{
	border-bottom:1px solid var(--color_mido);
	font-size:2.8rem;
}
@media screen and (max-width: 767px) {
	.tx_line{font-size:2.1rem;}
}

.tx_line2{
	position: relative;
	font-size: 26px;
	text-align: center;
	border-bottom: 5px solid var(--color_hai);
	font-size:2.8rem;
	margin-bottom:50px;
	padding-bottom: 10px; /* ←文字と線の間隔を広げる */
	letter-spacing:0.08em;
}
.tx_line2::after{
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 5px;
	background-color: var(--color_mido);
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.tx_line2{font-size:2.5rem;}
}
@media screen and (max-width: 767px) {
	.tx_line2{font-size:2.1rem;margin-bottom:30px;}
}

/*btn*/
.btn{
	background:var(--color_mido);
}
.btn.sen{
	color:var(--color_mido);
	border:1px solid var(--color_mido);
	border-radius:100em;
	background-color: #fff;
}
/*mark*/
.mark.m_ao:first-letter{
	color:var(--color_mido);
}
/*tx_bold*/
.tx_bold{
	font-size:2.4rem;
	color:var(--color_mido);
	margin-bottom:0.3em;
}
@media screen and (max-width: 767px) {
	.tx_bold{font-size:2rem;}
}
/*tx_bold_maru*/
.single_kiji .tx_bold_maru,
.tx_bold_maru{
	font-size:2.4rem;
	color:var(--color_mido);
	margin-bottom:0.3em;
	margin-left:1.2em;
	text-indent: -1.2em;
	font-weight: 500;
}
.tx_bold_maru::before{
	content:"●";
	margin-right:0.2em;
}	
@media screen and (max-width: 767px) {
	.tx_bold_maru{font-size:2rem;}
}



/*-------------------------------------------------------------------------------------------------home_メイン画像エリア*/
/*-------------------------面像エリアイラスト*/
.home_illust_ct {
	position: absolute;      /* 絶対配置 */
	top: calc(100% - 40px);  /* メイン画像の下から少し上にずらす */
	left: 20px;              /* 左寄せ */
	z-index: 10;
}
@media screen and (max-width: 767px) {
	.home_illust_ct {
		top: calc(100% - 30px);
		left: 30px;
	}
}
.home_illust_cloud {
	position: absolute;         /* 絶対配置で mainimg_area に対して */
	bottom: -30px;              /* mainimg_area から少し下にはみ出す */
	right: 40px;                   /* 右端に寄せる */
	z-index: 5;                 /* メイン画像より下に重なるよう調整 */
}
@media screen and (max-width: 767px) {
	.home_illust_cloud {
		bottom: -40px;            /* スマホ用は少し調整 */
		right: 20px;                 /* 右端に寄せる */
	}
}

/*-------------------------------------------------------------------------------------------------home_list*/
/* ul全体 */
.home_list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;               /* PCボタン同士の間隔 */
}

/* li */
.home_list li {
	flex: 1 1 calc(50% - 20px);  /* gap考慮して2分割 */
}

/* ボタン */
.home_list li a {
	display: flex;
	align-items: center;     
	background: #fff;
	border-radius: 8px;
	padding: 20px;           
	text-decoration: none;
	color: #333;
	width: 100%;
	box-sizing: border-box;
	font-size: 24px;         
	font-weight: bold;
	transition: filter 0.3s; /* ← hoverのアニメーション */
}

/* hover時 */
.home_list li a:hover {
	filter: brightness(85%);
}

/* アイコン */
.home_list li a img {
	width: 120px;
	height: auto;
	margin-right: 15px;
}

/* タブレット（768px〜1999px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.home_list li a img {width: 80px;}
	.home_list_txt{font-size:2rem;}
}

/* テキスト */
.home_list li a span {
	flex: 1;
	text-align: center;
}

/* 強調カラー */
.home_list li a span .highlight {
	color: var(--color_mido);
}

/* スマホ時 */
@media screen and (max-width: 767px) {
	.home_list {
		flex-direction: column;
		gap: 15px;                /* スマホは少し狭め */
	}
	.home_list li {
		flex: 1 1 100%; 
	}
	.home_list li a {
		padding: 10px 15px;
		font-size: 20px;
	}
	.home_list li a img {
		width: 80px;
	}
}

/*-------------------------------------------------------------------------------------------------home_iryokikan*/
.home_iryokikan {
	position: relative; /* 絶対配置の基準にする */
}

.home_illust_tree {
	position: absolute;   /* .home_iryokikan を基準に絶対配置 */
	bottom: -40px;        /* 下にはみ出す（調整してください） */
	right: 40px;          /* 右端から20pxの位置 */
	z-index: 2;           /* 必要に応じて前後関係を調整 */
}

.home_illust_tree img {
	width: 200px;  /* PC用の幅（任意で調整） */
	height: auto;
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.home_illust_tree img{width: 150px;}
}

@media screen and (max-width: 767px) {
	.home_illust_tree {
		bottom: -30px; /* スマホ用は少し控えめに */
		right: 10px;   /* 余白を少なくする */
	}

	.home_illust_tree img {
		width: 120px; /* スマホ用のサイズ調整 */
	}
}

/*-------------------------------------------------------------------------------------------------homeお知らせ調整*/
@media screen and (max-width: 960px) {/*スマホ指定*/
	.list_line p{order:1;}
}

.list_line .list_date{
	font-weight: bold;
}

/*-------------------------------------------------------------------------------------------------home受付時間*/
@media print, screen and (min-width: 1200px) {
	.timetable{width:70%;margin:0 auto;}
}

.reception .timetable th{
	background-color: var(--color_mido3);
	text-align: center;
	border-color: var(--color_mido);
	font-weight: 500;
}

@media print, screen and (min-width: 768px) {
	.reception .timetable td{
		padding: 1em;
	}
}

@media print, screen and (min-width: 768px) {
	.reception .timetable th:nth-child(n+2) {
		width:90px;
	}
}
.reception .timetable td{
	text-align: center;
	border-color: var(--color_mido);
	font-weight: 500;
}
.reception .timetable td:nth-child(n+2) {
	color: var(--color_mido);
}
.reception p{
	color:#fff;
	font-weight: 500;
	width: 70%;
	margin:0 auto;
	text-align: left;
	margin-top:10px;
}

@media print, screen and (max-width: 1199px) {
	.reception p{width:100%;font-size:15px;}
}

/* 受付時間エリアを基準に絶対配置 */
.reception {
	position: relative; /* .home_illust_karte を絶対配置する基準 */
}

/* カルテのイラスト配置 */
.home_illust_karte {
	position: absolute;  /* .reception を基準に絶対配置 */
	bottom: -40px;       /* 下にはみ出す */
	left: 40px;          /* 左端から40px */
	z-index: 2;          /* 必要に応じて前後調整 */
}

.home_illust_karte img {
	width: 200px;  /* PC用サイズ */
	height: auto;
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.home_illust_karte{bottom:-30px;}
	.home_illust_karte img{width: 150px;bottom:-30px;}
}

/* スマホ用調整 */
@media screen and (max-width: 767px) {
	.home_illust_karte {
		bottom: -30px; /* 少し控えめに */
		left: 10px;    /* 左の余白を少なく */
	}

	.home_illust_karte img {
		width: 120px; /* スマホ用サイズ */
	}
}

/*-------------------------------------------------------------------------------------------------home外観電話番号*/
/* PC */
@media print, screen and (min-width: 1200px) {
	.home_gaikan_tel {
		display: flex;
		justify-content: flex-start;
		gap: 20px;
		margin-top: 5px;
	}
	.home_gaikan_tel span {
		display: inline-block;
		font-size: 30px;
		line-height: 1; /* 必要に応じて調整 */
	}
}

/* tablet SP */
@media print, screen and (max-width: 1199px) {
	.home_gaikan_tel {
		display: flex;
		flex-direction: column;
		gap: 5px; /* 行間を統一 */
		margin-top: 10px;
	}
	.home_gaikan_tel span {
		display: block; /* 縦並びで余白をなくす */
		font-size: 30px;
		line-height: 1.4; /* 行間を調整 */
	}
}


/*-------------------------------------------------------------------------------------------------floatingバナー*/
/* 共通 */
.floating-banner {
	list-style: none;
	margin: 0;
	padding: 0;
	position: fixed;
	z-index: 99;
	box-sizing: border-box; /* パディング込みで幅を計算 */
}

.floating-banner li a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	transition: filter 0.3s;
}

.floating-banner li a:hover {
	filter: brightness(85%);
}

/* PC（1200px以上） */
@media screen and (min-width: 1200px) {
	.floating-banner {
		top: 350px;
		right: 0;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		gap: 10px; /* ボタン間隔 */
	}

	.floating-banner li a {
		padding: 20px 12px;
		writing-mode: vertical-rl; 
		text-orientation: upright;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		letter-spacing: 0.15em;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	.floating-banner li a span.english {
		letter-spacing: 0em;
	}

	.floating-banner .web-reserve a {
		background-color: var(--color_mido2);
	}

	.floating-banner .job-info a {
		background-color: #EA8640;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	.floating-banner {
		top: 270px;
		right: 0; /* 右端に固定 */
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-width: 100%; /* 画面幅いっぱい */
	}

	.floating-banner li a {
		min-width: 48px; /* 必要に応じて広げる */
		padding: 15px 12px; /* 文字が切れない幅に */
		writing-mode: vertical-rl; 
		text-orientation: upright;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		letter-spacing: 0.15em;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 下方向に柔らかい影 */
		overflow: hidden; /* はみ出し防止 */
	}

	.floating-banner li a span.english {
		letter-spacing: 0em;
	}

	.floating-banner .web-reserve a {
		background-color: var(--color_mido2);
	}

	.floating-banner .job-info a {
		background-color: #EA8640;
	}
}

/* SP用（767px以下） */
@media screen and (max-width: 767px) {
	.floating-banner {
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		background: #fff;
		border-top: 2px solid #fff; /* 上の間隔 */
		bottom: 0; /* フッター上に固定 */
	}

	.floating-banner li {
		flex: 1;
		border-left: 2px solid #fff; /* 左ボタンとの間に白線 */
	}

		.floating-banner li:first-child {
		border-left: none;
	}

	.floating-banner li a {
		padding: 15px 0;
		border-radius: 0;
		letter-spacing: 0.15em;
	}

	.floating-banner .web-reserve a {
		background-color: var(--color_mido2);
	}

	.floating-banner .job-info a {
		background-color: #EA8640;
	}
}

/*-------------------------------------------------------------------------------------------------hoverで明暗のアニメーション調整*/
body .hv_pale a:hover{transition:all 0.3s;}
body .hv_dark a:hover{transition:all 0.3s;}
body .hv_k a:hover{transition:all 0.3s;}
body .hv_w a:hover{transition:all 0.3s;}


/*-------------------------------------------------------------------------------------------------ban_btn*/
.ban_btn{
	display:grid;
	grid-template-columns: repeat( auto-fill, minmax(270px,1fr) ) ;
	gap:20px 30px;
}
@media screen and (max-width: 767px) {.ban_btn{gap:10px 15px;}}
.ban_btn a{
	display:flex;
	align-items:center;
	background:#FFF;
	font-weight: 500;
	transition:all 0.3s;
	position:relative;
	line-height:1.4;
	border:1px solid var(--color_hai);
	background:#FFF;
	border-radius:10px;
	overflow:hidden;
}
.ban_btn li a:hover{
	border:1px solid var(--color_mido); /* ← hover時だけ線を出す */
}
/*.ban_btn a[target]::after{
	content:"外部リンク";
	display:block;
	font-size:12px;
	color:var(--color_ao);
	position:absolute;
	top:0.4em;
	right:0.6em;
}*/
.ban_btn a div{
	padding:0 1em 0 0.7em;
	font-weight: 500;
}
/*min*/
.ban_btn.min a{
	min-height:80px;
}
@media screen and (max-width: 767px) {
	.ban_btn.min a{min-height:70px;}
}
/*sen*/
.ban_btn.sen a{
	border:1px solid rgba(0,0,0,0.2);
}
/*tx_ao*/
.ban_btn.tx_ao a{
	background-image:url(images/ya_ao.svg);
}
/*img_s*/
.ban_btn.img_s a{
	height:80px;
}
.ban_btn.img_s a[target]::after{
	display:none;
}
.ban_btn.img_s a span{
	display:block;
	font-size:85%;
}
.ban_btn.img_s a img{
	max-height:80px;
}
.ban_btn figure{
	overflow: hidden;
}
/*-------------------------menu*/
.ban_btn.menu{
	font-size:1.8rem;
	line-height:1.25;
	gap:20px;
}
@media screen and (max-width: 767px) {
	.ban_btn.menu{font-size:1.8rem;gap:10px;}
}
.ban_btn.menu a{
	background:var(--color_mido3) url(images/ya_maru.svg) right 0.5em center no-repeat;
	background-size:0.9em;
	height:3.5em;
	justify-content:center;
	text-align:center;
	padding:0.5em 1.5em 0.5em 0.5em;
	border-radius:10em;
	border: 1px solid transparent; /* 薄いグレーにして背景白でも見やすく */
}
.ban_btn.menu a:hover{
	background-color: #b1dbc7;
	background-position:right 0.2em center;
	filter: none;
}
/*-------------------------items*/
.ban_btn.items{
	font-size:2rem;
	line-height:1.25;
	grid-template-columns: repeat( auto-fill, minmax(260px,1fr) ) ;
	gap:15px;
}
@media screen and (max-width: 767px) {.ban_btn.items{font-size:1.8rem;gap:10px;}.ban_btn.items.sp_row2{display:grid;grid-template-columns: repeat(2 , 1fr);}}
.ban_btn.items a{
	background-image:url(images/ya_ao.svg);
	background-color:var(--color_mido);
	height:3em;
	padding:0.5em 1.5em 0.5em 0.5em;
	border-radius:0.5em;
}

/*-------------------------------------------------------------------------------------------------カレンダー*/
/* 親要素を横スクロール可能にする（スマホ用） */
@media (max-width: 767px) {
    .googleCalendar {
        overflow-x: auto; /* 横スクロール */
        -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
    }

    .googleCalendar iframe {
        width: 1000px; /* 大きめ幅に設定 */
        height: 600px;
        border: 0;
    }
}

/* PC・タブレットは元の幅で中央寄せ */
@media (min-width: 768px) {
    .googleCalendar iframe {
        width: 100%;
        height: 600px;
        border: 0;
    }
}

@media (min-width: 1024px) {
    .googleCalendar.topPage iframe {
        max-width: 800px; /* トップページのみ幅制限 */
        margin: 0 auto;   /* 中央寄せ */
        display: block;
    }
}

/*-------------------------------------------------------------------------------------------------tableアレンジ*/
table th{
	font-weight: 500;
}

/*-------------------------------------------------------------------------------------------------liアレンジ*/
.mt_no > li + li {
	margin-top: 0 !important; ;
}

/*-------------------------------------------------------------------------------------------------背景*/
/* 三角付き */
.triangle {
	position: relative;
	background: var(--color_hai);
	border-radius: 20px; /* ←角丸つける */
	padding: 20px; /* 中身の余白はお好みで */
}

.triangle::after {
	content: "";
	position: absolute;
	bottom: -20px; /* ▼の高さ分ずらす */
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid var(--color_hai); /* 親と同じ背景色 */
}

/* 三角付き_white */
.triangle_w {
	position: relative;
	background: #fff;
	border-radius: 20px; /* ←角丸つける */
	padding: 20px; /* 中身の余白はお好みで */
}

.triangle_w::after {
	content: "";
	position: absolute;
	bottom: -20px; /* ▼の高さ分ずらす */
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #fff; /* 親と同じ背景色 */
}

/*-------------------------------------------------------------------------------------------------スクロールバー考慮*/
html {
  scrollbar-gutter: stable;
}

/*-------------------------------------------------------------------------------------------------home_mokuteki*/
.home_mokuteki .illust{
	position:relative;
	bottom:-10px;
	left:-55px;
}
@media screen and (max-width: 1400px) {
	.home_mokuteki .illust{left:-10px;}
}

/*--------------------------------------------------------------------------------------------------list_slider*/
.list_slider{
	padding:0 50px;
}
.list_slider .slick-slide{
  margin: 0 10px;
} 
.list_slider .slick-arrow{
	border:1px solid var(--color_mido);
	text-indent:-9999em;
	cursor:pointer;
	border-radius:100em;
	position:absolute;
	right:-10px;
	top:calc(50% - 30px);
	background:var(--color_mido) url(images/ya_w.svg) center no-repeat;
	background-size:100%;
	width:60px;
	aspect-ratio:1 / 1;
	z-index:10;
}
.list_slider .slick-arrow:hover{
	background-color:#FFF;
	background-image:url(images/ya_mido.svg);
}
.list_slider .slick-prev{
	right:auto;
	left:-10px;
	transform: rotate( 180deg );
}
.list_slider .slick-arrow.slick-disabled {
	opacity:0.2;
	cursor:default;
	pointer-events:none;
}
@media screen and (max-width: 500px) {
	.list_slider{padding:0 30px;}
}
/*--------------------------------------------------list_box*/
.list_box{
	border:none;
	border-radius:0;
}
.list_box > a{
	border-radius:20px;
	border:1px solid var(--color_hai);
	background:#FFF;
	overflow:hidden;
	transition:all 0.3s;
}
.list_box > a:hover{
	border-color:var(--color_mido);
	background:#FFF;
}
.list_box figure{
	height:180px;
}
.list_box div{
	padding:10px;
}
.list_box h1,.list_box h2,.list_box h3,.list_box h4,.list_box h5{
	font-size:2rem;
	font-weight:500;
	line-height:1.25;
	min-height:3.5em;
	display:flex;
	justify-content:center;
	align-items:center;
}

.home_mokuteki .list_box h3{
	font-weight:500;
	font-size:1.9rem;
}

/* 高さを解除するクラス */
.list_box h1.no_h,
.list_box h2.no_h,
.list_box h3.no_h,
.list_box h4.no_h,
.list_box h5.no_h {
  	min-height: auto; /* または 0 でも可 */
}

/* flow用線をつけてh3の高さなど調整 */
.flow_sen_waku{
	border:solid 1px;
	border-radius:0;
}

.flow_sen_waku > h3{
	margin-bottom:0;
	min-height:auto !important;
}

.flow_sen_waku > div{
	padding:0;
}

/* flow用アイコン（.w70）はトリミングせず等倍縮小で表示 */
.list_box img.w70 {
  width: auto;        /* 親いっぱいに広げない */
  height: auto;       /* 縦も自動 */
  max-width: 70px;    /* 横幅70pxまで */
  object-fit: contain;
}

/* flow用アイコン（.w60）はトリミングせず等倍縮小で表示 */
.list_box img.w60 {
  width: auto;        /* 親いっぱいに広げない */
  height: auto;       /* 縦も自動 */
  max-width: 60px;    /* 横幅70pxまで */
  object-fit: contain;
}

/*--------------------------------------------------list_box 白背景用*/
.white_bg > a {
  border: 1px solid #ccc; /* 薄いグレーにして背景白でも見やすく */
  background: #FFF;       /* 背景は白 */
  transition: all 0.3s;
  text-decoration: none ;  /* アンダーラインを消す */
  color: inherit;         /* フォント色はそのまま */
  position: relative; /* 矢印を絶対位置で置くための基準 */
}

.white_bg::after {
  content: "➔";             /* 矢印文字 */
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  background-color: var(--color_mido); /* 円の背景色 */
  color: #fff;                         /* 矢印の色 */
  border-radius: 50%;                  /* 円にする */
  display: flex;                       /* 矢印を中央に配置 */
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  pointer-events: none;                /* 矢印自体はクリック不可 */
  transition: transform 0.3s;
}

.white_bg:hover::after {
  transform: translateX(5px); /* ホバーで右に動く */
}

.white_bg > a:hover {
  border-color: #00b050; /* 緑に変化してホバーがわかる */
  background: #FFF;       /* 背景は白のまま */
  text-decoration: none;  /* ホバー時もアンダーライン消す */
}

/* リンク内の線（例えば下線やボーダーがあれば） */
.white_bg > a span {
  border-bottom: 1px solid #ccc;
  transition: all 0.3s;
}

.white_bg > a:hover span {
  border-bottom-color: #00b050;
}

.white_bg div{
	padding:20px 20px 35px 20px ;
}

.white_bg .list_title{
	padding-top:5px;
	padding-bottom:10px;
	text-align:center;
}

/*--------------------------------------------------------------------------------------------------お知らせ一覧の時だけlist_lineの最初の線消す*/
#topics .list_line:first-child {
  border-top: none; /* 最初のliだけ線を消す */
}

.single_data .cat_news{
	color:var(--color_mido)
}

/*--------------------------------------------------------------------------------------------------お知らせ一覧の時だけlist_lineの最初の線消す*/
#topics {
	padding-bottom:50px;
}

/*--------------------------------------------------------------------------------------------------管理バーとヘッダー位置調整 */
html { margin-top: 0 !important; }
:root { --adminbar-current: 0px; }
body.admin-bar { --adminbar-current: 32px; }
@media (max-width: 767px) {
  body.admin-bar { --adminbar-current: 46px; }
}

/*#wrapper が .scroll でない間だけ下げる → 初回描画から正しい高さに */
body.admin-bar #wrapper:not(.scroll) > header.header {
  top: var(--adminbar-current) !important;
}
body.admin-bar #wrapper:not(.scroll) {
  padding-top: calc(var(--hh) + var(--adminbar-current)) !important;
}

/* --- スマホ/タブレットではボタンを下げない（旧：body.admin-bar.at-top ...） --- */
@media (max-width: 1199px) {
  body.admin-bar #wrapper:not(.scroll) .globalnav_btn {
    top: 0 !important; /* ← 二重オフセットを防ぐ */
  }
}

/* スマホ/タブレットのメニュー本体（既存topは維持、高さだけ管理バー分引く）
@media (max-width: 767px) {
  body.admin-bar #wrapper:not(.scroll) .globalnav {
    top: 44px !important; /* 既存値を維持 */
    height: calc(100vh - var(--hh) - var(--adminbar-current)) !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body.admin-bar #wrapper:not(.scroll) .globalnav {
    top: 62px !important; /* 既存値を維持 */
    height: calc(100vh - var(--hh) - var(--adminbar-current)) !important;
  }
}
/* ── タブレット時：スクロール後も管理バー分オフセットを維持 ── */
@media (min-width: 768px) and (max-width: 1199px) {
  /* ヘッダーを管理バーの下に固定 */
  body.admin-bar #wrapper.scroll > header.header {
    top: var(--adminbar-current) !important;
  }
  /* コンテンツ側も同じぶん押し下げて段差を防止 */
  body.admin-bar #wrapper.scroll {
    padding-top: calc(var(--hh) + var(--adminbar-current)) !important;
  }
  /* （任意）開いたメニューの高さ計算もスクロール時に合わせるなら */
  body.admin-bar #wrapper.scroll .globalnav {
    height: calc(100vh - var(--hh) - var(--adminbar-current)) !important;
  }
}

/*--------------------------------------------------------------------------------------------------引用のデザイン */
blockquote {
    border-left: 4px solid #999;
    padding: 15px 20px;
    margin: 20px 0;
    background: #f7f7f7;
}

/*--------------------------------------------------------------------------------------------------お知らせ */
/* 全リンクの基本設定 */
.single_kiji a::before,
.single_kiji a .list_title::after {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    margin: -0.2em 0.2em 0 0.2em;
    background-size: cover !important;
}

/* 外部リンク（target="_blank"） */
.single_kiji a[target]:before,
.single_kiji a[target] .list_title::after {
    content: "";
    background: url(images/icon_blank.svg);
}

/* PDF */
.single_kiji a[href$='.pdf']::before,
.single_kiji a[href$='.pdf'] .list_title::after {
    content: "";
    background: url(images/icon_pdf.svg);
}

/* Excel */
.single_kiji a[href$='.xls']::before,
.single_kiji a[href$='.xlsx']::before,
.single_kiji a[href$='.xls'] .list_title::after,
.single_kiji a[href$='.xlsx'] .list_title::after {
    content: "";
    background: url(images/icon_excel.svg);
}

/* Word */
.single_kiji a[href$='.docx']::before,
.single_kiji a[href$='.doc']::before,
.single_kiji a[href$='.docx'] .list_title::after,
.single_kiji a[href$='.doc'] .list_title::after {
    content: "";
    background: url(images/icon_word.svg);
}

/* PowerPoint */
.single_kiji a[href$='.pptx']::before,
.single_kiji a[href$='.ppt']::before,
.single_kiji a[href$='.pptx'] .list_title::after,
.single_kiji a[href$='.ppt'] .list_title::after {
    content: "";
    background: url(images/icon_ppt.svg);
}

/* 重要アイコン */
.alert {
	background: #C60048;
	color: #FFF;
	display: inline-flex;
	justify-content: center;
	align-items: center;

	border-radius: 100%;     /* 丸 */
	padding: 0.5em;

	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1;

	transform: rotate(6deg); /* 斜め */
	margin-right: 3px;       /* タイトルとの間隔 */

	position: relative;      /* 絶対配置をやめる（右端に出ない） */
	top: -2px;                /* 文字と少し高さを合わせる微調整 */
}
/*--------------------------------------------------------------------------------------------------Italic見た目 */
.single em {
    font-style: italic;
	color:inherit;
}
/* ビジュアルエディタ内 em 強制 */
body#tinymce.wp-editor em,
.editor-styles-wrapper em {
    font-style: italic !important;
    color: inherit !important;
}

/*--------------------------------------------------------------------------------------------------indent */
.ind-1 {
  margin-left: 1em;
  text-indent: -1em;
}

/*markの先頭フォント調整
-----------------------------------------------------------------------------------------*/
p.mark:first-letter,
p.mark:first-letter,
ul.mark > li:first-letter,
dl.mark > dd:first-letter,
div.mark > p:first-letter{
	font-family:'Zen Kaku Gothic New';
}

/*.single_kiji h1
-----------------------------------------------------------------------------------------*/
.single_kiji>h1{
	position: relative;
	font-size: 26px;
	text-align: center;
	border-bottom: 5px solid var(--color_hai);
	font-size:2.8rem;
	margin-bottom:50px;
	padding-bottom: 10px; /* ←文字と線の間隔を広げる */
	letter-spacing:0.08em;
}
.single_kiji>h1::after{
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 5px;
	background-color: var(--color_mido);
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.single_kiji>h1{font-size:2.5rem;}
}
@media screen and (max-width: 767px) {
	.single_kiji>h1{font-size:2.1rem;margin-bottom:30px;}
}

/*お知らせの画像中央揃え調整
-----------------------------------------------------------------------------------------*/
img.aligncenter {
	display: block;
	margin: 0 auto;
}