body {
	font-family: "Meiryo", Arial, sans-serif;
	margin: 0;
	padding: 0;
}
p {
	font-size: 16px;
	/* テキストのフォントサイズ */
	line-height: 1.6;
	/* テキストの行の高さ */
	margin: 10px 0;
	/* 上下の余白 */
	padding: 0;
	/* テキストとの間の余白 */
	color: #333;
	/* テキストの色 */
	text-shadow: 1px 1px 1px #ccc;
	/* テキストの影 */
}
/* 通常のリンク */
a {
    color: #007bff; /* ブルー */
    text-decoration: none; /* 下線を消す */
}

/* ホバー時のリンク */
a:hover {
    color: #0056b3; /* ブルーの濃い色 */
}

/* アクティブ時のリンク */
a:active {
    color: #0056b3; /* ブルーの濃い色 */
}
header {
	width: 100%;
	background-color: #fff;
	color: #000;
	box-sizing: border-box;
	border-bottom: 1px solid #1F286F;
	/* ボーダーラインを追加 */
	position: fixed;
	/* ヘッダーを固定 */
	top: 0;
	/* ヘッダーをページの上端に固定 */
	left: 0;
	/* ヘッダーをページの左端に固定 */
	z-index: 999;
	/* ヘッダーを他の要素の上に配置 */
}
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
}
footer {
	width: 100%;
	background-color: #fff;
	color: #333;
	box-sizing: border-box;
}
footer p {
	color: #fff;
}
/* メインコンテンツ */

main {
	justify-content: space-between;
	padding-top: 130px;
	/* ヘッダーの高さより下にスペースを作る */
}
main .box {
	width: 100%;
	/* ボックスを100%幅に設定 */
	margin-bottom: 20px;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	/* Content1~4を横並びにする */
	background-color: #f8faff;
}
/* 目次 ２列 */

.column {
	float: left;
	width: 50%;
}
.row:after {
	content: "";
	display: table;
	clear: both;
}
.column ul {
	padding: 0;
	margin: 5px;
	list-style-type: none;
}
.column ul li {
	padding-left: 25px;
	position: relative;
	margin-bottom: 5px;
	/* リストアイテムの間隔を調整 */
	line-height: 1.6;
	font-size: 16px;
	border-bottom: 1px solid #C0CDDC;
	/*下線*/
}
.column ul li a {
	text-decoration: none;
	/* リンクの下線を削除 */
	color: black;
	/* リンクの色を指定 */
	transition: color 0.3s ease, background-color 0.3s ease;
	/* カラー変化のアニメーションを追加 */
}
.column ul li:before {
	content: "\2714";
	/* チェックマークのUnicode（✔） */
	color: #007bff;
	position: absolute;
	left: 0;
	top: 0;
}
.column ul li a:hover {
	color: #007bff;
	/* ホバー時のリンクの色を変更 */
	background-color: #f8f9fa;
	/* ホバー時の背景色を変更 */
}
/* 目次　BOX */

