@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Song+Myung");

/*
	Stellar by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	scroll-behavior: smooth;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
		scroll-padding-top: 100px;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background-color: white;
		/*
		background-image: url("images/scuba.png"), -moz-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
		background-image: url("images/scuba.png"), -webkit-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
		background-image: url("images/scuba.png"), -ms-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
		background-image: url("images/scuba.png"), linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
		*/
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	body {
		background-color: white;
		/*
		background-color: #935d8c;
		color: rgba(255, 255, 255, 0.65);
		*/
	}

	body, input, select, textarea {
		font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
		font-size: 17pt;
		line-height: 1.65;
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 14pt;
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 360px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

	a {
		-moz-transition: color 0.2s ease, border-bottom 0.2s ease;
		-webkit-transition: color 0.2s ease, border-bottom 0.2s ease;
		-ms-transition: color 0.2s ease, border-bottom 0.2s ease;
		transition: color 0.2s ease, border-bottom 0.2s ease;
		text-decoration: none;
		border-bottom: dotted 0px;
		color: inherit;
	}

		a:hover {
			border-bottom-color: transparent;
		}

	strong, b {
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
		font-size: 0.7em;
		letter-spacing: 0.05em;
		color: rgb(37, 37, 37);
	}

		p.content {
			-moz-columns: 20em 2;
			-webkit-columns: 20em 2;
			-ms-columns: 20em 2;
			columns: 20em 2;
			-moz-column-gap: 2em;
			-webkit-column-gap: 2em;
			-ms-column-gap: 2em;
			column-gap: 2em;
			text-align: justify;
		}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 500;
		line-height: 1.5;
		margin: 0 0 0.7em 0;
		letter-spacing: 0.08em;
		color: black;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: black;
			text-decoration: none;
		}

	h1 {
		font-size: 2.5em;
		line-height: 1.2;
	}

	h2 {
		font-size: 1.5em;
		font-weight: 500;
	}

	h3 {
		font-size: 1.25em;
		font-weight: 500;
	}

	h4 {
		font-size: 1.1em;
	}

	h5 {
		font-size: 0.9em;
	}

	h6 {
		font-size: 0.7em;
	}

	@media screen and (max-width: 736px) {

		h1 {
			font-size: 2em;
		}

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: solid 4px;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		border-radius: 8px;
		border: solid 1px;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px;
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

	input, select, textarea {
		color: #ffffff;
	}

	a:hover {
		color: #ffffff;
	}

	strong, b {
		color: #ffffff;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
	}

	blockquote {
		border-left-color: rgba(255, 255, 255, 0.35);
	}

	code {
		background: rgba(255, 255, 255, 0.075);
		border-color: rgba(255, 255, 255, 0.35);
	}

	hr {
		border-bottom-color: rgba(255, 255, 255, 0.35);
	}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
			z-index:1;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.3333333333%;
		}

		.row > .off-1 {
			margin-left: 8.3333333333%;
		}

		.row > .col-2 {
			width: 16.6666666667%;
		}

		.row > .off-2 {
			margin-left: 16.6666666667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.3333333333%;
		}

		.row > .off-4 {
			margin-left: 33.3333333333%;
		}

		.row > .col-5 {
			width: 41.6666666667%;
		}

		.row > .off-5 {
			margin-left: 41.6666666667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.3333333333%;
		}

		.row > .off-7 {
			margin-left: 58.3333333333%;
		}

		.row > .col-8 {
			width: 66.6666666667%;
		}

		.row > .off-8 {
			margin-left: 66.6666666667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.3333333333%;
		}

		.row > .off-10 {
			margin-left: 83.3333333333%;
		}

		.row > .col-11 {
			width: 91.6666666667%;
		}

		.row > .off-11 {
			margin-left: 91.6666666667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.375em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.375em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.375em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.375em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -0.75em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 0.75em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -0.75em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 0.75em;
				}

		.row {
			margin-top: 0;
			margin-left: -1.5em;
		}

			.row > * {
				padding: 0 0 0 1.5em;
			}

			.row.gtr-uniform {
				margin-top: -1.5em;
			}

				.row.gtr-uniform > * {
					padding-top: 1.5em;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -2.25em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 2.25em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -2.25em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 2.25em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -3em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 3em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -3em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 3em;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.3333333333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-xlarge {
					width: 16.6666666667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.3333333333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-xlarge {
					width: 41.6666666667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.3333333333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-xlarge {
					width: 66.6666666667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.3333333333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-xlarge {
					width: 91.6666666667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.3333333333%;
				}

				.row > .off-1-large {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-large {
					width: 16.6666666667%;
				}

				.row > .off-2-large {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.3333333333%;
				}

				.row > .off-4-large {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-large {
					width: 41.6666666667%;
				}

				.row > .off-5-large {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.3333333333%;
				}

				.row > .off-7-large {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-large {
					width: 66.6666666667%;
				}

				.row > .off-8-large {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.3333333333%;
				}

				.row > .off-10-large {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-large {
					width: 91.6666666667%;
				}

				.row > .off-11-large {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.3333333333%;
				}

				.row > .off-1-medium {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-medium {
					width: 16.6666666667%;
				}

				.row > .off-2-medium {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.3333333333%;
				}

				.row > .off-4-medium {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-medium {
					width: 41.6666666667%;
				}

				.row > .off-5-medium {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.3333333333%;
				}

				.row > .off-7-medium {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-medium {
					width: 66.6666666667%;
				}

				.row > .off-8-medium {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.3333333333%;
				}

				.row > .off-10-medium {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-medium {
					width: 91.6666666667%;
				}

				.row > .off-11-medium {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.3333333333%;
				}

				.row > .off-1-small {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-small {
					width: 16.6666666667%;
				}

				.row > .off-2-small {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.3333333333%;
				}

				.row > .off-4-small {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-small {
					width: 41.6666666667%;
				}

				.row > .off-5-small {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.3333333333%;
				}

				.row > .off-7-small {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-small {
					width: 66.6666666667%;
				}

				.row > .off-8-small {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.3333333333%;
				}

				.row > .off-10-small {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-small {
					width: 91.6666666667%;
				}

				.row > .off-11-small {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.25em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.25em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.25em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.25em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.5em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.5em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.5em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.5em;
						}

				.row {
					margin-top: 0;
					margin-left: -1em;
				}

					.row > * {
						padding: 0 0 0 1em;
					}

					.row.gtr-uniform {
						margin-top: -1em;
					}

						.row.gtr-uniform > * {
							padding-top: 1em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2em;
						}

		}

		@media screen and (max-width: 480px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.3333333333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-xsmall {
					width: 16.6666666667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.3333333333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-xsmall {
					width: 41.6666666667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.3333333333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-xsmall {
					width: 66.6666666667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.3333333333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-xsmall {
					width: 91.6666666667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.3125em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.3125em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.3125em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.3125em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.875em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.875em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.875em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.875em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2.5em;
						}

		}

/* Box */

	.box {
    border-radius: 8px;
    border: solid 1px rgba(255, 255, 255, 0.35);
    margin-bottom: 2em;
    padding: 3em;
    
    /* 通常時（ご提示のダークグレー状態を維持） */
    background-color: rgba(0, 0, 0, 0.1); /* 透かし用の薄い黒（お好みで調整） */
    color: #ffffff; /* 通常時の文字色（白） */
    
    /* 全ての変化をなめらかに */
    transition: all 0.3s ease;
    text-decoration: none; /* リンクの下線を消す */
}

/* ホバー時の指定 */
.box:hover {
    /* ボタン全体をかなり明るい白にする（白マスク） */
    background-color: rgba(0, 56, 176, 0.95);
    border-color: rgba(255, 255, 255, 1);
    
    /* ★ここが重要：ホバー時に文字色を濃いグレー（#333）に変更 */
    color: #333333 !important; 
}


.box > :last-child,
.box > :last-child > :last-child,
.box > :last-child > :last-child > :last-child {
    margin-bottom: 0;
}

.box.alt {
    border: 0;
    border-radius: 0;
    padding: 0;
}

	.box2 {
		background-color: #ffea0027;
		border-radius: 8px;
		border: solid 2px black;
		margin-bottom: 2em;
		padding: 1.5em 1.5em 1em 1.5em;
	}

	.box3 {
    position: relative; /* 三角形の位置基準 */
    background-color: #0099ff27;
    border-radius: 8px;
    border: solid 0 black;
    margin-bottom: 2em;
    padding: 1.5em 1.5em 1em 1.5em;
}

/* 吹き出しの三角形 */
.box3::before {
    content: "";
    position: absolute;
    top: -30px;           /* 三角形をボックスの上に配置（高さ分） */
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 0 15px 30px 15px; /* 三角形のサイズ (下 左右 上) */
    border-color: transparent transparent #0099ff27 transparent; /* 下辺だけボックスと同じ色 */
}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-radius: 8px;
		border: 0;
		cursor: pointer;
		display: inline-block;
		font-weight: 300;
		height: 2.75em;
		line-height: 2.75em;
		min-width: 9.25em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

		input[type="submit"].icon,
		input[type="reset"].icon,
		input[type="button"].icon,
		button.icon,
		.button.icon {
			padding-left: 1.35em;
		}

			input[type="submit"].icon:before,
			input[type="reset"].icon:before,
			input[type="button"].icon:before,
			button.icon:before,
			.button.icon:before {
				margin-right: 0.5em;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
			border: solid 1px black;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 1.35em;
		}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			opacity: 0.25;
		}

		@media screen and (max-width: 736px) {

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				min-width: 0;
			}

		}

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		background-color: transparent;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
		color: #ffffff !important;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(255, 255, 255, 0.075);
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(255, 255, 255, 0.2);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			color: rgba(255, 255, 255, 0.5);
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #8cc9f0;
			color: #ffffff !important;
			box-shadow: none;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: #9acff2;
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			button.primary:active,
			.button.primary:active {
				background-color: #7ec3ee;
			}

			input[type="submit"].primary.icon:before,
			input[type="reset"].primary.icon:before,
			input[type="button"].primary.icon:before,
			button.primary.icon:before,
			.button.primary.icon:before {
				color: #ffffff !important;
			}

/* Form */

	form {
		margin: 0 0 2em 0;
	}

	label {
		display: block;
		font-size: 0.9em;
		font-weight: 400;
		margin: 0 0 1em 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		border-radius: 8px;
		border: solid 1px;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

	select {
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75em;
		padding-right: 2.75em;
		text-overflow: ellipsis;
	}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: 2147483645;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 300;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
				text-transform: none !important;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				border-radius: 8px;
				border: solid 1px;
				content: '';
				display: inline-block;
				height: 1.65em;
				left: 0;
				line-height: 1.58125em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 1.65em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			content: '\f00c';
		}

	input[type="checkbox"] + label:before {
		border-radius: 8px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		opacity: 1.0;
	}

	:-moz-placeholder {
		opacity: 1.0;
	}

	::-moz-placeholder {
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		opacity: 1.0;
	}

	label {
		color: #ffffff;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		background-color: rgba(255, 255, 255, 0.075);
		border-color: rgba(255, 255, 255, 0.35);
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			border-color: #8cc9f0;
			box-shadow: 0 0 0 1px #8cc9f0;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.35)' /%3E%3C/svg%3E");
	}

		select option {
			color: #ffffff;
			background: #935d8c;
		}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		color: rgba(255, 255, 255, 0.65);
	}

		input[type="checkbox"] + label:before,
		input[type="radio"] + label:before {
			background: rgba(255, 255, 255, 0.075);
			border-color: rgba(255, 255, 255, 0.35);
		}

	input[type="checkbox"]:checked + label:before,
	input[type="radio"]:checked + label:before {
		background-color: #ffffff;
		border-color: #ffffff;
		color: #935d8c;
	}

	input[type="checkbox"]:focus + label:before,
	input[type="radio"]:focus + label:before {
		border-color: #8cc9f0;
		box-shadow: 0 0 0 1px #8cc9f0;
	}

	::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
	}

	:-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
	}

	::-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
	}

	:-ms-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
	}

	.formerize-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
	}

/* Icon */

	.icon {
		text-decoration: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
			text-transform: none !important;
		}

		.icon > .label {
			display: none;
		}

		.icon.major {
			border: solid 1px;
			display: inline-block;
			border-radius: 100%;
			padding: 0.65em;
			margin: 0 0 2em 0;
			cursor: default;
		}

			.icon.major:before {
				display: inline-block;
				font-size: 6.25rem;
				width: 2.25em;
				height: 2.25em;
				line-height: 2.2em;
				border-radius: 100%;
				border: solid 1px;
				text-align: center;
			}

		.icon.alt {
			display: inline-block;
			border: solid 1px;
			border-radius: 100%;
		}

			.icon.alt:before {
				display: block;
				font-size: 1.25em;
				width: 2em;
				height: 2em;
				text-align: center;
				line-height: 2em;
			}

		.icon.style1 {
			color: #efa8b0;
		}

		.icon.style2 {
			color: #c79cc8;
		}

		.icon.style3 {
			color: #a89cc8;
		}

		.icon.style4 {
			color: #9bb2e1;
		}

		.icon.style5 {
			color: #8cc9f0;
		}

		@media screen and (max-width: 1680px) {

			.icon.major:before {
				font-size: 5.5rem;
			}

		}

		@media screen and (max-width: 1280px) {

			.icon.major:before {
				font-size: 4.75rem;
			}

		}

		@media screen and (max-width: 736px) {

			.icon.major {
				margin: 0 0 1.5em 0;
				padding: 0.35em;
			}

				.icon.major:before {
					font-size: 3.5rem;
				}

		}

	.icon.major {
		border-color: rgba(255, 255, 255, 0.35);
	}

		.icon.major:before {
			border-color: rgba(255, 255, 255, 0.35);
		}

	.icon.alt {
		border-color: rgba(255, 255, 255, 0.35);
		color: #ffffff;
	}

		.icon.alt:hover {
			background-color: rgba(255, 255, 255, 0.075);
		}

		.icon.alt:active {
			background-color: rgba(255, 255, 255, 0.2);
		}

/* Image */

	.image {
		border-radius: 8px;
		border: 0;
		display: inline-block;
		position: relative;
		z-index: 1;
	}

		.image img {
			border-radius: 8px;
			display: block;
			z-index: 1;
		}

		.image.left, .image.right {
			max-width: 40%;
			z-index: 1;
		}

			.image.left img, .image.right img {
				width: 100%;
				z-index: 1;
			}
			

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
			z-index: 1;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
			z-index: 1;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
			z-index:9999;
		}

			.image.fit img {
				width: 100%;
				z-index: 9999;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
			z-index: 1;
		}

			.image.main img {
				width: 100%;
				z-index: 1;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px;
				padding: 0.5em 0;
				font-size: 0.7em;
				letter-spacing: 0.08em;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 400;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

		dl.alt dt {
			display: block;
			width: 3em;
			margin: 0;
			clear: left;
			float: left;
		}

		dl.alt dd {
			margin: 0 0 0.85em 5.5em;
		}

		dl.alt:after {
			content: '';
			display: block;
			clear: both;
		}

	ul.alt li {
		border-top-color: rgba(255, 255, 255, 0.35);
	}

	dl dt {
		color: #ffffff;
	}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5rem;
						}

		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 0.65em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0 !important;
			}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header.major {
		margin-bottom: 3em;
	}

		header.major h2 {
			font-size: 2em;
		}

			header.major h2:after {
				display: block;
				content: '';
				width: 3.25em;
				height: 2px;
				margin: 0.7em 0 1em 0;
				border-radius: 2px;
			}

				section.special header.major h2:after, article.special header.major h2:after {
					margin-left: auto;
					margin-right: auto;
				}

		header.major p {
			font-size: 1.25em;
			letter-spacing: -0.025em;
		}

		header.major.special {
			text-align: center;
		}

			header.major.special h2:after {
				margin-left: auto;
				margin-right: auto;
			}

	footer.major {
		margin-top: 3em;
	}

	@media screen and (max-width: 736px) {

		header.major {
			margin-bottom: 0;
		}

			header.major h2 {
				font-size: 1.5em;
			}

			header.major p {
				font-size: 1em;
				letter-spacing: 0;
			}

				header.major p br {
					display: none;
				}

		footer.major {
			margin-top: 0;
		}

	}

	header.major h2:after {
		background-color: rgba(255, 255, 255, 0.35);
	}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px;
			border-left: 0;
			border-right: 0;
		}

		table td {
			font-size: 0.7em;
			letter-spacing: 0.05em;
			color: rgb(37, 37, 37);
			padding: 0.75em 0.75em;
		}

		table th {
			font-size: 0.7em;
			letter-spacing: 0.05em;
			font-weight: 500;
			color: rgb(37, 37, 37);
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px;
		}

		table tfoot {
			border-top: solid 2px;
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px;
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

	table tbody tr {
		border-color: rgba(255, 255, 255, 0.35);
	}

		table tbody tr:nth-child(2n + 1) {
			background-color: rgba(255, 255, 255, 0);
		}

	table th {
		color: #ffffff;
	}

	table thead {
		border-bottom-color: rgba(255, 255, 255, 0.35);
	}

	table tfoot {
		border-top-color: rgba(255, 255, 255, 0.35);
	}

	table.alt tbody tr td {
		border-color: rgba(255, 255, 255, 0.35);
	}

/* Features */

	.features {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		width: calc(100% + 2em);
		margin: 0 0 3em -2em;
		padding: 0;
		list-style: none;
	}

		.features li {
			width: calc(33.3333333333% - 2em);
			margin-left: 2em;
			margin-top: 3em;
			padding: 0;
		}

			.features li:nth-child(1), .features li:nth-child(2), .features li:nth-child(3) {
				margin-top: 0;
			}

			.features li > :last-child {
				margin-bottom: 0;
			}

		@media screen and (max-width: 980px) {

			.features li {
				width: calc(50% - 2em);
			}

				.features li:nth-child(3) {
					margin-top: 3em;
				}

		}

		@media screen and (max-width: 736px) {

			.features {
				width: 100%;
				margin: 0 0 2em 0;
			}

				.features li {
					width: 100%;
					margin-left: 0;
					margin-top: 2em;
				}

					.features li:nth-child(2), .features li:nth-child(3) {
						margin-top: 2em;
					}

		}

/* Statistics */

	.statistics {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		width: 100%;
		margin: 0 0 3em 0;
		padding: 0;
		list-style: none;
		cursor: default;
	}

		.statistics li {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			padding: 1.5em;
			color: #ffffff;
			text-align: center;
		}

			.statistics li.style1 {
				background-color: #efa8b0;
			}

			.statistics li.style2 {
				background-color: #c79cc8;
			}

			.statistics li.style3 {
				background-color: #a89cc8;
			}

			.statistics li.style4 {
				background-color: #9bb2e1;
			}

			.statistics li.style5 {
				background-color: #8cc9f0;
			}

			.statistics li strong, .statistics li b {
				display: block;
				font-size: 2em;
				line-height: 1.1;
				color: inherit !important;
				font-weight: 300;
				letter-spacing: -0.025em;
			}

			.statistics li:first-child {
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
			}

			.statistics li:last-child {
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			}

			.statistics li .icon {
				display: inline-block;
			}

				.statistics li .icon:before {
					font-size: 2.75rem;
					line-height: 1.3;
				}

		@media screen and (max-width: 980px) {

			.statistics li strong, .statistics li b {
				font-size: 1.5em;
			}

		}

		@media screen and (max-width: 736px) {

			.statistics {
				display: block;
				width: 20em;
				max-width: 100%;
				margin: 0 auto 2em auto;
			}

				.statistics li:first-child {
					border-bottom-left-radius: 0;
					border-top-right-radius: 8px;
				}

				.statistics li:last-child {
					border-top-right-radius: 0;
					border-bottom-left-radius: 8px;
				}

				.statistics li .icon:before {
					font-size: 3.75rem;
				}

				.statistics li strong, .statistics li b {
					font-size: 2.5em;
				}

		}

/* Spotlight */

	.spotlight {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		margin: 0 0 2em 0;
	}

		.spotlight .content {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
		}

			.spotlight .content > :last-child {
				margin-bottom: 0;
			}

			.spotlight .content header.major {
				margin: 0 0 2em 0;
			}

		.spotlight .image {
			display: inline-block;
			margin-left: 4em;
			padding: 0.65em;
			border-radius: 100%;
			border: solid 1px;
		}

			.spotlight .image img {
				display: block;
				border-radius: 100%;
				width: 16em;
			}

		@media screen and (max-width: 980px) {

			.spotlight {
				-moz-flex-direction: column-reverse;
				-webkit-flex-direction: column-reverse;
				-ms-flex-direction: column-reverse;
				flex-direction: column-reverse;
				text-align: center;
			}

				.spotlight .content {
					-moz-flex: 0 1 auto;
					-webkit-flex: 0 1 auto;
					-ms-flex: 0 1 auto;
					flex: 0 1 auto;
					width: 100%;
				}

					.spotlight .content header.major h2:after {
						margin-left: auto;
						margin-right: auto;
					}

					.spotlight .content .actions {
						-moz-justify-content: center;
						-webkit-justify-content: center;
						-ms-justify-content: center;
						justify-content: center;
						width: calc(100% + 1em);
					}

				.spotlight .image {
					-moz-flex: 0 1 auto;
					-webkit-flex: 0 1 auto;
					-ms-flex: 0 1 auto;
					flex: 0 1 auto;
					margin-left: 0;
					margin-bottom: 2em;
				}

		}

		@media screen and (max-width: 736px) {

			.spotlight .image {
				padding: 0.35em;
			}

				.spotlight .image img {
					width: 12em;
				}

		}

	.spotlight .image {
		border-color: rgba(255, 255, 255, 0.35);
	}

/* Header */

	#header {
		padding: 5em 5em 1em 5em ;
		text-align: center;
	}

		#header h1 {
			margin: 0 0 0.25em 0;
		}

		#header p {
			font-size: 1.25em;
			letter-spacing: -0.025em;
		}

		#header.alt {
			padding: 7em 5em 4em 5em ;
		}

			#header.alt h1 {
				font-size: 3.25em;
			}

			#header.alt > * {
				-moz-transition: opacity 3s ease;
				-webkit-transition: opacity 3s ease;
				-ms-transition: opacity 3s ease;
				transition: opacity 3s ease;
				-moz-transition-delay: 0.5s;
				-webkit-transition-delay: 0.5s;
				-ms-transition-delay: 0.5s;
				transition-delay: 0.5s;
				opacity: 1;
			}

			#header.alt .logo {
				-moz-transition: opacity 1.25s ease, -moz-transform 0.5s ease;
				-webkit-transition: opacity 1.25s ease, -webkit-transform 0.5s ease;
				-ms-transition: opacity 1.25s ease, -ms-transform 0.5s ease;
				transition: opacity 1.25s ease, transform 0.5s ease;
				-moz-transition-delay: 0s;
				-webkit-transition-delay: 0s;
				-ms-transition-delay: 0s;
				transition-delay: 0s;
				display: block;
				margin: 0 0 1.5em 0;
			}

				#header.alt .logo img {
					display: block;
					margin: 0 auto;
					max-width: 75%;
				}

		@media screen and (max-width: 1280px) {

			#header {
				padding: 4em 4em 0.1em 4em ;
			}

				#header.alt {
					padding: 6em 4em 3em 4em ;
				}

		}

		@media screen and (max-width: 980px) {

			#header {
				padding: 4em 3em 0.1em 3em ;
			}

				#header.alt {
					padding: 5em 3em 2em 3em ;
				}

		}

		@media screen and (max-width: 736px) {

			#header {
				padding: 3em 2em 0.1em 2em ;
			}

				#header p {
					font-size: 1em;
					letter-spacing: 0;
				}

					#header p br {
						display: none;
					}

				#header.alt {
					padding: 4em 2em 1em 2em ;
				}

					#header.alt h1 {
						font-size: 2.5em;
					}

		}

		@media screen and (max-width: 480px) {

			#header {
				padding: 3em 1.5em 0.1em 1.5em ;
			}

				#header.alt {
					padding: 4em 1.5em 1em 1.5em ;
				}

		}

		@media screen and (max-width: 360px) {

			#header {
				padding: 2.5em 1em 0.1em 1em ;
			}

				#header.alt {
					padding: 3.5em 1em 0.5em 1em ;
				}

		}

		body.is-preload #header.alt > * {
			opacity: 0;
		}

		body.is-preload #header.alt .logo {
			-moz-transform: scale(0.8) rotate(-30deg);
			-webkit-transform: scale(0.8) rotate(-30deg);
			-ms-transform: scale(0.8) rotate(-30deg);
			transform: scale(0.8) rotate(-30deg);
		}

