@charset "UTF-8";

/* ========== base */

* {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

html {
	overflow-x: hidden;
	overflow-y: scroll;
}

body {
	background: #ffffff;
	font-size: 120%;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
	color: #333333;
}

a:link,
a:visited {
	color: #f3993e;
}

a:hover,
a:active {
	color: #f71d6f;
}

a:hover img {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

a:focus {
	overflow: hidden;
}

.clearBoth {
	clear: both;
}

.none {
	display: none;
}

@media screen and (max-width: 1000px) {
	.none {
		display: block;
	}
}


/* ========== header */

header {
	width: 100%;
	background: url("../img/bg.png");
	background-size: cover;
	color: #fff;
	text-align: center;
}

#headerRight {
	float: right;
	width: 0;
	height: 0;
	margin: 10px 60px 0 0;
	text-align: right;
}

#headerTop {
	width: 100%;
	text-align: center;
}

#headerTop h1 {
	font-size: 200%;
	font-weight: bold;
}

#headerTop img {
	border: solid 8px #213c78;
	border-radius: 15px;
}


@media screen and (max-width: 1000px) {
	#headerTop {
		font-size: 80%;
	}
	#headerTop img {
		width: 15%;
	}
	#headerTop h1 img {
		width: 50%;
	}
}

@media screen and (max-width: 750px) {
	#headerTop {
		font-size: 60%;
	}
	#headerTop img {
		width: 15%;
	}
	#headerTop h1 img {
		width: 80%;
	}
}



/* menu */

.hMenu {
	display: block;
	position: relative;
}

/* inputのcheckboxは非表示 */
.hMenuCheckbox {
	display: none;
}

/* ハンバーガーメニュー */
.hMenu_icon {
	display: inline-block;
	width: 50px;
	height: 50px;
	padding: 0 0 0 9px;
	background: #f3993e;
	border-radius: 5px;
	vertical-align: middle;
	cursor: pointer;
}

/* 3本線 */
.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
	content: '';
	display: block;
	position: absolute;
	top: 15px;
	bottom: 0;
	width: 32px;
	height: 3px;
	background: white;
	cursor: pointer;
	z-index: 100;
}

.hamburger-icon:before {
	top: 10px;
}

.hamburger-icon:after {
	top: 20px;
}

/* メニュー以外を暗く */
#hMenu_black {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .7s ease-in-out;
	z-index: 98;
}

/* 中身 */
#hMenu_content {
	position: fixed;
	top: 0;
	right: 0;
	max-width: 600px;
	width: 100%;
	height: 100vh;
	padding: 53px 16px 16px;
	background: #f3993e;
	overflow: auto;
	transition: .3s ease-in-out;
	-webkit-transform: translateX(-320%);
	transform: translateX(-320%);
	z-index: 99;
}

/* チェックボックスにチェックが入ったら表示 */
input:checked ~ .hMenu_icon .hamburger-icon {
	background: transparent;
}

input:checked ~ .hMenu_icon .hamburger-icon::before {
	top: 10px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 999;
}

input:checked ~ .hMenu_icon .hamburger-icon::after {
	top: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 999;
}

input:checked ~ #hMenu_black {
	display: block;
	opacity: .8;
}

#hMenu_checkbox:checked ~ #hMenu_content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.hMenu_icon .hamburger-icon,
.hMenu_icon .hamburger-icon::before,
.hMenu_icon .hamburger-icon::after,
#hMenu_black,
#hMenu_content {
	-webkit-transition: all .3s;
	transition: all .3s;
}

#hMenu_content ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#hMenu_content ul li {
	border-bottom: solid 1px white;
}

#hMenu_content li a {
	display: block;
	padding: 14px;
	font-size: 20px;
	color: white;
	text-decoration: none;
	transition-duration: 0.2s;
}

#hMenu_content li a:hover {
	background: #f85a67;
}


/* ========== contentArea */

#contentArea {
	width: 100%;
	background: url("../img/bg2.png");
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: center;
}

.partBox {
	width: 85%;
	margin: 0 auto;
	padding: 50px 0;
}

#contentArea h2 {
	margin-bottom: 20px;
	padding: 5px 10px;
	background: transparent;
	border-left: solid 8px #d62c06;
	font-size: 130%;
	font-weight: bold;
	color: #d62c06;
}

#contentArea h3 {
	padding: 20px;
	background: #ff6400;
	font-size: 120%;
	font-weight: bold;
	color: #fff;
}



#contentArea table.point {
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	text-align: center;
}

#contentArea table.point tr {
	border-bottom: solid 2px white;
}

#contentArea table.point tr:last-child {
	border-bottom: none;
}