.boxrink {
	flex-grow: 0;
	/* ボックス1とボックス2の間のスペースを取らないようにする */
	width: 100%;
	/* 幅を100%に設定 */
	margin-bottom: 20px;
	/* ボックスと同じマージンを設定 */
	padding: 20px;
	/* ボックスと同じパディングを設定 */
	box-sizing: border-box;
	/* ボックスモデルの適用 */
	border: 1px solid #1F286F;
	/* ボーダーラインを追加 */
	display: flex;
	/* 縦方向に並べる */
	flex-direction: column;
	/* 縦方向に並べる */
}
.boxrink .box-title {
	font-size: 1.2em;
	background: #1F286F;
	padding: 4px;
	margin-bottom: 5px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.tel {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 2.0em;
}
.date {
	position: absolute;
	top: 60px;
	right: 10px;
	font-size: 0.7em;
}
/* 電話アイコンのスタイル */

.tel-icon::before {
	content: "\1F4DE";
	/* Unicode 文字を使って電話アイコンを表示 */
	font-size: 1.2em;
	/* アイコンのサイズを調整 */
	margin-right: 5px;
	/* アイコンとテキストの間隔を調整 */
}
h2 {
	color: #364e96;
	/*文字色*/
	padding: 0.5em 0;
	/*上下の余白*/
	border-top: solid 3px #364e96;
	/*上線*/
	border-bottom: solid 3px #364e96;
	/*下線*/
}
/* PC表示でDIVを左端から25%、50%、25%で表示 */

.box>div {
	width: 20%;
	/* 左端から25%の幅を設定 */
	box-sizing: border-box;
	/* ボックスモデルの適用 */
	padding: 10px;
	/* DIV内のコンテンツと枠線の間にパディングを設定 */
}
/* 2番目のDIVは50%の幅を設定 */

.box>div:nth-child(2) {
	width: 55%;
}
/* 最後のDIVは25%の幅を設定 */

.box>div:last-child {
	width: 25%;
}
.box .images {
	text-align: center;
}
.box .images img {
	width: 100%;
}
.border-box {
	display: inline-block;
}
.cost {
	font-size: 2.5em;
	font-weight: bold;
	color: #ff0000;
	text-align: right;
	margin-bottom: 15px;
	border-bottom: double 3px #ff0000;
	/*下線*/
}
.ryo {
	font-size: 0.3em;
}
.cost2 {
	font-size: 2.5em;
	font-weight: bold;
	color: #ff0000;
	text-align: left;
}
.bottom-content {
	position: relative;
	/* 親要素に対する相対位置指定 */
	width: 100%;
	background-color: #1F286F;
	color: white;
	padding: 10px;
	margin-top: 25px;
	box-sizing: border-box;
	bottom: 0;
	/* 下部に固定 */
}
.gai h3 {
	background: linear-gradient(transparent 70%, #a7d6ff 70%);
	margin-bottom: 10px;
	/* インデントを追加 */
}
.gai p {
	padding: 5px 20px;
	font-size: 0.8em;
}
.gai ul {
	list-style-type: none;
	/* リストのマーカーをなくす */
	padding: 2px;
	/* デフォルトの余白を取り除く */
	margin-top: 10px;
	/* インデントを追加 */
}
.gai li {
	margin-left: 20px;
	/* インデントを追加 */
	font-size: 0.8em;
}
.hoshi {
	color: #ff0000;
}
/*========= hpimgのためのCSS ===============*/

.hpimg {
	text-align: center;
}
/* スマートフォン用のスタイル */

@media only screen and (max-width: 767px) {
	h1 {
		text-align: right;
		margin-right: 20px;
		/* インデントを追加 */
		margin-bottom: 5px;
	}
	header img {
		width: 70%;
		height: auto;
	}
	header {
		padding: 0;
	}
	header .container {
		padding: 10px 0 0 30px;
	}
	h2 {
		font-size: 1.0em;
	}
	main {
		padding-top: 80px;
		/* ヘッダーの高さより下にスペースを作る */
	}
	.gai li {
		font-size: 1em;
	}

	main .box {
		width: 100%;
		/* スマホではボックスを100%幅に設定 */
		flex-direction: column;
		/* スマホではContent1~4を縦並びにする */
	}
	.box>div {
		width: 100%;
		/* スマートフォンではすべてのDIVを100%の幅に設定 */
		margin-right: 0;
		/* マージンを0に設定 */
		margin-bottom: 10px;
		/* 下に余白を設定 */
	}
	/* 2番目のDIV */
	.box>div:nth-child(2) {
		width: 100%;
		/* 2番目のDIVを100%の幅に設定 */
		margin-bottom: 10px;
		/* 下に余白を設定 */
	}
	/* 3番目のDIV */
	.box>div:nth-child(3) {
		width: 100%;
		/* 3番目のDIVを100%の幅に設定 */
		margin-bottom: 10px;
		/* 下に余白を設定 */
	}
	/* 目次　 */
	.column ul li {
		padding-left: 13px;
		font-size: 0.8em;
	}
	.column {
		width: 100%;
		/* スマートフォンの幅いっぱいに広げる */
		white-space: normal;
		/* テキストを折り返す */
		overflow: visible;
		/* はみ出た部分を表示 */
		text-overflow: clip;
		/* 省略記号を表示しない */
	}
	/* 画像 */
	.hpimg {
		width: 20%;
	}
	.tel, .date {
		display: none;
	}
}
/*========= 検査の説明のためのCSS ===============*/

.horizontal-list {
	list-style-type: none;
	padding: 0;
}
.list-item {
	display: inline-block;
	margin-right: 3px;
	font-size: 0.6em;
	position: relative;
	/* 追加 */
	background-color: blue;
	/* 背景色を青に設定 */
	color: white;
	/* 文字色を白に設定 */
	padding: 5px;
	/* 適切な間隔のためのパディングを追加 */
	border: 2px solid white;
	/* 各リストアイテムのテキストを囲む白い枠線を追加 */
	border-radius: 5px;
	/* 枠を四角形にするための角の丸めを追加 */
}
.popup-text {
	display: none;
	position: absolute;
	top: 100%;
	left: -40px;
	width: 200%;
	background-color: #000;
	/* 背景色を黒に変更 */
	color: #fff;
	/* テキスト色を白に変更 */
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	z-index: 1;
	/* 最上位に配置するための z-index を追加 */
}
.list-item:hover .popup-text {
	display: block;
}
/*========= ボタン動きのCSS ===============*/

.ry {
	text-align: center;
	/* テキストを中央揃えにする */
	font-weight: bold;
	/* フォントを太字にする */
	padding: 20px;
	margin-top: 20px;
	background: #1F286F;
	color: #FFF;
	box-sizing: border-box;
	font-size: 1.2em;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	/* x方向のオフセット, y方向のオフセット, ぼかし半径, 影の色（RGBA形式） */
}
.ry a {
	text-decoration: none;
	/* 下線をリセット */
	color: inherit;
	/* 親要素からの色を継承する */
}
.ry a:hover {
	/* ホバー時のスタイルをリセットする場合、何も指定せず空にするか、デフォルトのスタイルを再指定する */
}
/* fadeUp */

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger {
	opacity: 0;
}
/*========= 質問のCSS ===============*/

.qa {
	margin-bottom: 40px;
	/* 質問と質問の間隔 */
}
.question {
	font-weight: bold;
	margin-bottom: 5px;
	cursor: pointer;
	background-color: #1F286F;
	color: #ffffff;
	padding: 15px 10px;
	/* 上下に余白を追加 */
	border-radius: 5px;
	transition: background-color 0.3s ease;
}
.answer {
	display: none;
	margin-left: 20px;
	padding: 15px 10px;
	/* 上下に余白を追加 */
	border-left: 2px solid #ccc;
}
/* 質問がクリックされたときのスタイル */

.question.active {
	background-color: #1F286F;
	/* 質問が押された時の背景色 */
}
/* 回答のアニメーション */

@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.answer.active {
	display: block;
	animation: slideDown 0.3s ease;
}
/*========= PLANページのCSS ===============*/

.plan {
	border: 5px double blue;
	/* 青色の外側の線 */
	padding: 10px;
	/* 内側の余白 */
	border-radius: 20px;
	/* 角の丸みの半径 */
	padding: 20px;
	/* テキストとボックスの内側の余白 */
	box-sizing: border-box;
	/* paddingやborderを含めたボックスのサイズを指定 */
	background-image: url('../images/pa11.png');
	/* 画像のURLを指定 */
	background-size: cover;
	/* 画像をボックスに合わせて表示 */
	background-position: center;
	/* 画像を中央に配置 */
}
.plan h1 {
	margin: 0;
	/* マージンをリセット */
	padding: 0;
	/* パディングをリセット */
}
.plan p.plan-name {
	margin: 0;
	/* マージンをリセット */
	padding: 5px;
	/* パディングをリセット */
	color: blue;
	/* テキストを青色に設定 */
	font-weight: bold;
	/* フォントを太字にする */
	font-size: 1.2em;
	/* フォントサイズを調整 */
}
/* スマートフォン用のスタイル */

@media screen and (max-width: 768px) {
	.plan {
		background-image: url('../images/p150.png');
		/* 画像のURLを指定 */
	}
	.plan h1 {
		text-align: left;
		font-size: 1.3em;
		/* フォントサイズを小さく */
		margin: 0;
		/* マージンをリセット */
		padding: 10px;
		/* 内側の余白を大きく */
	}
}
.flex_box {
	padding: 10px;
	/* 余白指定 */
	display: flex;
	/* フレックスボックスにする */
}
.flex_item {
	padding: 5px;
	margin: 5px;
	/* 外側の余白 */
}
.flex_item p.plan_p {
	font-size: 16px;
	/* テキストのフォントサイズ */
	line-height: 1.6;
	/* テキストの行の高さ */
	margin: 10px 0;
	/* 上下の余白 */
	padding: 0 15px;
	/* テキストとの間の余白 */
	color: #333;
	/* テキストの色 */
	text-shadow: none;
	/* テキストの影を取り消す */
}
.flex_item:nth-child(1) {
	width: 70%;
}
.flex_item:nth-child(2) {
	width: 30%;
}
.setumei_flex {
	padding: 10px;
	/* 余白指定 */
	display: flex;
	/* フレックスボックスにする */
	border: 5px double blue;
	/* 青色の外側の線 */
	border-radius: 20px;
	/* 角の丸みの半径 */
	padding: 20px;
	/* テキストとボックスの内側の余白 */
	box-sizing: border-box;
	/* paddingやborderを含めたボックスのサイズを指定 */
	background-color: #F4FBFE;
	margin-bottom: 10px;
}
.flex_item2 {
	padding: 5px;
	margin: 5px;
	/* 外側の余白 */
}
.flex_item2 p.plan_p {
	font-size: 16px;
	/* テキストのフォントサイズ */
	line-height: 1.6;
	/* テキストの行の高さ */
	margin: 10px 0;
	/* 上下の余白 */
	padding: 0 15px;
	/* テキストとの間の余白 */
	color: #333;
	/* テキストの色 */
	text-shadow: none;
	/* テキストの影を取り消す */
}
.flex_item2:nth-child(1) {
	width: 50%;
}
.flex_item2:nth-child(2) {
	width: 50%;
}
.plan_li ul {
	padding: 0;
	margin: 0;
}
.plan_li li {
	list-style-type: none;
	padding-left: 20px;
	/* リストアイテムの左側に余白を追加 */
	position: relative;
}
/* リストアイテムの先頭に星を追加 */

.plan_li li:before {
	content: "\2605";
	/* ★のUnicodeコード */
	color: #ff0000;
	/* 星の色 */
	font-size: 1.2em;
	/* 星のサイズ */
	position: absolute;
	left: 0;
	/* アイコンの位置 */
	top: 0;
	/* アイコンの位置 */
}
.item {
	padding: 5px;
	margin: 5px;
	/* 外側の余白 */
	width: 100%;
}
/* スマートフォン用のスタイル */

@media screen and (max-width: 768px) {
	.flex_box {
		display: block;
		/* flexbox を取り消して、要素を縦に配置する */
	}
	.flex_item:nth-child(1) {
		width: 100%;
	}
	.flex_item:nth-child(2) {
		width: 100%;
	}
	.setumei_flex {
		display: block;
		/* flexbox を取り消して、要素を縦に配置する */
	}
	.flex_item2:nth-child(1) {
		width: 100%;
	}
	.flex_item2:nth-child(2) {
		width: 100%;
	}
}
/* h3要素のスタイル */

.flex_box h3 {
	color: #333;
	/* テキストの色を設定 */
	background-color: #f4f4f4;
	/* 背景色を設定 */
	padding: 10px;
	/* 内側の余白を指定 */
	border-bottom: 2px solid #ccc;
	/* 下部に線を追加 */
	font-size: 1.5em;
	/* フォントサイズを指定 */
	margin-bottom: 20px;
	/* 下側の余白を指定 */
}
/* checkのスタイル */

.check {
	border: solid 2px #ffb03f;
	padding: 0.5em;
	position: relative;
	margin: 2em 0 1em;
}
.check li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}
.check li:last-of-type {
	border-bottom: none;
}
.check li:before {
	/*リスト内のアイコン*/
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	/*アイコン種類*/
	position: absolute;
	left: 0.5em;
	/*左端からのアイコンまで*/
	color: #ffb03f;
	/*アイコン色*/
}
.check li:after {
	/*タイトルタブ*/
	background: #ffb03f;
	color: #fff;
	font-weight: bold;
	position: absolute;
	left: -2px;
	bottom: 100%;
	padding: 1px 7px;
	content: "Check";
	/*タブの文字*/
	letter-spacing: 0.05em;
	/*字間*/
}
.check ul ul>li {
	background-color: #FFEFCF;
	padding: 3px 10px;
}
.check ul ul>li:before {
	content: none;
	/* コンテンツを削除して非表示にする */
}
/* OPオプションのスタイル */

.op {
	border: solid 2px #ffb03f;
	padding: 0.5em;
	position: relative;
	margin: 2em 0 1em;
	background-color: #F4FBFE;
}
.op li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}
.op li:last-of-type {
	border-bottom: none;
}
.op li:before {
	/*リスト内のアイコン*/
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	/*アイコン種類*/
	position: absolute;
	left: 0.5em;
	/*左端からのアイコンまで*/
	color: #ffb03f;
	/*アイコン色*/
}
.op li:after {
	/*タイトルタブ*/
	background: #ffb03f;
	color: #fff;
	font-weight: bold;
	position: absolute;
	left: -2px;
	bottom: 100%;
	padding: 1px 7px;
	content: "OPTION";
	/*タブの文字*/
	letter-spacing: 0.05em;
	/*字間*/
}
.op ul ul>li {
	padding: 3px 10px;
	text-align: right;
	/* テキストを右揃えにする */
}
.op ul ul>li:before {
	content: none;
	/* コンテンツを削除して非表示にする */
}
/* リスト全体のスタイル */