/* Nav */

	#nav {
		-moz-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		-webkit-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		-ms-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		background-color: #ffffff;
		color: #202020;
		position: absolute;
		width: 64em;
		max-width: calc(100% - 4em);
		padding: 1em;
		background-color: #f7f7f7;
		border-top-left-radius: 0.25em;
		border-top-right-radius: 0.25em;
		cursor: default;
		text-align: center;
	}

		#nav input, #nav select, #nav textarea {
			color: #202020;
		}

		#nav a:hover {
			color: #202020;
		}

		#nav strong, #nav b {
			color: #202020;
		}

		#nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 {
			color: #202020;
		}

		#nav blockquote {
			border-left-color: #dddddd;
		}

		#nav code {
			background: rgba(222, 222, 222, 0.25);
			border-color: #dddddd;
		}

		#nav hr {
			border-bottom-color: #dddddd;
		}

		#nav + #main {
			padding-top: 4.25em;
		}

/* ① 親のul（一階層目）だけにFlexboxを適用する */
#nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
}

/* ② 親のli（一階層目）のスタイル */
#nav > ul > li {
    -moz-transition: margin 0.2s ease;
    -webkit-transition: margin 0.2s ease;
    -ms-transition: margin 0.2s ease;
    transition: margin 0.2s ease;
    display: block; 
    flex: 0 1 auto; 
    margin: 0 0.2em;
    padding: 0;
    vertical-align: middle;
    position: relative; /* 子メニューの基準点にするため追加 */
}
/* ==========================================
   ここから下を追加：子メニュー（ドロップダウン）のバグ修正
   ========================================== */

/* ③ 子メニューのul */
#nav .has-child ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #31b4e5;
    
    /* ─── 修正・追加箇所 ─── */
    width: max-content;   /* 幅を「中の文字が1行で収まる最大幅」にする */
    min-width: 100%;      /* 最低でも親メニューと同じ幅は維持する */
    /* ────────────────────── */
    
    padding: 0.5em 0;
    margin: 0;
    list-style: none;
    z-index: 999;
    border-radius: 4px;
}

/* ④ 親メニューにホバーしたら子メニューを表示する */
#nav .has-child:hover > ul {
    display: block;
}

