@charset "utf-8";

html {
	font-size: 62.5%;
	overflow-y: scroll;
}

body {
	font-size: 1.6rem;
	line-height: 1.75;
}

.bold_12px {
	font-size: 1.2rem;
	font-weight: bold;
}

.medium_12px {
	font-size: 1.2rem;
}

.medium_14px {
	font-size: 1.4rem;
}

.bold_16px {
	font-weight: bold;
}

.bold_17px {
	font-size: 1.7rem;
	font-weight: bold;
}

.medium_17px {
	font-size: 1.7rem;
}

.bold_18px {
	font-size: 1.8rem;
	font-weight: bold;
}

.regular_18px {
	font-size: 1.8rem;
}

.bold_20px {
	font-size: 2rem;
	font-weight: bold;
}

.bold_22px {
	font-size: 2.2rem;
	font-weight: bold;
}

.bold_23px {
	font-size: 2.3rem;
	font-weight: bold;
}

.bold_26px {
	font-size: 2.6rem;
	font-weight: bold;
}

.medium_28px {
	font-size: 2.8rem;
}

.medium_30px {
	font-size: 3.0rem;
}

.medium_32px {
	font-size: 3.2rem;
}

a {
	text-decoration: none;
	color: #000000;
}

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

.wrapper {
	max-width: 900px;
	margin: 0 auto;
}

.flexArea {
	display: flex;
	justify-content: space-between;
}

/* ヘッダー */

header { /* 最大幅752px */
	line-height: 1;	
	padding-top: 20px;
	padding-bottom: 19px;
	padding-left: max(10px, calc((100% - 551px) * 0.1490));
	padding-right: max(10px, calc((100% - 551px) * 0.1490));
	background: #f4f6f5;
}

header h1 img { /* 固定幅251px */
	max-width: 100%;
	height: auto;
}

header .h_right { /* 固定幅300px */
	width: 300px;
	text-align: center;
	border: 7px solid #f1909e;
	border-radius: 5px;
	box-sizing: border-box;
	background: #ffffff;
}

header .h_right .bold_16px {
	padding-top: 10px;
}

header .h_right .medium_28px a {
	padding-top: 5px;
	display: block;
	line-height: 1.3;
}

header .h_right img {
	display: none; /* 非表示にする */
}

header .h_right .h_consultation_hours {
	padding-top: 1px;
	line-height: 1.3125;
}

header .h_right .h_closed_day {
	padding-top: 6px;
	padding-bottom: 9px;
}

/* ナビ */

input,
label,
.menu_notation {
	display: none; /* 非表示にする */
}

nav ul li {
	width: 16.6667%;
	text-align: center;
	background: #ffffff;
}

nav ul li a {
	display: block;
	border-top: 5px solid #99dfeb;
	line-height: 3.625;
	color: #858585;
}

nav ul li a:hover {
	border-top: 5px solid #00afCC;
	color: #000000;
}

#top nav .menu1 a,
#about nav .menu2 a,
#content nav .menu3 a,
#staff nav .menu4 a,
#voice nav .menu5 a,
#access nav .menu6 a {
	border-top: 5px solid #00afCC;
	color: #000000;
}

/* フッター */

footer .f_contents { /* 最大幅583px */
	padding-top: 24px;
	padding-left: calc((100% - 245px - 301px) * (159 / 354));
	padding-right: calc((100% - 245px - 301px) * (158 / 354));
	background: #f4f6f5;
}

footer .fc_left { /* 固定幅245px */
	line-height: 1.5;
	width: 245px;
}

footer .fc_middle { /* 固定幅301px */
	line-height: 1.5;
	width: 301px;
}

footer .fc_middle .flexArea {
	justify-content: start;
	gap: 1em;
}

footer .fc_middle .flexArea dt {
	width: 48px;
}

footer .pending {
	display: none;
}

footer .f_navi {
	background: #f4f6f5;
	justify-content: center;
	line-height: 1;
	padding-top: 32px;
	padding-bottom: 10px;
}

footer .f_navi li + li::before{
	content: "｜";
}

footer .f_navi li a:hover {
	text-decoration: underline;
}

#top footer .menu1 a,
#about footer .menu2 a,
#content footer .menu3 a,
#staff footer .menu4 a,
#voice footer .menu5 a,
#access footer .menu6 a {
	text-decoration: underline;
}

footer p small {
	display: block;
	background: #00AFCC;
	line-height: 1;
	padding-top: 12px;
	padding-bottom: 9px;
	text-align: center;
	color: #f4f6f5;
}

/* 画面サイズ600px以下の場合 */