ul {
	list-style-type: none;
	/* デフォルトのリストマーカーを非表示にする */
	padding: 0;
}
/* 各リストアイテムのスタイル */

li {
	margin-bottom: 10px;
	/* リストアイテムの下に余白を追加 */
}
/* 画像のスタイル */

li img {
	width: 50px;
	/* 画像の幅を調整 */
	height: auto;
	/* 高さを自動調整してアスペクト比を保持 */
	margin-right: 10px;
	/* 画像の右側に余白を追加 */
	vertical-align: middle;
	/* 画像を垂直方向に中央揃え */
}
.ribon {
	position: relative;
	display: inline-block;
	height: 64px;
	margin-top: 10px;
	margin-left: 30px;
	margin-bottom: 5px;
	padding: 1rem 2rem 1rem 3rem;
	color: #fff;
	background: #00bfff;
}
.ribon:before {
	position: absolute;
	top: 0;
	left: -30px;
	content: '';
	border-width: 32px 30px 32px 0;
	border-style: solid;
	border-color: transparent #00bfff transparent transparent;
}
.ribon:after {
	position: absolute;
	top: calc(50% - 7px);
	left: -10px;
	width: 14px;
	height: 14px;
	content: '';
	border-radius: 50%;
	background: #fff;
}
/* yokumiru リスト折り返しなしの適用 */