/* ⑤ 子メニューの中のli */
#nav .has-child ul li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    
    /* ─── 追加箇所 ─── */
    white-space: nowrap;  /* 文字列を絶対に自動折り返しさせない */
    /* ──────────────── */
}

/* ⑥ 子メニューの中のaタグのスタイルリセット */
#nav .has-child ul li a {
    display: block;
    height: auto;
    line-height: 1.4;
    padding: 0.7em 1em;
    color: #ffffff; /* 文字色を白に */
    font-size: 0.85em;
    border-radius: 0;
}

/* 子メニューのリンクホバー時 */
#nav .has-child ul li a:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

				#nav ul li a {
					-moz-transition: font-size 0.2s ease;
					-webkit-transition: font-size 0.2s ease;
					-ms-transition: font-size 0.2s ease;
					transition: font-size 0.2s ease;
					display: inline-block;
					height: 2.25em;
					line-height: 2.25em;
					padding: 0 1em;
					border: 0;
					border-radius: 8px;
					box-shadow: inset 0 0 0 1px transparent;
				}

					#nav ul li a:hover {
						background-color: rgba(222, 222, 222, 0.25);
					}

					#nav ul li a.active {
						background-color: #cdeeff;
						box-shadow: none;
					}

		#nav.alt {
			position: fixed;
			top: 0;
			padding: 0.5em 1em;
			background-color: rgba(247, 247, 247, 0.95);
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			z-index: 2147483645;
		}

			#nav.alt ul li {
				margin: 0 0.175em;
			}

				#nav.alt ul li a {
					font-size: 0.9em;
				}

		@media screen and (max-width: 736px) {

			#nav {
				display: none;
			}

				#nav + #main {
					padding-top: 0;
				}

		}

/* Main */

	#main {
		background-color: transparent;
		color: #202020;
	}

		#main input, #main select, #main textarea {
			color: #202020;
		}

		#main a {
			text-decoration: none;
		}

		#main a:hover {
			color: #202020;
		}

		#main strong, #main b {
			color: #202020;
		}

		#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
			color: #202020;
		}

		#main blockquote {
			border-left-color: #dddddd;
		}

		#main code {
			background: rgba(222, 222, 222, 0.25);
			border-color: #dddddd;
		}

		#main hr {
			border-bottom-color: #dddddd;
		}

		#main .box {
			border-color: #dddddd;
		}

		#main input[type="submit"],
		#main input[type="reset"],
		#main input[type="button"],
		#main button,
		#main .button {
			background-color: transparent;
			box-shadow: inset 0 0 0 1px #dddddd;
			color: #202020 !important;
		}

			#main input[type="submit"]:hover,
			#main input[type="reset"]:hover,
			#main input[type="button"]:hover,
			#main button:hover,
			#main .button:hover {
				background-color: rgba(222, 222, 222, 0.25);
			}

			#main input[type="submit"]:active,
			#main input[type="reset"]:active,
			#main input[type="button"]:active,
			#main button:active,
			#main .button:active {
				background-color: rgba(222, 222, 222, 0.5);
			}

			#main input[type="submit"].icon:before,
			#main input[type="reset"].icon:before,
			#main input[type="button"].icon:before,
			#main button.icon:before,
			#main .button.icon:before {
				color: rgba(99, 99, 99, 0.25);
			}

			#main input[type="submit"].primary,
			#main input[type="reset"].primary,
			#main input[type="button"].primary,
			#main button.primary,
			#main .button.primary {
				background-color: #8cc9f0;
				color: #ffffff !important;
				box-shadow: none;
			}

				#main input[type="submit"].primary:hover,
				#main input[type="reset"].primary:hover,
				#main input[type="button"].primary:hover,
				#main button.primary:hover,
				#main .button.primary:hover {
					background-color: #9acff2;
				}

				#main input[type="submit"].primary:active,
				#main input[type="reset"].primary:active,
				#main input[type="button"].primary:active,
				#main button.primary:active,
				#main .button.primary:active {
					background-color: #7ec3ee;
				}

				#main input[type="submit"].primary.icon:before,
				#main input[type="reset"].primary.icon:before,
				#main input[type="button"].primary.icon:before,
				#main button.primary.icon:before,
				#main .button.primary.icon:before {
					color: #ffffff !important;
				}

		#main label {
			color: #202020;
		}

		#main input[type="text"],
		#main input[type="password"],
		#main input[type="email"],
		#main select,
		#main textarea {
			background-color: rgba(222, 222, 222, 0.25);
			border-color: #dddddd;
		}

			#main input[type="text"]:focus,
			#main input[type="password"]:focus,
			#main input[type="email"]:focus,
			#main select:focus,
			#main textarea:focus {
				border-color: #8cc9f0;
				box-shadow: 0 0 0 1px #8cc9f0;
			}

		#main select {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23dddddd' /%3E%3C/svg%3E");
		}

			#main select option {
				color: #202020;
				background: #ffffff;
			}

		#main input[type="checkbox"] + label,
		#main input[type="radio"] + label {
			color: #202020;
		}

			#main input[type="checkbox"] + label:before,
			#main input[type="radio"] + label:before {
				background: rgba(222, 222, 222, 0.25);
				border-color: #dddddd;
			}

		#main input[type="checkbox"]:checked + label:before,
		#main input[type="radio"]:checked + label:before {
			background-color: #202020;
			border-color: #202020;
			color: #ffffff;
		}

		#main input[type="checkbox"]:focus + label:before,
		#main input[type="radio"]:focus + label:before {
			border-color: #8cc9f0;
			box-shadow: 0 0 0 1px #8cc9f0;
		}

		#main ::-webkit-input-placeholder {
			color: rgba(99, 99, 99, 0.25) !important;
		}

		#main :-moz-placeholder {
			color: rgba(99, 99, 99, 0.25) !important;
		}

		#main ::-moz-placeholder {
			color: rgba(99, 99, 99, 0.25) !important;
		}

		#main :-ms-input-placeholder {
			color: rgba(99, 99, 99, 0.25) !important;
		}

		#main .formerize-placeholder {
			color: rgba(99, 99, 99, 0.25) !important;
		}

		#main .icon.major {
			border-color: #dddddd;
		}

			#main .icon.major:before {
				border-color: #dddddd;
			}

		#main .icon.alt {
			border-color: #dddddd;
			color: #202020;
		}

			#main .icon.alt:hover {
				background-color: rgba(222, 222, 222, 0.25);
			}

			#main .icon.alt:active {
				background-color: rgba(222, 222, 222, 0.5);
			}

		#main ul.alt li {
			border-top-color: #dddddd;
		}

		#main dl dt {
			color: #202020;
		}

		#main header.major h2:after {
			background-color: #dddddd;
			background-image: -moz-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
			background-image: -webkit-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
			background-image: -ms-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
			background-image: linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
		}

		#main table tbody tr {
			border-color: #dddddd;
		}

			#main table tbody tr:nth-child(2n + 1) {
				background-color: rgba(222, 222, 222, 0.25);
			}

		#main table th {
			color: #202020;
		}

		#main table thead {
			border-bottom-color: #dddddd;
		}

		#main table tfoot {
			border-top-color: #dddddd;
		}

		#main table.alt tbody tr td {
			border-color: #dddddd;
		}

		#main .spotlight .image {
			border-color: #dddddd;
		}

		#main > .main {
			padding: 5em 5em 3em 5em ;
			border-top: solid 1px #dddddd;
			z-index:1;
		}

			#main > .main:first-child {
				border-top: 0;
			}

			#main > .main > .image.main:first-child {
				margin: -5em 0 5em -5em;
				width: calc(100% + 10em);
				border-top-right-radius: 0.25em;
				border-top-left-radius: 0.25em;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}

				#main > .main > .image.main:first-child img {
					border-top-right-radius: 0.25em;
					border-top-left-radius: 0.25em;
					border-bottom-right-radius: 0;
					border-bottom-left-radius: 0;
				}

		@media screen and (max-width: 1280px) {

			#main > .main {
				padding: 2em 2em 2em 2em ;
			}

				#main > .main > .image.main:first-child {
					margin: -4em 0 4em -4em;
					width: calc(100% + 8em);
				}

		}

		@media screen and (max-width: 980px) {

			#main > .main {
				padding: 2em 2em 2em 2em ;
			}

				#main > .main > .image.main:first-child {
					margin: -4em 0 4em -3em;
					width: calc(100% + 6em);
				}

		}

		@media screen and (max-width: 736px) {

			#main > .main {
				padding: 2em 1em 1em 1em ;
			}

				#main > .main > .image.main:first-child {
					margin: -3em 0 2em -2em;
					width: calc(100% + 4em);
				}

		}

		@media screen and (max-width: 480px) {
    		html, body {
        		overflow-x: hidden !important;
    		}
    		#main > .main {
    		    padding: 0.5em 1em 1em 1em ;
    		}
    		#main > .main > .image.main:first-child {
    		    margin: -3em -1.5em 1.5em -1.5em;
    		    width: calc(100% + 3.0em) !important;  
    		    max-width: calc(100% + 3.0em) !important;
    		    display: block !important;
    		}
    		#main > .main > .image.main:first-child img {
    		    width: 100% !important;
    		    height: auto !important;
    		    object-fit: cover !important;
    		}
		}

		@media screen and (max-width: 360px) {

			#main {
				border-radius: 0;
			}

				#main > .main {
					padding: 0.2em 0.5em 0.5em 0.5em ;
				}

					#main > .main > .image.main:first-child {
						margin: -2.5em 0 1.5em -1em;
						width: calc(100% + 2em);
						border-radius: 0;
					}

						#main > .main > .image.main:first-child img {
							border-radius: 0;
						}

		}

/* Footer */

	#footer {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 5em 5em 3em 5em ;
		width: calc(100% + 2em);
		margin: 0 0 3em -2em;
	}

		#footer > * {
			width: calc(50% - 2em);
			margin-left: 2em;
		}

		#footer .copyright {
			width: 100%;
			margin: 2.5em 0 2em 0;
			font-size: 0.8em;
			text-align: center;
		}

		@media screen and (max-width: 1280px) {

			#footer {
				padding: 4em 4em 2em 4em ;
			}

		}

		@media screen and (max-width: 980px) {

			#footer {
				padding: 4em 3em 2em 3em ;
				display: block;
				margin: 0 0 3em 0;
				width: 100%;
			}

				#footer > * {
					width: 100%;
					margin-left: 0;
					margin-bottom: 3em;
				}

				#footer .copyright {
					text-align: left;
				}

		}

		@media screen and (max-width: 736px) {

			#footer {
				padding: 3em 2em 1em 2em ;
			}

		}

		@media screen and (max-width: 480px) {

			#footer {
				padding: 3em 1.5em 1em 1.5em ;
			}

		}

		@media screen and (max-width: 480px) {

			#footer {
				padding: 2.5em 1em 0.5em 1em ;
			}

		}