#contentArea table.point th {
	position: relative;
	width: 20%;
	padding: 10px 20px;
	background: #ff6400;
	text-align: center;
	color: white;
}

#contentArea table.point th:after {
	display: block;
	position: absolute;
	content: "";
	top: calc(50% - 10px);
	right:-10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-left: 10px solid #ff6400;
	border-bottom: 10px solid transparent;
}

#contentArea table.point td {
	padding: 15px 30px;
	background-color: #f0f0f0;
	border-radius: 10px;
	text-align: left;
}



#contentArea table.rei {
	margin: 20px auto;
}

#contentArea table.rei td {
	padding: 0 10px;
}

#contentArea table.rei td img {
	border: solid 8px #213c78;
	border-radius: 10px;
}



#contentArea table.specs {
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	text-align: center;
}

#contentArea table.specs tr {
	border-bottom: solid 2px white;
}

#contentArea table.specs tr:last-child {
	border-bottom: none;
}

#contentArea table.specs th {
	position: relative;
	width: 20%;
	padding: 10px 20px;
	background: #1d2a53;
	text-align: center;
	color: white;
}

#contentArea table.specs td {
	width: 40%;
	padding: 10px 40px;
	background: #eee;
	text-align: center;
}



#contentArea table.alt {
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	text-align: center;
}

#contentArea table.alt th img {
	border: solid 8px #213c78;
	border-radius: 10px;
}

#contentArea table.alt td {
	padding: 10px;
	text-align: left;
}



.br {
	border-radius: 10px;
}


#contentArea .partBox a.btn1 {
	display:inline-block;
	width: 340px;
	margin-bottom: 5px;
	padding: 10px 10px;
	background-color: #0a6bb1;
	border-radius: 10px;
	color: #ffffff;
	text-decoration: none;
}

#contentArea .partBox a.btn1:hover,
#contentArea .partBox a.btn1:active {
	background-color: #51a1da;
}

#contentArea .partBox a.btn2 {
	display:inline-block;
	width: 340px;
	margin-bottom: 5px;
	padding: 10px 10px;
	background-color: #b91c22;
	border-radius: 10px;
	color: #ffffff;
	text-decoration: none;
}

#contentArea .partBox a.btn2:hover,
#contentArea .partBox a.btn2:active {
	background-color: #e26166;
}


@media screen and (max-width: 1000px) {
	.partBox {
		width: 94%;
		margin: 0 auto;
		padding: 30px 0;
	}
	.partBox img {
		width: 100%;
	}
	#contentArea ul.riyo li {
		float: none;
		width: 98%;
		padding-bottom: 50px;
	}
	#contentArea ul.riyo li .textMiddle img {
		width: 10%;
	}
	#contentArea ul.point li {
		float: none;
		width: 98%;
	}
	#contentArea .rei img {
		width: 30%;
	}
	#contentArea table.clinic {
		width: 100%;
		padding: 5px;
	}
	#contentArea table.clinic th {
		width: 20%;
		padding: 5px;
	}
	#contentArea table.clinic td {
		width: 30%;
		padding: 5px;
	}
	#contentArea .specs img {
		width: 48%;
	}
	#contentArea table.specs {
		width: 100%;
	}
	#contentArea table.specs th,
	#contentArea table.specs td {
		width: 33%;
		padding: 5px;
	}
	#contentArea ul.option li {
		width: 30%;
	}
	#contentArea ul.mark li {
		width: 17%;
		padding: 5px;
		font-size: 80%;
	}
	#contentArea ul.mark li img {
		width: 80%;
	}
}


/* ========== common */

.textOrange {
	color: #ff6400;
}

.textBlue {
	color: #1d2a53;
}

.textRed {
	color: #d62c06;
}

.textYellow {
	color: #e1ac0b;
}

.textBlack {
	color: #000;
}

.textBold {
	font-weight: bold;
}

.text80 {
	font-size: 80%;
}

.text120 {
	font-size: 120%;
}

.text140 {
	font-size: 140%;
}

.text160 {
	font-size: 160%;
}

.textCenter {
	text-align: center;
}

.textLeft {
	float: left;
	margin: 0 30px 0 0;
}

.textMiddle {
	display: flex;
	gap: 10px;
	margin: 0 0 10px;
	align-items: center;
}


/* ========== pageTop */

#pageTop {
	position: fixed;
	bottom: 30px;
	right: 30px;
}


/* ========== footer */

footer {
	width: 100%;
	padding: 30px 10px;
	background: #e7e7e7;
	font-size: 80%;
	text-align: center;
}

footer img {
	width: 150px;
}