@media only screen and (max-width: 767px) {
	/* スマートフォンの幅にのみ適用されるスタイル */
	.yokuaru_list {
		font-size: 0.8em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* はみ出したテキストを省略記号で表示 */
	}
}
/* span 強調 */

.highlight-line {
	background: linear-gradient(transparent 78%, #e60033ab 78%);
	margin-bottom: 10px;
	/* インデントを追加 */
}
.highlight-line2 {
	background: linear-gradient(transparent 65%, #00bfffab 65%);
	margin-bottom: 10px;
	/* インデントを追加 */
}
/*注意事項の適用 */

.cyu3 {
	position: relative;
	padding: 1rem 2rem calc(1rem + 10px);
	background: #a7d6ff;
	margin-top: 15px;
	color: #0000ff;
}
.cyu3:before {
	position: absolute;
	top: -7px;
	left: -7px;
	width: 100%;
	height: 100%;
	content: '';
	border: 4px solid #000;
}

.ranch {
	border: 2px dotted black;
	/* ボーダーの幅とスタイルを指定 */
	padding: 10px 0 0 50px;
	/* ボーダーと内容の間の余白を指定 */
}
.cyuli {
	padding: 10px 0 10px 50px;
	list-style-type: square;
}
.cyu_l {
	list-style-type: square;
	background: #fffcf4;
	border-radius: 8px;
	/*角の丸み*/
	box-shadow: 0px 0px 5px silver;
	/*5px=影の広がり具合*/
	padding: 20px 15px 10px 50px;
	margin: 20px 0 15px;
}
.cyu_l1 {
	list-style-type: none;
	background: #fffcf4;
	border-radius: 8px;
	/*角の丸み*/
	box-shadow: 0px 0px 5px silver;
	/*5px=影の広がり具合*/
	padding: 20px 15px 10px 50px;
	margin: 20px 0 15px;
}

.main_image img {
	max-width: 100%;
	/* 画像の最大幅を親要素の幅に合わせる */
	height: auto;
	/* アスペクト比を維持して画像の高さを自動調整する */
	margin: 15px 0 5px 0;
}
.main_image {
	text-align: center;
}

/*========= footerのためのCSS ===============*/
footer {
	background-color: #fff;
	color: #333;
	padding-top: 10px;
	text-align: center;
	bottom: 0;
	width: 100%;
	box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
}

.container_f {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
}
.container_f2 {
	background-color: #1F286F;
	padding: 5px;
}

.box_f {
	width: 30%;
	padding: 10px;
	margin: 5px;
	box-sizing: border-box;
}
@media (max-width: 768px) {
	.container_f {
		flex-direction: column;
		align-items: center;
	}
	.box_f {
		width: 100%;
	}
}
.container_f   p {
font-size: 14px;
/* テキストのフォントサイズ */
line-height: 1.6;
/* テキストの行の高さ */
margin: 10px 0;
/* 上下の余白 */
padding: 0;
/* テキストとの間の余白 */
color: #333;
/* テキストの色 */
text-shadow: 1px 1px 1px #ccc;
/* テキストの影 */
}
.container_f  address{
color: #333;
font-size: 0.8em;
}

.footerh1{
text-align: center;
}

/* スタイルの追加 */
.table_f {
width: 100%;
border-collapse: collapse;
color: #333;
}

.table_f th, .table_f td {
border: 1px solid #dddddd;
padding: 8px;
text-align: center;
}

.table_f th {
background-color: #b5d7fc;
}

.table_f td {
background-color: #ffffff;
}

.table_f td.td_f {
background-color: #e2edf8; 
}

.tel_f a {
font-size: 2.0em; /* 任意のサイズに変更 */
}