/* Wrapper */

	#wrapper {
		width: 64em;
		max-width: calc(100% - 4em);
		margin: 0 auto;
	}

		@media screen and (max-width: 480px) {

			#wrapper {
				max-width: calc(100% - 2em);
			}

		}

		@media screen and (max-width: 360px) {

			#wrapper {
				max-width: 100%;
			}
		}
		.box11{
			padding: 0.5em 1em;
			margin-bottom:2em;
			color: #000000;
			background: rgba(0, 85, 176, 0.128);
			border-top: solid 5px #2589d0;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
			text-align: center;
		}
		.box11 p {
			margin: 0; 
			padding: 0;
		}
		.box12{
			padding: 0.5em 1em;
			margin-bottom:2em;
			color: #000000;
			background: rgba(255, 0, 0, 0.14);
			border-top: solid 5px #b20000;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
			text-align: center;
		}
		.box12 p {
			margin: 0; 
			padding: 0;
		}
		.box13{
			padding: 0.5em 1em;
			margin-bottom:2em;
			color: #000000;
			background: rgba(0, 152, 10, 0.096);
			border-top: solid 5px #078d00;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
			text-align: center;
		}
		.box13 p {
			margin: 0; 
			padding: 0;
		}
		.box14{
			padding: 0.5em 1em;
			margin-bottom:2em;
			color: #000000;
			background: rgba(255, 247, 0, 0.096);
			border-top: solid 5px #ff9900;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
			text-align: center;
		}
		.box14 p {
			margin: 0; 
			padding: 0;
		}
		.box15{
			padding: 0.5em 1em;
			margin-bottom:2em;
			color: #000000;
			background: rgba(0, 85, 176, 0.128);
			border-top: solid 5px #2589d0;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
			text-align: left;
		}
		.cp_h1title{
			position: relative;
			padding: .3em;
			font-weight: 700;
			z-index:1;
		}
		.cp_h1title:after {
			content: "";
			height: 4px;
			background: linear-gradient(to right, #006cd2, #5f4d93,#fff700);
			display:inline-block;
			z-index:1;
		}

		.midashi{
			width:10%;
			height:auto;
		}
		@media screen and (max-width: 980px) {
			.midashi {
				width:20%;
			}
		}
		@media screen and (max-width: 736px) {
			.midashi {
				width:20%;
			}
		}

		.midashi-logo{
			width:20%;
			height:auto;
		}
		@media screen and (max-width: 980px) {
			.midashi-logo {
				width:30%;
			}
		}
		@media screen and (max-width: 736px) {
			.midashi-logo {
				width:30%;
			}
		}

		.midashi2{
			width:20%;
			height:auto;
		}
		@media screen and (max-width: 980px) {
			.midashi2 {
				width:30%;
			}
		}
		@media screen and (max-width: 360px) {
			.midashi2 {
				width:40%;
			}
		}
		.midashi-line {
  color: black;
  display: table; /* 要素の幅を文字の長さ分にする */
  margin-right: auto; /* 左右の余白を自動調整して中央に寄せる */
  margin-left: auto;
  background: linear-gradient(transparent 60%, #ffff00 60%);
  margin-bottom:2em;
}
@media screen and (max-width: 736px) {
	.midashi-line {
		font-size:100% !important;
	}
}

		.midashi-line-left {
  color: black;
  display: table; /* 要素の幅を文字の長さ分にする */
  margin-right: auto; /* 左右の余白を自動調整して中央に寄せる */
  margin-left: 0;
  background: linear-gradient(transparent 60%, #ffff00 60%);
}

@media screen and (max-width: 736px) {
	.midashi-line-left {
		font-size:85% !important;
	}
}

		.responsive{
			width:100%;
			height:auto;
		}

		.board10{
			padding-left: 23%;
		  }
		@media screen and (max-width: 980px) {
			.board10{
				padding-left: 10px;
			  }
		}
		.box {
			background-color: rgb(27, 27, 27);
			padding:0.5em 0.5em !important;
			color:white;
			text-align: center;
			font-weight: bold;
			border: 0;
			margin-bottom: 50px;
			
		  }
		  .my-example {
			color: white
		}
		.list {
			list-style-type: none;
		  }
		.flow {
			border: 3px solid rgb(0, 127, 238);
		  }
		  .flow > li {
			padding: 30px;
		  }
		  .flow > li:not(:last-child) {
			border-bottom: 3px solid rgb(0, 127, 238);
			position: relative;
			margin-left:-4%;
		  }
		  @media screen and (max-width: 560px) {
			.flow > li:not(:last-child) {
				margin-left:-6%;
			}
		}
		  .flow > li:not(:last-child)::before,
		  .flow > li:not(:last-child)::after {
			content: "";
			border: solid transparent;
			position: absolute;
			top: 100%;
			left: 20%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
		  }
		  .flow > li:not(:last-child)::before {
			border-width: 22px;
			border-top-color: rgb(47, 103, 255);
		  }
		  .flow > li:not(:last-child)::after {
			border-width: 18px;
			border-top-color: #fff;
		  }
		  .flow > li dl {
			margin: 0;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		  }
		  .flow > li dl dt {
			font-size: 12px;
			font-weight: 600;
			color: rgb(47, 103, 255);
			-ms-flex-preferred-size: 20%;
			flex-basis: 50%;
			margin-right: 1vw;
			text-align: center;
		  }
		  .flow > li dl dt .icon {
			font-size: 10px;
			font-weight:bold;
			color: #fff;
			background: rgb(0, 94, 255);
			background: -moz-linear-gradient(left, rgb(8, 164, 255) 0%, rgb(0, 122, 192) 100%);
			background: -webkit-linear-gradient(left, rgb(8, 164, 255) 0%, rgb(0, 122, 192) 100%);
			background: linear-gradient(to right, rgb(8, 164, 255) 0%, rgb(0, 122, 192) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
			padding: 5px 10px;
			margin-bottom: 10px;
			display: block;
			border-radius: 20px;
		  }
		  .flow > li dl dd {
			font-size: 10px;
			color: black;
			-ms-flex-preferred-size: 80%;
			flex-basis: 100%;
			margin-right: 1vw;
			text-align: left;
		  }

/*team section css*/
.team{}
.team .head_title{
    color:#223d61;
}
.team .single_team{}
.team .single_item{
    position: relative;
    max-width: 100%;
    margin-bottom:30px;
}
.team .single_item img{
    max-width: 100%;
}
.team .single_item:hover .single_team_overlay{
    opacity: 1; 
}

.team .single_item .single_team_overlay{
    background: rgba(255, 0, 247, 0.592);
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    text-align: center;
    padding: 50px 0px 10px 0px;
    transition: .6s;
    opacity: 0;
}
.team .single_item .single_team_overlay h4{
    color:#fff;
    text-transform: uppercase;
}
.team .single_item .single_team_overlay p{
    color:#fff;
    text-transform: uppercase;
}
.team .single_item .single_team_overlay .team_socail{
    margin-top:50px;
}

.team .single_item .single_team_overlay .team_socail a i{
    color:#fff;
    font-size:1.5rem;
    padding: 0px 5px;
}


 /*ポップアップここから*/
 .popup_wrap input {
    position: relative;
    display: none;
  }
  
  .popup_overlay {
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.5s;
    transform: scale(0);
  }
  
  .popup_trigger {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .popup_content {
    position: relative;
    align-self: center;
    width: 90%;
    max-width: 70%;
	height:80%;
    padding: 30px 30px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.2em;
    transition: 0.5s;
	overflow: auto; 
	top:2em;
  }
  
  .close_btn {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 30px;
    cursor: pointer;
  }
  
  .popup_wrap input:checked ~ .popup_overlay {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s;
  }
  
  .open_btn {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 30px;
    margin:10px auto;
    padding: 8px 16px;
    color: #fff;
    background:#0c0d62;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    cursor: pointer;
    transition: .3s ease;
  
  }
  .open_btn:hover{
      background:#000;
      color:#fff;
      transition: .3s ease;
  }
  /*ポップアップココまで*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.rider-prof{
	font-size: 0.7em !important;
	line-height:1.4em !important;
	letter-spacing: 0.1em;
}
.picture::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
  	transition: all 0.3s;
  }
  .photo-gallery{
	width:100%;
	height:auto;
	min-height: 200px;
	max-height:200px;
	align-self: flex-start; /* 追加 */
  }
  @media only screen and (max-width: 736px) {
	.photo-gallery{
	min-height: 120px;
	max-height:120px;
	}
}
  a .noneline{
	border-bottom: 0px transparent !important;
  }

/* --------------------------------------------------------------------------
1. 共通設定（すべてのバナーを画面に固定して浮かせるベース設定）
-------------------------------------------------------------------------- */
.scrollup-container {
position: fixed !important;
z-index: 2147483647 !important;
}

/* バナー画像共通のホバー（マウスをのせたとき）調整 */
.scrollup-container img {
width: 100% !important;
height: auto !important;
opacity: 1 !important;
cursor: pointer !important;
display: block !important;
transition: opacity .5s !important;
}

.scrollup-container img:hover {
opacity: .8 !important;
}

/* ×ボタンの共通スタイル */
.close-btn {
position: absolute !important;
top: -10px !important;
right: -5px !important;
width: 24px !important;
height: 24px !important;
background-color: #333 !important;
color: #fff !important;
border-radius: 50% !important;
text-align: center !important;
line-height: 22px !important;
font-size: 18px !important;
font-family: sans-serif !important;
cursor: pointer !important;
z-index: 2147483648 !important;
transition: background-color 0.3s !important;
}

.close-btn:hover {
background-color: #555 !important;
}

/* 改行・テキストリンク等の微調整 */
.br-pc { display: inline; }
.br-sp { display: block; }
@media screen and (min-width: 768px) {
.br-sp { display: none; }
}

/* リンクのブロック化 */
.banner-link-block {
display: block !important;
position: relative !important;
width: 100% !important;
height: auto !important;
}

/* JavaScriptで×ボタンが押されたときの非表示設定 */
.scrollup-container.is-closed {
display: none !important;
}

/* ─── 📌 各PC用バナーの固有位置設定（左右の指定席へ配置） ─── */
/* 右下：青いBSACバナー */
.my-unique-bsac-banner {
display: block !important;
width: 11% !important;
bottom: 5px !important;
right: 5px !important;
}
/* 右上：パンフレットバナー */
.container-banner2 {
display: block !important;
width: 11% !important;
bottom: 365px !important;
right: 5px !important;
}
/* 左下：よしまるバナー */
.container-banner5 {
display: block !important;
width: 11% !important;
bottom: 5px !important;
left: 5px !important;
}

/* ==========================================================================
【PC画面専用】自作スライダー配置 ＆ コントロール（等倍クッキリ・スッキリ版）
========================================================================== */
/* 🎯【横移動大復活】PC画面でもスクリプトの「滑らかな動き」を最優先で許可します */
.slider-wrapper { 
    transition: none !important; 
}
.slider-wrapper.smooth-move { 
    /* 💡 smooth-moveクラスがついた瞬間は、noneをへし折って0.6秒のぬるっと移動を強制適用！ */
    transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; 
}

.main-visual-slider {
position: relative !important;
background: #ffffff !important;
/* 画面の左端から右端まで全幅の舞台を用意 */
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: -5em !important;
margin-bottom: 3em !important;
overflow: visible !important; /* 下のナビゲーション群をはみ出して表示するために必須 */
}
/* 画像を表示する枠 */
.slider-container {
position: relative !important;
width: 100% !important;
overflow: visible !important;
/* 画像の下に、コントロールが綺麗に収まる広めの余白を事前に確保 */
margin-bottom: 75px !important;
}
/* 画像を横一列に並べる滑走路 */
.slider-wrapper {
display: flex !important;
width: 100% !important;
}
/* 🎯【修正】すべての画像がセンターと同じ大きさ ＆ 白マスク完全撤廃 */
.my-slide {
position: relative !important;
flex: 0 0 55% !important;
width: 55% !important;
margin: 0 8px !important;
box-sizing: border-box !important;
opacity: 1 !important; /* 👈 【ご要望】白マスクを完全撤廃（100%クッキリ） */
transform: scale(1) !important; /* 👈 【ご要望】センターと同じ大きさ（等倍）に統一 */
transition: all 0.6s ease !important;
}
/* 真ん中に来ているアクティブな画像（記述は残しますが、上記と等倍で統一されます） */
.my-slide.active {
opacity: 1 !important;
transform: scale(1) !important;
}
/* 画像の縦横比を「16:9」に固定 */
.my-slide::before {
content: "" !important;
display: block !important;
padding-top: 56.25% !important;
}
.my-slide img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 20px !important;
}
/* 🎯 左右の矢印ボタン（余計な擬似要素をなくし、背景として100%センター固定） */
.custom-arrow {
position: absolute !important;
top: calc(100% + 15px) !important; /* 画像のすぐ下に回り込ませる */
bottom: auto !important;
background-color: #00a0ea !important; /* スクショに合わせた鮮やかな青（水色）の丸背景 */
border: none !important;
cursor: pointer !important;
z-index: 99999 !important;
outline: none !important;
transition: all 0.3s ease !important;
/* 縦横を36pxに完全固定 */
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
border-radius: 50% !important; /* 100%綺麗な正円にする */
box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
/* 元々入っていた文字や余白を完全に消去 */
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0 !important;
}
/* 🎯 左矢印（‹）：背景画像の配置機能で「真ん中」を指定 */
.prev-arrow {
background: #00a0ea url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center center !important;
background-size: 14px 14px !important; /* 矢印のサイズ */
/* 配置 */
left: 50% !important;
margin-left: -160px !important; /* 中央から左に160px離した位置 */
right: auto !important;
}
/* 🎯 右矢印（›）：背景画像の配置機能で「真ん中」を指定 */
.next-arrow {
background: #00a0ea url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center center !important;
background-size: 14px 14px !important; /* 矢印のサイズ */
/* 配置 */
left: 50% !important;
margin-left: 124px !important; /* 右側もジャスト160px対称の位置（車幅36px計算済） */
right: auto !important;
}
/* 🎯 もし以前のコードの `::after` が残っていたら悪さをするので完全に消去 */
.prev-arrow::after,
.next-arrow::after {
display: none !important;
content: none !important;
}
/* ボタンホバー演出 */
.custom-arrow:hover {
background-color: #008cd1 !important;
opacity: 1 !important;
}
/* 🎯 ドット（◯ ◯ ◯）の位置設定 */
.custom-bullets {
position: absolute !important;
top: calc(100% + 28px) !important; /* 矢印ボタンの中心と完全に揃う高さ */
bottom: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
gap: 12px !important; /* ドット同士の間隔をタイトにして上品に */
z-index: 99999 !important;
}
/* 🎯【グレーのドット（非アクティブ） ＆ アクティブ連動】 */
.bullet-dot {
width: 10px !important;
height: 10px !important;
border: none !important; /* 枠線を消して、スクショ通りの「塗りつぶし丸」に */
border-radius: 50% !important;
background: #e0e0e0 !important; /* 選択されていない時はオシャレな「ライトグレー」 */
cursor: pointer !important;
display: inline-block !important; /* PCでも強制表示 */
transition: all 0.3s ease !important;
}
/* 現在表示されている画像（アクティブ）のドット */
.bullet-dot.active {
background: #00a0ea !important; /* 選択中のドットだけが鮮やかな「青（水色）」に点灯！ */
}
/* ==========================================================================
古い「PCでナビを非表示にする設定」の上書き解除
========================================================================== */
@media screen and (min-width: 737px) {
.custom-arrow,
.custom-bullets {
display: flex !important;
}
.custom-arrow {
display: inline-block !important;
}
}
/* --------------------------------------------------------------------------
3. 🖥️【PC・タブレット大画面用（画面幅 737px 以上）】の制御
-------------------------------------------------------------------------- */
@media screen and (min-width: 737px) {
/* 🎯【最重要】スマホ用のバナーや枠組みを、PC画面では完全に「消滅」させる */
.screensize_sp,
.container-banner4 {
display: none !important;
}
/* スマホ用の白バーヘッダーも非表示 */
.header2 {
display: none !important;
}

/* ==========================================================================
   💻 【PC専用】ナビバーを画面いっぱいに広げ、左ロゴ・右メニューにする（完全独立版）
   ========================================================================== */

/* 1. #navをwrapperから完全に独立させ、ブラウザの画面最左端から最右端まで100%広げて固定する */
#nav {
    display: block !important;
    position: fixed !important;       /* 🎯 画面に対して固定（wrapperの幅制限を突き破る） */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;          /* 🎯 画面の横幅100%ぴったりに広げる */
    max-width: 100vw !important;
    height: auto !important;
    min-height: 50px !important;
    background: #f6f6f6 !important;   /* ナビバーの背景色（薄いグレー） */
    z-index: 999999 !important;       /* 一番手前に表示 */
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* 高級感を出す薄い影（お好みで） */
}

/* 2. 中身のコンテナ（左右の両端に強制的に泣き別れさせる） */
#nav .nav_inner {
    display: flex !important;
    flex-direction: row !important;   
    align-items: center !important;   
    justify-content: space-between !important; /* 🎯 左端と右端に限界まで引き離す */
    
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0 10px !important;       
    box-sizing: border-box !important;
	padding: 10px 10px !important;
}

/* 3. 右側にいくメニューの塊（ul）の設定を上書き */
#nav .nav_inner > ul {
    display: flex !important;
    flex-direction: row !important;   
    align-items: center !important;
    justify-content: flex-end !important; /* メニュー内の文字を右寄せに */
    
    /* 🎯 追加：メニューの箱自体を右側の残りのスペースいっぱいに広げ、左側にあるロゴを強制的に左端へ押し出す */
    flex-grow: 1 !important;              
    
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 4. 左側のロゴブロックの設定 */
.pc_nav_logo {
    display: block !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
	margin-top: 10px !important;
}

.pc_nav_logo a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
    height: 100% !important;
}

.pc_nav_logo img {
    height: 32px !important;          /* ロゴの高さ */
    width: auto !important;
    margin: 0 10px 0 0 !important;    /* ロゴと文字の間のすき間 */
    padding: 0 !important;
    display: block !important;
}

/* 5. PCロゴ用のテキストデザイン */
.pc_logo_text {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333333 !important;        /* 濃いグレー */
    font-family: sans-serif !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
}
}
/* --------------------------------------------------------------------------
4. 📱【スマホ専用スタイル（画面幅 736px 以下）】
-------------------------------------------------------------------------- */
@media screen and (max-width: 736px) {
/* ─── ① PC専用バナーの非表示 ─── */
.my-unique-bsac-banner,
.container-banner2,
.container-banner5,
.screensize_pc {
display: none !important;
}
/* ─── ② スマホ用バナー (container-banner4) ★画面最下部に完全固定★ ─── */
html body .screensize_sp .scrollup-container.container-banner4 {
position: fixed !important;
bottom: 0 !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
z-index: 2147483646 !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
html body .screensize_sp .scrollup-container.container-banner4 .banner-link-block {
display: block !important;
width: 100% !important;
margin-top: 2px !important;
}
html body .screensize_sp .scrollup-container.container-banner4 img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* ─── ③ スマホ用上部固定ヘッダー（ロゴ＆ハンバーガーの白い横バー） ─── */
.header2 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 60px !important;
    background: #ffffff !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}
.header_logo {
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
}

/* 🎯 ここから下をテキスト横並び用に書き換えています */
.header_logo a {
    border-bottom: none !important;
    display: inline-flex !important; /* 👈 横並びにして、上下の真ん中を揃える */
    align-items: center !important;
    height: 100% !important;
    text-decoration: none !important;
}
.header_logo img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 8px 0 0 !important;    /* 👈 ロゴの右側にだけ8pxのすき間を作る */
    padding: 0 !important;
}

/* 🎯 新しく追加した「Kaiteishounen.com」の文字の見た目 */
.logo_text {
    font-size: 14px !important;       /* 文字の大きさ（はみ出る場合は12px〜13pxに） */
    font-weight: bold !important;     /* 太字 */
    color: #333333 !important;        /* 文字の色（黒・濃いグレー） */
    font-family: sans-serif !important;
    letter-spacing: 0.05em !important; /* 文字の間隔 */
    white-space: nowrap !important;   /* 文字が途中で改行されるのを絶対に防ぐ */
}
/* ─── ④ ハンバーガーメニューボタンのカスタム ─── */
.hamburger {
position: absolute !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
z-index: 2147483648 !important;
background: transparent !important;
border-radius: 0 !important;
width: 50px !important;
height: 50px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.hamburger_border {
background-color: #00a0ea !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 24px !important;
height: 2px !important;
}
.hamburger_text {
    position: absolute !important;
    bottom: 6px !important;        /* 👈 ボタン枠内の下からの位置 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    text-align: center !important;
    
    font-size: 10px !important;     /* 👈 文字の大きさ（好みに合わせて11px等に調整してください） */
    font-weight: bold !important;
    color: #00a0ea !important;      /* 三本線と同じ「海底少年カラーの青」にしています */
    line-height: 1 !important;
    font-family: sans-serif !important;
}
/* ─── ⑤ 黒いナビバー ─── */
#wrapper > #nav,
body #nav,
body.is-nav-sticky #nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -2.5em !important;
margin-right: -2.5em !important;
right: 0 !important;
padding: 0 !important;
z-index: 999999 !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}
/* ─── ⑥ 固定ヘッダー・ナビ化に伴う「隙間・余白」調整 ─── */
#wrapper {
padding-top: 60px !important;
}
body #main {
margin-top: 44px !important;
padding-top: 0.5em !important;
position: relative !important;
}
/* ─── ⑦ ポリシーセクションの丸い黒ロゴを強制非表示 ─── */
html body #intro .spotlight > img,
html body #intro .spotlight img[src*="kaitei_shonen.svg"] {
display: none !important;
}
/* ==========================================================================
★ここから最新追記★ 【スマホ専用】スライダーの白い余白 ＆ 被りバグ完全修正
========================================================================== */
.slider-wrapper { transition: none !important; }
.slider-wrapper.smooth-move { transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }

/* 🎯 テーマの余計な線を完全抹消（キープ） */
.main-visual-slider,
.main-visual-slider *,
section.main-visual-slider,
#main > section,
#main > section::before,
#main > section::after {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 滑走路の土台（キープ） */
.slider-container, 
.slider-wrapper {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: #ffffff !important; 
    box-shadow: none !important;
}

/* スライド単体の設定（キープ） */
.my-slide, .my-slide a, .my-slide img {
    border: none !important; 
    border-top: none !important;
    border-bottom: none !important; 
    box-shadow: none !important; 
    outline: none !important;
    background: transparent !important;
}

/* ==========================================================================
   📱 【新・決定版】スマホ画面（736px以下）自作スクリプト最適化
   ========================================================================== */
@media screen and (max-width: 736px) {

    /* 🎯 1. 【超重要】自作JSの計算（100%）を絶対に壊さないまま、
       CSSの魔法で「見た目だけ」を画面の本当の左右の端まで強制拡張します！ */
    .main-visual-slider {
        /* 💡 画面の横幅いっぱい(100vw)にしつつ、中央に強制配置することで、
           テーマが持っている左右のどんな余白（padding）も一撃で無視して突き破ります */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        
        margin-top: -30px !important;    
        margin-bottom: -50px !important; 
        
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important; 
    }

    /* 🎯 2. スライドが通る滑走路：ここも100vwに連動させます */
    .slider-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; 
        overflow: hidden !important; /* 横揺れ完全ガード */
        border-radius: 0px !important; 
    }

    /* 🎯 3. スライド1枚の横幅 */
    .my-slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: auto !important; 
        margin: 0 !important;
    }
    .my-slide::before {
        display: none !important;
    }

    /* 🎯 4. 画像：これで左右の隙間が100%消滅し、完璧な全幅スクエアになります */
    .my-slide img {
        position: relative !important;
        top: 30px !important;             
        left: 0 !important;
        
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; 
        aspect-ratio: 1 / 1 !important; /* 完璧な正方形 */
        
        /* 💡 左右が切れないように、綺麗にフィットさせます */
        object-fit: cover !important;
        border-radius: 0px !important;
    }

    /* 🎯 5. 左右の矢印ボタン（過去の競合を完全に排除して固定） */
    .custom-arrow {
        /* 💡 【超重要】上での relative 指定を完全に打ち消し、
           100% absolute（絶対配置）として完全に主導権を握ります */
        position: absolute !important; 
        
        /* 💡 ここでお好きな高さに完全にコントロールできるようになりました！ */
        bottom: 15px !important;        
        top: auto !important; /* 上での top: auto もここで上書きして上線を切ります */
        
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: #00a0ea !important;  
        color: #ffffff !important;
        border-radius: 50% !important;
        font-size: 24px !important;
        z-index: 99999 !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 矢印の間隔調整（ユーザーさんの完璧な黄金比をそのままキープ！） */
    .prev-arrow {
        left: calc(50% - 170px) !important;
        right: auto !important;
    }
    .next-arrow {
        left: calc(50% + 135px) !important;
        right: auto !important;
    }

    /* 🎯 6. ドット（◯ ◯ ◯）：100vwの画面のど真ん中に固定 */
    .custom-bullets {
        position: absolute !important;
        bottom: 28px !important; /* 矢印とのバランスを見て綺麗に連動 */
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        
        display: flex !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        z-index: 99998 !important;
        transform: none !important;
    }

    /* 丸ポチの形状 */
    .bullet-dot {
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        margin: 0 5px !important;
        background-color: #cccccc !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }
    .bullet-dot.active {
        background-color: #00a0ea !important;
    }
}
/* ==========================================================================
   🚨 【最優先・復元】PCナビのドロップダウンメニュー縦並び修正コード
   ========================================================================== */

/* 1. マウスオンで出てくる2階層目・3階層目のulは、絶対に横並び（flex）にさせない */
#nav ul ul,
#nav li.has-child ul,
#nav li.has-child ul li ul {
    display: block !important;        /* 👈 横並びを完全に解除し、縦並び(block)を強制 */
    width: 320px !important;         /* 👈 メニューの横幅（文字がはみ出さないサイズ） */
    position: absolute !important;    /* 位置を浮かせる */
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    background: #28BFE7 !important;   /* 海底少年カラーの青（必要に応じて元の色に） */
    padding: 10px 0 !important;
    list-style: none !important;
}

/* 2. 子メニューの中にある「li（項目）」も絶対に縦に並べる */
#nav ul ul li {
    display: block !important;        /* 確実に縦一列に並べる */
    width: 100% !important;
    text-align: left !important;      /* 文字を左寄せに */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. 親メニュー（li）にマウスオン（hover）した時だけ、縦並びのまま表示する */
#nav li.has-child:hover > ul,
#nav li.has-child:active > ul {
    display: block !important;        /* マウスが乗ったら確実に縦並びで表示 */
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. メニューの中のリンク（aタグ）の文字が横に広がらないようにガード */
#nav ul ul li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 20px !important;    /* 上下左右の余白 */
    white-space: normal !important;   /* 文字の長い項目が枠外に突き抜けるのを防ぐ */
    color: #ffffff !important;         /* 文字色（白） */
    text-decoration: none !important;
}
}
/* Contact Form 7 の送信ボタンを強制的に中央に寄せる */
.wpcf7-form input[type="submit"].primary {
    display: block !important;
    margin: 0 auto !important;
    float: none !important;
}

/* もしボタンを囲む枠が邪魔をしている場合の保険 */
.wpcf7-submit-wrapper {
    text-align: center !important;
    display: block !important;
}
/*reCAPTCHAのバッジを非表示に*/

.grecaptcha-badge { 
   visibility: hidden; 
}
/* Contact Form 7 のチェックボックスを強制表示 */
/* チェックボックス本体の位置と余白を修正 */
.wpcf7-form input[type="checkbox"] {
    display: inline-block !important;
    opacity: 1 !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 16px !important;         /* サイズを固定 */
    height: 16px !important;
    position: relative !important;  /* 重なりを解除 */
    top: 2px !important;            /* 文字の高さに合わせる調整 */
    margin: 0 6px 0 0 !important;   /* 右側にだけ6pxの隙間を作る */
    float: none !important;
}

/* 選択肢（ない・ある）全体の重なりを防ぐ */
.wpcf7-form .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 20px !important;  /* 「ない」と「ある」の間の隙間 */
}

/* ラベルタグの重なりを解除 */
.wpcf7-form .wpcf7-list-item label {
    display: inline-flex !important;
    align-items: center !important;
}

/* ▽ 受講の流れ（回り込みレイアウト版） ▽ */
.flow-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 1.5em;
    margin-bottom: 2em;
}

.flow-step {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 6px;
    box-sizing: border-box;
}

/* 1. ヘッダー */
.flow-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #e0e0e0;
    padding-bottom: 8px;
}
.flow-step-num {
    background: #0073aa;
    color: #fff;
    padding: 3px 8px;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 3px;
}
.flow-step-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* 2. 回り込み制御用（Flexを解除） */
.flow-step-content {
    display: block; 
    overflow: hidden; /* floatした要素を親要素内に留める */
}