@media (max-width: 600px) {

	.wrapper {
		max-width: 100%;
	}

	/* ヘッダー */

	header { /* position: fixed; 	z-index: 1;*/
		position: fixed;
		top: 0;
		left: 0;
		padding: 0;
		height: 83px;
		z-index: 1;
		min-width: 100%;
		background: #f4f6f5;
	}		

	header h1 {
		position: fixed;
		top: -3px;
		left: calc(50% - 50px);
		width: 120px;
	}
	
	header h1 img { /* 英語部分を削除したロゴ：固定幅120px */		
		max-width: 100%;
		height: auto;
	}
	
	header .h_right { /* 電話のアイコン：固定幅55px */
		border: none;
		position: fixed;
		top: 10px;
		left: 10px;
		width: 55px;
		height: 55px;
		background-color: transparent;
	}

	header .h_right .bold_16px,
	header .h_right .medium_28px span,
	header .h_right .h_consultation_hours,
	header .h_right .h_closed_day {
		display: none;
	}

	header .h_right .medium_28px a {
		padding-top: 0;
	}
	
	header .h_right img {
		display: block; /* 表示する */
		max-width: 100%;
		height: auto;
	}	
	
	/* メニューボタンの設定 */
	
	.menu-btn {
		width: 55px;
		height: 55px;
		position: fixed;
		top: 10px;
		right: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 3;
		background: #ffffff;
		border: 2px solid #00afcc;
		box-sizing: border-box;
	}
	
	/* ハンバーガー部分を設置 */

	.menu-btn .menu_line:before,
	.menu-btn .menu_line:after {
		content: "\020";
	}
	
	.menu-btn .menu_line,
	.menu-btn .menu_line:before,
	.menu-btn .menu_line:after {
		display: block;
		width: 25px;
		height: 3px;
		background: #00afcc;
		position: absolute;
	}
	
	.menu-btn .menu_line {
		top: 15px;
	}
	
	.menu-btn .menu_line:before {
		bottom: 10px;
	}
	
	.menu-btn .menu_line:after {
		top: 10px;
	}

	.menu_notation {
		display: block;
		position: fixed;
		top: 40px;
		right: 35px;
		z-index: 4;
		width: 25px;
		color: #00afcc;
		font-size: 1.5rem;
	}
	
	/* ボタンがタップされた（チェックボックスにチェックが付いた）時の設定 */

	#menu-btn-check:checked ~ .menu-btn span {
		background: rgba(255, 255, 255, 0); /*真ん中の線を透明にする*/
	}

	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}

	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	
	/* メニュー部分の詳細設定 */

	.menu-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background: #f4f6f5;
		overflow: hidden;
	}

	.menu-content ul {
		padding: 75px 10px 0;
		display: block;
	}

	.menu-content ul li {
		padding: 0 10px 10px ;
		width: 100%;
		height: 100%;
	}
	
	.menu-content ul li a {
		width: 100%;
		font-size: 2.1rem;
		box-sizing: border-box;
		padding: 9px 0 10px 0;
		position: relative;
		line-height: 200%;
		margin-left: -10px;
	}
	
	.menu-content .bold_17px {
		font-size: 2.1rem;
	}
	
	 /* 再度ボタンがタップされ、チェックボックスのチェックが消された時、メニュー部分を非表示*/

	.menu-content {
		top: -100%;
		transition: all 0.3s; /* アニメーション設定 */
	}

	 /* 再度ボタンがタップされ、チェックボックスのチェックが付いた時、メニュー部分を再表示へ */

	#menu-btn-check:checked ~ .menu-content {
		top: 0;
		transition: all 0.5s; /* アニメーション設定 */
	}

	input {
		display: block;
		/* padding: 10px; */
		height: 73px;
		z-index: -1;
	}
	
	/* フッター */
	
	footer .f_contents { /* 固定幅301px */
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 18px;
		padding-left: calc((100% - 301px) / 2);
		padding-right: calc((100% - 301px) / 2);
	}
	

	footer .fc_middle {
		padding-top: 19px;
	}
	
	footer .f_navi {
		flex-wrap: wrap;
		justify-content: space-around;
		font-size: 12px;
		padding-top: 18px;
		padding-bottom: 9px;
	}
	
	footer .f_navi li {
		width: 180px;
		text-align: center;
	}
	
	footer .f_navi li a {
		display: block;
		width: 100%;
		line-height: 1.75;
	}
	
	footer .f_navi li + li::before {
		content: none;
	}
	
	footer p small {
		font-size: 1.1rem;
		line-height: 1;
		padding-top: 12px;
		padding-bottom: 10px;
	}
	
}