/* 3. 画像の回り込み（ここが重要！） */
.flow-step-img {
    float: right;            /* 右側に浮かせる */
    width: 50%;              /* 全体の50%幅 */
    margin: 0 0 15px 20px;   /* 左と下に余白 */
    max-width: 250px;        /* 画像の大きさ上限 */
}
/* ▽ 画像本体の修正（ここを書き換えます） ▽ */
.flow-step-img img {
    width: 100%;        /* 親ボックス(flow-step-img)の幅いっぱいに広げる */
    height: 100%;       /* 高さを親ボックスと合わせる（正方形の維持に必要） */
    object-fit: cover;  /* 画像の縦横比を維持しつつ、はみ出た部分をトリミングして枠に収める */
    aspect-ratio: 1 / 1; /* 強制的に正方形の比率にする（object-fitとセットで機能します） */
    border-radius: 4px; /* 角丸 */
    display: block;     /* 隙間対策 */
}

/* 4. テキスト */
.flow-step-text-wrap {
    display: block;
}
.flow-step-text {
    font-size: 0.85em;
    line-height: 1.6;
    margin: 0;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .flow-container { grid-template-columns: 1fr; }
}

@media screen and (max-width: 480px) {
    .flow-step-img {
        float: none;         /* 回り込みを解除 */
        width: 100%;
        margin: 0 0 15px 0;
        max-width: 100%;
    }
}

/* ==========================================================================
   完全に新しく作り直したPC用2段ナビバー
   ========================================================================== */

/* ① ナビバー全体の指定を修正 */
#custom-pc-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;   /* 強制的に画面の横幅100%にする */
    max-width: 100% !important; /* 元のテーマのmax-width制限を打ち消す */
    background-color: rgba(255, 255, 255, 0.98); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999999;
    padding: 10px 0;
    font-family: 'Sawarabi Gothic', sans-serif;
}

/* ② 内側のコンテナの指定を修正 */
#custom-pc-nav .nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 95%; /* 💡ここを100%にするか、95%〜98%にして少しだけ端に遊びを持たせるのがオススメです */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; /* パディングが横幅を突き破らないように保険 */
}

/* ロゴエリア */
#custom-pc-nav .nav_logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}
#custom-pc-nav .nav_logo img {
    height: 80px; /* ロゴの大きさに合わせて調整 */
    width: auto;
}
#custom-pc-nav .logo_text {
    font-weight: bold;
    color: #202020;
    font-size: 1.7rem;
}

/* 右側ブロック（縦に2段並べる） */
#custom-pc-nav .nav_right_content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* ───────────────────────────────────
   【上段】コンタクトバー
   ─────────────────────────────────── */
#custom-pc-nav .nav_contact_bar {
    display: flex;
    align-items: center;
    gap: 20px;
}

#custom-pc-nav .contact_phone a {
    font-size: 0.9rem;
    font-weight: bold;
    color: #202020;
    text-decoration: none;
}

#custom-pc-nav .contact_action_buttons {
    display: flex;
    gap: 10px;
}

/* 上段ボタンの共通設定 */
#custom-pc-nav .contact_action_buttons a {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
    line-height: 1.4;
}

/* 資料請求ボタン（白背景に青枠） */
#custom-pc-nav .btn_item_pamphlet {
    background-color: #ffffff;
    color: #31b4e5;
    border: 1px solid #31b4e5;
}
#custom-pc-nav .btn_item_pamphlet:hover {
    background-color: #f0fafd;
}

/* お問い合わせ・予約ボタン（目立つピンク） */
#custom-pc-nav .btn_item_reserve {
    background-color: #ff3b71;
    color: #ffffff;
    border: 1px solid #ff3b71;
}
#custom-pc-nav .btn_item_reserve:hover {
    background-color: #e62258;
}

/* ───────────────────────────────────
   【下段】メインメニュー & ドロップダウン
   ─────────────────────────────────── */
#custom-pc-nav .nav_main_menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

#custom-pc-nav .nav_main_menu > li {
    position: relative; /* 子メニューの基準点 */
}

#custom-pc-nav .nav_main_menu > li > a {
    display: flex;          /* 💡 矢印と文字を綺麗に横並びにするためflexに変更 */
    align-items: center;    /* 💡 上下の中央揃え */
    padding: 8px 14px;      /* 左右の余白を少し広げて押しやすく */
    color: #202020;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.7rem;     /* 💡 文字を大きくしました（元は0.9rem） */
    border-radius: 4px;
}
/* ドロップダウンを持つクラス「menu_has_child」のリンクの右側に矢印を出す */
#custom-pc-nav .menu_has_child > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;       /* 文字との間隔 */
    border-right: 2px solid #666; /* 矢印の線の太さと色 */
    border-bottom: 2px solid #666;
    transform: translateY(-2px) rotate(45deg); /* 傾けて下矢印「∨」にする */
    transition: transform 0.2s;
}

/* 親メニューにホバーした時、矢印をくるっと上に向ける（ちょっとしたプロ風の演出） */
#custom-pc-nav .menu_has_child:hover > a::after {
    transform: translateY(1px) rotate(-135deg);
}


#custom-pc-nav .nav_main_menu > li > a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 子メニュー（ドロップダウン）の初期状態 */
#custom-pc-nav .dropdown_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #31b4e5; /* お手本に合わせた綺麗な青 */
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 10000;
    border-radius: 0 0 4px 4px;
    width: max-content;
    min-width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ホバーで表示 */
#custom-pc-nav .menu_has_child:hover .dropdown_menu {
    display: block;
}

/* 子メニュー内のリストアイテム */
#custom-pc-nav .dropdown_menu li {
    display: block;
    margin: 0;
    padding: 0;
}

#custom-pc-nav .dropdown_menu li a {
    display: block;
    padding: 10px 18px;    /* 💡 少し内側の余白を広げて見やすく */
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;     /* 💡 子メニューの文字も少し大きく（元は0.85rem） */
    white-space: nowrap;
    text-align: left;
}

#custom-pc-nav .dropdown_menu li a:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

/* ───────────────────────────────────
   レスポンシブ：スマホ時はPC用ナビを非表示にする
   ─────────────────────────────────── */
@media screen and (max-width: 736px) {
    #custom-pc-nav {
        display: none !important;
    }
}

/* ==========================================================================
   スマホ用ドロワーメニューのレイアウト修正（半透明＆グリッド線なし）
   ========================================================================== */

/* ① メニュー全体の背景を同じ色で統一し、少し透けさせる（RGBの後に0.95で透明度を指定） */
.header2 .nav,
.header2 .nav_inner,
.header2 .nav_list {
    background-color: rgba(0, 41, 188, 0.734) !important; /* 💡 濃い青を94%の濃さで透かしています（下のコンテンツがうっすら見えます） */
    display: block !important;
    border: none !important;
}

/* ② 不要な矢印を非表示 */
.header2 .nav_list .nav_item.has-child::before,
.header2 .nav_list .nav_item.has-child::after,
.header2 .nav_list .nav_item.has-child > a::before,
.header2 .nav_list .nav_item.has-child > a::after {
    display: none !important;
}

/* ③ 親メニューのスタイル（下線を削除してすっきりと） */
.header2 .nav_list .nav_item {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    background: none !important;
    border: none !important; /* 💡 親メニューの区切り線を削除 */
}

.header2 .nav_list .nav_item > a {
    display: block !important;
    padding: 16px 0 8px 0 !important; /* 上下の余白を微調整 */
    font-size: 1.25rem !important;    /* カチッと見せるため少しだけ大きく */
    font-weight: bold !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
}

/* ④ 子メニュー（ul）の背景を親と完全統一（透明）にし、枠線を消す */
.header2 .nav_list .nav_item.has-child ul {
    display: block !important;
    position: static !important;
    transform: none !important;
    background: none !important; /* 💡 背景を親と完全同じ（透明）に統一 */
    box-shadow: none !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border: none !important;
}

/* ⑤ 子メニューのリストとリンク（文字色を完全に白に固定して見やすくする） */
.header2 .nav_list .nav_item.has-child ul li {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.header2 .nav_list .nav_item.sp-has-child ul li a {
    display: block !important;
    padding: 12px 20px !important; /* 💡 上下の余白を少しだけ広げて、スマホでタップしやすくしました */
    font-size: 1.0rem !important;    /* 💡 文字の大きさを視認性の良いサイズに固定 */
    color: #ffffff !important;       /* 💡 完全に真っ白（#ffffff）に強制指定して見づらさを解消！ */
    font-weight: 500 !important;     /* 💡 ほんの少しだけ文字を太くしてクッキリさせます */
    white-space: normal !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    border: none !important;
}

/* CSS側のセレクタも sp-has-child に書き換える */
.header2 .nav_list .nav_item.sp-has-child::before,
.header2 .nav_list .nav_item.sp-has-child::after,
.header2 .nav_list .nav_item.sp-has-child > a::before,
.header2 .nav_list .nav_item.sp-has-child > a::after {
    display: none !important;
}

.header2 .nav_list .nav_item.sp-has-child ul {
    display: block !important;
    position: static !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border: none !important;
}

.header2 .nav_list .nav_item.sp-has-child ul li {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
}
/* ==========================================================================
   ハンバーガーメニュー開閉時の色反転
   ========================================================================== */

/* ハンバーガーが「開いている状態」のときの線と文字を白くする */
#js-hamburger.is-active .hamburger_border,
.header2.open #js-hamburger .hamburger_border,
body.nav-open #js-hamburger .hamburger_border {
    background-color: #ffffff !important;
}

#js-hamburger.is-active .hamburger_text,
.header2.open #js-hamburger .hamburger_text,
body.nav-open #js-hamburger .hamburger_text {
    color: #ffffff !important;
}
/* スマホメニュー内の親リンクへのJS干渉を無効化し、普通にタップできるようにする */
.header2 .nav_list .nav_item.has-child > a {
    pointer-events: auto !important;
}

.sp-br {
  display: none; /* 初期状態（PC）では改行タグを非表示 */
}

@media screen and (max-width: 767px) {
  .sp-br {
    display: block; /* スマホ画面の時だけ改行タグを表示する */
  }
}
/* ==========================================================================
   コンテンツ用：無料説明会予約ボタン（絶対表示版）
   ========================================================================== */
.btn_item_reserve_content {
    display: inline-block !important; /* 💡 最重要：ブロック要素として強制的に表示させる */
    visibility: visible !important;   /* 💡 念のための非表示解除 */
    position: relative !important;    /* 矢印の基準点 */
    background-color: #ff3b71 !important; /* 目立つピンク */
    color: #ffffff !important;        /* 文字色は白 */
    font-size: 2rem !important;     /* 文字の大きさ */
    font-weight: 900 !important;      /* 太字（MAX） */
    letter-spacing: 0.05em !important;
    
    /* 💡 内側の余白をしっかり持たせてボタンの形を維持する */
    padding: 14px 50px 14px 25px !important; 
    
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    
    /* 💡 右下の立体的な影 */
    box-shadow: 3px 3px 0px #ff9ebd !important; 
    
    transition: transform 0.1s, box-shadow 0.1s !important;
    cursor: pointer !important;
    
    /* 💡 テーマの横幅制限に潰されないように対策 */
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 💡 右側の白矢印（＞）を自動挿入 */
.btn_item_reserve_content::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 3px solid #ffffff !important;
    border-right: 3px solid #ffffff !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

/* ホバー＆クリック時の動き */
.btn_item_reserve_content:hover {
    background-color: #ff225d !important;
}

.btn_item_reserve_content:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0px #ff9ebd !important;
}
/* ==========================================================================
   ボタンと電話番号の横並びレイアウト
   ========================================================================== */
.contact_flex_wrap {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center;     /* 上下の中央を揃える */
    gap: 40px;               /* 💡 ボタンと電話番号の間の隙間（お好みで調整してください） */
    margin-bottom: 20px;
    width: 100%;
}

/* 電話番号のリンク装飾をクリア */
.contact_phone_link {
    text-decoration: none !important;
    display: inline-block;
}

.contact_phone_link h3 {
    color: #202020 !important;
    font-weight: bold !important;
    margin: 0 !important; /* 余計な上下余白をリセットしてボタンと高さを揃える */
    white-space: nowrap;  /* 電話番号が途中で改行されるのを防ぐ */
}

/* 📱 スマホ画面（736px以下）になった時は安全に縦並びに戻す設定 */
@media screen and (max-width: 736px) {
    .contact_flex_wrap {
        flex-direction: column; /* 縦並びに変更 */
        gap: 25px;              /* 縦並び時の間隔 */
    }
}

/* ==========================================================================
   コンテンツ用：資料請求ボタン（立体ブルー＆矢印つき）
   ========================================================================== */
.btn_item_blue_content {
    display: inline-block !important;
    visibility: visible !important;
    position: relative !important;
    background-color: #31b4e5 !important; /* 💡 綺麗な青に変更 */
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    padding: 14px 50px 14px 25px !important;
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    
    /* 💡 青ボタンに合わせた少し薄い水色の立体影 */
    box-shadow: 3px 3px 0px #a1e2f6 !important; 
    
    transition: transform 0.1s, box-shadow 0.1s !important;
}

/* 右側の白矢印（＞）を自動挿入 */
.btn_item_blue_content::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 3px solid #ffffff !important;
    border-right: 3px solid #ffffff !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

/* ホバー＆クリック時の動き */
.btn_item_blue_content:hover {
    background-color: #20a3d4 !important; /* ホバー時に少し濃い青に */
}

.btn_item_blue_content:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0px #a1e2f6 !important;
}
/* ==========================================================================
   スマホ専用：画面下部固定の左右並びボタン（PC時は非表示）
   ========================================================================== */
.sticky_button_container {
    display: none !important; 
}

/* 📱 スマホ画面（736px以下）の時の設定 */
@media screen and (max-width: 736px) {
    .sticky_button_container {
        display: flex !important; 
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 8px !important; /* 💡 左右の余白を少しだけ詰めてボタンの横幅を広げました */
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
        gap: 6px !important;         /* 💡 ボタン同士の間隔を少し詰めて、文字が入るスペースを確保 */
        z-index: 99999 !important;
        box-sizing: border-box !important;
    }

    /* スマホ時のボタン均等配置 */
    .sticky_button_container .btn_item_blue_content,
    .sticky_button_container .btn_item_reserve_content {
        flex: 1 !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 0 !important;
        box-shadow: 2px 2px 0px rgba(0,0,0,0.15) !important;
        
        /* ────────────────────────────────────────────────────────────
           💡 ここが解決のポイント！
           固定ボタン内の文字も「vw」指定に変えることで、
           画面幅に合わせて自動縮小し、絶対に改行させず1行に収めます。
           ──────────────────────────────────────────────────────────── */
        font-size: 3.1vw !important; 
        white-space: nowrap !important; /* 💡 念のため、ブラウザに「絶対改行するな」と強制命令 */
    }
    
    /* スマホ時は矢印を非表示 */
    .sticky_button_container .btn_item_blue_content::after,
    .sticky_button_container .btn_item_reserve_content::after {
        display: none !important;
    }
}
/* 📱 スマホ画面の時、コンテンツ内の【ピンク】と【青】のボタンを両方1行に収める */
@media screen and (max-width: 736px) {
    
    /* 💡 カンマ区切りで、ピンクと青の両方に同じ1行化の設定を適用します */
    .btn_item_reserve_content,
    .btn_item_blue_content {
        display: inline-block !important;
        width: 95% !important;        /* 画面幅いっぱいに近く広げて1行のスペースを確保 */
        max-width: 340px !important;  /* 大きくなりすぎないように制限 */
        
        /* ────────────────────────────────────────────────────────────
           💡 ここが最大のポイント！
           「vw」を使うことで、スマホの画面横幅に比例して文字が自動で伸び縮みします。
           これによって、文字数の多い「無料資料請求はこちら」も絶対に1行に収まります。
           ──────────────────────────────────────────────────────────── */
        font-size: 2.8vw !important;  
        
        /* 💡 1行化に伴い、左右のpaddingを少し削って文字領域を広げます */
        padding: 12px 35px 12px 20px !important; 
        box-sizing: border-box !important;
    }

    /* 💡 右側の白矢印（＞）の位置とサイズを微調整 */
    .btn_item_reserve_content::after,
    .btn_item_blue_content::after {
        right: 15px !important;
        width: 6px !important;
        height: 6px !important;
    }
}

/* ===================================================
   1. タイル状（2列固定）の並びを設定
   =================================================== */
.shine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0; /* ▼ すき間を完全にゼロにする */
  padding: 0; /* ▼ 周りの余白もゼロにする */
  max-width: 1200px; /* 全体の最大横幅（サイトに合わせて調整可） */
  margin: 0 auto;
}
/*
@media (max-width: 768px) {
  .shine-grid {
    grid-template-columns: 1fr; /* スマホでは縦1列にぴったり密着 */
	/*
  }
}
*/
/* ===================================================
   2. 画像ボックス（フェードイン ＆ 白マスクの土台）
   =================================================== */
.shine-box {
  position: relative;
  overflow: hidden;
  line-height: 0;
  border-radius: 0; /* ▼ 角丸をなくして完全に四角にする */
  cursor: pointer; /* マウスオンで手袋マーク */

  /* 初期状態（下からフェードイン用） */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: calc(var(--i) * 0.15s);
}

/* フェードイン定義 */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shine-box img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===================================================
   3. 全体を覆う「白マスク」（通常時は透明）
   =================================================== */
.shine-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* 白マスクの薄さ（20%） */
  opacity: 0;
  pointer-events: none;
  /* キランと光り終わるタイミング（0.4秒後）に合わせてフワッと出す */
  transition: opacity 0.3s ease 0.4s; 
}

/* マウスオンで白マスクを表示 */
.shine-box:hover::after {
  opacity: 1;
}

/* ===================================================
   4. 「キラン」と光る白いラインの演出
   =================================================== */
.shine-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

/* マウスオンでキランと光らせる（0.6秒かけて通りぬける） */
.shine-box:hover::before {
  animation: shine-effect 0.6s ease forwards;
}

@keyframes shine-effect {
  0% { left: -150%; }
  100% { left: 150%; }
}
/* ==========================================================================
   トピックタイル（修正版：スクエアで全体表示）
   ========================================================================== */

/* 全体のコンテナ（ここは変更なし） */
.topic-grid-container {
    display: grid;
    gap: 15px; /* タイル同士の隙間 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 各タイルの枠（【修正：長方形から真四角へ】） */
.topic-card {
    position: relative;
    overflow: hidden;
    /* 16 / 9 から 1 / 1 に変更することで、完全に真四角（スクエア）の枠にします */
    aspect-ratio: 1 / 1; 
}

/* 枠内の画像（【修正：トリミングせずに全体表示】） */
.topic-card img {
    width: 100%;
    height: 100%;
    /* 【超重要】：cover から contain に変更します。
       これにより、画像の全体（ロゴや文字すべて）が真四角の枠内に綺麗に収まるようになります。
       画像の比率が真四角でない場合、枠内に余白ができますが、文字は見切れません。 */
    object-fit: contain; 
    display: block;
}
/* カード全体がリンクのときのホバーエフェクト */
.topic-card-link {
    cursor: pointer;
}

.topic-card-link:hover {
    opacity: 0.9; /* 少し透過させる */
    transform: translateY(-4px); /* 上にふわっと4px浮き上がらせる */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* 影を強くして立体感を出す */
}

/* --------------------------------------------------------------------------
   レスポンシブ対応（画面幅による列数のコントロール）
   -------------------------------------------------------------------------- */

/* スマホ・タブレット画面（初期値：2列） */
@media (max-width: 767px) {
    .topic-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2列に均等分割 */
    }
}

/* PC画面（画面幅 768px 以上：3列） */
@media (min-width: 768px) {
    .topic-grid-container {
        grid-template-columns: repeat(3, 1fr); /* 3列に均等分割 */
    }
}

/* ==========================================================================
   共通設定・各セクション間のマージン
   ========================================================================== */
.section-title-wrap,
.topic-grid-container,
.push-section-container,
.banner-section-container,
.menu-tiles-container {
    margin-bottom: 50px; /* 各セクションの間の隙間 */
    width: 100%;
}

/* プッシュセクションの各ブロックをカード化 */
.push-section-container .push-block-wrapper {
    background-color: #ffffff; /* 💡 ここで薄いブルーを指定（お好みに合わせて調整してください） */
    border-radius: 12px;       /* 角丸の具合 */
    padding: 3% 4%;           /* カード内の余白（レスポンシブ対応） */
    box-shadow: 0 4px 15px rgba(0, 87, 187, 0.387); /* ほんのり青みがかった薄い影 */
    box-sizing: border-box;    /* パディングを含めた幅計算にする */
    
    /* 調整：直書きの margin-bottom: 5em; が効いていますが、
       カード同士の間隔として少し広すぎる場合は、CSS側で上書きも可能です */
    margin-bottom: 0 !important; 
}

/* 📱 スマホ画面（736px以下）での微調整 */
@media screen and (max-width: 736px) {
    .push-section-container .push-block-wrapper {
        padding: 5% 4%;        /* スマホ用に上下の余白を少し広めに */
        margin-bottom: 0 !important; /* スマホでのカード同士の間隔 */
    }
}

/* ==========================================================================
   ① トピック見出し
   ========================================================================== */
.main-topic-title {
    text-align: center;
    color: #333;
    font-size: 1.8rem;
    margin-top: 20px;
}

/* ==========================================================================
   ② トピック画像（スクエア・全体表示）
   ========================================================================== */
.topic-grid-container {
    display: grid;
    gap: 15px;
}

.topic-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* 真四角の枠 */
}

.topic-card img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 画像全体を見切れずに表示 */
    display: block;
}

/* レポンシブ（トピック画像） */
@media (max-width: 767px) {
    .topic-grid-container {
        grid-template-columns: repeat(2, 1fr); /* スマホ時は2列 */
    }
}

@media (min-width: 768px) {
    .topic-grid-container {
        grid-template-columns: repeat(3, 1fr); /* PC時は3列 */
    }
}

/* ==========================================================================
   ③ 写真と内容セクション（push）の左右交互レイアウト
   ========================================================================== */
.push-row {
    display: flex;
    flex-direction: column; /* 💡 2列カードの中では常に縦並びにする */
    gap: 15px;
    margin-bottom: 20px;
    align-items: stretch;
}

.push-img-col, 
.push-text-col {
    width: 100% !important; /* 💡 カード幅いっぱいに使う */
}

/* 2列カード内で見出しが突き破らないよう改行を許可 */
.push-text-col h3 {
    white-space: normal !important; /* 💡 nowrap を解除して自然に折り返させる */
    word-break: break-word;
    font-size: 1.3rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .push-text-col h3 {
        font-size: 1.1rem;
    }
}

/* PC画面での設定（横並び＆交互反転） */
@media (min-width: 768px) {
    .push-row {
        flex-direction: row; /* 横並び */
        justify-content: space-between;
    }
    
    .push-img-col, 
    .push-text-col {
        width: 48%; /* 左右ほぼ均等割 */
    }
    
    /* 偶数回目の行（is-reverseクラスがついている場合）は並び順を逆にする */
    .push-row.is-reverse {
        flex-direction: row-reverse;
    }

}


/* ==========================================================================
   ④ バナーセクション（横いっぱいに1枚ずつ縦並び）
   ========================================================================== */
.banner-item {
    width: 100%;
    margin-bottom: 20px;
}

.banner-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   ⑤ タイルメニュー（PC・スマホいつでも2列）
   ========================================================================== */
.menu-tiles-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 常に2列 */
    gap: 15px;
}

.menu-tile-item img {
    width: 100%;
    height: auto;
    display: block;
}

.push-responsive-btn {
    transition: all 0.3s ease; /* なめらかに変化させる */
}

/* 既存のボタンのクラスに「orange-hover」を追加したので、これにホバーした時を指定します */
.orange-hover:hover {
    /* オレンジ色への変更を強制適用 */
    background: linear-gradient(90deg, #ff9900 0%, #ffb347 100%) !important;
    
    /* ホバー時に文字色を白にして見やすくします */
    color: #ffffff !important;
    
    /* 動きの演出（既存の設定に追加して指定） */
    transition: all 0.3s ease !important;
    transform: translateY(2px) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* ボタン全体を中央寄せにする外枠 */
.select-reason-btn-wrap {
    text-align: center;
    margin: 2.5em auto; /* 上下の余白（バランスを見て調整してください） */
    padding: 0 15px;
}

/* ボタン本体のスタイル */
.select-reason-btn {
    display: inline-block;
    width: 100%;
    max-width: 600px; /* ボタンの最大横幅 */
    padding: 1.2em 2em; /* ボタンの上下・左右の厚み */
    
    /* 配色：ホームページのヘッダーや帯に合わせた鮮やかな青のグラデーション */
    background: linear-gradient(180deg, #3fa7e4 0%, #177ec3 100%);
    
    /* 文字の装飾：白文字で太字 */
    color: #ffffff !important;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.05em;
    
    /* 形状：ヘッダーのボタン等に合わせた綺麗な角丸 */
    border-radius: 10px; 
    
    /* 境界線：イメージに合わせた少し濃い青の細いフチ線 */
    border: 4px solid #d8c600;
    
    /* 影：少し立体感を出して「押せるボタン」であることを強調 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* 動きのなめらかさ */
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 矢印アイコンを擬似的に右側へ追加 */
.select-reason-btn::after {
    content: '▷';
    font-size: 0.8em;
    margin-left: 0.8em;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* マウスオン（ホバー）したときの動き */
@media (hover: hover) {
    .select-reason-btn:hover {
        /* マウスを乗せると少し明るくなり、上にふわっと浮き上がる */
        filter: brightness(1.08);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);

        /* 💡 ここを追加：テーマ側が勝手につける下線や枠線を完全に消し去ります */
        border-bottom: 4px solid #d8c600 !important; /* 下側だけ水色に上書きされるのを防ぐ */
        text-decoration: none !important;            /* リンクの下線を強制非表示 */
        outline: none !important;                    /* 外側の謎の線を非表示 */
    }
    /* マウスを乗せると右側の矢印だけが少し右にピコッと動く */
    .select-reason-btn:hover::after {
        transform: translateX(3px);
    }
}

/* 📱 スマホ画面（横幅768px以下）での見え方調整 */
@media screen and (max-width: 768px) {
    .select-reason-btn {
        font-size: 1.1em; /* スマホでは文字を少しだけ小さくして1行に収まりやすく */
        padding: 1em 1.5em;
    }
}
/* 💡 この指導団体エリアのrowだけにflexを適用 */
.row.org-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* 左右の箱全体の高さを引き揃える */
}

/* 💻 パソコン画面のとき、各パーツのスタート位置を完全に一致させる */
@media screen and (min-width: 737px) {
    .org-logos-row .col-6 {
        display: flex;
        flex-direction: column;
    }
    
    /* 1. ロゴ画像の高さを制限し、下ラインを揃える */
    .org-logos-row .col-6 img.responsive {
        height: 140px;       /* ロゴの表示高さを一律で固定（バランスを見て調整してください） */
        object-fit: contain; /* 画像が縦横に歪むのを防ぐ */
        object-position: bottom; /* 画像を下詰めにすることで、次の文字への距離を一定にする */
        width: 100%;
        margin-bottom: 20px;
    }

    /* 2. 見出し（h2）の高さを固定して、次の「（指導団体名）」の開始位置を揃える */
    .org-logos-row .col-6 h2 {
        height: 1.5em;
        margin: 0 0 10px 0;
    }

    /* 3. サブタイトル（h5）の高さを固定して、本文の開始位置を揃える */
    .org-logos-row .col-6 h5 {
        height: 1.5em;
        margin: 0 0 15px 0;
    }
    
    /* 4. 本文（pタグ）は残りのスペースをすべて使って上詰めで配置 */
    .org-logos-row .col-6 p {
        flex-grow: 1;
        margin-top: 0;
    }
}

/* タイルを囲むコンテナ（親要素） */
.menu-tiles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* タイル同士の隙間（上下左右共通で少しコンパクトに） */
    width: 100%;
    margin: 2em 0;
    box-sizing: border-box;
}

/* タイル1枚あたりの設定（子要素） */
.menu-tiles-container .menu-tile-item {
    display: block;
    /* 💡 隙間（15px×3箇所＝45px）を差し引いた4列分の計算幅 */
    width: calc((100% - 45px) / 4); 
    background-color: #ffffff;
    border-radius: 8px;        /* 角丸 */
    overflow: hidden;          /* 画像の角丸も丸めるため */
    box-shadow: 0 4px 12px rgba(0,0,0,0.07); /* 軽い影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    box-sizing: border-box;
}

/* マウスオン時の動き（リンク付きの場合にふわっと浮き上がる） */
.menu-tiles-container a.menu-tile-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* 画像の縦横比を強制的に統一したい場合 */
.menu-tiles-container .menu-tile-img-wrap {
    width: 100%;
    aspect-ratio: 8 / 4.5; /* 比率を固定 */
    overflow: hidden;
    position: relative;    /* 白マスクの基準点 */
}

.menu-tiles-container .menu-tile-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠線に合わせて画像を中央で綺麗にトリミング */
    transition: transform 0.3s ease; /* 画像拡大を滑らかにするため */
}

/* ==========================================
   💡 マウスオン（ホバー）時の白マスク設定
   ========================================== */

/* 1. 擬似要素を使って画像の上に透明な膜を仕込む */
.menu-tiles-container .menu-tile-img-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4); /* 白マスクの濃さ（40%） */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

/* 2. リンク（aタグ）がホバーされた時、マスクを表示する */
.menu-tiles-container a.menu-tile-item:hover .menu-tile-img-wrap::after {
    opacity: 1;
}

/* 3. ホバー時に画像も少しだけ拡大してリッチにする設定 */
.menu-tiles-container a.menu-tile-item:hover .menu-tile-img-wrap img {
    transform: scale(1.04);
}

/* ========================================== */

/* 📱 スマホ・タブレット画面でのレスポンシブ設定 */
@media screen and (max-width: 992px) {
    /* 💡 画面幅が少し狭くなったら、隙間を10pxに縮めて2列にする */
    .menu-tiles-container {
        gap: 10px;
        margin: 1em 0;
    }
    .menu-tiles-container .menu-tile-item {
        /* 隙間（10px）を引いた2列分の計算幅 */
        width: calc((100% - 10px) / 2); 
        border-radius: 6px;
    }
}
/* レイアウト全体のコンテナ */
.enjoy-container {
    width: 100%;
    margin-bottom: 50px;
}
.plan-main-title {
    font-size: 1.4em;
    margin-top: 40px;
    margin-bottom: 15px;
    padding-bottom: 5px;
}
/* 1件ずつの行スタイル（Flexboxで左右に並べる） */
.enjoy-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 4%; /* 左右の余白 */
}
/* 2件目以降（偶数）は左右を反転 */
.enjoy-row.reverse {
    flex-direction: row-reverse;
}
/* 画像カラムとテーブルカラムをそれぞれ50%ずつに設定（隙間を考慮して48%） */
.enjoy-image-col,
.enjoy-table-col {
    width: 48%;
    box-sizing: border-box;
}
/* 画像を正方形（スクエア）にするためのCSS */
.square-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* これで1:1の正方形になります */
    overflow: hidden;
    background-color: #f0f0f0;
}
.square-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を維持してスクエアにトリミング */
}
.square-image-wrapper .no-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aaa;
}

/* レスポンシブ対応：スマホ表示時は縦並びにする（必要に応じて） */
@media (max-width: 768px) {
    .enjoy-row, .enjoy-row.reverse {
        flex-direction: column;
    }
    .enjoy-image-col, .enjoy-table-col {
        width: 100%;
        margin-bottom: 20px;
    }
}
/* ① タイル画像のグリッド表示 (4カラムで均等配置・スクエア風に自動調整) */
.fun-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}
.fun-tile-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* アスペクト比 1:1 */
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.fun-tile-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ② ファンダイビングコメント */
.fun-comment-section {
    margin: 30px 0 40px;
    font-size: 110%;
    line-height: 1.8;
    color: #333;
}

/* ③ プランテーブル (枠線やセルの整え) */

.price-cell {
    color: #dd3333;
    font-weight: bold;
}

/* スマホ表示のレスポンシブ対応 */
@media (max-width: 768px) {
    .fun-tiles-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホでは2列配置 */
        gap: 10px;
    }
    .fun-plan-table, .fun-plan-table tbody, .fun-plan-table tr, .fun-plan-table td, .fun-plan-table th {
        display: block; /* テーブルをブロック化して縦並び化 */
        width: 100%;
    }
    .fun-plan-table th {
        display: none; /* 見出しはスマホでは隠す */
    }
    .fun-plan-table td {
        border-bottom: none;
        box-sizing: border-box;
    }
    .fun-plan-table tr {
        border-bottom: 2px solid #ccc;
        margin-bottom: 15px;
    }
    .plan-name-cell, .included-cell {
        rowspan: none !important; /* スマホ時の結合解除 */
    }
}

/* ページ全体 */
.refresh-page-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* YouTube動画グリッド */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
}
.video-item {
    width: 100%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.iframe-embed-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9アスペクト比 */
}
.iframe-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 既存の .table-wrapper 内で使うテーブル微調整 */
.refresh-plan-table, .overview-table {
    width: 100% !important;
}
.refresh-plan-table th, .refresh-plan-table td,
.overview-table th, .overview-table td {
    vertical-align: top;
}

.plan-badge {
    background-color: #e2f0fe;
    color: #0073aa;
    font-size: 0.65em; /* 120%に拡大された時のバランス調整 */
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}
.price-num {
    color: #ff3b30; /* 料金テキストの色 */
}

/* レンタル器材料金の孫テーブル */
.nested-table-cell {
    padding: 0 !important; /* 親テーブルのパディングを相殺 */
}
.rental-sub-table {
    width: 100%;
    border-collapse: collapse;
}
.rental-sub-table td {
    border: none !important; /* 親枠線のスタイルとバッティングさせない */
    padding: 10px 0 !important;
}
.rental-item-name {
    text-align: left;
}
.rental-item-price {
    text-align: right;
    font-weight: bold;
}

/* 📱 スマートフォンでのレスポンシブ対応 */
@media screen and (max-width: 768px) {
    /* YouTube動画を1カラムにする */
    .video-grid {
        grid-template-columns: 1fr;
    }
}

.custom-zoom-in {
  opacity: 0;
  transform: scale(0.3); /* 最初は30%の大きさに縮小 */
  animation: zoomInAnime 1s ease-out 0.1s forwards; /* 0.3秒かけて、0.1秒遅れて実行 */
}
 @media (max-width: 767px) {
        .custom-zoom-in {
            font-size: 1.8em !important; /* 幅に合わせて少し調整（2emでもOK） */
            line-height: 1.15 !important; /* 折り返しと同じくらいの狭い行間に指定 */
        }
    }

@keyframes zoomInAnime {
  to {
    opacity: 1;
    transform: scale(1); /* 元の大きさに戻す */
  }
}
/* 共通のアニメーション定義（位置と透明度を元に戻す） */
@keyframes fadeMoveAnime {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ベースの共通設定 */
.fade-in-left,
.fade-in-right,
.fade-in-top,
.fade-in-bottom {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* 動作を滑らかにするおまじない */
}

/* 初期位置（ずらしておく） */
.fade-in-left   { transform: translateX(-100px); } /* ※スマホ等では100px程度が見やすいです */
.fade-in-right  { transform: translateX(100px); }
.fade-in-top    { transform: translateY(-30px); }
.fade-in-bottom { transform: translateY(30px); }

/* スクロールして画面に入った時（.is-showクラスがついた時）の着地点 */
.fade-in-left.is-show,
.fade-in-right.is-show,
.fade-in-top.is-show,
.fade-in-bottom.is-show {
  opacity: 1;
  transform: translate(0, 0); /* 元の位置に戻す */
}



.list-item:not(:last-child) {
  border-right: 1px solid #ccc;
  padding-right: 10px;
}

@media screen and (max-width: 768px) {
    /* 最後の項目以外（ダイビング、スノーボード、サップ）の下に線と下余白をつける */
    .list-item:not(:last-child) {
        border-right: 0;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
    }

    /* 2番目以降の列（スノーボード、サップ、フィッシング）の上に10pxの余白をつける */
    .list-item:nth-child(n+2) {
        padding-top: 10px;
    }
}
/* 各リンクに破線とタップしやすい余白を追加 */
.list-item a {
    display: block;                  /* リンク全体を領域化してタップしやすくする */
    border-bottom: 1px dashed #ccc;   /* 下に破線を引く */
    padding: 1px 0;                  /* 上下に適度な隙間を作る */
    text-decoration: none;           /* デフォルトの下線を消す */
}

/* 各リンクに破線とタップしやすい余白を追加 */
.list-item a {
    display: block;                  /* 行全体をタップ可能に */
    border-bottom: 1px dashed #ccc;   /* 下に破線 */
    padding: 6px 0;                  /* 上下の押しやすさ用余白 */
    text-decoration: none;           /* デフォルトの下線を消す */
    transition: font-weight 0.1s;    /* 滑らかに変化させる */
}

/* 各リンクの基本指定 */
.list-item a {
    display: block;                  /* 行全体をタップ可能に */
    border-bottom: 1px dashed #ccc;   /* 下に破線 */
    padding: 6px 8px;                /* 上下6px、左右8pxの余白（背景色が見やすくするため） */
    text-decoration: none;           /* デフォルトの下線を消す */
    border-radius: 4px;              /* ホバー時の背景色の角を少し丸くする */
    transition: background-color 0.2s;/* 色の変化を滑らかにする */
}

/* ホバー時＆スマホでタップした瞬間に薄い水色にする */
.list-item a:hover,
.list-item a:active {
    background-color: #fff789;       /* 薄い水色 */
}

/* 各グループの一番最後のリンクだけ破線を消す */
.list-item a:last-child {
    border-bottom: none;
}

/* ===============================================
   タイルのホバーエフェクト専用CSS（修正版）
   =============================================== */
.tile-hover-item {
    display: block;
    position: relative;
    border-radius: 0; /* 角丸（画像やデザインに合わせて調整可） */
    overflow: hidden;   /* 角丸からマスクがはみ出るのを防ぐ */
    
    /* ★画像は動かさないのでtransformとtransitionはここから削除 */
}

/* ★超重要：画像の下にできる意図しない「隙間（魔の余白）」を消し去る */
.tile-hover-item img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom; /* 保険として */
}

/* ホバー時にかぶせる白マスク（初期状態は透明） */
.tile-hover-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.25); /* 白マスクの濃さ */
    opacity: 0;
    
    /* マスクと影の変化を滑らかに */
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
    
    pointer-events: none; /* クリック操作を透過させる */
}

/* --- マウスオン（ホバー）時の動作 --- */

/* ★画像そのものは動かさないのでtransformは書かない */

/* 白マスクを表示し、影を追加する */
.tile-hover-item:hover::after {
    opacity: 1;
    
    /* 画像を動かさず、下にソフトな影を追加して浮遊感を出す */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); 
}

 @media (max-width: 767px) {
        .obi-midashi {
            font-size: 1.6em !important; /* 幅に合わせて少し調整（2emでもOK） */
            line-height: 1.15 !important; /* 折り返しと同じくらいの狭い行間に指定 */
        }
    }
	
	.full-width-catch-band {
    /* --- ベーススタイル --- */
    position: relative !important; /* 三角形の位置基準のために必須 */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: linear-gradient(90deg, #003e96 0%, #0064df 50%, #008adf 100%) !important;
    padding: 2.5em 0 !important;
    text-align: center;
    margin-top: 3em !important;
    margin-bottom: 3em !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1), inset 0 -2px 5px rgba(0,0,0,0.1);
    transform: skewY(0deg);
}

/* --- 下中央の高さ50pxの三角形（吹き出し） --- */
.full-width-catch-band::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -30px !important; /* 高さ50px分下に飛び出させる */
    transform: translateX(-50%) !important; /* 真ん中に配置 */
    
    /* 三角形の作成（高さ50px / 横幅100px） */
    border-style: solid !important;
    border-width: 30px 15px 0 15px !important; 
    
    /* 背景の中央色（#0064df）に合わせて色を統一 */
    border-color: #0064df transparent transparent transparent !important;
    
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}
.tile-menu-margin{
	margin-top:-1em;
}
 @media (max-width: 767px) {
	.tile-menu-margin{
	margin-top:-0.3em;
}
 }